dp-widgets-framework 1.3.3 → 1.3.5

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,10 +15131,10 @@ 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 }) {
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
@@ -15128,6 +15143,26 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
         }
         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,
@@ -15150,13 +15185,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,
@@ -15193,10 +15222,10 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
             },
         },
     };
-    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 }) {
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
@@ -15278,10 +15307,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) => {
@@ -15302,11 +15331,34 @@ const PieChart = (props) => {
                 },
                 position: "bottom",
             },
-            datalabels: {
+            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); },
-                color: "white",
-                font: { size: 12 },
-                formatter: (value) => formatValue(value),
+                text: (ctx) => {
+                    var _a;
+                    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: "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,
@@ -15335,10 +15387,10 @@ const PieChart = (props) => {
             },
         },
     };
-    return jsxRuntimeExports.jsx(Pie, { data: data, 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;
@@ -15412,7 +15464,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,10 +15158,10 @@ 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 }) {
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
@@ -15155,6 +15170,26 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
         }
         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,
@@ -15177,13 +15212,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,
@@ -15220,10 +15249,10 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
             },
         },
     };
-    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 }) {
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
@@ -15305,10 +15334,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) => {
@@ -15329,11 +15358,34 @@ const PieChart = (props) => {
                 },
                 position: "bottom",
             },
-            datalabels: {
+            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); },
-                color: "white",
-                font: { size: 12 },
-                formatter: (value) => formatValue(value),
+                text: (ctx) => {
+                    var _a;
+                    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: "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,
@@ -15362,10 +15414,10 @@ const PieChart = (props) => {
             },
         },
     };
-    return jsxRuntimeExports.jsx(Pie, { data: data, 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;
@@ -15439,7 +15491,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.3",
+  "version": "1.3.5",
   "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"
   }
-}
+}