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

package/dist/common/components/charts/LineChart/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/charts/LineChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport type { SxProps } from '@mui/material/styles'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { AllSeriesType } from '@mui/x-charts'\nimport { BarPlot } from '@mui/x-charts/BarChart'\nimport { ChartContainer as ResponsiveChartContainer } from '@mui/x-charts/ChartContainer'\nimport { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'\nimport { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'\nimport { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip'\nimport { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'\nimport { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'\nimport { AreaPlot, LinePlot, MarkPlot } from '@mui/x-charts/LineChart'\n\nimport CustomLegend from './linechart/CustomLegend'\nimport { getMarkerShape } from './linechart/utils/markerShapes'\nimport { CustomLine } from './linechart/CustomLine'\nimport { CustomMark, MarkHandlers } from './linechart/CustomMark'\nimport { CustomTooltip } from './linechart/CustomTooltip'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { generateEqualIntervals } from '../../../core/utils/NumberFormatting'\n\nexport type LineChartDataset = { x: string; y: number }[]\nexport type LineChartLabel = string | { label: string; amount: number }\nexport type TooltipLabel = LineChartLabel & { header?: string }\n\ntype LineChartCurve =\n  | 'catmullRom'\n  | 'linear'\n  | 'monotoneX'\n  | 'monotoneY'\n  | 'natural'\n  | 'step'\n  | 'stepBefore'\n  | 'stepAfter'\n  | 'bump'\n  | 'bumpX'\n  | 'bumpY'\n\ninterface LineChartProps {\n  areaColor?: string\n  axisColor?: string\n  baseline?: string\n  chartFor?: string\n  chartXaxisSx?: SxProps\n  chartYaxisSx?: SxProps\n  // Because theme chart colors are typed string|undefined\n  colors: (string | undefined)[]\n  curveType?: LineChartCurve\n  customLegendVariant?: string\n  customLegendSx?: SxProps\n  customLegendBoxSx?: SxProps\n  customTooltipLabels?: TooltipLabel[][]\n  datasets: LineChartDataset[]\n  height?: number\n  isCurrency?: boolean\n  isGraphClippingXAxis?: boolean\n  labels: LineChartLabel[]\n  labelBackgroundColor?: string\n  labelFontColor?: string\n  labelFontSize?: number\n  margin?: { top?: number; right?: number; bottom?: number; left?: number }\n  markHandlers?: MarkHandlers\n  markStyles?: (markIndex: number) => React.CSSProperties & {\n    markLabelStyles?: React.CSSProperties\n  }\n  minRange?: number\n  maxRange?: number\n  onItemClick?: () => void\n  peerAverage?: number\n  showArea?: boolean\n  showAverage?: boolean\n  showAxisHighlight?: boolean\n  showBars?: boolean\n  showLegend?: boolean\n  showMark?: boolean\n  showMarkLabel?: boolean\n  showTooltip?: boolean\n  showXAxis?: boolean\n  showXAxisTicks?: boolean\n  showYAxis?: boolean\n  showYAxisTicks?: boolean\n  tickIntervals?: any[] | 'auto' | ((value: any, index: number) => boolean) | undefined\n  title?: string\n  useCustomMark?: boolean\n  valueFormatterString?: string\n  width?: number\n  xAxisScaleType?: 'band' | 'point'\n}\n\n// TODO: Remove negative values and use a proper layout to support X-Charts v8\n\nexport const LineChart: React.FC<LineChartProps> = ({\n  areaColor,\n  axisColor,\n  baseline = 'max',\n  chartFor,\n  chartXaxisSx,\n  chartYaxisSx,\n  colors,\n  curveType = 'linear',\n  customLegendVariant,\n  customLegendSx,\n  customLegendBoxSx,\n  customTooltipLabels,\n  datasets,\n  height,\n  isCurrency,\n  isGraphClippingXAxis = false,\n  labels,\n  labelBackgroundColor,\n  labelFontColor,\n  labelFontSize,\n  margin,\n  markHandlers,\n  markStyles,\n  minRange,\n  maxRange,\n  onItemClick,\n  peerAverage,\n  showArea = false,\n  showAverage = false,\n  showAxisHighlight = false,\n  showBars = false,\n  showLegend = false,\n  showMark = true,\n  showMarkLabel = false,\n  showTooltip = false,\n  showXAxis = false,\n  showXAxisTicks = false,\n  showYAxis = false,\n  showYAxisTicks = false,\n  title,\n  useCustomMark = false,\n  valueFormatterString,\n  width,\n  xAxisScaleType,\n}) => {\n  const theme = useTheme()\n\n  // Data for the X axis\n  const xData = datasets.flat().map((item) => item.x)\n  const yData = datasets.flat().map((item) => item.y)\n\n  const average = peerAverage\n    ? peerAverage\n    : Math.round(yData.reduce((value, total) => total + value, 0) / yData.length)\n\n  // Used for the min and max Y axis values\n  const yMin = Math.floor(Math.min(...yData) / 100) * 100\n  const yMax = Math.ceil(Math.max(...yData) / 100) * 100\n\n  const series = datasets.map((data, index) => {\n    return {\n      type: showBars ? 'bar' : 'line',\n      curve: curveType,\n      color: showBars ? theme.palette.chart?.chart6 : (colors[index] ?? theme.palette.primary.main),\n      data: data.map((item) => item.y),\n      area: showArea,\n      baseline: baseline,\n      showMark: true,\n      shape: getMarkerShape(index),\n      valueFormatter: (value: number) =>\n        valueFormatterString ? formatCurrency(value || 0, valueFormatterString) : String(value),\n    }\n  })\n\n  const defaultMargin = {\n    top: 60,\n    right: 35,\n    bottom: 25,\n    left: -10,\n  }\n\n  // Merge default margin with any provided custom margin\n  const chartMargin = {\n    ...defaultMargin,\n    ...margin,\n  }\n\n  let rangeMin = minRange ?? yMin\n  let rangeMax = maxRange ?? yMax\n  if (chartFor === 'networthChart') {\n    const valueRange = yMax - yMin\n\n    const paddingRatio = valueRange < yMax * 0.05 ? 0.25 : 0.2\n    const padding = Math.max(valueRange * paddingRatio, yMax * 0.015)\n    rangeMin = yMin - padding < 0 ? yMin : yMin - padding\n    rangeMax = yMax + padding\n  }\n\n  const getTickInterval = () => {\n    if (chartFor === 'creditOverTime') {\n      return generateEqualIntervals(rangeMin, 850, 5)\n    } else if (chartFor === 'networthChart') {\n      return generateEqualIntervals(rangeMin, rangeMax, 5)\n    }\n    return undefined\n  }\n  return (\n    <Box\n      sx={{\n        position: 'relative',\n        touchAction: 'pan-y', // Allow vertical scrolling\n        '& svg': {\n          touchAction: 'pan-y', // Allow vertical scrolling on SVG\n          userSelect: 'none', // Prevent text selection\n        },\n        '& .recharts-wrapper': {\n          touchAction: 'pan-y', // For Recharts library specifically\n        },\n      }}\n    >\n      <ResponsiveChartContainer\n        height={height}\n        margin={chartMargin}\n        series={series as AllSeriesType[]}\n        sx={{\n          '& .MuiBarLabel-root': {\n            fontSize: 10,\n            fontWeight: 600,\n          },\n          '& .MuiAreaElement-root': {\n            opacity: 0.15,\n          },\n          '& .MuiChartsAxis-tickLabel > tspan': {\n            fontFamily: theme.typography.body2.fontFamily,\n          },\n          '& .MuiLineChart-markLabel': {\n            fontFamily: theme.typography.body2.fontFamily,\n          },\n        }}\n        width={width}\n        xAxis={[{ data: xData, scaleType: xAxisScaleType || (showBars ? 'band' : 'point') }]}\n        yAxis={[\n          {\n            tickInterval: getTickInterval(),\n            min: isGraphClippingXAxis ? -22 : rangeMin,\n            max: rangeMax || 100,\n            colorMap:\n              showArea && series.length < 2\n                ? {\n                    type: 'continuous',\n                    min: rangeMin,\n                    max: rangeMax,\n                    color: [\n                      theme.palette.background.paper,\n                      colors[0] ?? theme.palette.primary.main,\n                    ],\n                  }\n                : undefined,\n            valueFormatter: (value: number) =>\n              valueFormatterString ? formatCurrency(value, valueFormatterString) : String(value),\n            width: 62,\n          },\n        ]}\n      >\n        {/** Provides the average line - positioned first to be behind other elements **/}\n        {showAverage && (\n          <ChartsReferenceLine\n            lineStyle={{\n              stroke: labelBackgroundColor\n                ? theme.palette.neutral.main\n                : theme.palette.neutral.dark,\n              strokeDasharray: '10, 8',\n              strokeWidth: 2,\n            }}\n            y={average}\n          />\n        )}\n\n        {/** Area plot provides gradiant below the line **/}\n        {/* Note: Must be above the LinePlot for some style rules to work */}\n        <AreaPlot\n          onItemClick={onItemClick}\n          {...(areaColor && {\n            slots: {\n              area: (props) => {\n                return (\n                  <g>\n                    <defs>\n                      <linearGradient id=\"customGradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                        <stop offset=\"0%\" stopColor={areaColor} />\n                        <stop offset=\"100%\" stopColor={areaColor} stopOpacity={0.02} />\n                      </linearGradient>\n                    </defs>\n                    <path {...props} fill={`url(#customGradient)`} />\n                  </g>\n                )\n              },\n            },\n          })}\n        />\n\n        {/** Line plot provides the data line **/}\n        <LinePlot\n          onItemClick={onItemClick}\n          slots={{\n            line: (props) => (\n              <CustomLine\n                {...props}\n                lineColor={areaColor ?? props.ownerState.color ?? theme.palette.primary.main}\n              />\n            ),\n          }}\n        />\n\n        {/** Mark plot provides the circles **/}\n        <MarkPlot\n          onItemClick={onItemClick}\n          slots={\n            useCustomMark\n              ? {\n                  mark: (props) => {\n                    return (\n                      <CustomMark\n                        handlers={markHandlers}\n                        labelBackgroundColor={labelBackgroundColor}\n                        labelFontColor={labelFontColor}\n                        labelFontSize={labelFontSize}\n                        showLabel={showMarkLabel}\n                        showMark={showMark || props.dataIndex === datasets[0].length - 1}\n                        style={markStyles?.(props.dataIndex) ?? {}}\n                        valueFormatterString={valueFormatterString}\n                        yData={yData}\n                        {...props}\n                      />\n                    )\n                  },\n                }\n              : undefined\n          }\n        />\n\n        <BarPlot\n          barLabel={(item) => (Number(item.value) > 0 ? `$${item.value}` : null)}\n          borderRadius={10}\n        />\n\n        {/** Provides the X axis line and values **/}\n        <ChartsXAxis\n          disableLine={!showXAxis}\n          disableTicks={!showXAxisTicks}\n          slotProps={\n            axisColor\n              ? {\n                  axisLine: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                  axisTick: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                }\n              : {}\n          }\n          sx={{ ...chartXaxisSx }}\n        />\n\n        {/** Provides the Y axis values **/}\n        <ChartsYAxis\n          disableLine={!showYAxis}\n          disableTicks={!showYAxisTicks}\n          slotProps={\n            axisColor\n              ? {\n                  axisLine: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                  axisTick: {\n                    style: {\n                      stroke: axisColor,\n                    },\n                  },\n                }\n              : {}\n          }\n          sx={{ ...chartYaxisSx }}\n        />\n\n        {/* Add vertical crosshair on hover */}\n        {showAxisHighlight && <ChartsAxisHighlight x=\"line\" />}\n\n        {showTooltip && (\n          <ChartsTooltipContainer trigger=\"axis\">\n            <CustomTooltip\n              customLabels={customTooltipLabels}\n              isCurrency={isCurrency}\n              labels={labels}\n              series={series}\n              valueFormatterString={valueFormatterString}\n            />\n          </ChartsTooltipContainer>\n        )}\n      </ResponsiveChartContainer>\n\n      {showLegend && (\n        <CustomLegend\n          average={showAverage ? average : undefined}\n          customLegendBoxSx={customLegendBoxSx}\n          customLegendVariant={customLegendVariant}\n          labels={labels}\n          series={series}\n          style={{\n            position: 'absolute',\n            top: 16,\n            left: 16,\n            ...customLegendSx,\n          }}\n          title={title}\n          valueFormatterString={valueFormatterString}\n        />\n      )}\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/common/components/charts/LineChart/utils/markerShapes/index.es.js

@@ -1,26 +0,0 @@
-var e = {
-  circle: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
-  square: "M-4,-4L4,-4L4,4L-4,4Z",
-  wye: "M0.6,0.6L0.6,4.5L-0.6,4.5L-0.6,0.6L-4,2.6L-3.4,1.5L-0.6,-0.1L-3.4,-1.5L-4,-2.6L-0.6,-0.6L-0.6,-4.5L0.6,-4.5L0.6,-0.6L4,-2.6L3.4,-1.5L0.6,-0.1L3.4,1.5L4,2.6L0.6,0.6Z",
-  star: "M0,-5L1.1,-1.5L4.8,-1.5L1.8,0.9L2.9,4.5L0,2.2L-2.9,4.5L-1.8,0.9L-4.8,-1.5L-1.1,-1.5Z",
-  cross: "M-1.5,-5L1.5,-5L1.5,-1.5L5,-1.5L5,1.5L1.5,1.5L1.5,5L-1.5,5L-1.5,1.5L-5,1.5L-5,-1.5L-1.5,-1.5Z",
-  triangle: "M0,-5L4.33,3.5L-4.33,3.5Z",
-  diamond: "M0,-5.5L3.9,0L0,5.5L-3.9,0Z"
-}, L = [
-  "circle",
-  "square",
-  "wye",
-  "star",
-  "cross",
-  "triangle",
-  "diamond"
-];
-function a(r) {
-  return L[r % L.length];
-}
-export {
-  e as MARKER_SHAPE_PATHS,
-  a as getMarkerShape
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/LineChart/utils/markerShapes/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../../src/common/components/charts/linechart/utils/markerShapes.ts"],"sourcesContent":["export type MarkerShape = 'circle' | 'square' | 'wye' | 'star' | 'cross' | 'triangle' | 'diamond'\n\n// SVG path data for each shape, centered at origin, sized to match current ~9px circle\nexport const MARKER_SHAPE_PATHS: Record<MarkerShape, string> = {\n  circle: 'M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0',\n  square: 'M-4,-4L4,-4L4,4L-4,4Z',\n  wye: 'M0.6,0.6L0.6,4.5L-0.6,4.5L-0.6,0.6L-4,2.6L-3.4,1.5L-0.6,-0.1L-3.4,-1.5L-4,-2.6L-0.6,-0.6L-0.6,-4.5L0.6,-4.5L0.6,-0.6L4,-2.6L3.4,-1.5L0.6,-0.1L3.4,1.5L4,2.6L0.6,0.6Z',\n  star: 'M0,-5L1.1,-1.5L4.8,-1.5L1.8,0.9L2.9,4.5L0,2.2L-2.9,4.5L-1.8,0.9L-4.8,-1.5L-1.1,-1.5Z',\n  cross:\n    'M-1.5,-5L1.5,-5L1.5,-1.5L5,-1.5L5,1.5L1.5,1.5L1.5,5L-1.5,5L-1.5,1.5L-5,1.5L-5,-1.5L-1.5,-1.5Z',\n  triangle: 'M0,-5L4.33,3.5L-4.33,3.5Z',\n  diamond: 'M0,-5.5L3.9,0L0,5.5L-3.9,0Z',\n}\n\n// Default shape sequence assigned to series by index\nconst DEFAULT_SHAPES: MarkerShape[] = [\n  'circle',\n  'square',\n  'wye',\n  'star',\n  'cross',\n  'triangle',\n  'diamond',\n]\n\nexport function getMarkerShape(seriesIndex: number): MarkerShape {\n  return DEFAULT_SHAPES[seriesIndex % DEFAULT_SHAPES.length]\n}\n"],"mappings":"AAGA,IAAa,IAAkD;AAAA,EAC7D,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OACE;AAAA,EACF,UAAU;AAAA,EACV,SAAS;AACX,GAGM,IAAgC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,SAAgB,EAAe,GAAkC;AAC/D,SAAO,EAAe,IAAc,EAAe,MAAA;AACrD"}

package/dist/common/components/charts/StackedLineChart/CategoryIconLabel/index.es.js

@@ -1,31 +0,0 @@
-import { buildDynamicCopy as m } from "../../../../../core/utils/Localization/index.es.js";
-import { useCategoryStore as c, useGlobalCopyStore as n } from "../../../../context/hooks/index.es.js";
-import "react";
-import l from "@mui/material/Stack";
-import { CategoryIcon as y, Text as g } from "@mxenabled/mxui";
-import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import s from "@mui/material/Box";
-var I = ({ categoryGuid: e, topLevelCategoryGuid: t }) => {
-  const { categories: a } = n(), { getCategoryName: i } = c(), r = i(e);
-  return /* @__PURE__ */ p(l, {
-    alignItems: "center",
-    direction: "column",
-    gap: "8",
-    justifyContent: "center",
-    mb: 4,
-    children: [/* @__PURE__ */ o(s, {
-      "aria-label": m(a.category_icon_label_aria, r),
-      mb: 4,
-      role: "img",
-      children: /* @__PURE__ */ o(y, { categoryGuid: t })
-    }), /* @__PURE__ */ o(g, {
-      variant: "body1",
-      children: r
-    })]
-  });
-};
-export {
-  I as CategoryIconLabel
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/StackedLineChart/CategoryIconLabel/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/common/components/charts/stackedlinechart/CategoryIconLabel.tsx"],"sourcesContent":["import React from 'react'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { useCategoryStore, useGlobalCopyStore } from '../../../context'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\n\nexport const CategoryIconLabel: React.FC<{\n  categoryGuid: string\n  topLevelCategoryGuid: string\n}> = ({ categoryGuid, topLevelCategoryGuid }) => {\n  const { categories: copy } = useGlobalCopyStore()\n  const { getCategoryName } = useCategoryStore()\n  const categoryName = getCategoryName(categoryGuid)\n\n  return (\n    <Stack alignItems=\"center\" direction=\"column\" gap=\"8\" justifyContent=\"center\" mb={4}>\n      <Box\n        aria-label={buildDynamicCopy(copy.category_icon_label_aria, categoryName) as string}\n        mb={4}\n        role=\"img\"\n      >\n        <CategoryIcon categoryGuid={topLevelCategoryGuid} />\n      </Box>\n      <Text variant=\"body1\">{categoryName}</Text>\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAa,IAAA,CAGP,EAAE,cAAA,GAAc,sBAAA,EAAA,MAA2B;AAC/C,QAAM,EAAE,YAAY,EAAA,IAAS,EAAmB,GAC1C,EAAE,iBAAA,EAAA,IAAoB,EAAiB,GACvC,IAAe,EAAgB,CAAY;AAEjD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,WAAU;AAAA,IAAS,KAAI;AAAA,IAAI,gBAAe;AAAA,IAAS,IAAI;AAAA,cAAlF,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,EAAiB,EAAK,0BAA0B,CAAY;AAAA,MACxE,IAAI;AAAA,MACJ,MAAK;AAAA,gBAEL,gBAAA,EAAC,GAAD,EAAc,cAAc,EAAuB,CAAA;AAAA,IAChD,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,SAAQ;AAAA,gBAAS;AAAA,IAAmB,CAAA,CACrC;AAAA;AAEX"}

package/dist/common/components/charts/StackedLineChart/CustomAreaTooltip/index.es.js

@@ -1,97 +0,0 @@
-import { CurrencyText as u } from "../../../CurrencyText/index.es.js";
-import { CategoryIconLabel as j } from "../CategoryIconLabel/index.es.js";
-import R, { useEffect as E, useRef as G, useState as S } from "react";
-import { observer as B } from "mobx-react-lite";
-import { Text as h } from "@mxenabled/mxui";
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import { useTheme as I } from "@mui/material/styles";
-import y from "@mui/material/Box";
-import L from "@mui/material/Card";
-import z from "@mui/material/CardContent";
-import x from "@mui/material/Divider";
-import g from "@mui/material/Grid";
-var F = ({ categoryGuids: { guid: b, topLevelGuid: C }, hoveredAreaData: l, cursorPosition: e, chartContainerRef: a }) => {
-  const w = I(), f = G(null), [s, v] = S({
-    x: e.x,
-    y: e.y
-  });
-  if (E(() => {
-    (() => {
-      const o = f.current, p = a.current;
-      if (!o || !p) return;
-      const i = o.getBoundingClientRect(), c = p.getBoundingClientRect();
-      let n = e.x, d = e.y;
-      n + i.width * 2 > c.right ? n = e.x - i.width : n - i.width < c.left && (n = e.x), d + i.height * 2 > c.bottom && (d = e.y - i.height), v({
-        x: n,
-        y: d
-      });
-    })();
-  }, [e, a]), !l) return null;
-  const T = l.reduce((r, o) => r + o.y, 0);
-  return /* @__PURE__ */ t(L, {
-    ref: f,
-    sx: {
-      position: "absolute",
-      top: s.y,
-      left: s.x,
-      width: 250,
-      pointerEvents: "none"
-    },
-    children: /* @__PURE__ */ m(z, { children: [
-      /* @__PURE__ */ m(y, {
-        alignItems: "center",
-        display: "flex",
-        flexDirection: "column",
-        children: [
-          /* @__PURE__ */ t(j, {
-            categoryGuid: b,
-            topLevelCategoryGuid: C
-          }),
-          /* @__PURE__ */ t(h, {
-            variant: "body2",
-            children: `${l.length}-month total`
-          }),
-          /* @__PURE__ */ t(u, {
-            amount: T,
-            bold: !0,
-            formatString: "0,0",
-            variant: "body2"
-          })
-        ]
-      }),
-      /* @__PURE__ */ t(x, { sx: {
-        my: 16,
-        width: "100%"
-      } }),
-      /* @__PURE__ */ t(g, {
-        container: !0,
-        children: l.map((r, o) => /* @__PURE__ */ m(R.Fragment, { children: [o > 0 && o % 3 === 0 && /* @__PURE__ */ t(x, { sx: {
-          my: 16,
-          width: "100%"
-        } }), /* @__PURE__ */ t(g, {
-          size: 4,
-          children: /* @__PURE__ */ m(y, {
-            alignItems: "center",
-            display: "flex",
-            flexDirection: "column",
-            children: [/* @__PURE__ */ t(h, {
-              color: w.palette.text.secondary,
-              variant: "caption",
-              children: r.x
-            }), /* @__PURE__ */ t(u, {
-              amount: r.y,
-              bold: !0,
-              formatString: "0,0",
-              variant: "body1"
-            })]
-          })
-        })] }, o))
-      })
-    ] })
-  });
-}, N = B(F);
-export {
-  N as default
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/StackedLineChart/CustomAreaTooltip/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/common/components/charts/stackedlinechart/CustomAreaTooltip.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport Divider from '@mui/material/Divider'\nimport Grid from '@mui/material/Grid'\nimport { Text } from '@mxenabled/mxui'\nimport { useTheme } from '@mui/material/styles'\n\nimport { CategoryIconLabel } from './CategoryIconLabel'\nimport { CurrencyText } from '../../CurrencyText'\n\ntype DataPoint = { x: string | number; y: number }\n\nconst CustomAreaTooltip: React.FC<{\n  categoryGuids: { guid: string; topLevelGuid: string }\n  hoveredAreaData: DataPoint[]\n  cursorPosition: { x: number; y: number }\n  chartContainerRef: React.RefObject<HTMLDivElement | null>\n}> = ({\n  categoryGuids: { guid, topLevelGuid },\n  hoveredAreaData,\n  cursorPosition,\n  chartContainerRef,\n}) => {\n  const theme = useTheme()\n  const tooltipRef = useRef<HTMLDivElement>(null)\n  const [adjustedPos, setAdjustedPos] = useState({ x: cursorPosition.x, y: cursorPosition.y })\n\n  useEffect(() => {\n    const adjustTooltipPosition = () => {\n      const tooltipEl = tooltipRef.current\n      const chartEl = chartContainerRef.current\n\n      if (!tooltipEl || !chartEl) return\n\n      const tooltipRect = tooltipEl.getBoundingClientRect()\n      const containerRect = chartEl.getBoundingClientRect()\n\n      let newX = cursorPosition.x\n      let newY = cursorPosition.y\n\n      // If the tooltip overflows the right or left edge\n      if (newX + tooltipRect.width * 2 > containerRect.right) {\n        // Move the tooltip to the left of the cursor\n        newX = cursorPosition.x - tooltipRect.width\n      } else if (newX - tooltipRect.width < containerRect.left) {\n        // Move the tooltip to the right of the cursor\n        newX = cursorPosition.x\n      }\n\n      // If the tooltip overflows the bottom edge\n      if (newY + tooltipRect.height * 2 > containerRect.bottom) {\n        // Move the tooltip to the top of the cursor\n        newY = cursorPosition.y - tooltipRect.height\n      }\n\n      setAdjustedPos({ x: newX, y: newY })\n    }\n\n    adjustTooltipPosition()\n  }, [cursorPosition, chartContainerRef])\n\n  if (!hoveredAreaData) return null\n\n  const seriesSum = hoveredAreaData.reduce((sum, dataPoint) => sum + dataPoint.y, 0)\n\n  return (\n    <Card\n      ref={tooltipRef}\n      sx={{\n        position: 'absolute',\n        top: adjustedPos.y,\n        left: adjustedPos.x,\n        width: 250,\n        pointerEvents: 'none',\n      }}\n    >\n      <CardContent>\n        <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n          <CategoryIconLabel categoryGuid={guid} topLevelCategoryGuid={topLevelGuid} />\n          <Text variant=\"body2\">{`${hoveredAreaData.length}-month total`}</Text>\n          <CurrencyText amount={seriesSum} bold={true} formatString=\"0,0\" variant=\"body2\" />\n        </Box>\n\n        <Divider sx={{ my: 16, width: '100%' }} />\n\n        <Grid container={true}>\n          {hoveredAreaData.map((dataPoint, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && index % 3 === 0 && <Divider sx={{ my: 16, width: '100%' }} />}\n              <Grid size={4}>\n                <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n                  <Text color={theme.palette.text.secondary} variant=\"caption\">\n                    {dataPoint.x}\n                  </Text>\n                  <CurrencyText\n                    amount={dataPoint.y}\n                    bold={true}\n                    formatString=\"0,0\"\n                    variant=\"body1\"\n                  />\n                </Box>\n              </Grid>\n            </React.Fragment>\n          ))}\n        </Grid>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default observer(CustomAreaTooltip)\n"],"mappings":"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"}

package/dist/common/components/charts/StackedLineChart/CustomLegend/index.es.js

@@ -1,54 +0,0 @@
-import { CategoryColors as t } from "../../../../../core/constants/Category/index.es.js";
-import { useCategoryStore as x } from "../../../../context/hooks/index.es.js";
-import { useScreenSize as y } from "../../../../hooks/useScreenSize/index.es.js";
-import "react";
-import h from "@mui/material/Stack";
-import { Text as b } from "@mxenabled/mxui";
-import k from "@mui/material/Button";
-import { jsx as e, jsxs as j } from "react/jsx-runtime";
-import B from "@mui/material/Box";
-var N = ({ sx: m, categoryGuids: c, hoveredLegend: n, legendRef: p, onHoverLegend: a, onClickLegend: l }) => {
-  const { isMobile: i } = y(), { getCategoryName: f } = x();
-  return /* @__PURE__ */ e(h, {
-    direction: "row",
-    flexWrap: "wrap",
-    gap: i ? 2 : 6,
-    justifyContent: "start",
-    ref: p,
-    sx: m,
-    children: c.map(({ guid: o, top_level_guid: d }) => {
-      const s = n === o, u = t[o], C = t[d], r = u ?? C ?? t.default, g = r + "33";
-      return /* @__PURE__ */ j(k, {
-        onClick: () => l(o),
-        onMouseEnter: () => a(o),
-        onMouseLeave: () => a(null),
-        sx: {
-          color: "text.primary",
-          fontWeight: "normal",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          paddingX: 8,
-          paddingY: 4,
-          borderRadius: 1,
-          opacity: s ? 1 : 0.7
-        },
-        children: [/* @__PURE__ */ e(B, { sx: {
-          width: 16,
-          height: 16,
-          marginRight: i ? 5 : 10,
-          borderRadius: "2px",
-          backgroundColor: n ? s ? r : g : r
-        } }), /* @__PURE__ */ e(b, {
-          variant: "body1",
-          children: f(o)
-        })]
-      }, o);
-    })
-  });
-};
-export {
-  N as CustomLegend
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/StackedLineChart/CustomLegend/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/common/components/charts/stackedlinechart/CustomLegend.tsx"],"sourcesContent":["import React from 'react'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport { Text } from '@mxenabled/mxui'\n\nimport { useScreenSize } from '../../../hooks'\nimport { CategoryColors } from '../../../../core/constants'\nimport { useCategoryStore } from '../../../context'\n\ninterface CustomLegendProps {\n  sx?: object\n  categoryGuids: { guid: string; top_level_guid: string }[]\n  hoveredLegend: string | null\n  legendRef?: (instance: HTMLElement | null) => void\n  onHoverLegend: (label: string | null) => void\n  onClickLegend: (label: string | null) => void\n}\n\nexport const CustomLegend: React.FC<CustomLegendProps> = ({\n  sx,\n  categoryGuids,\n  hoveredLegend,\n  legendRef,\n  onHoverLegend,\n  onClickLegend,\n}) => {\n  const { isMobile } = useScreenSize()\n  const { getCategoryName } = useCategoryStore()\n\n  return (\n    <Stack\n      direction=\"row\"\n      flexWrap=\"wrap\"\n      gap={isMobile ? 2 : 6}\n      justifyContent=\"start\"\n      ref={legendRef}\n      sx={sx}\n    >\n      {categoryGuids.map(({ guid, top_level_guid }) => {\n        const isHovered = hoveredLegend === guid\n        const categoryColor = CategoryColors[guid]\n        const topLevelCategoryColor = CategoryColors[top_level_guid]\n        const baseBackground = categoryColor ?? topLevelCategoryColor ?? CategoryColors.default\n        const transparentBackground = baseBackground + '33'\n        const hoveredBackground = isHovered ? baseBackground : transparentBackground\n        const backgroundColor = hoveredLegend ? hoveredBackground : baseBackground\n\n        return (\n          <Button\n            key={guid}\n            onClick={() => onClickLegend(guid)}\n            onMouseEnter={() => onHoverLegend(guid)}\n            onMouseLeave={() => onHoverLegend(null)}\n            sx={{\n              color: 'text.primary',\n              fontWeight: 'normal',\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              paddingX: 8,\n              paddingY: 4,\n              borderRadius: 1,\n              opacity: isHovered ? 1 : 0.7,\n            }}\n          >\n            <Box\n              sx={{\n                width: 16,\n                height: 16,\n                marginRight: isMobile ? 5 : 10,\n                borderRadius: '2px',\n                backgroundColor,\n              }}\n            />\n            <Text variant=\"body1\">{getCategoryName(guid)}</Text>\n          </Button>\n        )\n      })}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;;AAmBA,IAAa,IAAA,CAA6C,EACxD,IAAA,GACA,eAAA,GACA,eAAA,GACA,WAAA,GACA,eAAA,GACA,eAAA,EAAA,MACI;AACJ,QAAM,EAAE,UAAA,EAAA,IAAa,EAAc,GAC7B,EAAE,iBAAA,EAAA,IAAoB,EAAiB;AAE7C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,UAAS;AAAA,IACT,KAAK,IAAW,IAAI;AAAA,IACpB,gBAAe;AAAA,IACf,KAAK;AAAA,IACD,IAAA;AAAA,cAEH,EAAc,IAAA,CAAK,EAAE,MAAA,GAAM,gBAAA,EAAA,MAAqB;AAC/C,YAAM,IAAY,MAAkB,GAC9B,IAAgB,EAAe,CAAA,GAC/B,IAAwB,EAAe,CAAA,GACvC,IAAiB,KAAiB,KAAyB,EAAe,SAC1E,IAAwB,IAAiB;AAI/C,aACE,gBAAA,EAAC,GAAD;AAAA,QAEE,SAAA,MAAe,EAAc,CAAI;AAAA,QACjC,cAAA,MAAoB,EAAc,CAAI;AAAA,QACtC,cAAA,MAAoB,EAAc,IAAI;AAAA,QACtC,IAAI;AAAA,UACF,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,UAAU;AAAA,UACV,cAAc;AAAA,UACd,SAAS,IAAY,IAAI;AAAA,QAC3B;AAAA,kBAfF,CAiBE,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,aAAa,IAAW,IAAI;AAAA,UAC5B,cAAc;AAAA,UACd,iBA1BgB,IADE,IAAY,IAAiB,IACK;AAAA,QA2BtD,EACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBAAS,EAAgB,CAAI;AAAA,QAAQ,CAAA,CAC7C;AAAA,SA1BD,CA0BC;AAAA,IAEZ,CAAC;AAAA,EACI,CAAA;AAEX"}

package/dist/common/components/charts/StackedLineChart/CustomPointTooltip/index.es.js

@@ -1,51 +0,0 @@
-import { DATE_FORMATS_INTL as s, formatDate as c } from "../../../../../core/constants/DateFormats/index.es.js";
-import { CurrencyText as u } from "../../../CurrencyText/index.es.js";
-import { CategoryIconLabel as x } from "../CategoryIconLabel/index.es.js";
-import "react";
-import { Text as T } from "@mxenabled/mxui";
-import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import { useTheme as g } from "@mui/material/styles";
-import C from "@mui/material/Box";
-import h from "@mui/material/Card";
-import I from "@mui/material/CardContent";
-import { useItemTooltip as v } from "@mui/x-charts/ChartsTooltip";
-var M = ({ categoryGuids: { guid: a, topLevelGuid: m }, series: l, xData: d }) => {
-  const o = v(), f = g();
-  if (!o?.identifier) return null;
-  const { dataIndex: r, seriesId: e } = o.identifier;
-  if (r == null || !e) return null;
-  const i = l.find((p) => p.id === e)?.data?.[r], n = d?.[r];
-  return i === void 0 || !n ? null : /* @__PURE__ */ t(h, {
-    sx: {
-      pt: 4,
-      px: 8
-    },
-    children: /* @__PURE__ */ t(I, { children: /* @__PURE__ */ y(C, {
-      alignItems: "center",
-      display: "flex",
-      flexDirection: "column",
-      children: [
-        /* @__PURE__ */ t(x, {
-          categoryGuid: a,
-          topLevelCategoryGuid: m
-        }),
-        /* @__PURE__ */ t(T, {
-          color: f.palette.text.secondary,
-          variant: "body2",
-          children: c(n, s.MONTH_SHORT_YEAR)
-        }),
-        /* @__PURE__ */ t(u, {
-          amount: String(i),
-          bold: !0,
-          formatString: "0,0",
-          variant: "body1"
-        })
-      ]
-    }) })
-  });
-};
-export {
-  M as CustomPointTooltip
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/StackedLineChart/CustomPointTooltip/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/common/components/charts/stackedlinechart/CustomPointTooltip.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport { useTheme } from '@mui/material/styles'\n\nimport { useItemTooltip } from '@mui/x-charts/ChartsTooltip'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { CategoryIconLabel } from './CategoryIconLabel'\nimport { CurrencyText } from '../../CurrencyText'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\n\ninterface CustomPointTooltipProps {\n  categoryGuids: { guid: string; topLevelGuid: string }\n  series: Array<{ id: string; data: number[] }>\n  xData: Date[]\n}\n\n// Custom tooltip for hovering on line points\nexport const CustomPointTooltip: React.FC<CustomPointTooltipProps> = ({\n  categoryGuids: { guid, topLevelGuid },\n  series: allSeries,\n  xData,\n}) => {\n  const tooltip = useItemTooltip()\n  const theme = useTheme()\n\n  if (!tooltip?.identifier) return null\n\n  const { dataIndex, seriesId } = tooltip.identifier\n  if (dataIndex == null || !seriesId) return null\n\n  const seriesData = allSeries.find((s) => s.id === seriesId)\n  const dataValue = seriesData?.data?.[dataIndex]\n  const dataDate = xData?.[dataIndex]\n\n  if (dataValue === undefined || !dataDate) return null\n\n  return (\n    <Card sx={{ pt: 4, px: 8 }}>\n      <CardContent>\n        <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n          <CategoryIconLabel categoryGuid={guid} topLevelCategoryGuid={topLevelGuid} />\n          <Text color={theme.palette.text.secondary} variant=\"body2\">\n            {formatDate(dataDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR)}\n          </Text>\n          <CurrencyText amount={String(dataValue)} bold={true} formatString=\"0,0\" variant=\"body1\" />\n        </Box>\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,IAAA,CAAyD,EACpE,eAAe,EAAE,MAAA,GAAM,cAAA,EAAA,GACvB,QAAQ,GACR,OAAA,EAAA,MACI;AACJ,QAAM,IAAU,EAAe,GACzB,IAAQ,EAAS;AAEvB,MAAI,CAAC,GAAS,WAAY,QAAO;AAEjC,QAAM,EAAE,WAAA,GAAW,UAAA,EAAA,IAAa,EAAQ;AACxC,MAAI,KAAa,QAAQ,CAAC,EAAU,QAAO;AAG3C,QAAM,IADa,EAAU,KAAA,CAAM,MAAM,EAAE,OAAO,CAChC,GAAY,OAAO,CAAA,GAC/B,IAAW,IAAQ,CAAA;AAEzB,SAAI,MAAc,UAAa,CAAC,IAAiB,OAG/C,gBAAA,EAAC,GAAD;AAAA,IAAM,IAAI;AAAA,MAAE,IAAI;AAAA,MAAG,IAAI;AAAA,IAAE;AAAA,cACvB,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MAAK,YAAW;AAAA,MAAS,SAAQ;AAAA,MAAO,eAAc;AAAA,gBAAtD;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAmB,cAAc;AAAA,UAAM,sBAAsB;AAAA,QAAe,CAAA;AAAA,QAC5E,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAO,EAAM,QAAQ,KAAK;AAAA,UAAW,SAAQ;AAAA,oBAChD,EAAW,GAAU,EAAkB,gBAAgB;AAAA,QACpD,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAc,QAAQ,OAAO,CAAS;AAAA,UAAG,MAAM;AAAA,UAAM,cAAa;AAAA,UAAM,SAAQ;AAAA,QAAS,CAAA;AAAA,MACtF;AAAA,OACM,CAAA;AAAA,EACT,CAAA;AAEV"}

package/dist/common/components/charts/StackedLineChart/index.es.js

@@ -1,208 +0,0 @@
-import { DATE_FORMATS_INTL as T, formatDate as L } from "../../../../core/constants/DateFormats/index.es.js";
-import { useScreenSize as ie } from "../../../hooks/useScreenSize/index.es.js";
-import { formatCurrency as k } from "../../../../core/utils/NumberFormatting/index.es.js";
-import { useDimensions as se } from "../../../hooks/useDimensions/index.es.js";
-import ne from "../stackedlinechart/CustomAreaTooltip/index.es.js";
-import { CustomLegend as ce } from "../stackedlinechart/CustomLegend/index.es.js";
-import { CustomPointTooltip as le } from "../stackedlinechart/CustomPointTooltip/index.es.js";
-import n from "react";
-import de from "@mui/material/Stack";
-import { jsx as i, jsxs as me } from "react/jsx-runtime";
-import { useTheme as ue } from "@mui/material/styles";
-import pe from "@mui/material/Box";
-import he from "numeral";
-import { ChartsTooltipContainer as ge } from "@mui/x-charts/ChartsTooltip";
-import { LineChart as fe } from "@mui/x-charts/LineChart";
-var Ge = ({ onHoverArea: E, onHoverPoint: R, onHoverLegend: P, onClickLegend: y, stackedDatasets: r, unstackedDatasets: c = [], availableHeight: x = 0, minimumHeight: G = 350 }) => {
-  const I = ue(), { isMobile: b } = ie(), [w, { height: A }] = se(), M = n.useRef(null), [F, O] = n.useState(0);
-  n.useEffect(() => {
-    const e = Math.max(x - A, G);
-    O(e);
-  }, [x, A]);
-  const [p, N] = n.useState(null), [B, l] = n.useState({
-    hoveredSeriesId: null,
-    hoveredAreaData: null,
-    isAreaHovered: !1,
-    cursorPos: {
-      x: 0,
-      y: 0
-    }
-  }), { hoveredSeriesId: s, hoveredAreaData: _, isAreaHovered: D, cursorPos: d } = B, S = D && s && _, H = !S, h = [...r, ...c], W = h[0]?.dataset.length ?? 0, g = h.flatMap((e) => e.dataset.map((t) => t.x)), Y = h.flatMap((e) => e.dataset.map((t) => t.y)), $ = r[0]?.dataset?.map((e, t) => r.reduce((o, a) => o + a.dataset[t]?.y || 0, 0)) ?? [0], j = Math.max(...$), z = Math.max(...c.flatMap((e) => e.dataset.map((t) => t.y))), X = Math.floor(Math.min(...Y) / 100) * 100, q = Math.ceil(Math.max(j, z) / 100) * 100, m = r.map((e, t) => ({
-    id: `stacked-${t}`,
-    guid: e.category_guid,
-    top_level_guid: e.top_level_category_guid,
-    area: !0,
-    color: r[t].category_color ?? I.palette.primary.main,
-    data: e.dataset.map((o) => o.y),
-    label: r[t].category_name,
-    stack: "total",
-    type: "line",
-    highlightScope: { highlight: "item" },
-    valueFormatter: (o) => k(o, "0,0")
-  })), C = c.map((e, t) => ({
-    id: `unstacked-${t}`,
-    guid: e.category_guid,
-    top_level_guid: e.top_level_category_guid,
-    area: !1,
-    color: e.category_color,
-    data: e.dataset.map((o) => o.y),
-    label: e.category_name,
-    type: "line",
-    valueFormatter: (o) => k(o, "0,0")
-  })), f = [...m, ...C], J = [...m.map(({ guid: e, top_level_guid: t }) => ({
-    guid: e,
-    top_level_guid: t
-  })), ...C.map(({ guid: e, top_level_guid: t }) => ({
-    guid: e,
-    top_level_guid: t
-  }))], u = (e) => {
-    const t = e.startsWith("stacked-") ? r[parseInt(e.split("-")[1])] : c[parseInt(e.split("-")[1])];
-    return {
-      guid: t?.category_guid,
-      topLevelGuid: t?.top_level_category_guid
-    };
-  }, K = (e) => {
-    N(e), P?.(e ?? "");
-  }, Q = (e) => {
-    y?.(e ?? "");
-  }, U = () => {
-    const e = u(String(s)).guid;
-    e && y?.(e);
-  }, V = (e) => {
-    const t = String(e?.seriesId), o = u(t).guid, a = f.find((v) => v.id === t), te = a && e?.dataIndex !== void 0, oe = a && e?.dataIndex === void 0;
-    if (te)
-      l({
-        hoveredSeriesId: t,
-        hoveredAreaData: null,
-        isAreaHovered: !1,
-        cursorPos: d
-      }), R?.(o);
-    else if (oe) {
-      const v = a?.data.map((re, ae) => ({
-        x: g[ae],
-        y: re
-      })) ?? [];
-      l({
-        hoveredSeriesId: t,
-        hoveredAreaData: v,
-        isAreaHovered: !0,
-        cursorPos: d
-      }), E?.(o);
-    } else l({
-      hoveredSeriesId: null,
-      hoveredAreaData: null,
-      isAreaHovered: !1,
-      cursorPos: d
-    });
-  }, Z = (e) => {
-    if (e.target instanceof Element && e.target.classList[0]?.includes("MuiMarkElement-root")) return;
-    const t = e.currentTarget.getBoundingClientRect();
-    l((o) => ({
-      ...o,
-      cursorPos: {
-        x: e.clientX - t.left,
-        y: e.clientY - t.top
-      }
-    }));
-  }, ee = {
-    p: 4,
-    "& .MuiBarLabel-root": {
-      fontSize: 10,
-      fontWeight: 600
-    },
-    "& .MuiAreaElement-root": {
-      opacity: 0.4,
-      transition: "opacity 0.3s ease"
-    },
-    "& .MuiAreaElement-root:hover": { opacity: 1 },
-    '& [class*="MuiLineElement-series-unstacked-"]': { strokeWidth: 3 },
-    ...p && m.reduce((e, t, o) => {
-      const a = `.MuiAreaElement-series-stacked-${o}`;
-      return e[a] = { opacity: m[o].guid === p ? 0.9 : 0.2 }, e;
-    }, {})
-  };
-  return /* @__PURE__ */ i(pe, {
-    onMouseMove: Z,
-    ref: M,
-    sx: {
-      position: "relative",
-      touchAction: "pan-y",
-      "& svg": {
-        touchAction: "pan-y",
-        userSelect: "none"
-      },
-      "& .recharts-wrapper": { touchAction: "pan-y" }
-    },
-    children: /* @__PURE__ */ me(de, {
-      direction: {
-        xs: "column",
-        md: "column"
-      },
-      spacing: {
-        xs: 0,
-        md: 4
-      },
-      sx: {
-        width: "100%",
-        position: "relative"
-      },
-      children: [
-        /* @__PURE__ */ i(fe, {
-          height: F,
-          hideLegend: !0,
-          margin: {
-            bottom: 24,
-            left: 12,
-            right: 54,
-            top: 48
-          },
-          onAreaClick: U,
-          onHighlightChange: V,
-          series: f,
-          skipAnimation: !0,
-          slotProps: { tooltip: { trigger: H ? "item" : "none" } },
-          slots: { tooltip: H && s ? (e) => /* @__PURE__ */ i(ge, { children: /* @__PURE__ */ i(le, {
-            ...e,
-            categoryGuids: u(s),
-            series: f,
-            xData: g
-          }) }) : void 0 },
-          sx: ee,
-          xAxis: [{
-            data: g,
-            scaleType: "time",
-            valueFormatter: (e) => L(e, T.MONTH_SHORT_YEAR),
-            tickNumber: W
-          }],
-          yAxis: [{
-            min: X,
-            max: q || 100,
-            valueFormatter: (e) => he(e).format("0a")
-          }]
-        }),
-        /* @__PURE__ */ i(ce, {
-          categoryGuids: J,
-          hoveredLegend: p,
-          legendRef: w,
-          onClickLegend: Q,
-          onHoverLegend: K,
-          sx: { px: b ? 0 : 24 }
-        }),
-        S && /* @__PURE__ */ i(ne, {
-          categoryGuids: u(s),
-          chartContainerRef: M,
-          cursorPosition: d,
-          hoveredAreaData: _.map((e) => ({
-            ...e,
-            x: L(e.x, T.MONTH_SHORT_YEAR)
-          }))
-        })
-      ]
-    })
-  });
-};
-export {
-  Ge as StackedLineChart
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/StackedLineChart/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/charts/StackedLineChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport numeral from 'numeral'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { LineSeriesType, HighlightItemData } from '@mui/x-charts'\nimport { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip'\nimport { LineChart } from '@mui/x-charts/LineChart'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { useScreenSize } from '../../hooks/useScreenSize'\nimport { useDimensions } from '../../hooks/useDimensions'\nimport CustomAreaTooltip from './stackedlinechart/CustomAreaTooltip'\nimport { CustomLegend } from './stackedlinechart/CustomLegend'\nimport { CustomPointTooltip } from './stackedlinechart/CustomPointTooltip'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ntype DataPoint = { x: Date; y: number }\ntype Dataset = DataPoint[]\n\ninterface StackedLineChartData {\n  top_level_category_guid: string\n  category_guid: string\n  category_name: string\n  category_color: string\n  dataset: Dataset\n}\n\ninterface StackedLineChartProps {\n  stackedDatasets: StackedLineChartData[]\n  unstackedDatasets?: StackedLineChartData[]\n  onHoverArea?: (category: string) => void\n  onHoverPoint?: (category: string) => void\n  onHoverLegend?: (category: string) => void\n  onClickLegend?: (category: string) => void\n  availableHeight?: number\n  minimumHeight?: number\n}\n\n// TODO: Use v8 X-Charts built-in features to avoid custom implementation\n\nexport const StackedLineChart: React.FC<StackedLineChartProps> = ({\n  onHoverArea,\n  onHoverPoint,\n  onHoverLegend,\n  onClickLegend,\n  stackedDatasets,\n  unstackedDatasets = [],\n  availableHeight = 0,\n  minimumHeight = 350,\n}) => {\n  const theme = useTheme()\n  const { isMobile } = useScreenSize()\n  const [legendRef, { height: legendHeight }] = useDimensions()\n  const chartContainerRef = React.useRef<HTMLDivElement>(null)\n  const [chartHeight, setChartHeight] = React.useState<number>(0)\n\n  // Control responsive chart height based on available height\n  React.useEffect(() => {\n    const newChartHeight = Math.max(availableHeight - legendHeight, minimumHeight)\n    setChartHeight(newChartHeight)\n  }, [availableHeight, legendHeight])\n\n  const [hoveredLegend, setHoveredLegend] = React.useState<string | null>(null)\n  const [hoverState, setHoverState] = React.useState({\n    hoveredSeriesId: null as string | null,\n    hoveredAreaData: null as DataPoint[] | null,\n    isAreaHovered: false,\n    cursorPos: { x: 0, y: 0 },\n  })\n\n  const { hoveredSeriesId, hoveredAreaData, isAreaHovered, cursorPos } = hoverState\n  const showAreaTooltip = isAreaHovered && hoveredSeriesId && hoveredAreaData\n  const showPointTooltip = !showAreaTooltip\n\n  const datasets = [...stackedDatasets, ...unstackedDatasets]\n  const xTicks = datasets[0]?.dataset.length ?? 0\n  const xData = datasets.flatMap((data) => data.dataset.map((d) => d.x))\n  const yData = datasets.flatMap((data) => data.dataset.map((d) => d.y))\n\n  // Calculate max cumulative heights for stacked datasets\n  const cumulativeHeights = stackedDatasets[0]?.dataset?.map((_, i) =>\n    stackedDatasets.reduce((sum, dataset) => sum + dataset.dataset[i]?.y || 0, 0),\n  ) ?? [0]\n  const stackedMax = Math.max(...cumulativeHeights)\n  const unstackedMax = Math.max(\n    ...unstackedDatasets.flatMap((data) => data.dataset.map((d) => d.y)),\n  )\n\n  const yMin = Math.floor(Math.min(...yData) / 100) * 100\n  const yMax = Math.ceil(Math.max(stackedMax, unstackedMax) / 100) * 100\n\n  const stackedSeries = stackedDatasets.map((data, index) => ({\n    id: `stacked-${index}`,\n    guid: data.category_guid,\n    top_level_guid: data.top_level_category_guid,\n    area: true,\n    color: stackedDatasets[index].category_color ?? theme.palette.primary.main,\n    data: data.dataset.map((d) => d.y),\n    label: stackedDatasets[index].category_name,\n    stack: 'total',\n    type: 'line',\n    highlightScope: { highlight: 'item' },\n    valueFormatter: (value: number) => formatCurrency(value, '0,0'),\n  }))\n\n  const unstackedSeries = unstackedDatasets.map((data, index) => ({\n    id: `unstacked-${index}`,\n    guid: data.category_guid,\n    top_level_guid: data.top_level_category_guid,\n    area: false,\n    color: data.category_color,\n    data: data.dataset.map((d) => d.y),\n    label: data.category_name,\n    type: 'line',\n    valueFormatter: (value: number) => formatCurrency(value, '0,0'),\n  }))\n\n  const series = [...stackedSeries, ...unstackedSeries]\n  const guids = [\n    ...stackedSeries.map(({ guid, top_level_guid }) => ({\n      guid,\n      top_level_guid,\n    })),\n    ...unstackedSeries.map(({ guid, top_level_guid }) => ({\n      guid,\n      top_level_guid,\n    })),\n  ]\n\n  const getSeriesCategoryGuids = (seriesId: string) => {\n    const isStacked = seriesId.startsWith('stacked-')\n    const dataset = isStacked\n      ? stackedDatasets[parseInt(seriesId.split('-')[1])]\n      : unstackedDatasets[parseInt(seriesId.split('-')[1])]\n    return {\n      guid: dataset?.category_guid,\n      topLevelGuid: dataset?.top_level_category_guid,\n    }\n  }\n\n  const handleHoverLegend = (guid: string | null) => {\n    setHoveredLegend(guid)\n    onHoverLegend?.(guid ?? '')\n  }\n\n  const handleClickLegend = (guid: string | null) => {\n    onClickLegend?.(guid ?? '')\n  }\n\n  const handleClickArea = () => {\n    const clickedSeriesGuid = getSeriesCategoryGuids(String(hoveredSeriesId)).guid\n    if (clickedSeriesGuid) onClickLegend?.(clickedSeriesGuid)\n  }\n\n  const handleHighlightChange = (highlightedItem: HighlightItemData | null) => {\n    const hoveredSeriesId = String(highlightedItem?.seriesId)\n    const hoveredSeriesGuid = getSeriesCategoryGuids(hoveredSeriesId).guid\n    const hoveredSeries = series.find((s) => s.id === hoveredSeriesId)\n    const isPointHovered = hoveredSeries && highlightedItem?.dataIndex !== undefined\n    const isAreaHovered = hoveredSeries && highlightedItem?.dataIndex === undefined\n\n    if (isPointHovered) {\n      setHoverState({\n        hoveredSeriesId: hoveredSeriesId,\n        hoveredAreaData: null,\n        isAreaHovered: false,\n        cursorPos,\n      })\n      onHoverPoint?.(hoveredSeriesGuid)\n    } else if (isAreaHovered) {\n      const hoveredDataPoints =\n        hoveredSeries?.data.map((yValue, index) => ({\n          x: xData[index],\n          y: yValue,\n        })) ?? []\n\n      setHoverState({\n        hoveredSeriesId: hoveredSeriesId,\n        hoveredAreaData: hoveredDataPoints,\n        isAreaHovered: true,\n        cursorPos,\n      })\n      onHoverArea?.(hoveredSeriesGuid)\n    } else {\n      setHoverState({\n        hoveredSeriesId: null,\n        hoveredAreaData: null,\n        isAreaHovered: false,\n        cursorPos,\n      })\n    }\n  }\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (\n      event.target instanceof Element &&\n      event.target.classList[0]?.includes('MuiMarkElement-root')\n    )\n      return\n\n    const rect = event.currentTarget.getBoundingClientRect()\n    setHoverState((prev) => ({\n      ...prev,\n      cursorPos: {\n        x: event.clientX - rect.left,\n        y: event.clientY - rect.top,\n      },\n    }))\n  }\n\n  const customStyles = {\n    p: 4,\n    '& .MuiBarLabel-root': {\n      fontSize: 10,\n      fontWeight: 600,\n    },\n    '& .MuiAreaElement-root': {\n      opacity: 0.4,\n      transition: 'opacity 0.3s ease',\n    },\n    '& .MuiAreaElement-root:hover': {\n      opacity: 1,\n    },\n    '& [class*=\"MuiLineElement-series-unstacked-\"]': {\n      strokeWidth: 3,\n    },\n    ...(hoveredLegend &&\n      stackedSeries.reduce<Record<string, any>>((acc, _, index) => {\n        const selector = `.MuiAreaElement-series-stacked-${index}`\n        acc[selector] = {\n          opacity: stackedSeries[index].guid === hoveredLegend ? 0.9 : 0.2,\n        }\n        return acc\n      }, {})),\n  }\n\n  return (\n    <Box\n      onMouseMove={handleMouseMove}\n      ref={chartContainerRef}\n      sx={{\n        position: 'relative',\n        touchAction: 'pan-y',\n        '& svg': {\n          touchAction: 'pan-y',\n          userSelect: 'none',\n        },\n        '& .recharts-wrapper': {\n          touchAction: 'pan-y',\n        },\n      }}\n    >\n      <Stack\n        direction={{ xs: 'column', md: 'column' }}\n        spacing={{ xs: 0, md: 4 }}\n        sx={{ width: '100%', position: 'relative' }}\n      >\n        <LineChart\n          height={chartHeight}\n          hideLegend={true}\n          margin={{ bottom: 24, left: 12, right: 54, top: 48 }}\n          onAreaClick={handleClickArea}\n          onHighlightChange={handleHighlightChange}\n          series={series as LineSeriesType[]}\n          skipAnimation={true}\n          slotProps={{\n            tooltip: { trigger: showPointTooltip ? 'item' : 'none' },\n          }}\n          slots={{\n            tooltip:\n              showPointTooltip && hoveredSeriesId\n                ? (props) => (\n                    <ChartsTooltipContainer>\n                      <CustomPointTooltip\n                        {...props}\n                        categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}\n                        series={series}\n                        xData={xData}\n                      />\n                    </ChartsTooltipContainer>\n                  )\n                : undefined,\n          }}\n          sx={customStyles}\n          xAxis={[\n            {\n              data: xData,\n              scaleType: 'time',\n              valueFormatter: (value: Date) =>\n                formatDate(value, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n              tickNumber: xTicks, // How many ticks to show on the x-axis\n            },\n          ]}\n          yAxis={[\n            {\n              min: yMin,\n              max: yMax || 100,\n              valueFormatter: (value: number) => numeral(value).format('0a'),\n            },\n          ]}\n        />\n        <CustomLegend\n          categoryGuids={guids}\n          hoveredLegend={hoveredLegend}\n          legendRef={legendRef}\n          onClickLegend={handleClickLegend}\n          onHoverLegend={handleHoverLegend}\n          sx={{ px: isMobile ? 0 : 24 }}\n        />\n\n        {showAreaTooltip && (\n          <CustomAreaTooltip\n            categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}\n            chartContainerRef={chartContainerRef}\n            cursorPosition={cursorPos}\n            hoveredAreaData={hoveredAreaData.map((point) => ({\n              ...point,\n              x: formatDate(point.x, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),\n            }))}\n          />\n        )}\n      </Stack>\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/common/components/charts/StatusBar/index.es.js

@@ -1,25 +0,0 @@
-import i from "@mui/material/Stack";
-import { jsx as a } from "react/jsx-runtime";
-import p from "@mui/material/Box";
-var n = ({ data: d, height: r = 8 }) => {
-  const o = `${r / 4}px`;
-  return /* @__PURE__ */ a(i, {
-    bgcolor: "divider",
-    borderRadius: o,
-    direction: "row",
-    gap: 2,
-    height: r,
-    width: "100%",
-    children: d.map((t, c) => /* @__PURE__ */ a(p, {
-      bgcolor: t.color,
-      borderRadius: o,
-      height: r,
-      width: t.percentage
-    }, c))
-  });
-};
-export {
-  n as default
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/StatusBar/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/charts/StatusBar.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nexport type StatusBarData = {\n  color: string\n  percentage: string\n}\n\ninterface StatusBarProps {\n  data: StatusBarData[]\n  height?: number\n}\n\nconst StatusBar = ({ data, height = 8 }: StatusBarProps) => {\n  const borderRadius = `${height / 4}px`\n\n  return (\n    <Stack\n      bgcolor=\"divider\"\n      borderRadius={borderRadius}\n      direction=\"row\"\n      gap={2}\n      height={height}\n      width=\"100%\"\n    >\n      {data.map((item, index) => (\n        <Box\n          bgcolor={item.color}\n          borderRadius={borderRadius}\n          height={height}\n          key={index}\n          width={item.percentage}\n        />\n      ))}\n    </Stack>\n  )\n}\n\nexport default StatusBar\n"],"mappings":";;;AAaA,IAAM,IAAA,CAAa,EAAE,MAAA,GAAM,QAAA,IAAS,EAAA,MAAwB;AAC1D,QAAM,IAAe,GAAG,IAAS,CAAA;AAEjC,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,SAAQ;AAAA,IACM,cAAA;AAAA,IACd,WAAU;AAAA,IACV,KAAK;AAAA,IACG,QAAA;AAAA,IACR,OAAM;AAAA,cAEL,EAAK,IAAA,CAAK,GAAM,MACf,gBAAA,EAAC,GAAD;AAAA,MACE,SAAS,EAAK;AAAA,MACA,cAAA;AAAA,MACN,QAAA;AAAA,MAER,OAAO,EAAK;AAAA,IACb,GAFM,CAEN,CACF;AAAA,EACI,CAAA;AAEX"}