npm - dp-widgets-framework - Versions diffs - 1.3.4 → 1.3.5 - Mend

dp-widgets-framework 1.3.4 → 1.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.esm.js CHANGED Viewed

@@ -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) => {
@@ -15291,8 +15320,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,19 +15331,34 @@ 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,
@@ -15345,10 +15387,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 +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 CHANGED Viewed

@@ -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) => {
@@ -15318,8 +15347,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,19 +15358,34 @@ 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,
@@ -15372,10 +15414,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 +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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "dp-widgets-framework",
-  "version": "1.3.4",
+  "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"
   }
-}
+}