@ck-ui/component-library 1.0.3 → 1.0.5

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

@@ -1,16 +1,16 @@
-import { EXTENDED_PALETTE as p, 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 { 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 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];
+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;'>${y(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: w(U(e), e.labelStep),
     xAxisName: e.xAxisName,
@@ -28,24 +28,24 @@ const M = (e = {}) => {
     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,13 +54,13 @@ const M = (e = {}) => {
     data: e.graphData || []
   }
 }), q = (e = {}) => {
-  const t = Array.isArray(e?.graphData) ? e.graphData : [], a = y(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: {
@@ -70,20 +70,27 @@ const M = (e = {}) => {
         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: {
@@ -103,18 +110,18 @@ const M = (e = {}) => {
     }
   });
 }, Q = (e = {}) => {
-  const t = e.graphLabel ? "" : y(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,7 +130,7 @@ const M = (e = {}) => {
         interactiveLegend: e.interactiveLegend || "1",
         drawCrossLine: e.drawCrossLine || "1",
         bgColor: e.bgColor || "#ffffff",
-        palettecolors: s ? void 0 : e.palettecolors || p,
+        palettecolors: s ? void 0 : e.palettecolors || B,
         numberPrefix: t,
         labelStep: w(a?.category?.length, e.labelStep),
         showSum: e.showSum ? "1" : void 0
@@ -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: {
@@ -166,31 +173,31 @@ const M = (e = {}) => {
     }
   });
 }, ee = (e = {}) => {
-  const t = e.graphLabel ? "" : y(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], u = 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: 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 f = i.map((T, v) => {
-          const A = T.color || l[v % l.length], B = (T.data || [])[m]?.value ?? "", S = T.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:${A};display:inline-block'></span>${S}</span><b style='color:${N}'>${t}${B}</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,
@@ -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: {
@@ -220,13 +227,13 @@ const M = (e = {}) => {
         labelStep: w(a?.category?.length, e.labelStep)
       },
       categories: [{ category: a?.category || [] }],
-      dataset: r
+      dataset: d
     }
   });
 }, te = (e = {}) => {
-  const t = y(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 || [], u = c?.dataset || [], b = u.map((m, C) => {
+    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,
@@ -236,26 +243,26 @@ const M = (e = {}) => {
         anchorBorderColor: f,
         anchorBorderThickness: "1",
         ...e.plotToolText ? { plotToolText: e.plotToolText } : {},
-        data: T.map((v, A) => {
-          const $ = x[A]?.label || "";
+        data: T.map((v, S) => {
+          const $ = g[S]?.label || "";
           if (e.plotToolText)
             return { ...v };
           if (C > 0)
             return { ...v, toolText: " " };
-          const B = u.map((S, D) => {
-            const I = (S.data || [])[A]?.value ?? "", z = S.seriesname || "", k = 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:${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'>${$}</div>${B}`
+            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 || p).split(",").map((o) => o.trim()), d = a.map((o, c) => {
-    const x = Number(o.value) || 0, u = 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, 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'>${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} (${u}%){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 = y(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,
@@ -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 ? "" : y(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,7 +481,7 @@ const M = (e = {}) => {
         interactiveLegend: e.interactiveLegend || "1",
         drawCrossLine: e.drawCrossLine || "1",
         bgColor: e.bgColor || "#ffffff",
-        palettecolors: s ? void 0 : e.palettecolors || p,
+        palettecolors: s ? void 0 : e.palettecolors || B,
         numberPrefix: t,
         numVDivLines: e.numVDivLines || "5",
         labelStep: w(a?.category?.length, e.labelStep),
@@ -491,21 +498,21 @@ const M = (e = {}) => {
     }
   });
 }, de = (e = {}) => {
-  const t = e.graphLabel ? "" : y(e.numberPrefix), a = e.graphData, s = (a?.dataset || []).some((d) => !!d.color), l = (e.palettecolors || p).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((u, b) => {
+      data: g.map((u, b) => {
         const m = n[b]?.label || "";
         if (e.plotToolText)
           return { ...u };
-        if (o > 0)
+        if (i > 0)
           return { ...u, toolText: " " };
-        const C = i.map((f, T) => {
-          const v = f.color || l[T % l.length], $ = (f.data || [])[b]?.value ?? "", B = f.seriesname || "", S = "#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:${S}'><span style='width:8px;height:8px;border-radius:2px;background-color:${v};display:inline-block;margin-right:5px;'></span>${B}</label><b style='text-align:right;color:${S}'>${D}${$}</b></div>`;
+        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 {
           ...u,
@@ -517,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: {
@@ -529,17 +536,17 @@ const M = (e = {}) => {
         sYAxisName: e.sYAxisName,
         numberPrefix: t,
         labelStep: w(n.length, e.labelStep),
-        palettecolors: s ? void 0 : e.palettecolors || p
+        palettecolors: s ? void 0 : e.palettecolors || B
       },
       categories: [{ category: n }],
-      dataset: r
+      dataset: d
     }
   });
 }, ce = (e = {}) => {
   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: {
@@ -567,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"}

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

@@ -1,40 +1,54 @@
-import { adjustDoughnutLabels as l } from "../_helpers/doughnutHelper.js";
-import { adjustMultiAxisValueLabels as n } from "../_helpers/multiAxisHelper.js";
-import { adjustMultiLineValueLabels as i } from "../_helpers/multiLineHelper.js";
-const r = (e, t = 0) => (a) => setTimeout(() => e(a), t), c = (e = {}) => {
+import { adjustDoughnutLabels as n } from "../_helpers/doughnutHelper.js";
+import { adjustMultiAxisValueLabels as i } from "../_helpers/multiAxisHelper.js";
+import { adjustMultiLineValueLabels as u } from "../_helpers/multiLineHelper.js";
+const a = (e, t = 0) => (r) => setTimeout(() => e(r), t), R = (e = {}) => {
   const {
     chartType: t,
-    manageDoughnutLabels: a,
-    manageMultiAxisLineLabels: u = !1,
-    manageMultiLineLabels: o = !1
+    manageDoughnutLabels: r,
+    manageMultiAxisLineLabels: m = !1,
+    manageMultiLineLabels: c = !1
   } = e;
-  if (t === "doughnutChart" && a)
+  if (t === "doughnutChart" && r)
     return {
-      renderComplete: l,
-      legendItemClicked: r(l),
-      dataPlotClick: r(l),
-      dataPlotRollOver: r(l, 50),
-      dataPlotRollOut: r(l, 50)
+      renderComplete: n,
+      legendItemClicked: a(n),
+      dataPlotClick: a(n),
+      dataPlotRollOver: a(n, 50),
+      dataPlotRollOut: a(n, 50)
+    };
+  if (t === "multipleLineChart" && c)
+    return {
+      renderComplete: u,
+      legendItemClicked: a(u, 50)
     };
-  if (t === "multipleLineChart" && o)
+  if (t === "multiAxisLineChart" && m)
     return {
       renderComplete: i,
-      legendItemClicked: r(i, 50)
+      legendItemClicked: a(i, 50)
+    };
+  if (t === "msCombiDy2d" && e.onPlotHover) {
+    const { onPlotHover: o } = e, f = e.graphData?.dataset || [], g = (l) => {
+      const s = l.data?.datasetIndex ?? 0, d = f[s];
+      return {
+        renderAs: d?.renderAs || "column",
+        seriesName: d?.seriesname,
+        datasetIndex: s
+      };
     };
-  if (t === "multiAxisLineChart" && u)
     return {
-      renderComplete: n,
-      legendItemClicked: r(n, 50)
+      dataPlotRollOver: (l) => o(g(l)),
+      dataPlotRollOut: () => o(null)
     };
-}, f = (e = {}) => {
+  }
+}, b = (e = {}) => {
   if (e.chartType !== "groupChart" || !e.chartRef)
     return;
   const t = e.chartRef;
-  return (a) => {
-    t.current = a;
+  return (r) => {
+    t.current = r;
   };
 };
 export {
-  c as getChartEvents,
-  f as getOnRender
+  R as getChartEvents,
+  b as getOnRender
 };

package/dist/components/FusionChart/_types/fusionChart.types.d.ts

@@ -128,5 +128,10 @@ export interface FusionChartProps {
     pYAxisName?: string;
     sYAxisName?: string;
     enableSlicing?: string;
+    onPlotHover?: (info: {
+        renderAs: string;
+        seriesName?: string;
+        datasetIndex: number;
+    } | null) => void;
 }
 //# sourceMappingURL=fusionChart.types.d.ts.map