@ck-ui/component-library 0.3.0 → 1.0.0

package/dist/components/DateRangePicker/_types/dateRangePicker.types.d.ts

@@ -4,6 +4,8 @@ export type { DateRange, DefinedRange };
 export interface DateRangePickerProps {
     /** Handler called when the date range changes */
     onChange: (range: DateRange) => void;
+    /** Handler called when the selection is cleared */
+    onClear?: () => void;
     /** Currently selected date range */
     value?: DateRange;
     /** Label for the toggle button */
@@ -27,6 +29,14 @@ export interface DateRangePickerProps {
     size?: ButtonSize;
     /** Horizontal alignment of the popup relative to the trigger button */
     popupAlign?: "left" | "right";
+    /**
+     * Date display format string. Tokens: DD, MM, MMM, MMMM, YYYY, YY.
+     * @default "MMM D, YYYY" (e.g. "Jan 1, 2025")
+     * @example "DD-MM-YYYY" → "01-01-2025"
+     * @example "MM/DD/YYYY" → "01/01/2025"
+     * @example "YYYY-MM-DD" → "2025-01-01"
+     */
+    dateFormat?: string;
 }
 export interface RangeSidebarProps {
     ranges: DefinedRange[];

package/dist/components/DateRangePicker/_types/dateRangePicker.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateRangePicker.types.d.ts","sourceRoot":"","sources":["../../../../lib/components/DateRangePicker/_types/dateRangePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAErE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AAExC,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB,iEAAiE;IACjE,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B,wDAAwD;IACxD,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
+{"version":3,"file":"dateRangePicker.types.d.ts","sourceRoot":"","sources":["../../../../lib/components/DateRangePicker/_types/dateRangePicker.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAErE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AAExC,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB,iEAAiE;IACjE,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B,wDAAwD;IACxD,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/dist/components/FusionChart/_config/builders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builders.d.ts","sourceRoot":"","sources":["../../../../lib/components/FusionChart/_config/builders.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AA00BpE,eAAO,MAAM,gBAAgB,GAAI,QAAO,OAAO,CAAC,gBAAgB,CAAM;;;;;;;QACD,CAAC"}
+{"version":3,"file":"builders.d.ts","sourceRoot":"","sources":["../../../../lib/components/FusionChart/_config/builders.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AA+0BpE,eAAO,MAAM,gBAAgB,GAAI,QAAO,OAAO,CAAC,gBAAgB,CAAM;;;;;;;QACD,CAAC"}

package/dist/components/FusionChart/_config/builders.js

@@ -1,16 +1,16 @@
-import { EXTENDED_PALETTE as D, DEFAULT_WIDTH as g, STACKED_AREA_PALETTE as z } from "../_constant/constants.js";
-import { getBaseConfig as h, getStackedColumnChartShell as T, getStackedAreaChartShell as H, getStackedBarChartShell as R, getLineChartShell as V, getCommonChartShell as N, getScrollAreaChartShell as k, getMultipleLineChartShell as O, getMsCombiDy2dChartShell as W, getGroupChartShell as _, getDoughnutChartShell as G } from "./helpers.js";
-import { getCurrencyPrefix as m, getLabelStep as b, getCartesianPalette as L, getGraphDataLength as U, getBarType as q, getCurrencySymbol as F } from "../_utils/chartHelpers.js";
+import { EXTENDED_PALETTE as $, DEFAULT_WIDTH as h, STACKED_AREA_PALETTE as z } from "../_constant/constants.js";
+import { getBaseConfig as g, getStackedColumnChartShell as T, getStackedAreaChartShell as H, getStackedBarChartShell as R, getLineChartShell as V, getCommonChartShell as L, getScrollAreaChartShell as N, getMultipleLineChartShell as O, getMsCombiDy2dChartShell as W, getGroupChartShell as _, getDoughnutChartShell as G } from "./helpers.js";
+import { getCurrencyPrefix as m, getLabelStep as b, getCartesianPalette as k, getGraphDataLength as U, getBarType as q, getCurrencySymbol as F } from "../_utils/chartHelpers.js";
 const P = (e = {}) => {
-  const t = e.plotSpacePercent ?? (e.plotSpacePercent === 0 ? e.plotSpacePercent : 60), a = Array.isArray(e.graphData) ? e.graphData : [], n = a.some((r) => !!r.color), l = L(e?.palettecolors)?.split(",")?.map((r) => r?.trim()), i = a?.map((r, d) => {
-    const x = r?.color || l[d % l.length];
+  const t = e.plotSpacePercent ?? (e.plotSpacePercent === 0 ? e.plotSpacePercent : 60), a = Array.isArray(e.graphData) ? e.graphData : [], s = a.some((c) => !!c.color), l = k(e?.palettecolors)?.split(",")?.map((c) => c?.trim()), i = a?.map((c, d) => {
+    const x = c?.color || l[d % l.length];
     return {
-      ...r,
+      ...c,
       color: x,
-      toolText: e.plotToolText || `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>${r.label || ""}</div><div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${x};display:inline-block'></span>${r.label || ""}</span><b style='color:#2B2B2B'>${m(e.numberPrefix)}${r.value || ""}</b></div>`
+      toolText: e.plotToolText || `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>${c.label || ""}</div><div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${x};display:inline-block'></span>${c.label || ""}</span><b style='color:#2B2B2B'>${m(e.numberPrefix)}${c.value || ""}</b></div>`
     };
-  }), s = {
-    ...N(e),
+  }), o = {
+    ...L(e),
     bgColor: e.bgColor || "#ffffff",
     labelStep: b(U(e), e.labelStep),
     xAxisName: e.xAxisName,
@@ -25,27 +25,27 @@ const P = (e = {}) => {
     skipOverlapLabels: "0",
     numberPrefix: m(e.numberPrefix),
     // When per-item colors are set, don't use palettecolors (it overrides item colors)
-    palettecolors: n ? void 0 : L(e.palettecolors),
+    palettecolors: s ? void 0 : k(e.palettecolors),
     maxLabelHeight: e.maxLabelHeight,
     numbersuffix: e.numbersuffix || ""
-  }, c = e.graphData, o = e?.hideScroll ? { chart: s, data: i?.length > 0 ? i : e?.graphData || [] } : {
-    chart: s,
-    categories: c?.categories,
-    dataset: c?.dataset
+  }, r = e.graphData, n = e?.hideScroll ? { chart: o, data: i?.length > 0 ? i : e?.graphData || [] } : {
+    chart: o,
+    categories: r?.categories,
+    dataset: r?.dataset
   };
-  return h({
+  return g({
     type: q(e),
-    width: g,
+    width: h,
     height: e.height || "300",
-    dataSource: o
+    dataSource: n
   });
-}, K = (e = {}) => h({
+}, K = (e = {}) => g({
   type: "area2d",
-  width: g,
+  width: h,
   height: "550",
   dataSource: {
     chart: {
-      ...N({ ...e, decimals: "2" }),
+      ...L({ ...e, decimals: "2" }),
       xAxisName: e.xAxisName,
       yAxisName: e.yAxisName,
       labelFontSize: 12,
@@ -54,13 +54,13 @@ const P = (e = {}) => {
     data: e.graphData || []
   }
 }), X = (e = {}) => {
-  const t = (e?.palettecolors || "#8ECFFF").split(",")[0].trim(), a = Array.isArray(e?.graphData) ? e.graphData : [], n = m(e?.numberPrefix), l = a?.map((i) => ({
+  const t = (e?.palettecolors || "#8ECFFF").split(",")[0].trim(), a = Array.isArray(e?.graphData) ? e.graphData : [], s = m(e?.numberPrefix), l = a?.map((i) => ({
     ...i,
-    toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>${i?.label || ""}</div><div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${t};display:inline-block'></span>${i?.label || ""}</span><b style='color:#2B2B2B'>${n}${i?.value || ""}</b></div>`
+    toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${i?.label || ""}</div><div style='display:flex;justify-content:space-between;align-items:center;padding:2px 0;min-width:200px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${t};display:inline-block'></span>${i?.label || ""}</span><b style='color:#2B2B2B'>${s}${i?.value || ""}</b></div>`
   }));
-  return h({
+  return g({
     type: "line",
-    width: e?.width || g,
+    width: e?.width || h,
     height: e?.height || "300",
     dataSource: {
       chart: {
@@ -76,14 +76,14 @@ const P = (e = {}) => {
 }, J = (e = {}) => {
   let t = F();
   e.numberPrefix === "" ? t = "" : e.numberPrefix !== null && e.numberPrefix !== void 0 && (t = e.numberPrefix);
-  const a = e.graphData, n = (a?.dataset || []).some((i) => !!i.color), l = (a?.dataset || []).map((i, s) => ({
+  const a = e.graphData, s = (a?.dataset || []).some((i) => !!i.color), l = (a?.dataset || []).map((i, o) => ({
     ...i,
-    plotToolText: s === 0 ? "<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>$label</div><div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>" : "<div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>"
+    plotToolText: o === 0 ? "<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>$label</div><div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>" : "<div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>"
   }));
-  return h({
+  return g({
     type: "mscolumn2d",
     key: e.key,
-    width: e.width || g,
+    width: e.width || h,
     height: e.height || "400",
     dataSource: {
       chart: {
@@ -96,21 +96,21 @@ const P = (e = {}) => {
         legendIconSides: e.legendIconSides,
         numberPrefix: t,
         labelStep: b(a?.category?.length, e.labelStep),
-        ...n ? { palettecolors: void 0 } : {}
+        ...s ? { palettecolors: void 0 } : {}
       },
       categories: [{ category: a?.category || [] }],
       dataset: l
     }
   });
 }, Q = (e = {}) => {
-  const t = e.graphLabel ? "" : m(e.numberPrefix), a = e.graphData, n = (a?.dataset || []).some((i) => !!i.color), l = (a?.dataset || []).map((i, s) => ({
-    ...i,
-    plotToolText: s === 0 ? "<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>$label</div><div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>" : "<div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>"
+  const t = e.graphLabel ? "" : m(e.numberPrefix), a = e.graphData, s = (a?.dataset || []).some((o) => !!o.color), l = "<div class='stacked-tooltip-total' style='display:flex;justify-content:space-between;align-items:center;padding:8px 0 0;margin-top:4px;border-top:1px solid #eee;min-width:180px'><span style='color:#2B2B2B;font-weight:600'>Total</span><b style='color:#2B2B2B'>$sum</b></div>", i = (a?.dataset || []).map((o, r) => ({
+    ...o,
+    plotToolText: r === 0 ? "<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>$label</div><div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>" + l : "<div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>" + l
   }));
-  return h({
+  return g({
     type: e.hideScroll ? "stackedcolumn2d" : "scrollstackedcolumn2d",
     key: e.key,
-    width: e.width || g,
+    width: e.width || h,
     height: e.height || "400",
     dataSource: {
       chart: {
@@ -123,7 +123,7 @@ const P = (e = {}) => {
         interactiveLegend: e.interactiveLegend || "1",
         drawCrossLine: e.drawCrossLine || "1",
         bgColor: e.bgColor || "#ffffff",
-        palettecolors: n ? void 0 : e.palettecolors || D,
+        palettecolors: s ? void 0 : e.palettecolors || $,
         numberPrefix: t,
         labelStep: b(a?.category?.length, e.labelStep),
         showSum: e.showSum ? "1" : void 0
@@ -131,22 +131,22 @@ const P = (e = {}) => {
       categories: [
         { category: a?.category || [] }
       ],
-      dataset: l
+      dataset: i
     }
   });
 }, Y = (e = {}) => {
-  const t = e.graphLabel ? "" : m(e.numberPrefix), a = e.graphData, n = (a?.dataset || []).map((l, i) => ({
+  const t = e.graphLabel ? "" : m(e.numberPrefix), a = e.graphData, s = (a?.dataset || []).map((l, i) => ({
     ...l,
     drawCustomLegendIcon: "1",
     legendIconSides: "4",
     legendIconBorderThickness: "0",
     legendIconBgAlpha: "100",
-    plotToolText: i === 0 ? "<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>$label</div><div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>" : "<div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>"
+    plotToolText: i === 0 ? "<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>$label</div><div style='display:flex;justify-content:space-between;align-items:center;padding:2px 0;min-width:200px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>" : "<div style='display:flex;justify-content:space-between;align-items:center;padding:2px 0;min-width:200px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>"
   }));
-  return h({
+  return g({
     type: "msline",
     key: e.key,
-    width: e.width || g,
+    width: e.width || h,
     height: e.height || "400",
     dataSource: {
       chart: {
@@ -162,14 +162,14 @@ const P = (e = {}) => {
         showValues: e.showValues === "1" ? "1" : "0"
       },
       categories: [{ category: a?.category || [] }],
-      dataset: n
+      dataset: s
     }
   });
 }, Z = (e = {}) => {
-  const t = e.graphLabel ? "" : m(e.numberPrefix), a = e.graphData, l = (e.palettecolors || z).split(",").map((o) => o.trim()), i = a?.category || [], s = a?.dataset || [], c = s.map((o, r) => {
-    const x = o.color || l[r % l.length], u = o.data || [];
+  const t = e.graphLabel ? "" : m(e.numberPrefix), a = e.graphData, l = (e.palettecolors || z).split(",").map((n) => n.trim()), i = a?.category || [], o = a?.dataset || [], r = o.map((n, c) => {
+    const x = n.color || l[c % l.length], y = n.data || [];
     return {
-      ...o,
+      ...n,
       color: x,
       plotBorderColor: x,
       plotBorderThickness: "2",
@@ -177,30 +177,30 @@ const P = (e = {}) => {
       anchorBgColor: x,
       anchorBorderColor: x,
       showPlotBorder: "1",
-      data: u.map((C, y) => {
-        const B = i[y]?.label || "";
-        if (r > 0)
+      data: y.map((C, u) => {
+        const w = i[u]?.label || "";
+        if (c > 0)
           return {
             ...C,
             alpha: "60",
             toolText: " "
           };
-        const f = s.map((w, p) => {
-          const v = w.color || l[p % l.length], S = (w.data || [])[y]?.value ?? "", A = w.seriesname || "";
-          return `<div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${v};display:inline-block'></span>${A}</span><b style='color:#2B2B2B'>${t}${S}</b></div>`;
+        const f = o.map((p, B) => {
+          const v = p.color || l[B % l.length], S = (p.data || [])[u]?.value ?? "", A = p.seriesname || "";
+          return `<div style='display:flex;justify-content:space-between;align-items:center;padding:2px 0;min-width:200px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${v};display:inline-block'></span>${A}</span><b style='color:#2B2B2B'>${t}${S}</b></div>`;
         }).join("");
         return {
           ...C,
           alpha: "60",
-          toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>${B}</div>${f}`
+          toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${w}</div>${f}`
         };
       })
     };
   });
-  return h({
+  return g({
     type: "stackedarea2d",
     key: e.key,
-    width: e.width || g,
+    width: e.width || h,
     height: e.height || "400",
     dataSource: {
       chart: {
@@ -217,43 +217,43 @@ const P = (e = {}) => {
         labelStep: b(a?.category?.length, e.labelStep)
       },
       categories: [{ category: a?.category || [] }],
-      dataset: c
+      dataset: r
     }
   });
 }, ee = (e = {}) => {
-  const t = m(e.numberPrefix), n = (e?.palettecolors || "#8ECFFF").split(",").map((d) => d.trim()), l = n[0];
+  const t = m(e.numberPrefix), s = (e?.palettecolors || "#8ECFFF").split(",").map((d) => d.trim()), l = s[0];
   if (!Array.isArray(e?.graphData) && e?.graphData?.dataset) {
-    const d = e.graphData, x = d?.category || [], u = d?.dataset || [], C = u.map((y, B) => {
-      const f = y.color || n[B % n.length], w = y.data || [];
+    const d = e.graphData, x = d?.category || [], y = d?.dataset || [], C = y.map((u, w) => {
+      const f = u.color || s[w % s.length], p = u.data || [];
       return {
-        ...y,
+        ...u,
         color: f,
         anchorRadius: "3",
         anchorBgColor: "#FFFFFF",
         anchorBorderColor: f,
         anchorBorderThickness: "1",
-        data: w.map((p, v) => {
-          const $ = x[v]?.label || "";
-          if (B > 0)
-            return { ...p, toolText: " " };
-          const S = u.map((A, M) => {
-            const j = A.color || n[M % n.length], E = (A.data || [])[v]?.value ?? "", I = A.seriesname || "";
-            return `<div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${j};display:inline-block'></span>${I}</span><b style='color:#2B2B2B'>${t}${E}</b></div>`;
+        data: p.map((B, v) => {
+          const D = x[v]?.label || "";
+          if (w > 0)
+            return { ...B, toolText: " " };
+          const S = y.map((A, M) => {
+            const j = A.color || s[M % s.length], E = (A.data || [])[v]?.value ?? "", I = A.seriesname || "";
+            return `<div style='display:flex;justify-content:space-between;align-items:center;padding:2px 0;min-width:200px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${j};display:inline-block'></span>${I}</span><b style='color:#2B2B2B'>${t}${E}</b></div>`;
           }).join("");
           return {
-            ...p,
-            toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>${$}</div>${S}`
+            ...B,
+            toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${D}</div>${S}`
           };
         })
       };
     });
-    return h({
+    return g({
       type: "scrollarea2d",
-      width: e?.width || g,
+      width: e?.width || h,
       height: e?.height || "400",
       dataSource: {
         chart: {
-          ...k(e),
+          ...N(e),
           xAxisName: e?.xAxisName,
           yAxisName: e?.yAxisName,
           numberPrefix: t,
@@ -264,41 +264,41 @@ const P = (e = {}) => {
       }
     });
   }
-  const s = Array.isArray(e?.graphData) ? e.graphData : [], c = s.map((d) => ({ label: d?.label || "" })), o = e.legendLabel || "Spend", r = s.map((d) => ({
+  const o = Array.isArray(e?.graphData) ? e.graphData : [], r = o.map((d) => ({ label: d?.label || "" })), n = e.legendLabel || "Spend", c = o.map((d) => ({
     value: d?.value,
-    toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>${d?.label || ""}</div><div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${l};display:inline-block'></span>${o}</span><b style='color:#2B2B2B'>${t}${d?.value || ""}</b></div>`
+    toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${d?.label || ""}</div><div style='display:flex;justify-content:space-between;align-items:center;padding:2px 0;min-width:200px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${l};display:inline-block'></span>${n}</span><b style='color:#2B2B2B'>${t}${d?.value || ""}</b></div>`
   }));
-  return h({
+  return g({
     type: "scrollarea2d",
-    width: e?.width || g,
+    width: e?.width || h,
     height: e?.height || "400",
     dataSource: {
       chart: {
-        ...k(e),
+        ...N(e),
         xAxisName: e?.xAxisName,
         yAxisName: e?.yAxisName,
         numberPrefix: t,
         ...e?.chartConfig || {}
       },
-      categories: [{ category: c }],
+      categories: [{ category: r }],
       dataset: [
         {
-          seriesname: o,
+          seriesname: n,
           color: l,
           anchorRadius: "3",
           anchorBgColor: "#FFFFFF",
           anchorBorderColor: l,
           anchorBorderThickness: "1",
-          data: r
+          data: c
         }
       ]
     }
   });
 }, te = (e = {}) => {
   const t = e.graphData;
-  return h({
+  return g({
     type: "stackedbar2d",
-    width: g,
+    width: h,
     height: e.height || "400",
     dataSource: {
       chart: {
@@ -312,9 +312,9 @@ const P = (e = {}) => {
   });
 }, ae = (e = {}) => {
   const t = e.graphData;
-  return h({
+  return g({
     type: "sankey",
-    width: g,
+    width: h,
     height: e.height || "600",
     dataSource: {
       chart: {
@@ -339,36 +339,36 @@ const P = (e = {}) => {
     }
   });
 }, le = (e = {}) => {
-  const a = e.graphData?.data || [], n = a.reduce((o, r) => o + (Number(r.value) || 0), 0), l = { ...e };
-  if (!l.defaultCenterLabel)
-    l.defaultCenterLabel = `Total{br}${n}`;
-  else if (l.defaultCenterLabel.includes("{br}")) {
-    const [o] = l.defaultCenterLabel.split("{br}");
-    l.defaultCenterLabel = `${o}{br}${n}`;
+  const a = e.graphData?.data || [], s = a.reduce((n, c) => n + (Number(c.value) || 0), 0), l = e.numberPrefix ?? "$", i = { ...e };
+  if (!i.defaultCenterLabel)
+    i.defaultCenterLabel = `Total{br}${l}${s}`;
+  else if (i.defaultCenterLabel.includes("{br}")) {
+    const [n] = i.defaultCenterLabel.split("{br}");
+    i.defaultCenterLabel = `${n}{br}${l}${s}`;
   }
-  const i = l.numberPrefix ?? "$", s = (e.palettecolors || D).split(",").map((o) => o.trim()), c = a.map((o, r) => {
-    const d = Number(o.value) || 0, x = n > 0 ? (d / n * 100).toFixed(2) : "0", u = o.color || s[r % s.length];
+  const o = (e.palettecolors || $).split(",").map((n) => n.trim()), r = a.map((n, c) => {
+    const d = Number(n.value) || 0, x = s > 0 ? (d / s * 100).toFixed(2) : "0", y = n.color || o[c % o.length];
     return {
-      ...o,
-      displayValue: `${i}${o.value} (${x}%){br}${o.label}`,
-      toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>${o.label}</div><div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${u};display:inline-block'></span>${o.label}</span><b style='color:#2B2B2B'>${i}${d}</b></div>`
+      ...n,
+      displayValue: `${l}${n.value} (${x}%){br}${n.label}`,
+      toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${n.label}</div><div style='display:flex;justify-content:space-between;align-items:center;padding:2px 0;min-width:200px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${y};display:inline-block'></span>${n.label}</span><b style='color:#2B2B2B'>${l}${d}</b></div>`
     };
   });
-  return h({
+  return g({
     type: "doughnut2d",
     width: e.width || "136",
     height: e.height || "136",
     dataSource: {
-      chart: G(l),
-      data: c
+      chart: G(i),
+      data: r
     }
   });
 }, ie = (e = {}) => {
   const t = e.graphData;
-  return h({
+  return g({
     type: "multiaxisline",
     key: e.key,
-    width: e.width || g,
+    width: e.width || h,
     height: e.height || "400",
     dataSource: {
       chart: t?.chart || {},
@@ -378,7 +378,7 @@ const P = (e = {}) => {
   });
 }, oe = (e = {}) => {
   const t = e.graphData;
-  return h({
+  return g({
     type: "multilevelpie",
     width: e.width || "550",
     height: e.height || "350",
@@ -390,23 +390,23 @@ const P = (e = {}) => {
 }, ne = (e = {}) => {
   let t = [], a = [];
   if (Array.isArray(e.graphData)) {
-    const s = e.graphData;
-    t = s.map((c) => ({ label: c.label || "" })), a = [
+    const o = e.graphData;
+    t = o.map((r) => ({ label: r.label || "" })), a = [
       {
         seriesname: "Series 1",
-        data: s.map((c) => ({ value: c.value }))
+        data: o.map((r) => ({ value: r.value }))
       }
     ];
   } else {
-    const s = e.graphData;
-    t = s?.category || [], a = (s?.dataset || []).map((c) => ({
-      ...c,
-      seriesname: c.seriesname || "Series",
-      data: c.data || []
+    const o = e.graphData;
+    t = o?.category || [], a = (o?.dataset || []).map((r) => ({
+      ...r,
+      seriesname: r.seriesname || "Series",
+      data: r.data || []
     }));
   }
-  const n = m(e.numberPrefix), l = a.some((s) => !!s.color), i = {
-    ...N(e),
+  const s = m(e.numberPrefix), l = a.some((o) => !!o.color), i = {
+    ...L(e),
     bgColor: e.bgColor || "#ffffff",
     xAxisName: e.xAxisName,
     yAxisName: e.yAxisName,
@@ -419,9 +419,9 @@ const P = (e = {}) => {
     showLabels: e.showLabels || "1",
     showLegend: "0",
     skipOverlapLabels: "0",
-    numberPrefix: n,
+    numberPrefix: s,
     numVDivLines: e.numVDivLines || "5",
-    palettecolors: l ? void 0 : L(e.palettecolors),
+    palettecolors: l ? void 0 : k(e.palettecolors),
     maxLabelHeight: e.maxLabelHeight,
     numbersuffix: e.numbersuffix || "",
     labelStep: b(t.length, e.labelStep),
@@ -432,9 +432,9 @@ const P = (e = {}) => {
     flatScrollBars: "1",
     scrollPadding: "5"
   };
-  return h({
+  return g({
     type: "scrollcolumn2d",
-    width: e.width || g,
+    width: e.width || h,
     height: e.height || "400",
     dataSource: {
       chart: i,
@@ -443,14 +443,14 @@ const P = (e = {}) => {
     }
   });
 }, se = (e = {}) => {
-  const t = e.graphLabel ? "" : m(e.numberPrefix), a = e.graphData, n = (a?.dataset || []).some((i) => !!i.color), l = (a?.dataset || []).map((i, s) => ({
-    ...i,
-    plotToolText: s === 0 ? "<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>$label</div><div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>" : "<div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>"
+  const t = e.graphLabel ? "" : m(e.numberPrefix), a = e.graphData, s = (a?.dataset || []).some((o) => !!o.color), l = "<div class='stacked-tooltip-total' style='display:flex;justify-content:space-between;align-items:center;padding:8px 0 0;margin-top:4px;border-top:1px solid #eee;min-width:180px'><span style='color:#2B2B2B;font-weight:600'>Total</span><b style='color:#2B2B2B'>$sum</b></div>", i = (a?.dataset || []).map((o, r) => ({
+    ...o,
+    plotToolText: r === 0 ? "<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>$label</div><div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>" + l : "<div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:$color;display:inline-block'></span>$seriesName</span><b style='color:#2B2B2B'>$dataValue</b></div>" + l
   }));
-  return h({
+  return g({
     type: "scrollstackedcolumn2d",
     key: e.key,
-    width: e.width || g,
+    width: e.width || h,
     height: e.height || "400",
     dataSource: {
       chart: {
@@ -463,7 +463,7 @@ const P = (e = {}) => {
         interactiveLegend: e.interactiveLegend || "1",
         drawCrossLine: e.drawCrossLine || "1",
         bgColor: e.bgColor || "#ffffff",
-        palettecolors: n ? void 0 : e.palettecolors || D,
+        palettecolors: s ? void 0 : e.palettecolors || $,
         numberPrefix: t,
         numVDivLines: e.numVDivLines || "5",
         labelStep: b(a?.category?.length, e.labelStep),
@@ -476,34 +476,34 @@ const P = (e = {}) => {
         scrollPadding: "5"
       },
       categories: [{ category: a?.category || [] }],
-      dataset: l
+      dataset: i
     }
   });
 }, re = (e = {}) => {
-  const t = e.graphLabel ? "" : m(e.numberPrefix), a = e.graphData, n = (a?.dataset || []).some((o) => !!o.color), l = (e.palettecolors || D).split(",").map((o) => o.trim()), i = a?.category || [], s = a?.dataset || [], c = s.map((o, r) => {
-    const d = o.color || l[r % l.length], x = o.data || [];
+  const t = e.graphLabel ? "" : m(e.numberPrefix), a = e.graphData, s = (a?.dataset || []).some((n) => !!n.color), l = (e.palettecolors || $).split(",").map((n) => n.trim()), i = a?.category || [], o = a?.dataset || [], r = o.map((n, c) => {
+    const d = n.color || l[c % l.length], x = n.data || [];
     return {
-      ...o,
+      ...n,
       color: d,
-      data: x.map((u, C) => {
-        const y = i[C]?.label || "";
-        if (r > 0)
-          return { ...u, toolText: " " };
-        const B = s.map((f, w) => {
-          const p = f.color || l[w % l.length], $ = (f.data || [])[C]?.value ?? "", S = f.seriesname || "";
-          return `<div style='display:flex;justify-content:space-between;align-items:center;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${p};display:inline-block'></span>${S}</span><b style='color:#2B2B2B'>${t}${$}</b></div>`;
+      data: x.map((y, C) => {
+        const u = i[C]?.label || "";
+        if (c > 0)
+          return { ...y, toolText: " " };
+        const w = o.map((f, p) => {
+          const B = f.color || l[p % l.length], D = (f.data || [])[C]?.value ?? "", S = f.seriesname || "";
+          return `<div style='display:flex;justify-content:space-between;align-items:center;padding:2px 0;min-width:200px'><span style='display:flex;align-items:center;gap:6px;color:#666'><span style='width:10px;height:10px;border-radius:2px;background-color:${B};display:inline-block'></span>${S}</span><b style='color:#2B2B2B'>${t}${D}</b></div>`;
         }).join("");
         return {
-          ...u,
-          toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>${y}</div>${B}`
+          ...y,
+          toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${u}</div>${w}`
         };
       })
     };
   });
-  return h({
+  return g({
     type: "mscombidy2d",
     key: e.key,
-    width: e.width || g,
+    width: e.width || h,
     height: e.height || "400",
     dataSource: {
       chart: {
@@ -513,17 +513,17 @@ const P = (e = {}) => {
         yAxisName: e.yAxisName,
         numberPrefix: t,
         labelStep: b(i.length, e.labelStep),
-        palettecolors: n ? void 0 : e.palettecolors || D
+        palettecolors: s ? void 0 : e.palettecolors || $
       },
       categories: [{ category: i }],
-      dataset: c
+      dataset: r
     }
   });
 }, ce = (e = {}) => {
-  const t = e.graphLabel ? "" : m(e.numberPrefix), a = e.graphData, n = a?.category || [], l = a?.dataset || [];
-  return h({
+  const t = e.graphLabel ? "" : m(e.numberPrefix), a = e.graphData, s = a?.category || [], l = a?.dataset || [];
+  return g({
     type: "scrollline2d",
-    width: e?.width || g,
+    width: e?.width || h,
     height: e?.height || "400",
     dataSource: {
       chart: {
@@ -541,10 +541,10 @@ const P = (e = {}) => {
         flatScrollBars: "1",
         scrollPadding: "5",
         numDivLines: "5",
-        labelStep: b(n.length, e?.labelStep),
+        labelStep: b(s.length, e?.labelStep),
         ...e?.chartConfig || {}
       },
-      categories: [{ category: n }],
+      categories: [{ category: s }],
       dataset: l
     }
   });