@mx-cartographer/experiences 9.4.37 → 9.4.39

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

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

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

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

package/package.json

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