@mx-cartographer/experiences 9.4.37 → 9.4.39

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [9.4.39] - 09-23-2026
+
+- **FIXED** - Trends category rows no longer show a nonzero total with "0 transactions" and no chevron. (MEW-4021)
+
+## [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/ListItemRow.d.ts

@@ -4,7 +4,7 @@ interface ListItemRowProps {
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     title?: string;
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     rightContent?: React.ReactNode;
     titleBold?: boolean;
     rightContentBold?: boolean;

package/dist/common/components/ListItemRow.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemRow.es.js","names":[],"sources":["../../../src/common/components/ListItemRow.tsx"],"sourcesContent":["import React from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\ninterface ListItemRowProps {\n  onClick?: () => void\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  title?: string\n  subtitle?: string\n  rightContent?: React.ReactNode\n  titleBold?: boolean\n  rightContentBold?: boolean\n}\n\nexport const ListItemRow: React.FC<ListItemRowProps> = ({\n  onClick,\n  leftIcon,\n  rightIcon,\n  title,\n  subtitle,\n  rightContent,\n  titleBold = true,\n  rightContentBold = true,\n}) => {\n  const content = (\n    <React.Fragment>\n      {leftIcon && <ListItemIcon sx={{ ml: 0 }}>{leftIcon}</ListItemIcon>}\n      <ListItemText>\n        <Stack\n          sx={{\n            alignItems: 'center',\n            flexDirection: 'row',\n            marginLeft: 12,\n          }}\n        >\n          <Stack sx={{ flex: 1, minWidth: 0 }}>\n            <Text bold={titleBold} variant=\"body1\">\n              {title}\n            </Text>\n            {subtitle && <Text variant=\"caption\">{subtitle}</Text>}\n          </Stack>\n          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n            {rightContent && (\n              <Text bold={rightContentBold} display=\"flex\" variant=\"body1\">\n                {rightContent}\n              </Text>\n            )}\n            {rightIcon && <ListItemIcon>{rightIcon}</ListItemIcon>}\n          </Stack>\n        </Stack>\n      </ListItemText>\n    </React.Fragment>\n  )\n\n  return (\n    <ListItem>\n      {onClick ? (\n        <ListItemButton\n          onClick={onClick}\n          sx={{\n            py: 14,\n          }}\n        >\n          {content}\n        </ListItemButton>\n      ) : (\n        <Stack\n          sx={{\n            py: 14,\n            px: 24,\n            width: '100%',\n            flexDirection: 'row',\n            alignItems: 'center',\n          }}\n        >\n          {content}\n        </Stack>\n      )}\n    </ListItem>\n  )\n}\n"],"mappings":";;;;;;;;AAqBA,IAAa,IAAA,CAA2C,EACtD,SAAA,GACA,UAAA,GACA,WAAA,GACA,OAAA,GACA,UAAA,GACA,cAAA,GACA,WAAA,IAAY,IACZ,kBAAA,IAAmB,GAAA,MACf;AACJ,QAAM,IACJ,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACG,KAAY,gBAAA,EAAC,GAAD;AAAA,IAAc,IAAI,EAAE,IAAI,EAAE;AAAA,IAAI,UAAA;AAAA,EAAuB,CAAA,GAClE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,YAAY;AAAA,IACd;AAAA,IALF,UAAA,CAOE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,MAAM;AAAA,QAAG,UAAU;AAAA,MAAE;AAAA,MAAlC,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAW,SAAQ;AAAA,QAC5B,UAAA;AAAA,MACG,CAAA,GACL,KAAY,gBAAA,EAAC,GAAD;AAAA,QAAM,SAAQ;AAAA,QAAW,UAAA;AAAA,MAAe,CAAA,CAChD;AAAA,IACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,eAAe;AAAA,QAAO,YAAY;AAAA,QAAU,KAAK;AAAA,MAAE;AAAA,MAAhE,UAAA,CACG,KACC,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAkB,SAAQ;AAAA,QAAO,SAAQ;AAAA,QAClD,UAAA;AAAA,MACG,CAAA,GAEP,KAAa,gBAAA,EAAC,GAAD,EAAA,UAAe,EAAwB,CAAA,CAChD;AAAA,IACF,CAAA,CAAA;AAAA,EACK,CAAA,EAAA,CAAA,CACA,EAAA,CAAA;AAGlB,SACE,gBAAA,EAAC,GAAD,EAAA,UACG,IACC,gBAAA,EAAC,GAAD;AAAA,IACW,SAAA;AAAA,IACT,IAAI,EACF,IAAI,GACN;AAAA,IAEC,UAAA;AAAA,EACa,CAAA,IAEhB,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,eAAe;AAAA,MACf,YAAY;AAAA,IACd;AAAA,IAEC,UAAA;AAAA,EACI,CAAA,EAED,CAAA;AAEd"}
+{"version":3,"file":"ListItemRow.es.js","names":[],"sources":["../../../src/common/components/ListItemRow.tsx"],"sourcesContent":["import React from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\ninterface ListItemRowProps {\n  onClick?: () => void\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  title?: string\n  subtitle?: React.ReactNode\n  rightContent?: React.ReactNode\n  titleBold?: boolean\n  rightContentBold?: boolean\n}\n\nexport const ListItemRow: React.FC<ListItemRowProps> = ({\n  onClick,\n  leftIcon,\n  rightIcon,\n  title,\n  subtitle,\n  rightContent,\n  titleBold = true,\n  rightContentBold = true,\n}) => {\n  const content = (\n    <React.Fragment>\n      {leftIcon && <ListItemIcon sx={{ ml: 0 }}>{leftIcon}</ListItemIcon>}\n      <ListItemText>\n        <Stack\n          sx={{\n            alignItems: 'center',\n            flexDirection: 'row',\n            marginLeft: 12,\n          }}\n        >\n          <Stack sx={{ flex: 1, minWidth: 0 }}>\n            <Text bold={titleBold} variant=\"body1\">\n              {title}\n            </Text>\n            {subtitle && <Text variant=\"caption\">{subtitle}</Text>}\n          </Stack>\n          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>\n            {rightContent && (\n              <Text bold={rightContentBold} display=\"flex\" variant=\"body1\">\n                {rightContent}\n              </Text>\n            )}\n            {rightIcon && <ListItemIcon>{rightIcon}</ListItemIcon>}\n          </Stack>\n        </Stack>\n      </ListItemText>\n    </React.Fragment>\n  )\n\n  return (\n    <ListItem>\n      {onClick ? (\n        <ListItemButton\n          onClick={onClick}\n          sx={{\n            py: 14,\n          }}\n        >\n          {content}\n        </ListItemButton>\n      ) : (\n        <Stack\n          sx={{\n            py: 14,\n            px: 24,\n            width: '100%',\n            flexDirection: 'row',\n            alignItems: 'center',\n          }}\n        >\n          {content}\n        </Stack>\n      )}\n    </ListItem>\n  )\n}\n"],"mappings":";;;;;;;;AAqBA,IAAa,IAAA,CAA2C,EACtD,SAAA,GACA,UAAA,GACA,WAAA,GACA,OAAA,GACA,UAAA,GACA,cAAA,GACA,WAAA,IAAY,IACZ,kBAAA,IAAmB,GAAA,MACf;AACJ,QAAM,IACJ,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACG,KAAY,gBAAA,EAAC,GAAD;AAAA,IAAc,IAAI,EAAE,IAAI,EAAE;AAAA,IAAI,UAAA;AAAA,EAAuB,CAAA,GAClE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,YAAY;AAAA,IACd;AAAA,IALF,UAAA,CAOE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,MAAM;AAAA,QAAG,UAAU;AAAA,MAAE;AAAA,MAAlC,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAW,SAAQ;AAAA,QAC5B,UAAA;AAAA,MACG,CAAA,GACL,KAAY,gBAAA,EAAC,GAAD;AAAA,QAAM,SAAQ;AAAA,QAAW,UAAA;AAAA,MAAe,CAAA,CAChD;AAAA,IACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,eAAe;AAAA,QAAO,YAAY;AAAA,QAAU,KAAK;AAAA,MAAE;AAAA,MAAhE,UAAA,CACG,KACC,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAkB,SAAQ;AAAA,QAAO,SAAQ;AAAA,QAClD,UAAA;AAAA,MACG,CAAA,GAEP,KAAa,gBAAA,EAAC,GAAD,EAAA,UAAe,EAAwB,CAAA,CAChD;AAAA,IACF,CAAA,CAAA;AAAA,EACK,CAAA,EAAA,CAAA,CACA,EAAA,CAAA;AAGlB,SACE,gBAAA,EAAC,GAAD,EAAA,UACG,IACC,gBAAA,EAAC,GAAD;AAAA,IACW,SAAA;AAAA,IACT,IAAI,EACF,IAAI,GACN;AAAA,IAEC,UAAA;AAAA,EACa,CAAA,IAEhB,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,eAAe;AAAA,MACf,YAAY;AAAA,IACd;AAAA,IAEC,UAAA;AAAA,EACI,CAAA,EAED,CAAA;AAEd"}

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":"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"}
+{"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":";;;;;;;;;;;;;;;;;;;;AAkCA,IAAM,KAAA,CAAwB,MAA2B;AACvD,QAAM,IAAY,OAAO,EAAM,QAAS,WAAW,EAAM,OAAO,IAE1D,IAAe,MAAM,KAAK,EAAU,KAAK,CAAC,EAAE,CAAA,KAAM;AACxD,SAAK,IACE,gBAAA,EAAC,GAAD;AAAA,IAAY,GAAI;AAAA,IAAO,cAAY;AAAA,IAAW,MAAK;AAAA,IAAM,MAAM;AAAA,EAAe,CAAA,IAD3D,gBAAA,EAAC,GAAD,EAAY,GAAI,EAAQ,CAAA;AAEpD,GAEM,KAAsB,EAAE,eAAe,GAAqB,GA4ErD,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,mBAAA,IAAoB,IACpB,oBAAA,IAAqB,IACrB,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,KAAY,IACZ,gBAAA,KAAiB,IACjB,WAAA,KAAY,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,CACL;AAAA,QACE,MAAM;AAAA,QACN,WAAW,OAAmB,IAAW,SAAS;AAAA,QAElD,IAAK,KAAsB,MAAsB,EAAE,mBAAA,MAAyB,GAAK;AAAA,MACnF,CACF;AAAA,MACA,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,MAjDF,UAAA;AAAA,QAoDG,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,OAAO,IAAoB,KAAsB;AAAA,UACjD,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"}

package/dist/core/stores/TrendsStore.d.ts

@@ -10,6 +10,8 @@ export declare class TrendsStore {
     setSelectedDateRange: (dateRange: DateRange) => void;
     setVisibleListLength: (length: number) => void;
     get sortedDetailedCategoriesWithTransactions(): DetailedCategoryWithTransactions[];
+    get isTransactionStoreIdle(): boolean;
+    get isSelectedRangeLoaded(): boolean;
     get selectedDateRangeMonthCount(): number;
     get selectedDateRangeMonthRange(): string;
     get visibleCategories(): DetailedCategoryWithTransactions[];

package/dist/core/stores/TrendsStore.es.js

@@ -1,20 +1,21 @@
-import { DATE_FORMATS_INTL as t, formatDate as a } from "../constants/DateFormats.es.js";
-import { buildCategoryDetailsChartData as i, filterAndSortCategoriesWithTransactions as r } from "../utils/TrendsUtil.es.js";
-import { endOfMonth as s } from "date-fns/endOfMonth";
-import { subMonths as o } from "date-fns/subMonths";
-import { differenceInCalendarMonths as n } from "date-fns/differenceInCalendarMonths";
-import { makeAutoObservable as l } from "mobx";
-import { addSeconds as g } from "date-fns/addSeconds";
-var u = class {
+import { DATE_FORMATS_INTL as a, formatDate as s } from "../constants/DateFormats.es.js";
+import { buildCategoryDetailsChartData as i, filterAndSortCategoriesWithTransactions as o } from "../utils/TrendsUtil.es.js";
+import { endOfMonth as r } from "date-fns/endOfMonth";
+import { isBefore as n } from "date-fns/isBefore";
+import { subMonths as l } from "date-fns/subMonths";
+import { differenceInCalendarMonths as d } from "date-fns/differenceInCalendarMonths";
+import { makeAutoObservable as g } from "mobx";
+import { addSeconds as c } from "date-fns/addSeconds";
+var R = class {
   globalStore;
   selectedCategoryData = null;
   selectedDateRange;
   visibleListLength = 5;
   constructor(e) {
     this.globalStore = e, this.selectedDateRange = {
-      start: g(s(o(/* @__PURE__ */ new Date(), 6)), 1),
-      end: s(/* @__PURE__ */ new Date())
-    }, l(this);
+      start: c(r(l(/* @__PURE__ */ new Date(), 6)), 1),
+      end: r(/* @__PURE__ */ new Date())
+    }, g(this);
   }
   setSelectedCategoryData = (e) => {
     this.selectedCategoryData = e;
@@ -26,13 +27,21 @@ var u = class {
     this.visibleListLength = e;
   };
   get sortedDetailedCategoriesWithTransactions() {
-    return r(this.globalStore.categoryStore.detailedCategoriesWithTransactions);
+    return o(this.globalStore.categoryStore.detailedCategoriesWithTransactions);
+  }
+  get isTransactionStoreIdle() {
+    const { isTransactionDataLoaded: e, transactionsLoading: t } = this.globalStore.transactionStore;
+    return e && !t;
+  }
+  get isSelectedRangeLoaded() {
+    const { isTransactionDataLoaded: e, cachedStartDate: t } = this.globalStore.transactionStore;
+    return e && !n(this.selectedDateRange.start, t);
   }
   get selectedDateRangeMonthCount() {
-    return n(this.selectedDateRange.end, this.selectedDateRange.start) + 1;
+    return d(this.selectedDateRange.end, this.selectedDateRange.start) + 1;
   }
   get selectedDateRangeMonthRange() {
-    return `${a(this.selectedDateRange.start, t.MONTH_LONG)} - ${a(this.selectedDateRange.end, t.MONTH_LONG)}`;
+    return `${s(this.selectedDateRange.start, a.MONTH_LONG)} - ${s(this.selectedDateRange.end, a.MONTH_LONG)}`;
   }
   get visibleCategories() {
     return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength);
@@ -45,7 +54,7 @@ var u = class {
   }
 };
 export {
-  u as TrendsStore
+  R as TrendsStore
 };
 
 //# sourceMappingURL=TrendsStore.es.js.map

package/dist/core/stores/TrendsStore.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsStore.es.js","names":[],"sources":["../../../src/core/stores/TrendsStore.ts"],"sourcesContent":["import { makeAutoObservable } from 'mobx'\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { subMonths } from 'date-fns/subMonths'\n\nimport type { DateRange, DetailedCategoryWithTransactions } from '../types'\nimport { DATE_FORMATS_INTL, formatDate } from '../constants'\nimport {\n  buildCategoryDetailsChartData,\n  filterAndSortCategoriesWithTransactions,\n} from '../utils/TrendsUtil'\n\nimport { GlobalStore } from './GlobalStore'\n\nexport class TrendsStore {\n  globalStore: GlobalStore\n  selectedCategoryData: DetailedCategoryWithTransactions | null = null\n  selectedDateRange: DateRange\n  visibleListLength: number = 5\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n    this.selectedDateRange = {\n      start: addSeconds(endOfMonth(subMonths(new Date(), 6)), 1),\n      end: endOfMonth(new Date()),\n    }\n    makeAutoObservable(this)\n  }\n\n  setSelectedCategoryData = (data: DetailedCategoryWithTransactions | null) => {\n    this.selectedCategoryData = data\n  }\n\n  setSelectedDateRange = (dateRange: DateRange) => {\n    this.selectedDateRange = dateRange\n  }\n\n  setVisibleListLength = (length: number) => {\n    this.visibleListLength = length\n  }\n\n  get sortedDetailedCategoriesWithTransactions(): DetailedCategoryWithTransactions[] {\n    return filterAndSortCategoriesWithTransactions(\n      this.globalStore.categoryStore.detailedCategoriesWithTransactions,\n    )\n  }\n\n  get selectedDateRangeMonthCount(): number {\n    return differenceInCalendarMonths(this.selectedDateRange.end, this.selectedDateRange.start) + 1\n  }\n\n  get selectedDateRangeMonthRange(): string {\n    const startMonth = formatDate(this.selectedDateRange.start, DATE_FORMATS_INTL.MONTH_LONG)\n    const endMonth = formatDate(this.selectedDateRange.end, DATE_FORMATS_INTL.MONTH_LONG)\n    return `${startMonth} - ${endMonth}`\n  }\n\n  get visibleCategories(): DetailedCategoryWithTransactions[] {\n    return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength)\n  }\n\n  get collapsedCategories(): DetailedCategoryWithTransactions[] {\n    return this.sortedDetailedCategoriesWithTransactions.slice(this.visibleListLength)\n  }\n\n  get categoryDetailsChartData() {\n    return buildCategoryDetailsChartData(\n      this.selectedCategoryData,\n      this.selectedDateRangeMonthCount,\n    )\n  }\n}\n"],"mappings":";;;;;;;AAeA,IAAa,IAAb,MAAyB;AAAA,EACvB;AAAA,EACA,uBAAgE;AAAA,EAChE;AAAA,EACA,oBAA4B;AAAA,EAE5B,YAAY,GAA0B;AACpC,SAAK,cAAc,GACnB,KAAK,oBAAoB;AAAA,MACvB,OAAO,EAAW,EAAW,EAAU,oBAAI,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC;AAAA,MACzD,KAAK,EAAW,oBAAI,KAAK,CAAC;AAAA,IAC5B,GACA,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,0BAAA,CAA2B,MAAkD;AAC3E,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAEA,uBAAA,CAAwB,MAAyB;AAC/C,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,uBAAA,CAAwB,MAAmB;AACzC,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,IAAI,2CAA+E;AACjF,WAAO,EACL,KAAK,YAAY,cAAc,kCACjC;AAAA,EACF;AAAA,EAEA,IAAI,8BAAsC;AACxC,WAAO,EAA2B,KAAK,kBAAkB,KAAK,KAAK,kBAAkB,KAAK,IAAI;AAAA,EAChG;AAAA,EAEA,IAAI,8BAAsC;AAGxC,WAAO,GAFY,EAAW,KAAK,kBAAkB,OAAO,EAAkB,UAEpE,CAAA,MADO,EAAW,KAAK,kBAAkB,KAAK,EAAkB,UAChD,CAAA;AAAA,EAC5B;AAAA,EAEA,IAAI,oBAAwD;AAC1D,WAAO,KAAK,yCAAyC,MAAM,GAAG,KAAK,iBAAiB;AAAA,EACtF;AAAA,EAEA,IAAI,sBAA0D;AAC5D,WAAO,KAAK,yCAAyC,MAAM,KAAK,iBAAiB;AAAA,EACnF;AAAA,EAEA,IAAI,2BAA2B;AAC7B,WAAO,EACL,KAAK,sBACL,KAAK,2BACP;AAAA,EACF;AACF"}
+{"version":3,"file":"TrendsStore.es.js","names":[],"sources":["../../../src/core/stores/TrendsStore.ts"],"sourcesContent":["import { makeAutoObservable } from 'mobx'\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isBefore } from 'date-fns/isBefore'\nimport { subMonths } from 'date-fns/subMonths'\n\nimport type { DateRange, DetailedCategoryWithTransactions } from '../types'\nimport { DATE_FORMATS_INTL, formatDate } from '../constants'\nimport {\n  buildCategoryDetailsChartData,\n  filterAndSortCategoriesWithTransactions,\n} from '../utils/TrendsUtil'\n\nimport { GlobalStore } from './GlobalStore'\n\nexport class TrendsStore {\n  globalStore: GlobalStore\n  selectedCategoryData: DetailedCategoryWithTransactions | null = null\n  selectedDateRange: DateRange\n  visibleListLength: number = 5\n\n  constructor(globalStore: GlobalStore) {\n    this.globalStore = globalStore\n    this.selectedDateRange = {\n      start: addSeconds(endOfMonth(subMonths(new Date(), 6)), 1),\n      end: endOfMonth(new Date()),\n    }\n    makeAutoObservable(this)\n  }\n\n  setSelectedCategoryData = (data: DetailedCategoryWithTransactions | null) => {\n    this.selectedCategoryData = data\n  }\n\n  setSelectedDateRange = (dateRange: DateRange) => {\n    this.selectedDateRange = dateRange\n  }\n\n  setVisibleListLength = (length: number) => {\n    this.visibleListLength = length\n  }\n\n  get sortedDetailedCategoriesWithTransactions(): DetailedCategoryWithTransactions[] {\n    return filterAndSortCategoriesWithTransactions(\n      this.globalStore.categoryStore.detailedCategoriesWithTransactions,\n    )\n  }\n\n  get isTransactionStoreIdle(): boolean {\n    const { isTransactionDataLoaded, transactionsLoading } = this.globalStore.transactionStore\n    return isTransactionDataLoaded && !transactionsLoading\n  }\n\n  get isSelectedRangeLoaded(): boolean {\n    const { isTransactionDataLoaded, cachedStartDate } = this.globalStore.transactionStore\n    return isTransactionDataLoaded && !isBefore(this.selectedDateRange.start, cachedStartDate)\n  }\n\n  get selectedDateRangeMonthCount(): number {\n    return differenceInCalendarMonths(this.selectedDateRange.end, this.selectedDateRange.start) + 1\n  }\n\n  get selectedDateRangeMonthRange(): string {\n    const startMonth = formatDate(this.selectedDateRange.start, DATE_FORMATS_INTL.MONTH_LONG)\n    const endMonth = formatDate(this.selectedDateRange.end, DATE_FORMATS_INTL.MONTH_LONG)\n    return `${startMonth} - ${endMonth}`\n  }\n\n  get visibleCategories(): DetailedCategoryWithTransactions[] {\n    return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength)\n  }\n\n  get collapsedCategories(): DetailedCategoryWithTransactions[] {\n    return this.sortedDetailedCategoriesWithTransactions.slice(this.visibleListLength)\n  }\n\n  get categoryDetailsChartData() {\n    return buildCategoryDetailsChartData(\n      this.selectedCategoryData,\n      this.selectedDateRangeMonthCount,\n    )\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,IAAa,IAAb,MAAyB;AAAA,EACvB;AAAA,EACA,uBAAgE;AAAA,EAChE;AAAA,EACA,oBAA4B;AAAA,EAE5B,YAAY,GAA0B;AACpC,SAAK,cAAc,GACnB,KAAK,oBAAoB;AAAA,MACvB,OAAO,EAAW,EAAW,EAAU,oBAAI,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC;AAAA,MACzD,KAAK,EAAW,oBAAI,KAAK,CAAC;AAAA,IAC5B,GACA,EAAmB,IAAI;AAAA,EACzB;AAAA,EAEA,0BAAA,CAA2B,MAAkD;AAC3E,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAEA,uBAAA,CAAwB,MAAyB;AAC/C,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,uBAAA,CAAwB,MAAmB;AACzC,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,IAAI,2CAA+E;AACjF,WAAO,EACL,KAAK,YAAY,cAAc,kCACjC;AAAA,EACF;AAAA,EAEA,IAAI,yBAAkC;AACpC,UAAM,EAAE,yBAAA,GAAyB,qBAAA,EAAA,IAAwB,KAAK,YAAY;AAC1E,WAAO,KAA2B,CAAC;AAAA,EACrC;AAAA,EAEA,IAAI,wBAAiC;AACnC,UAAM,EAAE,yBAAA,GAAyB,iBAAA,EAAA,IAAoB,KAAK,YAAY;AACtE,WAAO,KAA2B,CAAC,EAAS,KAAK,kBAAkB,OAAO,CAAe;AAAA,EAC3F;AAAA,EAEA,IAAI,8BAAsC;AACxC,WAAO,EAA2B,KAAK,kBAAkB,KAAK,KAAK,kBAAkB,KAAK,IAAI;AAAA,EAChG;AAAA,EAEA,IAAI,8BAAsC;AAGxC,WAAO,GAFY,EAAW,KAAK,kBAAkB,OAAO,EAAkB,UAEpE,CAAA,MADO,EAAW,KAAK,kBAAkB,KAAK,EAAkB,UAChD,CAAA;AAAA,EAC5B;AAAA,EAEA,IAAI,oBAAwD;AAC1D,WAAO,KAAK,yCAAyC,MAAM,GAAG,KAAK,iBAAiB;AAAA,EACtF;AAAA,EAEA,IAAI,sBAA0D;AAC5D,WAAO,KAAK,yCAAyC,MAAM,KAAK,iBAAiB;AAAA,EACnF;AAAA,EAEA,IAAI,2BAA2B;AAC7B,WAAO,EACL,KAAK,sBACL,KAAK,2BACP;AAAA,EACF;AACF"}