mirror of
https://github.com/grocy/grocy.git
synced 2026-04-04 03:46:16 +02:00
Refactor to chartjs
This commit is contained in:
parent
dc22f6e571
commit
685d99956c
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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> {{ $__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> {{ $__t('Product group') }}</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user