@mx-cartographer/experiences 9.4.37 → 9.4.38

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [9.4.38] - 09-22-2026
+
+- **FIXED** - `LineChart` x-axis now shows every tick label instead of dropping overlapping ones, so month labels no longer disappear on small views. On the Trends 1 Year (12-month) view on small screens, labels render as single letters so all twelve fit; the full month is preserved as the accessible name so screen readers and tooltips are unchanged (MEW-4096)
+
 ## [9.4.37] - 09-22-2026
 
 - **FIXED** - Trends Categories "View more"/"View less" toggle now scrolls back into the viewport after the list expands, so keyboard users keep the focused control in view instead of losing track of focus below the fold (MEW-3587)

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

@@ -46,7 +46,9 @@ interface LineChartProps {
     };
     minRange?: number;
     maxRange?: number;
+    narrowXAxisLabels?: boolean;
     onItemClick?: () => void;
+    showAllXAxisLabels?: boolean;
     peerAverage?: number;
     showArea?: boolean;
     showAverage?: boolean;

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

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

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

@@ -1 +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":";;;;;;;;;;;;;;;;;;;AA+FA,IAAa,KAAA,CAAuC,EAClD,WAAA,GACA,WAAA,GACA,UAAA,IAAW,OACX,UAAA,GACA,cAAA,GACA,cAAA,GACA,QAAA,GACA,WAAA,IAAY,UACZ,qBAAA,GACA,gBAAA,GACA,mBAAA,GACA,qBAAA,GACA,UAAA,GACA,QAAA,GACA,YAAA,GACA,sBAAA,IAAuB,IACvB,QAAA,GACA,sBAAA,GACA,gBAAA,GACA,eAAA,GACA,QAAA,GACA,cAAA,GACA,YAAA,GACA,UAAA,GACA,UAAA,GACA,aAAA,GACA,aAAA,GACA,UAAA,IAAW,IACX,aAAA,IAAc,IACd,mBAAA,IAAoB,IACpB,UAAA,IAAW,IACX,YAAA,IAAa,IACb,UAAA,IAAW,IACX,eAAA,IAAgB,IAChB,aAAA,IAAc,IACd,WAAA,IAAY,IACZ,gBAAA,IAAiB,IACjB,WAAA,IAAY,IACZ,gBAAA,KAAiB,IACjB,OAAA,IACA,eAAA,KAAgB,IAChB,sBAAA,GACA,OAAA,IACA,gBAAA,GAAA,MACI;AACJ,QAAM,IAAQ,GAAS,GAGjB,KAAQ,EAAS,KAAK,EAAE,IAAA,CAAK,MAAS,EAAK,CAAC,GAC5C,IAAQ,EAAS,KAAK,EAAE,IAAA,CAAK,MAAS,EAAK,CAAC,GAM5C,IAAU,MAEZ,EAAM,SACJ,KAAK,MAAM,EAAM,OAAA,CAAQ,GAAO,MAAU,IAAQ,GAAO,CAAC,IAAI,EAAM,MAAM,IAC1E,IAGA,IAAO,EAAM,SAAS,KAAK,MAAM,KAAK,IAAI,GAAG,CAAK,IAAI,GAAG,IAAI,MAAM,GACnE,IAAO,EAAM,SAAS,KAAK,KAAK,KAAK,IAAI,GAAG,CAAK,IAAI,GAAG,IAAI,MAAM,GAElE,IAAS,EAAS,IAAA,CAAK,GAAM,OAC1B;AAAA,IACL,MAAM,IAAW,QAAQ;AAAA,IACzB,OAAO;AAAA,IACP,OAAO,IAAW,EAAM,QAAQ,OAAO,SAAU,EAAO,CAAA,KAAU,EAAM,QAAQ,QAAQ;AAAA,IACxF,MAAM,EAAK,IAAA,CAAK,MAAS,EAAK,CAAC;AAAA,IAC/B,MAAM;AAAA,IACI,UAAA;AAAA,IACV,UAAU;AAAA,IACV,OAAO,GAAe,CAAK;AAAA,IAC3B,gBAAA,CAAiB,MACf,IAAuB,EAAe,KAAS,GAAG,CAAoB,IAAI,OAAO,CAAK;AAAA,EAC1F,EACD,GAUK,KAAc;AAAA,IAPlB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IAMN,GAAG;AAAA,EACL;AAEA,MAAI,IAAW,KAAY,GACvB,IAAW,KAAY;AAC3B,MAAI,MAAa,iBAAiB;AAChC,UAAM,IAAa,IAAO,GAEpB,IAAe,IAAa,IAAO,OAAO,OAAO,KACjD,IAAU,KAAK,IAAI,IAAa,GAAc,IAAO,KAAK;AAChE,IAAA,IAAW,IAAO,IAAU,IAAI,IAAO,IAAO,GAC9C,IAAW,IAAO;AAAA,EACpB;AAEA,QAAM,KAAA,MAAwB;AAC5B,QAAI,MAAa,iBACf,QAAO,EAAuB,GAAU,KAAK,CAAC;AACzC,QAAI,MAAa,gBACtB,QAAO,EAAuB,GAAU,GAAU,CAAC;AAAA,EAGvD;AACA,SACE,gBAAA,EAAC,IAAD;AAAA,IACE,IAAI;AAAA,MACF,UAAU;AAAA,MACV,aAAa;AAAA,MACb,SAAS;AAAA,QACP,aAAa;AAAA,QACb,YAAY;AAAA,MACd;AAAA,MACA,uBAAuB,EACrB,aAAa,QACf;AAAA,IACF;AAAA,IAXF,UAAA,CAaE,gBAAA,EAAC,IAAD;AAAA,MACU,QAAA;AAAA,MACR,QAAQ;AAAA,MACA,QAAA;AAAA,MACR,IAAI;AAAA,QACF,uBAAuB;AAAA,UACrB,UAAU;AAAA,UACV,YAAY;AAAA,QACd;AAAA,QACA,0BAA0B,EACxB,SAAS,KACX;AAAA,QACA,sCAAsC,EACpC,YAAY,EAAM,WAAW,MAAM,WACrC;AAAA,QACA,6BAA6B,EAC3B,YAAY,EAAM,WAAW,MAAM,WACrC;AAAA,MACF;AAAA,MACO,OAAA;AAAA,MACP,OAAO,CAAC;AAAA,QAAE,MAAM;AAAA,QAAO,WAAW,OAAmB,IAAW,SAAS;AAAA,MAAS,CAAC;AAAA,MACnF,OAAO,CACL;AAAA,QACE,cAAc,GAAgB;AAAA,QAC9B,KAAK,IAAuB,MAAM;AAAA,QAClC,KAAK,KAAY;AAAA,QACjB,UACE,KAAY,EAAO,SAAS,IACxB;AAAA,UACE,MAAM;AAAA,UACN,KAAK;AAAA,UACL,KAAK;AAAA,UACL,OAAO,CACL,EAAM,QAAQ,WAAW,OACzB,EAAO,CAAA,KAAM,EAAM,QAAQ,QAAQ,IACrC;AAAA,QACF,IACA;AAAA,QACN,gBAAA,CAAiB,MACf,IAAuB,EAAe,GAAO,CAAoB,IAAI,OAAO,CAAK;AAAA,QACnF,OAAO;AAAA,MACT,CACF;AAAA,MA1CF,UAAA;AAAA,QA6CG,KACC,gBAAA,EAAC,IAAD;AAAA,UACE,WAAW;AAAA,YACT,QAAQ,IACJ,EAAM,QAAQ,QAAQ,OACtB,EAAM,QAAQ,QAAQ;AAAA,YAC1B,iBAAiB;AAAA,YACjB,aAAa;AAAA,UACf;AAAA,UACA,GAAG;AAAA,QACJ,CAAA;AAAA,QAKH,gBAAA,EAAC,IAAD;AAAA,UACe,aAAA;AAAA,UACb,GAAK,KAAa,EAChB,OAAO,EACL,MAAA,CAAO,MAEH,gBAAA,EAAC,KAAD,EAAA,UAAA,CACE,gBAAA,EAAC,QAAD,EAAA,UACE,gBAAA,EAAC,kBAAD;AAAA,YAAgB,IAAG;AAAA,YAAiB,IAAG;AAAA,YAAI,IAAG;AAAA,YAAI,IAAG;AAAA,YAAI,IAAG;AAAA,YAA5D,UAAA,CACE,gBAAA,EAAC,QAAD;AAAA,cAAM,QAAO;AAAA,cAAK,WAAW;AAAA,YAAY,CAAA,GACzC,gBAAA,EAAC,QAAD;AAAA,cAAM,QAAO;AAAA,cAAO,WAAW;AAAA,cAAW,aAAa;AAAA,YAAO,CAAA,CAChD;AAAA,UACZ,CAAA,EAAA,CAAA,GACN,gBAAA,EAAC,QAAD;AAAA,YAAM,GAAI,GAAoB,CAAK;AAAA,YAAG,MAAM;AAAA,UAAyB,CAAA,CACpE,EAAA,CAAA,EAGT,EACF;AAAA,QACD,CAAA;AAAA,QAGD,gBAAA,EAAC,IAAD;AAAA,UACe,aAAA;AAAA,UACb,OAAO,EACL,MAAA,CAAO,MACL,gBAAA,EAAC,IAAD;AAAA,YACE,GAAI;AAAA,YACJ,WAAW,KAAa,EAAM,WAAW,SAAS,EAAM,QAAQ,QAAQ;AAAA,UACzE,CAAA,EAEL;AAAA,QACD,CAAA;AAAA,QAGD,gBAAA,EAAC,IAAD;AAAA,UACe,aAAA;AAAA,UACb,OACE,KACI,EACE,MAAA,CAAO,MAEH,gBAAA,EAAC,IAAD;AAAA,YACE,UAAU;AAAA,YACY,sBAAA;AAAA,YACN,gBAAA;AAAA,YACD,eAAA;AAAA,YACf,WAAW;AAAA,YACX,UAAU,KAAY,EAAM,cAAc,EAAS,CAAA,EAAG,SAAS;AAAA,YAC/D,OAAO,IAAa,EAAM,SAAS,KAAK,CAAC;AAAA,YACnB,sBAAA;AAAA,YACf,OAAA;AAAA,YACP,GAAI;AAAA,UACL,CAAA,EAGP,IACA;AAAA,QAEP,CAAA;AAAA,QAED,gBAAA,EAAC,IAAD;AAAA,UACE,UAAA,CAAW,MAAU,OAAO,EAAK,KAAK,IAAI,IAAI,IAAI,EAAK,KAAA,KAAU;AAAA,UACjE,cAAc;AAAA,QACf,CAAA;AAAA,QAGD,gBAAA,EAAC,IAAD;AAAA,UACE,aAAa,CAAC;AAAA,UACd,cAAc,CAAC;AAAA,UACf,WACE,IACI;AAAA,YACE,UAAU,EACR,OAAO,EACL,QAAQ,EACV,EACF;AAAA,YACA,UAAU,EACR,OAAO,EACL,QAAQ,EACV,EACF;AAAA,UACF,IACA,CAAC;AAAA,UAEP,IAAI,EAAE,GAAG,EAAa;AAAA,QACvB,CAAA;AAAA,QAGD,gBAAA,EAAC,IAAD;AAAA,UACE,aAAa,CAAC;AAAA,UACd,cAAc,CAAC;AAAA,UACf,WACE,IACI;AAAA,YACE,UAAU,EACR,OAAO,EACL,QAAQ,EACV,EACF;AAAA,YACA,UAAU,EACR,OAAO,EACL,QAAQ,EACV,EACF;AAAA,UACF,IACA,CAAC;AAAA,UAEP,IAAI,EAAE,GAAG,EAAa;AAAA,QACvB,CAAA;AAAA,QAGA,KAAqB,gBAAA,EAAC,IAAD,EAAqB,GAAE,OAAQ,CAAA;AAAA,QAEpD,KACC,gBAAA,EAAC,IAAD;AAAA,UAAwB,SAAQ;AAAA,UAC9B,UAAA,gBAAA,EAAC,IAAD;AAAA,YACE,cAAc;AAAA,YACF,YAAA;AAAA,YACJ,QAAA;AAAA,YACA,QAAA;AAAA,YACc,sBAAA;AAAA,UACvB,CAAA;AAAA,QACqB,CAAA;AAAA,MAEF;AAAA,IAEzB,CAAA,GAAA,KACC,gBAAA,EAAC,IAAD;AAAA,MACE,SAAS,IAAc,IAAU;AAAA,MACd,mBAAA;AAAA,MACE,qBAAA;AAAA,MACb,QAAA;AAAA,MACA,QAAA;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAG;AAAA,MACL;AAAA,MACO,OAAA;AAAA,MACe,sBAAA;AAAA,IACvB,CAAA,CAEA;AAAA;AAET"}
+{"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 { ChartsText, type ChartsTextProps } from '@mui/x-charts/ChartsText'\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\n// X-axis tick that shows only the first letter of the label (e.g. \"J\" for\n// \"Jan\") so all labels fit in small/narrow views. role=\"img\" + aria-label give\n// the tick a reliable accessible name (aria-label alone on a bare SVG <text> is\n// inconsistently announced), so screen readers still get the full label.\nconst NarrowXAxisTickLabel = (props: ChartsTextProps) => {\n  const fullLabel = typeof props.text === 'string' ? props.text : ''\n  // Array.from keeps surrogate pairs / combining marks intact (non-Latin locales).\n  const singleLetter = Array.from(fullLabel.trim())[0] ?? ''\n  if (!singleLetter) return <ChartsText {...props} />\n  return <ChartsText {...props} aria-label={fullLabel} role=\"img\" text={singleLetter} />\n}\n\nconst NARROW_X_AXIS_SLOTS = { axisTickLabel: NarrowXAxisTickLabel }\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  // When true, x-axis labels render as a single letter (with the full label kept\n  // as the accessible name), so months don't overlap and get dropped in\n  // small/narrow views. Implies showAllXAxisLabels.\n  narrowXAxisLabels?: boolean\n  onItemClick?: () => void\n  // When true, every x-axis tick label is shown instead of letting x-charts drop\n  // overlapping ones. Opt-in so it doesn't affect other charts that rely on the\n  // default thinning.\n  showAllXAxisLabels?: boolean\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  narrowXAxisLabels = false,\n  showAllXAxisLabels = false,\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={[\n          {\n            data: xData,\n            scaleType: xAxisScaleType || (showBars ? 'band' : 'point'),\n            // Show every tick instead of letting x-charts drop overlapping ones.\n            ...((showAllXAxisLabels || narrowXAxisLabels) && { tickLabelInterval: () => true }),\n          },\n        ]}\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          slots={narrowXAxisLabels ? NARROW_X_AXIS_SLOTS : undefined}\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/trends/components/TrendsChartTotals.es.js

@@ -1,14 +1,16 @@
-import { useEvent as w, useGlobalCopyStore as v } from "../../common/context/hooks.es.js";
-import { useScreenSize as x } from "../../common/hooks/useScreenSize.es.js";
-import { ANALYTICS_EVENTS as E } from "../../common/constants/Analytics.es.js";
-import { LineChart as H } from "../../common/components/charts/LineChart.es.js";
-import { getIncomeTotals as I, getSpendingTotals as _ } from "../utils/SpendingData.es.js";
-import { TRENDS_ANALYTICS_METADATA as k } from "../constants/TrendsWidget.es.js";
-import m from "react";
-import { observer as D } from "mobx-react-lite";
-import { jsx as L } from "react/jsx-runtime";
-import { useTheme as M } from "@mui/material/styles";
-var N = (t, e) => [I(t, e), _(t, e)].filter((o) => o.length > 0), y = (t, e) => {
+import { useEvent as E, useGlobalCopyStore as H } from "../../common/context/hooks.es.js";
+import { useScreenSize as I } from "../../common/hooks/useScreenSize.es.js";
+import { ANALYTICS_EVENTS as N } from "../../common/constants/Analytics.es.js";
+import { useDimensions as D } from "../../common/hooks/useDimensions.es.js";
+import { LineChart as M } from "../../common/components/charts/LineChart.es.js";
+import { getIncomeTotals as k, getSpendingTotals as R } from "../utils/SpendingData.es.js";
+import { TRENDS_ANALYTICS_METADATA as X } from "../constants/TrendsWidget.es.js";
+import p from "react";
+import { observer as Y } from "mobx-react-lite";
+import { jsx as T } from "react/jsx-runtime";
+import { useTheme as y } from "@mui/material/styles";
+import B from "@mui/material/Box";
+var W = 12, O = 380, j = (t, e) => [k(t, e), R(t, e)].filter((o) => o.length > 0), z = (t, e) => {
   const [o, c] = t, s = o, l = c ?? o, r = [];
   if (s) {
     const a = s.reduce((n, i) => n + i.y, 0);
@@ -25,34 +27,40 @@ var N = (t, e) => [I(t, e), _(t, e)].filter((o) => o.length > 0), y = (t, e) =>
     });
   }
   return r;
-}, Y = ({ availableHeight: t = 0, minHeight: e = 500, selectedDateRange: o, totals: c }) => {
-  const s = M(), { onEvent: l } = w(), { trends: r } = v(), { isSmallMobile: a, isMobile: n, isSmallTablet: i, isTablet: u } = x(), p = [s.palette.chart?.chart1, s.palette.chart?.chart2], h = N(c, o), T = y(h, r), [d, g] = m.useState(0), b = 458, f = 195, A = 56, C = n || a ? f : i || u ? b : d;
-  return m.useEffect(() => {
-    const S = Math.max(t - A, e);
-    g(S);
-  }, [t]), /* @__PURE__ */ L(H, {
-    baseline: "min",
-    colors: p,
-    curveType: "bump",
-    datasets: h,
-    height: C,
-    labels: T,
-    onItemClick: () => {
-      l(E.TRENDS_CLICK_CHART, k);
-    },
-    showArea: !0,
-    showAxisHighlight: !0,
-    showLegend: !0,
-    showTooltip: !0,
-    showXAxis: !0,
-    showXAxisTicks: !0,
-    showYAxis: !0,
-    showYAxisTicks: !0,
-    valueFormatterString: "0.0a"
+}, F = ({ availableHeight: t = 0, minHeight: e = 500, selectedDateRange: o, totals: c }) => {
+  const s = y(), { onEvent: l } = E(), { trends: r } = H(), { isSmallMobile: a, isMobile: n, isSmallTablet: i, isTablet: d } = I(), [A, { width: u }] = D(), f = [s.palette.chart?.chart1, s.palette.chart?.chart2], h = j(c, o), b = z(h, r), g = Math.max(0, ...h.map((m) => m.length)), C = u > 0 && u <= O && g >= W, [S, w] = p.useState(0), x = 458, _ = 195, L = 56, v = n || a ? _ : i || d ? x : S;
+  return p.useEffect(() => {
+    const m = Math.max(t - L, e);
+    w(m);
+  }, [t]), /* @__PURE__ */ T(B, {
+    ref: A,
+    sx: { width: "100%" },
+    children: /* @__PURE__ */ T(M, {
+      baseline: "min",
+      colors: f,
+      curveType: "bump",
+      datasets: h,
+      height: v,
+      labels: b,
+      narrowXAxisLabels: C,
+      onItemClick: () => {
+        l(N.TRENDS_CLICK_CHART, X);
+      },
+      showAllXAxisLabels: !0,
+      showArea: !0,
+      showAxisHighlight: !0,
+      showLegend: !0,
+      showTooltip: !0,
+      showXAxis: !0,
+      showXAxisTicks: !0,
+      showYAxis: !0,
+      showYAxisTicks: !0,
+      valueFormatterString: "0.0a"
+    })
   });
-}, O = D(Y);
+}, st = Y(F);
 export {
-  O as default
+  st as default
 };
 
 //# sourceMappingURL=TrendsChartTotals.es.js.map

package/dist/trends/components/TrendsChartTotals.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsChartTotals.es.js","names":[],"sources":["../../../src/trends/components/TrendsChartTotals.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport { ANALYTICS_EVENTS, useEvent, useGlobalCopyStore, useScreenSize } from '../../common'\nimport { DateRange, MonthlyCategoryTotals, TrendsCopy } from '../../core'\nimport { LineChart } from '../../common/components/charts/LineChart'\nimport type { LineChartDataset, LineChartLabel } from '../../common/components/charts/LineChart'\n\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\nimport { getIncomeTotals, getSpendingTotals } from '../utils/SpendingData'\n\nconst getDatasets = (totals: MonthlyCategoryTotals[], dateRange: DateRange): LineChartDataset[] => {\n  const incomeData = getIncomeTotals(totals, dateRange)\n  const spendingData = getSpendingTotals(totals, dateRange)\n  return [incomeData, spendingData].filter((data) => data.length > 0)\n}\n\nconst getLabels = (datasets: LineChartDataset[], copy: TrendsCopy) => {\n  const [dataA, dataB] = datasets\n  const credits = dataA\n  const debits = dataB ?? dataA\n  const labels: LineChartLabel[] = []\n\n  if (credits) {\n    const totalIncome = credits.reduce((sum, item) => sum + item.y, 0)\n    labels.push({ label: copy.income_label, amount: totalIncome })\n  }\n\n  if (debits) {\n    const totalSpending = debits.reduce((sum, item) => sum + item.y, 0)\n    labels.push({ label: copy.spending_label, amount: totalSpending })\n  }\n\n  return labels\n}\n\ninterface TrendsChartTotalsProps {\n  availableHeight?: number\n  minHeight?: number\n  selectedDateRange: DateRange\n  totals: MonthlyCategoryTotals[]\n}\n\nconst TrendsChartTotals: React.FC<TrendsChartTotalsProps> = ({\n  availableHeight = 0,\n  minHeight = 500,\n  selectedDateRange,\n  totals,\n}) => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n  const { trends: trendsCopy } = useGlobalCopyStore()\n  const { isSmallMobile, isMobile, isSmallTablet, isTablet } = useScreenSize()\n\n  const colors = [theme.palette.chart?.chart1, theme.palette.chart?.chart2]\n  const datasets = getDatasets(totals, selectedDateRange)\n  const labels = getLabels(datasets, trendsCopy)\n\n  const [chartDesktopHeight, setChartDesktopHeight] = React.useState<number>(0)\n  const chartTabletHeight = 458\n  const chartMobileHeight = 195\n  const legendHeight = 56\n\n  // prettier-ignore\n  // eslint-disable-next-line no-nested-ternary\n  const chartHeight = (isMobile || isSmallMobile) ? chartMobileHeight :\n  (isSmallTablet || isTablet) ? chartTabletHeight : chartDesktopHeight;\n\n  // Control responsive chart height based on available height\n  React.useEffect(() => {\n    const newChartHeight = Math.max(availableHeight - legendHeight, minHeight)\n    setChartDesktopHeight(newChartHeight)\n  }, [availableHeight])\n\n  const handleItemClick = () => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CHART, TRENDS_ANALYTICS_METADATA)\n  }\n\n  return (\n    <LineChart\n      baseline=\"min\"\n      colors={colors}\n      curveType=\"bump\"\n      datasets={datasets}\n      height={chartHeight}\n      labels={labels}\n      onItemClick={handleItemClick}\n      showArea={true}\n      showAxisHighlight={true}\n      showLegend={true}\n      showTooltip={true}\n      showXAxis={true}\n      showXAxisTicks={true}\n      showYAxis={true}\n      showYAxisTicks={true}\n      valueFormatterString=\"0.0a\"\n    />\n  )\n}\n\nexport default observer(TrendsChartTotals)\n"],"mappings":";;;;;;;;;;AAaA,IAAM,IAAA,CAAe,GAAiC,MAG7C,CAFY,EAAgB,GAAQ,CAEnC,GADa,EAAkB,GAAQ,CAC3B,CAAY,EAAE,OAAA,CAAQ,MAAS,EAAK,SAAS,CAAC,GAG9D,IAAA,CAAa,GAA8B,MAAqB;AACpE,QAAM,CAAC,GAAO,CAAA,IAAS,GACjB,IAAU,GACV,IAAS,KAAS,GAClB,IAA2B,CAAC;AAElC,MAAI,GAAS;AACX,UAAM,IAAc,EAAQ,OAAA,CAAQ,GAAK,MAAS,IAAM,EAAK,GAAG,CAAC;AACjE,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAc,QAAQ;AAAA,IAAY,CAAC;AAAA,EAC/D;AAEA,MAAI,GAAQ;AACV,UAAM,IAAgB,EAAO,OAAA,CAAQ,GAAK,MAAS,IAAM,EAAK,GAAG,CAAC;AAClE,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAgB,QAAQ;AAAA,IAAc,CAAC;AAAA,EACnE;AAEA,SAAO;AACT,GASM,IAAA,CAAuD,EAC3D,iBAAA,IAAkB,GAClB,WAAA,IAAY,KACZ,mBAAA,GACA,QAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS,GACjB,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,eAAA,GAAe,UAAA,GAAU,eAAA,GAAe,UAAA,EAAA,IAAa,EAAc,GAErE,IAAS,CAAC,EAAM,QAAQ,OAAO,QAAQ,EAAM,QAAQ,OAAO,MAAM,GAClE,IAAW,EAAY,GAAQ,CAAiB,GAChD,IAAS,EAAU,GAAU,CAAU,GAEvC,CAAC,GAAoB,CAAA,IAAyB,EAAM,SAAiB,CAAC,GACtE,IAAoB,KACpB,IAAoB,KACpB,IAAe,IAIf,IAAe,KAAY,IAAiB,IACjD,KAAiB,IAAY,IAAoB;AAGlD,SAAA,EAAM,UAAA,MAAgB;AACpB,UAAM,IAAiB,KAAK,IAAI,IAAkB,GAAc,CAAS;AACzE,IAAA,EAAsB,CAAc;AAAA,EACtC,GAAG,CAAC,CAAe,CAAC,GAOlB,gBAAA,EAAC,GAAD;AAAA,IACE,UAAS;AAAA,IACD,QAAA;AAAA,IACR,WAAU;AAAA,IACA,UAAA;AAAA,IACV,QAAQ;AAAA,IACA,QAAA;AAAA,IACR,aAZE,MAAwB;AAC5B,MAAA,EAAQ,EAAiB,oBAAoB,CAAyB;AAAA,IACxE;AAAA,IAWI,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,sBAAqB;AAAA,EACtB,CAAA;AAEL,GAEA,IAAe,EAAS,CAAiB"}
+{"version":3,"file":"TrendsChartTotals.es.js","names":[],"sources":["../../../src/trends/components/TrendsChartTotals.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport { useTheme } from '@mui/material/styles'\n\nimport { ANALYTICS_EVENTS, useEvent, useGlobalCopyStore, useScreenSize } from '../../common'\nimport { DateRange, MonthlyCategoryTotals, TrendsCopy } from '../../core'\nimport { useDimensions } from '../../common/hooks/useDimensions'\nimport { LineChart } from '../../common/components/charts/LineChart'\nimport type { LineChartDataset, LineChartLabel } from '../../common/components/charts/LineChart'\n\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\nimport { getIncomeTotals, getSpendingTotals } from '../utils/SpendingData'\n\n// Single-letter month labels only kick in for the 12-month (1 Year) view once\n// the chart container is this narrow; wider containers keep full labels.\nconst MONTHS_IN_YEAR = 12\nconst NARROW_LABELS_MAX_WIDTH_PX = 380\n\nconst getDatasets = (totals: MonthlyCategoryTotals[], dateRange: DateRange): LineChartDataset[] => {\n  const incomeData = getIncomeTotals(totals, dateRange)\n  const spendingData = getSpendingTotals(totals, dateRange)\n  return [incomeData, spendingData].filter((data) => data.length > 0)\n}\n\nconst getLabels = (datasets: LineChartDataset[], copy: TrendsCopy) => {\n  const [dataA, dataB] = datasets\n  const credits = dataA\n  const debits = dataB ?? dataA\n  const labels: LineChartLabel[] = []\n\n  if (credits) {\n    const totalIncome = credits.reduce((sum, item) => sum + item.y, 0)\n    labels.push({ label: copy.income_label, amount: totalIncome })\n  }\n\n  if (debits) {\n    const totalSpending = debits.reduce((sum, item) => sum + item.y, 0)\n    labels.push({ label: copy.spending_label, amount: totalSpending })\n  }\n\n  return labels\n}\n\ninterface TrendsChartTotalsProps {\n  availableHeight?: number\n  minHeight?: number\n  selectedDateRange: DateRange\n  totals: MonthlyCategoryTotals[]\n}\n\nconst TrendsChartTotals: React.FC<TrendsChartTotalsProps> = ({\n  availableHeight = 0,\n  minHeight = 500,\n  selectedDateRange,\n  totals,\n}) => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n  const { trends: trendsCopy } = useGlobalCopyStore()\n  const { isSmallMobile, isMobile, isSmallTablet, isTablet } = useScreenSize()\n  const [chartRef, { width: chartWidth }] = useDimensions()\n\n  const colors = [theme.palette.chart?.chart1, theme.palette.chart?.chart2]\n  const datasets = getDatasets(totals, selectedDateRange)\n  const labels = getLabels(datasets, trendsCopy)\n\n  // Measured from the chart container, not the device, so it also handles the\n  // widget embedded in a small iframe on a larger screen.\n  const monthCount = Math.max(0, ...datasets.map((data) => data.length))\n  const useNarrowXAxisLabels =\n    chartWidth > 0 && chartWidth <= NARROW_LABELS_MAX_WIDTH_PX && monthCount >= MONTHS_IN_YEAR\n\n  const [chartDesktopHeight, setChartDesktopHeight] = React.useState<number>(0)\n  const chartTabletHeight = 458\n  const chartMobileHeight = 195\n  const legendHeight = 56\n\n  // prettier-ignore\n  // eslint-disable-next-line no-nested-ternary\n  const chartHeight = (isMobile || isSmallMobile) ? chartMobileHeight :\n  (isSmallTablet || isTablet) ? chartTabletHeight : chartDesktopHeight;\n\n  // Control responsive chart height based on available height\n  React.useEffect(() => {\n    const newChartHeight = Math.max(availableHeight - legendHeight, minHeight)\n    setChartDesktopHeight(newChartHeight)\n  }, [availableHeight])\n\n  const handleItemClick = () => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CHART, TRENDS_ANALYTICS_METADATA)\n  }\n\n  return (\n    <Box ref={chartRef} sx={{ width: '100%' }}>\n      <LineChart\n        baseline=\"min\"\n        colors={colors}\n        curveType=\"bump\"\n        datasets={datasets}\n        height={chartHeight}\n        labels={labels}\n        narrowXAxisLabels={useNarrowXAxisLabels}\n        onItemClick={handleItemClick}\n        showAllXAxisLabels={true}\n        showArea={true}\n        showAxisHighlight={true}\n        showLegend={true}\n        showTooltip={true}\n        showXAxis={true}\n        showXAxisTicks={true}\n        showYAxis={true}\n        showYAxisTicks={true}\n        valueFormatterString=\"0.0a\"\n      />\n    </Box>\n  )\n}\n\nexport default observer(TrendsChartTotals)\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,IAAiB,IACjB,IAA6B,KAE7B,IAAA,CAAe,GAAiC,MAG7C,CAFY,EAAgB,GAAQ,CAEnC,GADa,EAAkB,GAAQ,CAC3B,CAAY,EAAE,OAAA,CAAQ,MAAS,EAAK,SAAS,CAAC,GAG9D,IAAA,CAAa,GAA8B,MAAqB;AACpE,QAAM,CAAC,GAAO,CAAA,IAAS,GACjB,IAAU,GACV,IAAS,KAAS,GAClB,IAA2B,CAAC;AAElC,MAAI,GAAS;AACX,UAAM,IAAc,EAAQ,OAAA,CAAQ,GAAK,MAAS,IAAM,EAAK,GAAG,CAAC;AACjE,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAc,QAAQ;AAAA,IAAY,CAAC;AAAA,EAC/D;AAEA,MAAI,GAAQ;AACV,UAAM,IAAgB,EAAO,OAAA,CAAQ,GAAK,MAAS,IAAM,EAAK,GAAG,CAAC;AAClE,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAgB,QAAQ;AAAA,IAAc,CAAC;AAAA,EACnE;AAEA,SAAO;AACT,GASM,IAAA,CAAuD,EAC3D,iBAAA,IAAkB,GAClB,WAAA,IAAY,KACZ,mBAAA,GACA,QAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS,GACjB,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,eAAA,GAAe,UAAA,GAAU,eAAA,GAAe,UAAA,EAAA,IAAa,EAAc,GACrE,CAAC,GAAU,EAAE,OAAO,EAAA,CAAA,IAAgB,EAAc,GAElD,IAAS,CAAC,EAAM,QAAQ,OAAO,QAAQ,EAAM,QAAQ,OAAO,MAAM,GAClE,IAAW,EAAY,GAAQ,CAAiB,GAChD,IAAS,EAAU,GAAU,CAAU,GAIvC,IAAa,KAAK,IAAI,GAAG,GAAG,EAAS,IAAA,CAAK,MAAS,EAAK,MAAM,CAAC,GAC/D,IACJ,IAAa,KAAK,KAAc,KAA8B,KAAc,GAExE,CAAC,GAAoB,CAAA,IAAyB,EAAM,SAAiB,CAAC,GACtE,IAAoB,KACpB,IAAoB,KACpB,IAAe,IAIf,IAAe,KAAY,IAAiB,IACjD,KAAiB,IAAY,IAAoB;AAGlD,SAAA,EAAM,UAAA,MAAgB;AACpB,UAAM,IAAiB,KAAK,IAAI,IAAkB,GAAc,CAAS;AACzE,IAAA,EAAsB,CAAc;AAAA,EACtC,GAAG,CAAC,CAAe,CAAC,GAOlB,gBAAA,EAAC,GAAD;AAAA,IAAK,KAAK;AAAA,IAAU,IAAI,EAAE,OAAO,OAAO;AAAA,IACtC,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,UAAS;AAAA,MACD,QAAA;AAAA,MACR,WAAU;AAAA,MACA,UAAA;AAAA,MACV,QAAQ;AAAA,MACA,QAAA;AAAA,MACR,mBAAmB;AAAA,MACnB,aAdA,MAAwB;AAC5B,QAAA,EAAQ,EAAiB,oBAAoB,CAAyB;AAAA,MACxE;AAAA,MAaM,oBAAoB;AAAA,MACpB,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,sBAAqB;AAAA,IACtB,CAAA;AAAA,EACE,CAAA;AAET,GAEA,KAAe,EAAS,CAAiB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.4.37",
+  "version": "9.4.38",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",