dp-widgets-framework 1.3.5 → 1.3.7

package/dist/index.js

@@ -17,8 +17,6 @@ var reactGridLayout = require('react-grid-layout');
 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');
 
@@ -1514,11 +1512,11 @@ const Input = React__namespace.forwardRef((_a, ref) => {
 Input.displayName = "Input";
 
 const labelVariants = classVarianceAuthority.cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-const Label = React__namespace.forwardRef((_a, ref) => {
+const Label$1 = React__namespace.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsxRuntimeExports.jsx(LabelPrimitive__namespace.Root, Object.assign({ ref: ref, className: cn(labelVariants(), className) }, props)));
 });
-Label.displayName = LabelPrimitive__namespace.Root.displayName;
+Label$1.displayName = LabelPrimitive__namespace.Root.displayName;
 
 const Switch = React__namespace.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
@@ -1827,17 +1825,17 @@ function WidgetSettingsPanel({ pageId, widget, onClose, onWidgetUpdate, widgetBa
     };
     const renderCommonSettings = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        return (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Title" }), jsxRuntimeExports.jsx(Input, { value: localWidget.title, onChange: (e) => updateWidget({ title: e.target.value }), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Show Header" }), jsxRuntimeExports.jsx(Switch, { checked: ((_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.showHeader) !== false, onCheckedChange: (checked) => updateConfig({ showHeader: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Resizable" }), jsxRuntimeExports.jsx(Switch, { checked: localWidget.is_resizable, onCheckedChange: (checked) => updateWidget({ is_resizable: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Draggable" }), jsxRuntimeExports.jsx(Switch, { checked: localWidget.is_draggable, onCheckedChange: (checked) => updateWidget({ is_draggable: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Background Color" }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx(Input, { type: "color", value: ((_c = (_b = localWidget.config) === null || _b === void 0 ? void 0 : _b.styles) === null || _c === void 0 ? void 0 : _c.backgroundColor) || "#ffffff", onChange: (e) => updateStyle({ backgroundColor: e.target.value }), className: "w-12 h-8 p-1" }), jsxRuntimeExports.jsx(Input, { value: ((_e = (_d = localWidget.config) === null || _d === void 0 ? void 0 : _d.styles) === null || _e === void 0 ? void 0 : _e.backgroundColor) || "#ffffff", onChange: (e) => updateStyle({ backgroundColor: e.target.value }), className: "h-8" })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Border Radius" }), jsxRuntimeExports.jsxs(Select, { value: ((_g = (_f = localWidget.config) === null || _f === void 0 ? void 0 : _f.styles) === null || _g === void 0 ? void 0 : _g.borderRadius) || "rounded", onValueChange: (value) => updateStyle({ borderRadius: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select border radius" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "none", children: "None" }), jsxRuntimeExports.jsx(SelectItem, { value: "rounded", children: "Rounded" }), jsxRuntimeExports.jsx(SelectItem, { value: "large", children: "Large" }), jsxRuntimeExports.jsx(SelectItem, { value: "extra-large", children: "Extra Large" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Padding" }), jsxRuntimeExports.jsxs(Select, { value: ((_j = (_h = localWidget.config) === null || _h === void 0 ? void 0 : _h.styles) === null || _j === void 0 ? void 0 : _j.padding) || "medium", onValueChange: (value) => updateStyle({ padding: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select padding" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "small", children: "Small" }), jsxRuntimeExports.jsx(SelectItem, { value: "medium", children: "Medium" }), jsxRuntimeExports.jsx(SelectItem, { value: "large", children: "Large" }), jsxRuntimeExports.jsx(SelectItem, { value: "extra-large", children: "Extra Large" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Text Color" }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx(Input, { type: "color", value: ((_l = (_k = localWidget.config) === null || _k === void 0 ? void 0 : _k.styles) === null || _l === void 0 ? void 0 : _l.textColor) || "#000000", onChange: (e) => updateStyle({ textColor: e.target.value }), className: "w-12 h-8 p-1" }), jsxRuntimeExports.jsx(Input, { value: ((_o = (_m = localWidget.config) === null || _m === void 0 ? void 0 : _m.styles) === null || _o === void 0 ? void 0 : _o.textColor) || "#000000", onChange: (e) => updateStyle({ textColor: e.target.value }), className: "h-8" })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Font Size" }), jsxRuntimeExports.jsx(Input, { value: ((_q = (_p = localWidget.config) === null || _p === void 0 ? void 0 : _p.styles) === null || _q === void 0 ? void 0 : _q.fontSize) || "14px", onChange: (e) => updateStyle({ fontSize: e.target.value }), className: "h-8", placeholder: "e.g., 14px, 1rem" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Alignment" }), jsxRuntimeExports.jsxs(Select, { value: ((_s = (_r = localWidget.config) === null || _r === void 0 ? void 0 : _r.styles) === null || _s === void 0 ? void 0 : _s.alignment) || "left", onValueChange: (value) => updateStyle({ alignment: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select alignment" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" })] })] })] })] }));
+        return (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Title" }), jsxRuntimeExports.jsx(Input, { value: localWidget.title, onChange: (e) => updateWidget({ title: e.target.value }), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Show Header" }), jsxRuntimeExports.jsx(Switch, { checked: ((_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.showHeader) !== false, onCheckedChange: (checked) => updateConfig({ showHeader: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Resizable" }), jsxRuntimeExports.jsx(Switch, { checked: localWidget.is_resizable, onCheckedChange: (checked) => updateWidget({ is_resizable: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Draggable" }), jsxRuntimeExports.jsx(Switch, { checked: localWidget.is_draggable, onCheckedChange: (checked) => updateWidget({ is_draggable: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Background Color" }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx(Input, { type: "color", value: ((_c = (_b = localWidget.config) === null || _b === void 0 ? void 0 : _b.styles) === null || _c === void 0 ? void 0 : _c.backgroundColor) || "#ffffff", onChange: (e) => updateStyle({ backgroundColor: e.target.value }), className: "w-12 h-8 p-1" }), jsxRuntimeExports.jsx(Input, { value: ((_e = (_d = localWidget.config) === null || _d === void 0 ? void 0 : _d.styles) === null || _e === void 0 ? void 0 : _e.backgroundColor) || "#ffffff", onChange: (e) => updateStyle({ backgroundColor: e.target.value }), className: "h-8" })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Border Radius" }), jsxRuntimeExports.jsxs(Select, { value: ((_g = (_f = localWidget.config) === null || _f === void 0 ? void 0 : _f.styles) === null || _g === void 0 ? void 0 : _g.borderRadius) || "rounded", onValueChange: (value) => updateStyle({ borderRadius: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select border radius" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "none", children: "None" }), jsxRuntimeExports.jsx(SelectItem, { value: "rounded", children: "Rounded" }), jsxRuntimeExports.jsx(SelectItem, { value: "large", children: "Large" }), jsxRuntimeExports.jsx(SelectItem, { value: "extra-large", children: "Extra Large" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Padding" }), jsxRuntimeExports.jsxs(Select, { value: ((_j = (_h = localWidget.config) === null || _h === void 0 ? void 0 : _h.styles) === null || _j === void 0 ? void 0 : _j.padding) || "medium", onValueChange: (value) => updateStyle({ padding: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select padding" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "small", children: "Small" }), jsxRuntimeExports.jsx(SelectItem, { value: "medium", children: "Medium" }), jsxRuntimeExports.jsx(SelectItem, { value: "large", children: "Large" }), jsxRuntimeExports.jsx(SelectItem, { value: "extra-large", children: "Extra Large" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Text Color" }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx(Input, { type: "color", value: ((_l = (_k = localWidget.config) === null || _k === void 0 ? void 0 : _k.styles) === null || _l === void 0 ? void 0 : _l.textColor) || "#000000", onChange: (e) => updateStyle({ textColor: e.target.value }), className: "w-12 h-8 p-1" }), jsxRuntimeExports.jsx(Input, { value: ((_o = (_m = localWidget.config) === null || _m === void 0 ? void 0 : _m.styles) === null || _o === void 0 ? void 0 : _o.textColor) || "#000000", onChange: (e) => updateStyle({ textColor: e.target.value }), className: "h-8" })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Font Size" }), jsxRuntimeExports.jsx(Input, { value: ((_q = (_p = localWidget.config) === null || _p === void 0 ? void 0 : _p.styles) === null || _q === void 0 ? void 0 : _q.fontSize) || "14px", onChange: (e) => updateStyle({ fontSize: e.target.value }), className: "h-8", placeholder: "e.g., 14px, 1rem" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Alignment" }), jsxRuntimeExports.jsxs(Select, { value: ((_s = (_r = localWidget.config) === null || _r === void 0 ? void 0 : _r.styles) === null || _s === void 0 ? void 0 : _s.alignment) || "left", onValueChange: (value) => updateStyle({ alignment: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select alignment" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" })] })] })] })] }));
     };
     const renderSearchSettings = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        return (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Placeholder Text" }), jsxRuntimeExports.jsx(Input, { value: ((_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.placeholder) || "", onChange: (e) => updateConfig({ placeholder: e.target.value }), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Minimum Characters" }), jsxRuntimeExports.jsx(Input, { type: "number", min: 1, max: 10, value: ((_b = localWidget.config) === null || _b === void 0 ? void 0 : _b.minCharacters) || 3, onChange: (e) => updateConfig({
+        return (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Placeholder Text" }), jsxRuntimeExports.jsx(Input, { value: ((_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.placeholder) || "", onChange: (e) => updateConfig({ placeholder: e.target.value }), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Minimum Characters" }), jsxRuntimeExports.jsx(Input, { type: "number", min: 1, max: 10, value: ((_b = localWidget.config) === null || _b === void 0 ? void 0 : _b.minCharacters) || 3, onChange: (e) => updateConfig({
                                 minCharacters: parseInt(e.target.value) || 3,
-                            }), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Search Delay (ms)" }), jsxRuntimeExports.jsx(Input, { type: "number", min: 0, max: 1000, step: 50, value: ((_c = localWidget.config) === null || _c === void 0 ? void 0 : _c.searchDelay) || 300, onChange: (e) => updateConfig({
+                            }), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Search Delay (ms)" }), jsxRuntimeExports.jsx(Input, { type: "number", min: 0, max: 1000, step: 50, value: ((_c = localWidget.config) === null || _c === void 0 ? void 0 : _c.searchDelay) || 300, onChange: (e) => updateConfig({
                                 searchDelay: parseInt(e.target.value) || 300,
-                            }), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Auto Focus" }), jsxRuntimeExports.jsx(Switch, { checked: ((_d = localWidget.config) === null || _d === void 0 ? void 0 : _d.autoFocus) || false, onCheckedChange: (checked) => updateConfig({ autoFocus: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Voice Search" }), jsxRuntimeExports.jsx(Switch, { checked: ((_e = localWidget.config) === null || _e === void 0 ? void 0 : _e.voiceSearch) || false, onCheckedChange: (checked) => updateConfig({ voiceSearch: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Recent Searches" }), jsxRuntimeExports.jsx(Switch, { checked: ((_f = localWidget.config) === null || _f === void 0 ? void 0 : _f.recentSearches) || false, onCheckedChange: (checked) => updateConfig({ recentSearches: checked }) })] }), ((_g = localWidget.config) === null || _g === void 0 ? void 0 : _g.recentSearches) && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Maximum Recent Searches" }), jsxRuntimeExports.jsx(Input, { type: "number", min: 1, value: ((_h = localWidget.config) === null || _h === void 0 ? void 0 : _h.maxRecentSearches) || 5, onChange: (e) => updateConfig({
+                            }), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Auto Focus" }), jsxRuntimeExports.jsx(Switch, { checked: ((_d = localWidget.config) === null || _d === void 0 ? void 0 : _d.autoFocus) || false, onCheckedChange: (checked) => updateConfig({ autoFocus: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Voice Search" }), jsxRuntimeExports.jsx(Switch, { checked: ((_e = localWidget.config) === null || _e === void 0 ? void 0 : _e.voiceSearch) || false, onCheckedChange: (checked) => updateConfig({ voiceSearch: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Recent Searches" }), jsxRuntimeExports.jsx(Switch, { checked: ((_f = localWidget.config) === null || _f === void 0 ? void 0 : _f.recentSearches) || false, onCheckedChange: (checked) => updateConfig({ recentSearches: checked }) })] }), ((_g = localWidget.config) === null || _g === void 0 ? void 0 : _g.recentSearches) && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Maximum Recent Searches" }), jsxRuntimeExports.jsx(Input, { type: "number", min: 1, value: ((_h = localWidget.config) === null || _h === void 0 ? void 0 : _h.maxRecentSearches) || 5, onChange: (e) => updateConfig({
                                 maxRecentSearches: parseInt(e.target.value) || 5,
-                            }), className: "h-8" })] })), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { children: "Enable Facets" }), jsxRuntimeExports.jsx(Switch, { checked: (_l = (_k = (_j = widget.config) === null || _j === void 0 ? void 0 : _j.facets) === null || _k === void 0 ? void 0 : _k.enabled) !== null && _l !== void 0 ? _l : false, onCheckedChange: (checked) => {
+                            }), className: "h-8" })] })), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label$1, { children: "Enable Facets" }), jsxRuntimeExports.jsx(Switch, { checked: (_l = (_k = (_j = widget.config) === null || _j === void 0 ? void 0 : _j.facets) === null || _k === void 0 ? void 0 : _k.enabled) !== null && _l !== void 0 ? _l : false, onCheckedChange: (checked) => {
                                         var _a, _b, _c;
                                         const newConfig = Object.assign(Object.assign({}, widget.config), { facets: Object.assign(Object.assign({}, (((_a = widget.config) === null || _a === void 0 ? void 0 : _a.facets) || {})), { enabled: checked, fields: ((_c = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.facets) === null || _c === void 0 ? void 0 : _c.fields) || [] }) });
                                         updateWidgetAPI(widget.id, { config: newConfig }).catch(console.error);
@@ -1848,29 +1846,29 @@ function WidgetSettingsPanel({ pageId, widget, onClose, onWidgetUpdate, widgetBa
     };
     const renderResultsSettings = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        return (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Layout Type" }), jsxRuntimeExports.jsxs(Select, { value: ((_b = (_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.type) || "list", onValueChange: (value) => {
+        return (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Layout Type" }), jsxRuntimeExports.jsxs(Select, { value: ((_b = (_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.type) || "list", onValueChange: (value) => {
                                 var _a;
                                 return updateConfig({
                                     layout: Object.assign(Object.assign({}, (_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.layout), { type: value }),
                                 });
-                            }, children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select layout type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "grid", children: "Grid" }), jsxRuntimeExports.jsx(SelectItem, { value: "list", children: "List" }), jsxRuntimeExports.jsx(SelectItem, { value: "table", children: "Table" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Items Per Page" }), jsxRuntimeExports.jsxs(Select, { value: String(((_d = (_c = localWidget.config) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.itemsPerPage) || 10), onValueChange: (value) => {
+                            }, children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select layout type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "grid", children: "Grid" }), jsxRuntimeExports.jsx(SelectItem, { value: "list", children: "List" }), jsxRuntimeExports.jsx(SelectItem, { value: "table", children: "Table" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Items Per Page" }), jsxRuntimeExports.jsxs(Select, { value: String(((_d = (_c = localWidget.config) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.itemsPerPage) || 10), onValueChange: (value) => {
                                 var _a;
                                 return updateConfig({
                                     layout: Object.assign(Object.assign({}, (_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.layout), { itemsPerPage: parseInt(value) }),
                                 });
-                            }, children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select items per page" }) }), jsxRuntimeExports.jsx(SelectContent, { children: [5, 10, 20, 50, 100].map((value) => (jsxRuntimeExports.jsxs(SelectItem, { value: String(value), children: [value, " items"] }, value))) })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Infinite Scroll" }), jsxRuntimeExports.jsx(Switch, { checked: ((_f = (_e = localWidget.config) === null || _e === void 0 ? void 0 : _e.layout) === null || _f === void 0 ? void 0 : _f.infiniteScroll) || false, onCheckedChange: (checked) => {
+                            }, children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select items per page" }) }), jsxRuntimeExports.jsx(SelectContent, { children: [5, 10, 20, 50, 100].map((value) => (jsxRuntimeExports.jsxs(SelectItem, { value: String(value), children: [value, " items"] }, value))) })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Infinite Scroll" }), jsxRuntimeExports.jsx(Switch, { checked: ((_f = (_e = localWidget.config) === null || _e === void 0 ? void 0 : _e.layout) === null || _f === void 0 ? void 0 : _f.infiniteScroll) || false, onCheckedChange: (checked) => {
                                 var _a;
                                 return updateConfig({
                                     layout: Object.assign(Object.assign({}, (_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.layout), { infiniteScroll: checked }),
                                 });
-                            } })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Show Pagination" }), jsxRuntimeExports.jsx(Switch, { checked: ((_g = localWidget.config) === null || _g === void 0 ? void 0 : _g.showPagination) !== false, onCheckedChange: (checked) => updateConfig({ showPagination: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Hide Relevance" }), jsxRuntimeExports.jsx(Switch, { checked: (_j = (_h = localWidget.config) === null || _h === void 0 ? void 0 : _h.hideRelevance) !== null && _j !== void 0 ? _j : false, onCheckedChange: (checked) => updateConfig({ hideRelevance: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Title" }), jsxRuntimeExports.jsxs(Select, { value: ((_k = localWidget.config) === null || _k === void 0 ? void 0 : _k.titleTemplate) || "filename", onValueChange: (value) => updateConfig({ titleTemplate: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select title template" }) }), jsxRuntimeExports.jsx(SelectContent, { children: availableFacets.map((facet) => facet.type === "string" && (jsxRuntimeExports.jsx(SelectItem, { value: facet.value, children: facet.value }, facet.value))) })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Metadata" }), jsxRuntimeExports.jsx(SearchWidgetFacetSettings, { placeHolder: "Select metadata field", value: ((_m = (_l = widget.config) === null || _l === void 0 ? void 0 : _l.metadata) === null || _m === void 0 ? void 0 : _m.fields) || [], onChange: (fields) => {
+                            } })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Show Pagination" }), jsxRuntimeExports.jsx(Switch, { checked: ((_g = localWidget.config) === null || _g === void 0 ? void 0 : _g.showPagination) !== false, onCheckedChange: (checked) => updateConfig({ showPagination: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Hide Relevance" }), jsxRuntimeExports.jsx(Switch, { checked: (_j = (_h = localWidget.config) === null || _h === void 0 ? void 0 : _h.hideRelevance) !== null && _j !== void 0 ? _j : false, onCheckedChange: (checked) => updateConfig({ hideRelevance: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Title" }), jsxRuntimeExports.jsxs(Select, { value: ((_k = localWidget.config) === null || _k === void 0 ? void 0 : _k.titleTemplate) || "filename", onValueChange: (value) => updateConfig({ titleTemplate: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select title template" }) }), jsxRuntimeExports.jsx(SelectContent, { children: availableFacets.map((facet) => facet.type === "string" && (jsxRuntimeExports.jsx(SelectItem, { value: facet.value, children: facet.value }, facet.value))) })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Metadata" }), jsxRuntimeExports.jsx(SearchWidgetFacetSettings, { placeHolder: "Select metadata field", value: ((_m = (_l = widget.config) === null || _l === void 0 ? void 0 : _l.metadata) === null || _m === void 0 ? void 0 : _m.fields) || [], onChange: (fields) => {
                                 const newConfig = Object.assign(Object.assign({}, widget.config), { metadata: Object.assign(Object.assign({}, widget.config.metadata), { fields }) });
                                 updateWidgetAPI(widget.id, { config: newConfig }).catch(console.error);
                             }, maxFields: ((_p = (_o = widget.config) === null || _o === void 0 ? void 0 : _o.facets) === null || _p === void 0 ? void 0 : _p.maxFields) || 10 })] })] }));
     };
     const renderCodeSettings = () => {
         var _a;
-        return (jsxRuntimeExports.jsx("div", { className: "space-y-4", children: jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Custom Widget Code" }), jsxRuntimeExports.jsx(CodeEditor, { value: ((_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.customCode) ||
+        return (jsxRuntimeExports.jsx("div", { className: "space-y-4", children: jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Custom Widget Code" }), jsxRuntimeExports.jsx(CodeEditor, { value: ((_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.customCode) ||
                             `// Custom search widget code
   // You can modify the widget behavior here
   function customSearch(query) {
@@ -1885,7 +1883,7 @@ function WidgetSettingsPanel({ pageId, widget, onClose, onWidgetUpdate, widgetBa
     };
     const renderFilterSettings = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Show Clear Button" }), jsxRuntimeExports.jsx(Switch, { checked: ((_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.showClearButton) !== false, onCheckedChange: (checked) => updateConfig({ showClearButton: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Collapsible Sections" }), jsxRuntimeExports.jsx(Switch, { checked: ((_b = localWidget.config) === null || _b === void 0 ? void 0 : _b.collapsible) !== false, onCheckedChange: (checked) => updateConfig({ collapsible: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Default Expanded" }), jsxRuntimeExports.jsx(Switch, { checked: ((_c = localWidget.config) === null || _c === void 0 ? void 0 : _c.defaultExpanded) !== false, onCheckedChange: (checked) => updateConfig({ defaultExpanded: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label, { children: "Enable Facets" }), jsxRuntimeExports.jsx(Switch, { checked: (_f = (_e = (_d = widget.config) === null || _d === void 0 ? void 0 : _d.facets) === null || _e === void 0 ? void 0 : _e.enabled) !== null && _f !== void 0 ? _f : false, onCheckedChange: (checked) => {
+        return (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Show Clear Button" }), jsxRuntimeExports.jsx(Switch, { checked: ((_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.showClearButton) !== false, onCheckedChange: (checked) => updateConfig({ showClearButton: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Collapsible Sections" }), jsxRuntimeExports.jsx(Switch, { checked: ((_b = localWidget.config) === null || _b === void 0 ? void 0 : _b.collapsible) !== false, onCheckedChange: (checked) => updateConfig({ collapsible: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Default Expanded" }), jsxRuntimeExports.jsx(Switch, { checked: ((_c = localWidget.config) === null || _c === void 0 ? void 0 : _c.defaultExpanded) !== false, onCheckedChange: (checked) => updateConfig({ defaultExpanded: checked }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntimeExports.jsx(Label$1, { children: "Enable Facets" }), jsxRuntimeExports.jsx(Switch, { checked: (_f = (_e = (_d = widget.config) === null || _d === void 0 ? void 0 : _d.facets) === null || _e === void 0 ? void 0 : _e.enabled) !== null && _f !== void 0 ? _f : false, onCheckedChange: (checked) => {
                                 var _a, _b, _c;
                                 const newConfig = Object.assign(Object.assign({}, widget.config), { facets: Object.assign(Object.assign({}, (((_a = widget.config) === null || _a === void 0 ? void 0 : _a.facets) || {})), { enabled: checked, fields: ((_c = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.facets) === null || _c === void 0 ? void 0 : _c.fields) || [] }) });
                                 console.log("newConfig", newConfig);
@@ -1897,14 +1895,14 @@ function WidgetSettingsPanel({ pageId, widget, onClose, onWidgetUpdate, widgetBa
     };
     const renderAgentSettings = () => {
         var _a, _b, _c, _d, _e;
-        return (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Agent Type" }), jsxRuntimeExports.jsxs(Select, { value: ((_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.agentType) || "Chatbot Agent", onValueChange: (value) => {
+        return (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Agent Type" }), jsxRuntimeExports.jsxs(Select, { value: ((_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.agentType) || "Chatbot Agent", onValueChange: (value) => {
                                 const updates = { agentType: value };
                                 // Remove query property when Chatbot Agent is selected
                                 if (value === "Chatbot Agent") {
                                     updates.query = undefined;
                                 }
                                 updateConfig(updates);
-                            }, children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select agent type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "Chatbot Agent", children: "Chatbot Agent" }), jsxRuntimeExports.jsx(SelectItem, { value: "Bar Chart Agent", children: "Bar Chart Agent" }), jsxRuntimeExports.jsx(SelectItem, { value: "Pie Chart Agent", children: "Pie Chart Agent" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Agent ID" }), agentIds && agentIds.length > 0 ? (jsxRuntimeExports.jsxs(Select, { value: ((_b = localWidget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "", onValueChange: (value) => updateConfig({ agentName: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select an agent ID" }) }), jsxRuntimeExports.jsx(SelectContent, { children: agentIds.map((agentId) => (jsxRuntimeExports.jsx(SelectItem, { value: agentId, children: agentId }, agentId))) })] })) : (jsxRuntimeExports.jsx(Input, { value: ((_c = localWidget.config) === null || _c === void 0 ? void 0 : _c.agentName) || "", onChange: (e) => updateConfig({ agentName: e.target.value }), className: "h-8", placeholder: "e.g., adk-construction-project-agent" }))] }), ((_d = localWidget.config) === null || _d === void 0 ? void 0 : _d.agentType) !== "Chatbot Agent" && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label, { className: "text-xs", children: "Query" }), jsxRuntimeExports.jsx(Input, { value: ((_e = localWidget.config) === null || _e === void 0 ? void 0 : _e.query) || "", onChange: (e) => updateConfig({ query: e.target.value }), className: "h-8", placeholder: "Enter query for the agent..." })] }))] }));
+                            }, children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select agent type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "Chatbot Agent", children: "Chatbot Agent" }), jsxRuntimeExports.jsx(SelectItem, { value: "Bar Chart Agent", children: "Bar Chart Agent" }), jsxRuntimeExports.jsx(SelectItem, { value: "Pie Chart Agent", children: "Pie Chart Agent" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Agent ID" }), agentIds && agentIds.length > 0 ? (jsxRuntimeExports.jsxs(Select, { value: ((_b = localWidget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "", onValueChange: (value) => updateConfig({ agentName: value }), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select an agent ID" }) }), jsxRuntimeExports.jsx(SelectContent, { children: agentIds.map((agentId) => (jsxRuntimeExports.jsx(SelectItem, { value: agentId, children: agentId }, agentId))) })] })) : (jsxRuntimeExports.jsx(Input, { value: ((_c = localWidget.config) === null || _c === void 0 ? void 0 : _c.agentName) || "", onChange: (e) => updateConfig({ agentName: e.target.value }), className: "h-8", placeholder: "e.g., adk-construction-project-agent" }))] }), ((_d = localWidget.config) === null || _d === void 0 ? void 0 : _d.agentType) !== "Chatbot Agent" && (jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Query" }), jsxRuntimeExports.jsx(Input, { value: ((_e = localWidget.config) === null || _e === void 0 ? void 0 : _e.query) || "", onChange: (e) => updateConfig({ query: e.target.value }), className: "h-8", placeholder: "Enter query for the agent..." })] }))] }));
     };
     return (jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col", children: [jsxRuntimeExports.jsx("div", { className: "p-3 border-b flex justify-between items-center", children: jsxRuntimeExports.jsx("h3", { className: "font-medium text-sm", children: "Widget Settings" }) }), error && (jsxRuntimeExports.jsxs(Alert, { variant: "destructive", className: "m-3", children: [jsxRuntimeExports.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }), jsxRuntimeExports.jsx(AlertDescription, { children: error })] })), jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "p-3", children: jsxRuntimeExports.jsxs(Tabs, { defaultValue: "common", children: [jsxRuntimeExports.jsxs(TabsList, { className: "w-full", children: [jsxRuntimeExports.jsx(TabsTrigger, { value: "common", className: "flex-1", children: "Common" }), localWidget.type === "search" && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TabsTrigger, { value: "search", className: "flex-1", children: "Search" }), jsxRuntimeExports.jsx(TabsTrigger, { value: "code", className: "flex-1", children: "Code" })] })), localWidget.type === "results" && (jsxRuntimeExports.jsx(TabsTrigger, { value: "results", className: "flex-1", children: "Results" })), localWidget.type === "filter" && (jsxRuntimeExports.jsx(TabsTrigger, { value: "filter", className: "flex-1", children: "Filter" })), localWidget.type === "agent" && (jsxRuntimeExports.jsx(TabsTrigger, { value: "agent", className: "flex-1", children: "Agent" }))] }), jsxRuntimeExports.jsxs("div", { className: "mt-4", children: [jsxRuntimeExports.jsx(TabsContent, { value: "common", children: renderCommonSettings() }), jsxRuntimeExports.jsx(TabsContent, { value: "search", children: renderSearchSettings() }), jsxRuntimeExports.jsx(TabsContent, { value: "results", children: renderResultsSettings() }), jsxRuntimeExports.jsx(TabsContent, { value: "filter", children: renderFilterSettings() }), jsxRuntimeExports.jsx(TabsContent, { value: "agent", children: renderAgentSettings() }), jsxRuntimeExports.jsx(TabsContent, { value: "code", children: renderCodeSettings() })] })] }) }) }), jsxRuntimeExports.jsxs("div", { className: "p-3 border-t flex justify-between gap-2", children: [jsxRuntimeExports.jsx("div", { className: "text-sm text-muted-foreground", children: isAutosaving && "Autosaving..." }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: handleCancel, disabled: isSaving || isAutosaving, children: "Cancel" }), jsxRuntimeExports.jsx(Button, { onClick: handleSave, disabled: isSaving || isAutosaving, children: isSaving ? "Saving..." : "Save Changes" })] })] })] }));
 }
@@ -2216,7 +2214,7 @@ function FacetWidget({ widget, showHeader = true, onConfigUpdate, }) {
             onConfigUpdate(Object.assign(Object.assign({}, widget.config), { fields: newFields }));
         }
     };
-    return (jsxRuntimeExports.jsxs(Card, { className: "p-4 h-full", children: [showHeader && jsxRuntimeExports.jsx("h3", { className: "font-medium mb-4", children: "Facet Configuration" }), jsxRuntimeExports.jsx(ScrollArea, { className: "h-[calc(100%-2rem)]", children: jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [fields.map((field, index) => (jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 bg-accent/10 p-2 rounded-md", children: [jsxRuntimeExports.jsxs("div", { className: "flex-1 space-y-2", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsxs(Label, { children: ["Field ", index + 1] }), jsxRuntimeExports.jsxs(Select, { value: field.field, onValueChange: (value) => updateField(index, value, field.displayName), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select field" }) }), jsxRuntimeExports.jsx(SelectContent, { children: availableFacets.map((facet) => (jsxRuntimeExports.jsx(SelectItem, { value: facet.value, children: facet.value }, facet.value))) })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label, { children: "Display Name" }), jsxRuntimeExports.jsx(Input, { value: field.displayName, onChange: (e) => updateField(index, field.field, e.target.value), placeholder: "Enter display name" })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: () => moveField(index, "up"), disabled: index === 0, children: jsxRuntimeExports.jsx(lucideReact.ArrowUp, { className: "h-4 w-4" }) }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: () => moveField(index, "down"), disabled: index === fields.length - 1, children: jsxRuntimeExports.jsx(lucideReact.ArrowDown, { className: "h-4 w-4" }) }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeField(index), children: jsxRuntimeExports.jsx(lucideReact.Trash2, { className: "h-4 w-4" }) })] })] }, index))), fields.length < (((_b = widget.config) === null || _b === void 0 ? void 0 : _b.maxFields) || 10) && (jsxRuntimeExports.jsxs(Button, { variant: "outline", className: "w-full", onClick: addField, children: [jsxRuntimeExports.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }), "Add Facet"] })), error && jsxRuntimeExports.jsx("p", { className: "text-sm text-destructive mt-2", children: error })] }) })] }));
+    return (jsxRuntimeExports.jsxs(Card, { className: "p-4 h-full", children: [showHeader && jsxRuntimeExports.jsx("h3", { className: "font-medium mb-4", children: "Facet Configuration" }), jsxRuntimeExports.jsx(ScrollArea, { className: "h-[calc(100%-2rem)]", children: jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [fields.map((field, index) => (jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 bg-accent/10 p-2 rounded-md", children: [jsxRuntimeExports.jsxs("div", { className: "flex-1 space-y-2", children: [jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsxs(Label$1, { children: ["Field ", index + 1] }), jsxRuntimeExports.jsxs(Select, { value: field.field, onValueChange: (value) => updateField(index, value, field.displayName), children: [jsxRuntimeExports.jsx(SelectTrigger, { children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select field" }) }), jsxRuntimeExports.jsx(SelectContent, { children: availableFacets.map((facet) => (jsxRuntimeExports.jsx(SelectItem, { value: facet.value, children: facet.value }, facet.value))) })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [jsxRuntimeExports.jsx(Label$1, { children: "Display Name" }), jsxRuntimeExports.jsx(Input, { value: field.displayName, onChange: (e) => updateField(index, field.field, e.target.value), placeholder: "Enter display name" })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: () => moveField(index, "up"), disabled: index === 0, children: jsxRuntimeExports.jsx(lucideReact.ArrowUp, { className: "h-4 w-4" }) }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: () => moveField(index, "down"), disabled: index === fields.length - 1, children: jsxRuntimeExports.jsx(lucideReact.ArrowDown, { className: "h-4 w-4" }) }), jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", onClick: () => removeField(index), children: jsxRuntimeExports.jsx(lucideReact.Trash2, { className: "h-4 w-4" }) })] })] }, index))), fields.length < (((_b = widget.config) === null || _b === void 0 ? void 0 : _b.maxFields) || 10) && (jsxRuntimeExports.jsxs(Button, { variant: "outline", className: "w-full", onClick: addField, children: [jsxRuntimeExports.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }), "Add Facet"] })), error && jsxRuntimeExports.jsx("p", { className: "text-sm text-destructive mt-2", children: error })] }) })] }));
 }
 
 // src/graphql/@generated/graphql.ts
@@ -3919,7 +3917,7 @@ function set(root, scope, values) {
         appliers.forEach((apply)=>apply(this));
     }
 }
-var defaults = /* #__PURE__ */ new Defaults({
+var defaults$1 = /* #__PURE__ */ new Defaults({
     _scriptable: (name)=>!name.startsWith('on'),
     _indexable: (name)=>name !== 'events',
     hover: {
@@ -3940,7 +3938,7 @@ var defaults = /* #__PURE__ */ new Defaults({
  * @param font - A font object.
  * @return The CSS font string. See https://developer.mozilla.org/en-US/docs/Web/CSS/font
  * @private
- */ function toFontString(font) {
+ */ function toFontString$1(font) {
     if (!font || isNullOrUndef(font.size) || isNullOrUndef(font.family)) {
         return null;
     }
@@ -4351,7 +4349,7 @@ function _readValueToProps(value, props) {
  * @private
  */ function toFont(options, fallback) {
     options = options || {};
-    fallback = fallback || defaults.font;
+    fallback = fallback || defaults$1.font;
     let size = valueOrDefault(options.size, fallback.size);
     if (typeof size === 'string') {
         size = parseInt(size, 10);
@@ -4369,7 +4367,7 @@ function _readValueToProps(value, props) {
         weight: valueOrDefault(options.weight, fallback.weight),
         string: ''
     };
-    font.string = toFontString(font);
+    font.string = toFontString$1(font);
     return font;
 }
 /**
@@ -4389,6 +4387,12 @@ function _readValueToProps(value, props) {
         if (value === undefined) {
             continue;
         }
+        if (context !== undefined && typeof value === 'function') {
+            value = value(context);
+        }
+        if (index !== undefined && isArray(value)) {
+            value = value[index % value.length];
+        }
         if (value !== undefined) {
             return value;
         }
@@ -5796,7 +5800,7 @@ class Animations {
         if (!isObject(config)) {
             return;
         }
-        const animationOptions = Object.keys(defaults.animation);
+        const animationOptions = Object.keys(defaults$1.animation);
         const animatedProps = this._properties;
         Object.getOwnPropertyNames(config).forEach((key)=>{
             const cfg = config[key];
@@ -6494,7 +6498,7 @@ class DatasetController {
             ''
         ];
         const scopes = config.getOptionScopes(this.getDataset(), scopeKeys);
-        const names = Object.keys(defaults.elements[elementType]);
+        const names = Object.keys(defaults$1.elements[elementType]);
         const context = ()=>this.getContext(index, active, mode);
         const values = config.resolveNamedOptions(scopes, names, context, prefixes);
         if (values.$shared) {
@@ -8252,7 +8256,7 @@ class BasicPlatform extends BasePlatform {
     }
 }
 
-const EXPANDO_KEY = '$chartjs';
+const EXPANDO_KEY$1 = '$chartjs';
  const EVENT_TYPES = {
     touchstart: 'mousedown',
     touchmove: 'mousemove',
@@ -8269,7 +8273,7 @@ const isNullOrEmpty = (value)=>value === null || value === '';
     const style = canvas.style;
     const renderHeight = canvas.getAttribute('height');
     const renderWidth = canvas.getAttribute('width');
-    canvas[EXPANDO_KEY] = {
+    canvas[EXPANDO_KEY$1] = {
         initial: {
             height: renderHeight,
             width: renderWidth,
@@ -8448,10 +8452,10 @@ function createProxyAndListen(chart, type, listener) {
     }
  releaseContext(context) {
         const canvas = context.canvas;
-        if (!canvas[EXPANDO_KEY]) {
+        if (!canvas[EXPANDO_KEY$1]) {
             return false;
         }
-        const initial = canvas[EXPANDO_KEY].initial;
+        const initial = canvas[EXPANDO_KEY$1].initial;
         [
             'height',
             'width'
@@ -8468,7 +8472,7 @@ function createProxyAndListen(chart, type, listener) {
             canvas.style[key] = style[key];
         });
         canvas.width = canvas.width;
-        delete canvas[EXPANDO_KEY];
+        delete canvas[EXPANDO_KEY$1];
         return true;
     }
  addEventListener(chart, type, listener) {
@@ -9960,7 +9964,7 @@ class TypedRegistry {
         items[id] = item;
         registerDefaults(item, scope, parentScope);
         if (this.override) {
-            defaults.override(item.id, item.overrides);
+            defaults$1.override(item.id, item.overrides);
         }
         return scope;
     }
@@ -9974,8 +9978,8 @@ class TypedRegistry {
         if (id in items) {
             delete items[id];
         }
-        if (scope && id in defaults[scope]) {
-            delete defaults[scope][id];
+        if (scope && id in defaults$1[scope]) {
+            delete defaults$1[scope][id];
             if (this.override) {
                 delete overrides[id];
             }
@@ -9984,16 +9988,16 @@ class TypedRegistry {
 }
 function registerDefaults(item, scope, parentScope) {
     const itemDefaults = merge$1(Object.create(null), [
-        parentScope ? defaults.get(parentScope) : {},
-        defaults.get(scope),
+        parentScope ? defaults$1.get(parentScope) : {},
+        defaults$1.get(scope),
         item.defaults
     ]);
-    defaults.set(scope, itemDefaults);
+    defaults$1.set(scope, itemDefaults);
     if (item.defaultRoutes) {
         routeDefaults(scope, item.defaultRoutes);
     }
     if (item.descriptors) {
-        defaults.describe(scope, item.descriptors);
+        defaults$1.describe(scope, item.descriptors);
     }
 }
 function routeDefaults(scope, routes) {
@@ -10006,7 +10010,7 @@ function routeDefaults(scope, routes) {
         const parts = routes[property].split('.');
         const targetName = parts.pop();
         const targetScope = parts.join('.');
-        defaults.route(sourceScope, sourceName, targetScope, targetName);
+        defaults$1.route(sourceScope, sourceName, targetScope, targetName);
     });
 }
 function isIChartComponent(proto) {
@@ -10232,7 +10236,7 @@ function pluginOpts(config, { plugin , local  }, opts, context) {
 }
 
 function getIndexAxis(type, options) {
-    const datasetDefaults = defaults.datasets[type] || {};
+    const datasetDefaults = defaults$1.datasets[type] || {};
     const datasetOptions = (options.datasets || {})[type] || {};
     return datasetOptions.indexAxis || options.indexAxis || datasetDefaults.indexAxis || 'x';
 }
@@ -10304,7 +10308,7 @@ function mergeScaleConfig(config, options) {
         if (scaleConf._proxy) {
             return console.warn(`Ignoring resolver passed as options for scale: ${id}`);
         }
-        const axis = determineAxis(id, scaleConf, retrieveAxisFromDatasets(id, config), defaults.scales[scaleConf.type]);
+        const axis = determineAxis(id, scaleConf, retrieveAxisFromDatasets(id, config), defaults$1.scales[scaleConf.type]);
         const defaultId = getDefaultScaleIDFromAxis(axis, chartIndexAxis);
         const defaultScaleOptions = chartDefaults.scales || {};
         scales[id] = mergeIf(Object.create(null), [
@@ -10337,8 +10341,8 @@ function mergeScaleConfig(config, options) {
     Object.keys(scales).forEach((key)=>{
         const scale = scales[key];
         mergeIf(scale, [
-            defaults.scales[scale.type],
-            defaults.scale
+            defaults$1.scales[scale.type],
+            defaults$1.scale
         ]);
     });
     return scales;
@@ -10480,7 +10484,7 @@ class Config {
             }
             keys.forEach((key)=>addIfFound(scopes, options, key));
             keys.forEach((key)=>addIfFound(scopes, overrides[type] || {}, key));
-            keys.forEach((key)=>addIfFound(scopes, defaults, key));
+            keys.forEach((key)=>addIfFound(scopes, defaults$1, key));
             keys.forEach((key)=>addIfFound(scopes, descriptors, key));
         });
         const array = Array.from(scopes);
@@ -10497,11 +10501,11 @@ class Config {
         return [
             options,
             overrides[type] || {},
-            defaults.datasets[type] || {},
+            defaults$1.datasets[type] || {},
             {
                 type
             },
-            defaults,
+            defaults$1,
             descriptors
         ];
     }
@@ -10634,7 +10638,7 @@ function moveNumericKeys(obj, start, move) {
     return e;
 }
 let Chart$1 = class Chart {
-    static defaults = defaults;
+    static defaults = defaults$1;
     static instances = instances;
     static overrides = overrides;
     static registry = registry;
@@ -10892,7 +10896,7 @@ let Chart$1 = class Chart {
                 meta.controller.linkScales();
             } else {
                 const ControllerClass = registry.getController(type);
-                const { datasetElementType , dataElementType  } = defaults.datasets[type];
+                const { datasetElementType , dataElementType  } = defaults$1.datasets[type];
                 Object.assign(ControllerClass, {
                     dataElementType: registry.getElement(dataElementType),
                     datasetElementType: datasetElementType && registry.getElement(datasetElementType)
@@ -12225,7 +12229,7 @@ function parseBorderRadius(bar, maxW, maxH) {
         bottomRight: skipOrLimit(!enableBorder || skip.bottom || skip.right, o.bottomRight, 0, maxR)
     };
 }
-function boundingRects(bar) {
+function boundingRects$1(bar) {
     const bounds = getBarBounds(bar);
     const width = bounds.right - bounds.left;
     const height = bounds.bottom - bounds.top;
@@ -12306,7 +12310,7 @@ class BarElement extends Element {
     }
     draw(ctx) {
         const { inflateAmount , options: { borderColor , backgroundColor  }  } = this;
-        const { inner , outer  } = boundingRects(this);
+        const { inner , outer  } = boundingRects$1(this);
         const addRectPath = hasRadius(outer.radius) ? addRoundedRectPath : addNormalRectPath;
         ctx.save();
         if (outer.w !== inner.w || outer.h !== inner.h) {
@@ -12564,7 +12568,7 @@ class Legend extends Element {
  _draw() {
         const { options: opts , columnSizes , lineWidths , ctx  } = this;
         const { align , labels: labelOpts  } = opts;
-        const defaultColor = defaults.color;
+        const defaultColor = defaults$1.color;
         const rtlHelper = getRtlAdapter(opts.rtl, this.left, this.width);
         const labelFont = toFont(labelOpts.font);
         const { padding  } = labelOpts;
@@ -13038,7 +13042,7 @@ var plugin_title = {
     }
 };
 
-const positioners = {
+const positioners$2 = {
  average (items) {
         if (!items.length) {
             return false;
@@ -13353,7 +13357,7 @@ const defaultCallbacks = {
     return result;
 }
 class Tooltip extends Element {
- static positioners = positioners;
+ static positioners = positioners$2;
     constructor(config){
         super();
         this.opacity = 0;
@@ -13492,7 +13496,7 @@ class Tooltip extends Element {
                 };
             }
         } else {
-            const position = positioners[options.position].call(this, active, this._eventPosition);
+            const position = positioners$2[options.position].call(this, active, this._eventPosition);
             tooltipItems = this._createItems(options);
             this.title = this.getTitle(tooltipItems, options);
             this.beforeBody = this.getBeforeBody(tooltipItems, options);
@@ -13773,7 +13777,7 @@ class Tooltip extends Element {
         const animX = anims && anims.x;
         const animY = anims && anims.y;
         if (animX || animY) {
-            const position = positioners[options.position].call(this, this._active, this._eventPosition);
+            const position = positioners$2[options.position].call(this, this._active, this._eventPosition);
             if (!position) {
                 return;
             }
@@ -13889,14 +13893,14 @@ class Tooltip extends Element {
     }
  _positionChanged(active, e) {
         const { caretX , caretY , options  } = this;
-        const position = positioners[options.position].call(this, active, e);
+        const position = positioners$2[options.position].call(this, active, e);
         return position !== false && (caretX !== position.x || caretY !== position.y);
     }
 }
 var plugin_tooltip = {
     id: 'tooltip',
     _element: Tooltip,
-    positioners,
+    positioners: positioners$2,
     afterInit (chart, _args, options) {
         if (options) {
             chart.tooltip = new Tooltip({
@@ -15163,9 +15167,10 @@ function BarChart({ orientation, title, data, options, className, units, content
 
 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;
@@ -15190,6 +15195,14 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
             });
         },
     };
+    const getAxisLabel = (symbol) => {
+        const labelMap = {
+            "%": "Percentage",
+            "$": "Cost",
+            "#": "Count",
+        };
+        return labelMap[symbol] || symbol; // fallback if not found
+    };
     const defaultOptions = {
         responsive: true,
         maintainAspectRatio: false,
@@ -15204,7 +15217,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,
@@ -15237,13 +15256,17 @@ 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;
                     }
                 }
             },
@@ -15252,15 +15275,1372 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
     return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [barValuePlugin] }));
 }
 
+/*!
+ * chartjs-plugin-datalabels v2.2.0
+ * https://chartjs-plugin-datalabels.netlify.app
+ * (c) 2017-2022 chartjs-plugin-datalabels contributors
+ * Released under the MIT license
+ */
+
+var devicePixelRatio = (function() {
+  if (typeof window !== 'undefined') {
+    if (window.devicePixelRatio) {
+      return window.devicePixelRatio;
+    }
+
+    // devicePixelRatio is undefined on IE10
+    // https://stackoverflow.com/a/20204180/8837887
+    // https://github.com/chartjs/chartjs-plugin-datalabels/issues/85
+    var screen = window.screen;
+    if (screen) {
+      return (screen.deviceXDPI || 1) / (screen.logicalXDPI || 1);
+    }
+  }
+
+  return 1;
+}());
+
+var utils = {
+  // @todo move this in Chart.helpers.toTextLines
+  toTextLines: function(inputs) {
+    var lines = [];
+    var input;
+
+    inputs = [].concat(inputs);
+    while (inputs.length) {
+      input = inputs.pop();
+      if (typeof input === 'string') {
+        lines.unshift.apply(lines, input.split('\n'));
+      } else if (Array.isArray(input)) {
+        inputs.push.apply(inputs, input);
+      } else if (!isNullOrUndef(inputs)) {
+        lines.unshift('' + input);
+      }
+    }
+
+    return lines;
+  },
+
+  // @todo move this in Chart.helpers.canvas.textSize
+  // @todo cache calls of measureText if font doesn't change?!
+  textSize: function(ctx, lines, font) {
+    var items = [].concat(lines);
+    var ilen = items.length;
+    var prev = ctx.font;
+    var width = 0;
+    var i;
+
+    ctx.font = font.string;
+
+    for (i = 0; i < ilen; ++i) {
+      width = Math.max(ctx.measureText(items[i]).width, width);
+    }
+
+    ctx.font = prev;
+
+    return {
+      height: ilen * font.lineHeight,
+      width: width
+    };
+  },
+
+  /**
+   * Returns value bounded by min and max. This is equivalent to max(min, min(value, max)).
+   * @todo move this method in Chart.helpers.bound
+   * https://doc.qt.io/qt-5/qtglobal.html#qBound
+   */
+  bound: function(min, value, max) {
+    return Math.max(min, Math.min(value, max));
+  },
+
+  /**
+   * Returns an array of pair [value, state] where state is:
+   * * -1: value is only in a0 (removed)
+   * *  1: value is only in a1 (added)
+   */
+  arrayDiff: function(a0, a1) {
+    var prev = a0.slice();
+    var updates = [];
+    var i, j, ilen, v;
+
+    for (i = 0, ilen = a1.length; i < ilen; ++i) {
+      v = a1[i];
+      j = prev.indexOf(v);
+
+      if (j === -1) {
+        updates.push([v, 1]);
+      } else {
+        prev.splice(j, 1);
+      }
+    }
+
+    for (i = 0, ilen = prev.length; i < ilen; ++i) {
+      updates.push([prev[i], -1]);
+    }
+
+    return updates;
+  },
+
+  /**
+   * https://github.com/chartjs/chartjs-plugin-datalabels/issues/70
+   */
+  rasterize: function(v) {
+    return Math.round(v * devicePixelRatio) / devicePixelRatio;
+  }
+};
+
+function orient(point, origin) {
+  var x0 = origin.x;
+  var y0 = origin.y;
+
+  if (x0 === null) {
+    return {x: 0, y: -1};
+  }
+  if (y0 === null) {
+    return {x: 1, y: 0};
+  }
+
+  var dx = point.x - x0;
+  var dy = point.y - y0;
+  var ln = Math.sqrt(dx * dx + dy * dy);
+
+  return {
+    x: ln ? dx / ln : 0,
+    y: ln ? dy / ln : -1
+  };
+}
+
+function aligned(x, y, vx, vy, align) {
+  switch (align) {
+  case 'center':
+    vx = vy = 0;
+    break;
+  case 'bottom':
+    vx = 0;
+    vy = 1;
+    break;
+  case 'right':
+    vx = 1;
+    vy = 0;
+    break;
+  case 'left':
+    vx = -1;
+    vy = 0;
+    break;
+  case 'top':
+    vx = 0;
+    vy = -1;
+    break;
+  case 'start':
+    vx = -vx;
+    vy = -vy;
+    break;
+  case 'end':
+    // keep natural orientation
+    break;
+  default:
+    // clockwise rotation (in degree)
+    align *= (Math.PI / 180);
+    vx = Math.cos(align);
+    vy = Math.sin(align);
+    break;
+  }
+
+  return {
+    x: x,
+    y: y,
+    vx: vx,
+    vy: vy
+  };
+}
+
+// Line clipping (Cohen–Sutherland algorithm)
+// https://en.wikipedia.org/wiki/Cohen–Sutherland_algorithm
+
+var R_INSIDE = 0;
+var R_LEFT = 1;
+var R_RIGHT = 2;
+var R_BOTTOM = 4;
+var R_TOP = 8;
+
+function region(x, y, rect) {
+  var res = R_INSIDE;
+
+  if (x < rect.left) {
+    res |= R_LEFT;
+  } else if (x > rect.right) {
+    res |= R_RIGHT;
+  }
+  if (y < rect.top) {
+    res |= R_TOP;
+  } else if (y > rect.bottom) {
+    res |= R_BOTTOM;
+  }
+
+  return res;
+}
+
+function clipped(segment, area) {
+  var x0 = segment.x0;
+  var y0 = segment.y0;
+  var x1 = segment.x1;
+  var y1 = segment.y1;
+  var r0 = region(x0, y0, area);
+  var r1 = region(x1, y1, area);
+  var r, x, y;
+
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    if (!(r0 | r1) || (r0 & r1)) {
+      // both points inside or on the same side: no clipping
+      break;
+    }
+
+    // at least one point is outside
+    r = r0 || r1;
+
+    if (r & R_TOP) {
+      x = x0 + (x1 - x0) * (area.top - y0) / (y1 - y0);
+      y = area.top;
+    } else if (r & R_BOTTOM) {
+      x = x0 + (x1 - x0) * (area.bottom - y0) / (y1 - y0);
+      y = area.bottom;
+    } else if (r & R_RIGHT) {
+      y = y0 + (y1 - y0) * (area.right - x0) / (x1 - x0);
+      x = area.right;
+    } else if (r & R_LEFT) {
+      y = y0 + (y1 - y0) * (area.left - x0) / (x1 - x0);
+      x = area.left;
+    }
+
+    if (r === r0) {
+      x0 = x;
+      y0 = y;
+      r0 = region(x0, y0, area);
+    } else {
+      x1 = x;
+      y1 = y;
+      r1 = region(x1, y1, area);
+    }
+  }
+
+  return {
+    x0: x0,
+    x1: x1,
+    y0: y0,
+    y1: y1
+  };
+}
+
+function compute$1(range, config) {
+  var anchor = config.anchor;
+  var segment = range;
+  var x, y;
+
+  if (config.clamp) {
+    segment = clipped(segment, config.area);
+  }
+
+  if (anchor === 'start') {
+    x = segment.x0;
+    y = segment.y0;
+  } else if (anchor === 'end') {
+    x = segment.x1;
+    y = segment.y1;
+  } else {
+    x = (segment.x0 + segment.x1) / 2;
+    y = (segment.y0 + segment.y1) / 2;
+  }
+
+  return aligned(x, y, range.vx, range.vy, config.align);
+}
+
+var positioners$1 = {
+  arc: function(el, config) {
+    var angle = (el.startAngle + el.endAngle) / 2;
+    var vx = Math.cos(angle);
+    var vy = Math.sin(angle);
+    var r0 = el.innerRadius;
+    var r1 = el.outerRadius;
+
+    return compute$1({
+      x0: el.x + vx * r0,
+      y0: el.y + vy * r0,
+      x1: el.x + vx * r1,
+      y1: el.y + vy * r1,
+      vx: vx,
+      vy: vy
+    }, config);
+  },
+
+  point: function(el, config) {
+    var v = orient(el, config.origin);
+    var rx = v.x * el.options.radius;
+    var ry = v.y * el.options.radius;
+
+    return compute$1({
+      x0: el.x - rx,
+      y0: el.y - ry,
+      x1: el.x + rx,
+      y1: el.y + ry,
+      vx: v.x,
+      vy: v.y
+    }, config);
+  },
+
+  bar: function(el, config) {
+    var v = orient(el, config.origin);
+    var x = el.x;
+    var y = el.y;
+    var sx = 0;
+    var sy = 0;
+
+    if (el.horizontal) {
+      x = Math.min(el.x, el.base);
+      sx = Math.abs(el.base - el.x);
+    } else {
+      y = Math.min(el.y, el.base);
+      sy = Math.abs(el.base - el.y);
+    }
+
+    return compute$1({
+      x0: x,
+      y0: y + sy,
+      x1: x + sx,
+      y1: y,
+      vx: v.x,
+      vy: v.y
+    }, config);
+  },
+
+  fallback: function(el, config) {
+    var v = orient(el, config.origin);
+
+    return compute$1({
+      x0: el.x,
+      y0: el.y,
+      x1: el.x + (el.width || 0),
+      y1: el.y + (el.height || 0),
+      vx: v.x,
+      vy: v.y
+    }, config);
+  }
+};
+
+var rasterize = utils.rasterize;
+
+function boundingRects(model) {
+  var borderWidth = model.borderWidth || 0;
+  var padding = model.padding;
+  var th = model.size.height;
+  var tw = model.size.width;
+  var tx = -tw / 2;
+  var ty = -th / 2;
+
+  return {
+    frame: {
+      x: tx - padding.left - borderWidth,
+      y: ty - padding.top - borderWidth,
+      w: tw + padding.width + borderWidth * 2,
+      h: th + padding.height + borderWidth * 2
+    },
+    text: {
+      x: tx,
+      y: ty,
+      w: tw,
+      h: th
+    }
+  };
+}
+
+function getScaleOrigin(el, context) {
+  var scale = context.chart.getDatasetMeta(context.datasetIndex).vScale;
+
+  if (!scale) {
+    return null;
+  }
+
+  if (scale.xCenter !== undefined && scale.yCenter !== undefined) {
+    return {x: scale.xCenter, y: scale.yCenter};
+  }
+
+  var pixel = scale.getBasePixel();
+  return el.horizontal ?
+    {x: pixel, y: null} :
+    {x: null, y: pixel};
+}
+
+function getPositioner(el) {
+  if (el instanceof ArcElement) {
+    return positioners$1.arc;
+  }
+  if (el instanceof PointElement) {
+    return positioners$1.point;
+  }
+  if (el instanceof BarElement) {
+    return positioners$1.bar;
+  }
+  return positioners$1.fallback;
+}
+
+function drawRoundedRect(ctx, x, y, w, h, radius) {
+  var HALF_PI = Math.PI / 2;
+
+  if (radius) {
+    var r = Math.min(radius, h / 2, w / 2);
+    var left = x + r;
+    var top = y + r;
+    var right = x + w - r;
+    var bottom = y + h - r;
+
+    ctx.moveTo(x, top);
+    if (left < right && top < bottom) {
+      ctx.arc(left, top, r, -Math.PI, -HALF_PI);
+      ctx.arc(right, top, r, -HALF_PI, 0);
+      ctx.arc(right, bottom, r, 0, HALF_PI);
+      ctx.arc(left, bottom, r, HALF_PI, Math.PI);
+    } else if (left < right) {
+      ctx.moveTo(left, y);
+      ctx.arc(right, top, r, -HALF_PI, HALF_PI);
+      ctx.arc(left, top, r, HALF_PI, Math.PI + HALF_PI);
+    } else if (top < bottom) {
+      ctx.arc(left, top, r, -Math.PI, 0);
+      ctx.arc(left, bottom, r, 0, Math.PI);
+    } else {
+      ctx.arc(left, top, r, -Math.PI, Math.PI);
+    }
+    ctx.closePath();
+    ctx.moveTo(x, y);
+  } else {
+    ctx.rect(x, y, w, h);
+  }
+}
+
+function drawFrame(ctx, rect, model) {
+  var bgColor = model.backgroundColor;
+  var borderColor = model.borderColor;
+  var borderWidth = model.borderWidth;
+
+  if (!bgColor && (!borderColor || !borderWidth)) {
+    return;
+  }
+
+  ctx.beginPath();
+
+  drawRoundedRect(
+    ctx,
+    rasterize(rect.x) + borderWidth / 2,
+    rasterize(rect.y) + borderWidth / 2,
+    rasterize(rect.w) - borderWidth,
+    rasterize(rect.h) - borderWidth,
+    model.borderRadius);
+
+  ctx.closePath();
+
+  if (bgColor) {
+    ctx.fillStyle = bgColor;
+    ctx.fill();
+  }
+
+  if (borderColor && borderWidth) {
+    ctx.strokeStyle = borderColor;
+    ctx.lineWidth = borderWidth;
+    ctx.lineJoin = 'miter';
+    ctx.stroke();
+  }
+}
+
+function textGeometry(rect, align, font) {
+  var h = font.lineHeight;
+  var w = rect.w;
+  var x = rect.x;
+  var y = rect.y + h / 2;
+
+  if (align === 'center') {
+    x += w / 2;
+  } else if (align === 'end' || align === 'right') {
+    x += w;
+  }
+
+  return {
+    h: h,
+    w: w,
+    x: x,
+    y: y
+  };
+}
+
+function drawTextLine(ctx, text, cfg) {
+  var shadow = ctx.shadowBlur;
+  var stroked = cfg.stroked;
+  var x = rasterize(cfg.x);
+  var y = rasterize(cfg.y);
+  var w = rasterize(cfg.w);
+
+  if (stroked) {
+    ctx.strokeText(text, x, y, w);
+  }
+
+  if (cfg.filled) {
+    if (shadow && stroked) {
+      // Prevent drawing shadow on both the text stroke and fill, so
+      // if the text is stroked, remove the shadow for the text fill.
+      ctx.shadowBlur = 0;
+    }
+
+    ctx.fillText(text, x, y, w);
+
+    if (shadow && stroked) {
+      ctx.shadowBlur = shadow;
+    }
+  }
+}
+
+function drawText(ctx, lines, rect, model) {
+  var align = model.textAlign;
+  var color = model.color;
+  var filled = !!color;
+  var font = model.font;
+  var ilen = lines.length;
+  var strokeColor = model.textStrokeColor;
+  var strokeWidth = model.textStrokeWidth;
+  var stroked = strokeColor && strokeWidth;
+  var i;
+
+  if (!ilen || (!filled && !stroked)) {
+    return;
+  }
+
+  // Adjust coordinates based on text alignment and line height
+  rect = textGeometry(rect, align, font);
+
+  ctx.font = font.string;
+  ctx.textAlign = align;
+  ctx.textBaseline = 'middle';
+  ctx.shadowBlur = model.textShadowBlur;
+  ctx.shadowColor = model.textShadowColor;
+
+  if (filled) {
+    ctx.fillStyle = color;
+  }
+  if (stroked) {
+    ctx.lineJoin = 'round';
+    ctx.lineWidth = strokeWidth;
+    ctx.strokeStyle = strokeColor;
+  }
+
+  for (i = 0, ilen = lines.length; i < ilen; ++i) {
+    drawTextLine(ctx, lines[i], {
+      stroked: stroked,
+      filled: filled,
+      w: rect.w,
+      x: rect.x,
+      y: rect.y + rect.h * i
+    });
+  }
+}
+
+var Label = function(config, ctx, el, index) {
+  var me = this;
+
+  me._config = config;
+  me._index = index;
+  me._model = null;
+  me._rects = null;
+  me._ctx = ctx;
+  me._el = el;
+};
+
+merge$1(Label.prototype, {
+  /**
+   * @private
+   */
+  _modelize: function(display, lines, config, context) {
+    var me = this;
+    var index = me._index;
+    var font = toFont(resolve([config.font, {}], context, index));
+    var color = resolve([config.color, defaults$1.color], context, index);
+
+    return {
+      align: resolve([config.align, 'center'], context, index),
+      anchor: resolve([config.anchor, 'center'], context, index),
+      area: context.chart.chartArea,
+      backgroundColor: resolve([config.backgroundColor, null], context, index),
+      borderColor: resolve([config.borderColor, null], context, index),
+      borderRadius: resolve([config.borderRadius, 0], context, index),
+      borderWidth: resolve([config.borderWidth, 0], context, index),
+      clamp: resolve([config.clamp, false], context, index),
+      clip: resolve([config.clip, false], context, index),
+      color: color,
+      display: display,
+      font: font,
+      lines: lines,
+      offset: resolve([config.offset, 4], context, index),
+      opacity: resolve([config.opacity, 1], context, index),
+      origin: getScaleOrigin(me._el, context),
+      padding: toPadding(resolve([config.padding, 4], context, index)),
+      positioner: getPositioner(me._el),
+      rotation: resolve([config.rotation, 0], context, index) * (Math.PI / 180),
+      size: utils.textSize(me._ctx, lines, font),
+      textAlign: resolve([config.textAlign, 'start'], context, index),
+      textShadowBlur: resolve([config.textShadowBlur, 0], context, index),
+      textShadowColor: resolve([config.textShadowColor, color], context, index),
+      textStrokeColor: resolve([config.textStrokeColor, color], context, index),
+      textStrokeWidth: resolve([config.textStrokeWidth, 0], context, index)
+    };
+  },
+
+  update: function(context) {
+    var me = this;
+    var model = null;
+    var rects = null;
+    var index = me._index;
+    var config = me._config;
+    var value, label, lines;
+
+    // We first resolve the display option (separately) to avoid computing
+    // other options in case the label is hidden (i.e. display: false).
+    var display = resolve([config.display, true], context, index);
+
+    if (display) {
+      value = context.dataset.data[index];
+      label = valueOrDefault(callback(config.formatter, [value, context]), value);
+      lines = isNullOrUndef(label) ? [] : utils.toTextLines(label);
+
+      if (lines.length) {
+        model = me._modelize(display, lines, config, context);
+        rects = boundingRects(model);
+      }
+    }
+
+    me._model = model;
+    me._rects = rects;
+  },
+
+  geometry: function() {
+    return this._rects ? this._rects.frame : {};
+  },
+
+  rotation: function() {
+    return this._model ? this._model.rotation : 0;
+  },
+
+  visible: function() {
+    return this._model && this._model.opacity;
+  },
+
+  model: function() {
+    return this._model;
+  },
+
+  draw: function(chart, center) {
+    var me = this;
+    var ctx = chart.ctx;
+    var model = me._model;
+    var rects = me._rects;
+    var area;
+
+    if (!this.visible()) {
+      return;
+    }
+
+    ctx.save();
+
+    if (model.clip) {
+      area = model.area;
+      ctx.beginPath();
+      ctx.rect(
+        area.left,
+        area.top,
+        area.right - area.left,
+        area.bottom - area.top);
+      ctx.clip();
+    }
+
+    ctx.globalAlpha = utils.bound(0, model.opacity, 1);
+    ctx.translate(rasterize(center.x), rasterize(center.y));
+    ctx.rotate(model.rotation);
+
+    drawFrame(ctx, rects.frame, model);
+    drawText(ctx, model.lines, rects.text, model);
+
+    ctx.restore();
+  }
+});
+
+var MIN_INTEGER = Number.MIN_SAFE_INTEGER || -9007199254740991; // eslint-disable-line es/no-number-minsafeinteger
+var MAX_INTEGER = Number.MAX_SAFE_INTEGER || 9007199254740991;  // eslint-disable-line es/no-number-maxsafeinteger
+
+function rotated(point, center, angle) {
+  var cos = Math.cos(angle);
+  var sin = Math.sin(angle);
+  var cx = center.x;
+  var cy = center.y;
+
+  return {
+    x: cx + cos * (point.x - cx) - sin * (point.y - cy),
+    y: cy + sin * (point.x - cx) + cos * (point.y - cy)
+  };
+}
+
+function projected(points, axis) {
+  var min = MAX_INTEGER;
+  var max = MIN_INTEGER;
+  var origin = axis.origin;
+  var i, pt, vx, vy, dp;
+
+  for (i = 0; i < points.length; ++i) {
+    pt = points[i];
+    vx = pt.x - origin.x;
+    vy = pt.y - origin.y;
+    dp = axis.vx * vx + axis.vy * vy;
+    min = Math.min(min, dp);
+    max = Math.max(max, dp);
+  }
+
+  return {
+    min: min,
+    max: max
+  };
+}
+
+function toAxis(p0, p1) {
+  var vx = p1.x - p0.x;
+  var vy = p1.y - p0.y;
+  var ln = Math.sqrt(vx * vx + vy * vy);
+
+  return {
+    vx: (p1.x - p0.x) / ln,
+    vy: (p1.y - p0.y) / ln,
+    origin: p0,
+    ln: ln
+  };
+}
+
+var HitBox = function() {
+  this._rotation = 0;
+  this._rect = {
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0
+  };
+};
+
+merge$1(HitBox.prototype, {
+  center: function() {
+    var r = this._rect;
+    return {
+      x: r.x + r.w / 2,
+      y: r.y + r.h / 2
+    };
+  },
+
+  update: function(center, rect, rotation) {
+    this._rotation = rotation;
+    this._rect = {
+      x: rect.x + center.x,
+      y: rect.y + center.y,
+      w: rect.w,
+      h: rect.h
+    };
+  },
+
+  contains: function(point) {
+    var me = this;
+    var margin = 1;
+    var rect = me._rect;
+
+    point = rotated(point, me.center(), -me._rotation);
+
+    return !(point.x < rect.x - margin
+      || point.y < rect.y - margin
+      || point.x > rect.x + rect.w + margin * 2
+      || point.y > rect.y + rect.h + margin * 2);
+  },
+
+  // Separating Axis Theorem
+  // https://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169
+  intersects: function(other) {
+    var r0 = this._points();
+    var r1 = other._points();
+    var axes = [
+      toAxis(r0[0], r0[1]),
+      toAxis(r0[0], r0[3])
+    ];
+    var i, pr0, pr1;
+
+    if (this._rotation !== other._rotation) {
+      // Only separate with r1 axis if the rotation is different,
+      // else it's enough to separate r0 and r1 with r0 axis only!
+      axes.push(
+        toAxis(r1[0], r1[1]),
+        toAxis(r1[0], r1[3])
+      );
+    }
+
+    for (i = 0; i < axes.length; ++i) {
+      pr0 = projected(r0, axes[i]);
+      pr1 = projected(r1, axes[i]);
+
+      if (pr0.max < pr1.min || pr1.max < pr0.min) {
+        return false;
+      }
+    }
+
+    return true;
+  },
+
+  /**
+   * @private
+   */
+  _points: function() {
+    var me = this;
+    var rect = me._rect;
+    var angle = me._rotation;
+    var center = me.center();
+
+    return [
+      rotated({x: rect.x, y: rect.y}, center, angle),
+      rotated({x: rect.x + rect.w, y: rect.y}, center, angle),
+      rotated({x: rect.x + rect.w, y: rect.y + rect.h}, center, angle),
+      rotated({x: rect.x, y: rect.y + rect.h}, center, angle)
+    ];
+  }
+});
+
+function coordinates(el, model, geometry) {
+  var point = model.positioner(el, model);
+  var vx = point.vx;
+  var vy = point.vy;
+
+  if (!vx && !vy) {
+    // if aligned center, we don't want to offset the center point
+    return {x: point.x, y: point.y};
+  }
+
+  var w = geometry.w;
+  var h = geometry.h;
+
+  // take in account the label rotation
+  var rotation = model.rotation;
+  var dx = Math.abs(w / 2 * Math.cos(rotation)) + Math.abs(h / 2 * Math.sin(rotation));
+  var dy = Math.abs(w / 2 * Math.sin(rotation)) + Math.abs(h / 2 * Math.cos(rotation));
+
+  // scale the unit vector (vx, vy) to get at least dx or dy equal to
+  // w or h respectively (else we would calculate the distance to the
+  // ellipse inscribed in the bounding rect)
+  var vs = 1 / Math.max(Math.abs(vx), Math.abs(vy));
+  dx *= vx * vs;
+  dy *= vy * vs;
+
+  // finally, include the explicit offset
+  dx += model.offset * vx;
+  dy += model.offset * vy;
+
+  return {
+    x: point.x + dx,
+    y: point.y + dy
+  };
+}
+
+function collide(labels, collider) {
+  var i, j, s0, s1;
+
+  // IMPORTANT Iterate in the reverse order since items at the end of the
+  // list have an higher weight/priority and thus should be less impacted
+  // by the overlapping strategy.
+
+  for (i = labels.length - 1; i >= 0; --i) {
+    s0 = labels[i].$layout;
+
+    for (j = i - 1; j >= 0 && s0._visible; --j) {
+      s1 = labels[j].$layout;
+
+      if (s1._visible && s0._box.intersects(s1._box)) {
+        collider(s0, s1);
+      }
+    }
+  }
+
+  return labels;
+}
+
+function compute(labels) {
+  var i, ilen, label, state, geometry, center, proxy;
+
+  // Initialize labels for overlap detection
+  for (i = 0, ilen = labels.length; i < ilen; ++i) {
+    label = labels[i];
+    state = label.$layout;
+
+    if (state._visible) {
+      // Chart.js 3 removed el._model in favor of getProps(), making harder to
+      // abstract reading values in positioners. Also, using string arrays to
+      // read values (i.e. var {a,b,c} = el.getProps(["a","b","c"])) would make
+      // positioners inefficient in the normal case (i.e. not the final values)
+      // and the code a bit ugly, so let's use a Proxy instead.
+      proxy = new Proxy(label._el, {get: (el, p) => el.getProps([p], true)[p]});
+
+      geometry = label.geometry();
+      center = coordinates(proxy, label.model(), geometry);
+      state._box.update(center, geometry, label.rotation());
+    }
+  }
+
+  // Auto hide overlapping labels
+  return collide(labels, function(s0, s1) {
+    var h0 = s0._hidable;
+    var h1 = s1._hidable;
+
+    if ((h0 && h1) || h1) {
+      s1._visible = false;
+    } else if (h0) {
+      s0._visible = false;
+    }
+  });
+}
+
+var layout = {
+  prepare: function(datasets) {
+    var labels = [];
+    var i, j, ilen, jlen, label;
+
+    for (i = 0, ilen = datasets.length; i < ilen; ++i) {
+      for (j = 0, jlen = datasets[i].length; j < jlen; ++j) {
+        label = datasets[i][j];
+        labels.push(label);
+        label.$layout = {
+          _box: new HitBox(),
+          _hidable: false,
+          _visible: true,
+          _set: i,
+          _idx: label._index
+        };
+      }
+    }
+
+    // TODO New `z` option: labels with a higher z-index are drawn
+    // of top of the ones with a lower index. Lowest z-index labels
+    // are also discarded first when hiding overlapping labels.
+    labels.sort(function(a, b) {
+      var sa = a.$layout;
+      var sb = b.$layout;
+
+      return sa._idx === sb._idx
+        ? sb._set - sa._set
+        : sb._idx - sa._idx;
+    });
+
+    this.update(labels);
+
+    return labels;
+  },
+
+  update: function(labels) {
+    var dirty = false;
+    var i, ilen, label, model, state;
+
+    for (i = 0, ilen = labels.length; i < ilen; ++i) {
+      label = labels[i];
+      model = label.model();
+      state = label.$layout;
+      state._hidable = model && model.display === 'auto';
+      state._visible = label.visible();
+      dirty |= state._hidable;
+    }
+
+    if (dirty) {
+      compute(labels);
+    }
+  },
+
+  lookup: function(labels, point) {
+    var i, state;
+
+    // IMPORTANT Iterate in the reverse order since items at the end of
+    // the list have an higher z-index, thus should be picked first.
+
+    for (i = labels.length - 1; i >= 0; --i) {
+      state = labels[i].$layout;
+
+      if (state && state._visible && state._box.contains(point)) {
+        return labels[i];
+      }
+    }
+
+    return null;
+  },
+
+  draw: function(chart, labels) {
+    var i, ilen, label, state, geometry, center;
+
+    for (i = 0, ilen = labels.length; i < ilen; ++i) {
+      label = labels[i];
+      state = label.$layout;
+
+      if (state._visible) {
+        geometry = label.geometry();
+        center = coordinates(label._el, label.model(), geometry);
+        state._box.update(center, geometry, label.rotation());
+        label.draw(chart, center);
+      }
+    }
+  }
+};
+
+var formatter = function(value) {
+  if (isNullOrUndef(value)) {
+    return null;
+  }
+
+  var label = value;
+  var keys, klen, k;
+  if (isObject(value)) {
+    if (!isNullOrUndef(value.label)) {
+      label = value.label;
+    } else if (!isNullOrUndef(value.r)) {
+      label = value.r;
+    } else {
+      label = '';
+      keys = Object.keys(value);
+      for (k = 0, klen = keys.length; k < klen; ++k) {
+        label += (k !== 0 ? ', ' : '') + keys[k] + ': ' + value[keys[k]];
+      }
+    }
+  }
+
+  return '' + label;
+};
+
+/**
+ * IMPORTANT: make sure to also update tests and TypeScript definition
+ * files (`/test/specs/defaults.spec.js` and `/types/options.d.ts`)
+ */
+
+var defaults = {
+  align: 'center',
+  anchor: 'center',
+  backgroundColor: null,
+  borderColor: null,
+  borderRadius: 0,
+  borderWidth: 0,
+  clamp: false,
+  clip: false,
+  color: undefined,
+  display: true,
+  font: {
+    family: undefined,
+    lineHeight: 1.2,
+    size: undefined,
+    style: undefined,
+    weight: null
+  },
+  formatter: formatter,
+  labels: undefined,
+  listeners: {},
+  offset: 4,
+  opacity: 1,
+  padding: {
+    top: 4,
+    right: 4,
+    bottom: 4,
+    left: 4
+  },
+  rotation: 0,
+  textAlign: 'start',
+  textStrokeColor: undefined,
+  textStrokeWidth: 0,
+  textShadowBlur: 0,
+  textShadowColor: undefined
+};
+
+/**
+ * @see https://github.com/chartjs/Chart.js/issues/4176
+ */
+
+var EXPANDO_KEY = '$datalabels';
+var DEFAULT_KEY = '$default';
+
+function configure$2(dataset, options) {
+  var override = dataset.datalabels;
+  var listeners = {};
+  var configs = [];
+  var labels, keys;
+
+  if (override === false) {
+    return null;
+  }
+  if (override === true) {
+    override = {};
+  }
+
+  options = merge$1({}, [options, override]);
+  labels = options.labels || {};
+  keys = Object.keys(labels);
+  delete options.labels;
+
+  if (keys.length) {
+    keys.forEach(function(key) {
+      if (labels[key]) {
+        configs.push(merge$1({}, [
+          options,
+          labels[key],
+          {_key: key}
+        ]));
+      }
+    });
+  } else {
+    // Default label if no "named" label defined.
+    configs.push(options);
+  }
+
+  // listeners: {<event-type>: {<label-key>: <fn>}}
+  listeners = configs.reduce(function(target, config) {
+    each(config.listeners || {}, function(fn, event) {
+      target[event] = target[event] || {};
+      target[event][config._key || DEFAULT_KEY] = fn;
+    });
+
+    delete config.listeners;
+    return target;
+  }, {});
+
+  return {
+    labels: configs,
+    listeners: listeners
+  };
+}
+
+function dispatchEvent(chart, listeners, label, event) {
+  if (!listeners) {
+    return;
+  }
+
+  var context = label.$context;
+  var groups = label.$groups;
+  var callback$1;
+
+  if (!listeners[groups._set]) {
+    return;
+  }
+
+  callback$1 = listeners[groups._set][groups._key];
+  if (!callback$1) {
+    return;
+  }
+
+  if (callback(callback$1, [context, event]) === true) {
+    // Users are allowed to tweak the given context by injecting values that can be
+    // used in scriptable options to display labels differently based on the current
+    // event (e.g. highlight an hovered label). That's why we update the label with
+    // the output context and schedule a new chart render by setting it dirty.
+    chart[EXPANDO_KEY]._dirty = true;
+    label.update(context);
+  }
+}
+
+function dispatchMoveEvents(chart, listeners, previous, label, event) {
+  var enter, leave;
+
+  if (!previous && !label) {
+    return;
+  }
+
+  if (!previous) {
+    enter = true;
+  } else if (!label) {
+    leave = true;
+  } else if (previous !== label) {
+    leave = enter = true;
+  }
+
+  if (leave) {
+    dispatchEvent(chart, listeners.leave, previous, event);
+  }
+  if (enter) {
+    dispatchEvent(chart, listeners.enter, label, event);
+  }
+}
+
+function handleMoveEvents(chart, event) {
+  var expando = chart[EXPANDO_KEY];
+  var listeners = expando._listeners;
+  var previous, label;
+
+  if (!listeners.enter && !listeners.leave) {
+    return;
+  }
+
+  if (event.type === 'mousemove') {
+    label = layout.lookup(expando._labels, event);
+  } else if (event.type !== 'mouseout') {
+    return;
+  }
+
+  previous = expando._hovered;
+  expando._hovered = label;
+  dispatchMoveEvents(chart, listeners, previous, label, event);
+}
+
+function handleClickEvents(chart, event) {
+  var expando = chart[EXPANDO_KEY];
+  var handlers = expando._listeners.click;
+  var label = handlers && layout.lookup(expando._labels, event);
+  if (label) {
+    dispatchEvent(chart, handlers, label, event);
+  }
+}
+
+var plugin$1 = {
+  id: 'datalabels',
+
+  defaults: defaults,
+
+  beforeInit: function(chart) {
+    chart[EXPANDO_KEY] = {
+      _actives: []
+    };
+  },
+
+  beforeUpdate: function(chart) {
+    var expando = chart[EXPANDO_KEY];
+    expando._listened = false;
+    expando._listeners = {};     // {<event-type>: {<dataset-index>: {<label-key>: <fn>}}}
+    expando._datasets = [];      // per dataset labels: [Label[]]
+    expando._labels = [];        // layouted labels: Label[]
+  },
+
+  afterDatasetUpdate: function(chart, args, options) {
+    var datasetIndex = args.index;
+    var expando = chart[EXPANDO_KEY];
+    var labels = expando._datasets[datasetIndex] = [];
+    var visible = chart.isDatasetVisible(datasetIndex);
+    var dataset = chart.data.datasets[datasetIndex];
+    var config = configure$2(dataset, options);
+    var elements = args.meta.data || [];
+    var ctx = chart.ctx;
+    var i, j, ilen, jlen, cfg, key, el, label;
+
+    ctx.save();
+
+    for (i = 0, ilen = elements.length; i < ilen; ++i) {
+      el = elements[i];
+      el[EXPANDO_KEY] = [];
+
+      if (visible && el && chart.getDataVisibility(i) && !el.skip) {
+        for (j = 0, jlen = config.labels.length; j < jlen; ++j) {
+          cfg = config.labels[j];
+          key = cfg._key;
+
+          label = new Label(cfg, ctx, el, i);
+          label.$groups = {
+            _set: datasetIndex,
+            _key: key || DEFAULT_KEY
+          };
+          label.$context = {
+            active: false,
+            chart: chart,
+            dataIndex: i,
+            dataset: dataset,
+            datasetIndex: datasetIndex
+          };
+
+          label.update(label.$context);
+          el[EXPANDO_KEY].push(label);
+          labels.push(label);
+        }
+      }
+    }
+
+    ctx.restore();
+
+    // Store listeners at the chart level and per event type to optimize
+    // cases where no listeners are registered for a specific event.
+    merge$1(expando._listeners, config.listeners, {
+      merger: function(event, target, source) {
+        target[event] = target[event] || {};
+        target[event][args.index] = source[event];
+        expando._listened = true;
+      }
+    });
+  },
+
+  afterUpdate: function(chart) {
+    chart[EXPANDO_KEY]._labels = layout.prepare(chart[EXPANDO_KEY]._datasets);
+  },
+
+  // Draw labels on top of all dataset elements
+  // https://github.com/chartjs/chartjs-plugin-datalabels/issues/29
+  // https://github.com/chartjs/chartjs-plugin-datalabels/issues/32
+  afterDatasetsDraw: function(chart) {
+    layout.draw(chart, chart[EXPANDO_KEY]._labels);
+  },
+
+  beforeEvent: function(chart, args) {
+    // If there is no listener registered for this chart, `listened` will be false,
+    // meaning we can immediately ignore the incoming event and avoid useless extra
+    // computation for users who don't implement label interactions.
+    if (chart[EXPANDO_KEY]._listened) {
+      var event = args.event;
+      switch (event.type) {
+      case 'mousemove':
+      case 'mouseout':
+        handleMoveEvents(chart, event);
+        break;
+      case 'click':
+        handleClickEvents(chart, event);
+        break;
+      }
+    }
+  },
+
+  afterEvent: function(chart) {
+    var expando = chart[EXPANDO_KEY];
+    var previous = expando._actives;
+    var actives = expando._actives = chart.getActiveElements();
+    var updates = utils.arrayDiff(previous, actives);
+    var i, ilen, j, jlen, update, label, labels;
+
+    for (i = 0, ilen = updates.length; i < ilen; ++i) {
+      update = updates[i];
+      if (update[1]) {
+        labels = update[0].element[EXPANDO_KEY] || [];
+        for (j = 0, jlen = labels.length; j < jlen; ++j) {
+          label = labels[j];
+          label.$context.active = (update[1] === 1);
+          label.update(label.$context);
+        }
+      }
+    }
+
+    if (expando._dirty || updates.length) {
+      layout.update(expando._labels);
+      chart.render();
+    }
+
+    delete expando._dirty;
+  }
+};
+
 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,
@@ -15274,7 +16654,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,
@@ -15317,6 +16703,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) {
@@ -15334,9 +16724,791 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
+    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [plugin$1] }));
 }
 
+/*!
+ * @energiency/chartjs-plugin-piechart-outlabels v1.3.4
+ * http://www.chartjs.org
+ * (c) 2017-2025 @energiency/chartjs-plugin-piechart-outlabels contributors
+ * Released under the MIT license
+ */
+
+/**
+ * @module Options
+ */
+
+var customDefaults = {
+    PLUGIN_KEY: '$outlabels',
+
+    /**
+     * The color used to draw the background of the label rect.
+     * @member {String|Array|Function|null}
+     * @default null (adaptive background)
+     */
+    backgroundColor: function (context) {
+        return context.dataset.backgroundColor;
+    },
+
+    /**
+     * The color used to draw the border of the label rect.
+     * @member {String|Array|Function|null}
+     * @default null (adaptive border color)
+     */
+    borderColor: function (context) {
+        return context.dataset.backgroundColor;
+    },
+
+    /**
+     * The color used to draw the line between label and arc of the chart.
+     * @member {String|Array|Function|null}
+     * @default null (adaptive line color)
+     */
+    lineColor: function (context) {
+        return context.dataset.backgroundColor;
+    },
+
+    /**
+     * The border radius used to add rounded corners to the label rect.
+     * @member {Number|Array|Function}
+     * @default 0 (not rounded)
+     */
+    borderRadius: 0,
+
+    /**
+     * The border width of the surrounding frame.
+     * @member {Number|Array|Function}
+     * @default 0 (no border)
+     */
+    borderWidth: 0,
+
+    /**
+     * The width (thickness) of the line between label and chart arc.
+     * @member {Number|Array|Function}
+     * @default 2
+     */
+    lineWidth: 2,
+
+    /**
+     * The color used to draw the label text.
+     * @member {String|Array|Function}
+     * @default white
+     */
+    color: 'white',
+
+    /**
+     * Whether to display labels global (boolean) or per data (function)
+     * @member {Boolean|Array|Function}
+     * @default true
+     */
+    display: true,
+
+    /**
+     * The font options used to draw the label text.
+     * @member {Object|Array|Function}
+     * @prop {Boolean} font.family - defaults to Chart.defaults.global.defaultFontFamily
+     * @prop {Boolean} font.size - defaults to Chart.defaults.global.defaultFontSize
+     * @prop {Boolean} font.style - defaults to Chart.defaults.global.defaultFontStyle
+     * @prop {Boolean} font.weight - defaults to 'normal'
+     * @prop {Boolean} font.maxSize - defaults to undefined (unlimited)
+     * @prop {Boolean} font.minSize - defaults to undefined (unlimited)
+     * @prop {Boolean} font.resizable - defaults to true
+     * @default Chart.defaults.global.defaultFont.*
+     */
+    font: {
+        family: undefined,
+        size: undefined,
+        style: undefined,
+        weight: null,
+        maxSize: null,
+        minSize: null,
+        resizable: true,
+    },
+
+    /**
+     * The line height (in pixel) to use for multi-lines labels.
+     * @member {Number|Array|Function|undefined}
+     * @default 1.2
+     */
+    lineHeight: 1.2,
+
+    /**
+     * The padding (in pixels) to apply between the text and the surrounding frame.
+     * @member {Number|Object|Array|Function}
+     * @prop {Number} padding.top - Space above the text.
+     * @prop {Number} padding.right - Space on the right of the text.
+     * @prop {Number} padding.bottom - Space below the text.
+     * @prop {Number} padding.left - Space on the left of the text.
+     * @default 4 (all values)
+     */
+    padding: {
+        top: 2,
+        right: 2,
+        bottom: 2,
+        left: 2,
+    },
+
+    /**
+     * Text alignment for multi-lines labels ('left'|'right'|'start'|'center'|'end').
+     * @member {String|Array|Function}
+     * @default 'center'
+     */
+    textAlign: 'center',
+
+    /**
+     * The radius of distance where the label will be drawn
+     * @member {Number|Array|Function|undefined}
+     * @default 30
+     */
+    stretch: 12,
+
+    /**
+     * The length of the horizontal part of line between label and chart arc.
+     * @member {Number}
+     * @default 30
+     */
+    horizontalStrechPad: 12,
+
+    /**
+     * The text of the label.
+     * @member {String}
+     * @default '%l %p' (label name and value percentage)
+     */
+    text: '%l %p',
+
+    /**
+     * The max level of zoom (out) for pie/doughnut chart in percent.
+     * @member {Number}
+     * @default 50 (%)
+     */
+    maxZoomOutPercentage: 50,
+
+    /**
+     * The count of numbers after the point separator for float values of percent property
+     * @member {Number}
+     * @default 1
+     */
+    percentPrecision: 1,
+
+    /**
+     * The count of numbers after the point separator for float values of value property
+     * @member {Number}
+     * @default 3
+     */
+    valuePrecision: 3,
+};
+
+const chartStates = new WeakMap();
+
+function getState(chart) {
+    let state = chartStates.get(chart);
+    if (!state) {
+        state = { sizeChanged: false, fitting: false };
+        chartStates.set(chart, state);
+    }
+    return state;
+}
+
+function removeState(chart) {
+    chartStates.delete(chart);
+}
+
+var positioners = {
+    center: function (arc, stretch) {
+        var angle = (arc.startAngle + arc.endAngle) / 2;
+        var cosA = Math.cos(angle);
+        var sinA = Math.sin(angle);
+        var d = arc.outerRadius;
+
+        var stretchedD = d + stretch;
+        return {
+            x: arc.x + cosA * stretchedD,
+            y: arc.y + sinA * stretchedD,
+            d: stretchedD,
+            arc: arc,
+            anchor: { x: arc.x + cosA * d, y: arc.y + sinA * d },
+            copy: { x: arc.x + cosA * stretchedD, y: arc.y + sinA * stretchedD },
+        };
+    },
+
+    moveFromAnchor: function (center, dist) {
+        var arc = center.arc;
+        var d = center.d;
+        var angle = (arc.startAngle + arc.endAngle) / 2;
+        var cosA = Math.cos(angle);
+        var sinA = Math.sin(angle);
+
+        d += dist;
+
+        return {
+            x: arc.x + cosA * d,
+            y: arc.y + sinA * d,
+            d: d,
+            arc: arc,
+            anchor: center.anchor,
+            copy: {
+                x: arc.x + cosA * d,
+                y: arc.y + sinA * d,
+            },
+        };
+    },
+};
+
+function toFontString(font) {
+    if (!font || isNullOrUndef(font.size) || isNullOrUndef(font.family)) {
+        return null;
+    }
+
+    return (
+        (font.style ? font.style + ' ' : '') + (font.weight ? font.weight + ' ' : '') + font.size + 'px ' + font.family
+    );
+}
+
+function textSize(ctx, lines, font) {
+    var items = [].concat(lines);
+    var ilen = items.length;
+    var prev = ctx.font;
+    var width = 0;
+    var i;
+
+    ctx.font = font.string;
+
+    for (i = 0; i < ilen; ++i) {
+        width = Math.max(ctx.measureText(items[i]).width, width);
+    }
+
+    ctx.font = prev;
+
+    return {
+        height: ilen * font.lineHeight,
+        width,
+    };
+}
+
+function adaptTextSizeToDimensions(width, height, minimum, maximum) {
+    const diag = Math.sqrt(Math.pow(width || 100, 2) + Math.pow(height || 100, 2));
+    const size = Math.round(diag * 0.02);
+
+    if (minimum && size < minimum) {
+        return minimum;
+    }
+    if (maximum && size > maximum) {
+        return maximum;
+    }
+    return size;
+}
+
+function parseFont(value, width, height) {
+    var size = valueOrDefault(value.size, Chart$1.defaults.defaultFontSize);
+
+    if (value.resizable) {
+        size = adaptTextSizeToDimensions(width, height, value.minSize, value.maxSize);
+    }
+
+    var font = {
+        family: valueOrDefault(value.family, Chart$1.defaults.defaultFontFamily),
+        lineHeight: toLineHeight(value.lineHeight, size),
+        lineWidth: toLineHeight(value.lineWidth, size),
+        size,
+        style: valueOrDefault(value.style, Chart$1.defaults.defaultFontStyle),
+        weight: valueOrDefault(value.weight, null),
+        string: '',
+    };
+
+    font.string = toFontString(font);
+    return font;
+}
+
+var PLUGIN_KEY$1 = customDefaults.PLUGIN_KEY;
+
+function collides(rect, otherRect) {
+    return (
+        rect.x < otherRect.x + otherRect.width &&
+        rect.x + rect.width > otherRect.x &&
+        rect.y < otherRect.y + otherRect.height &&
+        rect.y + rect.height > otherRect.y
+    );
+}
+
+var classes = {
+    OutLabel: function (chart, index, ctx, config, context) {
+        // Check whether the label should be displayed
+        if (!resolve([config.display, true], context, index)) {
+            throw new Error('Label display property is set to false.');
+        }
+
+        // Init text
+        var value = context.dataset.data[index];
+        var label = context.labels[index];
+        var text = resolve([config.text, customDefaults.text], context, index);
+        /* Replace label marker */
+        text = text.replace(/%l/gi, label);
+
+        /* Replace value marker with possible precision value */
+        (text.match(/%v\.?(\d*)/gi) || [])
+            .map(function (val) {
+                var prec = val.replace(/%v\./gi, '');
+                if (prec.length) {
+                    return +prec;
+                }
+                return config.valuePrecision || customDefaults.valuePrecision;
+            })
+            .forEach(function (val) {
+                text = text.replace(/%v\.?(\d*)/i, value.toFixed(val));
+            });
+
+        /* Replace percent marker with possible precision value */
+        (text.match(/%p\.?(\d*)/gi) || [])
+            .map(function (val) {
+                var prec = val.replace(/%p\./gi, '');
+                if (prec.length) {
+                    return +prec;
+                }
+                return config.percentPrecision || customDefaults.percentPrecision;
+            })
+            .forEach(function (val) {
+                text = text.replace(/%p\.?(\d*)/i, (context.percent * 100).toFixed(val) + '%');
+            });
+
+        // Count lines
+        var lines = text.match(/[^\r\n]+/g) || [];
+
+        // Remove unnecessary spaces
+        for (var i = 0; i < lines.length; ++i) {
+            lines[i] = lines[i].trim();
+        }
+
+        /* ===================== CONSTRUCTOR ==================== */
+        this.init = function (text, lines) {
+            // If everything ok -> begin initializing
+            this.encodedText = config.text;
+            this.text = text;
+            this.lines = lines;
+            this.label = label;
+            this.value = value;
+
+            // Init style
+            this.style = {
+                backgroundColor: resolve(
+                    [config.backgroundColor, customDefaults.backgroundColor, 'black'],
+                    context,
+                    index,
+                ),
+                borderColor: resolve([config.borderColor, customDefaults.borderColor, 'black'], context, index),
+                borderRadius: resolve([config.borderRadius, 0], context, index),
+                borderWidth: resolve([config.borderWidth, 0], context, index),
+                lineWidth: resolve([config.lineWidth, 2], context, index),
+                lineColor: resolve([config.lineColor, customDefaults.lineColor, 'black'], context, index),
+                color: resolve([config.color, 'white'], context, index),
+                font: parseFont(
+                    resolve([config.font, { resizable: true }]),
+                    ctx.canvas.style.width.slice(0, -2),
+                    ctx.canvas.style.height.slice(0, -2),
+                ),
+                padding: toPadding(resolve([config.padding, 0], context, index)),
+                textAlign: resolve([config.textAlign, 'left'], context, index),
+            };
+
+            this.stretch = resolve([config.stretch, customDefaults.stretch], context, index);
+            this.horizontalStrechPad = resolve(
+                [config.horizontalStrechPad, customDefaults.horizontalStrechPad],
+                context,
+                index,
+            );
+            this.size = textSize(ctx, this.lines, this.style.font);
+
+            this.offsetStep = this.size.width / 20;
+            this.offset = {
+                x: 0,
+                y: 0,
+            };
+        };
+
+        this.init(text, lines);
+
+        /* COMPUTING RECTS PART */
+        this.computeLabelRect = function () {
+            var width =
+                this.textRect.width + 2 * this.style.borderWidth + this.style.padding.left + this.style.padding.right;
+            var height =
+                this.textRect.height + 2 * this.style.borderWidth + this.style.padding.top + this.style.padding.bottom;
+
+            var x = this.textRect.x - this.style.borderWidth;
+            var y = this.textRect.y - this.style.borderWidth;
+
+            return {
+                x: x,
+                y: y,
+                width: width,
+                height: height,
+                isLeft: this.textRect.isLeft,
+                isTop: this.textRect.isTop,
+            };
+        };
+
+        this.computeTextRect = function () {
+            const isLeft = this.center.x - this.center.anchor.x < 0;
+            const isTop = this.center.y - this.center.anchor.y < 0;
+            const shift = isLeft ? -(this.horizontalStrechPad + this.size.width) : this.horizontalStrechPad;
+            return {
+                x: this.center.x - this.style.padding.left + shift,
+                y: this.center.y - this.size.height / 2,
+                width: this.size.width,
+                height: this.size.height,
+                isLeft,
+                isTop,
+            };
+        };
+
+        /* ======================= DRAWING ======================= */
+        // Draw label text
+        this.drawText = function (ctx) {
+            var align = this.style.textAlign;
+            var font = this.style.font;
+            var lh = font.lineHeight;
+            var color = this.style.color;
+            var ilen = this.lines.length;
+            var x, y, idx;
+
+            if (!ilen || !color) {
+                return;
+            }
+
+            x = this.textRect.x;
+            y = this.textRect.y + lh / 2;
+
+            if (align === 'center') {
+                x += this.textRect.width / 2;
+            } else if (align === 'end' || align === 'right') {
+                x += this.textRect.width;
+            }
+
+            ctx.font = this.style.font.string;
+            ctx.fillStyle = color;
+            ctx.textAlign = align;
+            ctx.textBaseline = 'middle';
+
+            for (idx = 0; idx < ilen; ++idx) {
+                ctx.fillText(
+                    this.lines[idx],
+                    Math.round(x) + this.style.padding.left,
+                    Math.round(y),
+                    Math.round(this.textRect.width),
+                );
+                y += lh;
+            }
+        };
+
+        // Draw label box
+        this.drawLabel = function (ctx) {
+            ctx.beginPath();
+
+            ctx.roundRect(
+                Math.round(this.labelRect.x),
+                Math.round(this.labelRect.y),
+                Math.round(this.labelRect.width),
+                Math.round(this.labelRect.height),
+                this.style.borderRadius,
+            );
+            ctx.closePath();
+
+            if (this.style.backgroundColor) {
+                ctx.fillStyle = this.style.backgroundColor || 'transparent';
+                ctx.fill();
+            }
+
+            if (this.style.borderColor && this.style.borderWidth) {
+                ctx.strokeStyle = this.style.borderColor;
+                ctx.lineWidth = this.style.borderWidth;
+                ctx.lineJoin = 'miter';
+                ctx.stroke();
+            }
+        };
+
+        this.ccw = function (A, B, C) {
+            return (C.y - A.y) * (B.x - A.x) > (B.y - A.y) * (C.x - A.x);
+        };
+
+        this.intersects = function (A, B, C, D) {
+            return this.ccw(A, C, D) !== this.ccw(B, C, D) && this.ccw(A, B, C) !== this.ccw(A, B, D);
+        };
+
+        this.drawLine = function (ctx) {
+            if (!this.lines.length) {
+                return;
+            }
+            ctx.save();
+
+            ctx.strokeStyle = this.style.lineColor;
+            ctx.lineWidth = this.style.lineWidth;
+            ctx.lineJoin = 'miter';
+            ctx.beginPath();
+            ctx.moveTo(this.center.anchor.x, this.center.anchor.y);
+            ctx.lineTo(this.center.copy.x, this.center.copy.y);
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.moveTo(this.center.copy.x, this.center.copy.y);
+            const xOffset = this.textRect.width + this.style.padding.width;
+            const intersect = this.intersects(
+                this.textRect,
+                {
+                    x: this.textRect.x + this.textRect.width,
+                    y: this.textRect.y + this.textRect.height,
+                },
+                this.center.copy,
+                {
+                    x: this.textRect.x,
+                    y: this.textRect.y + this.textRect.height / 2,
+                },
+            );
+            ctx.lineTo(this.textRect.x + (intersect ? xOffset : 0), this.textRect.y + this.textRect.height / 2);
+            ctx.stroke();
+            ctx.restore();
+        };
+
+        this.draw = function (ctx) {
+            if (chart.getDataVisibility(index)) {
+                this.drawLabel(ctx);
+                this.drawText(ctx);
+                this.drawLine(ctx);
+            }
+        };
+
+        // eslint-disable-next-line max-statements
+        this.update = function (view, elements, max) {
+            this.center = positioners.center(view, this.stretch);
+
+            let valid = false;
+            let steps = 30;
+
+            while (!valid && steps > 0) {
+                this.textRect = this.computeTextRect();
+                this.labelRect = this.computeLabelRect();
+
+                valid = true;
+
+                for (var e = 0; e < max; ++e) {
+                    var element = elements[e][PLUGIN_KEY$1];
+                    if (!element || !chart.getDataVisibility(index)) {
+                        continue;
+                    }
+
+                    if (collides(this.labelRect, element.labelRect)) {
+                        valid = false;
+                        break;
+                    }
+                }
+
+                if (!valid) {
+                    this.center = positioners.moveFromAnchor(this.center, 5);
+                }
+
+                steps--;
+            }
+        };
+    },
+};
+
+defaults$1.plugins.outlabels = customDefaults;
+
+var PLUGIN_KEY = customDefaults.PLUGIN_KEY;
+
+function configure$1(dataset, options) {
+    var override = dataset.outlabels;
+    var config = {};
+
+    if (override === false) {
+        return null;
+    }
+    if (override === true) {
+        override = {};
+    }
+
+    return Object.assign({}, config, options, override);
+}
+
+/**
+ * Returns the bounding box of the given label elements.
+ *
+ * @param {*} elements List of chart elements
+ * @returns Bounding box
+ */
+function getBoundingBox(elements) {
+    const rect = { left: Infinity, right: -Infinity, top: Infinity, bottom: -Infinity };
+
+    for (let i = 0, l = elements.length; i < l; i++) {
+        const outlabel = elements[i][PLUGIN_KEY];
+        if (!outlabel || !outlabel.labelRect) {
+            continue;
+        }
+
+        const { labelRect } = outlabel;
+        const { x, y, width, height } = labelRect;
+
+        rect.left = Math.min(rect.left, x);
+        rect.right = Math.max(rect.right, x + width);
+        rect.top = Math.min(rect.top, y);
+        rect.bottom = Math.max(rect.bottom, y + height);
+    }
+
+    return {
+        ...rect,
+        width: rect.right - rect.left,
+        height: rect.bottom - rect.top,
+    };
+}
+
+/**
+ * Returns the zoom percentage required to fit the given bounding box within the given bounding box.
+ *
+ * @param {*} boundingBoxToResize
+ * @param {*} boundingBoxToFitWithin
+ * @returns Zoom percentage
+ */
+function getResizeZoomPercentage(boundingBoxToResize, boundingBoxToFitWithin) {
+    const { width, height } = boundingBoxToFitWithin;
+    const deltas = [
+        ((boundingBoxToFitWithin.left - boundingBoxToResize.left) / width) * 2,
+        ((boundingBoxToFitWithin.top - boundingBoxToResize.top) / height) * 2,
+        ((boundingBoxToResize.right - boundingBoxToFitWithin.right) / width) * 2,
+        ((boundingBoxToResize.bottom - boundingBoxToFitWithin.bottom) / height) * 2,
+    ];
+
+    const maxDelta = Math.max(0, ...deltas);
+    return 1 - maxDelta;
+}
+
+/**
+ * Updates the labels of the given elements.
+ * @param {*} elements
+ */
+function updateLabels(elements) {
+    for (let i = 0, l = elements.length; i < l; i++) {
+        const element = elements[i];
+        const outlabel = element[PLUGIN_KEY];
+        if (!outlabel) {
+            continue;
+        }
+
+        outlabel.update(element, elements, i);
+    }
+}
+
+function fitChartArea(chart) {
+    const ctrl = chart._metasets[0].controller;
+    const meta = ctrl.getMeta();
+    const elements = meta.data || [];
+
+    const boundingBox = getBoundingBox(elements);
+    const zoom = getResizeZoomPercentage(boundingBox, chart.chartArea);
+
+    if (zoom && zoom !== 1) {
+        ctrl.outerRadius = ctrl.outerRadius * zoom;
+        ctrl.innerRadius *= zoom;
+
+        ctrl.updateElements(meta.data, 0, meta.data.length, 'none');
+        return true;
+    }
+
+    return false;
+}
+
+var plugin = {
+    id: 'outlabels',
+    resize: function (chart) {
+        getState(chart).sizeChanged = true;
+    },
+    afterUpdate: (chart) => {
+        const ctrl = chart._metasets[0].controller;
+        const meta = ctrl.getMeta();
+        const elements = meta.data || [];
+
+        let fit = false;
+        // Limit the number of steps to prevent infinite loops
+        // It seems that using the number of elements will ensure that the chart
+        // fits by positioning all labels in successive resizes
+        let maxSteps = elements.length;
+
+        // Avoid to draw labels while fitting the chart area
+        getState(chart).fitting = true;
+
+        while (!fit && maxSteps-- > 0) {
+            updateLabels(elements);
+            fit = !fitChartArea(chart);
+        }
+
+        getState(chart).fitting = false;
+    },
+    afterDatasetUpdate: function (chart, args, options) {
+        var labels = chart.config.data.labels;
+        var dataset = chart.data.datasets[args.index];
+        var config = configure$1(dataset, options);
+        var display = config && config.display;
+        var elements = args.meta.data || [];
+        var ctx = chart.ctx;
+        var el, label, percent, newLabel, context, i;
+        ctx.save();
+
+        for (i = 0; i < elements.length; ++i) {
+            el = elements[i];
+            label = el[PLUGIN_KEY];
+            percent = dataset.data[i] / args.meta.total;
+            newLabel = null;
+
+            if (display && el && !el.hidden) {
+                try {
+                    context = {
+                        chart: chart,
+                        dataIndex: i,
+                        dataset: dataset,
+                        labels: labels,
+                        datasetIndex: args.index,
+                        percent: percent,
+                    };
+                    newLabel = new classes.OutLabel(chart, i, ctx, config, context);
+                } catch (e) {
+                    newLabel = null;
+                }
+            }
+
+            if (
+                label &&
+                newLabel &&
+                !getState(chart).sizeChanged &&
+                label.label === newLabel.label &&
+                label.encodedText === newLabel.encodedText
+            ) {
+                newLabel.offset = label.offset;
+            }
+            el[PLUGIN_KEY] = newLabel;
+        }
+
+        ctx.restore();
+        getState(chart).sizeChanged = false;
+    },
+    afterDatasetDraw: function (chart, args) {
+        var elements = args.meta.data || [];
+        var ctx = chart.ctx;
+
+        if (getState(chart).fitting) {
+            return;
+        }
+
+        elements.forEach((el, index) => {
+            const outlabelPlugin = el[PLUGIN_KEY];
+            if (!outlabelPlugin) {
+                return;
+            }
+            outlabelPlugin.update(el, elements, index);
+            outlabelPlugin.draw(ctx);
+        });
+    },
+    afterDestroy: function (chart) {
+        removeState(chart);
+    },
+};
+
 Chart$1.register(ArcElement, plugin_tooltip, plugin_legend);
 const PieChart = (props) => {
     const { data, title, options, units, content } = props;
@@ -15414,7 +17586,7 @@ const PieChart = (props) => {
             },
         },
     };
-    return jsxRuntimeExports.jsx(Pie, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartPieChartOutlabels] });
+    return jsxRuntimeExports.jsx(Pie, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [plugin] });
 };
 
 Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
@@ -15491,13 +17663,14 @@ function LineChart({ title, data, options, className, units, content }) {
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
+    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [plugin$1] }));
 }
 
 function DataGrid({ title, data, className }) {
     var _a;
-    const { columns, rows, grouped = false, grouping } = data;
+    const { columns, rows, units, grouped = false, grouping } = data;
     const [expandedGroups, setExpandedGroups] = React.useState(new Set(((_a = grouping === null || grouping === void 0 ? void 0 : grouping.sections) === null || _a === void 0 ? void 0 : _a.filter(s => s.expanded).map(s => s.group_value)) || []));
+    console.log('units==>', units);
     const toggleGroup = (groupValue) => {
         const newExpanded = new Set(expandedGroups);
         if (newExpanded.has(groupValue)) {
@@ -15508,6 +17681,30 @@ function DataGrid({ title, data, className }) {
         }
         setExpandedGroups(newExpanded);
     };
+    const formatValueWithUnit = (value, columnIndex) => {
+        if (value === null || value === undefined)
+            return "—";
+        const unit = units === null || units === void 0 ? void 0 : units[columnIndex];
+        // Format the value with commas if it's a number or numeric string
+        let valueStr;
+        if (typeof value === 'number') {
+            valueStr = value.toLocaleString();
+        }
+        else {
+            const numValue = parseFloat(String(value));
+            valueStr = !isNaN(numValue) ? numValue.toLocaleString() : String(value);
+        }
+        // If no unit or unit length > 3, return value only
+        if (!unit || unit.length > 3) {
+            return valueStr;
+        }
+        // If unit is $, display unit before value
+        if (unit === '$') {
+            return `${unit}${valueStr}`;
+        }
+        // Otherwise display value then unit
+        return `${valueStr}${unit}`;
+    };
     // Backward compatibility: if no data or not grouped, show original table
     if (!columns || columns.length === 0 || (!grouped && (!rows || rows.length === 0))) {
         return (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: "No data available" }) }));
@@ -15519,7 +17716,7 @@ function DataGrid({ title, data, className }) {
     const renderGroupedTable = () => {
         if (!(grouping === null || grouping === void 0 ? void 0 : grouping.sections))
             return null;
-        return (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "border-b border-gray-200", children: [jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50 w-8" }), columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: column }, index)))] }) }), jsxRuntimeExports.jsx("tbody", { children: grouping.sections.map((section, sectionIndex) => {
+        return (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "border-b border-gray-200", children: [jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50 w-8" }), columns.map((column, index) => (jsxRuntimeExports.jsxs("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: [column, (units === null || units === void 0 ? void 0 : units[index]) ? ` (${units[index]})` : ''] }, index)))] }) }), jsxRuntimeExports.jsx("tbody", { children: grouping.sections.map((section, sectionIndex) => {
                         const isExpanded = expandedGroups.has(section.group_value);
                         return (jsxRuntimeExports.jsxs(React.Fragment, { children: [jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50 border-b border-gray-200", children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3", children: section.collapsible && (jsxRuntimeExports.jsx("button", { onClick: () => toggleGroup(section.group_value), className: "flex items-center justify-center w-6 h-6 hover:bg-blue-100 rounded transition-colors", "aria-label": isExpanded ? "Collapse group" : "Expand group", children: isExpanded ? (jsxRuntimeExports.jsx(lucideReact.ChevronDown, { className: "w-4 h-4 text-blue-600" })) : (jsxRuntimeExports.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-blue-600" })) })) }), columns.map((column, columnIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm font-medium text-blue-700", children: columnIndex === 0 ? (jsxRuntimeExports.jsxs("span", { className: "font-semibold text-blue-900", children: [section.title, ": ", section.group_value] })) : (jsxRuntimeExports.jsx("div", { className: "text-left", children: (() => {
                                                     var _a;
@@ -15531,7 +17728,7 @@ function DataGrid({ title, data, className }) {
                                                     if (sectionStats[column] &&
                                                         typeof sectionStats[column].total === 'number' &&
                                                         !isNaN(sectionStats[column].total)) {
-                                                        return (jsxRuntimeExports.jsx("span", { className: "whitespace-nowrap text-xs font-medium text-blue-800", children: sectionStats[column].total.toLocaleString() }));
+                                                        return (jsxRuntimeExports.jsx("span", { className: "whitespace-nowrap text-xs font-medium text-blue-800", children: formatValueWithUnit(sectionStats[column].total, columnIndex) }));
                                                     }
                                                     // If exact match fails, try to find by partial match
                                                     const matchingKey = Object.keys(sectionStats).find(key => key.toLowerCase().includes(column.toLowerCase()) ||
@@ -15539,17 +17736,17 @@ function DataGrid({ title, data, className }) {
                                                     if (matchingKey && sectionStats[matchingKey] &&
                                                         typeof sectionStats[matchingKey].total === 'number' &&
                                                         !isNaN(sectionStats[matchingKey].total)) {
-                                                        return (jsxRuntimeExports.jsx("span", { className: "whitespace-nowrap text-xs font-medium text-blue-800", children: sectionStats[matchingKey].total.toLocaleString() }));
+                                                        return (jsxRuntimeExports.jsx("span", { className: "whitespace-nowrap text-xs font-medium text-blue-800", children: formatValueWithUnit(sectionStats[matchingKey].total, columnIndex) }));
                                                     }
                                                     return jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: "\u2014" });
                                                 })() })) }, columnIndex)))] }), (!section.collapsible || isExpanded) && section.rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
                                         ? "bg-white"
-                                        : "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3" }), row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
+                                        : "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3" }), row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: formatValueWithUnit(cell, cellIndex) }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
                     }) })] }));
     };
-    const renderRegularTable = () => (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsx("tr", { className: "border-b border-gray-200", children: columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: column }, index))) }) }), jsxRuntimeExports.jsx("tbody", { children: rows.map((row, rowIndex) => (jsxRuntimeExports.jsx("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
+    const renderRegularTable = () => (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsx("tr", { className: "border-b border-gray-200", children: columns.map((column, index) => (jsxRuntimeExports.jsxs("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: [column, (units === null || units === void 0 ? void 0 : units[index]) ? ` (${units[index]})` : ''] }, index))) }) }), jsxRuntimeExports.jsx("tbody", { children: rows.map((row, rowIndex) => (jsxRuntimeExports.jsx("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
                         ? "bg-white"
-                        : "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex))) }, rowIndex))) })] }));
+                        : "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: formatValueWithUnit(cell, cellIndex) }, cellIndex))) }, rowIndex))) })] }));
     return (jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col ${className || ""}`, children: [title && (jsxRuntimeExports.jsx("div", { className: "pb-4", children: jsxRuntimeExports.jsx("h3", { className: "text-lg font-bold", style: {
                         color: "#0F172A"
                     }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntimeExports.jsx("div", { className: "min-w-full", children: grouped && grouping ? renderGroupedTable() : renderRegularTable() }) }), jsxRuntimeExports.jsx("div", { className: "pt-2 text-xs text-gray-500", children: grouped && grouping && grouping.section_statistics ? (jsxRuntimeExports.jsxs("div", { className: "flex gap-6", children: [jsxRuntimeExports.jsxs("span", { children: [grouping.total_groups, " group", grouping.total_groups !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] }), jsxRuntimeExports.jsx("div", { className: "flex gap-4", children: (() => {
@@ -15561,7 +17758,10 @@ function DataGrid({ title, data, className }) {
                                         }
                                     });
                                 });
-                                return Object.entries(totals).map(([column, total], index) => (jsxRuntimeExports.jsxs("span", { className: "font-medium", children: ["Total ", column, ": ", total.toLocaleString()] }, index)));
+                                return Object.entries(totals).map(([column, total], index) => {
+                                    const columnIndex = columns.findIndex(col => col === column);
+                                    return (jsxRuntimeExports.jsxs("span", { className: "font-medium", children: ["Total ", column, ": ", formatValueWithUnit(total, columnIndex)] }, index));
+                                });
                             })() })] })) : (jsxRuntimeExports.jsxs("span", { children: ["Showing ", rows.length, " row", rows.length !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) })] }));
 }
 
@@ -36674,11 +38874,12 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
     return (jsxRuntimeExports.jsx(LineChart, { title: chartTitle, data: transformedData, units: units, content: content }));
 }
 function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
     const hasCalledRef = React.useRef(false);
     const columns = ((_b = (_a = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.headers) || ((_e = (_d = (_c = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.state) === null || _c === void 0 ? void 0 : _c.matrix_grid_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.headers) || [];
     const rows = ((_g = (_f = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.rows) || ((_k = (_j = (_h = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.state) === null || _h === void 0 ? void 0 : _h.matrix_grid_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.rows) || [];
     const gridTitle = ((_l = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _l === void 0 ? void 0 : _l.title) || ((_o = (_m = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.state) === null || _m === void 0 ? void 0 : _m.matrix_grid_data) === null || _o === void 0 ? void 0 : _o.title) || "";
+    const units = ((_q = (_p = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _p === void 0 ? void 0 : _p.data) === null || _q === void 0 ? void 0 : _q.units) || ((_t = (_s = (_r = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.state) === null || _r === void 0 ? void 0 : _r.matrix_grid_data) === null || _s === void 0 ? void 0 : _s.data) === null || _t === void 0 ? void 0 : _t.units) || [];
     const isEmpty = columns.length === 0 || rows.length === 0;
     const handleRefresh = async () => {
         if (query) {
@@ -36712,9 +38913,10 @@ function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirs
     }
     const transformedData = {
         columns: columns,
+        units: units,
         rows: rows,
-        grouped: ((_p = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _p === void 0 ? void 0 : _p.grouped) || ((_r = (_q = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.state) === null || _q === void 0 ? void 0 : _q.matrix_grid_data) === null || _r === void 0 ? void 0 : _r.grouped) || false,
-        grouping: ((_s = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _s === void 0 ? void 0 : _s.grouping) || ((_u = (_t = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.state) === null || _t === void 0 ? void 0 : _t.matrix_grid_data) === null || _u === void 0 ? void 0 : _u.grouping)
+        grouped: ((_u = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _u === void 0 ? void 0 : _u.grouped) || ((_w = (_v = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.state) === null || _v === void 0 ? void 0 : _v.matrix_grid_data) === null || _w === void 0 ? void 0 : _w.grouped) || false,
+        grouping: ((_x = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _x === void 0 ? void 0 : _x.grouping) || ((_z = (_y = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.state) === null || _y === void 0 ? void 0 : _y.matrix_grid_data) === null || _z === void 0 ? void 0 : _z.grouping)
     };
     return (jsxRuntimeExports.jsx(DataGrid, { title: gridTitle, data: transformedData, className: "" }));
 }
@@ -36864,7 +39066,6 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
     React.useEffect(() => {
         const handleTriggerAgent = (event) => {
             const { widgetId, query, agentType: eventAgentType, datasetId } = event.detail;
-            console.log('event.detail==>', event.detail);
             if (widgetId === widget.id) {
                 let messageContent = query;
                 // Customize message based on agent type
@@ -40744,7 +42945,7 @@ function SavedPages({ onEditPage, widgetBackendUrl }) {
     if (isLoading) {
         return (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-screen", children: jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" }) }));
     }
-    return (jsxRuntimeExports.jsxs("div", { className: "container mx-auto p-6 space-y-6", children: [jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntimeExports.jsx("h1", { className: "text-2xl font-bold", children: "Saved Pages" }), jsxRuntimeExports.jsxs(Button, { onClick: handleCreatePage, children: [jsxRuntimeExports.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }), "Create New Page"] })] }), error && (jsxRuntimeExports.jsx(Alert, { variant: "destructive", children: jsxRuntimeExports.jsx(AlertDescription, { children: error }) })), jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntimeExports.jsx(lucideReact.Search, { className: "h-4 w-4 text-muted-foreground" }), jsxRuntimeExports.jsx(Input, { placeholder: "Search pages...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "max-w-sm" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: filteredPages.map((page) => (jsxRuntimeExports.jsxs(Card, { className: "hover:shadow-lg transition-shadow", children: [jsxRuntimeExports.jsxs(CardHeader, { children: [jsxRuntimeExports.jsx(CardTitle, { children: page.title }), jsxRuntimeExports.jsxs(CardDescription, { children: ["Created: ", format(new Date(page.created_at), "PPP")] })] }), jsxRuntimeExports.jsx(CardContent, { children: jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2 text-sm text-muted-foreground", children: [jsxRuntimeExports.jsx(lucideReact.LayoutGrid, { className: "h-4 w-4" }), jsxRuntimeExports.jsxs("span", { children: ["Page #", page.id] })] }), jsxRuntimeExports.jsxs("div", { className: "flex space-x-2", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: () => onEditPage(page.id), children: jsxRuntimeExports.jsx(lucideReact.Edit2, { className: "h-4 w-4" }) }), jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: () => handleDeletePage(page.id), children: jsxRuntimeExports.jsx(lucideReact.Trash2, { className: "h-4 w-4" }) })] })] }) })] }, page.id))) }), filteredPages.length === 0 && (jsxRuntimeExports.jsx("div", { className: "text-center text-muted-foreground py-12", children: "No pages found. Create a new one to get started." })), jsxRuntimeExports.jsx(Dialog, { open: isCreateModalOpen, onOpenChange: setIsCreateModalOpen, children: jsxRuntimeExports.jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [jsxRuntimeExports.jsxs(DialogHeader, { children: [jsxRuntimeExports.jsx(DialogTitle, { children: "Create New Page" }), jsxRuntimeExports.jsx(DialogDescription, { children: "Create a new page with widgets. You can customize it after creation." })] }), jsxRuntimeExports.jsxs("div", { className: "grid gap-4 py-4", children: [jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-4 items-center gap-4", children: [jsxRuntimeExports.jsx(Label, { htmlFor: "title", className: "text-right", children: "Title" }), jsxRuntimeExports.jsx(Input, { id: "title", value: newPageTitle, onChange: (e) => setNewPageTitle(e.target.value), placeholder: "Enter page title...", className: "col-span-3" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntimeExports.jsx(Checkbox, { id: "public", checked: newPageIsPublic, onCheckedChange: (checked) => setNewPageIsPublic(checked === true) }), jsxRuntimeExports.jsx(Label, { htmlFor: "public", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Make this page public" })] })] }), jsxRuntimeExports.jsxs(DialogFooter, { children: [jsxRuntimeExports.jsx(Button, { type: "button", variant: "outline", onClick: () => {
+    return (jsxRuntimeExports.jsxs("div", { className: "container mx-auto p-6 space-y-6", children: [jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntimeExports.jsx("h1", { className: "text-2xl font-bold", children: "Saved Pages" }), jsxRuntimeExports.jsxs(Button, { onClick: handleCreatePage, children: [jsxRuntimeExports.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }), "Create New Page"] })] }), error && (jsxRuntimeExports.jsx(Alert, { variant: "destructive", children: jsxRuntimeExports.jsx(AlertDescription, { children: error }) })), jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntimeExports.jsx(lucideReact.Search, { className: "h-4 w-4 text-muted-foreground" }), jsxRuntimeExports.jsx(Input, { placeholder: "Search pages...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "max-w-sm" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: filteredPages.map((page) => (jsxRuntimeExports.jsxs(Card, { className: "hover:shadow-lg transition-shadow", children: [jsxRuntimeExports.jsxs(CardHeader, { children: [jsxRuntimeExports.jsx(CardTitle, { children: page.title }), jsxRuntimeExports.jsxs(CardDescription, { children: ["Created: ", format(new Date(page.created_at), "PPP")] })] }), jsxRuntimeExports.jsx(CardContent, { children: jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2 text-sm text-muted-foreground", children: [jsxRuntimeExports.jsx(lucideReact.LayoutGrid, { className: "h-4 w-4" }), jsxRuntimeExports.jsxs("span", { children: ["Page #", page.id] })] }), jsxRuntimeExports.jsxs("div", { className: "flex space-x-2", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: () => onEditPage(page.id), children: jsxRuntimeExports.jsx(lucideReact.Edit2, { className: "h-4 w-4" }) }), jsxRuntimeExports.jsx(Button, { variant: "outline", size: "sm", onClick: () => handleDeletePage(page.id), children: jsxRuntimeExports.jsx(lucideReact.Trash2, { className: "h-4 w-4" }) })] })] }) })] }, page.id))) }), filteredPages.length === 0 && (jsxRuntimeExports.jsx("div", { className: "text-center text-muted-foreground py-12", children: "No pages found. Create a new one to get started." })), jsxRuntimeExports.jsx(Dialog, { open: isCreateModalOpen, onOpenChange: setIsCreateModalOpen, children: jsxRuntimeExports.jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [jsxRuntimeExports.jsxs(DialogHeader, { children: [jsxRuntimeExports.jsx(DialogTitle, { children: "Create New Page" }), jsxRuntimeExports.jsx(DialogDescription, { children: "Create a new page with widgets. You can customize it after creation." })] }), jsxRuntimeExports.jsxs("div", { className: "grid gap-4 py-4", children: [jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-4 items-center gap-4", children: [jsxRuntimeExports.jsx(Label$1, { htmlFor: "title", className: "text-right", children: "Title" }), jsxRuntimeExports.jsx(Input, { id: "title", value: newPageTitle, onChange: (e) => setNewPageTitle(e.target.value), placeholder: "Enter page title...", className: "col-span-3" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntimeExports.jsx(Checkbox, { id: "public", checked: newPageIsPublic, onCheckedChange: (checked) => setNewPageIsPublic(checked === true) }), jsxRuntimeExports.jsx(Label$1, { htmlFor: "public", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Make this page public" })] })] }), jsxRuntimeExports.jsxs(DialogFooter, { children: [jsxRuntimeExports.jsx(Button, { type: "button", variant: "outline", onClick: () => {
                                         setIsCreateModalOpen(false);
                                         setNewPageTitle("");
                                         setNewPageIsPublic(false);