@mx-cartographer/experiences 9.2.4-alpha.al5 → 9.3.0-alph.bb2

package/dist/insights/components/shared/ChartDrawerTemplate/ChartDrawerTemplate.es.js

@@ -0,0 +1,66 @@
+import { TipSection as v } from "./TipSection.es.js";
+import { useMemo as C, useState as k } from "react";
+import l from "@mui/material/Stack";
+import { H3 as $, Text as j } from "@mxenabled/mxui";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import w from "@mui/material/Box";
+import B from "@mui/material/Tab";
+import D from "@mui/material/Tabs";
+var z = ({ ariaLabel: h, beat: b, chart: d, children: g, data: t, defaultSelectedIndex: m, icon: x, onTabChange: f, tipSection: p }) => {
+  const { heading: o, subHeading: i } = b, [n, c] = k(C(() => m ?? (t.length ? t.length - 1 : 0), [m, t.length])), u = (e, a) => {
+    f?.(a), c(a);
+  }, T = (e) => {
+    c(e);
+  };
+  return /* @__PURE__ */ s(w, {
+    sx: {
+      bgcolor: "background.paper",
+      width: "100%"
+    },
+    children: [
+      /* @__PURE__ */ r(D, {
+        "aria-label": h,
+        onChange: u,
+        value: n,
+        variant: "fullWidth",
+        children: t.map((e, a) => /* @__PURE__ */ r(B, {
+          id: `transaction-details-tab-${a}`,
+          label: e.label,
+          sx: {
+            minWidth: "auto",
+            px: 0
+          }
+        }, `${e.label}-${a}`))
+      }),
+      /* @__PURE__ */ r(l, {
+        sx: {
+          pt: 16,
+          px: 24
+        },
+        children: (o || i) && /* @__PURE__ */ s(l, {
+          sx: { gap: 4 },
+          children: [o && /* @__PURE__ */ r($, { children: o }), i && /* @__PURE__ */ s(l, {
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              gap: 8
+            },
+            children: [x, /* @__PURE__ */ r(j, {
+              textTransform: "uppercase",
+              variant: "body2",
+              children: i.description
+            })]
+          })]
+        })
+      }),
+      d?.(n, T),
+      p && /* @__PURE__ */ r(v, { ...p }),
+      g?.(n)
+    ]
+  });
+};
+export {
+  z as ChartDrawerTemplate
+};
+
+//# sourceMappingURL=ChartDrawerTemplate.es.js.map

package/dist/insights/components/shared/ChartDrawerTemplate/ChartDrawerTemplate.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDrawerTemplate.es.js","names":[],"sources":["../../../../../src/insights/components/shared/ChartDrawerTemplate/ChartDrawerTemplate.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\n\nimport { H3, Text } from '@mxenabled/mxui'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport { TipSection } from './TipSection'\nimport type { TipSectionProps } from './TipSection'\n\ninterface SubHeading {\n  category_guid: string\n  description: string\n  merchant_guid: string\n}\n\nexport interface DrawerBeat {\n  heading?: string\n  subHeading?: SubHeading\n}\n\ninterface TabData {\n  ariaLabel?: string\n  formattedAmount: string\n  label: string\n  value: number\n}\n\nexport interface ChartDrawerTemplateProps {\n  ariaLabel: string\n  beat: DrawerBeat\n  chart: (selectedIndex: number, onBarClick: (index: number) => void) => React.ReactNode\n  children?: (selectedIndex: number) => React.ReactNode\n  data: TabData[]\n  defaultSelectedIndex?: number\n  icon?: React.ReactNode\n  onTabChange?: (index: number) => void\n  tipSection?: TipSectionProps\n}\n\nexport const ChartDrawerTemplate = ({\n  ariaLabel,\n  beat,\n  chart,\n  children,\n  data,\n  defaultSelectedIndex,\n  icon,\n  onTabChange,\n  tipSection,\n}: ChartDrawerTemplateProps) => {\n  const { heading, subHeading } = beat\n\n  const initialIndex = useMemo(\n    () => defaultSelectedIndex ?? (data.length ? data.length - 1 : 0),\n    [defaultSelectedIndex, data.length],\n  )\n\n  const [tabValue, setTabValue] = useState(initialIndex)\n\n  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {\n    onTabChange?.(newValue)\n    setTabValue(newValue)\n  }\n\n  const handleBarClick = (dataIndex: number) => {\n    setTabValue(dataIndex)\n  }\n\n  return (\n    <Box sx={{ bgcolor: 'background.paper', width: '100%' }}>\n      <Tabs aria-label={ariaLabel} onChange={handleTabChange} value={tabValue} variant=\"fullWidth\">\n        {data.map((item, index) => (\n          <Tab\n            id={`transaction-details-tab-${index}`}\n            key={`${item.label}-${index}`}\n            label={item.label}\n            sx={{ minWidth: 'auto', px: 0 }}\n          />\n        ))}\n      </Tabs>\n\n      <Stack sx={{ pt: 16, px: 24 }}>\n        {(heading || subHeading) && (\n          <Stack sx={{ gap: 4 }}>\n            {heading && <H3>{heading}</H3>}\n\n            {subHeading && (\n              <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n                {icon}\n                <Text textTransform=\"uppercase\" variant=\"body2\">\n                  {subHeading.description}\n                </Text>\n              </Stack>\n            )}\n          </Stack>\n        )}\n      </Stack>\n\n      {chart?.(tabValue, handleBarClick)}\n\n      {tipSection && <TipSection {...tipSection} />}\n\n      {children?.(tabValue)}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;AA0CA,IAAa,IAAA,CAAuB,EAClC,WAAA,GACA,MAAA,GACA,OAAA,GACA,UAAA,GACA,MAAA,GACA,sBAAA,GACA,MAAA,GACA,aAAA,GACA,YAAA,EAAA,MAC8B;AAC9B,QAAM,EAAE,SAAA,GAAS,YAAA,EAAA,IAAe,GAO1B,CAAC,GAAU,CAAA,IAAe,EALX,EAAA,MACb,MAAyB,EAAK,SAAS,EAAK,SAAS,IAAI,IAC/D,CAAC,GAAsB,EAAK,MAAM,CAGK,CAAY,GAE/C,IAAA,CAAmB,GAA8B,MAAqB;AAC1E,IAAA,IAAc,CAAQ,GACtB,EAAY,CAAQ;AAAA,EACtB,GAEM,IAAA,CAAkB,MAAsB;AAC5C,IAAA,EAAY,CAAS;AAAA,EACvB;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAK,IAAI;AAAA,MAAE,SAAS;AAAA,MAAoB,OAAO;AAAA,IAAO;AAAA,cAAtD;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAM,cAAY;AAAA,QAAW,UAAU;AAAA,QAAiB,OAAO;AAAA,QAAU,SAAQ;AAAA,kBAC9E,EAAK,IAAA,CAAK,GAAM,MACf,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI,2BAA2B,CAAA;AAAA,UAE/B,OAAO,EAAK;AAAA,UACZ,IAAI;AAAA,YAAE,UAAU;AAAA,YAAQ,IAAI;AAAA,UAAE;AAAA,QAC/B,GAHM,GAAG,EAAK,KAAA,IAAS,CAAA,EAGvB,CACF;AAAA,MACG,CAAA;AAAA,MAEN,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,IAAI;AAAA,UAAI,IAAI;AAAA,QAAG;AAAA,mBACxB,KAAW,MACX,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI,EAAE,KAAK,EAAE;AAAA,oBAApB,CACG,KAAW,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAY,CAAA,GAE5B,KACC,gBAAA,EAAC,GAAD;AAAA,YAAO,IAAI;AAAA,cAAE,YAAY;AAAA,cAAU,eAAe;AAAA,cAAO,KAAK;AAAA,YAAE;AAAA,sBAAhE,CACG,GACD,gBAAA,EAAC,GAAD;AAAA,cAAM,eAAc;AAAA,cAAY,SAAQ;AAAA,wBACrC,EAAW;AAAA,YACR,CAAA,CACD;AAAA,YAEJ;AAAA;MAEJ,CAAA;AAAA,MAEN,IAAQ,GAAU,CAAc;AAAA,MAEhC,KAAc,gBAAA,EAAC,GAAD,EAAY,GAAI,EAAa,CAAA;AAAA,MAE3C,IAAW,CAAQ;AAAA,IACjB;AAAA;AAET"}

package/dist/insights/components/shared/ChartDrawerTemplate/TipSection.es.js

@@ -0,0 +1,60 @@
+import o from "@mui/material/Stack";
+import { Icon as t, P as p } from "@mxenabled/mxui";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import f from "@mui/material/IconButton";
+var b = ({ message: l, tipAriaLabel: a, onDismiss: m, onAction: i, sx: c }) => {
+  const e = i || m, s = i ? "chevron_right" : "close";
+  return /* @__PURE__ */ n(o, {
+    sx: {
+      backgroundColor: "primary.lighter",
+      borderRadius: "8px",
+      mb: 24,
+      mt: 12,
+      p: 12,
+      mx: 24,
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      flexDirection: "row",
+      gap: 8,
+      ...c
+    },
+    children: [/* @__PURE__ */ n(o, {
+      sx: {
+        flexDirection: "row",
+        gap: 4
+      },
+      children: [/* @__PURE__ */ r(t, {
+        color: "info",
+        fill: !0,
+        name: "lightbulb",
+        size: 24
+      }), /* @__PURE__ */ r(p, {
+        color: "primary.dark",
+        fontWeight: 400,
+        noWrap: !1,
+        variant: "subtitle2",
+        children: l
+      })]
+    }), e && /* @__PURE__ */ r(f, {
+      "aria-label": a,
+      onClick: e,
+      size: "small",
+      sx: {
+        minHeight: 0,
+        minWidth: 0,
+        p: 0
+      },
+      children: /* @__PURE__ */ r(t, {
+        color: "primary",
+        fill: !0,
+        name: s,
+        size: 20
+      })
+    })]
+  });
+};
+export {
+  b as TipSection
+};
+
+//# sourceMappingURL=TipSection.es.js.map

package/dist/insights/components/shared/ChartDrawerTemplate/TipSection.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TipSection.es.js","names":[],"sources":["../../../../../src/insights/components/shared/ChartDrawerTemplate/TipSection.tsx"],"sourcesContent":["import { Icon, P } from '@mxenabled/mxui'\n\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface TipSectionProps {\n  message: React.ReactNode\n  tipAriaLabel?: string\n  onDismiss?: () => void\n  onAction?: () => void\n  sx?: SxProps\n}\n\nexport const TipSection = ({ message, tipAriaLabel, onDismiss, onAction, sx }: TipSectionProps) => {\n  // Priority: action > dismiss > nothing\n  const buttonHandler = onAction || onDismiss\n  const iconName = onAction ? 'chevron_right' : 'close'\n\n  return (\n    <Stack\n      sx={{\n        backgroundColor: 'primary.lighter',\n        borderRadius: '8px',\n        mb: 24,\n        mt: 12,\n        p: 12,\n        mx: 24,\n        alignItems: 'flex-start',\n        justifyContent: 'space-between',\n        flexDirection: 'row',\n        gap: 8,\n        ...sx,\n      }}\n    >\n      <Stack sx={{ flexDirection: 'row', gap: 4 }}>\n        <Icon color=\"info\" fill={true} name=\"lightbulb\" size={24} />\n        <P color=\"primary.dark\" fontWeight={400} noWrap={false} variant=\"subtitle2\">\n          {message}\n        </P>\n      </Stack>\n\n      {buttonHandler && (\n        <IconButton\n          aria-label={tipAriaLabel}\n          onClick={buttonHandler}\n          size=\"small\"\n          sx={{ minHeight: 0, minWidth: 0, p: 0 }}\n        >\n          <Icon color=\"primary\" fill={true} name={iconName} size={20} />\n        </IconButton>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAcA,IAAa,IAAA,CAAc,EAAE,SAAA,GAAS,cAAA,GAAc,WAAA,GAAW,UAAA,GAAU,IAAA,EAAA,MAA0B;AAEjG,QAAM,IAAgB,KAAY,GAC5B,IAAW,IAAW,kBAAkB;AAE9C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,KAAK;AAAA,MACL,GAAG;AAAA,IACL;AAAA,cAbF,CAeE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,gBAA1C,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAO,MAAM;AAAA,QAAM,MAAK;AAAA,QAAY,MAAM;AAAA,MAAK,CAAA,GAC3D,gBAAA,EAAC,GAAD;AAAA,QAAG,OAAM;AAAA,QAAe,YAAY;AAAA,QAAK,QAAQ;AAAA,QAAO,SAAQ;AAAA,kBAC7D;AAAA,MACA,CAAA,CACE;AAAA,QAEN,KACC,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACZ,SAAS;AAAA,MACT,MAAK;AAAA,MACL,IAAI;AAAA,QAAE,WAAW;AAAA,QAAG,UAAU;AAAA,QAAG,GAAG;AAAA,MAAE;AAAA,gBAEtC,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAU,MAAM;AAAA,QAAM,MAAM;AAAA,QAAU,MAAM;AAAA,MAAK,CAAA;AAAA,IACnD,CAAA,CAET;AAAA;AAEX"}

package/dist/insights/components/shared/ChartTransactionWithDrillDown.es.js

@@ -0,0 +1,76 @@
+import { useGlobalCopyStore as _, useGlobalUiStore as g, useTransactionStore as v } from "../../../common/context/hooks.es.js";
+import w from "../../../common/components/drawer/Drawer.es.js";
+import { exportTransactionsToCSV as D } from "../../../core/utils/TransactionUtils.es.js";
+import I from "../../../common/components/Loader.es.js";
+import k from "../../../transactions/components/shared/TransactionList.es.js";
+import { ChartDrawerTemplate as j } from "./ChartDrawerTemplate/ChartDrawerTemplate.es.js";
+import { BarChartV2 as W } from "./Charts/BarChart/BarChartV2.es.js";
+import G from "react";
+import L from "@mui/material/Stack";
+import { Text as n } from "@mxenabled/mxui";
+import V from "@mui/material/Button";
+import { Icon as $ } from "@mxenabled/mx-icons";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import F from "@mui/material/Box";
+var Y = ({ ariaLabel: s, barChartProps: t, beat: c, data: l, defaultSelectedIndex: d = 0, icon: p, isOpen: f = !1, onClose: h, onTabChange: b, tipSection: x, title: C, transactionListProps: r = {} }) => {
+  const { common: u, transactions: e } = _(), { isCopyLoaded: T } = g(), { sortedTransactionsWithSplits: a, tags: y } = v();
+  return T ? /* @__PURE__ */ o(w, {
+    ariaLabelClose: u.close_aria,
+    isOpen: f,
+    onClose: h,
+    title: C,
+    children: /* @__PURE__ */ o(j, {
+      ariaLabel: s,
+      beat: c,
+      chart: (B, S) => /* @__PURE__ */ o(F, {
+        sx: { pt: 16 },
+        children: /* @__PURE__ */ o(W, {
+          ...t,
+          onBarClick: (i) => {
+            S(i), t.onBarClick?.(i);
+          },
+          selectedTabIndex: B
+        })
+      }),
+      data: l,
+      defaultSelectedIndex: d,
+      icon: p,
+      onTabChange: b,
+      tipSection: x,
+      children: () => /* @__PURE__ */ m(G.Fragment, { children: [/* @__PURE__ */ m(L, {
+        sx: {
+          alignItems: "center",
+          borderBottomColor: "divider",
+          borderBottomStyle: "solid",
+          borderBottomWidth: 1,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          pb: 4,
+          pt: 16,
+          px: 24
+        },
+        children: [/* @__PURE__ */ o(n, {
+          bold: !0,
+          variant: "body1",
+          children: e.transactions_title
+        }), (r?.transaction || a.length > 0) && /* @__PURE__ */ o(V, {
+          onClick: () => {
+            D(r?.transaction || a, y);
+          },
+          startIcon: /* @__PURE__ */ o($, { name: "ios_share" }),
+          sx: { height: 28 },
+          children: /* @__PURE__ */ o(n, {
+            bold: !0,
+            variant: "body2",
+            children: e.export_csv_btn
+          })
+        })]
+      }), /* @__PURE__ */ o(k, { ...r })] })
+    })
+  }) : /* @__PURE__ */ o(I, {});
+};
+export {
+  Y as default
+};
+
+//# sourceMappingURL=ChartTransactionWithDrillDown.es.js.map

package/dist/insights/components/shared/ChartTransactionWithDrillDown.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTransactionWithDrillDown.es.js","names":[],"sources":["../../../../src/insights/components/shared/ChartTransactionWithDrillDown.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport {\n  Drawer,\n  Loader,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../../common'\nimport { exportTransactionsToCSV } from '../../../core/utils/TransactionUtils'\nimport { TransactionList } from '../../../transactions'\n\nimport type { BarDataProps } from '../../types/Charts/BarChart'\n\nimport { ChartDrawerTemplate, type DrawerBeat } from './ChartDrawerTemplate/ChartDrawerTemplate'\nimport type { TipSectionProps } from './ChartDrawerTemplate/TipSection'\nimport { BarChartV2 } from './Charts'\n\ninterface ChartWithTransactionDrillDownProps {\n  ariaLabel: string\n  barChartProps: React.ComponentProps<typeof BarChartV2>\n  beat: DrawerBeat\n  data: BarDataProps[]\n  defaultSelectedIndex?: number\n  icon?: React.ReactNode\n  isOpen?: boolean\n  onClose: () => void\n  onTabChange?: (index: number) => void\n  tipSection?: TipSectionProps\n  title: string\n  transactionListProps?: React.ComponentProps<typeof TransactionList>\n}\n\nconst ChartWithTransactionDrillDown = ({\n  ariaLabel,\n  barChartProps,\n  beat,\n  data,\n  defaultSelectedIndex = 0,\n  icon,\n  isOpen = false,\n  onClose,\n  onTabChange,\n  tipSection,\n  title,\n  transactionListProps = {},\n}: ChartWithTransactionDrillDownProps) => {\n  const { common: commonCopy, transactions: transactionsCopy } = useGlobalCopyStore()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { sortedTransactionsWithSplits, tags } = useTransactionStore()\n\n  if (!isCopyLoaded) return <Loader />\n\n  return (\n    <Drawer ariaLabelClose={commonCopy.close_aria} isOpen={isOpen} onClose={onClose} title={title}>\n      <ChartDrawerTemplate\n        ariaLabel={ariaLabel}\n        beat={beat}\n        chart={(selectedTab, onBarClick) => (\n          <Box sx={{ pt: 16 }}>\n            <BarChartV2\n              {...barChartProps}\n              onBarClick={(i) => {\n                onBarClick(i)\n                barChartProps.onBarClick?.(i)\n              }}\n              selectedTabIndex={selectedTab}\n            />\n          </Box>\n        )}\n        data={data}\n        defaultSelectedIndex={defaultSelectedIndex}\n        icon={icon}\n        onTabChange={onTabChange}\n        tipSection={tipSection}\n      >\n        {/* Tab selection will be added here later */}\n        {() => {\n          return (\n            <React.Fragment>\n              <Stack\n                sx={{\n                  alignItems: 'center',\n                  borderBottomColor: 'divider',\n                  borderBottomStyle: 'solid',\n                  borderBottomWidth: 1,\n                  flexDirection: 'row',\n                  justifyContent: 'space-between',\n                  pb: 4,\n                  pt: 16,\n                  px: 24,\n                }}\n              >\n                <Text bold={true} variant=\"body1\">\n                  {transactionsCopy.transactions_title}\n                </Text>\n                {(transactionListProps?.transaction || sortedTransactionsWithSplits.length > 0) && (\n                  <Button\n                    onClick={() => {\n                      exportTransactionsToCSV(\n                        transactionListProps?.transaction || sortedTransactionsWithSplits,\n                        tags,\n                      )\n                    }}\n                    startIcon={<Icon name=\"ios_share\" />}\n                    sx={{ height: 28 }}\n                  >\n                    <Text bold={true} variant=\"body2\">\n                      {transactionsCopy.export_csv_btn}\n                    </Text>\n                  </Button>\n                )}\n              </Stack>\n              <TransactionList {...transactionListProps} />\n            </React.Fragment>\n          )\n        }}\n      </ChartDrawerTemplate>\n    </Drawer>\n  )\n}\n\nexport default ChartWithTransactionDrillDown\n"],"mappings":";;;;;;;;;;;;;;AAwCA,IAAM,IAAA,CAAiC,EACrC,WAAA,GACA,eAAA,GACA,MAAA,GACA,MAAA,GACA,sBAAA,IAAuB,GACvB,MAAA,GACA,QAAA,IAAS,IACT,SAAA,GACA,aAAA,GACA,YAAA,GACA,OAAA,GACA,sBAAA,IAAuB,CAAC,EAAA,MACgB;AACxC,QAAM,EAAE,QAAQ,GAAY,cAAc,EAAA,IAAqB,EAAmB,GAC5E,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,8BAAA,GAA8B,MAAA,EAAA,IAAS,EAAoB;AAEnE,SAAK,IAGH,gBAAA,EAAC,GAAD;AAAA,IAAQ,gBAAgB,EAAW;AAAA,IAAoB,QAAA;AAAA,IAAiB,SAAA;AAAA,IAAgB,OAAA;AAAA,cACtF,gBAAA,EAAC,GAAD;AAAA,MACa,WAAA;AAAA,MACL,MAAA;AAAA,MACN,OAAA,CAAQ,GAAa,MACnB,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI,EAAE,IAAI,GAAG;AAAA,kBAChB,gBAAA,EAAC,GAAD;AAAA,UACE,GAAI;AAAA,UACJ,YAAA,CAAa,MAAM;AACjB,YAAA,EAAW,CAAC,GACZ,EAAc,aAAa,CAAC;AAAA,UAC9B;AAAA,UACA,kBAAkB;AAAA,QACnB,CAAA;AAAA,MACE,CAAA;AAAA,MAED,MAAA;AAAA,MACgB,sBAAA;AAAA,MAChB,MAAA;AAAA,MACO,aAAA;AAAA,MACD,YAAA;AAAA,sBAKR,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,mBAAmB;AAAA,UACnB,mBAAmB;AAAA,UACnB,mBAAmB;AAAA,UACnB,eAAe;AAAA,UACf,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,QACN;AAAA,kBAXF,CAaE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAiB;AAAA,QACd,CAAA,IACJ,GAAsB,eAAe,EAA6B,SAAS,MAC3E,gBAAA,EAAC,GAAD;AAAA,UACE,SAAA,MAAe;AACb,YAAA,EACE,GAAsB,eAAe,GACrC,CACF;AAAA,UACF;AAAA,UACA,WAAW,gBAAA,EAAC,GAAD,EAAM,MAAK,YAAa,CAAA;AAAA,UACnC,IAAI,EAAE,QAAQ,GAAG;AAAA,oBAEjB,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,SAAQ;AAAA,sBACvB,EAAiB;AAAA,UACd,CAAA;AAAA,QACA,CAAA,CAEL;AAAA,UACP,gBAAA,EAAC,GAAD,EAAiB,GAAI,EAAuB,CAAA,CAC9B,EAAA,CAAA;AAAA,IAGD,CAAA;AAAA,EACf,CAAA,IAnEgB,gBAAA,EAAC,GAAD,CAAS,CAAA;AAqErC"}

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

@@ -0,0 +1,147 @@
+import { useContainerDimensions as R } from "../../../../hooks/useContainerDimensions.es.js";
+import { Legend as B } from "./ChartLegend.es.js";
+import { CustomBarPlot as L } from "./CustomBarPlot.es.js";
+import h from "react";
+import D from "@mui/material/Stack";
+import { jsx as s, jsxs as b } from "react/jsx-runtime";
+import { useTheme as _ } from "@mui/material/styles";
+import j from "@mui/material/Box";
+import { BarPlot as I, ChartContainer as P, ChartsReferenceLine as w, ChartsXAxis as V } from "@mui/x-charts";
+var F = ({ amounts: m, color: a, data: e, isMini: p = !1, heightOverride: y, margin: n = {
+  bottom: 30,
+  left: 40,
+  right: 40,
+  top: 20
+}, legendLabelAvg: A, legendLabelMain: g, selectedTabIndex: o, removeSelectedTabColorChange: u, onBarClick: c }) => {
+  const k = h.useRef(null), { height: C, width: M } = R(k), d = _(), f = e.reduce((t, r) => Math.min(t, r.value), 1 / 0) < 0, S = h.useMemo(() => {
+    const t = `${a}80`;
+    return u ? e.map(() => a) : o === void 0 ? [...new Array(e.length - 1).fill(t), a] : e.map((r, i) => i === o ? a : t);
+  }, [
+    a,
+    e,
+    o
+  ]), v = h.useCallback((t, { dataIndex: r }) => c && c(r), [c]), x = h.useMemo(() => {
+    const t = e.map(({ value: l }) => l), r = Math.min(...t), i = Math.max(...t);
+    return {
+      series: [{
+        data: t,
+        type: "bar"
+      }],
+      xAxis: [{
+        data: e.map(({ label: l }) => l),
+        scaleType: "band",
+        categoryGapRatio: 0.45
+      }],
+      yAxis: [{
+        scaleType: "linear",
+        min: r < 0 ? r * 1.2 : 0,
+        max: i > 0 ? i : 0
+      }]
+    };
+  }, [e]);
+  return /* @__PURE__ */ b(D, {
+    alignItems: "center",
+    sx: {
+      mb: p ? 16 : 24,
+      width: "100%"
+    },
+    children: [/* @__PURE__ */ s(j, {
+      ref: k,
+      sx: {
+        height: y || (p ? 120 : 172),
+        mb: 8,
+        touchAction: "pan-y",
+        width: "100%",
+        "& svg": {
+          touchAction: "pan-y",
+          userSelect: "none"
+        },
+        "& .recharts-wrapper": { touchAction: "pan-y" }
+      },
+      children: /* @__PURE__ */ b(P, {
+        height: C,
+        margin: {
+          top: n.top || 45,
+          right: n.right,
+          bottom: n.bottom,
+          left: n.left
+        },
+        series: x.series,
+        width: M,
+        xAxis: x.xAxis,
+        yAxis: x.yAxis.map((t) => ({
+          ...t,
+          width: 0
+        })),
+        children: [
+          m?.average && /* @__PURE__ */ s(w, {
+            labelAlign: "middle",
+            lineStyle: {
+              stroke: d.palette.neutral.darker,
+              strokeDasharray: "0.1 5.9",
+              strokeLinecap: "round",
+              strokeWidth: 2
+            },
+            y: m?.average
+          }),
+          f && /* @__PURE__ */ s(w, {
+            labelAlign: "middle",
+            lineStyle: { stroke: d.palette.neutral.dark },
+            y: 0
+          }),
+          /* @__PURE__ */ s(V, {
+            disableTicks: !0,
+            slots: { axisTickLabel: ({ text: t, ownerState: r, ...i }) => {
+              const l = e[o ?? e.length - 1]?.label;
+              return /* @__PURE__ */ s("text", {
+                ...i,
+                style: {
+                  ...i.style,
+                  fontWeight: !u && l === t ? "bold" : 400
+                },
+                children: t
+              });
+            } },
+            sx: (t) => ({
+              ".MuiChartsAxis-line": { stroke: f ? "none" : t.palette.neutral?.main },
+              "MuiChartsAxis-root-MuiChartsXAxis-root": { transform: "translate(0, 150)" },
+              ".MuiChartsAxis-tickLabel": { transform: f ? "translateY(15px)" : {} }
+            }),
+            tickLabelStyle: { fontSize: 11 }
+          }),
+          /* @__PURE__ */ s(I, {
+            onItemClick: v,
+            slots: { bar: (t) => {
+              const { ownerState: r, ...i } = t;
+              return /* @__PURE__ */ s(L, {
+                ...i,
+                colorRange: S,
+                data: e,
+                dataIndex: r.dataIndex,
+                removeSelectedTabColorChange: u,
+                selectedTabIndex: o ?? e.length - 1,
+                style: {
+                  height: t.height,
+                  x: t.x,
+                  y: t.y,
+                  width: t.width
+                }
+              });
+            } }
+          })
+        ]
+      })
+    }), (g || A) && /* @__PURE__ */ s(B, {
+      average: m?.formattedAverage,
+      color: a,
+      legendLabelAvg: A,
+      legendLabelMain: g,
+      legendStyle: { mr: n.left + n.right }
+    })]
+  });
+};
+export {
+  F as BarChart
+};
+
+//# sourceMappingURL=BarChart.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/BarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { Theme, useTheme } from '@mui/material/styles'\nimport {\n  BarPlot,\n  BarSeriesType,\n  ChartContainer,\n  ChartsReferenceLine,\n  ChartsXAxis,\n} from '@mui/x-charts'\nimport { useContainerDimensions } from '../../../../hooks/useContainerDimensions'\n\nimport { BarChartProps } from '../../../../types/Charts/BarChart'\n\nimport { Legend } from './ChartLegend'\nimport { CustomBarPlot } from './CustomBarPlot'\n\nexport const BarChart = ({\n  amounts,\n  color,\n  data,\n  isMini = false,\n  heightOverride,\n  margin = {\n    bottom: 30,\n    left: 40,\n    right: 40,\n    top: 20,\n  },\n  legendLabelAvg,\n  legendLabelMain,\n  selectedTabIndex,\n  removeSelectedTabColorChange,\n  onBarClick,\n}: BarChartProps) => {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const theme = useTheme()\n\n  const lowestValue = data.reduce((min, item) => Math.min(min, item.value), Infinity)\n  const isNegative = lowestValue < 0\n\n  const colorRange = React.useMemo(() => {\n    const defaultColor = `${color}80`\n    if (removeSelectedTabColorChange) {\n      // If we don't want to change the color of the selected tab\n      return data.map(() => color)\n    }\n\n    if (selectedTabIndex === undefined) {\n      return [...new Array(data.length - 1).fill(defaultColor), color]\n    }\n    return data.map((_, index) => (index === selectedTabIndex ? color : defaultColor))\n  }, [color, data, selectedTabIndex])\n\n  const handleBarClick = React.useCallback(\n    (_: React.MouseEvent<SVGElement, MouseEvent>, { dataIndex }: { dataIndex: number }) =>\n      onBarClick && onBarClick(dataIndex),\n    [onBarClick],\n  )\n\n  const chartData = React.useMemo(() => {\n    const values = data.map(({ value }) => value)\n    const minValue = Math.min(...values)\n    const maxValue = Math.max(...values)\n\n    return {\n      series: [\n        {\n          data: values,\n          type: 'bar',\n        },\n      ] as BarSeriesType[],\n      xAxis: [\n        {\n          data: data.map(({ label }) => label),\n          scaleType: 'band' as const,\n          categoryGapRatio: 0.45,\n        },\n      ],\n      yAxis: [\n        {\n          scaleType: 'linear' as const,\n          min: minValue < 0 ? minValue * 1.2 : 0, // Extend the Y-axis range below the lowest negative value\n          max: maxValue > 0 ? maxValue : 0, // Ensure the Y-axis includes positive values\n        },\n      ],\n    }\n  }, [data])\n\n  const standardHeight = isMini ? 120 : 172\n\n  return (\n    <Stack alignItems=\"center\" sx={{ mb: isMini ? 16 : 24, width: '100%' }}>\n      <Box\n        ref={containerRef}\n        sx={{\n          height: heightOverride ? heightOverride : standardHeight,\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          height={height}\n          margin={{\n            top: margin.top || 45,\n            right: margin.right,\n            bottom: margin.bottom,\n            left: margin.left,\n          }}\n          series={chartData.series}\n          width={width}\n          xAxis={chartData.xAxis}\n          yAxis={chartData.yAxis.map((axis) => ({ ...axis, width: 0 }))}\n        >\n          {amounts?.average && ( // show average line if available\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: (theme as Theme).palette.neutral.darker,\n                strokeDasharray: '0.1 5.9',\n                strokeLinecap: 'round',\n                strokeWidth: 2,\n              }}\n              y={amounts?.average}\n            />\n          )}\n\n          {isNegative && ( // show lowest value line if negative values are allowed and if the lowest value is negative\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: (theme as Theme).palette.neutral.dark,\n              }}\n              y={0}\n            />\n          )}\n\n          <ChartsXAxis\n            disableTicks={true}\n            slots={{\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n              axisTickLabel: ({ text, ownerState: _, ...restProps }) => {\n                const label = data[selectedTabIndex ?? data.length - 1]?.label\n                return (\n                  <text\n                    {...restProps}\n                    style={\n                      {\n                        ...restProps.style,\n                        fontWeight: !removeSelectedTabColorChange && label === text ? 'bold' : 400,\n                      } as React.CSSProperties\n                    }\n                  >\n                    {text}\n                  </text>\n                )\n              },\n            }}\n            sx={(theme) => ({\n              '.MuiChartsAxis-line': {\n                stroke: !isNegative ? (theme as Theme).palette.neutral?.main : 'none', // If there is a negative value hide this line and use the reference line\n              },\n              'MuiChartsAxis-root-MuiChartsXAxis-root': {\n                transform: 'translate(0, 150)',\n              },\n              '.MuiChartsAxis-tickLabel': {\n                transform: isNegative ? 'translateY(15px)' : {}, // Add padding to move labels further down. Must use an empty transform to prevent errors\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n            }}\n          />\n          <BarPlot\n            onItemClick={handleBarClick}\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomBarPlot\n                    {...defaultProps}\n                    colorRange={colorRange}\n                    data={data}\n                    dataIndex={ownerState.dataIndex}\n                    removeSelectedTabColorChange={removeSelectedTabColorChange}\n                    selectedTabIndex={selectedTabIndex ?? data.length - 1}\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      {(legendLabelMain || legendLabelAvg) && (\n        <Legend\n          average={amounts?.formattedAverage}\n          color={color}\n          legendLabelAvg={legendLabelAvg}\n          legendLabelMain={legendLabelMain}\n          legendStyle={{ mr: margin.left! + margin.right! }}\n        />\n      )}\n    </Stack>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,148 @@
+import { useContainerDimensions as V } from "../../../../hooks/useContainerDimensions.es.js";
+import { LegendV2 as D } from "./ChartLegendV2.es.js";
+import { CustomBarPlotV2 as _ } from "./CustomBarPlotV2.es.js";
+import m from "react";
+import j from "@mui/material/Stack";
+import { jsx as n, jsxs as M } from "react/jsx-runtime";
+import { useTheme as W } from "@mui/material/styles";
+import z from "@mui/material/Box";
+import { BarPlot as G, ChartContainer as N, ChartsReferenceLine as b, ChartsXAxis as X } from "@mui/x-charts";
+var Q = ({ amounts: c, color: s, data: e, heightOverride: f, margin: a = {
+  bottom: 30,
+  left: 40,
+  right: 40,
+  top: 20
+}, onBarClick: S, legendPosition: h = "bottom", monthlyAmountLabel: y, removeSelectedTabColorChange: u, selectedTabIndex: o, trendAmountLabel: x }) => {
+  const A = m.useRef(null), { height: d, width: R } = V(A), g = W(), k = m.useMemo(() => {
+    const t = e.map(({ value: l }) => l), r = Math.min(...t), i = Math.max(...t);
+    return {
+      series: [{
+        data: t,
+        type: "bar"
+      }],
+      xAxis: [{
+        data: e.map(({ label: l }) => l),
+        scaleType: "band",
+        categoryGapRatio: 0.45
+      }],
+      yAxis: [{
+        scaleType: "linear",
+        min: r < 0 ? r * 1.2 : 0,
+        max: i > 0 ? i : 0
+      }]
+    };
+  }, [e]), v = m.useMemo(() => {
+    const t = `${s}80`;
+    return u ? e.map(() => s) : o == null ? [...new Array(e.length - 1).fill(t), s] : e.map((r, i) => i === o ? s : t);
+  }, [
+    s,
+    e,
+    o
+  ]), B = m.useMemo(() => e[o ?? e.length - 1], [e, o]), p = e.reduce((t, r) => Math.min(t, r.value), 1 / 0) < 0, C = /* @__PURE__ */ n(D, {
+    color: s,
+    legendStyle: { pl: a.left },
+    monthlyAmount: B.formattedAmount,
+    monthlyAmountLabel: y,
+    trendAmount: c?.formattedAverage,
+    trendAmountLabel: x
+  }), w = y || x, L = (t, { dataIndex: r }) => S?.(r);
+  return /* @__PURE__ */ M(j, {
+    sx: {
+      alignItems: "center",
+      width: "100%"
+    },
+    children: [
+      w && h === "top" && C,
+      /* @__PURE__ */ n(z, {
+        ref: A,
+        sx: {
+          height: f || 122,
+          mb: h === "top" ? 0 : 4,
+          mt: h === "top" ? 4 : 0,
+          touchAction: "pan-y",
+          width: "100%",
+          "& svg": {
+            touchAction: "pan-y",
+            userSelect: "none"
+          },
+          "& .recharts-wrapper": { touchAction: "pan-y" }
+        },
+        children: /* @__PURE__ */ M(N, {
+          height: d,
+          margin: {
+            bottom: a.bottom,
+            left: a.left,
+            right: a.right,
+            top: a.top || 45
+          },
+          series: k.series,
+          width: R,
+          xAxis: k.xAxis,
+          yAxis: [{ width: 0 }],
+          children: [
+            c?.average && /* @__PURE__ */ n(b, {
+              labelAlign: "middle",
+              lineStyle: {
+                stroke: g.palette.chart.chart7,
+                strokeDasharray: "4",
+                strokeLinecap: "round",
+                strokeWidth: 1
+              },
+              y: c?.average
+            }),
+            p && /* @__PURE__ */ n(b, {
+              labelAlign: "middle",
+              lineStyle: { stroke: g.palette.chart.chart7 },
+              y: 0
+            }),
+            /* @__PURE__ */ n(X, {
+              slots: { axisTickLabel: ({ text: t, ownerState: r, ...i }) => {
+                const l = e[o ?? e.length - 1]?.label;
+                return /* @__PURE__ */ n("text", {
+                  ...i,
+                  style: {
+                    ...i.style,
+                    fontWeight: !u && l === t ? "bold" : 400
+                  },
+                  children: t
+                });
+              } },
+              sx: (t) => ({
+                "& .MuiChartsAxis-line": { stroke: p ? "none" : t.palette.text?.primary },
+                "& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick": { display: "none" },
+                "& .MuiChartsAxis-tickLabel": { transform: p ? "translateY(15px)" : {} }
+              }),
+              tickLabelStyle: { fontSize: 11 }
+            }),
+            /* @__PURE__ */ n(G, {
+              onItemClick: L,
+              slots: { bar: (t) => {
+                const { ownerState: r, ...i } = t;
+                return /* @__PURE__ */ n(_, {
+                  ...i,
+                  colorRange: v,
+                  data: e,
+                  dataIndex: r.dataIndex,
+                  removeSelectedTabColorChange: u,
+                  selectedTabIndex: o ?? e.length - 1,
+                  style: {
+                    height: t.height,
+                    x: t.x,
+                    y: t.y,
+                    width: t.width
+                  }
+                });
+              } }
+            })
+          ]
+        })
+      }),
+      w && h === "bottom" && C
+    ]
+  });
+};
+export {
+  Q as BarChartV2
+};
+
+//# sourceMappingURL=BarChartV2.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/BarChartV2.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 {\n  BarPlot,\n  type BarSeriesType,\n  ChartContainer as ResponsiveChartContainer,\n  ChartsReferenceLine,\n  ChartsXAxis,\n} from '@mui/x-charts'\nimport { useContainerDimensions } from '../../../../hooks/useContainerDimensions'\n\nimport type { BarChartV2Props } from '../../../../types/Charts/BarChart'\n\nimport { LegendV2 } from './ChartLegendV2'\nimport { CustomBarPlotV2 } from './CustomBarPlotV2'\n\nexport const BarChartV2 = ({\n  amounts,\n  color,\n  data,\n  heightOverride,\n  margin = {\n    bottom: 30,\n    left: 40,\n    right: 40,\n    top: 20,\n  },\n  onBarClick,\n  legendPosition = 'bottom',\n  monthlyAmountLabel,\n  removeSelectedTabColorChange,\n  selectedTabIndex,\n  trendAmountLabel,\n}: BarChartV2Props) => {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const theme = useTheme()\n\n  const chartData = React.useMemo(() => {\n    const values = data.map(({ value }) => value)\n    const minValue = Math.min(...values)\n    const maxValue = Math.max(...values)\n\n    return {\n      series: [\n        {\n          data: values,\n          type: 'bar',\n        },\n      ] as BarSeriesType[],\n      xAxis: [\n        {\n          data: data.map(({ label }) => label),\n          scaleType: 'band' as const,\n          categoryGapRatio: 0.45,\n        },\n      ],\n      yAxis: [\n        {\n          scaleType: 'linear' as const,\n          min: minValue < 0 ? minValue * 1.2 : 0,\n          max: maxValue > 0 ? maxValue : 0,\n        },\n      ],\n    }\n  }, [data])\n\n  const colorRange = React.useMemo(() => {\n    const defaultColor = `${color}80`\n    if (removeSelectedTabColorChange) return data.map(() => color)\n\n    if (selectedTabIndex == null) {\n      return [...new Array(data.length - 1).fill(defaultColor), color]\n    }\n    return data.map((_, index) => (index === selectedTabIndex ? color : defaultColor))\n  }, [color, data, selectedTabIndex])\n\n  const selectedData = React.useMemo(\n    () => data[selectedTabIndex ?? data.length - 1],\n    [data, selectedTabIndex],\n  )\n\n  const lowestValue = data.reduce((min, item) => Math.min(min, item.value), Infinity)\n  const isNegative = lowestValue < 0\n\n  const legendComponent = (\n    <LegendV2\n      color={color}\n      legendStyle={{ pl: margin.left }}\n      monthlyAmount={selectedData.formattedAmount}\n      monthlyAmountLabel={monthlyAmountLabel}\n      trendAmount={amounts?.formattedAverage}\n      trendAmountLabel={trendAmountLabel}\n    />\n  )\n\n  const shouldShowLegend = monthlyAmountLabel || trendAmountLabel\n\n  const handleBarClick = (\n    _: React.MouseEvent<SVGElement, MouseEvent>,\n    { dataIndex }: { dataIndex: number },\n  ) => onBarClick?.(dataIndex)\n\n  return (\n    <Stack sx={{ alignItems: 'center', width: '100%' }}>\n      {shouldShowLegend && legendPosition === 'top' && legendComponent}\n      <Box\n        ref={containerRef}\n        sx={{\n          height: heightOverride ? heightOverride : 122,\n          mb: legendPosition === 'top' ? 0 : 4,\n          mt: legendPosition === 'top' ? 4 : 0,\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        <ResponsiveChartContainer\n          height={height}\n          margin={{\n            bottom: margin.bottom,\n            left: margin.left,\n            right: margin.right,\n            top: margin.top || 45,\n          }}\n          series={chartData.series}\n          width={width}\n          xAxis={chartData.xAxis}\n          yAxis={[{ width: 0 }]}\n        >\n          {amounts?.average && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: theme.palette.chart.chart7,\n                strokeDasharray: '4',\n                strokeLinecap: 'round',\n                strokeWidth: 1,\n              }}\n              y={amounts?.average}\n            />\n          )}\n\n          {isNegative && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: theme.palette.chart.chart7,\n              }}\n              y={0}\n            />\n          )}\n\n          <ChartsXAxis\n            slots={{\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n              axisTickLabel: ({ text, ownerState: _, ...restProps }) => {\n                const label = data[selectedTabIndex ?? data.length - 1]?.label\n                return (\n                  <text\n                    {...restProps}\n                    style={\n                      {\n                        ...restProps.style,\n                        fontWeight: !removeSelectedTabColorChange && label === text ? 'bold' : 400,\n                      } as React.CSSProperties\n                    }\n                  >\n                    {text}\n                  </text>\n                )\n              },\n            }}\n            sx={(theme) => ({\n              '& .MuiChartsAxis-line': {\n                stroke: !isNegative ? (theme as Theme).palette.text?.primary : 'none',\n              },\n              '& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick': {\n                display: 'none',\n              },\n              '& .MuiChartsAxis-tickLabel': {\n                transform: isNegative ? 'translateY(15px)' : {},\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n            }}\n          />\n          <BarPlot\n            onItemClick={handleBarClick}\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomBarPlotV2\n                    {...defaultProps}\n                    colorRange={colorRange}\n                    data={data}\n                    dataIndex={ownerState.dataIndex}\n                    removeSelectedTabColorChange={removeSelectedTabColorChange}\n                    selectedTabIndex={selectedTabIndex ?? data.length - 1}\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        </ResponsiveChartContainer>\n      </Box>\n      {shouldShowLegend && legendPosition === 'bottom' && legendComponent}\n    </Stack>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,75 @@
+import i from "@mui/material/Stack";
+import { Text as a } from "@mxenabled/mxui";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import d from "@mui/material/Box";
+var p = ({ average: t, color: l, legendLabelAvg: n, legendLabelMain: o, legendStyle: h = {} }) => /* @__PURE__ */ r(i, {
+  sx: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 16,
+    justifyContent: "flex-end",
+    width: "100%",
+    ...h
+  },
+  children: [o && /* @__PURE__ */ r(i, {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 8,
+    children: [/* @__PURE__ */ e("svg", {
+      "aria-hidden": "true",
+      "aria-labelledby": "chartLegendLabel",
+      fill: "none",
+      height: "6",
+      role: "figure",
+      width: "7",
+      children: /* @__PURE__ */ e("rect", {
+        fill: l,
+        height: "6",
+        rx: "2",
+        width: "6",
+        x: "0.4375"
+      })
+    }), /* @__PURE__ */ e(a, {
+      id: "chartLegendLabel",
+      sx: {
+        fontSize: 11,
+        fontWeight: 400
+      },
+      variant: "caption",
+      children: o
+    })]
+  }), t && n && /* @__PURE__ */ r(i, {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 8,
+    children: [/* @__PURE__ */ e(i, {
+      sx: {
+        flexDirection: "row",
+        gap: 2
+      },
+      children: [...Array(3)].map((f, c) => /* @__PURE__ */ e(d, { sx: {
+        width: 3,
+        height: 3,
+        borderRadius: 4,
+        backgroundColor: "secondary.lighter"
+      } }, c))
+    }), /* @__PURE__ */ r(a, {
+      sx: {
+        fontSize: 11,
+        fontWeight: 400,
+        ml: 0
+      },
+      variant: "caption",
+      children: [
+        n,
+        ": ",
+        t
+      ]
+    })]
+  })]
+});
+export {
+  p as Legend
+};
+
+//# sourceMappingURL=ChartLegend.es.js.map