@mx-cartographer/experiences 9.3.0-alpha.bb1 → 9.3.0-alpha.bb2

package/dist/insights/components/shared/Charts/BarChart/ChartLegend.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/ChartLegend.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface LegendProps {\n  average?: string\n  color: string\n  legendLabelAvg?: string\n  legendLabelMain?: string\n  legendStyle?: SxProps\n}\n\nexport const Legend = ({\n  average,\n  color,\n  legendLabelAvg,\n  legendLabelMain,\n  legendStyle = {},\n}: LegendProps) => (\n  <Stack\n    sx={{\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: 16,\n      justifyContent: 'flex-end',\n      width: '100%',\n      ...legendStyle,\n    }}\n  >\n    {legendLabelMain && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <svg\n          aria-hidden=\"true\"\n          aria-labelledby=\"chartLegendLabel\"\n          fill=\"none\"\n          height=\"6\"\n          role=\"figure\"\n          width=\"7\"\n        >\n          <rect fill={color} height=\"6\" rx=\"2\" width=\"6\" x=\"0.4375\" />\n        </svg>\n        <Text id=\"chartLegendLabel\" sx={{ fontSize: 11, fontWeight: 400 }} variant=\"caption\">\n          {legendLabelMain}\n        </Text>\n      </Stack>\n    )}\n\n    {average && legendLabelAvg && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <Stack\n          sx={{\n            flexDirection: 'row',\n            gap: 2,\n          }}\n        >\n          {[...Array(3)].map((_, i) => (\n            <Box\n              key={i}\n              sx={{\n                width: 3,\n                height: 3,\n                borderRadius: 4,\n                backgroundColor: 'secondary.lighter',\n              }}\n            />\n          ))}\n        </Stack>\n        <Text sx={{ fontSize: 11, fontWeight: 400, ml: 0 }} variant=\"caption\">\n          {legendLabelAvg}: {average}\n        </Text>\n      </Stack>\n    )}\n  </Stack>\n)\n"],"mappings":";;;;AAcA,IAAa,IAAA,CAAU,EACrB,SAAA,GACA,OAAA,GACA,gBAAA,GACA,iBAAA,GACA,aAAA,IAAc,CAAC,EAAA,MAEf,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,YARF,CAUG,KACC,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,cAApD,CACE,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,mBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,gBAEN,gBAAA,EAAC,QAAD;AAAA,QAAM,MAAM;AAAA,QAAO,QAAO;AAAA,QAAI,IAAG;AAAA,QAAI,OAAM;AAAA,QAAI,GAAE;AAAA,MAAU,CAAA;AAAA,IACxD,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAG;AAAA,MAAmB,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,MAAI;AAAA,MAAG,SAAQ;AAAA,gBACxE;AAAA,IACG,CAAA,CACD;AAAA,MAGR,KAAW,KACV,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,cAApD,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,eAAe;AAAA,QACf,KAAK;AAAA,MACP;AAAA,gBAEC,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAA,CAAK,GAAG,MACrB,gBAAA,EAAC,GAAD,EAEE,IAAI;AAAA,QACF,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,MACnB,EACD,GAPM,CAON,CACF;AAAA,IACI,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,QAAK,IAAI;AAAA,MAAE;AAAA,MAAG,SAAQ;AAAA,gBAA5D;AAAA,QACG;AAAA,QAAe;AAAA,QAAG;AAAA,MACf;AAAA,MACD;AAAA,IAEJ"}

package/dist/insights/components/shared/Charts/BarChart/ChartLegendV2.es.js

@@ -0,0 +1,80 @@
+import i from "@mui/material/Stack";
+import { Text as l } from "@mxenabled/mxui";
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import { useTheme as g } from "@mui/material/styles";
+var m = ({ color: n, legendStyle: h = {}, monthlyAmount: c, monthlyAmountLabel: t, trendAmount: d, trendAmountLabel: a }) => {
+  const o = g();
+  return /* @__PURE__ */ e(i, {
+    sx: {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: 24,
+      justifyContent: "flex-start",
+      py: 4,
+      width: "100%",
+      ...h
+    },
+    children: [t && /* @__PURE__ */ e(i, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 8
+      },
+      children: [/* @__PURE__ */ r("svg", {
+        "aria-hidden": "true",
+        "aria-labelledby": "chartLegendLabel",
+        fill: "none",
+        height: "12",
+        role: "figure",
+        width: "12",
+        children: /* @__PURE__ */ r("rect", {
+          fill: n,
+          height: "12",
+          rx: "2",
+          width: "12"
+        })
+      }), /* @__PURE__ */ e(l, {
+        id: "chartLegendLabel",
+        variant: "caption",
+        children: [
+          t,
+          ": ",
+          c
+        ]
+      })]
+    }), a && /* @__PURE__ */ e(i, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 8
+      },
+      children: [/* @__PURE__ */ r("svg", {
+        "aria-hidden": "true",
+        "aria-labelledby": "chartLegendLabel",
+        fill: "none",
+        height: "12",
+        role: "figure",
+        width: "12",
+        children: /* @__PURE__ */ r("rect", {
+          fill: o.palette.chart.chart7,
+          height: "12",
+          rx: "2",
+          width: "12"
+        })
+      }), /* @__PURE__ */ e(l, {
+        id: "chartLegendLabel",
+        variant: "caption",
+        children: [
+          a,
+          ": ",
+          d
+        ]
+      })]
+    })]
+  });
+};
+export {
+  m as LegendV2
+};
+
+//# sourceMappingURL=ChartLegendV2.es.js.map

package/dist/insights/components/shared/Charts/BarChart/ChartLegendV2.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegendV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/ChartLegendV2.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface LegendV2Props {\n  color: string\n  legendStyle?: SxProps\n  monthlyAmount?: string\n  monthlyAmountLabel?: string\n  trendAmount?: string\n  trendAmountLabel?: string\n}\n\nexport const LegendV2 = ({\n  color,\n  legendStyle = {},\n  monthlyAmount,\n  monthlyAmountLabel,\n  trendAmount,\n  trendAmountLabel,\n}: LegendV2Props) => {\n  const theme = useTheme()\n\n  return (\n    <Stack\n      sx={{\n        alignItems: 'center',\n        flexDirection: 'row',\n        gap: 24,\n        justifyContent: 'flex-start',\n        py: 4,\n        width: '100%',\n        ...legendStyle,\n      }}\n    >\n      {monthlyAmountLabel && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n          <svg\n            aria-hidden=\"true\"\n            aria-labelledby=\"chartLegendLabel\"\n            fill=\"none\"\n            height=\"12\"\n            role=\"figure\"\n            width=\"12\"\n          >\n            <rect fill={color} height=\"12\" rx=\"2\" width=\"12\" />\n          </svg>\n          <Text id=\"chartLegendLabel\" variant=\"caption\">\n            {monthlyAmountLabel}: {monthlyAmount}\n          </Text>\n        </Stack>\n      )}\n\n      {trendAmountLabel && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n          <svg\n            aria-hidden=\"true\"\n            aria-labelledby=\"chartLegendLabel\"\n            fill=\"none\"\n            height=\"12\"\n            role=\"figure\"\n            width=\"12\"\n          >\n            <rect fill={theme.palette.chart.chart7} height=\"12\" rx=\"2\" width=\"12\" />\n          </svg>\n          <Text id=\"chartLegendLabel\" variant=\"caption\">\n            {trendAmountLabel}: {trendAmount}\n          </Text>\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAeA,IAAa,IAAA,CAAY,EACvB,OAAA,GACA,aAAA,IAAc,CAAC,GACf,eAAA,GACA,oBAAA,GACA,aAAA,GACA,kBAAA,EAAA,MACmB;AACnB,QAAM,IAAQ,EAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,cATF,CAWG,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,gBAAhE,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,kBAEN,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM;AAAA,UAAO,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MAC/C,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,kBAApC;AAAA,UACG;AAAA,UAAmB;AAAA,UAAG;AAAA,QACnB;AAAA,QACD;AAAA,QAGR,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,gBAAhE,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,kBAEN,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM,EAAM,QAAQ,MAAM;AAAA,UAAQ,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MACpE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,kBAApC;AAAA,UACG;AAAA,UAAiB;AAAA,UAAG;AAAA,QACjB;AAAA,QACD;AAAA,MAEJ;AAAA;AAEX"}

package/dist/insights/components/shared/Charts/BarChart/CustomBarPlot.es.js

@@ -0,0 +1,73 @@
+import { stripChartSlotProps as v } from "../../../../../common/components/charts/chartSlotProps.es.js";
+import b from "react";
+import { MerchantLogo as B } from "@mxenabled/mxui";
+import { jsx as o, jsxs as G } from "react/jsx-runtime";
+import { useTheme as S } from "@mui/material/styles";
+var M = ({ colorRange: g, data: w, dataIndex: i, removeSelectedTabColorChange: f, selectedTabIndex: c, style: t, ...s }) => {
+  const h = S(), r = b.useRef(null);
+  b.useLayoutEffect(() => {
+    const u = new ResizeObserver(() => {
+      window.requestAnimationFrame(() => {
+        if (r.current) {
+          const { width: y } = r.current.getBoundingClientRect(), R = y / 2, x = r.current.querySelector("text");
+          x && x.setAttribute("transform", `translate(${R}, -10)`);
+        }
+      });
+    });
+    return r.current && u.observe(r.current), () => {
+      r.current && u.unobserve(r.current);
+    };
+  }, []);
+  const { ariaLabel: A, category: n, categoryGuid: a, formattedAmount: z, imageSize: e, merchantGuid: d } = w[i], l = c === i ? "bold" : 400, m = 40, p = t.y ?? 0;
+  if (p < m) {
+    const u = m - p;
+    t.y = m, t.height = Math.max(0, (t.height ?? 0) - u);
+  }
+  return /* @__PURE__ */ G("g", {
+    "aria-label": A,
+    children: [
+      /* @__PURE__ */ o("rect", {
+        ...v(s),
+        fill: g[i],
+        ref: r,
+        rx: 2,
+        style: t
+      }),
+      (d || a) && /* @__PURE__ */ o("foreignObject", {
+        height: e || 32,
+        width: e || 32,
+        x: typeof t.x == "number" && typeof t.width == "number" ? t.x + t.width / 2 - (e || 32) / 2 : 0,
+        y: typeof t.y == "number" && typeof t.height == "number" ? t.y + t.height / 2 - (e || 32) / 2 : 0,
+        children: /* @__PURE__ */ o(B, {
+          alt: n,
+          categoryGuid: a || "",
+          merchantGuid: d || "",
+          size: e || 32
+        })
+      }),
+      /* @__PURE__ */ o("text", {
+        fill: h.palette.text.primary,
+        fontSize: 11,
+        fontWeight: f ? "bold" : l,
+        textAnchor: "middle",
+        x: typeof t.x == "number" && typeof t.width == "number" ? t.x + t.width / 2 : 0,
+        y: typeof t.y == "number" ? t.y - (n ? 26 : 14) : 0,
+        children: z
+      }),
+      n && /* @__PURE__ */ o("text", {
+        fill: h.palette.text.secondary,
+        fontSize: 9,
+        fontWeight: c === i && !f ? "bold" : 400,
+        textAnchor: "middle",
+        x: typeof t.x == "number" && typeof t.width == "number" ? t.x + t.width / 2 : 0,
+        y: typeof t.y == "number" ? t.y - 14 : 0,
+        children: n
+      })
+    ]
+  });
+};
+export {
+  M as CustomBarPlot
+};
+
+//# sourceMappingURL=CustomBarPlot.es.js.map

package/dist/insights/components/shared/Charts/BarChart/CustomBarPlot.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomBarPlot.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/CustomBarPlot.tsx"],"sourcesContent":["import React from 'react'\n\nimport { MerchantLogo } from '@mxenabled/mxui'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport { BarDataProps } from '../../../../types/Charts/BarChart'\nimport { stripChartSlotProps } from '../../../../../common/components/charts/chartSlotProps'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n}\nexport interface CustomBarPlotProps {\n  colorRange: string[]\n  data: BarDataProps[]\n  dataIndex: number\n  removeSelectedTabColorChange?: boolean\n  selectedTabIndex: number\n  style: BarStyleProps\n}\n\nexport const CustomBarPlot = ({\n  colorRange,\n  data,\n  dataIndex,\n  removeSelectedTabColorChange,\n  selectedTabIndex,\n  style,\n  ...restProps\n}: CustomBarPlotProps) => {\n  const theme = useTheme()\n  const rectRef = React.useRef<SVGRectElement>(null)\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}, -10)`)\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 { ariaLabel, category, categoryGuid, formattedAmount, imageSize, merchantGuid } =\n    data[dataIndex]\n\n  const shouldAmountAmountTextBeBold = selectedTabIndex === dataIndex ? 'bold' : 400\n\n  const minY = 40\n  const y = style.y ?? 0\n\n  if (y < minY) {\n    const diff = minY - y\n\n    style.y = minY\n    style.height = Math.max(0, (style.height ?? 0) - diff)\n  }\n\n  return (\n    <g aria-label={ariaLabel}>\n      <rect {...stripChartSlotProps(restProps)} fill={colorRange[dataIndex]} ref={rectRef} rx={2} style={style} />\n      {(merchantGuid || categoryGuid) && (\n        <foreignObject\n          height={imageSize || 32}\n          width={imageSize || 32}\n          x={\n            typeof style.x === 'number' && typeof style.width === 'number'\n              ? style.x + style.width / 2 - (imageSize || 32) / 2\n              : 0\n          }\n          y={\n            typeof style.y === 'number' && typeof style.height === 'number'\n              ? style.y + style.height / 2 - (imageSize || 32) / 2\n              : 0\n          }\n        >\n          <MerchantLogo\n            alt={category}\n            categoryGuid={categoryGuid || ''}\n            merchantGuid={merchantGuid || ''}\n            size={imageSize || 32}\n          />\n        </foreignObject>\n      )}\n      <text\n        fill={theme.palette.text.primary}\n        fontSize={11}\n        fontWeight={removeSelectedTabColorChange ? 'bold' : shouldAmountAmountTextBeBold}\n        textAnchor=\"middle\"\n        x={\n          typeof style.x === 'number' && typeof style.width === 'number'\n            ? style.x + style.width / 2\n            : 0\n        }\n        y={typeof style.y === 'number' ? style.y - (category ? 26 : 14) : 0}\n      >\n        {formattedAmount}\n      </text>\n      {category && (\n        <text\n          fill={theme.palette.text.secondary}\n          fontSize={9}\n          fontWeight={\n            selectedTabIndex === dataIndex && !removeSelectedTabColorChange ? 'bold' : 400\n          }\n          textAnchor=\"middle\"\n          x={\n            typeof style.x === 'number' && typeof style.width === 'number'\n              ? style.x + style.width / 2\n              : 0\n          }\n          y={typeof style.y === 'number' ? style.y - 14 : 0}\n        >\n          {category}\n        </text>\n      )}\n    </g>\n  )\n}\n"],"mappings":"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"}

package/dist/insights/components/shared/Charts/BarChart/CustomBarPlotV2.d.ts

@@ -13,6 +13,9 @@ export interface CustomBarPlotV2Props {
     removeSelectedTabColorChange?: boolean;
     selectedTabIndex: number;
     style: BarStyleProps;
+    xOrigin?: number;
+    yOrigin?: number;
+    skipAnimation?: boolean;
 }
-export declare const CustomBarPlotV2: ({ colorRange, data, dataIndex, removeSelectedTabColorChange, selectedTabIndex, style, ...restProps }: CustomBarPlotV2Props) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomBarPlotV2: ({ colorRange, data, dataIndex, removeSelectedTabColorChange, selectedTabIndex, style, xOrigin: _xOrigin, yOrigin: _yOrigin, skipAnimation: _skipAnimation, ...restProps }: CustomBarPlotV2Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/insights/components/shared/Charts/BarChart/CustomBarPlotV2.es.js

@@ -0,0 +1,32 @@
+import "react";
+import { jsx as a, jsxs as x } from "react/jsx-runtime";
+import { useTheme as p } from "@mui/material/styles";
+var g = (i, r) => {
+  if (i <= 0 || r <= 0) return "";
+  const t = Math.min(4, i / 2, r / 2);
+  return `M${t},0 L${i - t},0 Q${i},0 ${i},${t} L${i},${r} L0,${r} L0,${t} Q0,0 ${t},0 Z`;
+}, _ = ({ colorRange: i, data: r, dataIndex: t, removeSelectedTabColorChange: s, selectedTabIndex: c, style: o, xOrigin: A, yOrigin: L, skipAnimation: b, ...l }) => {
+  const h = p(), { ariaLabel: $, formattedAmount: d } = r[t], f = c === t ? "bold" : 400, n = o.x ?? 0, e = o.y ?? 0, m = o.width ?? 0, u = o.height ?? 0;
+  return /* @__PURE__ */ x("g", {
+    "aria-label": $,
+    children: [/* @__PURE__ */ a("path", {
+      ...l,
+      d: g(m, u),
+      fill: i[t],
+      transform: `translate(${n}, ${e})`
+    }), /* @__PURE__ */ a("text", {
+      fill: h.palette.text.primary,
+      fontSize: 11,
+      fontWeight: s ? "bold" : f,
+      textAnchor: "middle",
+      x: n + m / 2,
+      y: e - 8,
+      children: d
+    })]
+  });
+};
+export {
+  _ as CustomBarPlotV2
+};
+
+//# sourceMappingURL=CustomBarPlotV2.es.js.map

package/dist/insights/components/shared/Charts/BarChart/CustomBarPlotV2.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomBarPlotV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/CustomBarPlotV2.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport type { BarDataProps } from '../../../../types/Charts/BarChart'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n}\n\nexport interface CustomBarPlotV2Props {\n  colorRange: string[]\n  data: BarDataProps[]\n  dataIndex: number\n  removeSelectedTabColorChange?: boolean\n  selectedTabIndex: number\n  style: BarStyleProps\n  // Non-DOM props forwarded by the x-charts BarPlot `bar` slot; declared so we\n  // can destructure them out before spreading restProps onto <path>.\n  xOrigin?: number\n  yOrigin?: number\n  skipAnimation?: boolean\n}\n\nconst createRoundedRectPath = (w: number, h: number) => {\n  if (w <= 0 || h <= 0) return ''\n\n  const r = Math.min(4, w / 2, h / 2)\n  return `M${r},0 L${w - r},0 Q${w},0 ${w},${r} L${w},${h} L0,${h} L0,${r} Q0,0 ${r},0 Z`\n}\n\nexport const CustomBarPlotV2 = ({\n  colorRange,\n  data,\n  dataIndex,\n  removeSelectedTabColorChange,\n  selectedTabIndex,\n  style,\n  // Non-DOM props forwarded by the @mui/x-charts BarPlot `bar` slot. They are\n  // not valid SVG attributes, so pull them out of restProps before spreading\n  // onto <path> to avoid React \"does not recognize the prop\" warnings.\n  xOrigin: _xOrigin,\n  yOrigin: _yOrigin,\n  skipAnimation: _skipAnimation,\n  ...restProps\n}: CustomBarPlotV2Props) => {\n  const theme = useTheme()\n\n  const { ariaLabel, formattedAmount } = data[dataIndex]\n\n  const shouldAmountAmountTextBeBold = selectedTabIndex === dataIndex ? 'bold' : 400\n\n  const x = style.x ?? 0\n  const y = style.y ?? 0\n  const width = style.width ?? 0\n  const height = style.height ?? 0\n\n  return (\n    <g aria-label={ariaLabel}>\n      <path\n        {...restProps}\n        d={createRoundedRectPath(width, height)}\n        fill={colorRange[dataIndex]}\n        transform={`translate(${x}, ${y})`}\n      />\n      <text\n        fill={theme.palette.text.primary}\n        fontSize={11}\n        fontWeight={removeSelectedTabColorChange ? 'bold' : shouldAmountAmountTextBeBold}\n        textAnchor=\"middle\"\n        x={x + width / 2}\n        y={y - 8}\n      >\n        {formattedAmount}\n      </text>\n    </g>\n  )\n}\n"],"mappings":";;;AA2BA,IAAM,IAAA,CAAyB,GAAW,MAAc;AACtD,MAAI,KAAK,KAAK,KAAK,EAAG,QAAO;AAE7B,QAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAClC,SAAO,IAAI,CAAA,OAAQ,IAAI,CAAA,OAAQ,CAAA,MAAO,CAAA,IAAK,CAAA,KAAM,CAAA,IAAK,CAAA,OAAQ,CAAA,OAAQ,CAAA,SAAU,CAAA;AAClF,GAEa,IAAA,CAAmB,EAC9B,YAAA,GACA,MAAA,GACA,WAAA,GACA,8BAAA,GACA,kBAAA,GACA,OAAA,GAIA,SAAS,GACT,SAAS,GACT,eAAe,GACf,GAAG,EAAA,MACuB;AAC1B,QAAM,IAAQ,EAAS,GAEjB,EAAE,WAAA,GAAW,iBAAA,EAAA,IAAoB,EAAK,CAAA,GAEtC,IAA+B,MAAqB,IAAY,SAAS,KAEzE,IAAI,EAAM,KAAK,GACf,IAAI,EAAM,KAAK,GACf,IAAQ,EAAM,SAAS,GACvB,IAAS,EAAM,UAAU;AAE/B,SACE,gBAAA,EAAC,KAAD;AAAA,IAAG,cAAY;AAAA,cAAf,CACE,gBAAA,EAAC,QAAD;AAAA,MACE,GAAI;AAAA,MACJ,GAAG,EAAsB,GAAO,CAAM;AAAA,MACtC,MAAM,EAAW,CAAA;AAAA,MACjB,WAAW,aAAa,CAAA,KAAM,CAAA;AAAA,IAC/B,CAAA,GACD,gBAAA,EAAC,QAAD;AAAA,MACE,MAAM,EAAM,QAAQ,KAAK;AAAA,MACzB,UAAU;AAAA,MACV,YAAY,IAA+B,SAAS;AAAA,MACpD,YAAW;AAAA,MACX,GAAG,IAAI,IAAQ;AAAA,MACf,GAAG,IAAI;AAAA,gBAEN;AAAA,IACG,CAAA,CACL;AAAA;AAEP"}

package/dist/insights/components/shared/Charts/BarChart/CustomDoubleBarPlot.es.js

@@ -0,0 +1,52 @@
+import { stripChartSlotProps as S } from "../../../../../common/components/charts/chartSlotProps.es.js";
+import r from "react";
+import { jsx as i, jsxs as g } from "react/jsx-runtime";
+import { useTheme as A } from "@mui/material/styles";
+var j = ({ color: s, data: c, series: n, style: e, ...u }) => {
+  const f = A(), t = r.useRef(null), l = r.useRef(null), [m, 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: C } = t.current.getBoundingClientRect(), L = C / 2, a = t.current.querySelector("text");
+          a && a.setAttribute("transform", `translate(${L}, -8)`);
+        }
+      });
+    });
+    return t.current && o.observe(t.current), () => {
+      t.current && o.unobserve(t.current);
+    };
+  }, []);
+  const { ariaLabelComparison: x, ariaLabelMain: h, formattedComparison: p, formattedMain: b } = c[n.index], w = n.type === 0 ? h : x, R = n.type === 0 ? b : p, y = {
+    ...e,
+    transition: "all 0.3s ease-in-out"
+  }, v = `translate(${m / 2}, -5)`;
+  return /* @__PURE__ */ g("g", {
+    "aria-label": w,
+    children: [/* @__PURE__ */ i("rect", {
+      ...S(u),
+      fill: s,
+      ref: t,
+      rx: 2,
+      style: y
+    }), /* @__PURE__ */ i("text", {
+      fill: f.palette.text.secondary,
+      fontSize: 11,
+      fontWeight: 400,
+      ref: l,
+      style: { transition: "transform 0.3s ease-in-out" },
+      textAnchor: "middle",
+      transform: v,
+      x: e.x,
+      y: e.y,
+      children: R
+    })]
+  });
+};
+export {
+  j as CustomDoubleBarPlot
+};
+
+//# sourceMappingURL=CustomDoubleBarPlot.es.js.map

package/dist/insights/components/shared/Charts/BarChart/CustomDoubleBarPlot.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomDoubleBarPlot.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/CustomDoubleBarPlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { DataSet } from '../../../../types/Charts/BarChart'\nimport { stripChartSlotProps } from '../../../../../common/components/charts/chartSlotProps'\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 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 { ariaLabelComparison, ariaLabelMain, formattedComparison, formattedMain } =\n    data[series.index]\n\n  const ariaLabel = series.type === 0 ? ariaLabelMain : ariaLabelComparison\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 aria-label={ariaLabel}>\n      <rect {...stripChartSlotProps(restProps)} fill={color} ref={rectRef} rx={2} style={rectStyle} />\n      <text\n        fill={theme.palette.text.secondary}\n        fontSize={11}\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":";;;;AAuBA,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,GAAe,qBAAA,GAAqB,eAAA,EAAA,IAC/D,EAAK,EAAO,KAAA,GAER,IAAY,EAAO,SAAS,IAAI,IAAgB,GAChD,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;AAAA,IAAG,cAAY;AAAA,cAAf,CACE,gBAAA,EAAC,QAAD;AAAA,MAAM,GAAI,EAAoB,CAAS;AAAA,MAAG,MAAM;AAAA,MAAO,KAAK;AAAA,MAAS,IAAI;AAAA,MAAG,OAAO;AAAA,IAAY,CAAA,GAC/F,gBAAA,EAAC,QAAD;AAAA,MACE,MAAM,EAAM,QAAQ,KAAK;AAAA,MACzB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,OAAO,EAAE,YAAY,6BAA6B;AAAA,MAClD,YAAW;AAAA,MACX,WAAW;AAAA,MACX,GAAG,EAAM;AAAA,MACT,GAAG,EAAM;AAAA,gBAER;AAAA,IACG,CAAA,CACL;AAAA;AAEP"}

package/dist/insights/components/shared/Charts/BarChart/CustomDoubleBarPlotMXUI.es.js

@@ -0,0 +1,46 @@
+import { stripChartSlotProps as w } from "../../../../../common/components/charts/chartSlotProps.es.js";
+import $ from "react";
+import { jsx as l } from "react/jsx-runtime";
+var M = ({ color: h, data: p, series: i, style: n, ...f }) => {
+  const e = $.useRef(null);
+  $.useLayoutEffect(() => {
+    const c = new ResizeObserver(() => {
+      window.requestAnimationFrame(() => {
+        if (e.current) {
+          const { width: g } = e.current.getBoundingClientRect(), v = g / 2, u = e.current.querySelector("text");
+          u && u.setAttribute("transform", `translate(${v}, -8)`);
+        }
+      });
+    });
+    return e.current && c.observe(e.current), () => {
+      e.current && c.unobserve(e.current);
+    };
+  }, []);
+  const { ariaLabelComparison: m, ariaLabelMain: b } = p[i.index], d = i.type === 0 ? b : m, L = {
+    ...n,
+    transition: "all 0.3s ease-in-out"
+  }, o = n.width || 0, s = n.height || 0, t = n.x || 0, r = n.y || 0, a = 4, x = `
+    M ${t + a},${r}
+    L ${t + o - a},${r}
+    Q ${t + o},${r} ${t + o},${r + a}
+    L ${t + o},${r + s}
+    L ${t},${r + s}
+    L ${t},${r + a}
+    Q ${t},${r} ${t + a},${r}
+    Z
+  `.trim();
+  return /* @__PURE__ */ l("g", {
+    "aria-label": d,
+    children: /* @__PURE__ */ l("path", {
+      ...w(f),
+      d: x,
+      fill: h,
+      style: L
+    })
+  });
+};
+export {
+  M as CustomDoubleBarPlotMXUI
+};
+
+//# sourceMappingURL=CustomDoubleBarPlotMXUI.es.js.map

package/dist/insights/components/shared/Charts/BarChart/CustomDoubleBarPlotMXUI.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomDoubleBarPlotMXUI.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/CustomDoubleBarPlotMXUI.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { DataSet } from '../../../../types/Charts/BarChart'\nimport { stripChartSlotProps } from '../../../../../common/components/charts/chartSlotProps'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n}\n\ninterface CustomDoubleBarPlotMXUIProps {\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 const CustomDoubleBarPlotMXUI = ({\n  color,\n  data,\n  series,\n  style,\n  ...restProps\n}: CustomDoubleBarPlotMXUIProps) => {\n  const rectRef = React.useRef<SVGRectElement>(null)\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 { ariaLabelComparison, ariaLabelMain } = data[series.index]\n\n  const ariaLabel = series.type === 0 ? ariaLabelMain : ariaLabelComparison\n\n  const rectStyle = {\n    ...style,\n    transition: 'all 0.3s ease-in-out',\n  }\n\n  // Create path with rounded top corners (10px radius) and square bottom corners\n  const pathBarWidth = (style.width as number) || 0\n  const pathBarHeight = (style.height as number) || 0\n  const pathX = (style.x as number) || 0\n  const pathY = (style.y as number) || 0\n  const radius = 4\n\n  const pathData = `\n    M ${pathX + radius},${pathY}\n    L ${pathX + pathBarWidth - radius},${pathY}\n    Q ${pathX + pathBarWidth},${pathY} ${pathX + pathBarWidth},${pathY + radius}\n    L ${pathX + pathBarWidth},${pathY + pathBarHeight}\n    L ${pathX},${pathY + pathBarHeight}\n    L ${pathX},${pathY + radius}\n    Q ${pathX},${pathY} ${pathX + radius},${pathY}\n    Z\n  `.trim()\n\n  return (\n    <g aria-label={ariaLabel}>\n      <path {...stripChartSlotProps(restProps)} d={pathData} fill={color} style={rectStyle} />\n    </g>\n  )\n}\n"],"mappings":";;;AAsBA,IAAa,IAAA,CAA2B,EACtC,OAAA,GACA,MAAA,GACA,QAAA,GACA,OAAA,GACA,GAAG,EAAA,MAC+B;AAClC,QAAM,IAAU,EAAM,OAAuB,IAAI;AAEjD,EAAA,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,IAAY,EAAO,SAAS,IAAI,IAAgB,GAEhD,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,YAAY;AAAA,EACd,GAGM,IAAgB,EAAM,SAAoB,GAC1C,IAAiB,EAAM,UAAqB,GAC5C,IAAS,EAAM,KAAgB,GAC/B,IAAS,EAAM,KAAgB,GAC/B,IAAS,GAET,IAAW;AAAA,QACX,IAAQ,CAAA,IAAU,CAAA;AAAA,QAClB,IAAQ,IAAe,CAAA,IAAU,CAAA;AAAA,QACjC,IAAQ,CAAA,IAAgB,CAAA,IAAS,IAAQ,CAAA,IAAgB,IAAQ,CAAA;AAAA,QACjE,IAAQ,CAAA,IAAgB,IAAQ,CAAA;AAAA,QAChC,CAAA,IAAS,IAAQ,CAAA;AAAA,QACjB,CAAA,IAAS,IAAQ,CAAA;AAAA,QACjB,CAAA,IAAS,CAAA,IAAS,IAAQ,CAAA,IAAU,CAAA;AAAA;AAAA,IAExC,KAAK;AAEP,SACE,gBAAA,EAAC,KAAD;AAAA,IAAG,cAAY;AAAA,cACb,gBAAA,EAAC,QAAD;AAAA,MAAM,GAAI,EAAoB,CAAS;AAAA,MAAG,GAAG;AAAA,MAAU,MAAM;AAAA,MAAO,OAAO;AAAA,IAAY,CAAA;AAAA,EACtF,CAAA;AAEP"}

package/dist/insights/components/shared/Charts/BarChart/DoubleBarChart.es.js

@@ -0,0 +1,118 @@
+import { useContainerDimensions as k } from "../../../../hooks/useContainerDimensions.es.js";
+import { CustomDoubleBarPlot as C } from "./CustomDoubleBarPlot.es.js";
+import { DoubleBarChartLegend as S } from "./DoubleBarChartLegend.es.js";
+import w from "react";
+import A from "@mui/material/Stack";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { useTheme as B } from "@mui/material/styles";
+import D from "@mui/material/Box";
+import { BarPlot as v, ChartContainer as I, ChartsReferenceLine as R, ChartsXAxis as T } from "@mui/x-charts";
+var q = ({ amounts: n, barGapRatio: u = 0, categoryGapRatio: y = 0.2, colors: i, data: s, isMini: l = !1, legendLabelComparison: h, legendLabelMain: c, margin: a = {
+  bottom: 30,
+  left: 40,
+  right: 40,
+  top: 20
+}, onBarClick: f }) => {
+  const m = B(), d = w.useRef(null), { height: x, width: b } = k(d), g = ({ dataIndex: t, seriesId: e }) => {
+    const o = e.toString().split("-").pop();
+    f?.(t * 2 + Number(o));
+  };
+  return /* @__PURE__ */ p(A, {
+    alignItems: "center",
+    sx: {
+      mb: l ? 16 : 24,
+      width: "100%"
+    },
+    children: [/* @__PURE__ */ r(D, {
+      ref: d,
+      sx: {
+        height: l ? 120 : 172,
+        mb: 8,
+        touchAction: "pan-y",
+        width: "100%",
+        "& svg": {
+          touchAction: "pan-y",
+          userSelect: "none"
+        },
+        "& .recharts-wrapper": { touchAction: "pan-y" }
+      },
+      children: /* @__PURE__ */ p(I, {
+        colors: i,
+        dataset: s,
+        height: x,
+        margin: a,
+        series: [{
+          dataKey: "main",
+          type: "bar"
+        }, {
+          dataKey: "comparison",
+          type: "bar"
+        }],
+        width: b,
+        xAxis: [{
+          barGapRatio: u,
+          categoryGapRatio: y,
+          dataKey: "label",
+          scaleType: "band"
+        }],
+        yAxis: [{ width: 0 }],
+        children: [
+          n?.average && /* @__PURE__ */ r(R, {
+            labelAlign: "middle",
+            lineStyle: {
+              stroke: m.palette.neutral?.dark,
+              strokeDasharray: "0.1 5.9",
+              strokeLinecap: "round",
+              strokeWidth: 2
+            },
+            y: n?.average
+          }),
+          /* @__PURE__ */ r(T, {
+            disableTicks: !0,
+            sx: (t) => ({ ".MuiChartsAxis-line": { stroke: t.palette.neutral?.dark } }),
+            tickLabelStyle: {
+              fontSize: 11,
+              fill: m.palette.text.secondary,
+              fontWeight: 400
+            }
+          }),
+          /* @__PURE__ */ r(v, {
+            onItemClick: (t, { dataIndex: e, seriesId: o }) => g({
+              dataIndex: e,
+              seriesId: o.toString()
+            }),
+            slots: { bar: (t) => {
+              const { ownerState: e, ...o } = t;
+              return /* @__PURE__ */ r(C, {
+                ...o,
+                color: e.color,
+                data: s,
+                series: {
+                  index: e.dataIndex,
+                  type: Number(e.id.toString().split("-").pop())
+                },
+                style: {
+                  height: t.height,
+                  x: t.x,
+                  y: t.y,
+                  width: t.width
+                }
+              });
+            } }
+          })
+        ]
+      })
+    }), (h || c) && /* @__PURE__ */ r(S, {
+      comparisonColor: i[1],
+      legendLabelComparison: h,
+      legendLabelMain: c,
+      legendStyle: { mr: a.left + a.right },
+      mainColor: i[0]
+    })]
+  });
+};
+export {
+  q as DoubleBarChart
+};
+
+//# sourceMappingURL=DoubleBarChart.es.js.map

package/dist/insights/components/shared/Charts/BarChart/DoubleBarChart.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleBarChart.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/DoubleBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type Theme, useTheme } from '@mui/material/styles'\nimport { BarPlot, ChartContainer, ChartsReferenceLine, ChartsXAxis } from '@mui/x-charts'\nimport { useContainerDimensions } from '../../../../hooks/useContainerDimensions'\n\nimport { DataSet, DoubleBarChartProps } from '../../../../types/Charts/BarChart'\n\nimport { CustomDoubleBarPlot } from './CustomDoubleBarPlot'\nimport { DoubleBarChartLegend } from './DoubleBarChartLegend'\n\nexport const DoubleBarChart = ({\n  amounts,\n  barGapRatio = 0,\n  categoryGapRatio = 0.2,\n  colors,\n  data,\n  isMini = false,\n  legendLabelComparison,\n  legendLabelMain,\n  margin = {\n    bottom: 30,\n    left: 40,\n    right: 40,\n    top: 20,\n  },\n  onBarClick,\n}: DoubleBarChartProps) => {\n  const theme = useTheme()\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n\n  const handleBarClick = ({ dataIndex, seriesId }: { dataIndex: number; seriesId: string }) => {\n    const seriesType = seriesId.toString().split('-').pop()\n    onBarClick?.(dataIndex * 2 + Number(seriesType))\n  }\n\n  return (\n    <Stack alignItems=\"center\" sx={{ mb: isMini ? 16 : 24, width: '100%' }}>\n      <Box\n        ref={containerRef}\n        sx={{\n          height: isMini ? 120 : 172,\n          mb: 8,\n          touchAction: 'pan-y',\n          width: '100%',\n          '& svg': {\n            touchAction: 'pan-y',\n            userSelect: 'none',\n          },\n          '& .recharts-wrapper': {\n            touchAction: 'pan-y',\n          },\n        }}\n      >\n        <ChartContainer\n          colors={colors}\n          dataset={data as any[]}\n          height={height}\n          margin={margin}\n          series={[\n            { dataKey: 'main', type: 'bar' },\n            { dataKey: 'comparison', type: 'bar' },\n          ]}\n          width={width}\n          xAxis={[{ barGapRatio, categoryGapRatio, dataKey: 'label', scaleType: 'band' }]}\n          yAxis={[{ width: 0 }]}\n        >\n          {amounts?.average && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: (theme as Theme).palette.neutral?.dark,\n                strokeDasharray: '0.1 5.9',\n                strokeLinecap: 'round',\n                strokeWidth: 2,\n              }}\n              y={amounts?.average}\n            />\n          )}\n          <ChartsXAxis\n            disableTicks={true}\n            sx={(theme) => ({\n              '.MuiChartsAxis-line': {\n                stroke: (theme as Theme).palette.neutral?.dark,\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n              fill: theme.palette.text.secondary,\n              fontWeight: 400,\n            }}\n          />\n          <BarPlot\n            onItemClick={(_, { dataIndex, seriesId }) =>\n              handleBarClick({ dataIndex, seriesId: seriesId.toString() })\n            }\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomDoubleBarPlot\n                    {...defaultProps}\n                    color={ownerState.color}\n                    data={data as DataSet[]}\n                    series={{\n                      index: ownerState.dataIndex,\n                      type: Number(ownerState.id.toString().split('-').pop()),\n                    }}\n                    style={{\n                      height: props.height,\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n        </ChartContainer>\n      </Box>\n\n      {(legendLabelComparison || legendLabelMain) && (\n        <DoubleBarChartLegend\n          comparisonColor={colors[1]}\n          legendLabelComparison={legendLabelComparison}\n          legendLabelMain={legendLabelMain}\n          legendStyle={{ mr: margin.left! + margin.right! }}\n          mainColor={colors[0]}\n        />\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;;AAaA,IAAa,IAAA,CAAkB,EAC7B,SAAA,GACA,aAAA,IAAc,GACd,kBAAA,IAAmB,KACnB,QAAA,GACA,MAAA,GACA,QAAA,IAAS,IACT,uBAAA,GACA,iBAAA,GACA,QAAA,IAAS;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AACP,GACA,YAAA,EAAA,MACyB;AACzB,QAAM,IAAQ,EAAS,GACjB,IAAe,EAAM,OAAuB,IAAI,GAChD,EAAE,QAAA,GAAQ,OAAA,EAAA,IAAU,EAAuB,CAAY,GAEvD,IAAA,CAAkB,EAAE,WAAA,GAAW,UAAA,EAAA,MAAwD;AAC3F,UAAM,IAAa,EAAS,SAAS,EAAE,MAAM,GAAG,EAAE,IAAI;AACtD,IAAA,IAAa,IAAY,IAAI,OAAO,CAAU,CAAC;AAAA,EACjD;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,IAAI;AAAA,MAAE,IAAI,IAAS,KAAK;AAAA,MAAI,OAAO;AAAA,IAAO;AAAA,cAArE,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,IAAI;AAAA,QACF,QAAQ,IAAS,MAAM;AAAA,QACvB,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,OAAO;AAAA,QACP,SAAS;AAAA,UACP,aAAa;AAAA,UACb,YAAY;AAAA,QACd;AAAA,QACA,uBAAuB,EACrB,aAAa,QACf;AAAA,MACF;AAAA,gBAEA,gBAAA,EAAC,GAAD;AAAA,QACU,QAAA;AAAA,QACR,SAAS;AAAA,QACD,QAAA;AAAA,QACA,QAAA;AAAA,QACR,QAAQ,CACN;AAAA,UAAE,SAAS;AAAA,UAAQ,MAAM;AAAA,QAAM,GAC/B;AAAA,UAAE,SAAS;AAAA,UAAc,MAAM;AAAA,QAAM,CACvC;AAAA,QACO,OAAA;AAAA,QACP,OAAO,CAAC;AAAA,UAAE,aAAA;AAAA,UAAa,kBAAA;AAAA,UAAkB,SAAS;AAAA,UAAS,WAAW;AAAA,QAAO,CAAC;AAAA,QAC9E,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;AAAA,kBAXtB;AAAA,UAaG,GAAS,WACR,gBAAA,EAAC,GAAD;AAAA,YACE,YAAW;AAAA,YACX,WAAW;AAAA,cACT,QAAS,EAAgB,QAAQ,SAAS;AAAA,cAC1C,iBAAiB;AAAA,cACjB,eAAe;AAAA,cACf,aAAa;AAAA,YACf;AAAA,YACA,GAAG,GAAS;AAAA,UACb,CAAA;AAAA,UAEH,gBAAA,EAAC,GAAD;AAAA,YACE,cAAc;AAAA,YACd,IAAA,CAAK,OAAW,EACd,uBAAuB,EACrB,QAAS,EAAgB,QAAQ,SAAS,KAC5C,EACF;AAAA,YACA,gBAAgB;AAAA,cACd,UAAU;AAAA,cACV,MAAM,EAAM,QAAQ,KAAK;AAAA,cACzB,YAAY;AAAA,YACd;AAAA,UACD,CAAA;AAAA,UACD,gBAAA,EAAC,GAAD;AAAA,YACE,aAAA,CAAc,GAAG,EAAE,WAAA,GAAW,UAAA,EAAA,MAC5B,EAAe;AAAA,cAAE,WAAA;AAAA,cAAW,UAAU,EAAS,SAAS;AAAA,YAAE,CAAC;AAAA,YAE7D,OAAO,EACL,KAAA,CAAM,MAAU;AACd,oBAAM,EAAE,YAAA,GAAY,GAAG,EAAA,IAAiB;AACxC,qBACE,gBAAA,EAAC,GAAD;AAAA,gBACE,GAAI;AAAA,gBACJ,OAAO,EAAW;AAAA,gBACZ,MAAA;AAAA,gBACN,QAAQ;AAAA,kBACN,OAAO,EAAW;AAAA,kBAClB,MAAM,OAAO,EAAW,GAAG,SAAS,EAAE,MAAM,GAAG,EAAE,IAAI,CAAC;AAAA,gBACxD;AAAA,gBACA,OAAO;AAAA,kBACL,QAAQ,EAAM;AAAA,kBACd,GAAG,EAAM;AAAA,kBACT,GAAG,EAAM;AAAA,kBACT,OAAO,EAAM;AAAA,gBACf;AAAA,cACD,CAAA;AAAA,YAEL,EACF;AAAA,UACD,CAAA;AAAA,QACa;AAAA;IACb,CAAA,IAEH,KAAyB,MACzB,gBAAA,EAAC,GAAD;AAAA,MACE,iBAAiB,EAAO,CAAA;AAAA,MACD,uBAAA;AAAA,MACN,iBAAA;AAAA,MACjB,aAAa,EAAE,IAAI,EAAO,OAAQ,EAAO,MAAO;AAAA,MAChD,WAAW,EAAO,CAAA;AAAA,IACnB,CAAA,CAEE;AAAA;AAEX"}

package/dist/insights/components/shared/Charts/BarChart/DoubleBarChartLegend.es.js

@@ -0,0 +1,73 @@
+import i from "@mui/material/Stack";
+import { Text as l } from "@mxenabled/mxui";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+var f = ({ comparisonColor: o, legendLabelComparison: t, legendLabelMain: n, legendStyle: a = {}, mainColor: h }) => /* @__PURE__ */ r(i, {
+  sx: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 16,
+    justifyContent: "flex-end",
+    width: "100%",
+    ...a
+  },
+  children: [n && /* @__PURE__ */ r(i, {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 8,
+    children: [/* @__PURE__ */ e("svg", {
+      "aria-hidden": "true",
+      "aria-labelledby": "legendMain",
+      fill: "none",
+      height: "6",
+      role: "figure",
+      width: "7",
+      children: /* @__PURE__ */ e("rect", {
+        fill: h,
+        height: "6",
+        rx: "2",
+        width: "6",
+        x: "0.4375"
+      })
+    }), /* @__PURE__ */ e(l, {
+      id: "legendMain",
+      sx: {
+        fontSize: 11,
+        fontWeight: 400
+      },
+      variant: "caption",
+      children: n
+    })]
+  }), t && /* @__PURE__ */ r(i, {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 8,
+    children: [/* @__PURE__ */ e("svg", {
+      "aria-hidden": "true",
+      "aria-labelledby": "legendComparison",
+      fill: "none",
+      height: "6",
+      role: "figure",
+      width: "7",
+      children: /* @__PURE__ */ e("rect", {
+        fill: o,
+        height: "6",
+        rx: "2",
+        width: "6",
+        x: "0.4375"
+      })
+    }), /* @__PURE__ */ e(l, {
+      id: "legendComparison",
+      sx: {
+        fontSize: 11,
+        fontWeight: 400
+      },
+      variant: "caption",
+      children: t
+    })]
+  })]
+});
+export {
+  f as DoubleBarChartLegend
+};
+
+//# sourceMappingURL=DoubleBarChartLegend.es.js.map

package/dist/insights/components/shared/Charts/BarChart/DoubleBarChartLegend.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleBarChartLegend.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/DoubleBarChartLegend.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\ninterface DoubleBarChartLegendProps {\n  comparisonColor: string\n  legendLabelComparison?: string\n  legendLabelMain?: string\n  legendStyle?: SxProps\n  mainColor: string\n}\n\nexport const DoubleBarChartLegend = ({\n  comparisonColor,\n  legendLabelComparison,\n  legendLabelMain,\n  legendStyle = {},\n  mainColor,\n}: DoubleBarChartLegendProps) => (\n  <Stack\n    sx={{\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: 16,\n      justifyContent: 'flex-end',\n      width: '100%',\n      ...legendStyle,\n    }}\n  >\n    {legendLabelMain && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <svg\n          aria-hidden=\"true\"\n          aria-labelledby=\"legendMain\"\n          fill=\"none\"\n          height=\"6\"\n          role=\"figure\"\n          width=\"7\"\n        >\n          <rect fill={mainColor} height=\"6\" rx=\"2\" width=\"6\" x=\"0.4375\" />\n        </svg>\n        <Text id=\"legendMain\" sx={{ fontSize: 11, fontWeight: 400 }} variant=\"caption\">\n          {legendLabelMain}\n        </Text>\n      </Stack>\n    )}\n    {legendLabelComparison && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <svg\n          aria-hidden=\"true\"\n          aria-labelledby=\"legendComparison\"\n          fill=\"none\"\n          height=\"6\"\n          role=\"figure\"\n          width=\"7\"\n        >\n          <rect fill={comparisonColor} height=\"6\" rx=\"2\" width=\"6\" x=\"0.4375\" />\n        </svg>\n        <Text id=\"legendComparison\" sx={{ fontSize: 11, fontWeight: 400 }} variant=\"caption\">\n          {legendLabelComparison}\n        </Text>\n      </Stack>\n    )}\n  </Stack>\n)\n"],"mappings":";;;AAaA,IAAa,IAAA,CAAwB,EACnC,iBAAA,GACA,uBAAA,GACA,iBAAA,GACA,aAAA,IAAc,CAAC,GACf,WAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,YARF,CAUG,KACC,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,cAApD,CACE,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,mBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,gBAEN,gBAAA,EAAC,QAAD;AAAA,QAAM,MAAM;AAAA,QAAW,QAAO;AAAA,QAAI,IAAG;AAAA,QAAI,OAAM;AAAA,QAAI,GAAE;AAAA,MAAU,CAAA;AAAA,IAC5D,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAG;AAAA,MAAa,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,MAAI;AAAA,MAAG,SAAQ;AAAA,gBAClE;AAAA,IACG,CAAA,CACD;AAAA,MAER,KACC,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,cAApD,CACE,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,mBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,gBAEN,gBAAA,EAAC,QAAD;AAAA,QAAM,MAAM;AAAA,QAAiB,QAAO;AAAA,QAAI,IAAG;AAAA,QAAI,OAAM;AAAA,QAAI,GAAE;AAAA,MAAU,CAAA;AAAA,IAClE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAG;AAAA,MAAmB,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,MAAI;AAAA,MAAG,SAAQ;AAAA,gBACxE;AAAA,IACG,CAAA,CACD;AAAA,IAEJ"}