@mx-cartographer/experiences 9.2.4-alpha.al2 → 9.3.0-alpha.bb1

package/dist/finstrong/components/shared/CustomDoubleBarPlot/index.es.js

@@ -0,0 +1,48 @@
+import r from "react";
+import { jsx as i, jsxs as y } from "react/jsx-runtime";
+import { useTheme as g } from "@mui/material/styles";
+var B = ({ color: a, data: c, series: n, style: e, ...u }) => {
+  const f = g(), t = r.useRef(null), m = r.useRef(null), [l, d] = r.useState(e.width || 0);
+  r.useLayoutEffect(() => {
+    d(e.width || 0);
+  }, [e.width]), r.useLayoutEffect(() => {
+    const o = new ResizeObserver(() => {
+      window.requestAnimationFrame(() => {
+        if (t.current) {
+          const { width: R } = t.current.getBoundingClientRect(), v = R / 2, s = t.current.querySelector("text");
+          s && s.setAttribute("transform", `translate(${v}, -8)`);
+        }
+      });
+    });
+    return t.current && o.observe(t.current), () => {
+      t.current && o.unobserve(t.current);
+    };
+  }, []);
+  const { formattedComparison: x, formattedMain: h } = c[n.index], b = n.type === 0 ? h : x, p = {
+    ...e,
+    transition: "all 0.3s ease-in-out"
+  }, w = `translate(${l / 2}, -5)`;
+  return /* @__PURE__ */ y("g", { children: [/* @__PURE__ */ i("rect", {
+    ...u,
+    fill: a,
+    ref: t,
+    rx: 2,
+    style: p
+  }), /* @__PURE__ */ i("text", {
+    fill: f.palette.text.secondary,
+    fontSize: 9,
+    fontWeight: 400,
+    ref: m,
+    style: { transition: "transform 0.3s ease-in-out" },
+    textAnchor: "middle",
+    transform: w,
+    x: e.x,
+    y: e.y,
+    children: b
+  })] });
+};
+export {
+  B as CustomDoubleBarPlot
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/shared/CustomDoubleBarPlot/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/CustomDoubleBarPlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n}\n\ninterface CustomDoubleBarPlotProps {\n  color: string\n  data: DataSet[]\n  series: Series\n  style: BarStyleProps\n}\n\ninterface Series {\n  index: number\n  type: number\n}\n\nexport interface DataSet {\n  comparison: number\n  formattedComparison: string\n  formattedMain: string\n  label: string\n  main: number\n}\n\nexport const CustomDoubleBarPlot = ({\n  color,\n  data,\n  series,\n  style,\n  ...restProps\n}: CustomDoubleBarPlotProps) => {\n  const theme = useTheme()\n  const rectRef = React.useRef<SVGRectElement>(null)\n  const textRef = React.useRef<SVGTextElement>(null)\n  const [barWidth, setBarWidth] = React.useState((style.width as number) || 0)\n\n  React.useLayoutEffect(() => {\n    setBarWidth((style.width as number) || 0)\n  }, [style.width])\n\n  React.useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      window.requestAnimationFrame(() => {\n        if (rectRef.current) {\n          const { width } = rectRef.current.getBoundingClientRect()\n\n          const xValue = width / 2\n          const textElement = rectRef.current.querySelector('text')\n          if (textElement) {\n            textElement.setAttribute('transform', `translate(${xValue}, -8)`)\n          }\n        }\n      })\n    })\n\n    if (rectRef.current) resizeObserver.observe(rectRef.current)\n    return () => {\n      if (rectRef.current) resizeObserver.unobserve(rectRef.current)\n    }\n  }, [])\n\n  const { formattedComparison, formattedMain } = data[series.index]\n\n  const formattedAmount = series.type === 0 ? formattedMain : formattedComparison\n\n  const rectStyle = {\n    ...style,\n    transition: 'all 0.3s ease-in-out',\n  }\n\n  const textTransform = `translate(${barWidth / 2}, -5)`\n\n  return (\n    <g>\n      <rect {...restProps} fill={color} ref={rectRef} rx={2} style={rectStyle} />\n      <text\n        fill={theme.palette.text.secondary}\n        fontSize={9}\n        fontWeight={400}\n        ref={textRef}\n        style={{ transition: 'transform 0.3s ease-in-out' }}\n        textAnchor=\"middle\"\n        transform={textTransform}\n        x={style.x}\n        y={style.y}\n      >\n        {formattedAmount}\n      </text>\n    </g>\n  )\n}\n"],"mappings":";;;AA4BA,IAAa,IAAA,CAAuB,EAClC,OAAA,GACA,MAAA,GACA,QAAA,GACA,OAAA,GACA,GAAG,EAAA,MAC2B;AAC9B,QAAM,IAAQ,EAAS,GACjB,IAAU,EAAM,OAAuB,IAAI,GAC3C,IAAU,EAAM,OAAuB,IAAI,GAC3C,CAAC,GAAU,CAAA,IAAe,EAAM,SAAU,EAAM,SAAoB,CAAC;AAE3E,EAAA,EAAM,gBAAA,MAAsB;AAC1B,IAAA,EAAa,EAAM,SAAoB,CAAC;AAAA,EAC1C,GAAG,CAAC,EAAM,KAAK,CAAC,GAEhB,EAAM,gBAAA,MAAsB;AAC1B,UAAM,IAAiB,IAAI,eAAA,MAAqB;AAC9C,aAAO,sBAAA,MAA4B;AACjC,YAAI,EAAQ,SAAS;AACnB,gBAAM,EAAE,OAAA,EAAA,IAAU,EAAQ,QAAQ,sBAAsB,GAElD,IAAS,IAAQ,GACjB,IAAc,EAAQ,QAAQ,cAAc,MAAM;AACxD,UAAI,KACF,EAAY,aAAa,aAAa,aAAa,CAAA,OAAa;AAAA,QAEpE;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,WAAI,EAAQ,WAAS,EAAe,QAAQ,EAAQ,OAAO,GAC3D,MAAa;AACX,MAAI,EAAQ,WAAS,EAAe,UAAU,EAAQ,OAAO;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,qBAAA,GAAqB,eAAA,EAAA,IAAkB,EAAK,EAAO,KAAA,GAErD,IAAkB,EAAO,SAAS,IAAI,IAAgB,GAEtD,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,YAAY;AAAA,EACd,GAEM,IAAgB,aAAa,IAAW,CAAA;AAE9C,SACE,gBAAA,EAAC,KAAD,EAAA,UAAA,CACE,gBAAA,EAAC,QAAD;AAAA,IAAM,GAAI;AAAA,IAAW,MAAM;AAAA,IAAO,KAAK;AAAA,IAAS,IAAI;AAAA,IAAG,OAAO;AAAA,EAAY,CAAA,GAC1E,gBAAA,EAAC,QAAD;AAAA,IACE,MAAM,EAAM,QAAQ,KAAK;AAAA,IACzB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO,EAAE,YAAY,6BAA6B;AAAA,IAClD,YAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG,EAAM;AAAA,IACT,GAAG,EAAM;AAAA,cAER;AAAA,EACG,CAAA,CACL,EAAA,CAAA;AAEP"}

package/dist/finstrong/components/shared/CustomPieArc/index.es.js

@@ -0,0 +1,52 @@
+import { getFilledArcStartEndAngle as j, getOutterArcStartEndAngle as v } from "../../../util/finstrongUtils/index.es.js";
+import { Fragment as y, jsx as r, jsxs as C } from "react/jsx-runtime";
+import { useTheme as O } from "@mui/material/styles";
+import * as h from "d3";
+var F = ({ dialScoreData: A, dataIndex: a, arcColor: g, arcStartAngle: p, totalAngularSpan: M, centerX: e, centerY: n, arcRadius: o, innerArcRadius: l, outterArcRadius: s, progressEndAngle: m, unitsPerSegment: u, isFinacialStrengthGraph: c }) => {
+  const t = O(), P = [
+    {
+      offset: "13.62%",
+      color: t.palette.chartMono.chartMono2
+    },
+    {
+      offset: "36.67%",
+      color: t.palette.chartMono.chartMono3
+    },
+    {
+      offset: "59.72%",
+      color: t.palette.chartMono.chartMono4
+    },
+    {
+      offset: "83.46%",
+      color: t.palette.chartMono.chartMono5
+    }
+  ], [d, i] = v(A, M, p, a), [x, E] = j(d, i, a, u, m), G = h.arc().innerRadius(l).outerRadius(s).startAngle(d).endAngle(i).padAngle(0.02).cornerRadius(8), S = h.arc().innerRadius(l).outerRadius(s).startAngle(x).endAngle(E).padAngle(0.02).cornerRadius(8);
+  return /* @__PURE__ */ C(y, { children: [
+    /* @__PURE__ */ r("path", {
+      d: G({}),
+      fill: c ? t.palette.divider : g
+    }),
+    c && /* @__PURE__ */ r("path", {
+      d: S({}),
+      fill: "url(#arcGradient)"
+    }),
+    /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ r("linearGradient", {
+      gradientTransform: `rotate(5, ${e}, ${n})`,
+      gradientUnits: "userSpaceOnUse",
+      id: "arcGradient",
+      x1: e + o * 0.8 * Math.cos(Math.PI / 1.35),
+      x2: e - o * 0.8 * Math.cos(Math.PI / 1.35),
+      y1: n + o * 0.8 * Math.sin(Math.PI / 1.35),
+      y2: n - o * 0.8 * Math.sin(Math.PI / 1.35),
+      children: P.map((f, I) => /* @__PURE__ */ r("stop", {
+        offset: f.offset,
+        stopColor: f.color
+      }, I))
+    }) })
+  ] });
+};
+export {
+  F as CustomPieArc
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/shared/CustomPieArc/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/CustomPieArc.tsx"],"sourcesContent":["import * as d3 from 'd3'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport type { PieValueType } from '@mui/x-charts'\n\nimport { getFilledArcStartEndAngle, getOutterArcStartEndAngle } from '../../util/finstrongUtils'\n\ninterface CustomPieArcProps {\n  dialScoreData: PieValueType[]\n  dataIndex: number\n  arcStartAngle: number\n  totalAngularSpan: number\n  centerX: number\n  centerY: number\n  arcRadius: number\n  arcColor?: string\n  innerArcRadius: number\n  outterArcRadius: number\n  unitsPerSegment: number\n  progressEndAngle: number\n  isFinacialStrengthGraph?: boolean\n}\nexport const CustomPieArc = ({\n  dialScoreData,\n  dataIndex,\n  arcColor,\n  arcStartAngle,\n  totalAngularSpan,\n  centerX,\n  centerY,\n  arcRadius,\n  innerArcRadius,\n  outterArcRadius,\n  progressEndAngle,\n  unitsPerSegment,\n  isFinacialStrengthGraph,\n}: CustomPieArcProps) => {\n  const theme = useTheme()\n  const gradientSteps = [\n    { offset: '13.62%', color: theme.palette.chartMono.chartMono2 },\n    { offset: '36.67%', color: theme.palette.chartMono.chartMono3 },\n    { offset: '59.72%', color: theme.palette.chartMono.chartMono4 },\n    { offset: '83.46%', color: theme.palette.chartMono.chartMono5 },\n  ]\n\n  const [outterArcStartAngle, outterArcEndAngle] = getOutterArcStartEndAngle(\n    dialScoreData,\n    totalAngularSpan,\n    arcStartAngle,\n    dataIndex,\n  )\n\n  const [filledArcStartAngle, filledArcEndAngle] = getFilledArcStartEndAngle(\n    outterArcStartAngle,\n    outterArcEndAngle,\n    dataIndex,\n    unitsPerSegment,\n    progressEndAngle,\n  )\n\n  const outerArcGenerator = d3\n    .arc()\n    .innerRadius(innerArcRadius)\n    .outerRadius(outterArcRadius)\n    .startAngle(outterArcStartAngle)\n    .endAngle(outterArcEndAngle)\n    .padAngle(0.02)\n    .cornerRadius(8)\n\n  const fillArcGenerator = d3\n    .arc()\n    .innerRadius(innerArcRadius)\n    .outerRadius(outterArcRadius)\n    .startAngle(filledArcStartAngle)\n    .endAngle(filledArcEndAngle)\n    .padAngle(0.02)\n    .cornerRadius(8)\n\n  return (\n    <>\n      {/* Background segment */}\n      <path\n        d={outerArcGenerator({} as d3.DefaultArcObject)!}\n        fill={isFinacialStrengthGraph ? theme.palette.divider : arcColor}\n      />\n\n      {/* Progress segment */}\n      {isFinacialStrengthGraph && (\n        <path d={fillArcGenerator({} as d3.DefaultArcObject)!} fill=\"url(#arcGradient)\" />\n      )}\n\n      <defs>\n        <linearGradient\n          gradientTransform={`rotate(5, ${centerX}, ${centerY})`}\n          gradientUnits=\"userSpaceOnUse\"\n          id=\"arcGradient\"\n          x1={centerX + arcRadius * 0.8 * Math.cos(Math.PI / 1.35)}\n          x2={centerX - arcRadius * 0.8 * Math.cos(Math.PI / 1.35)}\n          y1={centerY + arcRadius * 0.8 * Math.sin(Math.PI / 1.35)}\n          y2={centerY - arcRadius * 0.8 * Math.sin(Math.PI / 1.35)}\n        >\n          {gradientSteps.map((eachStep, index) => (\n            <stop key={index} offset={eachStep.offset} stopColor={eachStep.color} />\n          ))}\n        </linearGradient>\n      </defs>\n    </>\n  )\n}\n"],"mappings":";;;;AAuBA,IAAa,IAAA,CAAgB,EAC3B,eAAA,GACA,WAAA,GACA,UAAA,GACA,eAAA,GACA,kBAAA,GACA,SAAA,GACA,SAAA,GACA,WAAA,GACA,gBAAA,GACA,iBAAA,GACA,kBAAA,GACA,iBAAA,GACA,yBAAA,EAAA,MACuB;AACvB,QAAM,IAAQ,EAAS,GACjB,IAAgB;AAAA,IACpB;AAAA,MAAE,QAAQ;AAAA,MAAU,OAAO,EAAM,QAAQ,UAAU;AAAA,IAAW;AAAA,IAC9D;AAAA,MAAE,QAAQ;AAAA,MAAU,OAAO,EAAM,QAAQ,UAAU;AAAA,IAAW;AAAA,IAC9D;AAAA,MAAE,QAAQ;AAAA,MAAU,OAAO,EAAM,QAAQ,UAAU;AAAA,IAAW;AAAA,IAC9D;AAAA,MAAE,QAAQ;AAAA,MAAU,OAAO,EAAM,QAAQ,UAAU;AAAA,IAAW;AAAA,EAChE,GAEM,CAAC,GAAqB,CAAA,IAAqB,EAC/C,GACA,GACA,GACA,CACF,GAEM,CAAC,GAAqB,CAAA,IAAqB,EAC/C,GACA,GACA,GACA,GACA,CACF,GAEM,IAAoB,EACvB,IAAI,EACJ,YAAY,CAAc,EAC1B,YAAY,CAAe,EAC3B,WAAW,CAAmB,EAC9B,SAAS,CAAiB,EAC1B,SAAS,IAAI,EACb,aAAa,CAAC,GAEX,IAAmB,EACtB,IAAI,EACJ,YAAY,CAAc,EAC1B,YAAY,CAAe,EAC3B,WAAW,CAAmB,EAC9B,SAAS,CAAiB,EAC1B,SAAS,IAAI,EACb,aAAa,CAAC;AAEjB,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,IAEE,gBAAA,EAAC,QAAD;AAAA,MACE,GAAG,EAAkB,CAAC,CAAwB;AAAA,MAC9C,MAAM,IAA0B,EAAM,QAAQ,UAAU;AAAA,IACzD,CAAA;AAAA,IAGA,KACC,gBAAA,EAAC,QAAD;AAAA,MAAM,GAAG,EAAiB,CAAC,CAAwB;AAAA,MAAI,MAAK;AAAA,IAAqB,CAAA;AAAA,IAGnF,gBAAA,EAAC,QAAD,EAAA,UACE,gBAAA,EAAC,kBAAD;AAAA,MACE,mBAAmB,aAAa,CAAA,KAAY,CAAA;AAAA,MAC5C,eAAc;AAAA,MACd,IAAG;AAAA,MACH,IAAI,IAAU,IAAY,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA,MACvD,IAAI,IAAU,IAAY,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA,MACvD,IAAI,IAAU,IAAY,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA,MACvD,IAAI,IAAU,IAAY,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA,gBAEtD,EAAc,IAAA,CAAK,GAAU,MAC5B,gBAAA,EAAC,QAAD;AAAA,QAAkB,QAAQ,EAAS;AAAA,QAAQ,WAAW,EAAS;AAAA,MAAQ,GAA5D,CAA4D,CACxE;AAAA,IACa,CAAA,EACZ,CAAA;AAAA,EACN,EAAA,CAAA;AAEN"}

package/dist/finstrong/components/shared/DialScoreCard/index.es.js

@@ -0,0 +1,186 @@
+import { getMarkerXYCoordinates as U, radiansToDegrees as D } from "../../../util/finstrongUtils/index.es.js";
+import { CustomPieArc as H } from "../CustomPieArc/index.es.js";
+import u from "@mui/material/Stack";
+import { P as c } from "@mxenabled/mxui";
+import { ArrowRightAlt as q, TrendingDown as G, TrendingUp as J } from "@mxenabled/mx-icons";
+import { jsx as t, jsxs as k } from "react/jsx-runtime";
+import { useTheme as K } from "@mui/material/styles";
+import p from "@mui/material/Box";
+import { PieChart as N } from "@mui/x-charts/PieChart";
+var nt = ({ arcRadius: x = 100, healthScore: n, size: r = "L", dialScoreData: v, minValue: g = 0, maxValue: A = 100, margin: T, markerColor: j, healthScoreStatus: F, footerCenterContent: s, footerLeftContent: M, footerRightContent: b, isFinacialStrengthGraph: y = !1 }) => {
+  const L = K(), l = -Math.PI / 1.35, $ = Math.PI / 1.35, w = $ - l, R = w / (A - g), P = l + (n - g) * R + 0.02, W = r !== "SM" ? 0.1 : 0.12, d = x, h = x * (1 - W), i = d * 2, e = i / 2, o = i / 2, [f, S] = U((h + d) / 2, P, n !== 25 && n !== 50 && n !== 75 && n !== 100 ? 0 : 0.12), X = n / 25, a = {
+    L: {
+      markerSize: 12,
+      healthScoreFontSize: 64
+    },
+    M: {
+      markerSize: 8,
+      healthScoreFontSize: 48
+    },
+    SM: {
+      markerSize: 3,
+      healthScoreFontSize: 14
+    }
+  }, Y = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...T
+  }, B = s === 0 ? q : G, I = r !== "SM" ? 3 : 1, E = I * 4, m = a[r].markerSize * 2 + E;
+  return /* @__PURE__ */ k(u, {
+    sx: {
+      width: i,
+      height: r === "SM" ? i - 7 : i,
+      position: "relative",
+      alignSelf: "center",
+      overflow: "visible"
+    },
+    children: [
+      /* @__PURE__ */ t(N, {
+        height: r === "SM" ? i - 7 : i,
+        hideLegend: !0,
+        margin: Y,
+        series: [{
+          data: v,
+          innerRadius: h,
+          outerRadius: d,
+          startAngle: Math.round(D(l)),
+          endAngle: Math.round(D($))
+        }],
+        skipAnimation: !0,
+        slots: { pieArc: (z) => /* @__PURE__ */ t(H, {
+          arcColor: z.color,
+          arcRadius: x,
+          arcStartAngle: l,
+          centerX: e,
+          centerY: o,
+          dataIndex: z.dataIndex,
+          dialScoreData: v,
+          innerArcRadius: h,
+          isFinacialStrengthGraph: y,
+          outterArcRadius: d,
+          progressEndAngle: P,
+          totalAngularSpan: w,
+          unitsPerSegment: X
+        }) },
+        sx: { "& path": { stroke: "none" } },
+        width: i
+      }),
+      n >= g && n <= A && /* @__PURE__ */ t("svg", {
+        height: m,
+        style: {
+          position: "absolute",
+          left: e + f - a[r].markerSize - 5,
+          top: o + S - a[r].markerSize - 5,
+          overflow: "visible"
+        },
+        viewBox: `${e + f - a[r].markerSize - 5} ${o + S - a[r].markerSize - 5} ${m} ${m}`,
+        width: m,
+        children: /* @__PURE__ */ t("circle", {
+          cx: e + f,
+          cy: o + S,
+          fill: L.palette.common.white,
+          r: a[r].markerSize,
+          stroke: y ? "url(#arcGradient)" : j,
+          strokeWidth: I
+        })
+      }),
+      /* @__PURE__ */ t(p, {
+        sx: {
+          position: "absolute",
+          top: `${o}px`,
+          left: `${e}px`,
+          transform: "translate(-50%, -50%)",
+          textAlign: "center"
+        },
+        children: /* @__PURE__ */ k(u, {
+          spacing: 1,
+          sx: {
+            alignItems: "center",
+            justifyContent: "center",
+            gap: r !== "M" ? 10 : 3
+          },
+          children: [/* @__PURE__ */ t(c, {
+            sx: {
+              fontSize: a[r].healthScoreFontSize,
+              lineHeight: r !== "SM" ? "48px" : "100%"
+            },
+            variant: "h1",
+            children: n
+          }), r !== "SM" && /* @__PURE__ */ t(c, {
+            sx: { fontWeight: 600 },
+            variant: r === "L" ? "body1" : "body2",
+            children: F
+          })]
+        })
+      }),
+      s !== void 0 && /* @__PURE__ */ t(p, {
+        sx: {
+          position: "absolute",
+          top: `${o * 2 * 0.83}px`,
+          left: `${e}px`,
+          transform: "translate(-50%, -50%)",
+          textAlign: "center"
+        },
+        children: typeof s == "number" ? /* @__PURE__ */ k(u, {
+          sx: {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 4,
+            mt: 24
+          },
+          children: [s > 0 ? /* @__PURE__ */ t(J, {
+            size: 16,
+            sx: { color: "success.main" }
+          }) : /* @__PURE__ */ t(B, {
+            size: 16,
+            sx: { color: "text.secondary" }
+          }), /* @__PURE__ */ t(c, {
+            sx: {
+              fontWeight: 600,
+              color: s > 0 ? "success.main" : "text.secondary"
+            },
+            variant: "body1",
+            children: Math.abs(s)
+          })]
+        }) : /* @__PURE__ */ t(c, {
+          sx: { color: "text.secondary" },
+          variant: "subtitle2",
+          children: s
+        })
+      }),
+      M !== void 0 && /* @__PURE__ */ t(p, {
+        sx: {
+          position: "absolute",
+          top: `${o * 2 * 0.83}px`,
+          left: `${e - e / 2}px`,
+          transform: "translate(-50%, -50%)",
+          textAlign: "left"
+        },
+        children: /* @__PURE__ */ t(c, {
+          variant: "body1",
+          children: M
+        })
+      }),
+      b !== void 0 && /* @__PURE__ */ t(p, {
+        sx: {
+          position: "absolute",
+          top: `${o * 2 * 0.83}px`,
+          left: `${e + e / 2}px`,
+          transform: "translate(-50%, -50%)",
+          textAlign: "right"
+        },
+        children: /* @__PURE__ */ t(c, {
+          variant: "body1",
+          children: b
+        })
+      })
+    ]
+  });
+};
+export {
+  nt as DialScoreCard
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/shared/DialScoreCard/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/DialScoreCard.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { PieArcProps, PieValueType } from '@mui/x-charts'\nimport { PieChart } from '@mui/x-charts/PieChart'\n\nimport { P } from '@mxenabled/mxui'\nimport { TrendingDown, TrendingUp, ArrowRightAlt } from '@mxenabled/mx-icons'\n\nimport { getMarkerXYCoordinates, radiansToDegrees } from '../../util/finstrongUtils'\n\nimport { CustomPieArc } from './CustomPieArc'\n\nexport interface DialScoreCardProps {\n  arcRadius: number\n  healthScore: number\n  size: 'L' | 'M' | 'SM'\n  dialScoreData: PieValueType[]\n  minValue?: number\n  maxValue?: number\n  margin?: { top?: number; right?: number; left?: number; bottom?: number }\n  markerColor?: string\n  healthScoreStatus: string\n  footerCenterContent?: string | number\n  footerLeftContent?: number\n  footerRightContent?: number\n  isFinacialStrengthGraph?: boolean\n}\nexport const DialScoreCard = ({\n  arcRadius = 100,\n  healthScore,\n  size = 'L',\n  dialScoreData,\n  minValue = 0,\n  maxValue = 100,\n  margin,\n  markerColor,\n  healthScoreStatus,\n  footerCenterContent,\n  footerLeftContent,\n  footerRightContent,\n  isFinacialStrengthGraph = false,\n}: DialScoreCardProps) => {\n  const theme = useTheme()\n  const arcStartAngle = -Math.PI / 1.35\n  const arcEndAngle = Math.PI / 1.35\n\n  //finding the end angle of the filled(colored) arc i.e progressArc\n  const totalAngularSpan = arcEndAngle - arcStartAngle\n\n  const anglePerUnit = totalAngularSpan / (maxValue - minValue)\n  const progressEndAngleOffset = (healthScore - minValue) * anglePerUnit\n  const progressEndAngle = arcStartAngle + progressEndAngleOffset + 0.02 // Adding a small offset to avoid overlap with the next arc\n\n  const thicknessRatio = size !== 'SM' ? 0.1 : 0.12\n  const outterArcRadius = arcRadius\n  const innerArcRadius = arcRadius * (1 - thicknessRatio)\n\n  const chartDimenesions = outterArcRadius * 2 //width and height of the chart\n  const centerX = chartDimenesions / 2\n  const centerY = chartDimenesions / 2\n  const markerRadius = (innerArcRadius + outterArcRadius) / 2\n  const angleOffset =\n    healthScore !== 25 && healthScore !== 50 && healthScore !== 75 && healthScore !== 100 ? 0 : 0.12 // Adjust the offset based on health score\n\n  const [markerX, markerY] = getMarkerXYCoordinates(markerRadius, progressEndAngle, angleOffset)\n\n  const unitsPerSegment = healthScore / 25\n\n  const sizeMap = {\n    L: { markerSize: 12, healthScoreFontSize: 64 },\n    M: { markerSize: 8, healthScoreFontSize: 48 },\n    SM: { markerSize: 3, healthScoreFontSize: 14 },\n  }\n\n  const chartMargin = {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    ...margin,\n  }\n  const PercentageIcon = footerCenterContent === 0 ? ArrowRightAlt : TrendingDown\n  const stroke = size !== 'SM' ? 3 : 1\n  const padding = stroke * 4 // enough room for stroke\n  const svgSize = sizeMap[size].markerSize * 2 + padding\n\n  return (\n    <Stack\n      sx={{\n        width: chartDimenesions,\n        height: size === 'SM' ? chartDimenesions - 7 : chartDimenesions,\n        position: 'relative',\n        alignSelf: 'center',\n        overflow: 'visible',\n      }}\n    >\n      <PieChart\n        height={size === 'SM' ? chartDimenesions - 7 : chartDimenesions}\n        hideLegend={true}\n        margin={chartMargin}\n        series={[\n          {\n            data: dialScoreData,\n            innerRadius: innerArcRadius,\n            outerRadius: outterArcRadius,\n            startAngle: Math.round(radiansToDegrees(arcStartAngle)), // Use Math.degrees to convert\n            endAngle: Math.round(radiansToDegrees(arcEndAngle)), // Use Math.degrees to convert\n          },\n        ]}\n        skipAnimation={true}\n        slots={{\n          pieArc: (props: PieArcProps) => (\n            <CustomPieArc\n              arcColor={props.color}\n              arcRadius={arcRadius}\n              arcStartAngle={arcStartAngle}\n              centerX={centerX}\n              centerY={centerY}\n              dataIndex={props.dataIndex}\n              dialScoreData={dialScoreData}\n              innerArcRadius={innerArcRadius}\n              isFinacialStrengthGraph={isFinacialStrengthGraph}\n              outterArcRadius={outterArcRadius}\n              progressEndAngle={progressEndAngle}\n              totalAngularSpan={totalAngularSpan}\n              unitsPerSegment={unitsPerSegment}\n            />\n          ),\n        }}\n        sx={{\n          '& path': {\n            stroke: 'none',\n          },\n        }}\n        width={chartDimenesions}\n      />\n\n      {healthScore >= minValue && healthScore <= maxValue && (\n        <svg\n          height={svgSize}\n          style={{\n            position: 'absolute',\n            left: centerX + markerX - sizeMap[size].markerSize - 5,\n            top: centerY + markerY - sizeMap[size].markerSize - 5,\n            overflow: 'visible',\n          }}\n          viewBox={`${centerX + markerX - sizeMap[size].markerSize - 5} ${centerY + markerY - sizeMap[size].markerSize - 5} ${svgSize} ${svgSize}`}\n          width={svgSize}\n        >\n          <circle\n            cx={centerX + markerX}\n            cy={centerY + markerY}\n            fill={theme.palette.common.white}\n            r={sizeMap[size].markerSize}\n            stroke={isFinacialStrengthGraph ? 'url(#arcGradient)' : markerColor}\n            strokeWidth={stroke}\n          />\n        </svg>\n      )}\n      <Box\n        sx={{\n          position: 'absolute',\n          top: `${centerY}px`,\n          left: `${centerX}px`,\n          transform: 'translate(-50%, -50%)',\n          textAlign: 'center',\n        }}\n      >\n        <Stack\n          spacing={1}\n          sx={{ alignItems: 'center', justifyContent: 'center', gap: size !== 'M' ? 10 : 3 }}\n        >\n          <P\n            sx={{\n              fontSize: sizeMap[size].healthScoreFontSize,\n              lineHeight: size !== 'SM' ? '48px' : '100%',\n            }}\n            variant=\"h1\"\n          >\n            {healthScore}\n          </P>\n          {size !== 'SM' && (\n            <P sx={{ fontWeight: 600 }} variant={size === 'L' ? 'body1' : 'body2'}>\n              {healthScoreStatus}\n            </P>\n          )}\n        </Stack>\n      </Box>\n      {footerCenterContent !== undefined && (\n        <Box\n          sx={{\n            position: 'absolute',\n            top: `${centerY * 2 * 0.83}px`,\n            left: `${centerX}px`,\n            transform: 'translate(-50%, -50%)',\n            textAlign: 'center',\n          }}\n        >\n          {typeof footerCenterContent === 'number' ? (\n            <Stack\n              sx={{\n                flexDirection: 'row',\n                alignItems: 'center',\n                gap: 4,\n                mt: 24,\n              }}\n            >\n              {footerCenterContent > 0 ? (\n                <TrendingUp size={16} sx={{ color: 'success.main' }} />\n              ) : (\n                <PercentageIcon size={16} sx={{ color: 'text.secondary' }} />\n              )}\n              <P\n                sx={{\n                  fontWeight: 600,\n                  color: footerCenterContent > 0 ? 'success.main' : 'text.secondary',\n                }}\n                variant=\"body1\"\n              >\n                {Math.abs(footerCenterContent)}\n              </P>\n            </Stack>\n          ) : (\n            <P sx={{ color: 'text.secondary' }} variant={'subtitle2'}>\n              {footerCenterContent}\n            </P>\n          )}\n        </Box>\n      )}\n      {/* Left Footer Content */}\n      {footerLeftContent !== undefined && (\n        <Box\n          sx={{\n            position: 'absolute',\n            top: `${centerY * 2 * 0.83}px`,\n            left: `${centerX - centerX / 2}px`, // shift left from center\n            transform: 'translate(-50%, -50%)',\n            textAlign: 'left',\n          }}\n        >\n          <P variant=\"body1\">{footerLeftContent}</P>\n        </Box>\n      )}\n\n      {/* Right Footer Content */}\n      {footerRightContent !== undefined && (\n        <Box\n          sx={{\n            position: 'absolute',\n            top: `${centerY * 2 * 0.83}px`,\n            left: `${centerX + centerX / 2}px`,\n            transform: 'translate(-50%, -50%)',\n            textAlign: 'right',\n          }}\n        >\n          <P variant=\"body1\">{footerRightContent}</P>\n        </Box>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":"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"}

package/dist/finstrong/components/shared/DoubleBarChart/index.es.js

@@ -0,0 +1,196 @@
+import { formatCurrency as y } from "../../../../core/utils/NumberFormatting/index.es.js";
+import { getMonthName as S } from "../../../util/finstrongUtils/index.es.js";
+import { CustomDoubleBarPlot as _ } from "../CustomDoubleBarPlot/index.es.js";
+import D from "react";
+import a from "@mui/material/Stack";
+import { H3 as I, Text as c } from "@mxenabled/mxui";
+import B from "@mui/material/Button";
+import { ChevronRight as R } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import { useTheme as T } from "@mui/material/styles";
+import b from "@mui/material/Box";
+import j from "@mui/material/useMediaQuery";
+import z from "@mui/material/Card";
+import { BarPlot as K } from "@mui/x-charts/BarChart";
+import { ChartContainer as L } from "@mui/x-charts/ChartContainer";
+import { ChartsXAxis as N } from "@mui/x-charts/ChartsXAxis";
+import { ChartsYAxis as P } from "@mui/x-charts/ChartsYAxis";
+var l = (n, s = 1e3) => y(n, Math.abs(n) >= s ? "0.[0]a" : "0"), et = ({ chartFor: n, data: s, title: M, buttonLabel: d, onClick: g, legendLabelMain: C, legendLabelComparison: k, totalComparison: p, totalMain: h }) => {
+  const i = T(), x = j(i.breakpoints.down("xs")), m = D.useMemo(() => s.sort((t, o) => t.year !== o.year ? t.year - o.year : t.month - o.month).map((t) => ({
+    label: S(t.month),
+    ...{
+      spending_vs_income: {
+        main: t.standard_spend,
+        comparison: t.income,
+        formattedMain: l(t.standard_spend),
+        formattedComparison: l(t.income)
+      },
+      debt_payment_vs_income: {
+        main: t.income,
+        comparison: t.debt_spend,
+        formattedMain: l(t.income),
+        formattedComparison: l(t.debt_spend)
+      }
+    }[n]
+  })), [s, n]), A = {
+    dataKey: "label",
+    scaleType: "band"
+  }, f = Math.max(...m.map((t) => Math.max(t.main, t.comparison))), u = Math.min(...m.map((t) => Math.min(t.main, t.comparison))) === 0 && f === 0 ? 100 : Math.ceil(f * 1.2 / 1e3) * 1e3, v = {
+    scaleType: "linear",
+    min: 0,
+    max: u,
+    tickNumber: 4,
+    tickMinStep: u / 3,
+    valueFormatter: (t) => t === 0 ? "$0" : y(t, "0.[0]a")
+  };
+  return /* @__PURE__ */ e(z, { children: [/* @__PURE__ */ e(a, {
+    sx: {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: 12,
+      justifyContent: "space-between",
+      pb: 8,
+      pt: 16,
+      px: 16
+    },
+    children: [/* @__PURE__ */ r(I, { children: M }), d && /* @__PURE__ */ r(B, {
+      endIcon: /* @__PURE__ */ r(R, {}),
+      onClick: g,
+      size: "small",
+      sx: {
+        pl: 8,
+        height: 24
+      },
+      variant: "text",
+      children: d
+    })]
+  }), /* @__PURE__ */ e(a, {
+    sx: {
+      pb: 24,
+      pl: 16,
+      pr: 24
+    },
+    children: [/* @__PURE__ */ e(a, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 24,
+        py: 4
+      },
+      children: [/* @__PURE__ */ e(a, {
+        sx: {
+          gap: 8,
+          alignItems: "center",
+          flexDirection: "row"
+        },
+        children: [/* @__PURE__ */ r(b, { sx: {
+          width: 10,
+          height: 10,
+          backgroundColor: "chartMono.chartMono3",
+          borderRadius: "2px"
+        } }), /* @__PURE__ */ e(a, {
+          sx: {
+            alignItems: "center",
+            flexDirection: "row"
+          },
+          children: [/* @__PURE__ */ e(c, {
+            variant: "subtitle2",
+            children: [C, " "]
+          }), !x && h && /* @__PURE__ */ r(c, {
+            sx: { fontWeight: 700 },
+            variant: "subtitle2",
+            children: h
+          })]
+        })]
+      }), /* @__PURE__ */ e(a, {
+        alignItems: "center",
+        direction: "row",
+        spacing: 8,
+        children: [/* @__PURE__ */ r(b, { sx: {
+          width: 10,
+          height: 10,
+          backgroundColor: "chartMono.chartMono5",
+          borderRadius: "2px"
+        } }), /* @__PURE__ */ e(a, {
+          sx: {
+            alignItems: "center",
+            flexDirection: "row"
+          },
+          children: [/* @__PURE__ */ e(c, {
+            variant: "subtitle2",
+            children: [k, " "]
+          }), !x && p && /* @__PURE__ */ r(c, {
+            sx: { fontWeight: 700 },
+            variant: "subtitle2",
+            children: p
+          })]
+        })]
+      })]
+    }), /* @__PURE__ */ e(L, {
+      colors: [`${i.palette.chartMono.chartMono3}`, `${i.palette.chartMono.chartMono5}`],
+      dataset: m,
+      height: 240,
+      margin: {
+        top: 14,
+        bottom: 10,
+        right: 2,
+        left: -2
+      },
+      series: [{
+        dataKey: "main",
+        type: "bar"
+      }, {
+        dataKey: "comparison",
+        type: "bar"
+      }],
+      xAxis: [A],
+      yAxis: [v],
+      children: [
+        /* @__PURE__ */ r(K, { slots: { bar: (t) => {
+          const { ownerState: o, ...w } = t;
+          return /* @__PURE__ */ r(_, {
+            ...w,
+            color: o.color,
+            data: m,
+            series: {
+              index: o.dataIndex,
+              type: Number(o.id.toString().split("-").pop())
+            },
+            style: {
+              x: t.x,
+              y: t.y,
+              width: t.width
+            }
+          });
+        } } }),
+        /* @__PURE__ */ r(N, {
+          sx: () => ({
+            ".MuiChartsAxis-line": { stroke: i.palette.divider },
+            ".MuiChartsAxis-tick": { stroke: i.palette.divider },
+            ".MuiChartsAxis-tickLabel": { transform: "translateY(10px)" }
+          }),
+          tickLabelStyle: {
+            fontSize: 11,
+            fill: "text.secondary"
+          }
+        }),
+        /* @__PURE__ */ r(P, {
+          sx: () => ({
+            ".MuiChartsAxis-line": { stroke: i.palette.divider },
+            ".MuiChartsAxis-tick": { stroke: i.palette.divider },
+            ".MuiChartsAxis-tickLabel": { transform: "translateX(-8px)" }
+          }),
+          tickLabelStyle: {
+            fontSize: 11,
+            fill: "text.secondary"
+          }
+        })
+      ]
+    })]
+  })] });
+};
+export {
+  et as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/shared/DoubleBarChart/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/DoubleBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport useMediaQuery from '@mui/material/useMediaQuery'\nimport { useTheme } from '@mui/material/styles'\n\nimport { BarPlot } from '@mui/x-charts/BarChart'\nimport { ChartContainer as ResponsiveChartContainer } from '@mui/x-charts/ChartContainer'\nimport { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'\nimport { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'\nimport type { DatasetType } from '@mui/x-charts/internals'\n\nimport { H3, Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { getMonthName } from '../../util/finstrongUtils'\n\nimport { CustomDoubleBarPlot } from './CustomDoubleBarPlot'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\nexport interface FinancialData {\n  year: number\n  month: number\n  standard_spend: number\n  income: number\n  debt_spend: number\n}\n\nexport interface ChartDataPoint {\n  label: string\n  main: number\n  comparison: number\n  formattedMain: string\n  formattedComparison: string\n  [key: string]: string | number\n}\n\nexport interface DoubleBarChartProps {\n  chartFor: 'spending_vs_income' | 'debt_payment_vs_income'\n  data: FinancialData[]\n  title: string\n  buttonLabel?: string\n  legendLabelMain: string\n  legendLabelComparison: string\n  onClick?: () => void\n  totalMain?: string\n  totalComparison?: string\n}\n\n/**\n * Formats a number as currency.\n * - Rounds small values.\n * - Abbreviates large values (e.g., 1.2k, 3.4M) above the threshold.\n *\n * @param amount - The number to format.\n * @param threshold - Value above which abbreviation is applied (default: 1000).\n * @returns Formatted currency string.\n */\nconst formatCurrencyCompact = (amount: number, threshold: number = 1000): string => {\n  const format = Math.abs(amount) >= threshold ? '0.[0]a' : '0'\n  return formatCurrency(amount, format)\n}\n\nconst DoubleBarChart: React.FC<DoubleBarChartProps> = ({\n  chartFor,\n  data,\n  title,\n  buttonLabel,\n  onClick,\n  legendLabelMain,\n  legendLabelComparison,\n  totalComparison,\n  totalMain,\n}) => {\n  const theme = useTheme()\n  const isSmallMobile = useMediaQuery(theme.breakpoints.down('xs'))\n\n  // Transform financial data to chart format\n  const chartData: ChartDataPoint[] = React.useMemo(\n    () =>\n      data\n        .sort((a, b) => {\n          // Sort by year first, then by month\n          if (a.year !== b.year) {\n            return a.year - b.year\n          }\n          return a.month - b.month\n        })\n        .map((item) => {\n          const monthName = getMonthName(item.month)\n\n          const chartConfig = {\n            spending_vs_income: {\n              main: item.standard_spend,\n              comparison: item.income,\n              formattedMain: formatCurrencyCompact(item.standard_spend),\n              formattedComparison: formatCurrencyCompact(item.income),\n            },\n            debt_payment_vs_income: {\n              main: item.income,\n              comparison: item.debt_spend,\n              formattedMain: formatCurrencyCompact(item.income),\n              formattedComparison: formatCurrencyCompact(item.debt_spend),\n            },\n          }\n\n          return {\n            label: monthName,\n            ...chartConfig[chartFor],\n          }\n        }),\n    [data, chartFor],\n  )\n\n  const xAxis = {\n    dataKey: 'label',\n    scaleType: 'band' as const,\n  }\n\n  // Dynamic Y-axis scaling\n  const maxValue = Math.max(...chartData.map((item) => Math.max(item.main, item.comparison)))\n  const minValue = Math.min(...chartData.map((item) => Math.min(item.main, item.comparison)))\n\n  // If both min and max values are 0, set max to 100\n  const yAxisMax =\n    minValue === 0 && maxValue === 0 ? 100 : Math.ceil((maxValue * 1.2) / 1000) * 1000\n  const tickStep = yAxisMax / 3\n\n  const yAxis = {\n    scaleType: 'linear' as const,\n    min: 0,\n    max: yAxisMax,\n    tickNumber: 4,\n    tickMinStep: tickStep,\n    valueFormatter: (value: number) => {\n      if (value === 0) return '$0'\n      return formatCurrency(value, '0.[0]a')\n    },\n  }\n\n  return (\n    <Card>\n      <Stack\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          gap: 12,\n          justifyContent: 'space-between',\n          pb: 8,\n          pt: 16,\n          px: 16,\n        }}\n      >\n        <H3>{title}</H3>\n        {buttonLabel && (\n          <Button\n            endIcon={<ChevronRight />}\n            onClick={onClick}\n            size=\"small\"\n            sx={{\n              pl: 8,\n              height: 24,\n            }}\n            variant=\"text\"\n          >\n            {buttonLabel}\n          </Button>\n        )}\n      </Stack>\n\n      <Stack sx={{ pb: 24, pl: 16, pr: 24 }}>\n        {/* Legend */}\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 24, py: 4 }}>\n          <Stack sx={{ gap: 8, alignItems: 'center', flexDirection: 'row' }}>\n            <Box\n              sx={{\n                width: 10,\n                height: 10,\n                backgroundColor: 'chartMono.chartMono3',\n                borderRadius: '2px',\n              }}\n            />\n            <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n              <Text variant=\"subtitle2\">{legendLabelMain}&nbsp;</Text>\n              {!isSmallMobile && totalMain && (\n                <Text sx={{ fontWeight: 700 }} variant=\"subtitle2\">\n                  {totalMain}\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n\n          <Stack alignItems=\"center\" direction=\"row\" spacing={8}>\n            <Box\n              sx={{\n                width: 10,\n                height: 10,\n                backgroundColor: 'chartMono.chartMono5',\n                borderRadius: '2px',\n              }}\n            />\n            <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n              <Text variant=\"subtitle2\">{legendLabelComparison}&nbsp;</Text>\n              {!isSmallMobile && totalComparison && (\n                <Text sx={{ fontWeight: 700 }} variant=\"subtitle2\">\n                  {totalComparison}\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n\n        <ResponsiveChartContainer\n          colors={[\n            `${theme.palette.chartMono.chartMono3}`,\n            `${theme.palette.chartMono.chartMono5}`,\n          ]}\n          dataset={chartData as DatasetType}\n          height={240}\n          margin={{ top: 14, bottom: 10, right: 2, left: -2 }}\n          series={[\n            { dataKey: 'main', type: 'bar' as const },\n            { dataKey: 'comparison', type: 'bar' as const },\n          ]}\n          xAxis={[xAxis]}\n          yAxis={[yAxis]}\n        >\n          <BarPlot\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomDoubleBarPlot\n                    {...defaultProps}\n                    color={ownerState.color}\n                    data={chartData as any}\n                    series={{\n                      index: ownerState.dataIndex,\n                      type: Number(ownerState.id.toString().split('-').pop()),\n                    }}\n                    style={{\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n\n          <ChartsXAxis\n            sx={() => ({\n              '.MuiChartsAxis-line': {\n                stroke: theme.palette.divider,\n              },\n              '.MuiChartsAxis-tick': {\n                stroke: theme.palette.divider,\n              },\n              '.MuiChartsAxis-tickLabel': {\n                transform: 'translateY(10px)',\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n              fill: 'text.secondary',\n            }}\n          />\n          <ChartsYAxis\n            sx={() => ({\n              '.MuiChartsAxis-line': {\n                stroke: theme.palette.divider,\n              },\n              '.MuiChartsAxis-tick': {\n                stroke: theme.palette.divider,\n              },\n              '.MuiChartsAxis-tickLabel': {\n                transform: 'translateX(-8px)',\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n              fill: 'text.secondary',\n            }}\n          />\n        </ResponsiveChartContainer>\n      </Stack>\n    </Card>\n  )\n}\n\nexport default DoubleBarChart\n"],"mappings":"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"}