Added chart js plugin package and sets static label

2025-06-27 12:46:29 +05:30
parent fea6573a7a
commit 0fc1852ea2
14 changed files with 6141 additions and 695 deletions
--- a/resources/js/filament-chart-js-plugins.js
+++ b/resources/js/filament-chart-js-plugins.js
@@ -0,0 +1,122 @@
+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.');
+// }
+
+
+
+
+
+