@mx-cartographer/experiences 7.4.15 → 7.4.17-alpha.mega1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [8.0.0] - 07-01-2025
+
+- **UPDATED** - Migrated MUI X-Charts from v7 to v8
+
+## [7.4.16] - 12-23-2025
+
+- **FIXED** - `MicroCardTemplate` LineHeight Fix
+
 ## [7.4.15] - 12-22-2025
 
 - **FIXED** - Spending Total Amount Discrepancies wrt legacy - Bug Fixed

package/dist/LineChart-Ck3RRxi_.mjs

@@ -0,0 +1,580 @@
+import { jsxs as a, jsx as e, Fragment as $ } from "react/jsx-runtime";
+import Y from "@mui/material/Box";
+import { useTheme as W } from "@mui/material/styles";
+import { BarPlot as ft } from "@mui/x-charts/BarChart";
+import { ChartContainer as xt } from "@mui/x-charts/ChartContainer";
+import { ChartsAxisHighlight as yt } from "@mui/x-charts/ChartsAxisHighlight";
+import { ChartsReferenceLine as gt } from "@mui/x-charts/ChartsReferenceLine";
+import { useAxesTooltip as pt, ChartsTooltipContainer as bt } from "@mui/x-charts/ChartsTooltip";
+import { ChartsXAxis as kt } from "@mui/x-charts/ChartsXAxis";
+import { ChartsYAxis as Mt } from "@mui/x-charts/ChartsYAxis";
+import { AreaPlot as Ct, LinePlot as wt, MarkPlot as Lt } from "@mui/x-charts/LineChart";
+import { f as p, c as X } from "./NumberFormatting-DjTD0t3W.mjs";
+import { observer as St } from "mobx-react-lite";
+import P from "@mui/material/Stack";
+import { Text as l } from "@mxenabled/mxui";
+import { u as vt } from "./hooks-ZMp65DFz.mjs";
+import Dt from "@mui/material/useMediaQuery";
+import { Stack as M, Box as F } from "@mui/material";
+const Tt = ({
+  label: t,
+  customLegendVariant: r
+}) => {
+  const s = r || "Small";
+  return typeof t == "string" ? /* @__PURE__ */ e(l, { variant: s, children: t }) : typeof t == "object" && t.amount !== void 0 && t.label ? /* @__PURE__ */ a($, { children: [
+    /* @__PURE__ */ e(l, { variant: s, children: t.label }),
+    /* @__PURE__ */ e(l, { bold: !0, sx: { marginLeft: 8 }, variant: s, children: p(t.amount, "0,0") })
+  ] }) : null;
+}, At = ({
+  average: t,
+  customLegendVariant: r,
+  customLegendBoxSx: s,
+  labels: o = [],
+  series: b,
+  style: x,
+  title: h,
+  valueFormatterString: u
+}) => {
+  const { common: m } = vt(), c = r || "Small";
+  return /* @__PURE__ */ a(P, { style: { flexDirection: "row", gap: 24, ...x }, children: [
+    b.map((i, f) => {
+      const d = o[f];
+      return d ? /* @__PURE__ */ a(
+        P,
+        {
+          style: { alignItems: "center", flexDirection: "row", flexWrap: "wrap" },
+          children: [
+            /* @__PURE__ */ e(
+              Y,
+              {
+                sx: {
+                  width: 10,
+                  height: 10,
+                  backgroundColor: i.color,
+                  marginRight: 8,
+                  ...s
+                }
+              }
+            ),
+            /* @__PURE__ */ e(Tt, { customLegendVariant: r, label: d })
+          ]
+        },
+        f
+      ) : null;
+    }),
+    t && /* @__PURE__ */ a(P, { sx: { alignItems: "center", flexDirection: "row" }, children: [
+      /* @__PURE__ */ e(l, { bold: !0, sx: { marginRight: 8 }, variant: c, children: "– –" }),
+      /* @__PURE__ */ a(l, { variant: c, children: [
+        h || m.average,
+        "  "
+      ] }),
+      /* @__PURE__ */ e(l, { bold: !0, variant: c, children: u ? p(t, u) : t })
+    ] })
+  ] });
+}, Bt = St(At), It = (t) => /* @__PURE__ */ a($, { children: [
+  /* @__PURE__ */ e("clipPath", { id: t.id, children: /* @__PURE__ */ e("rect", { height: t.height, width: t.width, x: "0", y: "0" }) }),
+  /* @__PURE__ */ e("g", { children: /* @__PURE__ */ e(
+    "path",
+    {
+      cursor: "unset",
+      d: t.d,
+      style: {
+        strokeWidth: 2,
+        strokeLinejoin: "round",
+        fill: "none",
+        stroke: t.lineColor ? t.lineColor : t.stroke,
+        transition: "opacity 0.2s ease-in, stroke 0.2s ease-in",
+        opacity: 1
+      }
+    }
+  ) })
+] }), Rt = (t) => {
+  const r = W(), s = t.showLabel, o = t.style, b = o?.markLabelStyles, x = Number(t.x), h = Number(t.y), u = t.handlers?.onMarkClick, m = t.handlers?.onMouseEnter, c = t.handlers?.onMouseLeave, i = Dt(r.breakpoints.up("sm")), f = t.valueFormatterString ? p(t.yData[t.dataIndex], t.valueFormatterString) : String(t.yData[t.dataIndex]), d = i ? r.typography.Small?.fontSize : r.typography.XSmall?.fontSize, D = 30, T = 24, A = x - D / 2, B = h - 30;
+  return /* @__PURE__ */ a($, { children: [
+    s && /* @__PURE__ */ a($, { children: [
+      t.labelBackgroundColor && /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: t.labelBackgroundColor,
+          height: T,
+          rx: "3",
+          width: D,
+          x: A,
+          y: B
+        }
+      ),
+      /* @__PURE__ */ e(
+        "text",
+        {
+          className: "MuiLineChart-markLabel",
+          dominantBaseline: "middle",
+          fill: t.labelFontColor ? t.labelFontColor : r.palette.text.primary,
+          style: {
+            fontSize: t.labelFontSize ? t.labelFontSize : d,
+            ...b
+          },
+          textAnchor: "middle",
+          x,
+          y: h - 28 + T / 2,
+          children: f
+        }
+      )
+    ] }),
+    t.showMark && /* @__PURE__ */ e(
+      "path",
+      {
+        cursor: u ? "pointer" : "unset",
+        d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
+        height: "20px",
+        onClick: (j) => {
+          u?.(j, t.dataIndex);
+        },
+        onMouseEnter: () => {
+          m?.(t.dataIndex);
+        },
+        onMouseLeave: () => {
+          c?.();
+        },
+        style: {
+          fill: o?.fill ? o.fill : r.palette.background.paper,
+          stroke: o?.stroke ? o.stroke : r.palette.primary.main,
+          strokeWidth: 2,
+          transform: `translate(${t.x}px, ${t.y}px)`,
+          transformOrigin: `${t.x}px, ${t.y}px`,
+          filter: o?.filter ? o.filter : "none"
+        },
+        width: "20px"
+      }
+    )
+  ] });
+};
+function $t({
+  customLabels: t,
+  labels: r = [],
+  series: s,
+  valueFormatterString: o = "0,0"
+}) {
+  const b = pt(), x = W(), h = b?.[0];
+  if (!h) return null;
+  const { axisValue: u, dataIndex: m = 0 } = h;
+  if (t) {
+    const c = t[m]?.[0]?.header || String(u);
+    return /* @__PURE__ */ a(
+      M,
+      {
+        sx: {
+          backgroundColor: x.palette.background.paper,
+          boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          borderRadius: "4px",
+          width: 250,
+          gap: 8,
+          px: 16,
+          py: 12
+        },
+        children: [
+          /* @__PURE__ */ a(
+            M,
+            {
+              sx: {
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+                alignSelf: "stretch",
+                gap: 8,
+                marginTop: 4
+              },
+              children: [
+                /* @__PURE__ */ e(l, { variant: "H3", children: c }),
+                /* @__PURE__ */ e(l, { bold: !0, variant: "H3", children: p(s[0]?.data[m], o) })
+              ]
+            }
+          ),
+          t[m]?.some((i) => (typeof i == "string" ? 0 : i.amount) !== 0) ? t[m]?.map((i) => {
+            const f = typeof i == "string" ? i : i.label, d = typeof i == "string" ? 0 : i.amount;
+            return d === 0 ? null : /* @__PURE__ */ a(
+              M,
+              {
+                sx: {
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  alignSelf: "stretch",
+                  gap: 8,
+                  marginTop: 4
+                },
+                children: [
+                  /* @__PURE__ */ a(
+                    M,
+                    {
+                      sx: {
+                        flexDirection: "row",
+                        alignItems: "center",
+                        gap: 8,
+                        flex: 1,
+                        minWidth: 0
+                      },
+                      children: [
+                        /* @__PURE__ */ e(
+                          F,
+                          {
+                            sx: {
+                              width: "12px",
+                              height: "12px",
+                              backgroundColor: s[0]?.color,
+                              borderRadius: "4px"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ e(l, { variant: "Body", children: f })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: p(Math.abs(d), o) })
+                ]
+              },
+              f
+            );
+          }) : /* @__PURE__ */ e(l, { variant: "Body", children: "No data" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ a(
+    M,
+    {
+      sx: {
+        backgroundColor: x.palette.background.paper,
+        boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        borderRadius: "4px",
+        width: 225,
+        gap: 8,
+        px: 16,
+        py: 12
+      },
+      children: [
+        /* @__PURE__ */ e(l, { variant: "H3", children: String(u) }),
+        s.map((c, i) => /* @__PURE__ */ a(
+          M,
+          {
+            sx: {
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              alignSelf: "stretch",
+              gap: 8,
+              marginTop: 4
+            },
+            children: [
+              /* @__PURE__ */ a(M, { sx: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ e(
+                  F,
+                  {
+                    sx: {
+                      width: "12px",
+                      height: "12px",
+                      backgroundColor: c.color,
+                      borderRadius: "4px"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ e(l, { variant: "Body", children: typeof r[i] == "string" ? r[i] : r[i]?.label })
+              ] }),
+              /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: p(c.data[m], o) })
+            ]
+          },
+          c.id
+        ))
+      ]
+    }
+  );
+}
+const _t = ({
+  areaColor: t,
+  axisColor: r,
+  baseline: s = "max",
+  chartFor: o,
+  chartXaxisSx: b,
+  chartYaxisSx: x,
+  colors: h,
+  curveType: u = "linear",
+  customLegendVariant: m,
+  customLegendSx: c,
+  customLegendBoxSx: i,
+  customTooltipLabels: f,
+  datasets: d,
+  height: D,
+  isGraphClippingXAxis: T = !1,
+  labels: A,
+  labelBackgroundColor: B,
+  labelFontColor: j,
+  labelFontSize: q,
+  margin: Q,
+  markHandlers: U,
+  markStyles: V,
+  minRange: J,
+  maxRange: K,
+  onItemClick: z,
+  peerAverage: E,
+  showArea: H = !1,
+  showAverage: G = !1,
+  showAxisHighlight: Z = !1,
+  showBars: N = !1,
+  showLegend: _ = !1,
+  showMark: tt = !0,
+  showMarkLabel: et = !1,
+  showTooltip: nt = !1,
+  showXAxis: rt = !1,
+  showXAxisTicks: at = !1,
+  showYAxis: it = !1,
+  showYAxisTicks: ot = !1,
+  title: lt,
+  useCustomMark: st = !1,
+  valueFormatterString: k,
+  width: ct,
+  xAxisScaleType: dt
+}) => {
+  const y = W(), ht = d.flat().map((n) => n.x), C = d.flat().map((n) => n.y), O = E || Math.round(C.reduce((n, v) => v + n, 0) / C.length), w = Math.floor(Math.min(...C) / 100) * 100, L = Math.ceil(Math.max(...C) / 100) * 100, I = d.map((n, v) => ({
+    type: N ? "bar" : "line",
+    curve: u,
+    color: N ? y.palette.chart?.chart6 : h[v] ?? y.palette.primary.main,
+    data: n.map((g) => g.y),
+    area: H,
+    baseline: s,
+    showMark: !0,
+    valueFormatter: (g) => k ? p(g || 0, k) : String(g)
+  })), mt = {
+    ...{
+      top: 60,
+      right: 35,
+      bottom: 25,
+      left: -8
+    },
+    ...Q
+  };
+  let S = J ?? w, R = K ?? L;
+  if (o === "networthChart") {
+    const n = L - w, v = n < L * 0.05 ? 0.25 : 0.2, g = Math.max(n * v, L * 0.015);
+    S = w - g < 0 ? w : w - g, R = L + g;
+  }
+  const ut = () => {
+    if (o === "creditOverTime")
+      return X(S, 850, 5);
+    if (o === "networthChart")
+      return X(S, R, 5);
+  };
+  return /* @__PURE__ */ a(
+    Y,
+    {
+      sx: {
+        position: "relative",
+        touchAction: "pan-y",
+        // Allow vertical scrolling
+        "& svg": {
+          touchAction: "pan-y",
+          // Allow vertical scrolling on SVG
+          userSelect: "none"
+          // Prevent text selection
+        },
+        "& .recharts-wrapper": {
+          touchAction: "pan-y"
+          // For Recharts library specifically
+        }
+      },
+      children: [
+        /* @__PURE__ */ a(
+          xt,
+          {
+            height: D,
+            margin: mt,
+            series: I,
+            sx: {
+              "& .MuiBarLabel-root": {
+                fontSize: 10,
+                fontWeight: 600
+              },
+              "& .MuiAreaElement-root": {
+                opacity: 0.15
+              },
+              "& .MuiChartsAxis-tickLabel > tspan": {
+                fontFamily: y.typography.Small.fontFamily
+              },
+              "& .MuiLineChart-markLabel": {
+                fontFamily: y.typography.Small.fontFamily
+              }
+            },
+            width: ct,
+            xAxis: [{ data: ht, scaleType: dt || (N ? "band" : "point") }],
+            yAxis: [
+              {
+                tickInterval: ut(),
+                min: T ? -22 : S,
+                max: R || 100,
+                colorMap: H && I.length < 2 ? {
+                  type: "continuous",
+                  min: S,
+                  max: R,
+                  color: [
+                    y.palette.background.paper,
+                    h[0] ?? y.palette.primary.main
+                  ]
+                } : void 0,
+                valueFormatter: (n) => k ? p(n, k) : String(n),
+                width: 60
+              }
+            ],
+            children: [
+              G && /* @__PURE__ */ e(
+                gt,
+                {
+                  lineStyle: {
+                    stroke: B ? y.palette.neutral.main : y.palette.neutral.dark,
+                    strokeDasharray: "10, 8",
+                    strokeWidth: 2
+                  },
+                  y: O
+                }
+              ),
+              /* @__PURE__ */ e(
+                Ct,
+                {
+                  onItemClick: z,
+                  ...t && {
+                    slots: {
+                      area: (n) => /* @__PURE__ */ a("g", { children: [
+                        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ a("linearGradient", { id: "customGradient", x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                          /* @__PURE__ */ e("stop", { offset: "0%", stopColor: t }),
+                          /* @__PURE__ */ e("stop", { offset: "100%", stopColor: t, stopOpacity: 0.02 })
+                        ] }) }),
+                        /* @__PURE__ */ e("path", { ...n, fill: "url(#customGradient)" })
+                      ] })
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                wt,
+                {
+                  onItemClick: z,
+                  slots: {
+                    line: (n) => /* @__PURE__ */ e(
+                      It,
+                      {
+                        ...n,
+                        lineColor: t ?? n.ownerState.color ?? y.palette.primary.main
+                      }
+                    )
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                Lt,
+                {
+                  onItemClick: z,
+                  slots: st ? {
+                    mark: (n) => /* @__PURE__ */ e(
+                      Rt,
+                      {
+                        handlers: U,
+                        labelBackgroundColor: B,
+                        labelFontColor: j,
+                        labelFontSize: q,
+                        showLabel: et,
+                        showMark: tt || n.dataIndex === d[0].length - 1,
+                        style: V?.(n.dataIndex) ?? {},
+                        valueFormatterString: k,
+                        yData: C,
+                        ...n
+                      }
+                    )
+                  } : void 0
+                }
+              ),
+              /* @__PURE__ */ e(
+                ft,
+                {
+                  barLabel: (n) => Number(n.value) > 0 ? `$${n.value}` : null,
+                  borderRadius: 10
+                }
+              ),
+              /* @__PURE__ */ e(
+                kt,
+                {
+                  disableLine: !rt,
+                  disableTicks: !at,
+                  slotProps: r ? {
+                    axisLine: {
+                      style: {
+                        stroke: r
+                      }
+                    },
+                    axisTick: {
+                      style: {
+                        stroke: r
+                      }
+                    }
+                  } : {},
+                  sx: { ...b }
+                }
+              ),
+              /* @__PURE__ */ e(
+                Mt,
+                {
+                  disableLine: !it,
+                  disableTicks: !ot,
+                  slotProps: r ? {
+                    axisLine: {
+                      style: {
+                        stroke: r
+                      }
+                    },
+                    axisTick: {
+                      style: {
+                        stroke: r
+                      }
+                    }
+                  } : {},
+                  sx: { ...x }
+                }
+              ),
+              Z && /* @__PURE__ */ e(yt, { x: "line" }),
+              nt && /* @__PURE__ */ e(bt, { trigger: "axis", children: /* @__PURE__ */ e(
+                $t,
+                {
+                  customLabels: f,
+                  labels: A,
+                  series: I,
+                  valueFormatterString: k
+                }
+              ) })
+            ]
+          }
+        ),
+        _ && /* @__PURE__ */ e(
+          Bt,
+          {
+            average: G ? O : void 0,
+            customLegendBoxSx: i,
+            customLegendVariant: m,
+            labels: A,
+            series: I,
+            style: {
+              position: "absolute",
+              top: 16,
+              left: 16,
+              ...c
+            },
+            title: lt,
+            valueFormatterString: k
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  _t as L
+};

package/dist/accounts/index.es.js

@@ -9,7 +9,7 @@ import Z from "@mui/system/Stack";
 import { Text as g } from "@mxenabled/mxui";
 import { useTheme as Q } from "@mui/material/styles";
 import { u as U, A as X } from "../AccountDetailsHeader-BkG3MNYo.mjs";
-import { L as e1 } from "../LineChart-BQRxZF3p.mjs";
+import { L as e1 } from "../LineChart-Ck3RRxi_.mjs";
 import { g as t1, a as n1, b as l1 } from "../SpendingData-BuJ03S9d.mjs";
 import { m as i1, u as M, b as S, d as W, g as P, a as o1 } from "../hooks-ZMp65DFz.mjs";
 import { A as I, l as G, m as C1 } from "../ConnectDrawer-BkvlItWx.mjs";

package/dist/common/components/charts/linechart/CustomTooltip.d.ts

@@ -2,7 +2,12 @@ import { LineChartLabel, TooltipLabel } from '../LineChart';
 interface CustomTooltipProps {
     customLabels?: TooltipLabel[][];
     labels?: LineChartLabel[];
+    series: Array<{
+        id?: string;
+        data: number[];
+        color?: string;
+    }>;
     valueFormatterString?: string;
 }
-export declare function CustomTooltip({ customLabels, labels, valueFormatterString, }: CustomTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function CustomTooltip({ customLabels, labels, series, valueFormatterString, }: CustomTooltipProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/common/components/charts/stackedlinechart/CustomPointTooltip.d.ts

@@ -1,10 +1,13 @@
 import { default as React } from 'react';
-import { ChartsItemContentProps } from '@mui/x-charts';
-interface CustomPointTooltipProps extends ChartsItemContentProps<'line'> {
+interface CustomPointTooltipProps {
     categoryGuids: {
         guid: string;
         topLevelGuid: string;
     };
+    series: Array<{
+        id: string;
+        data: number[];
+    }>;
     xData: Date[];
 }
 export declare const CustomPointTooltip: React.FC<CustomPointTooltipProps>;