123 lines
4.3 KiB
JavaScript
123 lines
4.3 KiB
JavaScript
import ChartDataLabels from 'chartjs-plugin-datalabels';
|
|
import Chart from 'chart.js/auto';
|
|
|
|
Chart.register(ChartDataLabels);
|
|
window.Chart = Chart;
|
|
window.filamentChartJsPlugins ??= [];
|
|
|
|
if (!window.filamentChartJsPlugins.includes(ChartDataLabels)) {
|
|
window.filamentChartJsPlugins.push(ChartDataLabels);
|
|
}
|
|
|
|
// window.filamentChartJsPlugins.push(ChartDataLabels);
|
|
|
|
// Chart.defaults.plugins.datalabels = {
|
|
// anchor: 'end',
|
|
// align: 'right',
|
|
// color: '#000',
|
|
// font: {
|
|
// weight: 'bold',
|
|
// size: 11,
|
|
// },
|
|
// formatter: (value) => `${value} min`,
|
|
// backgroundColor: function (context) {
|
|
// const value = context.dataset.data[context.dataIndex];
|
|
// return Number(value) !== 0 ? 'rgba(40, 167, 69, 0.1)' : 'transparent';
|
|
// },
|
|
// };
|
|
|
|
// Set global datalabel options
|
|
// ChartDataLabels.defaults.anchor = 'end'; // or 'start', 'center', etc.
|
|
// ChartDataLabels.defaults.align = 'right'; // or 'left', 'top', 'bottom', etc.
|
|
// // // Conditionally set backgroundColor
|
|
// ChartDataLabels.defaults.backgroundColor = function(context) {
|
|
// const value = context.dataset.data[context.dataIndex];
|
|
// return Number(value) !== 0 ? 'rgba(40, 167, 69, 0.1)' : 'transparent';
|
|
// };
|
|
|
|
// // // Conditionally set borderRadius
|
|
// ChartDataLabels.defaults.borderRadius = function(context) {
|
|
// const value = context.dataset.data[context.dataIndex];
|
|
// return Number(value) !== 0 ? 8 : 0;
|
|
// };
|
|
|
|
// Conditionally set padding
|
|
// ChartDataLabels.defaults.padding = function(context) {
|
|
// const value = context.dataset.data[context.dataIndex];
|
|
// return Number(value) !== 0 ? 6 : 0;
|
|
// };
|
|
|
|
// // // Conditionally set color
|
|
// ChartDataLabels.defaults.color = function(context) {
|
|
// const value = context.dataset.data[context.dataIndex];
|
|
// return Number(value) !== 0 ? '#28a745' : 'transparent';
|
|
// };
|
|
|
|
// // Conditionally set font
|
|
// ChartDataLabels.defaults.font = function(context) {
|
|
// const value = context.dataset.data[context.dataIndex];
|
|
// return Number(value) !== 0 ? { weight: 'bold', size: 14 } : { size: 0 };
|
|
// };
|
|
|
|
|
|
// ChartDataLabels.defaults.formatter = function(value, context) {
|
|
// if (Number(value) === 0){
|
|
// return '';
|
|
// }
|
|
// return 'Count: ' + value;
|
|
// };
|
|
|
|
|
|
// const ctx = document.getElementById('hourly-production');
|
|
// if (ctx && window.hourlyProductionData && window.hourlyProductionData.labels.length)
|
|
// {
|
|
// new Chart(ctx.getContext('2d'), {
|
|
// type: 'line',
|
|
// data: window.hourlyProductionData,
|
|
// options: {
|
|
// plugins: {
|
|
// datalabels: {
|
|
// anchor: 'end',
|
|
// align: 'right',
|
|
// backgroundColor: function(context) {
|
|
// const value = context.dataset.data[context.dataIndex];
|
|
// return Number(value) !== 0 ? 'rgba(40, 167, 69, 0.1)' : 'transparent';
|
|
// },
|
|
// borderRadius: function(context) {
|
|
// const value = context.dataset.data[context.dataIndex];
|
|
// return Number(value) !== 0 ? 8 : 0;
|
|
// },
|
|
// padding: function(context) {
|
|
// const value = context.dataset.data[context.dataIndex];
|
|
// return Number(value) !== 0 ? 6 : 0;
|
|
// },
|
|
// color: function(context) {
|
|
// const value = context.dataset.data[context.dataIndex];
|
|
// return Number(value) !== 0 ? '#28a745' : 'transparent';
|
|
// },
|
|
// font: function(context) {
|
|
// const value = context.dataset.data[context.dataIndex];
|
|
// return Number(value) !== 0 ? { weight: 'bold', size: 14 } : { size: 0 };
|
|
// },
|
|
// formatter: function(value, context) {
|
|
// if (Number(value) === 0){
|
|
// return '';
|
|
// }
|
|
// return 'Count: ' + value;
|
|
// }
|
|
// }
|
|
// }
|
|
// },
|
|
// plugins: [ChartDataLabels]
|
|
// });
|
|
// }
|
|
// else {
|
|
// console.log('No data available for the chart.');
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|