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

package/dist/finstrong/components/shared/DoubleBarChart.es.js

@@ -0,0 +1,196 @@
+import { formatCurrency as y } from "../../../core/utils/NumberFormatting.es.js";
+import { getMonthName as S } from "../../util/finstrongUtils.es.js";
+import { CustomDoubleBarPlot as _ } from "./CustomDoubleBarPlot.es.js";
+import D from "react";
+import a from "@mui/material/Stack";
+import { H3 as I, Text as c } from "@mxenabled/mxui";
+import B from "@mui/material/Button";
+import { ChevronRight as R } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import { useTheme as T } from "@mui/material/styles";
+import b from "@mui/material/Box";
+import j from "@mui/material/useMediaQuery";
+import z from "@mui/material/Card";
+import { BarPlot as K } from "@mui/x-charts/BarChart";
+import { ChartContainer as L } from "@mui/x-charts/ChartContainer";
+import { ChartsXAxis as N } from "@mui/x-charts/ChartsXAxis";
+import { ChartsYAxis as P } from "@mui/x-charts/ChartsYAxis";
+var l = (n, s = 1e3) => y(n, Math.abs(n) >= s ? "0.[0]a" : "0"), et = ({ chartFor: n, data: s, title: M, buttonLabel: d, onClick: g, legendLabelMain: C, legendLabelComparison: k, totalComparison: p, totalMain: h }) => {
+  const i = T(), x = j(i.breakpoints.down("xs")), m = D.useMemo(() => s.sort((t, o) => t.year !== o.year ? t.year - o.year : t.month - o.month).map((t) => ({
+    label: S(t.month),
+    ...{
+      spending_vs_income: {
+        main: t.standard_spend,
+        comparison: t.income,
+        formattedMain: l(t.standard_spend),
+        formattedComparison: l(t.income)
+      },
+      debt_payment_vs_income: {
+        main: t.income,
+        comparison: t.debt_spend,
+        formattedMain: l(t.income),
+        formattedComparison: l(t.debt_spend)
+      }
+    }[n]
+  })), [s, n]), A = {
+    dataKey: "label",
+    scaleType: "band"
+  }, f = Math.max(...m.map((t) => Math.max(t.main, t.comparison))), u = Math.min(...m.map((t) => Math.min(t.main, t.comparison))) === 0 && f === 0 ? 100 : Math.ceil(f * 1.2 / 1e3) * 1e3, v = {
+    scaleType: "linear",
+    min: 0,
+    max: u,
+    tickNumber: 4,
+    tickMinStep: u / 3,
+    valueFormatter: (t) => t === 0 ? "$0" : y(t, "0.[0]a")
+  };
+  return /* @__PURE__ */ e(z, { children: [/* @__PURE__ */ e(a, {
+    sx: {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: 12,
+      justifyContent: "space-between",
+      pb: 8,
+      pt: 16,
+      px: 16
+    },
+    children: [/* @__PURE__ */ r(I, { children: M }), d && /* @__PURE__ */ r(B, {
+      endIcon: /* @__PURE__ */ r(R, {}),
+      onClick: g,
+      size: "small",
+      sx: {
+        pl: 8,
+        height: 24
+      },
+      variant: "text",
+      children: d
+    })]
+  }), /* @__PURE__ */ e(a, {
+    sx: {
+      pb: 24,
+      pl: 16,
+      pr: 24
+    },
+    children: [/* @__PURE__ */ e(a, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 24,
+        py: 4
+      },
+      children: [/* @__PURE__ */ e(a, {
+        sx: {
+          gap: 8,
+          alignItems: "center",
+          flexDirection: "row"
+        },
+        children: [/* @__PURE__ */ r(b, { sx: {
+          width: 10,
+          height: 10,
+          backgroundColor: "chartMono.chartMono3",
+          borderRadius: "2px"
+        } }), /* @__PURE__ */ e(a, {
+          sx: {
+            alignItems: "center",
+            flexDirection: "row"
+          },
+          children: [/* @__PURE__ */ e(c, {
+            variant: "subtitle2",
+            children: [C, " "]
+          }), !x && h && /* @__PURE__ */ r(c, {
+            sx: { fontWeight: 700 },
+            variant: "subtitle2",
+            children: h
+          })]
+        })]
+      }), /* @__PURE__ */ e(a, {
+        alignItems: "center",
+        direction: "row",
+        spacing: 8,
+        children: [/* @__PURE__ */ r(b, { sx: {
+          width: 10,
+          height: 10,
+          backgroundColor: "chartMono.chartMono5",
+          borderRadius: "2px"
+        } }), /* @__PURE__ */ e(a, {
+          sx: {
+            alignItems: "center",
+            flexDirection: "row"
+          },
+          children: [/* @__PURE__ */ e(c, {
+            variant: "subtitle2",
+            children: [k, " "]
+          }), !x && p && /* @__PURE__ */ r(c, {
+            sx: { fontWeight: 700 },
+            variant: "subtitle2",
+            children: p
+          })]
+        })]
+      })]
+    }), /* @__PURE__ */ e(L, {
+      colors: [`${i.palette.chartMono.chartMono3}`, `${i.palette.chartMono.chartMono5}`],
+      dataset: m,
+      height: 240,
+      margin: {
+        top: 14,
+        bottom: 10,
+        right: 2,
+        left: -2
+      },
+      series: [{
+        dataKey: "main",
+        type: "bar"
+      }, {
+        dataKey: "comparison",
+        type: "bar"
+      }],
+      xAxis: [A],
+      yAxis: [v],
+      children: [
+        /* @__PURE__ */ r(K, { slots: { bar: (t) => {
+          const { ownerState: o, ...w } = t;
+          return /* @__PURE__ */ r(_, {
+            ...w,
+            color: o.color,
+            data: m,
+            series: {
+              index: o.dataIndex,
+              type: Number(o.id.toString().split("-").pop())
+            },
+            style: {
+              x: t.x,
+              y: t.y,
+              width: t.width
+            }
+          });
+        } } }),
+        /* @__PURE__ */ r(N, {
+          sx: () => ({
+            ".MuiChartsAxis-line": { stroke: i.palette.divider },
+            ".MuiChartsAxis-tick": { stroke: i.palette.divider },
+            ".MuiChartsAxis-tickLabel": { transform: "translateY(10px)" }
+          }),
+          tickLabelStyle: {
+            fontSize: 11,
+            fill: "text.secondary"
+          }
+        }),
+        /* @__PURE__ */ r(P, {
+          sx: () => ({
+            ".MuiChartsAxis-line": { stroke: i.palette.divider },
+            ".MuiChartsAxis-tick": { stroke: i.palette.divider },
+            ".MuiChartsAxis-tickLabel": { transform: "translateX(-8px)" }
+          }),
+          tickLabelStyle: {
+            fontSize: 11,
+            fill: "text.secondary"
+          }
+        })
+      ]
+    })]
+  })] });
+};
+export {
+  et as default
+};
+
+//# sourceMappingURL=DoubleBarChart.es.js.map

package/dist/finstrong/components/shared/DoubleBarChart.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleBarChart.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/DoubleBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport useMediaQuery from '@mui/material/useMediaQuery'\nimport { useTheme } from '@mui/material/styles'\n\nimport { BarPlot } from '@mui/x-charts/BarChart'\nimport { ChartContainer as ResponsiveChartContainer } from '@mui/x-charts/ChartContainer'\nimport { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'\nimport { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'\nimport type { DatasetType } from '@mui/x-charts/internals'\n\nimport { H3, Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { getMonthName } from '../../util/finstrongUtils'\n\nimport { CustomDoubleBarPlot } from './CustomDoubleBarPlot'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\nexport interface FinancialData {\n  year: number\n  month: number\n  standard_spend: number\n  income: number\n  debt_spend: number\n}\n\nexport interface ChartDataPoint {\n  label: string\n  main: number\n  comparison: number\n  formattedMain: string\n  formattedComparison: string\n  [key: string]: string | number\n}\n\nexport interface DoubleBarChartProps {\n  chartFor: 'spending_vs_income' | 'debt_payment_vs_income'\n  data: FinancialData[]\n  title: string\n  buttonLabel?: string\n  legendLabelMain: string\n  legendLabelComparison: string\n  onClick?: () => void\n  totalMain?: string\n  totalComparison?: string\n}\n\n/**\n * Formats a number as currency.\n * - Rounds small values.\n * - Abbreviates large values (e.g., 1.2k, 3.4M) above the threshold.\n *\n * @param amount - The number to format.\n * @param threshold - Value above which abbreviation is applied (default: 1000).\n * @returns Formatted currency string.\n */\nconst formatCurrencyCompact = (amount: number, threshold: number = 1000): string => {\n  const format = Math.abs(amount) >= threshold ? '0.[0]a' : '0'\n  return formatCurrency(amount, format)\n}\n\nconst DoubleBarChart: React.FC<DoubleBarChartProps> = ({\n  chartFor,\n  data,\n  title,\n  buttonLabel,\n  onClick,\n  legendLabelMain,\n  legendLabelComparison,\n  totalComparison,\n  totalMain,\n}) => {\n  const theme = useTheme()\n  const isSmallMobile = useMediaQuery(theme.breakpoints.down('xs'))\n\n  // Transform financial data to chart format\n  const chartData: ChartDataPoint[] = React.useMemo(\n    () =>\n      data\n        .sort((a, b) => {\n          // Sort by year first, then by month\n          if (a.year !== b.year) {\n            return a.year - b.year\n          }\n          return a.month - b.month\n        })\n        .map((item) => {\n          const monthName = getMonthName(item.month)\n\n          const chartConfig = {\n            spending_vs_income: {\n              main: item.standard_spend,\n              comparison: item.income,\n              formattedMain: formatCurrencyCompact(item.standard_spend),\n              formattedComparison: formatCurrencyCompact(item.income),\n            },\n            debt_payment_vs_income: {\n              main: item.income,\n              comparison: item.debt_spend,\n              formattedMain: formatCurrencyCompact(item.income),\n              formattedComparison: formatCurrencyCompact(item.debt_spend),\n            },\n          }\n\n          return {\n            label: monthName,\n            ...chartConfig[chartFor],\n          }\n        }),\n    [data, chartFor],\n  )\n\n  const xAxis = {\n    dataKey: 'label',\n    scaleType: 'band' as const,\n  }\n\n  // Dynamic Y-axis scaling\n  const maxValue = Math.max(...chartData.map((item) => Math.max(item.main, item.comparison)))\n  const minValue = Math.min(...chartData.map((item) => Math.min(item.main, item.comparison)))\n\n  // If both min and max values are 0, set max to 100\n  const yAxisMax =\n    minValue === 0 && maxValue === 0 ? 100 : Math.ceil((maxValue * 1.2) / 1000) * 1000\n  const tickStep = yAxisMax / 3\n\n  const yAxis = {\n    scaleType: 'linear' as const,\n    min: 0,\n    max: yAxisMax,\n    tickNumber: 4,\n    tickMinStep: tickStep,\n    valueFormatter: (value: number) => {\n      if (value === 0) return '$0'\n      return formatCurrency(value, '0.[0]a')\n    },\n  }\n\n  return (\n    <Card>\n      <Stack\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          gap: 12,\n          justifyContent: 'space-between',\n          pb: 8,\n          pt: 16,\n          px: 16,\n        }}\n      >\n        <H3>{title}</H3>\n        {buttonLabel && (\n          <Button\n            endIcon={<ChevronRight />}\n            onClick={onClick}\n            size=\"small\"\n            sx={{\n              pl: 8,\n              height: 24,\n            }}\n            variant=\"text\"\n          >\n            {buttonLabel}\n          </Button>\n        )}\n      </Stack>\n\n      <Stack sx={{ pb: 24, pl: 16, pr: 24 }}>\n        {/* Legend */}\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 24, py: 4 }}>\n          <Stack sx={{ gap: 8, alignItems: 'center', flexDirection: 'row' }}>\n            <Box\n              sx={{\n                width: 10,\n                height: 10,\n                backgroundColor: 'chartMono.chartMono3',\n                borderRadius: '2px',\n              }}\n            />\n            <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n              <Text variant=\"subtitle2\">{legendLabelMain}&nbsp;</Text>\n              {!isSmallMobile && totalMain && (\n                <Text sx={{ fontWeight: 700 }} variant=\"subtitle2\">\n                  {totalMain}\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n\n          <Stack alignItems=\"center\" direction=\"row\" spacing={8}>\n            <Box\n              sx={{\n                width: 10,\n                height: 10,\n                backgroundColor: 'chartMono.chartMono5',\n                borderRadius: '2px',\n              }}\n            />\n            <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n              <Text variant=\"subtitle2\">{legendLabelComparison}&nbsp;</Text>\n              {!isSmallMobile && totalComparison && (\n                <Text sx={{ fontWeight: 700 }} variant=\"subtitle2\">\n                  {totalComparison}\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n\n        <ResponsiveChartContainer\n          colors={[\n            `${theme.palette.chartMono.chartMono3}`,\n            `${theme.palette.chartMono.chartMono5}`,\n          ]}\n          dataset={chartData as DatasetType}\n          height={240}\n          margin={{ top: 14, bottom: 10, right: 2, left: -2 }}\n          series={[\n            { dataKey: 'main', type: 'bar' as const },\n            { dataKey: 'comparison', type: 'bar' as const },\n          ]}\n          xAxis={[xAxis]}\n          yAxis={[yAxis]}\n        >\n          <BarPlot\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomDoubleBarPlot\n                    {...defaultProps}\n                    color={ownerState.color}\n                    data={chartData as any}\n                    series={{\n                      index: ownerState.dataIndex,\n                      type: Number(ownerState.id.toString().split('-').pop()),\n                    }}\n                    style={{\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n\n          <ChartsXAxis\n            sx={() => ({\n              '.MuiChartsAxis-line': {\n                stroke: theme.palette.divider,\n              },\n              '.MuiChartsAxis-tick': {\n                stroke: theme.palette.divider,\n              },\n              '.MuiChartsAxis-tickLabel': {\n                transform: 'translateY(10px)',\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n              fill: 'text.secondary',\n            }}\n          />\n          <ChartsYAxis\n            sx={() => ({\n              '.MuiChartsAxis-line': {\n                stroke: theme.palette.divider,\n              },\n              '.MuiChartsAxis-tick': {\n                stroke: theme.palette.divider,\n              },\n              '.MuiChartsAxis-tickLabel': {\n                transform: 'translateX(-8px)',\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n              fill: 'text.secondary',\n            }}\n          />\n        </ResponsiveChartContainer>\n      </Stack>\n    </Card>\n  )\n}\n\nexport default DoubleBarChart\n"],"mappings":"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"}

package/dist/finstrong/components/shared/LineGraph.es.js

@@ -0,0 +1,136 @@
+import { useFinstrongStore as k, useGlobalCopyStore as w, useUserStore as S } from "../../../common/context/hooks.es.js";
+import { useDimensions as C } from "../../../common/hooks/useDimensions.es.js";
+import { EmptyState as T } from "../../../common/components/EmptyState.es.js";
+import { LineChart as M } from "../../../common/components/charts/LineChart.es.js";
+import { getCreditScoreDetails as O, getSeriesGraphData as L } from "../../util/finstrongUtils.es.js";
+import "react";
+import { observer as z } from "mobx-react-lite";
+import A from "@mui/material/Stack";
+import { P as K } from "@mxenabled/mxui";
+import { jsx as s, jsxs as R } from "react/jsx-runtime";
+import { useTheme as D } from "@mui/material/styles";
+import G from "@mui/material/Card";
+var X = ({ chartFor: a }) => {
+  const i = D(), v = i.palette.mode === "dark", { monthlySummaries: c } = k(), { user: u } = S(), { finstrong: t } = w(), [b, { width: d }] = C(), n = {
+    savingsOverTime: {
+      icon: "trending_up",
+      title: t.key_indicators_save.zero_state_title,
+      description: t.key_indicators_save.zero_state_description
+    },
+    debtOverTime: {
+      icon: "multiline_chart",
+      title: t.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_line_chart_empty_state_header,
+      description: t.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_line_chart_empty_state_description
+    },
+    creditOverTime: {
+      icon: "credit_card",
+      title: t.credit_over_time_title,
+      description: t.credit_over_time_zero_state_desc
+    }
+  }[a], l = {
+    savingsOverTime: {
+      title: t.key_indicators_save.savings_over_time,
+      valueKey: "available_cash"
+    },
+    debtOverTime: {
+      title: t.key_indicators_borrow.have_manageable_debt_drawer.debt_over_time,
+      valueKey: "debt_balance"
+    },
+    creditOverTime: {
+      title: t.credit_over_time_title,
+      valueKey: "credit_score"
+    }
+  }[a], o = L(c, l.valueKey), _ = c.map((r) => r[l.valueKey]), p = Math.max(..._), f = Math.min(..._), h = () => p >= 1e6 ? {
+    formatter: "0.000a",
+    leftMargin: -7
+  } : p >= 1e3 ? {
+    formatter: "0a",
+    leftMargin: -27
+  } : {
+    formatter: "0a",
+    leftMargin: -32
+  }, { formatter: g, leftMargin: y } = h(), x = l.title, e = a === "creditOverTime";
+  let m;
+  if (e) {
+    const { color: r } = O(u?.credit_score ?? 0, v, t.credit_score_status);
+    m = r;
+  }
+  return /* @__PURE__ */ s(G, {
+    ref: b,
+    sx: { backgroundColor: "background.paper" },
+    children: o.some((r) => r.y !== 0) ? /* @__PURE__ */ R(A, {
+      gap: 8,
+      sx: { pl: 18 },
+      children: [/* @__PURE__ */ s(K, {
+        sx: {
+          pb: 8,
+          pt: 16
+        },
+        variant: "h3",
+        children: x
+      }), /* @__PURE__ */ s(M, {
+        areaColor: m,
+        axisColor: i.palette.divider,
+        baseline: "min",
+        chartFor: a,
+        colors: [i.palette.primary.main],
+        curveType: e ? "linear" : "monotoneX",
+        datasets: o ? [o] : [],
+        height: 244,
+        labelFontColor: e ? "text.primary" : "",
+        labelFontSize: e ? 13 : void 0,
+        labels: [t.key_indicators_label],
+        margin: {
+          left: y,
+          top: e ? 25 : 15,
+          right: 20
+        },
+        markStyles: (r) => e ? {
+          markLabelStyles: {
+            marginLeft: 16,
+            transform: r === o.length - 1 ? "translateX(-16px)" : "translateX(16px)",
+            fontWeight: 600,
+            fill: i.palette.text.primary
+          },
+          stroke: m
+        } : {},
+        maxRange: e ? 850 : void 0,
+        minRange: (() => {
+          if (e)
+            return f < 300 ? 0 : 300;
+        })(),
+        showArea: !0,
+        showAverage: !e,
+        showMark: !e,
+        showMarkLabel: e,
+        showXAxis: !0,
+        showYAxis: e,
+        showYAxisTicks: e,
+        useCustomMark: !0,
+        valueFormatterString: e ? void 0 : g,
+        width: d < 342 ? d - 48 : 342
+      })]
+    }) : /* @__PURE__ */ s(T, {
+      header: n.title,
+      icon: n.icon,
+      subText: n.description,
+      sx: {
+        backgroundColor: "background.paper",
+        borderRadius: "8px",
+        boxShadow: 1,
+        p: 24,
+        pb: 48,
+        ".empty-state-subtext": {
+          fontSize: 15,
+          lineHeight: "24px",
+          mt: 8
+        }
+      }
+    })
+  });
+}, J = z(X);
+export {
+  J as default
+};
+
+//# sourceMappingURL=LineGraph.es.js.map

package/dist/finstrong/components/shared/LineGraph.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineGraph.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/LineGraph.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { EmptyState, useFinstrongStore, useGlobalCopyStore, useUserStore } from '../../../common'\nimport { type MonthlySummaries } from '../../../core'\nimport { LineChart } from '../../../common/components/charts/LineChart'\nimport { useDimensions } from '../../../common/hooks/useDimensions'\n\nimport { getSeriesGraphData, getCreditScoreDetails } from '../../util/finstrongUtils'\n\n// Define chart types\nexport type ChartType = 'savingsOverTime' | 'debtOverTime' | 'creditOverTime'\n\n// Configuration interface for chart properties\ninterface ChartConfig {\n  title: string\n  valueKey: keyof Pick<MonthlySummaries, 'available_cash' | 'debt_balance' | 'credit_score'>\n}\n\ninterface LineGraphProps {\n  chartFor: ChartType\n}\n\nconst LineGraph: React.FC<LineGraphProps> = ({ chartFor }) => {\n  const theme = useTheme()\n  const isDarkMode = theme.palette.mode === 'dark'\n\n  const { monthlySummaries } = useFinstrongStore()\n  const { user } = useUserStore()\n\n  const { finstrong: copy } = useGlobalCopyStore()\n  const [containerRef, { width }] = useDimensions()\n\n  const ZeroStateContent = {\n    savingsOverTime: {\n      icon: 'trending_up',\n      title: copy.key_indicators_save.zero_state_title,\n      description: copy.key_indicators_save.zero_state_description,\n    },\n    debtOverTime: {\n      icon: 'multiline_chart',\n      title:\n        copy.key_indicators_borrow.have_manageable_debt_drawer\n          .have_manageable_debt_line_chart_empty_state_header,\n      description:\n        copy.key_indicators_borrow.have_manageable_debt_drawer\n          .have_manageable_debt_line_chart_empty_state_description,\n    },\n    creditOverTime: {\n      icon: 'credit_card',\n      title: copy.credit_over_time_title,\n      description: copy.credit_over_time_zero_state_desc,\n    },\n  }[chartFor]\n\n  const chartConfigurations: Record<ChartType, ChartConfig> = {\n    savingsOverTime: {\n      title: copy.key_indicators_save.savings_over_time,\n      valueKey: 'available_cash',\n    },\n    debtOverTime: {\n      title: copy.key_indicators_borrow.have_manageable_debt_drawer.debt_over_time,\n      valueKey: 'debt_balance',\n    },\n    creditOverTime: {\n      title: copy.credit_over_time_title,\n      valueKey: 'credit_score',\n    },\n  }\n\n  // Get configuration for the current chart type\n  const config = chartConfigurations[chartFor]\n\n  const dataSet = getSeriesGraphData(monthlySummaries, config.valueKey)\n\n  const values = monthlySummaries.map((s) => s[config.valueKey])\n  const maxValue = Math.max(...values)\n  const minValue = Math.min(...values)\n\n  // Determine appropriate formatter and margin based on data range\n  const getFormatterConfig = () => {\n    if (maxValue >= 1000000) {\n      return { formatter: '0.000a', leftMargin: -7 } // For millions\n    } else if (maxValue >= 1000) {\n      return { formatter: '0a', leftMargin: -27 } // For thousands\n    } else {\n      return { formatter: '0a', leftMargin: -32 }\n    }\n  }\n\n  const { formatter, leftMargin } = getFormatterConfig()\n\n  const title = config.title\n\n  const isCreditOverTime = chartFor === 'creditOverTime'\n\n  let markerColor\n\n  if (isCreditOverTime) {\n    const { color } = getCreditScoreDetails(\n      user?.credit_score ?? 0,\n      isDarkMode,\n      copy.credit_score_status,\n    )\n    markerColor = color\n  }\n  const hasData = dataSet.some((item) => item.y !== 0)\n  return (\n    <Card ref={containerRef} sx={{ backgroundColor: 'background.paper' }}>\n      {hasData ? (\n        <Stack gap={8} sx={{ pl: 18 }}>\n          <P sx={{ pb: 8, pt: 16 }} variant=\"h3\">\n            {title}\n          </P>\n          <LineChart\n            areaColor={markerColor}\n            axisColor={theme.palette.divider}\n            baseline=\"min\"\n            chartFor={chartFor}\n            colors={[theme.palette.primary.main]}\n            curveType={isCreditOverTime ? 'linear' : 'monotoneX'}\n            datasets={dataSet ? [dataSet] : []}\n            height={244}\n            labelFontColor={isCreditOverTime ? 'text.primary' : ''}\n            labelFontSize={isCreditOverTime ? 13 : undefined}\n            labels={[copy.key_indicators_label]}\n            margin={{ left: leftMargin, top: isCreditOverTime ? 25 : 15, right: 20 }}\n            markStyles={(index) => {\n              if (isCreditOverTime) {\n                return {\n                  markLabelStyles: {\n                    marginLeft: 16,\n                    transform:\n                      index === dataSet.length - 1 ? 'translateX(-16px)' : 'translateX(16px)',\n                    fontWeight: 600,\n                    fill: theme.palette.text.primary,\n                  },\n                  stroke: markerColor!,\n                }\n              }\n              return {}\n            }}\n            maxRange={isCreditOverTime ? 850 : undefined}\n            minRange={(() => {\n              if (!isCreditOverTime) return undefined\n              return minValue < 300 ? 0 : 300\n            })()}\n            showArea={true}\n            showAverage={!isCreditOverTime}\n            showMark={!isCreditOverTime}\n            showMarkLabel={isCreditOverTime}\n            showXAxis={true}\n            showYAxis={isCreditOverTime}\n            showYAxisTicks={isCreditOverTime}\n            useCustomMark={true}\n            valueFormatterString={!isCreditOverTime ? formatter : undefined}\n            width={width < 342 ? width - 48 : 342}\n          />\n        </Stack>\n      ) : (\n        <EmptyState\n          header={ZeroStateContent.title}\n          icon={ZeroStateContent.icon}\n          subText={ZeroStateContent.description}\n          sx={{\n            backgroundColor: 'background.paper',\n            borderRadius: '8px',\n            boxShadow: 1,\n            p: 24,\n            pb: 48,\n            '.empty-state-subtext': {\n              fontSize: 15,\n              lineHeight: '24px',\n              mt: 8,\n            },\n          }}\n        />\n      )}\n    </Card>\n  )\n}\n\nexport default observer(LineGraph)\n"],"mappings":"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"}

package/dist/finstrong/components/shared/ScoreHistoryTimeline.es.js

@@ -0,0 +1,107 @@
+import { buildDynamicCopy as i } from "../../../core/utils/Localization.es.js";
+import { useGlobalCopyStore as v } from "../../../common/context/hooks.es.js";
+import { getPercentFromRatio as d } from "../../util/finstrongUtils.es.js";
+import s from "./ScoreHistoryTimelineItem.es.js";
+import "react";
+import { observer as I } from "mobx-react-lite";
+import n from "@mui/material/Stack";
+import { Icon as T, P as B, Text as l } from "@mxenabled/mxui";
+import { format as H } from "date-fns/format";
+import { Fragment as R, jsx as r, jsxs as t } from "react/jsx-runtime";
+import m from "@mui/material/Box";
+import D from "@mui/material/Card";
+import M from "@mui/lab/Timeline";
+import { timelineItemClasses as j } from "@mui/lab/TimelineItem";
+var k = ({ report: a }) => {
+  const { finstrong: p } = v(), { score_history_drawer_timeline: o } = p, { health_score_point_difference: e, newer_credit_score: _, older_credit_score: f, older_spend_to_income_ratio: h, newer_spend_to_income_ratio: u, older_health_score: c, newer_health_score: g, newer_score_calculated_at: x } = a, y = H(new Date(x), "MMM d"), w = () => e === 0 ? "info.lighter" : e > 0 ? "success.lighter" : "error.lighter", C = () => e === 0 ? i(o.stayed_at, c) : e > 0 ? o.less_spending : o.more_spending, S = () => {
+    if (e === 0) return null;
+    const b = i(e > 0 ? o.up_from : o.down_from, c, g);
+    return /* @__PURE__ */ t(R, { children: [/* @__PURE__ */ r(T, {
+      fill: !0,
+      name: "circle",
+      sx: {
+        color: "text.secondary",
+        fontSize: 8,
+        mx: 4,
+        p: 1
+      }
+    }), b] });
+  };
+  return /* @__PURE__ */ t(D, { children: [/* @__PURE__ */ r(m, {
+    sx: {
+      borderBottomColor: "divider",
+      borderBottomStyle: "solid",
+      borderBottomWidth: e !== 0 ? 1 : 0,
+      p: 16
+    },
+    children: /* @__PURE__ */ t(n, {
+      flexDirection: "row",
+      sx: {
+        alignItems: "center",
+        gap: 16,
+        height: 48,
+        width: "100%"
+      },
+      children: [/* @__PURE__ */ r(n, {
+        sx: {
+          alignItems: "center",
+          backgroundColor: w(),
+          borderRadius: 999,
+          height: 48,
+          justifyContent: "center",
+          width: 48
+        },
+        children: /* @__PURE__ */ r(B, {
+          sx: { fontWeight: 600 },
+          variant: "body1",
+          children: e > 0 ? `+${e}` : e
+        })
+      }), /* @__PURE__ */ t(n, {
+        sx: {
+          gap: 2,
+          width: "80%"
+        },
+        children: [/* @__PURE__ */ r(l, {
+          fontWeight: 600,
+          variant: "body1",
+          children: C()
+        }), /* @__PURE__ */ t(l, {
+          sx: { color: "text.secondary" },
+          variant: "subtitle2",
+          children: [
+            y,
+            " ",
+            S()
+          ]
+        })]
+      })]
+    })
+  }), e !== 0 && /* @__PURE__ */ r(m, {
+    sx: {
+      color: "text.secondary",
+      pb: 8,
+      pl: 32,
+      pr: 16,
+      pt: 12
+    },
+    children: /* @__PURE__ */ t(M, {
+      sx: {
+        [`& .${j.root}:before`]: {
+          flex: 0,
+          padding: 0
+        },
+        m: 0,
+        p: 0
+      },
+      children: [/* @__PURE__ */ r(s, { content: i(o.spend_to_income_description, d(h), d(u)) }), /* @__PURE__ */ r(s, {
+        content: i(o.credit_score_description, f, _),
+        islast: !0
+      })]
+    })
+  })] });
+}, U = I(k);
+export {
+  U as default
+};
+
+//# sourceMappingURL=ScoreHistoryTimeline.es.js.map

package/dist/finstrong/components/shared/ScoreHistoryTimeline.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScoreHistoryTimeline.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/ScoreHistoryTimeline.tsx"],"sourcesContent":["import React from 'react'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { format } from 'date-fns/format'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon, P, Text } from '@mxenabled/mxui'\n\n// TODO : Import Timeline Components from core when they are available\nimport Timeline from '@mui/lab/Timeline'\nimport { timelineItemClasses } from '@mui/lab/TimelineItem'\n\nimport { useGlobalCopyStore } from '../../../common'\nimport { HealthScoreReport } from '../../../core'\n\nimport { getPercentFromRatio } from '../../util/finstrongUtils'\n\nimport ScoreHistoryTimelineItem from './ScoreHistoryTimelineItem'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface ScoreHistoryTimelineProps {\n  report: HealthScoreReport\n}\n\nconst ScoreHistoryTimeline: React.FC<ScoreHistoryTimelineProps> = ({ report }) => {\n  const { finstrong: copyContent } = useGlobalCopyStore()\n  const { score_history_drawer_timeline: timelineCopy } = copyContent\n\n  const {\n    health_score_point_difference: score,\n    newer_credit_score: newCreditScore,\n    older_credit_score: oldCreditScore,\n    older_spend_to_income_ratio: oldSpendToIncomeRatio,\n    newer_spend_to_income_ratio: newSpendToIncomeRatio,\n    older_health_score: oldHealthScore,\n    newer_health_score: newHealthScore,\n    newer_score_calculated_at: newScoreCalculatedAt,\n  } = report\n\n  const formattedDate = format(new Date(newScoreCalculatedAt), 'MMM d')\n\n  const getBackgroundColor = () => {\n    if (score === 0) return 'info.lighter'\n    return score > 0 ? 'success.lighter' : 'error.lighter'\n  }\n\n  const getMainContent = () => {\n    if (score === 0) {\n      return buildDynamicCopy(timelineCopy.stayed_at, oldHealthScore) as string\n    }\n    return score > 0 ? timelineCopy.less_spending : timelineCopy.more_spending\n  }\n\n  const getSubContent = () => {\n    if (score === 0) return null\n\n    const copyKey = score > 0 ? timelineCopy.up_from : timelineCopy.down_from\n    const text = buildDynamicCopy(copyKey, oldHealthScore, newHealthScore) as string\n\n    return (\n      <>\n        <Icon\n          fill={true}\n          name=\"circle\"\n          sx={{ color: 'text.secondary', fontSize: 8, mx: 4, p: 1 }}\n        />\n        {text}\n      </>\n    )\n  }\n\n  return (\n    <Card>\n      <Box\n        sx={{\n          borderBottomColor: 'divider',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: score !== 0 ? 1 : 0,\n          p: 16,\n        }}\n      >\n        <Stack\n          flexDirection=\"row\"\n          sx={{ alignItems: 'center', gap: 16, height: 48, width: '100%' }}\n        >\n          <Stack\n            sx={{\n              alignItems: 'center',\n              backgroundColor: getBackgroundColor(),\n              borderRadius: 999,\n              height: 48,\n              justifyContent: 'center',\n              width: 48,\n            }}\n          >\n            <P sx={{ fontWeight: 600 }} variant=\"body1\">\n              {score > 0 ? `+${score}` : score}\n            </P>\n          </Stack>\n          <Stack sx={{ gap: 2, width: '80%' }}>\n            <Text fontWeight={600} variant=\"body1\">\n              {getMainContent()}\n            </Text>\n            <Text sx={{ color: 'text.secondary' }} variant=\"subtitle2\">\n              {formattedDate} {getSubContent()}\n            </Text>\n          </Stack>\n        </Stack>\n      </Box>\n      {score !== 0 && (\n        <Box sx={{ color: 'text.secondary', pb: 8, pl: 32, pr: 16, pt: 12 }}>\n          <Timeline\n            sx={{\n              [`& .${timelineItemClasses.root}:before`]: {\n                flex: 0,\n                padding: 0,\n              },\n              m: 0,\n              p: 0,\n            }}\n          >\n            <ScoreHistoryTimelineItem\n              content={\n                buildDynamicCopy(\n                  timelineCopy.spend_to_income_description,\n                  getPercentFromRatio(oldSpendToIncomeRatio),\n                  getPercentFromRatio(newSpendToIncomeRatio),\n                ) as string\n              }\n            />\n            <ScoreHistoryTimelineItem\n              content={\n                buildDynamicCopy(\n                  timelineCopy.credit_score_description,\n                  oldCreditScore,\n                  newCreditScore,\n                ) as string\n              }\n              islast={true}\n            />\n          </Timeline>\n        </Box>\n      )}\n    </Card>\n  )\n}\n\nexport default observer(ScoreHistoryTimeline)\n"],"mappings":"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"}

package/dist/finstrong/components/shared/ScoreHistoryTimelineItem.es.js

@@ -0,0 +1,40 @@
+import "react";
+import { P as t } from "@mxenabled/mxui";
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import m from "@mui/lab/TimelineItem";
+import n from "@mui/lab/TimelineConnector";
+import l from "@mui/lab/TimelineContent";
+import p from "@mui/lab/TimelineDot";
+import d from "@mui/lab/TimelineSeparator";
+var u = ({ content: e, islast: i = !1 }) => /* @__PURE__ */ o(m, {
+  sx: { minHeight: 0 },
+  children: [/* @__PURE__ */ o(d, { children: [/* @__PURE__ */ r(p, { sx: {
+    bgcolor: "divider",
+    boxShadow: "none",
+    p: 2
+  } }), !i && /* @__PURE__ */ r(n, { sx: {
+    bgcolor: "background.paper",
+    borderLeft: "1px solid",
+    borderColor: "divider",
+    borderRadius: 1,
+    m: -4
+  } })] }), /* @__PURE__ */ r(l, {
+    sx: {
+      pb: 16,
+      pl: 12,
+      pr: 0,
+      pt: 5
+    },
+    children: /* @__PURE__ */ r(t, {
+      fontSize: 13,
+      fontWeight: 400,
+      variant: "subtitle2",
+      children: e
+    })
+  })]
+});
+export {
+  u as default
+};
+
+//# sourceMappingURL=ScoreHistoryTimelineItem.es.js.map

package/dist/finstrong/components/shared/ScoreHistoryTimelineItem.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScoreHistoryTimelineItem.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/ScoreHistoryTimelineItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { P } from '@mxenabled/mxui'\n\n// TODO : Import Timeline Components from core when they are available\nimport TimelineConnector from '@mui/lab/TimelineConnector'\nimport TimelineContent from '@mui/lab/TimelineContent'\nimport TimelineDot from '@mui/lab/TimelineDot'\nimport TimelineSeparator from '@mui/lab/TimelineSeparator'\nimport TimelineItem from '@mui/lab/TimelineItem'\n\ninterface ScoreHistoryTimelineItemProps {\n  content?: string\n  islast?: boolean\n}\n\nconst ScoreHistoryTimelineItem: React.FC<ScoreHistoryTimelineItemProps> = ({\n  content,\n  islast = false,\n}) => {\n  return (\n    <TimelineItem sx={{ minHeight: 0 }}>\n      <TimelineSeparator>\n        <TimelineDot sx={{ bgcolor: 'divider', boxShadow: 'none', p: 2 }} />\n        {!islast && (\n          <TimelineConnector\n            sx={{\n              bgcolor: 'background.paper',\n              borderLeft: '1px solid',\n              borderColor: 'divider',\n              borderRadius: 1,\n              m: -4,\n            }}\n          />\n        )}\n      </TimelineSeparator>\n      <TimelineContent sx={{ pb: 16, pl: 12, pr: 0, pt: 5 }}>\n        <P fontSize={13} fontWeight={400} variant=\"subtitle2\">\n          {content}\n        </P>\n      </TimelineContent>\n    </TimelineItem>\n  )\n}\n\nexport default ScoreHistoryTimelineItem\n"],"mappings":";;;;;;;;AAgBA,IAAM,IAAA,CAAqE,EACzE,SAAA,GACA,QAAA,IAAS,GAAA,MAGP,gBAAA,EAAC,GAAD;AAAA,EAAc,IAAI,EAAE,WAAW,EAAE;AAAA,YAAjC,CACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAa,IAAI;AAAA,IAAE,SAAS;AAAA,IAAW,WAAW;AAAA,IAAQ,GAAG;AAAA,EAAE,EAAI,CAAA,GAClE,CAAC,KACA,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,cAAc;AAAA,IACd,GAAG;AAAA,EACL,EACD,CAAA,CAEc,EAAA,CAAA,GACnB,gBAAA,EAAC,GAAD;AAAA,IAAiB,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,MAAG,IAAI;AAAA,IAAE;AAAA,cAClD,gBAAA,EAAC,GAAD;AAAA,MAAG,UAAU;AAAA,MAAI,YAAY;AAAA,MAAK,SAAQ;AAAA,gBACvC;AAAA,IACA,CAAA;AAAA,EACY,CAAA,CACL"}

package/dist/finstrong/components/shared/TotalCard.es.js

@@ -0,0 +1,30 @@
+import { formatCurrency as n } from "../../../core/utils/NumberFormatting.es.js";
+import "react";
+import a from "@mui/material/Stack";
+import { P as t } from "@mxenabled/mxui";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+var p = ({ balance: r, title: e, sx: i }) => /* @__PURE__ */ m(a, {
+  sx: {
+    alignItems: "center",
+    backgroundColor: "background.default",
+    borderRadius: 2,
+    height: 72,
+    justifyContent: "center",
+    p: 12,
+    ...i
+  },
+  children: [typeof r == "number" ? /* @__PURE__ */ o(t, {
+    variant: "h2",
+    children: n(r, "0,0.00")
+  }) : r, /* @__PURE__ */ o(t, {
+    color: "text.secondary",
+    fontWeight: "400",
+    variant: "subtitle2",
+    children: e
+  })]
+});
+export {
+  p as default
+};
+
+//# sourceMappingURL=TotalCard.es.js.map

package/dist/finstrong/components/shared/TotalCard.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TotalCard.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/TotalCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface TotalCardProps {\n  balance: number | React.ReactNode\n  title: string\n  sx?: object\n}\n\nconst TotalCard: React.FC<TotalCardProps> = ({ balance, title, sx }) => {\n  return (\n    <Stack\n      sx={{\n        alignItems: 'center',\n        backgroundColor: 'background.default',\n        borderRadius: 2,\n        height: 72,\n        justifyContent: 'center',\n        p: 12,\n        ...sx,\n      }}\n    >\n      {typeof balance === 'number' ? (\n        <P variant=\"h2\">{formatCurrency(balance, '0,0.00')}</P>\n      ) : (\n        balance\n      )}\n\n      <P color=\"text.secondary\" fontWeight=\"400\" variant=\"subtitle2\">\n        {title}\n      </P>\n    </Stack>\n  )\n}\n\nexport default TotalCard\n"],"mappings":";;;;;AAcA,IAAM,IAAA,CAAuC,EAAE,SAAA,GAAS,OAAA,GAAO,IAAA,EAAA,MAE3D,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,YATF,CAWG,OAAO,KAAY,WAClB,gBAAA,EAAC,GAAD;AAAA,IAAG,SAAQ;AAAA,cAAM,EAAe,GAAS,QAAQ;AAAA,EAAK,CAAA,IAEtD,GAGF,gBAAA,EAAC,GAAD;AAAA,IAAG,OAAM;AAAA,IAAiB,YAAW;AAAA,IAAM,SAAQ;AAAA,cAChD;AAAA,EACA,CAAA,CACE"}