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

package/dist/common/components/charts/Donut.es.js

@@ -0,0 +1,82 @@
+import R from "react";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { darken as D, lighten as b, useTheme as m } from "@mui/material/styles";
+import u from "@mui/material/Box";
+import { arc as x, interpolateString as I, selectAll as S } from "d3";
+var E = 100, B = 140, N = 10, K = ({ data: h, hoveredId: p, onClick: a, onMouseEnter: l, onMouseLeave: i, selectedId: s, size: r = 300, children: f }) => {
+  const d = m();
+  let t = 0;
+  const g = (o, n) => {
+    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), a?.(n));
+  }, y = (o) => {
+    l?.(o);
+  }, k = (o) => {
+    i?.(o);
+  };
+  return R.useEffect(() => {
+    S(".arc-outer").transition("roll").duration(500).attrTween("transform", () => I("rotate(0)", "rotate(360)"));
+  }, []), /* @__PURE__ */ c(u, {
+    height: r,
+    position: "relative",
+    width: r,
+    children: [/* @__PURE__ */ e(u, {
+      height: "100%",
+      width: "100%",
+      children: f
+    }), /* @__PURE__ */ c("svg", {
+      height: r,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        touchAction: "manipulation"
+      },
+      viewBox: "-150 -150 300 300",
+      width: r,
+      children: [/* @__PURE__ */ e("style", { children: `
+            .arc-outer:focus,
+            .arc-outer:focus-visible {
+              stroke: ${d.palette.primary.main};
+              stroke-width: 3;
+              stroke-opacity: 0.8;
+            }
+          ` }), /* @__PURE__ */ e("g", { children: h.map((o) => {
+        const n = t;
+        t = t + 2 * Math.PI * (o.value / 100);
+        const v = t, w = x().cornerRadius(4)({
+          innerRadius: E,
+          outerRadius: B + (o.id === s || o.id === p ? N : 0),
+          startAngle: n,
+          endAngle: v,
+          padAngle: 0.025
+        });
+        return /* @__PURE__ */ e("path", {
+          "aria-label": o.label || `Segment ${o.id}`,
+          "aria-pressed": o.id === s,
+          className: "arc-outer",
+          d: w,
+          fill: o.color,
+          onBlur: () => k(o.id),
+          onClick: () => a?.(o.id),
+          onFocus: () => y(o.id),
+          onKeyDown: (A) => g(A, o.id),
+          onMouseEnter: () => l?.(o.id),
+          onMouseLeave: () => i?.(o.id),
+          role: "button",
+          stroke: d.palette.mode === "light" ? D(o.color, 0.3) : b(o.color, 0.3),
+          strokeWidth: 2,
+          style: {
+            cursor: "pointer",
+            outline: "none"
+          },
+          tabIndex: 0
+        }, o.id);
+      }) })]
+    })]
+  });
+};
+export {
+  K as default
+};
+
+//# sourceMappingURL=Donut.es.js.map

package/dist/common/components/charts/Donut.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Donut.es.js","names":[],"sources":["../../../../src/common/components/charts/Donut.tsx"],"sourcesContent":["import React from 'react'\nimport { arc, selectAll, interpolateString } from 'd3'\n\nimport Box from '@mui/material/Box'\nimport { darken, lighten, useTheme } from '@mui/material/styles'\n\nconst INNER_RADIUS = 100\nconst OUT_RADIUS = 140\nconst SELECTION_RADIUS = 10\n\nexport interface DonutData {\n  id: string\n  label?: string\n  color: string\n  value: number\n}\n\nexport interface DonutProps {\n  data: DonutData[]\n  hoveredId?: string\n  onClick?: (id: string) => void\n  onMouseEnter?: (id: string) => void\n  onMouseLeave?: (id: string) => void\n  selectedId?: string\n  size?: number\n}\n\nconst Donut: React.FC<React.PropsWithChildren<DonutProps>> = ({\n  data,\n  hoveredId,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  selectedId,\n  size = 300,\n  children,\n}) => {\n  const theme = useTheme()\n  let offset = 0\n\n  const handleKeyDown = (event: React.KeyboardEvent, id: string) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onClick?.(id)\n    }\n  }\n\n  const handleFocus = (id: string) => {\n    onMouseEnter?.(id)\n  }\n\n  const handleBlur = (id: string) => {\n    onMouseLeave?.(id)\n  }\n\n  React.useEffect(() => {\n    selectAll('.arc-outer')\n      .transition('roll')\n      .duration(500)\n      .attrTween('transform', () => interpolateString('rotate(0)', 'rotate(360)'))\n  }, [])\n\n  return (\n    <Box height={size} position=\"relative\" width={size}>\n      <Box height=\"100%\" width=\"100%\">\n        {children}\n      </Box>\n      <svg\n        height={size}\n        style={{ position: 'absolute', top: 0, left: 0, touchAction: 'manipulation' }}\n        viewBox={`-150 -150 300 300`}\n        width={size}\n      >\n        <style>\n          {`\n            .arc-outer:focus,\n            .arc-outer:focus-visible {\n              stroke: ${theme.palette.primary.main};\n              stroke-width: 3;\n              stroke-opacity: 0.8;\n            }\n          `}\n        </style>\n        <g>\n          {data.map((item) => {\n            const startAngle = offset\n            offset = offset + 2 * Math.PI * (item.value / 100)\n            const endAngle = offset\n\n            const segment = arc().cornerRadius(4)({\n              innerRadius: INNER_RADIUS,\n              outerRadius:\n                OUT_RADIUS +\n                (item.id === selectedId || item.id === hoveredId ? SELECTION_RADIUS : 0),\n              startAngle,\n              endAngle,\n              padAngle: 0.025,\n            }) as string\n\n            return (\n              <path\n                aria-label={item.label || `Segment ${item.id}`}\n                aria-pressed={item.id === selectedId}\n                className=\"arc-outer\"\n                d={segment}\n                fill={item.color}\n                key={item.id}\n                onBlur={() => handleBlur(item.id)}\n                onClick={() => onClick?.(item.id)}\n                onFocus={() => handleFocus(item.id)}\n                onKeyDown={(e) => handleKeyDown(e, item.id)}\n                onMouseEnter={() => onMouseEnter?.(item.id)}\n                onMouseLeave={() => onMouseLeave?.(item.id)}\n                role=\"button\"\n                stroke={\n                  theme.palette.mode === 'light'\n                    ? darken(item.color, 0.3)\n                    : lighten(item.color, 0.3)\n                }\n                strokeWidth={2}\n                style={{\n                  cursor: 'pointer',\n                  outline: 'none',\n                }}\n                tabIndex={0}\n              />\n            )\n          })}\n        </g>\n      </svg>\n    </Box>\n  )\n}\n\nexport default Donut\n"],"mappings":";;;;;AAMA,IAAM,IAAe,KACf,IAAa,KACb,IAAmB,IAmBnB,IAAA,CAAwD,EAC5D,MAAA,GACA,WAAA,GACA,SAAA,GACA,cAAA,GACA,cAAA,GACA,YAAA,GACA,MAAA,IAAO,KACP,UAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS;AACvB,MAAI,IAAS;AAEb,QAAM,IAAA,CAAiB,GAA4B,MAAe;AAChE,KAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,IAAU,CAAE;AAAA,EAEhB,GAEM,IAAA,CAAe,MAAe;AAClC,IAAA,IAAe,CAAE;AAAA,EACnB,GAEM,IAAA,CAAc,MAAe;AACjC,IAAA,IAAe,CAAE;AAAA,EACnB;AAEA,SAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAU,YAAY,EACnB,WAAW,MAAM,EACjB,SAAS,GAAG,EACZ,UAAU,aAAA,MAAmB,EAAkB,aAAa,aAAa,CAAC;AAAA,EAC/E,GAAG,CAAC,CAAC,GAGH,gBAAA,EAAC,GAAD;AAAA,IAAK,QAAQ;AAAA,IAAM,UAAS;AAAA,IAAW,OAAO;AAAA,cAA9C,CACE,gBAAA,EAAC,GAAD;AAAA,MAAK,QAAO;AAAA,MAAO,OAAM;AAAA,MACtB,UAAA;AAAA,IACE,CAAA,GACL,gBAAA,EAAC,OAAD;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,QAAE,UAAU;AAAA,QAAY,KAAK;AAAA,QAAG,MAAM;AAAA,QAAG,aAAa;AAAA,MAAe;AAAA,MAC5E,SAAS;AAAA,MACT,OAAO;AAAA,gBAJT,CAME,gBAAA,EAAC,SAAD,EAAA,UACG;AAAA;AAAA;AAAA,wBAGa,EAAM,QAAQ,QAAQ,IAAA;AAAA;AAAA;AAAA;AAAA,YAK/B,CAAA,GACP,gBAAA,EAAC,KAAD,EAAA,UACG,EAAK,IAAA,CAAK,MAAS;AAClB,cAAM,IAAa;AACnB,QAAA,IAAS,IAAS,IAAI,KAAK,MAAM,EAAK,QAAQ;AAC9C,cAAM,IAAW,GAEX,IAAU,EAAI,EAAE,aAAa,CAAC,EAAE;AAAA,UACpC,aAAa;AAAA,UACb,aACE,KACC,EAAK,OAAO,KAAc,EAAK,OAAO,IAAY,IAAmB;AAAA,UACxE,YAAA;AAAA,UACA,UAAA;AAAA,UACA,UAAU;AAAA,QACZ,CAAC;AAED,eACE,gBAAA,EAAC,QAAD;AAAA,UACE,cAAY,EAAK,SAAS,WAAW,EAAK,EAAA;AAAA,UAC1C,gBAAc,EAAK,OAAO;AAAA,UAC1B,WAAU;AAAA,UACV,GAAG;AAAA,UACH,MAAM,EAAK;AAAA,UAEX,QAAA,MAAc,EAAW,EAAK,EAAE;AAAA,UAChC,SAAA,MAAe,IAAU,EAAK,EAAE;AAAA,UAChC,SAAA,MAAe,EAAY,EAAK,EAAE;AAAA,UAClC,WAAA,CAAY,MAAM,EAAc,GAAG,EAAK,EAAE;AAAA,UAC1C,cAAA,MAAoB,IAAe,EAAK,EAAE;AAAA,UAC1C,cAAA,MAAoB,IAAe,EAAK,EAAE;AAAA,UAC1C,MAAK;AAAA,UACL,QACE,EAAM,QAAQ,SAAS,UACnB,EAAO,EAAK,OAAO,GAAG,IACtB,EAAQ,EAAK,OAAO,GAAG;AAAA,UAE7B,aAAa;AAAA,UACb,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,SAAS;AAAA,UACX;AAAA,UACA,UAAU;AAAA,QACX,GAnBM,EAAK,EAmBX;AAAA,MAEL,CAAC,EACA,CAAA,CACA;AAAA,MACF;AAAA;AAET"}

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

@@ -0,0 +1,195 @@
+import { formatCurrency as A, generateEqualIntervals as P } from "../../../core/utils/NumberFormatting.es.js";
+import { stripChartSlotProps as lt } from "./chartSlotProps.es.js";
+import { getMarkerShape as mt } from "./linechart/utils/markerShapes.es.js";
+import pt from "./linechart/CustomLegend.es.js";
+import { CustomLine as ft } from "./linechart/CustomLine.es.js";
+import { CustomMark as ht } from "./linechart/CustomMark.es.js";
+import { CustomTooltip as ct } from "./linechart/CustomTooltip.es.js";
+import "react";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { useTheme as yt } from "@mui/material/styles";
+import dt from "@mui/material/Box";
+import { BarPlot as ut } from "@mui/x-charts/BarChart";
+import { ChartContainer as xt } from "@mui/x-charts/ChartContainer";
+import { ChartsAxisHighlight as gt } from "@mui/x-charts/ChartsAxisHighlight";
+import { ChartsReferenceLine as Mt } from "@mui/x-charts/ChartsReferenceLine";
+import { ChartsTooltipContainer as kt } from "@mui/x-charts/ChartsTooltip";
+import { ChartsXAxis as bt } from "@mui/x-charts/ChartsXAxis";
+import { ChartsYAxis as Lt } from "@mui/x-charts/ChartsYAxis";
+import { AreaPlot as Ct, LinePlot as Tt, MarkPlot as vt } from "@mui/x-charts/LineChart";
+var Bt = ({ areaColor: f, axisColor: n, baseline: R = "max", chartFor: u, chartXaxisSx: w, chartYaxisSx: D, colors: M, curveType: G = "linear", customLegendVariant: I, customLegendSx: $, customLegendBoxSx: j, customTooltipLabels: E, datasets: h, height: O, isCurrency: S, isGraphClippingXAxis: W = !1, labels: k, labelBackgroundColor: b, labelFontColor: q, labelFontSize: z, margin: H, markHandlers: N, markStyles: X, minRange: Y, maxRange: _, onItemClick: x, peerAverage: L, showArea: C = !1, showAverage: T = !1, showAxisHighlight: B = !1, showBars: g = !1, showLegend: J = !1, showMark: K = !0, showMarkLabel: Q = !1, showTooltip: U = !1, showXAxis: V = !1, showXAxisTicks: Z = !1, showYAxis: F = !1, showYAxisTicks: tt = !1, title: et, useCustomMark: at = !1, valueFormatterString: i, width: rt, xAxisScaleType: ot }) => {
+  const a = yt(), it = h.flat().map((t) => t.x), r = h.flat().map((t) => t.y), v = L || (r.length ? Math.round(r.reduce((t, s) => s + t, 0) / r.length) : 0), l = r.length ? Math.floor(Math.min(...r) / 100) * 100 : 0, m = r.length ? Math.ceil(Math.max(...r) / 100) * 100 : 0, c = h.map((t, s) => ({
+    type: g ? "bar" : "line",
+    curve: G,
+    color: g ? a.palette.chart?.chart6 : M[s] ?? a.palette.primary.main,
+    data: t.map((o) => o.y),
+    area: C,
+    baseline: R,
+    showMark: !0,
+    shape: mt(s),
+    valueFormatter: (o) => i ? A(o || 0, i) : String(o)
+  })), nt = {
+    top: 60,
+    right: 35,
+    bottom: 25,
+    left: -10,
+    ...H
+  };
+  let p = Y ?? l, y = _ ?? m;
+  if (u === "networthChart") {
+    const t = m - l, s = t < m * 0.05 ? 0.25 : 0.2, o = Math.max(t * s, m * 0.015);
+    p = l - o < 0 ? l : l - o, y = m + o;
+  }
+  const st = () => {
+    if (u === "creditOverTime") return P(p, 850, 5);
+    if (u === "networthChart") return P(p, y, 5);
+  };
+  return /* @__PURE__ */ d(dt, {
+    sx: {
+      position: "relative",
+      touchAction: "pan-y",
+      "& svg": {
+        touchAction: "pan-y",
+        userSelect: "none"
+      },
+      "& .recharts-wrapper": { touchAction: "pan-y" }
+    },
+    children: [/* @__PURE__ */ d(xt, {
+      height: O,
+      margin: nt,
+      series: c,
+      sx: {
+        "& .MuiBarLabel-root": {
+          fontSize: 10,
+          fontWeight: 600
+        },
+        "& .MuiAreaElement-root": { opacity: 0.15 },
+        "& .MuiChartsAxis-tickLabel > tspan": { fontFamily: a.typography.body2.fontFamily },
+        "& .MuiLineChart-markLabel": { fontFamily: a.typography.body2.fontFamily }
+      },
+      width: rt,
+      xAxis: [{
+        data: it,
+        scaleType: ot || (g ? "band" : "point")
+      }],
+      yAxis: [{
+        tickInterval: st(),
+        min: W ? -22 : p,
+        max: y || 100,
+        colorMap: C && c.length < 2 ? {
+          type: "continuous",
+          min: p,
+          max: y,
+          color: [a.palette.background.paper, M[0] ?? a.palette.primary.main]
+        } : void 0,
+        valueFormatter: (t) => i ? A(t, i) : String(t),
+        width: 62
+      }],
+      children: [
+        T && /* @__PURE__ */ e(Mt, {
+          lineStyle: {
+            stroke: b ? a.palette.neutral.main : a.palette.neutral.dark,
+            strokeDasharray: "10, 8",
+            strokeWidth: 2
+          },
+          y: v
+        }),
+        /* @__PURE__ */ e(Ct, {
+          onItemClick: x,
+          ...f && { slots: { area: (t) => /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ e("defs", { children: /* @__PURE__ */ d("linearGradient", {
+            id: "customGradient",
+            x1: "0",
+            x2: "0",
+            y1: "0",
+            y2: "1",
+            children: [/* @__PURE__ */ e("stop", {
+              offset: "0%",
+              stopColor: f
+            }), /* @__PURE__ */ e("stop", {
+              offset: "100%",
+              stopColor: f,
+              stopOpacity: 0.02
+            })]
+          }) }), /* @__PURE__ */ e("path", {
+            ...lt(t),
+            fill: "url(#customGradient)"
+          })] }) } }
+        }),
+        /* @__PURE__ */ e(Tt, {
+          onItemClick: x,
+          slots: { line: (t) => /* @__PURE__ */ e(ft, {
+            ...t,
+            lineColor: f ?? t.ownerState.color ?? a.palette.primary.main
+          }) }
+        }),
+        /* @__PURE__ */ e(vt, {
+          onItemClick: x,
+          slots: at ? { mark: (t) => /* @__PURE__ */ e(ht, {
+            handlers: N,
+            labelBackgroundColor: b,
+            labelFontColor: q,
+            labelFontSize: z,
+            showLabel: Q,
+            showMark: K || t.dataIndex === h[0].length - 1,
+            style: X?.(t.dataIndex) ?? {},
+            valueFormatterString: i,
+            yData: r,
+            ...t
+          }) } : void 0
+        }),
+        /* @__PURE__ */ e(ut, {
+          barLabel: (t) => Number(t.value) > 0 ? `$${t.value}` : null,
+          borderRadius: 10
+        }),
+        /* @__PURE__ */ e(bt, {
+          disableLine: !V,
+          disableTicks: !Z,
+          slotProps: n ? {
+            axisLine: { style: { stroke: n } },
+            axisTick: { style: { stroke: n } }
+          } : {},
+          sx: { ...w }
+        }),
+        /* @__PURE__ */ e(Lt, {
+          disableLine: !F,
+          disableTicks: !tt,
+          slotProps: n ? {
+            axisLine: { style: { stroke: n } },
+            axisTick: { style: { stroke: n } }
+          } : {},
+          sx: { ...D }
+        }),
+        B && /* @__PURE__ */ e(gt, { x: "line" }),
+        U && /* @__PURE__ */ e(kt, {
+          trigger: "axis",
+          children: /* @__PURE__ */ e(ct, {
+            customLabels: E,
+            isCurrency: S,
+            labels: k,
+            series: c,
+            valueFormatterString: i
+          })
+        })
+      ]
+    }), J && /* @__PURE__ */ e(pt, {
+      average: T ? v : void 0,
+      customLegendBoxSx: j,
+      customLegendVariant: I,
+      labels: k,
+      series: c,
+      style: {
+        position: "absolute",
+        top: 16,
+        left: 16,
+        ...$
+      },
+      title: et,
+      valueFormatterString: i
+    })]
+  });
+};
+export {
+  Bt as LineChart
+};
+
+//# sourceMappingURL=LineChart.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.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 { stripChartSlotProps } from './chartSlotProps'\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  // Guard the empty-data case: with no points, reduce()/Math.min()/Math.max()\n  // produce NaN/±Infinity which flow into the y-axis and make x-charts warn\n  // \"the value NaN does not exist in the data of y axis\". Default to 0 so an\n  // empty/loading chart renders a valid (flat) axis instead.\n  const average = peerAverage\n    ? peerAverage\n    : yData.length\n      ? Math.round(yData.reduce((value, total) => total + value, 0) / yData.length)\n      : 0\n\n  // Used for the min and max Y axis values\n  const yMin = yData.length ? Math.floor(Math.min(...yData) / 100) * 100 : 0\n  const yMax = yData.length ? Math.ceil(Math.max(...yData) / 100) * 100 : 0\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 {...stripChartSlotProps(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/StackedLineChart.es.js

@@ -0,0 +1,208 @@
+import { DATE_FORMATS_INTL as T, formatDate as L } from "../../../core/constants/DateFormats.es.js";
+import { useScreenSize as ie } from "../../hooks/useScreenSize.es.js";
+import { formatCurrency as k } from "../../../core/utils/NumberFormatting.es.js";
+import { useDimensions as se } from "../../hooks/useDimensions.es.js";
+import ne from "./stackedlinechart/CustomAreaTooltip.es.js";
+import { CustomLegend as ce } from "./stackedlinechart/CustomLegend.es.js";
+import { CustomPointTooltip as le } from "./stackedlinechart/CustomPointTooltip.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=StackedLineChart.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackedLineChart.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.es.js

@@ -0,0 +1,25 @@
+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=StatusBar.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.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"}

package/dist/common/components/charts/chartSlotProps.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Strip non-DOM props that @mui/x-charts forwards into custom slot components
+ * (bar / area / axisTickLabel / etc.) before they are spread onto a raw SVG
+ * element like <rect>, <path>, or <text>.
+ *
+ * x-charts passes internal bookkeeping props (ownerState, dataIndex, xOrigin,
+ * yOrigin, skipAnimation, ...) to slot components. When a custom slot spreads
+ * `{...restProps}` straight onto an SVG host node, React 19 logs
+ * "React does not recognize the `xOrigin` prop on a DOM element" (etc.) for
+ * each one. These are not valid SVG attributes, so dropping them is safe and
+ * removes the warning. Centralized here so every chart slot uses one strip
+ * point and new charts don't reintroduce the leak.
+ */
+declare const NON_DOM_CHART_SLOT_PROPS: readonly ["ownerState", "dataIndex", "xOrigin", "yOrigin", "skipAnimation"];
+export declare const stripChartSlotProps: <T extends object>(props: T) => Omit<T, (typeof NON_DOM_CHART_SLOT_PROPS)[number]>;
+export {};

package/dist/common/components/charts/chartSlotProps.es.js

@@ -0,0 +1,16 @@
+var n = [
+  "ownerState",
+  "dataIndex",
+  "xOrigin",
+  "yOrigin",
+  "skipAnimation"
+], o = (t) => {
+  const r = { ...t };
+  for (const e of n) delete r[e];
+  return r;
+};
+export {
+  o as stripChartSlotProps
+};
+
+//# sourceMappingURL=chartSlotProps.es.js.map

package/dist/common/components/charts/chartSlotProps.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartSlotProps.es.js","names":[],"sources":["../../../../src/common/components/charts/chartSlotProps.ts"],"sourcesContent":["/**\n * Strip non-DOM props that @mui/x-charts forwards into custom slot components\n * (bar / area / axisTickLabel / etc.) before they are spread onto a raw SVG\n * element like <rect>, <path>, or <text>.\n *\n * x-charts passes internal bookkeeping props (ownerState, dataIndex, xOrigin,\n * yOrigin, skipAnimation, ...) to slot components. When a custom slot spreads\n * `{...restProps}` straight onto an SVG host node, React 19 logs\n * \"React does not recognize the `xOrigin` prop on a DOM element\" (etc.) for\n * each one. These are not valid SVG attributes, so dropping them is safe and\n * removes the warning. Centralized here so every chart slot uses one strip\n * point and new charts don't reintroduce the leak.\n */\nconst NON_DOM_CHART_SLOT_PROPS = [\n  'ownerState',\n  'dataIndex',\n  'xOrigin',\n  'yOrigin',\n  'skipAnimation',\n] as const\n\nexport const stripChartSlotProps = <T extends object>(\n  props: T,\n): Omit<T, (typeof NON_DOM_CHART_SLOT_PROPS)[number]> => {\n  const cleaned = { ...props } as Record<string, unknown>\n  for (const key of NON_DOM_CHART_SLOT_PROPS) {\n    delete cleaned[key]\n  }\n  return cleaned as Omit<T, (typeof NON_DOM_CHART_SLOT_PROPS)[number]>\n}\n"],"mappings":"AAaA,IAAM,IAA2B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEa,IAAA,CACX,MACuD;AACvD,QAAM,IAAU,EAAE,GAAG,EAAM;AAC3B,aAAW,KAAO,EAChB,QAAO,EAAQ,CAAA;AAEjB,SAAO;AACT"}