From 685d99956c5e6e965809f1c8cba9b9c341ec2458 Mon Sep 17 00:00:00 2001
From: Travis Raup <travis.raup@platform.sh>
Date: Wed, 15 Feb 2023 20:44:11 -0500
Subject: [PATCH] Refactor to chartjs

---
 controllers/StockController.php       |  2 +-
 public/viewjs/metrics.js              | 54 ++++++++++++++++++---------
 views/stockmetricspurchases.blade.php |  4 +-
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/controllers/StockController.php b/controllers/StockController.php
index f75e6d0a..78b610ec 100644
--- a/controllers/StockController.php
+++ b/controllers/StockController.php
@@ -555,7 +555,7 @@ class StockController extends BaseController
 		}
 
 		return $this->renderPage($response, 'stockmetricspurchases', [
-			'metrics' =>  $this->getDatabaseService()->ExecuteDbQuery($sql)->fetchAll(\PDO::FETCH_OBJ),
+			'metrics' => $this->getDatabaseService()->ExecuteDbQuery($sql)->fetchAll(\PDO::FETCH_OBJ),
 			'productGroups' => $this->getDatabase()->product_groups()->orderBy('name', 'COLLATE NOCASE'),
 			'selectedGroup' => isset($request->getQueryParams()['product_group']) ?  $request->getQueryParams()['product_group'] : null,
 			'byGroup' => isset($request->getQueryParams()['byGroup']) ? $request->getQueryParams()['byGroup'] : null
diff --git a/public/viewjs/metrics.js b/public/viewjs/metrics.js
index 27caeb26..8dc05290 100644
--- a/public/viewjs/metrics.js
+++ b/public/viewjs/metrics.js
@@ -5,31 +5,51 @@
 /* Charting */
 var labels = [];
 var data = [];
+var totalAmount = 0;
 $("#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'));
-	labels.push(label);
-	data.push(parseFloat((Math.round(value * 100) / 100).toFixed(2)));
+	labels.push(self.find("td:eq(0)").attr('data-chart-label'));
+	var itemTotalRaw = parseFloat(self.find("td:eq(1)").attr('data-chart-value'));
+	var itemTotal = parseFloat((Math.round(itemTotalRaw * 100) / 100).toFixed(2));
+	data.push(itemTotal);
+	totalAmount = (parseFloat(totalAmount) + parseFloat(itemTotal)).toFixed(2);
 });
 
-function getRandomColor() {
-	var letters = '0123456789ABCDEF'.split('');
-	var color = '#';
-	for (var i = 0; i < 6; i++ ) {
-		color += letters[Math.floor(Math.random() * 16)];
-	}
-	return color;
-}
-
-var colors=[];
+var backgroundColorChoices=['#6C747C',
+							'#BFB8A4',
+							'#BFADA4',
+							'#4F575E',
+							'#918B78',
+							'#343A40',
+							'#635E4F',
+							'#63554F',
+							'#1A1F24',
+							'#383426',
+							'#382C26',
+							'#121B25',
+							'#383119',
+							'#382319']
+var backgroundColors=[];
+var colorChoiceIndex = 0;
 for(let i=0;i<data.length;i++){
-	colors.push('#'+Math.floor(Math.random()*16777215).toString(16));
+	if ((i + 1) == (backgroundColorChoices.length)){
+		// restart background color choices
+		colorChoiceIndex = 1;
+	}
+	backgroundColors.push(backgroundColorChoices[colorChoiceIndex]);
+	colorChoiceIndex++;
 }
 
 var metricsChart = new Chart('metrics-chart', {
 	type: 'outlabeledDoughnut',
 	options: {
+		legend: {
+			display: false
+		},
+		tooltips: {
+			enabled: false
+		},
+		tooltips: {enabled: false},
 		plugins: {
 			outlabels: {
 				text: '%l %p',
@@ -45,7 +65,7 @@ var metricsChart = new Chart('metrics-chart', {
 			doughnutlabel: {
 				labels: [
 					{
-						text: 'TBD',
+						text: totalAmount,
 						font: {
 							size: 30,
 							weight: 'bold',
@@ -62,7 +82,7 @@ var metricsChart = new Chart('metrics-chart', {
 		labels: labels,
 		datasets: [{
 			data: data,
-			backgroundColor: colors
+			backgroundColor: backgroundColors
 		}]
 	}
 });
diff --git a/views/stockmetricspurchases.blade.php b/views/stockmetricspurchases.blade.php
index 6642ff50..d6c83b35 100644
--- a/views/stockmetricspurchases.blade.php
+++ b/views/stockmetricspurchases.blade.php
@@ -51,7 +51,7 @@
 
 <div class="row collapse d-md-flex"
 	 id="table-filter-row">
-	<div class="col-sm-12 col-md-6 col-xl-3">
+	<div class="col-sm-12 col-md-6 col-xl-4">
 		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fa-solid fa-clock"></i>&nbsp;{{ $__t('Date range') }}</span>
@@ -60,7 +60,7 @@
 		</div>
 	</div>
 	@if(!$byGroup)
-		<div class="col-sm-12 col-md-6 col-xl-3">
+		<div class="col-sm-12 col-md-6 col-xl-4">
 			<div class="input-group">
 				<div class="input-group-prepend">
 					<span class="input-group-text"><i class="fa-solid fa-filter"></i>&nbsp;{{ $__t('Product group') }}</span>