github-mirror/grocy
1
0
Fork 0
mirror of https://github.com/grocy/grocy.git synced 2026-04-08 05:36:15 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor to chartjs

Browse Source
This commit is contained in:
Travis Raup 2023-02-15 20:44:11 -05:00
parent dc22f6e571
commit 685d99956c
3 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
controllers/StockController.php
View File

@ -555,7 +555,7 @@ class StockController extends BaseController
} }
return $this->renderPage($response, 'stockmetricspurchases', [ 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'), 'productGroups' => $this->getDatabase()->product_groups()->orderBy('name', 'COLLATE NOCASE'),
'selectedGroup' => isset($request->getQueryParams()['product_group']) ? $request->getQueryParams()['product_group'] : null, 'selectedGroup' => isset($request->getQueryParams()['product_group']) ? $request->getQueryParams()['product_group'] : null,
'byGroup' => isset($request->getQueryParams()['byGroup']) ? $request->getQueryParams()['byGroup'] : null 'byGroup' => isset($request->getQueryParams()['byGroup']) ? $request->getQueryParams()['byGroup'] : null

54
public/viewjs/metrics.js
View File

@ -5,31 +5,51 @@
/* Charting */ /* Charting */
var labels = []; var labels = [];
var data = []; var data = [];
var totalAmount = 0;
$("#metrics-table tbody tr").each(function () { $("#metrics-table tbody tr").each(function () {
var self = $(this); var self = $(this);
var label = self.find("td:eq(0)").attr('data-chart-label'); labels.push(self.find("td:eq(0)").attr('data-chart-label'));
var value = Number(self.find("td:eq(1)").attr('data-chart-value')); var itemTotalRaw = parseFloat(self.find("td:eq(1)").attr('data-chart-value'));
labels.push(label); var itemTotal = parseFloat((Math.round(itemTotalRaw * 100) / 100).toFixed(2));
data.push(parseFloat((Math.round(value * 100) / 100).toFixed(2))); data.push(itemTotal);
totalAmount = (parseFloat(totalAmount) + parseFloat(itemTotal)).toFixed(2);
}); });
function getRandomColor() { var backgroundColorChoices=['#6C747C',
var letters = '0123456789ABCDEF'.split(''); '#BFB8A4',
var color = '#'; '#BFADA4',
for (var i = 0; i < 6; i++ ) { '#4F575E',
color += letters[Math.floor(Math.random() * 16)]; '#918B78',
} '#343A40',
return color; '#635E4F',
} '#63554F',
'#1A1F24',
var colors=[]; '#383426',
'#382C26',
'#121B25',
'#383119',
'#382319']
var backgroundColors=[];
var colorChoiceIndex = 0;
for(let i=0;i<data.length;i++){ 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', { var metricsChart = new Chart('metrics-chart', {
type: 'outlabeledDoughnut', type: 'outlabeledDoughnut',
options: { options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
tooltips: {enabled: false},
plugins: { plugins: {
outlabels: { outlabels: {
text: '%l %p', text: '%l %p',
@ -45,7 +65,7 @@ var metricsChart = new Chart('metrics-chart', {
doughnutlabel: { doughnutlabel: {
labels: [ labels: [
{ {
text: 'TBD', text: totalAmount,
font: { font: {
size: 30, size: 30,
weight: 'bold', weight: 'bold',
@ -62,7 +82,7 @@ var metricsChart = new Chart('metrics-chart', {
labels: labels, labels: labels,
datasets: [{ datasets: [{
data: data, data: data,
backgroundColor: colors backgroundColor: backgroundColors
}] }]
} }
}); });

4
views/stockmetricspurchases.blade.php
View File

@ -51,7 +51,7 @@
<div class="row collapse d-md-flex" <div class="row collapse d-md-flex"
id="table-filter-row"> 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">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text"><i class="fa-solid fa-clock"></i>&nbsp;{{ $__t('Date range') }}</span> <span class="input-group-text"><i class="fa-solid fa-clock"></i>&nbsp;{{ $__t('Date range') }}</span>
@ -60,7 +60,7 @@
</div> </div>
</div> </div>
@if(!$byGroup) @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">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text"><i class="fa-solid fa-filter"></i>&nbsp;{{ $__t('Product group') }}</span> <span class="input-group-text"><i class="fa-solid fa-filter"></i>&nbsp;{{ $__t('Product group') }}</span>