@ck-ui/component-library 1.0.2 → 1.0.4

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

@@ -1,18 +1,18 @@
-import { EXTENDED_PALETTE as $, DEFAULT_WIDTH as g, STACKED_AREA_PALETTE as H } from "../_constant/constants.js";
-import { getBaseConfig as h, getStackedColumnChartShell as F, getStackedAreaChartShell as R, getStackedBarChartShell as O, getLineChartShell as j, getCommonChartShell as P, getScrollAreaChartShell as V, getMultipleLineChartShell as W, getMsCombiDy2dChartShell as Y, getGroupChartShell as _, getDoughnutChartShell as G } from "./helpers.js";
-import { getCurrencyPrefix as u, getLabelStep as f, getCartesianPalette as L, getCurrencySymbol as E, getGraphDataLength as U, getBarType as K } from "../_utils/chartHelpers.js";
-const M = (e = {}) => {
-  const t = e.plotSpacePercent ?? (e.plotSpacePercent === 0 ? e.plotSpacePercent : 60), a = Array.isArray(e.graphData) ? e.graphData : [], s = a.some((o) => !!o.color), l = L(e?.palettecolors)?.split(",")?.map((o) => o?.trim()), n = a?.map((o, c) => {
-    const x = o?.color || l[c % l.length];
+import { EXTENDED_PALETTE as B, DEFAULT_WIDTH as x, STACKED_AREA_PALETTE as H } from "../_constant/constants.js";
+import { getBaseConfig as h, getStackedColumnChartShell as M, getStackedAreaChartShell as R, getStackedBarChartShell as O, getLineChartShell as j, getCommonChartShell as k, getScrollAreaChartShell as V, getMultipleLineChartShell as W, getMsCombiDy2dChartShell as Y, getGroupChartShell as _, getDoughnutChartShell as G } from "./helpers.js";
+import { getCurrencyPrefix as y, getLabelStep as w, getCartesianPalette as L, getCurrencySymbol as E, getGraphDataLength as U, getBarType as K } from "../_utils/chartHelpers.js";
+const F = (e = {}) => {
+  const t = e.plotSpacePercent ?? (e.plotSpacePercent === 0 ? e.plotSpacePercent : 60), a = Array.isArray(e.graphData) ? e.graphData : [], s = a.some((i) => !!i.color), l = L(e?.palettecolors)?.split(",")?.map((i) => i?.trim()), n = a?.map((i, r) => {
+    const g = i?.color || l[r % l.length];
     return {
-      ...o,
-      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'>${o.label || ""}</div><div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>${o.label || ""}</label><b style='text-align:right;'>${u(e.numberPrefix)}${o.value || ""}</b></div>`
+      ...i,
+      color: g,
+      toolText: e.plotToolText || `<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;gap:10px;padding:4px 0;min-width:180px'><span style='display:flex;align-items:center;gap:6px'><span style='width:10px;height:10px;border-radius:2px;background-color:${g};display:inline-block;flex-shrink:0'></span><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>${i.label || ""}</label></span><b style='text-align:right;'>${y(e.numberPrefix)}${i.value || ""}</b></div>`
     };
-  }), i = {
-    ...P(e),
+  }), o = {
+    ...k(e),
     bgColor: e.bgColor || "#ffffff",
-    labelStep: f(U(e), e.labelStep),
+    labelStep: w(U(e), e.labelStep),
     xAxisName: e.xAxisName,
     yAxisName: e.yAxisName,
     chartBottomMargin: e.chartBottomMargin,
@@ -23,29 +23,29 @@ const M = (e = {}) => {
     showValues: e.showValues || "0",
     showLabels: e.showLabels || "1",
     skipOverlapLabels: "0",
-    numberPrefix: u(e.numberPrefix),
+    numberPrefix: y(e.numberPrefix),
     // When per-item colors are set, don't use palettecolors (it overrides item colors)
     palettecolors: s ? void 0 : L(e.palettecolors),
     maxLabelHeight: e.maxLabelHeight,
     numbersuffix: e.numbersuffix || ""
-  }, r = e.graphData, d = e?.hideScroll ? { chart: i, data: n?.length > 0 ? n : e?.graphData || [] } : {
-    chart: i,
-    categories: r?.categories,
-    dataset: r?.dataset
+  }, d = e.graphData, c = e?.hideScroll ? { chart: o, data: n?.length > 0 ? n : e?.graphData || [] } : {
+    chart: o,
+    categories: d?.categories,
+    dataset: d?.dataset
   };
   return h({
     type: K(e),
-    width: g,
+    width: x,
     height: e.height || "300",
-    dataSource: d
+    dataSource: c
   });
 }, X = (e = {}) => h({
   type: "area2d",
-  width: g,
+  width: x,
   height: "550",
   dataSource: {
     chart: {
-      ...P({ ...e, decimals: "2" }),
+      ...k({ ...e, decimals: "2" }),
       xAxisName: e.xAxisName,
       yAxisName: e.yAxisName,
       labelFontSize: 12,
@@ -54,36 +54,43 @@ const M = (e = {}) => {
     data: e.graphData || []
   }
 }), q = (e = {}) => {
-  const t = Array.isArray(e?.graphData) ? e.graphData : [], a = u(e?.numberPrefix), s = t?.map((l) => ({
-    ...l,
-    toolText: e?.plotToolText || `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${l?.label || ""}</div><div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 0;min-width:200px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>${l?.label || ""}</label><b style='text-align:right;'>${a}${l?.value || ""}</b></div>`
+  const t = Array.isArray(e?.graphData) ? e.graphData : [], a = y(e?.numberPrefix), s = (e?.palettecolors || "#8ECFFF").split(",")[0].trim(), l = t?.map((n) => ({
+    ...n,
+    toolText: e?.plotToolText || `<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;gap:10px;padding:2px 0;min-width:200px'><span style='display:flex;align-items:center;gap:6px'><span style='width:10px;height:10px;border-radius:2px;background-color:${s};display:inline-block;flex-shrink:0'></span><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>${n?.label || ""}</label></span><b style='text-align:right;'>${a}${n?.value || ""}</b></div>`
   }));
   return h({
     type: "line",
-    width: e?.width || g,
+    width: e?.width || x,
     height: e?.height || "300",
     dataSource: {
       chart: {
         ...j(e),
         xAxisName: e?.xAxisName,
         yAxisName: e?.yAxisName,
-        labelStep: f(t.length, void 0),
+        labelStep: w(t.length, void 0),
         ...e?.chartConfig || {}
       },
-      data: s.length > 0 ? s : e?.graphData || []
+      data: l.length > 0 ? l : e?.graphData || []
     }
   });
 }, J = (e = {}) => {
   let t = E();
   e.numberPrefix === "" ? t = "" : e.numberPrefix !== null && e.numberPrefix !== void 0 && (t = e.numberPrefix);
-  const a = e.graphData, s = (a?.dataset || []).some((n) => !!n.color), l = (a?.dataset || []).map((n, i) => ({
-    ...n,
-    plotToolText: e.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;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>$seriesName</label><b style='text-align:right;'>$dataValue</b></div>" : "<div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>$seriesName</label><b style='text-align:right;'>$dataValue</b></div>")
-  }));
+  const a = e.graphData, s = (a?.dataset || []).some((n) => !!n.color), l = (a?.dataset || []).map((n, o) => {
+    const c = n.data?.map((i) => {
+      const r = i.value;
+      return r == null || Number(r) === 0 || typeof r == "string" && r.trim() === "" ? { ...i, value: 0 } : i;
+    });
+    return {
+      ...n,
+      ...c ? { data: c } : {},
+      plotToolText: e.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;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>$seriesName</label><b style='text-align:right;'>$dataValue</b></div>" : "<div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>$seriesName</label><b style='text-align:right;'>$dataValue</b></div>")
+    };
+  });
   return h({
     type: "mscolumn2d",
     key: e.key,
-    width: e.width || g,
+    width: e.width || x,
     height: e.height || "400",
     dataSource: {
       chart: {
@@ -95,7 +102,7 @@ const M = (e = {}) => {
         showLegend: "0",
         legendIconSides: e.legendIconSides,
         numberPrefix: t,
-        labelStep: f(a?.category?.length, e.labelStep),
+        labelStep: w(a?.category?.length, e.labelStep),
         ...s ? { palettecolors: void 0 } : {}
       },
       categories: [{ category: a?.category || [] }],
@@ -103,18 +110,18 @@ const M = (e = {}) => {
     }
   });
 }, Q = (e = {}) => {
-  const t = e.graphLabel ? "" : u(e.numberPrefix), a = e.graphData, s = (a?.dataset || []).some((i) => !!i.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>", n = (a?.dataset || []).map((i, r) => ({
-    ...i,
-    plotToolText: e.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;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>$seriesName</label><b style='text-align:right;'>$dataValue</b></div>" + l : "<div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>$seriesName</label><b style='text-align:right;'>$dataValue</b></div>" + l)
+  const t = e.graphLabel ? "" : y(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>", n = (a?.dataset || []).map((o, d) => ({
+    ...o,
+    plotToolText: e.plotToolText || (d === 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;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>$seriesName</label><b style='text-align:right;'>$dataValue</b></div>" + l : "<div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>$seriesName</label><b style='text-align:right;'>$dataValue</b></div>" + l)
   }));
   return h({
     type: e.hideScroll ? "stackedcolumn2d" : "scrollstackedcolumn2d",
     key: e.key,
-    width: e.width || g,
+    width: e.width || x,
     height: e.height || "400",
     dataSource: {
       chart: {
-        ...F(e),
+        ...M(e),
         yAxisMaxValue: e.yAxisMaxValue,
         xAxisName: e.xAxisName,
         yAxisName: e.yAxisName,
@@ -123,9 +130,9 @@ const M = (e = {}) => {
         interactiveLegend: e.interactiveLegend || "1",
         drawCrossLine: e.drawCrossLine || "1",
         bgColor: e.bgColor || "#ffffff",
-        palettecolors: s ? void 0 : e.palettecolors || $,
+        palettecolors: s ? void 0 : e.palettecolors || B,
         numberPrefix: t,
-        labelStep: f(a?.category?.length, e.labelStep),
+        labelStep: w(a?.category?.length, e.labelStep),
         showSum: e.showSum ? "1" : void 0
       },
       categories: [
@@ -135,7 +142,7 @@ const M = (e = {}) => {
     }
   });
 }, Z = (e = {}) => {
-  const t = e.graphLabel ? "" : u(e.numberPrefix), a = e.graphData, s = (a?.dataset || []).map((l, n) => ({
+  const t = e.graphLabel ? "" : y(e.numberPrefix), a = e.graphData, s = (a?.dataset || []).map((l, n) => ({
     ...l,
     drawCustomLegendIcon: "1",
     legendIconSides: "4",
@@ -146,7 +153,7 @@ const M = (e = {}) => {
   return h({
     type: "msline",
     key: e.key,
-    width: e.width || g,
+    width: e.width || x,
     height: e.height || "400",
     dataSource: {
       chart: {
@@ -158,7 +165,7 @@ const M = (e = {}) => {
         legendPosition: e.legendRight ? void 0 : e.legendPosition,
         numberPrefix: t,
         chartLeftMargin: e.chartLeftMargin || "20",
-        labelStep: f(a?.category?.length, e.labelStep),
+        labelStep: w(a?.category?.length, e.labelStep),
         showValues: e.showValues === "1" ? "1" : "0"
       },
       categories: [{ category: a?.category || [] }],
@@ -166,36 +173,36 @@ const M = (e = {}) => {
     }
   });
 }, ee = (e = {}) => {
-  const t = e.graphLabel ? "" : u(e.numberPrefix), a = e.graphData, l = (e.palettecolors || H).split(",").map((d) => d.trim()), n = a?.category || [], i = a?.dataset || [], r = i.map((d, o) => {
-    const x = d.color || l[o % l.length], y = d.data || [];
+  const t = e.graphLabel ? "" : y(e.numberPrefix), a = e.graphData, l = (e.palettecolors || H).split(",").map((c) => c.trim()), n = a?.category || [], o = a?.dataset || [], d = o.map((c, i) => {
+    const g = c.color || l[i % l.length], u = c.data || [];
     return {
-      ...d,
-      color: x,
-      plotBorderColor: x,
+      ...c,
+      color: g,
+      plotBorderColor: g,
       plotBorderThickness: "2",
       plotBorderAlpha: "100",
-      anchorBgColor: x,
-      anchorBorderColor: x,
+      anchorBgColor: g,
+      anchorBorderColor: g,
       showPlotBorder: "1",
       ...e.plotToolText ? { plotToolText: e.plotToolText } : {},
-      data: y.map((b, m) => {
-        const T = n[m]?.label || "";
+      data: u.map((b, m) => {
+        const C = n[m]?.label || "";
         if (e.plotToolText)
           return { ...b, alpha: "60" };
-        if (o > 0)
+        if (i > 0)
           return {
             ...b,
             alpha: "60",
             toolText: " "
           };
-        const w = i.map((C, v) => {
-          const S = C.color || l[v % l.length], A = (C.data || [])[m]?.value ?? "", B = C.seriesname || "", N = v === o ? "#2B2B2B" : "#666";
-          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:${N}'><span style='width:10px;height:10px;border-radius:2px;background-color:${S};display:inline-block'></span>${B}</span><b style='color:${N}'>${t}${A}</b></div>`;
+        const f = o.map((T, v) => {
+          const S = T.color || l[v % l.length], A = (T.data || [])[m]?.value ?? "", p = T.seriesname || "", N = v === i ? "#2B2B2B" : "#666";
+          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:${N}'><span style='width:10px;height:10px;border-radius:2px;background-color:${S};display:inline-block'></span>${p}</span><b style='color:${N}'>${t}${A}</b></div>`;
         }).join("");
         return {
           ...b,
           alpha: "60",
-          toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${T}</div>${w}`
+          toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${C}</div>${f}`
         };
       })
     };
@@ -203,7 +210,7 @@ const M = (e = {}) => {
   return h({
     type: "stackedarea2d",
     key: e.key,
-    width: e.width || g,
+    width: e.width || x,
     height: e.height || "400",
     dataSource: {
       chart: {
@@ -217,45 +224,45 @@ const M = (e = {}) => {
         drawCrossLine: "1",
         crossLineColor: "#f2f5fa",
         numberPrefix: t,
-        labelStep: f(a?.category?.length, e.labelStep)
+        labelStep: w(a?.category?.length, e.labelStep)
       },
       categories: [{ category: a?.category || [] }],
-      dataset: r
+      dataset: d
     }
   });
 }, te = (e = {}) => {
-  const t = u(e.numberPrefix), s = (e?.palettecolors || "#8ECFFF").split(",").map((c) => c.trim()), l = s[0];
+  const t = y(e.numberPrefix), s = (e?.palettecolors || "#8ECFFF").split(",").map((r) => r.trim()), l = s[0];
   if (!Array.isArray(e?.graphData) && e?.graphData?.dataset) {
-    const c = e.graphData, x = c?.category || [], y = c?.dataset || [], b = y.map((m, T) => {
-      const w = m.color || s[T % s.length], C = m.data || [];
+    const r = e.graphData, g = r?.category || [], u = r?.dataset || [], b = u.map((m, C) => {
+      const f = m.color || s[C % s.length], T = m.data || [];
       return {
         ...m,
-        color: w,
+        color: f,
         anchorRadius: "3",
         anchorBgColor: "#FFFFFF",
-        anchorBorderColor: w,
+        anchorBorderColor: f,
         anchorBorderThickness: "1",
         ...e.plotToolText ? { plotToolText: e.plotToolText } : {},
-        data: C.map((v, S) => {
-          const D = x[S]?.label || "";
+        data: T.map((v, S) => {
+          const $ = g[S]?.label || "";
           if (e.plotToolText)
             return { ...v };
-          if (T > 0)
+          if (C > 0)
             return { ...v, toolText: " " };
-          const A = y.map((B, p) => {
-            const I = (B.data || [])[S]?.value ?? "", z = B.seriesname || "", k = p === T ? "#2B2B2B" : "#666";
-            return `<div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 0;min-width:200px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:${k}'>${z}</label><b style='text-align:right;color:${k}'>${t}${I}</b></div>`;
+          const A = u.map((p, D) => {
+            const I = (p.data || [])[S]?.value ?? "", z = p.seriesname || "", P = D === C ? "#2B2B2B" : "#666";
+            return `<div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 0;min-width:200px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:${P}'>${z}</label><b style='text-align:right;color:${P}'>${t}${I}</b></div>`;
           }).join("");
           return {
             ...v,
-            toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${D}</div>${A}`
+            toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${$}</div>${A}`
           };
         })
       };
     });
     return h({
       type: "scrollarea2d",
-      width: e?.width || g,
+      width: e?.width || x,
       height: e?.height || "400",
       dataSource: {
         chart: {
@@ -265,18 +272,18 @@ const M = (e = {}) => {
           numberPrefix: t,
           ...e?.chartConfig || {}
         },
-        categories: [{ category: x }],
+        categories: [{ category: g }],
         dataset: b
       }
     });
   }
-  const i = Array.isArray(e?.graphData) ? e.graphData : [], r = i.map((c) => ({ label: c?.label || "" })), d = e.legendLabel || "Spend", o = i.map((c) => ({
-    value: c?.value,
-    toolText: e?.plotToolText || `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${c?.label || ""}</div><div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 0;min-width:200px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>${d}</label><b style='text-align:right;'>${t}${c?.value || ""}</b></div>`
+  const o = Array.isArray(e?.graphData) ? e.graphData : [], d = o.map((r) => ({ label: r?.label || "" })), c = e.legendLabel || "Spend", i = o.map((r) => ({
+    value: r?.value,
+    toolText: e?.plotToolText || `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:4px;border-bottom:1px solid #eee;margin-bottom:4px'>${r?.label || ""}</div><div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 0;min-width:200px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>${c}</label><b style='text-align:right;'>${t}${r?.value || ""}</b></div>`
   }));
   return h({
     type: "scrollarea2d",
-    width: e?.width || g,
+    width: e?.width || x,
     height: e?.height || "400",
     dataSource: {
       chart: {
@@ -286,16 +293,16 @@ const M = (e = {}) => {
         numberPrefix: t,
         ...e?.chartConfig || {}
       },
-      categories: [{ category: r }],
+      categories: [{ category: d }],
       dataset: [
         {
-          seriesname: d,
+          seriesname: c,
           color: l,
           anchorRadius: "3",
           anchorBgColor: "#FFFFFF",
           anchorBorderColor: l,
           anchorBorderThickness: "1",
-          data: o
+          data: i
         }
       ]
     }
@@ -304,7 +311,7 @@ const M = (e = {}) => {
   const t = e.graphData;
   return h({
     type: "stackedbar2d",
-    width: g,
+    width: x,
     height: e.height || "400",
     dataSource: {
       chart: {
@@ -321,7 +328,7 @@ const M = (e = {}) => {
   const t = e.graphData;
   return h({
     type: "sankey",
-    width: g,
+    width: x,
     height: e.height || "600",
     dataSource: {
       chart: {
@@ -347,20 +354,20 @@ const M = (e = {}) => {
     }
   });
 }, ie = (e = {}) => {
-  const a = e.graphData?.data || [], s = a.reduce((o, c) => o + (Number(c.value) || 0), 0), l = Math.round(s * 100) / 100, n = e.numberPrefix ?? "$", i = { ...e };
-  if (!i.defaultCenterLabel)
-    i.defaultCenterLabel = `Total{br}${n}${l}`;
-  else if (i.defaultCenterLabel.includes("{br}")) {
-    const [o] = i.defaultCenterLabel.split("{br}");
-    i.defaultCenterLabel = `${o}{br}${n}${l}`;
+  const a = e.graphData?.data || [], s = a.reduce((i, r) => i + (Number(r.value) || 0), 0), l = Math.round(s * 100) / 100, n = e.numberPrefix ?? "$", o = { ...e };
+  if (!o.defaultCenterLabel)
+    o.defaultCenterLabel = `Total{br}${n}${l}`;
+  else if (o.defaultCenterLabel.includes("{br}")) {
+    const [i] = o.defaultCenterLabel.split("{br}");
+    o.defaultCenterLabel = `${i}{br}${n}${l}`;
   }
-  const r = (e.palettecolors || $).split(",").map((o) => o.trim()), d = a.map((o, c) => {
-    const x = Number(o.value) || 0, y = l > 0 ? (x / l * 100).toFixed(2) : "0", b = o.color || r[c % r.length];
+  const d = (e.palettecolors || B).split(",").map((i) => i.trim()), c = a.map((i, r) => {
+    const g = Number(i.value) || 0, u = l > 0 ? (g / l * 100).toFixed(2) : "0", b = i.color || d[r % d.length];
     let m;
-    return e.plotToolText ? m = e.plotToolText.replace(/\$plotFillColor/g, b).replace(/\$color/g, b).replace(/\$label/g, o.label || "").replace(/\$value/g, String(o.value ?? "")).replace(/\$dataValue/g, `${n}${x}`).replace(/\$percentValue/g, y).replace(/\$unformattedSum/g, String(l)).replace(/\$sum/g, `${n}${l}`) : m = `<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;gap:10px;padding:2px 0;min-width:200px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'><span style='width:8px;height:8px;border-radius:2px;background-color:${b};display:inline-block;margin-right:5px'></span>${o.label}</label><b style='text-align:right;'>${n}${x}</b></div>`, {
-      ...o,
+    return e.plotToolText ? m = e.plotToolText.replace(/\$plotFillColor/g, b).replace(/\$color/g, b).replace(/\$label/g, i.label || "").replace(/\$value/g, String(i.value ?? "")).replace(/\$dataValue/g, `${n}${g}`).replace(/\$percentValue/g, u).replace(/\$unformattedSum/g, String(l)).replace(/\$sum/g, `${n}${l}`) : m = `<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;gap:10px;padding:2px 0;min-width:200px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'><span style='width:8px;height:8px;border-radius:2px;background-color:${b};display:inline-block;margin-right:5px'></span>${i.label}</label><b style='text-align:right;'>${n}${g}</b></div>`, {
+      ...i,
       color: b,
-      displayValue: `${n}${o.value} (${y}%){br}${o.label}`,
+      displayValue: `${n}${i.value} (${u}%){br}${i.label}`,
       toolText: m
     };
   });
@@ -369,8 +376,8 @@ const M = (e = {}) => {
     width: e.width || "136",
     height: e.height || "136",
     dataSource: {
-      chart: G(i),
-      data: d
+      chart: G(o),
+      data: c
     }
   });
 }, oe = (e = {}) => {
@@ -378,7 +385,7 @@ const M = (e = {}) => {
   return h({
     type: "multiaxisline",
     key: e.key,
-    width: e.width || g,
+    width: e.width || x,
     height: e.height || "400",
     dataSource: {
       chart: { ...t?.chart || {}, ...e.plotToolText ? { plotToolText: e.plotToolText } : {} },
@@ -400,23 +407,23 @@ const M = (e = {}) => {
 }, se = (e = {}) => {
   let t = [], a = [];
   if (Array.isArray(e.graphData)) {
-    const i = e.graphData;
-    t = i.map((r) => ({ label: r.label || "" })), a = [
+    const o = e.graphData;
+    t = o.map((d) => ({ label: d.label || "" })), a = [
       {
         seriesname: "Series 1",
-        data: i.map((r) => ({ value: r.value }))
+        data: o.map((d) => ({ value: d.value }))
       }
     ];
   } else {
-    const i = e.graphData;
-    t = i?.category || [], a = (i?.dataset || []).map((r) => ({
-      ...r,
-      seriesname: r.seriesname || "Series",
-      data: r.data || []
+    const o = e.graphData;
+    t = o?.category || [], a = (o?.dataset || []).map((d) => ({
+      ...d,
+      seriesname: d.seriesname || "Series",
+      data: d.data || []
     }));
   }
-  const s = u(e.numberPrefix), l = a.some((i) => !!i.color), n = {
-    ...P(e),
+  const s = y(e.numberPrefix), l = a.some((o) => !!o.color), n = {
+    ...k(e),
     bgColor: e.bgColor || "#ffffff",
     xAxisName: e.xAxisName,
     yAxisName: e.yAxisName,
@@ -434,7 +441,7 @@ const M = (e = {}) => {
     palettecolors: l ? void 0 : L(e.palettecolors),
     maxLabelHeight: e.maxLabelHeight,
     numbersuffix: e.numbersuffix || "",
-    labelStep: f(t.length, e.labelStep),
+    labelStep: w(t.length, e.labelStep),
     numVisiblePlot: e.numVisiblePlot || "8",
     scrollShowButtons: "0",
     scrollColor: "#CCCCCC",
@@ -445,7 +452,7 @@ const M = (e = {}) => {
   };
   return h({
     type: "scrollcolumn2d",
-    width: e.width || g,
+    width: e.width || x,
     height: e.height || "400",
     dataSource: {
       chart: n,
@@ -454,18 +461,18 @@ const M = (e = {}) => {
     }
   });
 }, re = (e = {}) => {
-  const t = e.graphLabel ? "" : u(e.numberPrefix), a = e.graphData, s = (a?.dataset || []).some((i) => !!i.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>", n = (a?.dataset || []).map((i, r) => ({
-    ...i,
-    plotToolText: e.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;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>$seriesName</label><b style='text-align:right;'>$dataValue</b></div>" + l : "<div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>$seriesName</label><b style='text-align:right;'>$dataValue</b></div>" + l)
+  const t = e.graphLabel ? "" : y(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>", n = (a?.dataset || []).map((o, d) => ({
+    ...o,
+    plotToolText: e.plotToolText || (d === 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;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>$seriesName</label><b style='text-align:right;'>$dataValue</b></div>" + l : "<div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;min-width:180px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>$seriesName</label><b style='text-align:right;'>$dataValue</b></div>" + l)
   }));
   return h({
     type: "scrollstackedcolumn2d",
     key: e.key,
-    width: e.width || g,
+    width: e.width || x,
     height: e.height || "400",
     dataSource: {
       chart: {
-        ...F(e),
+        ...M(e),
         yAxisMaxValue: e.yAxisMaxValue,
         xAxisName: e.xAxisName,
         yAxisName: e.yAxisName,
@@ -474,10 +481,10 @@ const M = (e = {}) => {
         interactiveLegend: e.interactiveLegend || "1",
         drawCrossLine: e.drawCrossLine || "1",
         bgColor: e.bgColor || "#ffffff",
-        palettecolors: s ? void 0 : e.palettecolors || $,
+        palettecolors: s ? void 0 : e.palettecolors || B,
         numberPrefix: t,
         numVDivLines: e.numVDivLines || "5",
-        labelStep: f(a?.category?.length, e.labelStep),
+        labelStep: w(a?.category?.length, e.labelStep),
         showSum: e.showSum ? "1" : void 0,
         numVisiblePlot: e.numVisiblePlot || "6",
         scrollShowButtons: "0",
@@ -491,23 +498,25 @@ const M = (e = {}) => {
     }
   });
 }, de = (e = {}) => {
-  const t = e.graphLabel ? "" : u(e.numberPrefix), a = e.graphData, s = (a?.dataset || []).some((d) => !!d.color), l = (e.palettecolors || $).split(",").map((d) => d.trim()), n = a?.category || [], i = a?.dataset || [], r = i.map((d, o) => {
-    const c = d.color || l[o % l.length], x = d.data || [];
+  const t = e.graphLabel ? "" : y(e.numberPrefix), a = e.graphData, s = (a?.dataset || []).some((c) => !!c.color), l = (e.palettecolors || B).split(",").map((c) => c.trim()), n = a?.category || [], o = a?.dataset || [], d = o.map((c, i) => {
+    const r = c.color || l[i % l.length], g = c.data || [];
     return {
-      ...d,
-      color: c,
+      ...c,
+      color: r,
       ...e.plotToolText ? { plotToolText: e.plotToolText } : {},
-      data: x.map((y, b) => {
+      data: g.map((u, b) => {
         const m = n[b]?.label || "";
         if (e.plotToolText)
-          return { ...y };
-        const T = i.map((w, C) => {
-          const v = w.color || l[C % l.length], D = (w.data || [])[b]?.value ?? "", A = w.seriesname || "", p = C === o ? "#2B2B2B" : "#666";
-          return `<div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 0;min-width:200px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:${p}'><span style='width:8px;height:8px;border-radius:2px;background-color:${v};display:inline-block;margin-right:5px;'></span>${A}</label><b style='text-align:right;color:${p}'>${t}${D}</b></div>`;
+          return { ...u };
+        if (i > 0)
+          return { ...u, toolText: " " };
+        const C = o.map((f, T) => {
+          const v = f.color || l[T % l.length], $ = (f.data || [])[b]?.value ?? "", A = f.seriesname || "", p = "#2B2B2B", D = f.tooltipPrefix !== void 0 ? f.tooltipPrefix : t;
+          return `<div style='display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 0;min-width:200px'><label style='display:inline-block;width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:${p}'><span style='width:8px;height:8px;border-radius:2px;background-color:${v};display:inline-block;margin-right:5px;'></span>${A}</label><b style='text-align:right;color:${p}'>${D}${$}</b></div>`;
         }).join("");
         return {
-          ...y,
-          toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>${m}</div>${T}`
+          ...u,
+          toolText: `<div style='font-size:14px;font-weight:600;color:#2B2B2B;padding-bottom:8px;border-bottom:1px solid #eee;margin-bottom:8px'>${m}</div>${C}`
         };
       })
     };
@@ -515,7 +524,7 @@ const M = (e = {}) => {
   return h({
     type: "mscombidy2d",
     key: e.key,
-    width: e.width || g,
+    width: e.width || x,
     height: e.height || "400",
     dataSource: {
       chart: {
@@ -526,18 +535,18 @@ const M = (e = {}) => {
         pYAxisName: e.pYAxisName,
         sYAxisName: e.sYAxisName,
         numberPrefix: t,
-        labelStep: f(n.length, e.labelStep),
-        palettecolors: s ? void 0 : e.palettecolors || $
+        labelStep: w(n.length, e.labelStep),
+        palettecolors: s ? void 0 : e.palettecolors || B
       },
       categories: [{ category: n }],
-      dataset: r
+      dataset: d
     }
   });
 }, ce = (e = {}) => {
-  const t = e.graphLabel ? "" : u(e.numberPrefix), a = e.graphData, s = a?.category || [], l = a?.dataset || [];
+  const t = e.graphLabel ? "" : y(e.numberPrefix), a = e.graphData, s = a?.category || [], l = a?.dataset || [];
   return h({
     type: "scrollline2d",
-    width: e?.width || g,
+    width: e?.width || x,
     height: e?.height || "400",
     dataSource: {
       chart: {
@@ -555,7 +564,7 @@ const M = (e = {}) => {
         flatScrollBars: "1",
         scrollPadding: "5",
         numDivLines: "5",
-        labelStep: f(s.length, e?.labelStep),
+        labelStep: w(s.length, e?.labelStep),
         ...e?.plotToolText ? { plotToolText: e.plotToolText } : {},
         ...e?.chartConfig || {}
       },
@@ -565,8 +574,8 @@ const M = (e = {}) => {
   });
 }, he = {
   area: X,
-  bar2d: M,
-  column2d: M,
+  bar2d: F,
+  column2d: F,
   doughnutChart: ie,
   groupChart: J,
   line: q,

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

@@ -1 +1 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../../lib/components/FusionChart/_config/events.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAEpE,KAAK,UAAU,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;AAE3D,QAAA,MAAM,mBAAmB,GACtB,SAAS,UAAU,EAAE,cAAS,MAC9B,OAAO,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,mBACU,CAAC;AAE5C,eAAO,MAAM,cAAc,GACzB,QAAO,OAAO,CAAC,gBAAgB,CAAM,KACpC,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,GAAG,SAiCxE,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,QAAO,OAAO,CAAC,gBAAgB,CAAM,KACpC,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAS/B,CAAC"}
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../../lib/components/FusionChart/_config/events.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAoB,MAAM,6BAA6B,CAAC;AAEtF,KAAK,UAAU,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;AAE3D,QAAA,MAAM,mBAAmB,GACtB,SAAS,UAAU,EAAE,cAAS,MAC5B,OAAO,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,mBACU,CAAC;AAE9C,eAAO,MAAM,cAAc,GACzB,QAAO,OAAO,CAAC,gBAAgB,CAAM,KACpC,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,GAAG,SAwDxE,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,QAAO,OAAO,CAAC,gBAAgB,CAAM,KACpC,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAS/B,CAAC"}