dp-widgets-framework 1.3.4 → 1.3.6

package/dist/index.esm.js

@@ -17,6 +17,7 @@ import { v4 } from 'uuid';
 import { CopilotKit, useCopilotContext, useCoAgent, useCopilotChat } from '@copilotkit/react-core';
 import { CopilotChat } from '@copilotkit/react-ui';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
+import ChartPieChartOutlabels from '@energiency/chartjs-plugin-piechart-outlabels';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
@@ -15038,7 +15039,7 @@ const Line = /* #__PURE__ */ createTypedChart('line', LineController);
 const Bar = /* #__PURE__ */ createTypedChart('bar', BarController);
 const Pie = /* #__PURE__ */ createTypedChart('pie', PieController);
 
-Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend, ChartDataLabels);
+Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
 function BarChart({ orientation, title, data, options, className, units, content }) {
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
@@ -15047,6 +15048,26 @@ function BarChart({ orientation, title, data, options, className, units, content
         }
         return value;
     };
+    const barValuePlugin = {
+        id: "barValuePlugin",
+        afterDatasetsDraw(chart) {
+            if (!(content === null || content === void 0 ? void 0 : content.showLabels))
+                return;
+            const { ctx } = chart;
+            chart.data.datasets.forEach((dataset, i) => {
+                const meta = chart.getDatasetMeta(i);
+                meta.data.forEach((bar, index) => {
+                    const value = dataset.data[index];
+                    ctx.save();
+                    ctx.font = "12px sans-serif";
+                    ctx.textAlign = "center";
+                    ctx.fillStyle = "black";
+                    ctx.fillText(value, bar.x, bar.y - 5);
+                    ctx.restore();
+                });
+            });
+        },
+    };
     const defaultOptions = {
         responsive: true,
         maintainAspectRatio: false,
@@ -15069,13 +15090,7 @@ function BarChart({ orientation, title, data, options, className, units, content
                 position: "bottom"
             },
             datalabels: {
-                display: (context) => { var _a; return context.dataset.data[context.dataIndex] !== null && ((_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false); },
-                color: "white",
-                anchor: "center",
-                align: "center",
-                offset: 0,
-                font: { size: 12 },
-                formatter: (value) => value,
+                display: false,
             },
             title: {
                 display: true,
@@ -15116,18 +15131,47 @@ function BarChart({ orientation, title, data, options, className, units, content
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [barValuePlugin] }));
 }
 
-Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend, ChartDataLabels);
+Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
 function SeriesChart({ orientation, title, data, options, className, units, content }) {
+    var _a, _b;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
-        if (units === '$' && !isNaN(numValue)) {
+        if (!isNaN(numValue)) {
             return numValue.toLocaleString();
         }
         return value;
     };
+    const barValuePlugin = {
+        id: "barValuePlugin",
+        afterDatasetsDraw(chart) {
+            if (!(content === null || content === void 0 ? void 0 : content.showLabels))
+                return;
+            const { ctx } = chart;
+            chart.data.datasets.forEach((dataset, i) => {
+                const meta = chart.getDatasetMeta(i);
+                meta.data.forEach((bar, index) => {
+                    const value = dataset.data[index];
+                    ctx.save();
+                    ctx.font = "12px sans-serif";
+                    ctx.textAlign = "center";
+                    ctx.fillStyle = "black";
+                    ctx.fillText(value, bar.x, bar.y - 5);
+                    ctx.restore();
+                });
+            });
+        },
+    };
+    const getAxisLabel = (symbol) => {
+        const labelMap = {
+            "%": "Percentage",
+            "$": "Cost",
+            "#": "Count",
+        };
+        return labelMap[symbol] || symbol; // fallback if not found
+    };
     const defaultOptions = {
         responsive: true,
         maintainAspectRatio: false,
@@ -15142,7 +15186,13 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
         },
         plugins: {
             legend: {
-                display: true,
+                display: (ctx) => {
+                    const chart = ctx.chart;
+                    const datasets = chart.data.datasets;
+                    if (datasets.length > 1)
+                        return true;
+                    return false;
+                },
                 labels: {
                     boxWidth: 12,
                     boxHeight: 12,
@@ -15150,13 +15200,7 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
                 position: "bottom"
             },
             datalabels: {
-                display: (context) => { var _a; return context.dataset.data[context.dataIndex] !== null && ((_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false); },
-                color: "white",
-                anchor: "center",
-                align: "center",
-                offset: 0,
-                font: { size: 12 },
-                formatter: (value) => value,
+                display: false,
             },
             title: {
                 display: true,
@@ -15181,30 +15225,43 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
                 ticks: { autoSkip: false, maxRotation: 45, minRotation: 0 },
             },
             y: {
+                title: {
+                    display: true,
+                    text: (data === null || data === void 0 ? void 0 : data.datasets) && ((_a = data === null || data === void 0 ? void 0 : data.datasets) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (_b = data === null || data === void 0 ? void 0 : data.datasets) === null || _b === void 0 ? void 0 : _b[0].label : getAxisLabel(units !== null && units !== void 0 ? units : ""),
+                },
                 beginAtZero: true,
                 ticks: {
                     callback: function (value) {
                         if (units === '$') {
                             return `${units}${formatValue(value)}`;
                         }
-                        return units ? `${formatValue(value)} ${units}` : value;
+                        return units ? `${formatValue(value)} ${(units === null || units === void 0 ? void 0 : units.length) < 3 ? units : ""}` : value;
                     }
                 }
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [barValuePlugin] }));
 }
 
-Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend, ChartDataLabels);
+Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
 function SeriesLineChart({ orientation, title, data, options, className, units, content }) {
+    var _a, _b;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
-        if (units === '$' && !isNaN(numValue)) {
+        if (!isNaN(numValue)) {
             return numValue.toLocaleString();
         }
         return value;
     };
+    const getAxisLabel = (symbol) => {
+        const labelMap = {
+            "%": "Percentage",
+            "$": "Cost",
+            "#": "Count",
+        };
+        return labelMap[symbol] || symbol; // fallback if not found
+    };
     const defaultOptions = {
         responsive: true,
         maintainAspectRatio: false,
@@ -15218,7 +15275,13 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
         },
         plugins: {
             legend: {
-                display: true,
+                display: (ctx) => {
+                    const chart = ctx.chart;
+                    const datasets = chart.data.datasets;
+                    if (datasets.length > 1)
+                        return true;
+                    return false;
+                },
                 labels: {
                     boxWidth: 12,
                     boxHeight: 12,
@@ -15261,6 +15324,10 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
                 ticks: { autoSkip: true, maxTicksLimit: 8, maxRotation: 45, minRotation: 0 },
             },
             y: {
+                title: {
+                    display: true,
+                    text: (data === null || data === void 0 ? void 0 : data.datasets) && ((_a = data === null || data === void 0 ? void 0 : data.datasets) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (_b = data === null || data === void 0 ? void 0 : data.datasets) === null || _b === void 0 ? void 0 : _b[0].label : getAxisLabel(units !== null && units !== void 0 ? units : ""),
+                },
                 beginAtZero: true,
                 ticks: {
                     callback: function (value) {
@@ -15278,10 +15345,10 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
 }
 
-Chart$1.register(ArcElement, plugin_tooltip, plugin_legend, ChartDataLabels);
+Chart$1.register(ArcElement, plugin_tooltip, plugin_legend);
 const PieChart = (props) => {
     const { data, title, options, units, content } = props;
     const formatValue = (value) => {
@@ -15291,8 +15358,6 @@ const PieChart = (props) => {
         }
         return value;
     };
-    // Sanitize data to prevent null/undefined values
-    const sanitizedData = Object.assign(Object.assign({}, data), { datasets: data.datasets.map(dataset => (Object.assign(Object.assign({}, dataset), { data: dataset.data.map(d => d === null || d === undefined || isNaN(Number(d)) ? 0 : d) }))) });
     const defaultOptions = {
         responsive: true,
         maintainAspectRatio: false,
@@ -15304,20 +15369,35 @@ const PieChart = (props) => {
                 },
                 position: "bottom",
             },
-            datalabels: {
-                display: (context) => {
+            outlabels: {
+                display: (context) => { var _a; return context.dataset.data[context.dataIndex] !== null && ((_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false); },
+                text: (ctx) => {
                     var _a;
-                    const value = context.dataset.data[context.dataIndex];
-                    return value !== null && value !== undefined && !isNaN(Number(value)) && value !== 0 && ((_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false);
+                    const dataset = ctx.dataset.data;
+                    const total = dataset.reduce((a, b) => a + b, 0);
+                    const value = dataset[ctx.dataIndex];
+                    const percent = (value / total) * 100;
+                    // Only show if >= 5%
+                    return percent >= 5 ? `${(_a = ctx.chart.data.labels) === null || _a === void 0 ? void 0 : _a[ctx.dataIndex]} ${value}` : "";
                 },
-                color: "white",
-                font: { size: 12 },
-                formatter: (value) => {
-                    if (value === null || value === undefined || isNaN(Number(value)))
-                        return '';
-                    return formatValue(value);
+                color: "black",
+                stretch: 15,
+                font: {
+                    resizable: true,
+                    minSize: 12,
+                    maxSize: 18,
+                },
+                backgroundColor: (ctx) => {
+                    const dataset = ctx.dataset.data;
+                    const total = dataset.reduce((a, b) => a + b, 0);
+                    const value = dataset[ctx.dataIndex];
+                    const percent = (value / total) * 100;
+                    return percent >= 5 ? "rgba(255,255,255,0.7)" : "transparent";
                 },
             },
+            datalabels: {
+                display: false
+            },
             title: {
                 display: true,
                 text: title,
@@ -15345,10 +15425,10 @@ const PieChart = (props) => {
             },
         },
     };
-    return jsxRuntimeExports.jsx(Pie, { data: sanitizedData, options: options !== null && options !== void 0 ? options : defaultOptions });
+    return jsxRuntimeExports.jsx(Pie, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartPieChartOutlabels] });
 };
 
-Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend, ChartDataLabels);
+Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
 function LineChart({ title, data, options, className, units, content }) {
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
@@ -15422,7 +15502,7 @@ function LineChart({ title, data, options, className, units, content }) {
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
 }
 
 function DataGrid({ title, data, className }) {

package/dist/index.js

@@ -18,6 +18,7 @@ var uuid = require('uuid');
 var reactCore = require('@copilotkit/react-core');
 var reactUi = require('@copilotkit/react-ui');
 var ChartDataLabels = require('chartjs-plugin-datalabels');
+var ChartPieChartOutlabels = require('@energiency/chartjs-plugin-piechart-outlabels');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 
@@ -15065,7 +15066,7 @@ const Line = /* #__PURE__ */ createTypedChart('line', LineController);
 const Bar = /* #__PURE__ */ createTypedChart('bar', BarController);
 const Pie = /* #__PURE__ */ createTypedChart('pie', PieController);
 
-Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend, ChartDataLabels);
+Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
 function BarChart({ orientation, title, data, options, className, units, content }) {
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
@@ -15074,6 +15075,26 @@ function BarChart({ orientation, title, data, options, className, units, content
         }
         return value;
     };
+    const barValuePlugin = {
+        id: "barValuePlugin",
+        afterDatasetsDraw(chart) {
+            if (!(content === null || content === void 0 ? void 0 : content.showLabels))
+                return;
+            const { ctx } = chart;
+            chart.data.datasets.forEach((dataset, i) => {
+                const meta = chart.getDatasetMeta(i);
+                meta.data.forEach((bar, index) => {
+                    const value = dataset.data[index];
+                    ctx.save();
+                    ctx.font = "12px sans-serif";
+                    ctx.textAlign = "center";
+                    ctx.fillStyle = "black";
+                    ctx.fillText(value, bar.x, bar.y - 5);
+                    ctx.restore();
+                });
+            });
+        },
+    };
     const defaultOptions = {
         responsive: true,
         maintainAspectRatio: false,
@@ -15096,13 +15117,7 @@ function BarChart({ orientation, title, data, options, className, units, content
                 position: "bottom"
             },
             datalabels: {
-                display: (context) => { var _a; return context.dataset.data[context.dataIndex] !== null && ((_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false); },
-                color: "white",
-                anchor: "center",
-                align: "center",
-                offset: 0,
-                font: { size: 12 },
-                formatter: (value) => value,
+                display: false,
             },
             title: {
                 display: true,
@@ -15143,18 +15158,47 @@ function BarChart({ orientation, title, data, options, className, units, content
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [barValuePlugin] }));
 }
 
-Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend, ChartDataLabels);
+Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
 function SeriesChart({ orientation, title, data, options, className, units, content }) {
+    var _a, _b;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
-        if (units === '$' && !isNaN(numValue)) {
+        if (!isNaN(numValue)) {
             return numValue.toLocaleString();
         }
         return value;
     };
+    const barValuePlugin = {
+        id: "barValuePlugin",
+        afterDatasetsDraw(chart) {
+            if (!(content === null || content === void 0 ? void 0 : content.showLabels))
+                return;
+            const { ctx } = chart;
+            chart.data.datasets.forEach((dataset, i) => {
+                const meta = chart.getDatasetMeta(i);
+                meta.data.forEach((bar, index) => {
+                    const value = dataset.data[index];
+                    ctx.save();
+                    ctx.font = "12px sans-serif";
+                    ctx.textAlign = "center";
+                    ctx.fillStyle = "black";
+                    ctx.fillText(value, bar.x, bar.y - 5);
+                    ctx.restore();
+                });
+            });
+        },
+    };
+    const getAxisLabel = (symbol) => {
+        const labelMap = {
+            "%": "Percentage",
+            "$": "Cost",
+            "#": "Count",
+        };
+        return labelMap[symbol] || symbol; // fallback if not found
+    };
     const defaultOptions = {
         responsive: true,
         maintainAspectRatio: false,
@@ -15169,7 +15213,13 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
         },
         plugins: {
             legend: {
-                display: true,
+                display: (ctx) => {
+                    const chart = ctx.chart;
+                    const datasets = chart.data.datasets;
+                    if (datasets.length > 1)
+                        return true;
+                    return false;
+                },
                 labels: {
                     boxWidth: 12,
                     boxHeight: 12,
@@ -15177,13 +15227,7 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
                 position: "bottom"
             },
             datalabels: {
-                display: (context) => { var _a; return context.dataset.data[context.dataIndex] !== null && ((_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false); },
-                color: "white",
-                anchor: "center",
-                align: "center",
-                offset: 0,
-                font: { size: 12 },
-                formatter: (value) => value,
+                display: false,
             },
             title: {
                 display: true,
@@ -15208,30 +15252,43 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
                 ticks: { autoSkip: false, maxRotation: 45, minRotation: 0 },
             },
             y: {
+                title: {
+                    display: true,
+                    text: (data === null || data === void 0 ? void 0 : data.datasets) && ((_a = data === null || data === void 0 ? void 0 : data.datasets) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (_b = data === null || data === void 0 ? void 0 : data.datasets) === null || _b === void 0 ? void 0 : _b[0].label : getAxisLabel(units !== null && units !== void 0 ? units : ""),
+                },
                 beginAtZero: true,
                 ticks: {
                     callback: function (value) {
                         if (units === '$') {
                             return `${units}${formatValue(value)}`;
                         }
-                        return units ? `${formatValue(value)} ${units}` : value;
+                        return units ? `${formatValue(value)} ${(units === null || units === void 0 ? void 0 : units.length) < 3 ? units : ""}` : value;
                     }
                 }
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [barValuePlugin] }));
 }
 
-Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend, ChartDataLabels);
+Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
 function SeriesLineChart({ orientation, title, data, options, className, units, content }) {
+    var _a, _b;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
-        if (units === '$' && !isNaN(numValue)) {
+        if (!isNaN(numValue)) {
             return numValue.toLocaleString();
         }
         return value;
     };
+    const getAxisLabel = (symbol) => {
+        const labelMap = {
+            "%": "Percentage",
+            "$": "Cost",
+            "#": "Count",
+        };
+        return labelMap[symbol] || symbol; // fallback if not found
+    };
     const defaultOptions = {
         responsive: true,
         maintainAspectRatio: false,
@@ -15245,7 +15302,13 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
         },
         plugins: {
             legend: {
-                display: true,
+                display: (ctx) => {
+                    const chart = ctx.chart;
+                    const datasets = chart.data.datasets;
+                    if (datasets.length > 1)
+                        return true;
+                    return false;
+                },
                 labels: {
                     boxWidth: 12,
                     boxHeight: 12,
@@ -15288,6 +15351,10 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
                 ticks: { autoSkip: true, maxTicksLimit: 8, maxRotation: 45, minRotation: 0 },
             },
             y: {
+                title: {
+                    display: true,
+                    text: (data === null || data === void 0 ? void 0 : data.datasets) && ((_a = data === null || data === void 0 ? void 0 : data.datasets) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (_b = data === null || data === void 0 ? void 0 : data.datasets) === null || _b === void 0 ? void 0 : _b[0].label : getAxisLabel(units !== null && units !== void 0 ? units : ""),
+                },
                 beginAtZero: true,
                 ticks: {
                     callback: function (value) {
@@ -15305,10 +15372,10 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
 }
 
-Chart$1.register(ArcElement, plugin_tooltip, plugin_legend, ChartDataLabels);
+Chart$1.register(ArcElement, plugin_tooltip, plugin_legend);
 const PieChart = (props) => {
     const { data, title, options, units, content } = props;
     const formatValue = (value) => {
@@ -15318,8 +15385,6 @@ const PieChart = (props) => {
         }
         return value;
     };
-    // Sanitize data to prevent null/undefined values
-    const sanitizedData = Object.assign(Object.assign({}, data), { datasets: data.datasets.map(dataset => (Object.assign(Object.assign({}, dataset), { data: dataset.data.map(d => d === null || d === undefined || isNaN(Number(d)) ? 0 : d) }))) });
     const defaultOptions = {
         responsive: true,
         maintainAspectRatio: false,
@@ -15331,20 +15396,35 @@ const PieChart = (props) => {
                 },
                 position: "bottom",
             },
-            datalabels: {
-                display: (context) => {
+            outlabels: {
+                display: (context) => { var _a; return context.dataset.data[context.dataIndex] !== null && ((_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false); },
+                text: (ctx) => {
                     var _a;
-                    const value = context.dataset.data[context.dataIndex];
-                    return value !== null && value !== undefined && !isNaN(Number(value)) && value !== 0 && ((_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false);
+                    const dataset = ctx.dataset.data;
+                    const total = dataset.reduce((a, b) => a + b, 0);
+                    const value = dataset[ctx.dataIndex];
+                    const percent = (value / total) * 100;
+                    // Only show if >= 5%
+                    return percent >= 5 ? `${(_a = ctx.chart.data.labels) === null || _a === void 0 ? void 0 : _a[ctx.dataIndex]} ${value}` : "";
                 },
-                color: "white",
-                font: { size: 12 },
-                formatter: (value) => {
-                    if (value === null || value === undefined || isNaN(Number(value)))
-                        return '';
-                    return formatValue(value);
+                color: "black",
+                stretch: 15,
+                font: {
+                    resizable: true,
+                    minSize: 12,
+                    maxSize: 18,
+                },
+                backgroundColor: (ctx) => {
+                    const dataset = ctx.dataset.data;
+                    const total = dataset.reduce((a, b) => a + b, 0);
+                    const value = dataset[ctx.dataIndex];
+                    const percent = (value / total) * 100;
+                    return percent >= 5 ? "rgba(255,255,255,0.7)" : "transparent";
                 },
             },
+            datalabels: {
+                display: false
+            },
             title: {
                 display: true,
                 text: title,
@@ -15372,10 +15452,10 @@ const PieChart = (props) => {
             },
         },
     };
-    return jsxRuntimeExports.jsx(Pie, { data: sanitizedData, options: options !== null && options !== void 0 ? options : defaultOptions });
+    return jsxRuntimeExports.jsx(Pie, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartPieChartOutlabels] });
 };
 
-Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend, ChartDataLabels);
+Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
 function LineChart({ title, data, options, className, units, content }) {
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
@@ -15449,7 +15529,7 @@ function LineChart({ title, data, options, className, units, content }) {
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
 }
 
 function DataGrid({ title, data, className }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dp-widgets-framework",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -56,6 +56,7 @@
     "@copilotkit/react-core": "^1.9.3",
     "@copilotkit/react-ui": "^1.9.3",
     "@copilotkit/runtime": "^1.9.3",
+    "@energiency/chartjs-plugin-piechart-outlabels": "^1.3.5",
     "@hello-pangea/dnd": "^17.0.0",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-accordion": "^1.2.2",
@@ -135,4 +136,4 @@
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
-}
+}