mirror of
https://github.com/grocy/grocy.git
synced 2026-04-04 03:46:16 +02:00
chart update
This commit is contained in:
Travis Raup
parent
24b178fe75
commit
dc22f6e571
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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))};
|
||||
dataPoints.push(dataPoint);
|
||||
labels.push(label);
|
||||
data.push(parseFloat((Math.round(value * 100) / 100).toFixed(2)));
|
||||
});
|
||||
|
||||
var options = {
|
||||
exportEnabled: true,
|
||||
legend:{
|
||||
horizontalAlign: "center",
|
||||
verticalAlign: "bottom"
|
||||
},
|
||||
data: [{
|
||||
type: "pie",
|
||||
showInLegend: true,
|
||||
toolTipContent: "<b>{label}</b>: ${y} (#percent%)",
|
||||
indexLabel: "{label}",
|
||||
legendText: "{label} (#percent%)",
|
||||
indexLabelPlacement: "outside",
|
||||
valueFormatSTringt: "#,##0.##",
|
||||
dataPoints: dataPoints
|
||||
}]
|
||||
};
|
||||
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=[];
|
||||
for(let i=0;i<data.length;i++){
|
||||
colors.push('#'+Math.floor(Math.random()*16777215).toString(16));
|
||||
}
|
||||
|
||||
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({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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="metrics-chart" style="height: 400px;"></div>
|
||||
<div id="chart-wrapper" class="col-sm-12 col-md-12 col-xl-12">
|
||||
<canvas id="metrics-chart"></canvas>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-12 col-xl-12">
|
||||
<table id="metrics-table"
|
||||
|
|
|
|||
17
yarn.lock
17
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:
|
||||
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:
|
||||
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==
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user