@mx-cartographer/experiences 9.7.95 → 9.7.96

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/insights/components/shared/Charts/BarChart/ChartLegendV2.es.js +20 -24
  3. package/dist/insights/components/shared/Charts/BarChart/ChartLegendV2.es.js.map +1 -1
  4. package/dist/insights/types/Charts/BarChart.d.ts +1 -0
  5. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js +25 -24
  6. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js.map +1 -1
  7. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.d.ts +1 -0
  8. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.es.js +7 -4
  9. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.es.js.map +1 -1
  10. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.d.ts +1 -0
  11. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js +29 -21
  12. package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js.map +1 -1
  13. package/dist/insights-v2/components/chartblocks/BarchartV2.d.ts +1 -1
  14. package/dist/insights-v2/components/chartblocks/BarchartV2.es.js +24 -24
  15. package/dist/insights-v2/components/chartblocks/BarchartV2.es.js.map +1 -1
  16. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,7 @@
1
+ ## [9.7.96] - 11-03-2026
2
+
3
+ - **FIXED** - Monthly Spend legend drops amount (MEW2-3428)
4
+
1
5
  ## [9.7.95] - 11-03-2026
2
6
 
3
7
  - **FIXED** - 20px Transaction Details category icon (MEW2-3427)
package/dist/insights/components/shared/Charts/BarChart/ChartLegendV2.es.js CHANGED
@@ -1,10 +1,10 @@
1
- import i from "@mui/material/Stack";
2
- import { Text as l } from "@mxenabled/mxui";
3
- import { jsx as r, jsxs as e } from "react/jsx-runtime";
4
- import { useTheme as g } from "@mui/material/styles";
5
- var m = ({ color: n, legendStyle: h = {}, monthlyAmount: c, monthlyAmountLabel: t, trendAmount: d, trendAmountLabel: a }) => {
6
- const o = g();
7
- return /* @__PURE__ */ e(i, {
1
+ import t from "@mui/material/Stack";
2
+ import { Text as h } from "@mxenabled/mxui";
3
+ import { jsx as e, jsxs as r } from "react/jsx-runtime";
4
+ import { useTheme as o } from "@mui/material/styles";
5
+ var w = ({ color: n, legendStyle: c = {}, monthlyAmount: a, monthlyAmountLabel: i, trendAmount: d, trendAmountLabel: l }) => {
6
+ const g = o();
7
+ return /* @__PURE__ */ r(t, {
8
8
  sx: {
9
9
  alignItems: "center",
10
10
  flexDirection: "row",
@@ -12,60 +12,56 @@ var m = ({ color: n, legendStyle: h = {}, monthlyAmount: c, monthlyAmountLabel:
12
12
  justifyContent: "flex-start",
13
13
  py: 4,
14
14
  width: "100%",
15
- ...h
15
+ ...c
16
16
  },
17
- children: [t && /* @__PURE__ */ e(i, {
17
+ children: [i && /* @__PURE__ */ r(t, {
18
18
  sx: {
19
19
  alignItems: "center",
20
20
  flexDirection: "row",
21
21
  gap: 8
22
22
  },
23
- children: [/* @__PURE__ */ r("svg", {
23
+ children: [/* @__PURE__ */ e("svg", {
24
24
  "aria-hidden": "true",
25
25
  "aria-labelledby": "chartLegendLabel",
26
26
  fill: "none",
27
27
  height: "12",
28
28
  role: "figure",
29
29
  width: "12",
30
- children: /* @__PURE__ */ r("rect", {
30
+ children: /* @__PURE__ */ e("rect", {
31
31
  fill: n,
32
32
  height: "12",
33
33
  rx: "2",
34
34
  width: "12"
35
35
  })
36
- }), /* @__PURE__ */ e(l, {
36
+ }), /* @__PURE__ */ e(h, {
37
37
  id: "chartLegendLabel",
38
38
  variant: "caption",
39
- children: [
40
- t,
41
- ": ",
42
- c
43
- ]
39
+ children: a ? `${i}: ${a}` : i
44
40
  })]
45
- }), a && /* @__PURE__ */ e(i, {
41
+ }), l && /* @__PURE__ */ r(t, {
46
42
  sx: {
47
43
  alignItems: "center",
48
44
  flexDirection: "row",
49
45
  gap: 8
50
46
  },
51
- children: [/* @__PURE__ */ r("svg", {
47
+ children: [/* @__PURE__ */ e("svg", {
52
48
  "aria-hidden": "true",
53
49
  "aria-labelledby": "chartLegendLabel",
54
50
  fill: "none",
55
51
  height: "12",
56
52
  role: "figure",
57
53
  width: "12",
58
- children: /* @__PURE__ */ r("rect", {
59
- fill: o.palette.chart.chart7,
54
+ children: /* @__PURE__ */ e("rect", {
55
+ fill: g.palette.chart.chart7,
60
56
  height: "12",
61
57
  rx: "2",
62
58
  width: "12"
63
59
  })
64
- }), /* @__PURE__ */ e(l, {
60
+ }), /* @__PURE__ */ r(h, {
65
61
  id: "chartLegendLabel",
66
62
  variant: "caption",
67
63
  children: [
68
- a,
64
+ l,
69
65
  ": ",
70
66
  d
71
67
  ]
@@ -74,7 +70,7 @@ var m = ({ color: n, legendStyle: h = {}, monthlyAmount: c, monthlyAmountLabel:
74
70
  });
75
71
  };
76
72
  export {
77
- m as LegendV2
73
+ w as LegendV2
78
74
  };
79
75
 
80
76
  //# sourceMappingURL=ChartLegendV2.es.js.map
package/dist/insights/components/shared/Charts/BarChart/ChartLegendV2.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChartLegendV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/ChartLegendV2.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface LegendV2Props {\n color: string\n legendStyle?: SxProps\n monthlyAmount?: string\n monthlyAmountLabel?: string\n trendAmount?: string\n trendAmountLabel?: string\n}\n\nexport const LegendV2 = ({\n color,\n legendStyle = {},\n monthlyAmount,\n monthlyAmountLabel,\n trendAmount,\n trendAmountLabel,\n}: LegendV2Props) => {\n const theme = useTheme()\n\n return (\n <Stack\n sx={{\n alignItems: 'center',\n flexDirection: 'row',\n gap: 24,\n justifyContent: 'flex-start',\n py: 4,\n width: '100%',\n ...legendStyle,\n }}\n >\n {monthlyAmountLabel && (\n <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n <svg\n aria-hidden=\"true\"\n aria-labelledby=\"chartLegendLabel\"\n fill=\"none\"\n height=\"12\"\n role=\"figure\"\n width=\"12\"\n >\n <rect fill={color} height=\"12\" rx=\"2\" width=\"12\" />\n </svg>\n <Text id=\"chartLegendLabel\" variant=\"caption\">\n {monthlyAmountLabel}: {monthlyAmount}\n </Text>\n </Stack>\n )}\n\n {trendAmountLabel && (\n <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n <svg\n aria-hidden=\"true\"\n aria-labelledby=\"chartLegendLabel\"\n fill=\"none\"\n height=\"12\"\n role=\"figure\"\n width=\"12\"\n >\n <rect fill={theme.palette.chart.chart7} height=\"12\" rx=\"2\" width=\"12\" />\n </svg>\n <Text id=\"chartLegendLabel\" variant=\"caption\">\n {trendAmountLabel}: {trendAmount}\n </Text>\n </Stack>\n )}\n </Stack>\n )\n}\n"],"mappings":";;;;AAeA,IAAa,IAAA,CAAY,EACvB,OAAA,GACA,aAAA,IAAc,CAAC,GACf,eAAA,GACA,oBAAA,GACA,aAAA,GACA,kBAAA,EAAA,MACmB;AACnB,QAAM,IAAQ,EAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IATF,UAAA,CAWG,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,MAAhE,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM;AAAA,UAAO,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MAC/C,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,QAApC,UAAA;AAAA,UACG;AAAA,UAAmB;AAAA,UAAG;AAAA,QACnB;AAAA,MACD,CAAA,CAAA;AAAA,IAGR,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,MAAhE,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM,EAAM,QAAQ,MAAM;AAAA,UAAQ,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MACpE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,QAApC,UAAA;AAAA,UACG;AAAA,UAAiB;AAAA,UAAG;AAAA,QACjB;AAAA,MACD,CAAA,CAAA;AAAA,IAEJ,CAAA,CAAA;AAAA;AAEX"}
1
+ {"version":3,"file":"ChartLegendV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/ChartLegendV2.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface LegendV2Props {\n color: string\n legendStyle?: SxProps\n monthlyAmount?: string\n monthlyAmountLabel?: string\n trendAmount?: string\n trendAmountLabel?: string\n}\n\nexport const LegendV2 = ({\n color,\n legendStyle = {},\n monthlyAmount,\n monthlyAmountLabel,\n trendAmount,\n trendAmountLabel,\n}: LegendV2Props) => {\n const theme = useTheme()\n\n return (\n <Stack\n sx={{\n alignItems: 'center',\n flexDirection: 'row',\n gap: 24,\n justifyContent: 'flex-start',\n py: 4,\n width: '100%',\n ...legendStyle,\n }}\n >\n {monthlyAmountLabel && (\n <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n <svg\n aria-hidden=\"true\"\n aria-labelledby=\"chartLegendLabel\"\n fill=\"none\"\n height=\"12\"\n role=\"figure\"\n width=\"12\"\n >\n <rect fill={color} height=\"12\" rx=\"2\" width=\"12\" />\n </svg>\n <Text id=\"chartLegendLabel\" variant=\"caption\">\n {monthlyAmount ? `${monthlyAmountLabel}: ${monthlyAmount}` : monthlyAmountLabel}\n </Text>\n </Stack>\n )}\n\n {trendAmountLabel && (\n <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n <svg\n aria-hidden=\"true\"\n aria-labelledby=\"chartLegendLabel\"\n fill=\"none\"\n height=\"12\"\n role=\"figure\"\n width=\"12\"\n >\n <rect fill={theme.palette.chart.chart7} height=\"12\" rx=\"2\" width=\"12\" />\n </svg>\n <Text id=\"chartLegendLabel\" variant=\"caption\">\n {trendAmountLabel}: {trendAmount}\n </Text>\n </Stack>\n )}\n </Stack>\n )\n}\n"],"mappings":";;;;AAeA,IAAa,IAAA,CAAY,EACvB,OAAA,GACA,aAAA,IAAc,CAAC,GACf,eAAA,GACA,oBAAA,GACA,aAAA,GACA,kBAAA,EAAA,MACmB;AACnB,QAAM,IAAQ,EAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IATF,UAAA,CAWG,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,MAAhE,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM;AAAA,UAAO,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MAC/C,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,QACjC,UAAA,IAAgB,GAAG,CAAA,KAAuB,CAAA,KAAkB;AAAA,MACzD,CAAA,CACD;AAAA,IAGR,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,MAAhE,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM,EAAM,QAAQ,MAAM;AAAA,UAAQ,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MACpE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,QAApC,UAAA;AAAA,UACG;AAAA,UAAiB;AAAA,UAAG;AAAA,QACjB;AAAA,MACD,CAAA,CAAA;AAAA,IAEJ,CAAA,CAAA;AAAA;AAEX"}
package/dist/insights/types/Charts/BarChart.d.ts CHANGED
@@ -38,6 +38,7 @@ export interface BarChartV2Props {
38
38
  onBarClick?: (index: number) => void;
39
39
  removeSelectedTabColorChange?: boolean;
40
40
  selectedTabIndex?: number;
41
+ showMonthlyAmount?: boolean;
41
42
  trendAmountLabel?: string;
42
43
  }
43
44
  export interface DataSet {
package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js CHANGED
@@ -1,49 +1,50 @@
1
- import { useGlobalUiStore as _, useInsightsV2Store as b } from "../../../../common/context/hooks.es.js";
2
- import { formatCurrency as B } from "../../../../core/utils/NumberFormatting.es.js";
3
- import y from "../../../../common/components/Loader.es.js";
4
- import { BAR_ARIA_LABEL as I, barChartVariant as L, buildChartData as T, buildDataSeries as S } from "./utils.es.js";
5
- import { BarChartV2 as v } from "../../../components/chartblocks/BarchartV2.es.js";
6
- import { EmptyBarChart as E } from "../../../components/chartblocks/EmptyBarChart.es.js";
7
- import { ANALYTICS_EVENTS_CONFIG as R } from "../../../analytics/analyticsEventsConfig.es.js";
8
- import { useAnalyticsEvent as N } from "../../../analytics/useAnalyticsEvent.es.js";
9
- import { actionBlocksKey as x } from "../../../mappings/actionBlocksKey.es.js";
10
- import D from "react";
11
- import { observer as O } from "mobx-react-lite";
1
+ import { useGlobalUiStore as b, useInsightsV2Store as B } from "../../../../common/context/hooks.es.js";
2
+ import { formatCurrency as y } from "../../../../core/utils/NumberFormatting.es.js";
3
+ import I from "../../../../common/components/Loader.es.js";
4
+ import { BAR_ARIA_LABEL as L, barChartVariant as T, buildChartData as S, buildDataSeries as v } from "./utils.es.js";
5
+ import { BarChartV2 as E } from "../../../components/chartblocks/BarchartV2.es.js";
6
+ import { EmptyBarChart as R } from "../../../components/chartblocks/EmptyBarChart.es.js";
7
+ import { ANALYTICS_EVENTS_CONFIG as N } from "../../../analytics/analyticsEventsConfig.es.js";
8
+ import { useAnalyticsEvent as x } from "../../../analytics/useAnalyticsEvent.es.js";
9
+ import { actionBlocksKey as D } from "../../../mappings/actionBlocksKey.es.js";
10
+ import O from "react";
11
+ import { observer as k } from "mobx-react-lite";
12
12
  import { jsx as r } from "react/jsx-runtime";
13
- import { useTheme as k } from "@mui/material/styles";
14
- var P = O(({ payload: a, beatGuid: n = "" }) => {
15
- const m = k(), { openActionDrawer: i } = b(), { isCopyLoaded: s } = _(), { instance_slot: o, widget_type: c } = a, { series: l, category_guid: f, average_amount: e = 0, additional_data: d = [] } = o.data ?? {}, [p, u] = d, t = T(S(l), I), [A] = D.useState(t.length - 1), { color: h } = L(o, f, m), C = N();
16
- return s ? t.length ? /* @__PURE__ */ r(v, {
13
+ import { useTheme as V } from "@mui/material/styles";
14
+ var Q = k(({ payload: a, beatGuid: n = "" }) => {
15
+ const m = V(), { openActionDrawer: i } = B(), { isCopyLoaded: s } = b(), { instance_slot: o, widget_type: c } = a, { series: l, category_guid: f, average_amount: e = 0, additional_data: u = [] } = o.data ?? {}, [d, p] = u, t = S(v(l), L), [A] = O.useState(t.length - 1), { color: h, showMonthlyAmount: C } = T(o, f, m), g = x();
16
+ return s ? t.length ? /* @__PURE__ */ r(E, {
17
17
  amounts: {
18
18
  average: e,
19
- formattedAverage: B(e, "0,0")
19
+ formattedAverage: y(e, "0,0")
20
20
  },
21
21
  color: h,
22
22
  data: t,
23
- monthlyAmountLabel: p?.label ?? "",
23
+ monthlyAmountLabel: d?.label ?? "",
24
24
  margin: {
25
25
  bottom: 8,
26
26
  left: 16,
27
27
  right: 16,
28
28
  top: 24
29
29
  },
30
- onBarClick: (g) => {
30
+ onBarClick: (_) => {
31
31
  if (c !== "full") return !1;
32
- C(R.CHART_BAR_CLICKED), i({
32
+ g(N.CHART_BAR_CLICKED), i({
33
33
  guid: n,
34
34
  trigger: "chartBar",
35
35
  context: {
36
- chartBarIndex: g,
37
- block: x.TRANSCATION_HISTORY_ACTION_BLOCK
36
+ chartBarIndex: _,
37
+ block: D.TRANSCATION_HISTORY_ACTION_BLOCK
38
38
  }
39
39
  });
40
40
  },
41
41
  selectedTabIndex: A,
42
- trendAmountLabel: u?.label ?? ""
43
- }) : /* @__PURE__ */ r(E, {}) : /* @__PURE__ */ r(y, {});
42
+ showMonthlyAmount: C,
43
+ trendAmountLabel: p?.label ?? ""
44
+ }) : /* @__PURE__ */ r(R, {}) : /* @__PURE__ */ r(I, {});
44
45
  });
45
46
  export {
46
- P as BarchartBlock
47
+ Q as BarchartBlock
47
48
  };
48
49
 
49
50
  //# sourceMappingURL=BarchartBlock.es.js.map
package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BarchartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\nimport { observer } from 'mobx-react-lite'\n\nimport { formatCurrency, Loader, useGlobalUiStore, useInsightsV2Store } from '../../../../common'\nimport type { DrilldownPayload, InsightsPayload } from '../../../../core'\nimport type { BarChartBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport { BarChartV2 } from '../../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../../components/chartblocks/EmptyBarChart'\n\nimport { ANALYTICS_EVENTS_CONFIG, useAnalyticsEvent } from '../../../analytics'\n\nimport { BAR_ARIA_LABEL, barChartVariant, buildChartData, buildDataSeries } from './utils'\nimport { actionBlocksKey } from '../../../mappings/actionBlocksKey'\n\ninterface BarchartBlockProps {\n payload: InsightsPayload\n beatGuid?: string\n}\n\nexport const BarchartBlock = observer(({ payload, beatGuid = '' }: BarchartBlockProps) => {\n const theme = useTheme()\n const { openActionDrawer } = useInsightsV2Store()\n const { isCopyLoaded } = useGlobalUiStore()\n const { instance_slot, widget_type } = payload\n const {\n series,\n category_guid,\n average_amount = 0,\n additional_data = [],\n } = (instance_slot.data ?? {}) as BarChartBlockData\n const [monthlyAmount, trend] = additional_data\n const chartData = buildChartData(buildDataSeries(series), BAR_ARIA_LABEL)\n const [selectedTabIndex] = React.useState(chartData.length - 1)\n const { color } = barChartVariant(instance_slot, category_guid, theme)\n const fireAnalyticsEvent = useAnalyticsEvent()\n\n if (!isCopyLoaded) {\n return <Loader />\n }\n\n return chartData.length ? (\n <BarChartV2\n amounts={{\n average: average_amount,\n formattedAverage: formatCurrency(average_amount, '0,0'),\n }}\n color={color}\n data={chartData}\n monthlyAmountLabel={monthlyAmount?.label ?? ''}\n margin={{\n bottom: 8,\n left: 16,\n right: 16,\n // Room for the tallest bar's value label, drawn 8px above the bar and about 14px tall.\n top: 24,\n }}\n onBarClick={(index) => {\n if (widget_type !== 'full') return false\n\n fireAnalyticsEvent(ANALYTICS_EVENTS_CONFIG.CHART_BAR_CLICKED)\n\n openActionDrawer({\n guid: beatGuid,\n trigger: 'chartBar',\n context: {\n chartBarIndex: index,\n block: actionBlocksKey.TRANSCATION_HISTORY_ACTION_BLOCK,\n } satisfies DrilldownPayload,\n })\n }}\n selectedTabIndex={selectedTabIndex}\n trendAmountLabel={trend?.label ?? ''}\n />\n ) : (\n <EmptyBarChart />\n )\n})\n"],"mappings":";;;;;;;;;;;;;AAqBA,IAAa,IAAgB,EAAA,CAAU,EAAE,SAAA,GAAS,UAAA,IAAW,GAAA,MAA6B;AACxF,QAAM,IAAQ,EAAS,GACjB,EAAE,kBAAA,EAAA,IAAqB,EAAmB,GAC1C,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,eAAA,GAAe,aAAA,EAAA,IAAgB,GACjC,EACJ,QAAA,GACA,eAAA,GACA,gBAAA,IAAiB,GACjB,iBAAA,IAAkB,CAAC,EAAA,IAChB,EAAc,QAAQ,CAAC,GACtB,CAAC,GAAe,CAAA,IAAS,GACzB,IAAY,EAAe,EAAgB,CAAM,GAAG,CAAc,GAClE,CAAC,CAAA,IAAoB,EAAM,SAAS,EAAU,SAAS,CAAC,GACxD,EAAE,OAAA,EAAA,IAAU,EAAgB,GAAe,GAAe,CAAK,GAC/D,IAAqB,EAAkB;AAE7C,SAAK,IAIE,EAAU,SACf,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS;AAAA,MACP,SAAS;AAAA,MACT,kBAAkB,EAAe,GAAgB,KAAK;AAAA,IACxD;AAAA,IACO,OAAA;AAAA,IACP,MAAM;AAAA,IACN,oBAAoB,GAAe,SAAS;AAAA,IAC5C,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MAEP,KAAK;AAAA,IACP;AAAA,IACA,YAAA,CAAa,MAAU;AACrB,UAAI,MAAgB,OAAQ,QAAO;AAEnC,MAAA,EAAmB,EAAwB,iBAAiB,GAE5D,EAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,eAAe;AAAA,UACf,OAAO,EAAgB;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACkB,kBAAA;AAAA,IAClB,kBAAkB,GAAO,SAAS;AAAA,EACnC,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA,IArCT,gBAAA,EAAC,GAAD,CAAS,CAAA;AAuCpB,CAAC"}
1
+ {"version":3,"file":"BarchartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\nimport { observer } from 'mobx-react-lite'\n\nimport { formatCurrency, Loader, useGlobalUiStore, useInsightsV2Store } from '../../../../common'\nimport type { DrilldownPayload, InsightsPayload } from '../../../../core'\nimport type { BarChartBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport { BarChartV2 } from '../../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../../components/chartblocks/EmptyBarChart'\n\nimport { ANALYTICS_EVENTS_CONFIG, useAnalyticsEvent } from '../../../analytics'\n\nimport { BAR_ARIA_LABEL, barChartVariant, buildChartData, buildDataSeries } from './utils'\nimport { actionBlocksKey } from '../../../mappings/actionBlocksKey'\n\ninterface BarchartBlockProps {\n payload: InsightsPayload\n beatGuid?: string\n}\n\nexport const BarchartBlock = observer(({ payload, beatGuid = '' }: BarchartBlockProps) => {\n const theme = useTheme()\n const { openActionDrawer } = useInsightsV2Store()\n const { isCopyLoaded } = useGlobalUiStore()\n const { instance_slot, widget_type } = payload\n const {\n series,\n category_guid,\n average_amount = 0,\n additional_data = [],\n } = (instance_slot.data ?? {}) as BarChartBlockData\n const [monthlyAmount, trend] = additional_data\n const chartData = buildChartData(buildDataSeries(series), BAR_ARIA_LABEL)\n const [selectedTabIndex] = React.useState(chartData.length - 1)\n const { color, showMonthlyAmount } = barChartVariant(instance_slot, category_guid, theme)\n const fireAnalyticsEvent = useAnalyticsEvent()\n\n if (!isCopyLoaded) {\n return <Loader />\n }\n\n return chartData.length ? (\n <BarChartV2\n amounts={{\n average: average_amount,\n formattedAverage: formatCurrency(average_amount, '0,0'),\n }}\n color={color}\n data={chartData}\n monthlyAmountLabel={monthlyAmount?.label ?? ''}\n margin={{\n bottom: 8,\n left: 16,\n right: 16,\n // Room for the tallest bar's value label, drawn 8px above the bar and about 14px tall.\n top: 24,\n }}\n onBarClick={(index) => {\n if (widget_type !== 'full') return false\n\n fireAnalyticsEvent(ANALYTICS_EVENTS_CONFIG.CHART_BAR_CLICKED)\n\n openActionDrawer({\n guid: beatGuid,\n trigger: 'chartBar',\n context: {\n chartBarIndex: index,\n block: actionBlocksKey.TRANSCATION_HISTORY_ACTION_BLOCK,\n } satisfies DrilldownPayload,\n })\n }}\n selectedTabIndex={selectedTabIndex}\n showMonthlyAmount={showMonthlyAmount}\n trendAmountLabel={trend?.label ?? ''}\n />\n ) : (\n <EmptyBarChart />\n )\n})\n"],"mappings":";;;;;;;;;;;;;AAqBA,IAAa,IAAgB,EAAA,CAAU,EAAE,SAAA,GAAS,UAAA,IAAW,GAAA,MAA6B;AACxF,QAAM,IAAQ,EAAS,GACjB,EAAE,kBAAA,EAAA,IAAqB,EAAmB,GAC1C,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,eAAA,GAAe,aAAA,EAAA,IAAgB,GACjC,EACJ,QAAA,GACA,eAAA,GACA,gBAAA,IAAiB,GACjB,iBAAA,IAAkB,CAAC,EAAA,IAChB,EAAc,QAAQ,CAAC,GACtB,CAAC,GAAe,CAAA,IAAS,GACzB,IAAY,EAAe,EAAgB,CAAM,GAAG,CAAc,GAClE,CAAC,CAAA,IAAoB,EAAM,SAAS,EAAU,SAAS,CAAC,GACxD,EAAE,OAAA,GAAO,mBAAA,EAAA,IAAsB,EAAgB,GAAe,GAAe,CAAK,GAClF,IAAqB,EAAkB;AAE7C,SAAK,IAIE,EAAU,SACf,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS;AAAA,MACP,SAAS;AAAA,MACT,kBAAkB,EAAe,GAAgB,KAAK;AAAA,IACxD;AAAA,IACO,OAAA;AAAA,IACP,MAAM;AAAA,IACN,oBAAoB,GAAe,SAAS;AAAA,IAC5C,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MAEP,KAAK;AAAA,IACP;AAAA,IACA,YAAA,CAAa,MAAU;AACrB,UAAI,MAAgB,OAAQ,QAAO;AAEnC,MAAA,EAAmB,EAAwB,iBAAiB,GAE5D,EAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,eAAe;AAAA,UACf,OAAO,EAAgB;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACkB,kBAAA;AAAA,IACC,mBAAA;AAAA,IACnB,kBAAkB,GAAO,SAAS;AAAA,EACnC,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA,IAtCT,gBAAA,EAAC,GAAD,CAAS,CAAA;AAwCpB,CAAC"}
package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.d.ts CHANGED
@@ -5,5 +5,6 @@ export declare const getLayoutConfig: (theme: Theme) => {
5
5
  };
6
6
  monthly_spend_comparison: {
7
7
  color: string | undefined;
8
+ showMonthlyAmount: boolean;
8
9
  };
9
10
  };
package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.es.js CHANGED
@@ -1,9 +1,12 @@
1
- var o = (a) => ({
2
- account_balance: { color: a.palette.success.main },
3
- monthly_spend_comparison: { color: a.palette.chart.chart2 }
1
+ var t = (o) => ({
2
+ account_balance: { color: o.palette.success.main },
3
+ monthly_spend_comparison: {
4
+ color: o.palette.chart.chart2,
5
+ showMonthlyAmount: !1
6
+ }
4
7
  });
5
8
  export {
6
- o as getLayoutConfig
9
+ t as getLayoutConfig
7
10
  };
8
11
 
9
12
  //# sourceMappingURL=layout.es.js.map
package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\nexport const getLayoutConfig = (theme: Theme) => {\n return {\n account_balance: {\n color: theme.palette.success.main,\n },\n monthly_spend_comparison: {\n color: theme.palette.chart.chart2,\n },\n }\n}\n"],"mappings":"AACA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,iBAAiB,EACf,OAAO,EAAM,QAAQ,QAAQ,KAC/B;AAAA,EACA,0BAA0B,EACxB,OAAO,EAAM,QAAQ,MAAM,OAC7B;AACF"}
1
+ {"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\nexport const getLayoutConfig = (theme: Theme) => {\n return {\n account_balance: {\n color: theme.palette.success.main,\n },\n monthly_spend_comparison: {\n color: theme.palette.chart.chart2,\n // Figma labels the selected bar's legend without its amount.\n showMonthlyAmount: false,\n },\n }\n}\n"],"mappings":"AACA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,iBAAiB,EACf,OAAO,EAAM,QAAQ,QAAQ,KAC/B;AAAA,EACA,0BAA0B;AAAA,IACxB,OAAO,EAAM,QAAQ,MAAM;AAAA,IAE3B,mBAAmB;AAAA,EACrB;AACF"}
package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.d.ts CHANGED
@@ -27,4 +27,5 @@ export declare const buildChartData: (dataSeries: ChartDataSeriesItem[], ariaLab
27
27
  }[];
28
28
  export declare const barChartVariant: (instanceSlot: InstanceSlot, categoryGuid: string | undefined, theme: Theme) => {
29
29
  color: string;
30
+ showMonthlyAmount: boolean;
30
31
  };
package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js CHANGED
@@ -1,37 +1,45 @@
1
- import { buildDynamicCopy as i } from "../../../../core/utils/Localization.es.js";
2
- import { DATE_FORMATS_INTL as u, formatDate as _ } from "../../../../core/constants/DateFormats.es.js";
1
+ import { buildDynamicCopy as u } from "../../../../core/utils/Localization.es.js";
2
+ import { DATE_FORMATS_INTL as i, formatDate as l } from "../../../../core/constants/DateFormats.es.js";
3
3
  import { formatCurrency as m } from "../../../../core/utils/NumberFormatting.es.js";
4
4
  import { getCategoryColor as A } from "../../../../core/utils/CategoryUtil.es.js";
5
- import { getLayoutConfig as C } from "./layout.es.js";
6
- import { parseISO as l } from "date-fns/parseISO";
7
- var p = {
5
+ import { getLayoutConfig as _ } from "./layout.es.js";
6
+ import { parseISO as C } from "date-fns/parseISO";
7
+ var c = {
8
8
  CATEGORY_COLOR: "category_color",
9
9
  ACCOUNT_BALANCE: "account_balance",
10
10
  MONTHLY_SPEND_COMPARISON: "monthly_spend_comparison"
11
- }, d = "_1{month}: _2{amount}", L = (a) => a ? a.data ? a.data.map((o) => {
12
- const e = {};
13
- return a.names?.map((r, t) => {
14
- e[r] = o[t];
15
- }), e;
16
- }) : [] : [], b = (a, o, e = u.MONTH_SHORT) => [...a].sort((r, t) => !r.date || !t.date ? 0 : new Date(r.date).getTime() - new Date(t.date).getTime()).map((r) => {
17
- const t = r.date ? _(l(r.date), e) : r.label ?? "", n = r.amount ?? 0;
11
+ }, R = "_1{month}: _2{amount}", d = (o) => o ? o.data ? o.data.map((e) => {
12
+ const a = {};
13
+ return o.names?.map((r, t) => {
14
+ a[r] = e[t];
15
+ }), a;
16
+ }) : [] : [], L = (o, e, a = i.MONTH_SHORT) => [...o].sort((r, t) => !r.date || !t.date ? 0 : new Date(r.date).getTime() - new Date(t.date).getTime()).map((r) => {
17
+ const t = r.date ? l(C(r.date), a) : r.label ?? "", n = r.amount ?? 0;
18
18
  return {
19
- ariaLabel: i(o, t, m(n, "0.00")),
19
+ ariaLabel: u(e, t, m(n, "0.00")),
20
20
  date: r.date ?? null,
21
21
  label: t,
22
22
  value: n,
23
23
  formattedAmount: m(n, "0,0")
24
24
  };
25
- }), y = (a, o, e) => {
26
- const { variant: r } = a, t = C(e);
27
- return r === p.CATEGORY_COLOR && o ? { color: A(o, e) } : { color: t[r]?.color ?? e.palette.primary.main };
25
+ }), h = (o, e, a) => {
26
+ const { variant: r } = o, t = _(a);
27
+ if (r === c.CATEGORY_COLOR && e) return {
28
+ color: A(e, a),
29
+ showMonthlyAmount: !0
30
+ };
31
+ const n = t[r];
32
+ return {
33
+ color: n?.color ?? a.palette.primary.main,
34
+ showMonthlyAmount: n?.showMonthlyAmount ?? !0
35
+ };
28
36
  };
29
37
  export {
30
- d as BAR_ARIA_LABEL,
31
- p as BAR_CHART_VARIANTS,
32
- y as barChartVariant,
33
- b as buildChartData,
34
- L as buildDataSeries
38
+ R as BAR_ARIA_LABEL,
39
+ c as BAR_CHART_VARIANTS,
40
+ h as barChartVariant,
41
+ L as buildChartData,
42
+ d as buildDataSeries
35
43
  };
36
44
 
37
45
  //# sourceMappingURL=utils.es.js.map
package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\n\nimport { parseISO } from 'date-fns/parseISO'\n\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DataSeries, InstanceSlot } from '../../../../core'\nimport { getLayoutConfig } from './layout'\n\nexport const BAR_CHART_VARIANTS = {\n CATEGORY_COLOR: 'category_color',\n ACCOUNT_BALANCE: 'account_balance',\n MONTHLY_SPEND_COMPARISON: 'monthly_spend_comparison',\n}\n\nexport interface ChartDataSeriesItem {\n date?: string\n amount?: number\n guid?: string\n label?: string\n aggregated_guids?: string[]\n localized_label?: string\n category_guid?: string\n}\n\n/** Per-bar aria label, built in the frontend: \"{month}: {amount}\" (buildDynamicCopy placeholders). */\nexport const BAR_ARIA_LABEL = '_1{month}: _2{amount}'\n\nexport const buildDataSeries = (data: DataSeries | undefined): ChartDataSeriesItem[] => {\n if (!data) {\n return []\n }\n\n if (data.data) {\n return data.data.map((d) => {\n const item: any = {}\n\n data.names?.map((name, index) => {\n item[name] = d[index]\n })\n return item\n })\n } else {\n return []\n }\n}\n\nexport const buildChartData = (\n dataSeries: ChartDataSeriesItem[],\n ariaLabel: string,\n dateFormat: Parameters<typeof formatDate>[1] = DATE_FORMATS_INTL.MONTH_SHORT,\n) => {\n const data = [...dataSeries]\n .sort((a, b) => {\n if (!a.date || !b.date) return 0\n\n return new Date(a.date).getTime() - new Date(b.date).getTime()\n })\n .map((total) => {\n const label = total.date ? formatDate(parseISO(total.date), dateFormat) : (total.label ?? '')\n const amount = total.amount ?? 0\n\n return {\n ariaLabel: buildDynamicCopy(ariaLabel, label, formatCurrency(amount, '0.00')) as string,\n date: total.date ?? null,\n label,\n value: amount,\n formattedAmount: formatCurrency(amount, '0,0'),\n }\n })\n\n return data\n}\n\nexport const barChartVariant = (\n instanceSlot: InstanceSlot,\n categoryGuid: string | undefined,\n theme: Theme,\n) => {\n const { variant } = instanceSlot\n const barChartLayout = getLayoutConfig(theme)\n if (variant === BAR_CHART_VARIANTS.CATEGORY_COLOR && categoryGuid) {\n return { color: getCategoryColor(categoryGuid, theme) }\n }\n return {\n color:\n barChartLayout[variant as keyof typeof barChartLayout]?.color ?? theme.palette.primary.main,\n }\n}\n"],"mappings":";;;;;;AAWA,IAAa,IAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,0BAA0B;AAC5B,GAaa,IAAiB,yBAEjB,IAAA,CAAmB,MACzB,IAID,EAAK,OACA,EAAK,KAAK,IAAA,CAAK,MAAM;AAC1B,QAAM,IAAY,CAAC;AAEnB,SAAA,EAAK,OAAO,IAAA,CAAK,GAAM,MAAU;AAC/B,IAAA,EAAK,CAAA,IAAQ,EAAE,CAAA;AAAA,EACjB,CAAC,GACM;AACT,CAAC,IAEM,CAAC,IAbD,CAAC,GAiBC,IAAA,CACX,GACA,GACA,IAA+C,EAAkB,gBAEpD,CAAC,GAAG,CAAU,EACxB,KAAA,CAAM,GAAG,MACJ,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAa,IAExB,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,CAC9D,EACA,IAAA,CAAK,MAAU;AACd,QAAM,IAAQ,EAAM,OAAO,EAAW,EAAS,EAAM,IAAI,GAAG,CAAU,IAAK,EAAM,SAAS,IACpF,IAAS,EAAM,UAAU;AAE/B,SAAO;AAAA,IACL,WAAW,EAAiB,GAAW,GAAO,EAAe,GAAQ,MAAM,CAAC;AAAA,IAC5E,MAAM,EAAM,QAAQ;AAAA,IACpB,OAAA;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB,EAAe,GAAQ,KAAK;AAAA,EAC/C;AACF,CAEK,GAGI,IAAA,CACX,GACA,GACA,MACG;AACH,QAAM,EAAE,SAAA,EAAA,IAAY,GACd,IAAiB,EAAgB,CAAK;AAC5C,SAAI,MAAY,EAAmB,kBAAkB,IAC5C,EAAE,OAAO,EAAiB,GAAc,CAAK,EAAE,IAEjD,EACL,OACE,EAAe,CAAA,GAAyC,SAAS,EAAM,QAAQ,QAAQ,KAC3F;AACF"}
1
+ {"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\n\nimport { parseISO } from 'date-fns/parseISO'\n\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DataSeries, InstanceSlot } from '../../../../core'\nimport { getLayoutConfig } from './layout'\n\nexport const BAR_CHART_VARIANTS = {\n CATEGORY_COLOR: 'category_color',\n ACCOUNT_BALANCE: 'account_balance',\n MONTHLY_SPEND_COMPARISON: 'monthly_spend_comparison',\n}\n\nexport interface ChartDataSeriesItem {\n date?: string\n amount?: number\n guid?: string\n label?: string\n aggregated_guids?: string[]\n localized_label?: string\n category_guid?: string\n}\n\n/** Per-bar aria label, built in the frontend: \"{month}: {amount}\" (buildDynamicCopy placeholders). */\nexport const BAR_ARIA_LABEL = '_1{month}: _2{amount}'\n\nexport const buildDataSeries = (data: DataSeries | undefined): ChartDataSeriesItem[] => {\n if (!data) {\n return []\n }\n\n if (data.data) {\n return data.data.map((d) => {\n const item: any = {}\n\n data.names?.map((name, index) => {\n item[name] = d[index]\n })\n return item\n })\n } else {\n return []\n }\n}\n\nexport const buildChartData = (\n dataSeries: ChartDataSeriesItem[],\n ariaLabel: string,\n dateFormat: Parameters<typeof formatDate>[1] = DATE_FORMATS_INTL.MONTH_SHORT,\n) => {\n const data = [...dataSeries]\n .sort((a, b) => {\n if (!a.date || !b.date) return 0\n\n return new Date(a.date).getTime() - new Date(b.date).getTime()\n })\n .map((total) => {\n const label = total.date ? formatDate(parseISO(total.date), dateFormat) : (total.label ?? '')\n const amount = total.amount ?? 0\n\n return {\n ariaLabel: buildDynamicCopy(ariaLabel, label, formatCurrency(amount, '0.00')) as string,\n date: total.date ?? null,\n label,\n value: amount,\n formattedAmount: formatCurrency(amount, '0,0'),\n }\n })\n\n return data\n}\n\nexport const barChartVariant = (\n instanceSlot: InstanceSlot,\n categoryGuid: string | undefined,\n theme: Theme,\n) => {\n const { variant } = instanceSlot\n const barChartLayout = getLayoutConfig(theme)\n if (variant === BAR_CHART_VARIANTS.CATEGORY_COLOR && categoryGuid) {\n return { color: getCategoryColor(categoryGuid, theme), showMonthlyAmount: true }\n }\n const layout: { color?: string; showMonthlyAmount?: boolean } | undefined =\n barChartLayout[variant as keyof typeof barChartLayout]\n return {\n color: layout?.color ?? theme.palette.primary.main,\n showMonthlyAmount: layout?.showMonthlyAmount ?? true,\n }\n}\n"],"mappings":";;;;;;AAWA,IAAa,IAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,0BAA0B;AAC5B,GAaa,IAAiB,yBAEjB,IAAA,CAAmB,MACzB,IAID,EAAK,OACA,EAAK,KAAK,IAAA,CAAK,MAAM;AAC1B,QAAM,IAAY,CAAC;AAEnB,SAAA,EAAK,OAAO,IAAA,CAAK,GAAM,MAAU;AAC/B,IAAA,EAAK,CAAA,IAAQ,EAAE,CAAA;AAAA,EACjB,CAAC,GACM;AACT,CAAC,IAEM,CAAC,IAbD,CAAC,GAiBC,IAAA,CACX,GACA,GACA,IAA+C,EAAkB,gBAEpD,CAAC,GAAG,CAAU,EACxB,KAAA,CAAM,GAAG,MACJ,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAa,IAExB,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,CAC9D,EACA,IAAA,CAAK,MAAU;AACd,QAAM,IAAQ,EAAM,OAAO,EAAW,EAAS,EAAM,IAAI,GAAG,CAAU,IAAK,EAAM,SAAS,IACpF,IAAS,EAAM,UAAU;AAE/B,SAAO;AAAA,IACL,WAAW,EAAiB,GAAW,GAAO,EAAe,GAAQ,MAAM,CAAC;AAAA,IAC5E,MAAM,EAAM,QAAQ;AAAA,IACpB,OAAA;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB,EAAe,GAAQ,KAAK;AAAA,EAC/C;AACF,CAEK,GAGI,IAAA,CACX,GACA,GACA,MACG;AACH,QAAM,EAAE,SAAA,EAAA,IAAY,GACd,IAAiB,EAAgB,CAAK;AAC5C,MAAI,MAAY,EAAmB,kBAAkB,EACnD,QAAO;AAAA,IAAE,OAAO,EAAiB,GAAc,CAAK;AAAA,IAAG,mBAAmB;AAAA,EAAK;AAEjF,QAAM,IACJ,EAAe,CAAA;AACjB,SAAO;AAAA,IACL,OAAO,GAAQ,SAAS,EAAM,QAAQ,QAAQ;AAAA,IAC9C,mBAAmB,GAAQ,qBAAqB;AAAA,EAClD;AACF"}
package/dist/insights-v2/components/chartblocks/BarchartV2.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { BarChartV2Props } from '../../../insights/types/Charts/BarChart';
2
- export declare const BarChartV2: ({ amounts, color, data, heightOverride, margin, onBarClick, legendPosition, monthlyAmountLabel, removeSelectedTabColorChange, selectedTabIndex, trendAmountLabel, }: BarChartV2Props) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const BarChartV2: ({ amounts, color, data, heightOverride, margin, onBarClick, legendPosition, monthlyAmountLabel, removeSelectedTabColorChange, selectedTabIndex, showMonthlyAmount, trendAmountLabel, }: BarChartV2Props) => import("react/jsx-runtime").JSX.Element;
package/dist/insights-v2/components/chartblocks/BarchartV2.es.js CHANGED
@@ -1,19 +1,19 @@
1
- import { useContainerDimensions as V } from "../../../insights/hooks/useContainerDimensions.es.js";
2
- import { LegendV2 as D } from "../../../insights/components/shared/Charts/BarChart/ChartLegendV2.es.js";
3
- import { CustomBarPlotV2 as _ } from "../../../insights/components/shared/Charts/BarChart/CustomBarPlotV2.es.js";
1
+ import { useContainerDimensions as D } from "../../../insights/hooks/useContainerDimensions.es.js";
2
+ import { LegendV2 as _ } from "../../../insights/components/shared/Charts/BarChart/ChartLegendV2.es.js";
3
+ import { CustomBarPlotV2 as j } from "../../../insights/components/shared/Charts/BarChart/CustomBarPlotV2.es.js";
4
4
  import m from "react";
5
- import j from "@mui/material/Stack";
5
+ import W from "@mui/material/Stack";
6
6
  import { jsx as n, jsxs as M } from "react/jsx-runtime";
7
- import { useTheme as W } from "@mui/material/styles";
8
- import z from "@mui/material/Box";
9
- import { BarPlot as G, ChartContainer as N, ChartsReferenceLine as b, ChartsXAxis as X } from "@mui/x-charts";
10
- var Q = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
7
+ import { useTheme as z } from "@mui/material/styles";
8
+ import G from "@mui/material/Box";
9
+ import { BarPlot as N, ChartContainer as X, ChartsReferenceLine as b, ChartsXAxis as Y } from "@mui/x-charts";
10
+ var U = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
11
11
  bottom: 30,
12
12
  left: 16,
13
13
  right: 16,
14
14
  top: 20
15
- }, onBarClick: S, legendPosition: h = "bottom", monthlyAmountLabel: x, removeSelectedTabColorChange: u, selectedTabIndex: o, trendAmountLabel: y }) => {
16
- const g = m.useRef(null), { height: d, width: R } = V(g), A = W(), k = m.useMemo(() => {
15
+ }, onBarClick: d, legendPosition: h = "bottom", monthlyAmountLabel: x, removeSelectedTabColorChange: u, selectedTabIndex: o, showMonthlyAmount: S = !0, trendAmountLabel: y }) => {
16
+ const g = m.useRef(null), { height: v, width: R } = D(g), A = z(), k = m.useMemo(() => {
17
17
  const t = e.map(({ value: a }) => a), r = Math.min(...t), i = Math.max(...t);
18
18
  return {
19
19
  series: [{
@@ -31,29 +31,29 @@ var Q = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
31
31
  max: i > 0 ? i : 0
32
32
  }]
33
33
  };
34
- }, [e]), v = m.useMemo(() => {
34
+ }, [e]), B = m.useMemo(() => {
35
35
  const t = `${s}80`;
36
36
  return u ? e.map(() => s) : o == null ? [...new Array(e.length - 1).fill(t), s] : e.map((r, i) => i === o ? s : t);
37
37
  }, [
38
38
  s,
39
39
  e,
40
40
  o
41
- ]), B = m.useMemo(() => e[o ?? e.length - 1], [e, o]), f = e.reduce((t, r) => Math.min(t, r.value), 1 / 0) < 0, C = /* @__PURE__ */ n(D, {
41
+ ]), L = m.useMemo(() => e[o ?? e.length - 1], [e, o]), f = e.reduce((t, r) => Math.min(t, r.value), 1 / 0) < 0, C = /* @__PURE__ */ n(_, {
42
42
  color: s,
43
43
  legendStyle: { pl: l.left },
44
- monthlyAmount: B.formattedAmount,
44
+ monthlyAmount: S ? L.formattedAmount : void 0,
45
45
  monthlyAmountLabel: x,
46
46
  trendAmount: c?.formattedAverage,
47
47
  trendAmountLabel: y
48
- }), w = x || y, L = (t, { dataIndex: r }) => S?.(r);
49
- return /* @__PURE__ */ M(j, {
48
+ }), w = x || y, V = (t, { dataIndex: r }) => d?.(r);
49
+ return /* @__PURE__ */ M(W, {
50
50
  sx: {
51
51
  alignItems: "center",
52
52
  width: "100%"
53
53
  },
54
54
  children: [
55
55
  w && h === "top" && C,
56
- /* @__PURE__ */ n(z, {
56
+ /* @__PURE__ */ n(G, {
57
57
  ref: g,
58
58
  sx: {
59
59
  height: p || 122,
@@ -66,8 +66,8 @@ var Q = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
66
66
  userSelect: "none"
67
67
  }
68
68
  },
69
- children: /* @__PURE__ */ M(N, {
70
- height: d,
69
+ children: /* @__PURE__ */ M(X, {
70
+ height: v,
71
71
  margin: {
72
72
  bottom: l.bottom,
73
73
  left: l.left,
@@ -94,7 +94,7 @@ var Q = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
94
94
  lineStyle: { stroke: A.palette.chart.chart7 },
95
95
  y: 0
96
96
  }),
97
- /* @__PURE__ */ n(X, {
97
+ /* @__PURE__ */ n(Y, {
98
98
  slots: { axisTickLabel: ({ text: t, ownerState: r, ...i }) => {
99
99
  const a = e[o ?? e.length - 1]?.label;
100
100
  return /* @__PURE__ */ n("text", {
@@ -113,13 +113,13 @@ var Q = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
113
113
  }),
114
114
  tickLabelStyle: { fontSize: 11 }
115
115
  }),
116
- /* @__PURE__ */ n(G, {
117
- onItemClick: L,
116
+ /* @__PURE__ */ n(N, {
117
+ onItemClick: V,
118
118
  slots: { bar: (t) => {
119
119
  const { ownerState: r, ...i } = t;
120
- return /* @__PURE__ */ n(_, {
120
+ return /* @__PURE__ */ n(j, {
121
121
  ...i,
122
- colorRange: v,
122
+ colorRange: B,
123
123
  data: e,
124
124
  dataIndex: r.dataIndex,
125
125
  removeSelectedTabColorChange: u,
@@ -141,7 +141,7 @@ var Q = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
141
141
  });
142
142
  };
143
143
  export {
144
- Q as BarChartV2
144
+ U as BarChartV2
145
145
  };
146
146
 
147
147
  //# sourceMappingURL=BarchartV2.es.js.map
package/dist/insights-v2/components/chartblocks/BarchartV2.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BarchartV2.es.js","names":[],"sources":["../../../../src/insights-v2/components/chartblocks/BarchartV2.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type Theme, useTheme } from '@mui/material/styles'\nimport {\n BarPlot,\n type BarSeriesType,\n ChartContainer as ResponsiveChartContainer,\n ChartsReferenceLine,\n ChartsXAxis,\n} from '@mui/x-charts'\n\nimport { useContainerDimensions } from '../../../insights/hooks/useContainerDimensions'\nimport type { BarChartV2Props } from '../../../insights/types/Charts/BarChart'\nimport { LegendV2 } from '../../../insights/components/shared/Charts/BarChart/ChartLegendV2'\nimport { CustomBarPlotV2 } from '../../../insights/components/shared/Charts/BarChart/CustomBarPlotV2'\n\nexport const BarChartV2 = ({\n amounts,\n color,\n data,\n heightOverride,\n margin = {\n bottom: 30,\n left: 16,\n right: 16,\n top: 20,\n },\n onBarClick,\n legendPosition = 'bottom',\n monthlyAmountLabel,\n removeSelectedTabColorChange,\n selectedTabIndex,\n trendAmountLabel,\n}: BarChartV2Props) => {\n const containerRef = React.useRef<HTMLDivElement>(null)\n const { height, width } = useContainerDimensions(containerRef)\n const theme = useTheme()\n\n const chartData = React.useMemo(() => {\n const values = data.map(({ value }) => value)\n const minValue = Math.min(...values)\n const maxValue = Math.max(...values)\n\n return {\n series: [\n {\n data: values,\n type: 'bar',\n },\n ] as BarSeriesType[],\n xAxis: [\n {\n data: data.map(({ label }) => label),\n scaleType: 'band' as const,\n categoryGapRatio: 0.45,\n },\n ],\n yAxis: [\n {\n scaleType: 'linear' as const,\n min: minValue < 0 ? minValue * 1.2 : 0,\n max: maxValue > 0 ? maxValue : 0,\n },\n ],\n }\n }, [data])\n\n const colorRange = React.useMemo(() => {\n const defaultColor = `${color}80`\n if (removeSelectedTabColorChange) return data.map(() => color)\n\n if (selectedTabIndex == null) {\n return [...new Array(data.length - 1).fill(defaultColor), color]\n }\n return data.map((_, index) => (index === selectedTabIndex ? color : defaultColor))\n }, [color, data, selectedTabIndex])\n\n const selectedData = React.useMemo(\n () => data[selectedTabIndex ?? data.length - 1],\n [data, selectedTabIndex],\n )\n\n const lowestValue = data.reduce((min, item) => Math.min(min, item.value), Infinity)\n const isNegative = lowestValue < 0\n\n const legendComponent = (\n <LegendV2\n color={color}\n legendStyle={{ pl: margin.left }}\n monthlyAmount={selectedData.formattedAmount}\n monthlyAmountLabel={monthlyAmountLabel}\n trendAmount={amounts?.formattedAverage}\n trendAmountLabel={trendAmountLabel}\n />\n )\n\n const shouldShowLegend = monthlyAmountLabel || trendAmountLabel\n\n const handleBarClick = (\n _: React.MouseEvent<SVGElement, MouseEvent>,\n { dataIndex }: { dataIndex: number },\n ) => onBarClick?.(dataIndex)\n\n return (\n <Stack sx={{ alignItems: 'center', width: '100%' }}>\n {shouldShowLegend && legendPosition === 'top' && legendComponent}\n <Box\n ref={containerRef}\n sx={{\n height: heightOverride ? heightOverride : 122,\n mb: legendPosition === 'top' ? 0 : 4,\n mt: legendPosition === 'top' ? 4 : 0,\n touchAction: 'pan-y',\n width: '100%',\n '& svg': {\n touchAction: 'pan-y',\n userSelect: 'none',\n },\n }}\n >\n <ResponsiveChartContainer\n height={height}\n margin={{\n bottom: margin.bottom,\n left: margin.left,\n right: margin.right,\n top: margin.top || 45,\n }}\n series={chartData.series}\n width={width}\n xAxis={chartData.xAxis}\n yAxis={[{ width: 0 }]}\n >\n {amounts?.average && (\n <ChartsReferenceLine\n labelAlign=\"middle\"\n lineStyle={{\n stroke: theme.palette.chart.chart7,\n strokeDasharray: '4',\n strokeLinecap: 'round',\n strokeWidth: 1,\n }}\n y={amounts?.average}\n />\n )}\n\n {isNegative && (\n <ChartsReferenceLine\n labelAlign=\"middle\"\n lineStyle={{\n stroke: theme.palette.chart.chart7,\n }}\n y={0}\n />\n )}\n\n <ChartsXAxis\n slots={{\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n axisTickLabel: ({ text, ownerState: _, ...restProps }) => {\n const label = data[selectedTabIndex ?? data.length - 1]?.label\n return (\n <text\n {...restProps}\n style={\n {\n ...restProps.style,\n fontWeight: !removeSelectedTabColorChange && label === text ? 'bold' : 400,\n } as React.CSSProperties\n }\n >\n {text}\n </text>\n )\n },\n }}\n sx={(theme) => ({\n '& .MuiChartsAxis-line': {\n stroke: !isNegative ? (theme as Theme).palette.text?.primary : 'none',\n },\n '& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick': {\n display: 'none',\n },\n '& .MuiChartsAxis-tickLabel': {\n transform: isNegative ? 'translateY(15px)' : {},\n },\n })}\n tickLabelStyle={{\n fontSize: 11,\n }}\n />\n <BarPlot\n onItemClick={handleBarClick}\n slots={{\n bar: (props) => {\n const { ownerState, ...defaultProps } = props\n return (\n <CustomBarPlotV2\n {...defaultProps}\n colorRange={colorRange}\n data={data}\n dataIndex={ownerState.dataIndex}\n removeSelectedTabColorChange={removeSelectedTabColorChange}\n selectedTabIndex={selectedTabIndex ?? data.length - 1}\n style={{\n height: props.height,\n x: props.x,\n y: props.y,\n width: props.width,\n }}\n />\n )\n },\n }}\n />\n </ResponsiveChartContainer>\n </Box>\n {shouldShowLegend && legendPosition === 'bottom' && legendComponent}\n </Stack>\n )\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"BarchartV2.es.js","names":[],"sources":["../../../../src/insights-v2/components/chartblocks/BarchartV2.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type Theme, useTheme } from '@mui/material/styles'\nimport {\n BarPlot,\n type BarSeriesType,\n ChartContainer as ResponsiveChartContainer,\n ChartsReferenceLine,\n ChartsXAxis,\n} from '@mui/x-charts'\n\nimport { useContainerDimensions } from '../../../insights/hooks/useContainerDimensions'\nimport type { BarChartV2Props } from '../../../insights/types/Charts/BarChart'\nimport { LegendV2 } from '../../../insights/components/shared/Charts/BarChart/ChartLegendV2'\nimport { CustomBarPlotV2 } from '../../../insights/components/shared/Charts/BarChart/CustomBarPlotV2'\n\nexport const BarChartV2 = ({\n amounts,\n color,\n data,\n heightOverride,\n margin = {\n bottom: 30,\n left: 16,\n right: 16,\n top: 20,\n },\n onBarClick,\n legendPosition = 'bottom',\n monthlyAmountLabel,\n removeSelectedTabColorChange,\n selectedTabIndex,\n showMonthlyAmount = true,\n trendAmountLabel,\n}: BarChartV2Props) => {\n const containerRef = React.useRef<HTMLDivElement>(null)\n const { height, width } = useContainerDimensions(containerRef)\n const theme = useTheme()\n\n const chartData = React.useMemo(() => {\n const values = data.map(({ value }) => value)\n const minValue = Math.min(...values)\n const maxValue = Math.max(...values)\n\n return {\n series: [\n {\n data: values,\n type: 'bar',\n },\n ] as BarSeriesType[],\n xAxis: [\n {\n data: data.map(({ label }) => label),\n scaleType: 'band' as const,\n categoryGapRatio: 0.45,\n },\n ],\n yAxis: [\n {\n scaleType: 'linear' as const,\n min: minValue < 0 ? minValue * 1.2 : 0,\n max: maxValue > 0 ? maxValue : 0,\n },\n ],\n }\n }, [data])\n\n const colorRange = React.useMemo(() => {\n const defaultColor = `${color}80`\n if (removeSelectedTabColorChange) return data.map(() => color)\n\n if (selectedTabIndex == null) {\n return [...new Array(data.length - 1).fill(defaultColor), color]\n }\n return data.map((_, index) => (index === selectedTabIndex ? color : defaultColor))\n }, [color, data, selectedTabIndex])\n\n const selectedData = React.useMemo(\n () => data[selectedTabIndex ?? data.length - 1],\n [data, selectedTabIndex],\n )\n\n const lowestValue = data.reduce((min, item) => Math.min(min, item.value), Infinity)\n const isNegative = lowestValue < 0\n\n const legendComponent = (\n <LegendV2\n color={color}\n legendStyle={{ pl: margin.left }}\n monthlyAmount={showMonthlyAmount ? selectedData.formattedAmount : undefined}\n monthlyAmountLabel={monthlyAmountLabel}\n trendAmount={amounts?.formattedAverage}\n trendAmountLabel={trendAmountLabel}\n />\n )\n\n const shouldShowLegend = monthlyAmountLabel || trendAmountLabel\n\n const handleBarClick = (\n _: React.MouseEvent<SVGElement, MouseEvent>,\n { dataIndex }: { dataIndex: number },\n ) => onBarClick?.(dataIndex)\n\n return (\n <Stack sx={{ alignItems: 'center', width: '100%' }}>\n {shouldShowLegend && legendPosition === 'top' && legendComponent}\n <Box\n ref={containerRef}\n sx={{\n height: heightOverride ? heightOverride : 122,\n mb: legendPosition === 'top' ? 0 : 4,\n mt: legendPosition === 'top' ? 4 : 0,\n touchAction: 'pan-y',\n width: '100%',\n '& svg': {\n touchAction: 'pan-y',\n userSelect: 'none',\n },\n }}\n >\n <ResponsiveChartContainer\n height={height}\n margin={{\n bottom: margin.bottom,\n left: margin.left,\n right: margin.right,\n top: margin.top || 45,\n }}\n series={chartData.series}\n width={width}\n xAxis={chartData.xAxis}\n yAxis={[{ width: 0 }]}\n >\n {amounts?.average && (\n <ChartsReferenceLine\n labelAlign=\"middle\"\n lineStyle={{\n stroke: theme.palette.chart.chart7,\n strokeDasharray: '4',\n strokeLinecap: 'round',\n strokeWidth: 1,\n }}\n y={amounts?.average}\n />\n )}\n\n {isNegative && (\n <ChartsReferenceLine\n labelAlign=\"middle\"\n lineStyle={{\n stroke: theme.palette.chart.chart7,\n }}\n y={0}\n />\n )}\n\n <ChartsXAxis\n slots={{\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n axisTickLabel: ({ text, ownerState: _, ...restProps }) => {\n const label = data[selectedTabIndex ?? data.length - 1]?.label\n return (\n <text\n {...restProps}\n style={\n {\n ...restProps.style,\n fontWeight: !removeSelectedTabColorChange && label === text ? 'bold' : 400,\n } as React.CSSProperties\n }\n >\n {text}\n </text>\n )\n },\n }}\n sx={(theme) => ({\n '& .MuiChartsAxis-line': {\n stroke: !isNegative ? (theme as Theme).palette.text?.primary : 'none',\n },\n '& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick': {\n display: 'none',\n },\n '& .MuiChartsAxis-tickLabel': {\n transform: isNegative ? 'translateY(15px)' : {},\n },\n })}\n tickLabelStyle={{\n fontSize: 11,\n }}\n />\n <BarPlot\n onItemClick={handleBarClick}\n slots={{\n bar: (props) => {\n const { ownerState, ...defaultProps } = props\n return (\n <CustomBarPlotV2\n {...defaultProps}\n colorRange={colorRange}\n data={data}\n dataIndex={ownerState.dataIndex}\n removeSelectedTabColorChange={removeSelectedTabColorChange}\n selectedTabIndex={selectedTabIndex ?? data.length - 1}\n style={{\n height: props.height,\n x: props.x,\n y: props.y,\n width: props.width,\n }}\n />\n )\n },\n }}\n />\n </ResponsiveChartContainer>\n </Box>\n {shouldShowLegend && legendPosition === 'bottom' && legendComponent}\n </Stack>\n )\n}\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mx-cartographer/experiences",
3
- "version": "9.7.95",
3
+ "version": "9.7.96",
4
4
  "description": "Library containing experience widgets",
5
5
  "author": "MX",
6
6
  "license": "MIT",