chart update

package.json

@@ -13,6 +13,8 @@
 		"bwip-js": "^3.0.1",
 		"canvasjs": "^1.8.3",
 		"chart.js": "^2.8.0",
+		"chartjs-plugin-doughnutlabel": "^2.0.3",
+		"chartjs-plugin-piechart-outlabels": "^0.1.4",
 		"datatables.net": "^1.10.22",
 		"datatables.net-bs4": "^1.10.22",
 		"datatables.net-colreorder": "^1.5.2",

public/viewjs/metrics.js

@@ -3,36 +3,70 @@
  */
 
 /* Charting */
-var dataPoints = [];
+var labels = [];
+var data = [];
 $("#metrics-table tbody tr").each(function () {
 	var self = $(this);
 	var label = self.find("td:eq(0)").attr('data-chart-label');
 	var value = Number(self.find("td:eq(1)").attr('data-chart-value'));
-	var dataPoint = { label: label, y: parseFloat((Math.round(value * 100) / 100).toFixed(2))};
+	labels.push(label);
-	dataPoints.push(dataPoint);
+	data.push(parseFloat((Math.round(value * 100) / 100).toFixed(2)));
 });
 
-var options = {
+function getRandomColor() {
-	exportEnabled: true,
+	var letters = '0123456789ABCDEF'.split('');
-	legend:{
+	var color = '#';
-		horizontalAlign: "center",
+	for (var i = 0; i < 6; i++ ) {
-		verticalAlign: "bottom"
+		color += letters[Math.floor(Math.random() * 16)];
-	},
+	}
-	data: [{
+	return color;
-		type: "pie",
+}
-		showInLegend: true,
+
-		toolTipContent: "<b>{label}</b>: ${y} (#percent%)",
+var colors=[];
-		indexLabel: "{label}",
+for(let i=0;i<data.length;i++){
-		legendText: "{label} (#percent%)",
+	colors.push('#'+Math.floor(Math.random()*16777215).toString(16));
-		indexLabelPlacement: "outside",
+}
-		valueFormatSTringt: "#,##0.##",
+
-		dataPoints: dataPoints
+var metricsChart = new Chart('metrics-chart', {
-	}]
+	type: 'outlabeledDoughnut',
-};
+	options: {
+		plugins: {
+			outlabels: {
+				text: '%l %p',
+				backgroundColor: "#343a40",
+				color: 'white',
+				stretch: 45,
+				font: {
+					resizable: true,
+					minSize: 12,
+					maxSize: 18
+				}
+			},
+			doughnutlabel: {
+				labels: [
+					{
+						text: 'TBD',
+						font: {
+							size: 30,
+							weight: 'bold',
+						},
+					},
+					{
+						text: 'total',
+					}
+				]
+			}
+		}
+	},
+	data: {
+		labels: labels,
+		datasets: [{
+			data: data,
+			backgroundColor: colors
+		}]
+	}
+});
 
-// needed for recursionCount error
-recursionCount=0;
-$("#metrics-chart").CanvasJSChart(options);
 
 /* DataTables */
 var metricsTable = $('#metrics-table').DataTable({

views/layout/default.blade.php

@@ -737,7 +737,6 @@
 	<script src="{{ $U('/node_modules/jquery-lazy/jquery.lazy.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/nosleep.js/dist/NoSleep.min.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/node_modules/daterangepicker/daterangepicker.js?v=', true) }}{{ $version }}"></script>
-	<script src="{{ $U('/node_modules/canvasjs/dist/jquery.canvasjs.min.js?v=', true) }}{{ $version }}"></script>
 
 	<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>

views/stockmetricspurchases.blade.php

@@ -2,7 +2,15 @@
 
 @section('title', $__t('Stock Metrics: Purchases'))
 @section('activeNav', 'stockmetricspurchases')
-@section('viewJsName', 'metrics')
+
+@once
+	@push('componentScripts')
+	<script src="{{ $U('/node_modules/chart.js/dist/Chart.min.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/chartjs-plugin-doughnutlabel/dist/chartjs-plugin-doughnutlabel.js?v=', true) }}{{ $version }}"></script>
+	<script src="{{ $U('/node_modules/chartjs-plugin-piechart-outlabels/dist/chartjs-plugin-piechart-outlabels.js?v=', true) }}{{ $version}}"></script>
+	<script src="{{ $U('/viewjs/metrics.js', true) }}?v={{ $version }}"></script>
+	@endpush
+@endonce
 
 @section('content')
 <div class="row">
@@ -83,8 +91,8 @@
 </div>
 
 <div class="row mt-2">
-	<div class="col-sm-12 col-md-12 col-xl-12">
+	<div id="chart-wrapper" class="col-sm-12 col-md-12 col-xl-12">
-		<div id="metrics-chart" style="height: 400px;"></div>
+		<canvas id="metrics-chart"></canvas>
 	</div>
 	<div class="col-sm-12 col-md-12 col-xl-12">
 		<table id="metrics-table"

yarn.lock

@@ -168,6 +168,16 @@ chartjs-color@~2.2.0:
     chartjs-color-string "^0.5.0"
     color-convert "^0.5.3"
 
+chartjs-plugin-doughnutlabel@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-doughnutlabel/-/chartjs-plugin-doughnutlabel-2.0.3.tgz#0aa19b040dc68e12163e3215a01609cb3e0b5a7b"
+  integrity sha512-it815BZSPggTkyhC3b4BVqDwlySKtzO0kZ11DCUs/nD29DGoj6w5luDu4slczg97ml7VRROHawxlS0HvGEIVdw==
+
+chartjs-plugin-piechart-outlabels@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-piechart-outlabels/-/chartjs-plugin-piechart-outlabels-0.1.4.tgz#e97e19a12202d74f9040d9e4641987c9d1e458fc"
+  integrity sha512-IaYkh6ab8nLAvgioQ+BwU0awfMbxwmfO2AeBL+S45VVx9AdObovr9+aE+ShUO2Og96y6eJpCxZGJr4zXB7YnRw==
+
 color-convert@^0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
@@ -491,12 +501,7 @@ jquery@3.3.1:
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
   integrity sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==
 
-jquery@>=1.10:
+jquery@>=1.10, jquery@>=1.12.0, jquery@>=1.7, jquery@>=1.7.2, jquery@^3.6.0:
-  version "3.6.3"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
-  integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==
-
-jquery@>=1.12.0, jquery@>=1.7, jquery@>=1.7.2, jquery@^3.6.0:
   version "3.6.3"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
   integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==