@mx-cartographer/experiences 9.4.13 → 9.4.15

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionHistoryBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.tsx"],"sourcesContent":["import { useLayoutEffect, useState } from 'react'\n\nimport { useTheme } from '@mui/material/styles'\nimport { observer } from 'mobx-react-lite'\n\nimport type { Beat, DataSeries, Transaction } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { BarChartV2 } from '../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../components/chartblocks/EmptyBarChart'\n\nimport { TransactionDrillDown } from './TransactionDrillDown'\nimport { useTransactionHistory } from './useTransactionHistory'\nimport {\n  getDefaultSelection,\n  getDrillDownConfig,\n  getFlattenedDataSeries,\n  toStoreFilter,\n} from './utils'\nimport { useInsightsV2Store } from '../../../common'\n\ninterface TransactionHistoryProp {\n  beat: Beat\n}\n\nexport const TransactionHistoryBlock = observer(({ beat }: TransactionHistoryProp) => {\n  const theme = useTheme()\n  const {\n    instanceSlotData,\n    beatTransactions,\n    primaryTransaction,\n    spendCategoryGuids,\n    allAccountGuids,\n    categoryName,\n    displayedDateRange,\n    transactionStore,\n  } = useTransactionHistory(beat)\n\n  const { actionDrawer } = useInsightsV2Store()\n\n  const { insights_payload } = beat\n\n  const dynamicCtaVariant =\n    actionDrawer.trigger === 'secondaryCta'\n      ? insights_payload?.secondary_cta?.variant\n      : insights_payload?.primary_cta?.variant\n\n  const { top, filterMode, header, colors, filterStrategy } = getDrillDownConfig(\n    dynamicCtaVariant ?? '',\n  )\n\n  const { dataSeries, chartData, comparisonBars } = getFlattenedDataSeries({\n    data: instanceSlotData?.data_series as DataSeries,\n    ariaLabel: instanceSlotData?.ariaLabel ?? '',\n    top,\n    beatTransactions,\n    payload: instanceSlotData,\n  })\n\n  const { chartBarIndex, subTabIndex } = getDefaultSelection({\n    chartTabCount: chartData.length,\n    comparisonTabCount: comparisonBars.length,\n    actionDrawer,\n    beatGuid: beat.guid,\n  })\n\n  const [selectedIndex, setSelectedIndex] = useState(chartBarIndex)\n\n  const resolveFilter = (index: number) =>\n    filterStrategy({\n      beat,\n      beatTransactions,\n      dataSeries,\n      selectedIndex: index,\n      subIndex: subTabIndex,\n      isLastTab: index === dataSeries.length - 1,\n      instanceSlotData,\n      spendCategoryGuids,\n      displayedDateRange,\n    })\n\n  // Apply the current selection's filter. Store variants route through the store filter; local\n  // (upcomingBill) variants filter beatTransactions directly and only backfill the cache when the\n  // Stable primitive keys for the collections below: beatTransactions/spendCategoryGuids/\n  // allAccountGuids are recomputed (new array identity) every render, so depending on them directly\n  // re-fires the effect each render (REVIEW.md MEW-3732). Key on content instead.\n  const beatTransactionGuidsKey = beatTransactions.map((transaction) => transaction.guid).join(',')\n  const spendCategoryGuidsKey = spendCategoryGuids.join(',')\n  const allAccountGuidsKey = allAccountGuids.join(',')\n\n  // store variants route the selection through the shared store filter; local (upcomingBill) variants\n  // filter beatTransactions directly, so there's nothing to push to the store for them.\n  useLayoutEffect(() => {\n    if (filterMode !== 'store' || !dataSeries.length) return\n    transactionStore.setFilter(\n      toStoreFilter(resolveFilter(selectedIndex), { allAccountGuids, displayedDateRange }),\n    )\n  }, [\n    beat.guid,\n    selectedIndex,\n    filterMode,\n    dataSeries.length,\n    instanceSlotData,\n    displayedDateRange,\n    spendCategoryGuidsKey,\n    allAccountGuidsKey,\n    beatTransactionGuidsKey,\n  ])\n\n  const headerContent = header?.({\n    htmlTitle: beat.html_title,\n    primaryTransaction,\n    categoryName,\n    selectedDate: chartData[selectedIndex]?.date ?? undefined,\n  })\n\n  const barColors = colors(theme, instanceSlotData?.category_guid)\n  const [monthlyAmountLabel, trendAmountLabel] = (instanceSlotData?.legends ?? []).map(\n    (legend) => legend.label,\n  )\n\n  const transactionFilter =\n    filterMode === 'local'\n      ? (index: number) => resolveFilter(index).custom ?? (() => true)\n      : undefined\n\n  const baseTransactions: Transaction[] | undefined =\n    filterMode === 'local' ? beatTransactions : undefined\n\n  const isBarTop = top === 'singleBar' || top === 'upcomingBill'\n  const chartTop = !isBarTop ? null : chartData.length ? (\n    <BarChartV2\n      amounts={{\n        average: instanceSlotData?.average_amount,\n        formattedAverage: formatCurrency(instanceSlotData?.average_amount ?? 0, '0,0.00'),\n      }}\n      color={barColors[0] ?? theme.palette.primary.main}\n      data={chartData}\n      legendPosition=\"top\"\n      monthlyAmountLabel={monthlyAmountLabel}\n      onBarClick={setSelectedIndex}\n      selectedTabIndex={selectedIndex}\n      trendAmountLabel={trendAmountLabel}\n    />\n  ) : (\n    <EmptyBarChart />\n  )\n\n  return (\n    <TransactionDrillDown\n      ariaLabel={instanceSlotData?.ariaLabel}\n      baseTransactions={baseTransactions}\n      heading={headerContent?.heading}\n      icon={headerContent?.icon}\n      onSelectionChange={setSelectedIndex}\n      selectedIndex={selectedIndex}\n      subHeadingText={headerContent?.subHeadingText}\n      tabs={chartData.map((bar) => ({\n        ariaLabel: bar.ariaLabel,\n        label: bar.label,\n      }))}\n      top={chartTop}\n      transactionFilter={transactionFilter}\n    />\n  )\n})\n"],"mappings":"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"}

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/layout.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+import { Theme } from '@mui/material/styles';
+import { Beat, Transaction } from '../../../core';
+import { TransactionFilter } from '../../../core/stores/TransactionStore';
+import { InsightsInstanceSlotData } from '../../../core/types/InsightsInstanceSlotData';
+import { ChartDataSeriesItem } from '../../blocks';
+export interface DrillDownHeader {
+    heading?: string;
+    subHeadingText?: string;
+    icon?: ReactNode;
+}
+export interface DrillDownHeaderContext {
+    htmlTitle?: string;
+    primaryTransaction?: Transaction;
+    categoryName: string;
+    selectedDate?: string | Date;
+}
+export declare const DRILLDOWN_VARIANTS: {
+    readonly TRANSACTION: "bill_amount_not_standard";
+    readonly CATEGORY_SPEND: "category_spend";
+    readonly MONTHLY_SPEND: "monthly_spend_comparison";
+    readonly ACCOUNT_BALANCE: "savings_account_balances_summary";
+    readonly UPCOMING_BILL: "upcoming_bill";
+    readonly SPEND_TO_INCOME: "monthly_spend_to_income";
+    readonly SAVINGS_TO_INCOME: "monthly_savings_to_income";
+    readonly DEBT_TO_INCOME: "monthly_debt_to_income";
+    readonly COST_OF_LIVING: "cost_living_to_income";
+    readonly NON_ESSENTIAL_CATEGORY: "non_essential_category_summary";
+    readonly DEPOSIT_SUMMARY: "monthly_deposit_summary";
+};
+export type DrillDownVariant = (typeof DRILLDOWN_VARIANTS)[keyof typeof DRILLDOWN_VARIANTS];
+/**
+ * One row of the flattened data_series a filterStrategy indexes into: a single-bar monthly total or a
+ * synthesized upcoming-bill bar. Fields are optional because the backend keys each row dynamically
+ * from data_series.names and not every variant carries a guid/category. Double-bar comparison rows
+ * will extend this in the next MR.
+ */
+export type ColorKind = (theme: Theme, categoryGuid?: string) => string[];
+export type HeaderKind = (ctx: DrillDownHeaderContext) => DrillDownHeader;
+/**
+ * Everything a filterStrategy needs to turn the currently-selected bar/sub-tab into a
+ * TransactionFilter. Data-only so strategies stay pure and testable.
+ */
+export interface FilterContext {
+    beat: Beat;
+    beatTransactions: Transaction[];
+    dataSeries: ChartDataSeriesItem[];
+    selectedIndex: number;
+    subIndex: number;
+    isLastTab: boolean;
+    instanceSlotData: InsightsInstanceSlotData;
+    spendCategoryGuids: string[];
+    displayedDateRange: {
+        start: Date;
+        end: Date;
+    };
+}
+export type FilterStrategy = (ctx: FilterContext) => TransactionFilter;
+export interface DrillDownVariantConfig {
+    top: 'singleBar' | 'upcomingBill' | 'doubleBar' | 'tabsOnly';
+    filterStrategy: FilterStrategy;
+    colors: ColorKind;
+    header?: HeaderKind;
+    scope: 'store' | 'beat';
+    filterMode: 'store' | 'local';
+}
+export declare const layout: Partial<Record<DrillDownVariant, DrillDownVariantConfig>>;
+export declare const FALLBACK: DrillDownVariantConfig;

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/layout.es.js

@@ -0,0 +1,118 @@
+import { DATE_FORMATS_INTL as p, formatDate as u } from "../../../core/constants/DateFormats.es.js";
+import { getCategoryColor as y } from "../../../core/utils/CategoryUtil.es.js";
+import { MerchantLogo as N } from "@mxenabled/mxui";
+import { Icon as T } from "@mxenabled/mx-icons";
+import { jsx as g } from "react/jsx-runtime";
+import { endOfMonth as S, startOfMonth as O } from "date-fns";
+var i = {
+  TRANSACTION: "bill_amount_not_standard",
+  CATEGORY_SPEND: "category_spend",
+  MONTHLY_SPEND: "monthly_spend_comparison",
+  ACCOUNT_BALANCE: "savings_account_balances_summary",
+  UPCOMING_BILL: "upcoming_bill",
+  SPEND_TO_INCOME: "monthly_spend_to_income",
+  SAVINGS_TO_INCOME: "monthly_savings_to_income",
+  DEBT_TO_INCOME: "monthly_debt_to_income",
+  COST_OF_LIVING: "cost_living_to_income",
+  NON_ESSENTIAL_CATEGORY: "non_essential_category_summary",
+  DEPOSIT_SUMMARY: "monthly_deposit_summary"
+}, c = (e, t) => t && y(t, e) || e.palette.primary.main, _ = (e) => ({
+  start: O(new Date(e ?? NaN)),
+  end: S(new Date(e ?? NaN))
+}), d = (e) => e?.length ? { accounts: e } : {}, l = ({ beatTransactions: e, dataSeries: t, selectedIndex: n }) => {
+  const o = t[n], r = o?.guid, a = e.find((s) => s.guid === r)?.has_been_split;
+  return {
+    custom: (s) => s.guid === r,
+    dateRange: _(o?.date),
+    showSplits: !a
+  };
+}, I = ({ dataSeries: e, selectedIndex: t, instanceSlotData: n }) => {
+  const o = e[t], r = n.category_guid ?? o?.guid;
+  return {
+    custom: (a) => a.category_guid === r || a.top_level_category_guid === r,
+    dateRange: _(o?.date)
+  };
+}, f = ({ dataSeries: e, selectedIndex: t, spendCategoryGuids: n, instanceSlotData: o }) => {
+  const r = e[t];
+  return {
+    custom: (a) => !!a.top_level_category_guid && n.includes(a.top_level_category_guid),
+    dateRange: _(r?.date),
+    ...d(o.account_guids)
+  };
+}, A = ({ beat: e, dataSeries: t, selectedIndex: n, isLastTab: o, instanceSlotData: r }) => {
+  const a = t[n], { start: s, end: m } = _(a?.date);
+  return {
+    dateRange: {
+      start: s,
+      end: o && e.created_at ? new Date(e.created_at) : m
+    },
+    ...d(r.account_guids)
+  };
+}, L = {
+  [i.TRANSACTION]: {
+    top: "singleBar",
+    scope: "store",
+    filterMode: "store",
+    filterStrategy: l,
+    colors: (e, t) => [c(e, t)],
+    header: (e) => ({
+      heading: e.htmlTitle,
+      subHeadingText: e.primaryTransaction?.description || void 0,
+      icon: /* @__PURE__ */ g(N, {
+        alt: e.primaryTransaction?.description,
+        categoryGuid: e.primaryTransaction?.category_guid || "",
+        merchantGuid: e.primaryTransaction?.merchant_guid || "",
+        size: 16
+      })
+    })
+  },
+  [i.CATEGORY_SPEND]: {
+    top: "singleBar",
+    filterStrategy: I,
+    scope: "store",
+    filterMode: "store",
+    colors: (e, t) => [c(e, t)],
+    header: (e) => ({
+      heading: e.categoryName,
+      subHeadingText: e.selectedDate && u(e.selectedDate, p.MONTH_LONG) || "",
+      icon: /* @__PURE__ */ g(T, {
+        name: "calendar_month",
+        size: 16
+      })
+    })
+  },
+  [i.MONTHLY_SPEND]: {
+    top: "singleBar",
+    filterStrategy: f,
+    scope: "store",
+    filterMode: "store",
+    colors: (e) => [e.palette.chart.chart2 ?? e.palette.primary.main]
+  },
+  [i.ACCOUNT_BALANCE]: {
+    top: "singleBar",
+    filterStrategy: A,
+    scope: "store",
+    filterMode: "store",
+    colors: (e) => [e.palette.success.main]
+  },
+  [i.UPCOMING_BILL]: {
+    top: "upcomingBill",
+    filterStrategy: l,
+    scope: "beat",
+    filterMode: "local",
+    colors: (e, t) => [c(e, t)]
+  }
+}, R = {
+  top: "singleBar",
+  filterStrategy: l,
+  scope: "store",
+  filterMode: "store",
+  colors: (e, t) => [c(e, t)]
+};
+export {
+  i as DRILLDOWN_VARIANTS,
+  R as FALLBACK,
+  L as layout
+};
+
+//# sourceMappingURL=layout.es.js.map

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/layout.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Theme } from '@mui/material/styles'\nimport { endOfMonth, startOfMonth } from 'date-fns'\nimport { getCategoryColor } from '../../../core/utils/CategoryUtil'\nimport type { Beat, Transaction } from '../../../core'\nimport type { TransactionFilter } from '../../../core/stores/TransactionStore'\nimport type { InsightsInstanceSlotData } from '../../../core/types/InsightsInstanceSlotData'\nimport { MerchantLogo } from '@mxenabled/mxui'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { Icon } from '@mxenabled/mx-icons'\nimport { ChartDataSeriesItem } from '../../blocks'\n\nexport interface DrillDownHeader {\n  heading?: string\n  subHeadingText?: string\n  icon?: ReactNode\n}\n\nexport interface DrillDownHeaderContext {\n  htmlTitle?: string\n  primaryTransaction?: Transaction\n  categoryName: string\n  selectedDate?: string | Date\n}\n\nexport const DRILLDOWN_VARIANTS = {\n  TRANSACTION: 'bill_amount_not_standard',\n  CATEGORY_SPEND: 'category_spend',\n  MONTHLY_SPEND: 'monthly_spend_comparison',\n  ACCOUNT_BALANCE: 'savings_account_balances_summary',\n  UPCOMING_BILL: 'upcoming_bill',\n  SPEND_TO_INCOME: 'monthly_spend_to_income',\n  SAVINGS_TO_INCOME: 'monthly_savings_to_income',\n  DEBT_TO_INCOME: 'monthly_debt_to_income',\n  COST_OF_LIVING: 'cost_living_to_income',\n  NON_ESSENTIAL_CATEGORY: 'non_essential_category_summary',\n  DEPOSIT_SUMMARY: 'monthly_deposit_summary',\n} as const\n\nexport type DrillDownVariant = (typeof DRILLDOWN_VARIANTS)[keyof typeof DRILLDOWN_VARIANTS]\n\n/**\n * One row of the flattened data_series a filterStrategy indexes into: a single-bar monthly total or a\n * synthesized upcoming-bill bar. Fields are optional because the backend keys each row dynamically\n * from data_series.names and not every variant carries a guid/category. Double-bar comparison rows\n * will extend this in the next MR.\n */\n\n// Resolves the top-chart palette from the theme (and the beat's category, when relevant).\nexport type ColorKind = (theme: Theme, categoryGuid?: string) => string[]\n\n// Resolves the dynamic drawer header (heading/sub-heading/icon JSX) from the selection context.\nexport type HeaderKind = (ctx: DrillDownHeaderContext) => DrillDownHeader\n\n/**\n * Everything a filterStrategy needs to turn the currently-selected bar/sub-tab into a\n * TransactionFilter. Data-only so strategies stay pure and testable.\n */\nexport interface FilterContext {\n  beat: Beat\n  beatTransactions: Transaction[]\n  dataSeries: ChartDataSeriesItem[]\n  selectedIndex: number\n  subIndex: number\n  isLastTab: boolean\n  instanceSlotData: InsightsInstanceSlotData\n  spendCategoryGuids: string[]\n  displayedDateRange: { start: Date; end: Date }\n}\n\n// Resolves the current selection into a TransactionFilter. Carried on each config row so behavior\n// lives next to the variant it belongs to (no separate strategy registry to chase).\nexport type FilterStrategy = (ctx: FilterContext) => TransactionFilter\n\nexport interface DrillDownVariantConfig {\n  top: 'singleBar' | 'upcomingBill' | 'doubleBar' | 'tabsOnly'\n  filterStrategy: FilterStrategy\n  colors: ColorKind\n  header?: HeaderKind\n  scope: 'store' | 'beat'\n  filterMode: 'store' | 'local'\n}\nconst categoryColor = (theme: Theme, categoryGuid?: string): string =>\n  (categoryGuid && getCategoryColor(categoryGuid, theme)) || theme.palette.primary.main\n\nconst monthRange = (date: string | number | Date | undefined) => ({\n  start: startOfMonth(new Date(date ?? NaN)),\n  end: endOfMonth(new Date(date ?? NaN)),\n})\n\n// Scopes a filter to the beat's accounts when the beat carries account_guids; otherwise leaves\n// accounts unset so the store default (all accounts) applies.\nconst accountScope = (accountGuids?: string[]): Pick<TransactionFilter, 'accounts'> =>\n  accountGuids?.length ? { accounts: accountGuids } : {}\n\n// ── Single-bar filter strategies (this MR) ────────────────────────────────────────────────────\n\n// BillAmountNotStandard / UpcomingBill — the series carries a transaction (TRN) guid; match a single\n// transaction by guid within its month.\nconst transactionGuidStrategy: FilterStrategy = ({\n  beatTransactions,\n  dataSeries,\n  selectedIndex,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const seriesGuid = seriesItem?.guid\n  const hasBeenSplit = beatTransactions.find((trn) => trn.guid === seriesGuid)?.has_been_split\n\n  return {\n    custom: (trn) => trn.guid === seriesGuid,\n    dateRange: monthRange(seriesItem?.date),\n    showSplits: !hasBeenSplit,\n  }\n}\n\n// CategorySpendingV2 — match transactions in the beat's category (or whose top-level category is that\n// guid) within the month.\nconst categoryStrategy: FilterStrategy = ({ dataSeries, selectedIndex, instanceSlotData }) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const categoryGuid = instanceSlotData.category_guid ?? seriesItem?.guid\n\n  return {\n    custom: (trn) =>\n      trn.category_guid === categoryGuid || trn.top_level_category_guid === categoryGuid,\n    dateRange: monthRange(seriesItem?.date),\n  }\n}\n\n// MonthlySpendComparisonV2 — no per-bar guid; show all spending-category transactions\n// (income/transfers/investments excluded via spendCategoryGuids) within the month.\nconst spendCategoriesStrategy: FilterStrategy = ({\n  dataSeries,\n  selectedIndex,\n  spendCategoryGuids,\n  instanceSlotData,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n\n  return {\n    custom: (trn) =>\n      !!trn.top_level_category_guid && spendCategoryGuids.includes(trn.top_level_category_guid),\n    dateRange: monthRange(seriesItem?.date),\n    ...accountScope(instanceSlotData.account_guids),\n  }\n}\n\n// SavingsAccountBalancesSummary — balances, not categorized spend. Filter by month only; the most\n// recent month is capped at the beat's creation time to match the snapshot the balance was computed\n// from.\nconst accountDateStrategy: FilterStrategy = ({\n  beat,\n  dataSeries,\n  selectedIndex,\n  isLastTab,\n  instanceSlotData,\n}) => {\n  const seriesItem = dataSeries[selectedIndex]\n  const { start, end } = monthRange(seriesItem?.date)\n\n  return {\n    dateRange: {\n      start,\n      end: isLastTab && beat.created_at ? new Date(beat.created_at) : end,\n    },\n    ...accountScope(instanceSlotData.account_guids),\n  }\n}\n\n// ── Double-bar + tabsOnly strategies (NEXT MR) ───────────────────────────────────────────────────\n// TODO(next MR — double bar): comparisonAggregatedGuidsStrategy — month × sub-tab membership over the\n// comparison bars' precomputed subGuids. Needs comparisonBars in FilterContext.\n// TODO(next MR — tabsOnly): aggregatedGuids / depositSummary strategies for the donut-drawer beats.\n\nexport const layout: Partial<Record<DrillDownVariant, DrillDownVariantConfig>> = {\n  [DRILLDOWN_VARIANTS.TRANSACTION]: {\n    top: 'singleBar',\n    scope: 'store',\n    filterMode: 'store',\n    filterStrategy: transactionGuidStrategy,\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n    header: (ctx: DrillDownHeaderContext) => {\n      return {\n        heading: ctx.htmlTitle,\n        subHeadingText: ctx.primaryTransaction?.description || undefined,\n        icon: (\n          <MerchantLogo\n            alt={ctx.primaryTransaction?.description}\n            categoryGuid={ctx.primaryTransaction?.category_guid || ''}\n            merchantGuid={ctx.primaryTransaction?.merchant_guid || ''}\n            size={16}\n          />\n        ),\n      }\n    },\n  },\n  [DRILLDOWN_VARIANTS.CATEGORY_SPEND]: {\n    top: 'singleBar',\n    filterStrategy: categoryStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n    header: (ctx: DrillDownHeaderContext) => {\n      return {\n        heading: ctx.categoryName,\n        subHeadingText: ctx.selectedDate\n          ? formatDate(ctx.selectedDate, DATE_FORMATS_INTL.MONTH_LONG) || ''\n          : '',\n        icon: <Icon name=\"calendar_month\" size={16} />,\n      }\n    },\n  },\n  [DRILLDOWN_VARIANTS.MONTHLY_SPEND]: {\n    top: 'singleBar',\n    filterStrategy: spendCategoriesStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme) => [theme.palette.chart.chart2 ?? theme.palette.primary.main],\n  },\n  [DRILLDOWN_VARIANTS.ACCOUNT_BALANCE]: {\n    top: 'singleBar',\n    filterStrategy: accountDateStrategy,\n    scope: 'store',\n    filterMode: 'store',\n    colors: (theme: Theme) => [theme.palette.success.main],\n  },\n  [DRILLDOWN_VARIANTS.UPCOMING_BILL]: {\n    top: 'upcomingBill',\n    filterStrategy: transactionGuidStrategy,\n    scope: 'beat',\n    filterMode: 'local',\n    colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n  },\n\n  // ── NEXT MR: double-bar comparison beats (month tabs + spend/income sub-tabs) ────────────────\n  // [DRILLDOWN_VARIANTS.SPEND_TO_INCOME]:   comparison('spendVsIncome'),\n  // [DRILLDOWN_VARIANTS.SAVINGS_TO_INCOME]: comparison('savingsVsIncome'),\n  // [DRILLDOWN_VARIANTS.DEBT_TO_INCOME]:    comparison('debtVsIncome'),\n  // [DRILLDOWN_VARIANTS.COST_OF_LIVING]:    comparison('costOfLiving'),\n  //\n  // ── NEXT MR: tabsOnly donut-drawer beats (no top chart) ───────────────────────────────────\n  // [DRILLDOWN_VARIANTS.NON_ESSENTIAL_CATEGORY]: { top: 'tabsOnly', ... },\n  // [DRILLDOWN_VARIANTS.DEPOSIT_SUMMARY]:        { top: 'tabsOnly', ... },\n}\n\n// Fallback for a missing/typo'd backend variant: a single-bar, store-scoped drawer filtered by the\n// beat's transaction guid and colored by category, so the drawer still renders instead of crashing.\nexport const FALLBACK: DrillDownVariantConfig = {\n  top: 'singleBar',\n  filterStrategy: transactionGuidStrategy,\n  scope: 'store',\n  filterMode: 'store',\n  colors: (theme: Theme, categoryGuid?: string) => [categoryColor(theme, categoryGuid)],\n}\n"],"mappings":"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"}

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/useTransactionHistory.d.ts

@@ -0,0 +1,15 @@
+import { Beat } from '../../../core';
+import { InsightsInstanceSlotData } from '../../../core/types/InsightsInstanceSlotData';
+export declare const useTransactionHistory: (beat: Beat) => {
+    instanceSlotData: InsightsInstanceSlotData;
+    beatTransactions: import('../../../core').Transaction[];
+    primaryTransaction: import('../../../core').Transaction | undefined;
+    spendCategoryGuids: string[];
+    allAccountGuids: string[];
+    categoryName: string;
+    displayedDateRange: {
+        start: Date;
+        end: Date;
+    };
+    transactionStore: import('../../../core').TransactionStore;
+};

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/useTransactionHistory.es.js

@@ -0,0 +1,20 @@
+import { useAccountStore as i, useCategoryStore as c, useGlobalUiStore as d, useTransactionStore as u } from "../../../common/context/hooks.es.js";
+import { selectTransactionsByGuids as g } from "../../CommonUtils.es.js";
+var p = (e) => {
+  const a = e.insights_payload?.instance_slot_data, o = u(), n = i(), s = c(), { displayedDateRange: r } = d();
+  return {
+    instanceSlotData: a,
+    beatTransactions: g(o.detailedTransactions, a?.transaction_guids),
+    primaryTransaction: o.detailedTransactions.find((t) => t.guid === a?.primary_transaction_guid),
+    spendCategoryGuids: s.spendCategories.map((t) => t.guid),
+    allAccountGuids: n.accounts.map((t) => t.guid),
+    categoryName: s.getCategoryName(a?.category_guid ?? "") || "",
+    displayedDateRange: r,
+    transactionStore: o
+  };
+};
+export {
+  p as useTransactionHistory
+};
+
+//# sourceMappingURL=useTransactionHistory.es.js.map

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/useTransactionHistory.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransactionHistory.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/useTransactionHistory.ts"],"sourcesContent":["import {\n  useAccountStore,\n  useCategoryStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../../common'\nimport type { Beat } from '../../../core'\nimport type { InsightsInstanceSlotData } from '../../../core/types/InsightsInstanceSlotData'\nimport { selectTransactionsByGuids } from '../../CommonUtils'\n\nexport const useTransactionHistory = (beat: Beat) => {\n  const instanceSlotData = beat.insights_payload?.instance_slot_data as InsightsInstanceSlotData\n\n  const transactionStore = useTransactionStore()\n  const accountStore = useAccountStore()\n  const categoryStore = useCategoryStore()\n  const { displayedDateRange } = useGlobalUiStore()\n\n  const beatTransactions = selectTransactionsByGuids(\n    transactionStore.detailedTransactions,\n    instanceSlotData?.transaction_guids,\n  )\n\n  const primaryTransaction = transactionStore.detailedTransactions.find(\n    (transaction) => transaction.guid === instanceSlotData?.primary_transaction_guid,\n  )\n\n  const spendCategoryGuids = categoryStore.spendCategories.map((category) => category.guid)\n  const allAccountGuids = accountStore.accounts.map((account) => account.guid)\n  const categoryName = categoryStore.getCategoryName(instanceSlotData?.category_guid ?? '') || ''\n\n  return {\n    instanceSlotData,\n    beatTransactions,\n    primaryTransaction,\n    spendCategoryGuids,\n    allAccountGuids,\n    categoryName,\n    displayedDateRange,\n    transactionStore,\n  }\n}\n"],"mappings":";;AAUA,IAAa,IAAA,CAAyB,MAAe;AACnD,QAAM,IAAmB,EAAK,kBAAkB,oBAE1C,IAAmB,EAAoB,GACvC,IAAe,EAAgB,GAC/B,IAAgB,EAAiB,GACjC,EAAE,oBAAA,EAAA,IAAuB,EAAiB;AAehD,SAAO;AAAA,IACL,kBAAA;AAAA,IACA,kBAfuB,EACvB,EAAiB,sBACjB,GAAkB,iBAalB;AAAA,IACA,oBAXyB,EAAiB,qBAAqB,KAAA,CAC9D,MAAgB,EAAY,SAAS,GAAkB,wBAUxD;AAAA,IACA,oBARyB,EAAc,gBAAgB,IAAA,CAAK,MAAa,EAAS,IAQlF;AAAA,IACA,iBARsB,EAAa,SAAS,IAAA,CAAK,MAAY,EAAQ,IAQrE;AAAA,IACA,cARmB,EAAc,gBAAgB,GAAkB,iBAAiB,EAAE,KAAK;AAAA,IAS3F,oBAAA;AAAA,IACA,kBAAA;AAAA,EACF;AACF"}

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/utils.d.ts

@@ -0,0 +1,64 @@
+import { ActionDrawerState, DataSeries, GlobalCopy, Transaction } from '../../../core';
+import { DataSet } from '../../../core/types/InsightsInstanceSlotData';
+import { TransactionFilter } from '../../../core/stores/TransactionStore';
+import { buildChartData, ChartDataSeriesItem } from '../../blocks';
+import { DrillDownVariantConfig } from './layout';
+interface DefaultSelectionProp {
+    chartTabCount: number;
+    comparisonTabCount: number;
+    actionDrawer: ActionDrawerState;
+    beatGuid: string;
+}
+export declare const getDrillDownConfig: (variant?: string) => DrillDownVariantConfig;
+export interface FlattenedDataSeries {
+    dataSeries: ChartDataSeriesItem[];
+    chartData: ReturnType<typeof buildChartData>;
+    comparisonBars: DataSet[];
+}
+/**
+ * Shapes the beat's raw data_series into the chart inputs for the variant's top kind. This MR handles
+ * the single-bar family (singleBar / upcomingBill); the double-bar and tabsOnly branches are stubbed
+ * for the next MR so the call site is already wired.
+ */
+interface FlattenedDataSeriesInput {
+    data: DataSeries | undefined;
+    ariaLabel: string;
+    top: DrillDownVariantConfig['top'];
+    beatTransactions: Transaction[];
+    payload: {
+        date?: string;
+        amount?: number;
+    } | undefined;
+}
+export declare const getFlattenedDataSeries: ({ data, ariaLabel, top, beatTransactions, payload, }: FlattenedDataSeriesInput) => FlattenedDataSeries;
+export declare const PROJECTED_BILL_GUID = "TRN-projected-bill";
+export interface UpcomingBillBar {
+    date: string;
+    amount: number;
+    guid: string;
+    category_guid?: string;
+}
+/**
+ * UpcomingBill has no data_series: build the bar series straight from the beat's recurring-bill
+ * transactions plus the synthesized projected bill from payload (mirrors pulse's magicTransactions).
+ * Historical bills are de-duped by date and each keeps its real transaction guid so the guid filter
+ * finds it in the store; the projected bar (cloned category from the latest bill) carries the
+ * PROJECTED_BILL_GUID sentinel. The result is sorted date-ascending so the projected bill lands last.
+ */
+export declare const buildUpcomingBillSeries: (transactions: Transaction[] | undefined, payload: {
+    date?: string;
+    amount?: number;
+} | undefined) => UpcomingBillBar[];
+export declare const getDrawerHeaderTitle: (variant: string | null | undefined, copy: GlobalCopy) => string;
+export declare const toStoreFilter: (filter: TransactionFilter, defaults: {
+    allAccountGuids: string[];
+    displayedDateRange: {
+        start: Date;
+        end: Date;
+    };
+}) => TransactionFilter;
+export declare const getDefaultSelection: ({ chartTabCount, actionDrawer, beatGuid, }: DefaultSelectionProp) => {
+    chartBarIndex: number;
+    subTabIndex: number;
+};
+export {};

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/utils.es.js

@@ -0,0 +1,67 @@
+import { DATE_FORMATS_INTL as u } from "../../../core/constants/DateFormats.es.js";
+import { buildChartData as s, buildDataSeries as g } from "../../blocks/ChartBlocks/BarchartBlock/utils.es.js";
+import { DRILLDOWN_VARIANTS as l, FALLBACK as m, layout as _ } from "./layout.es.js";
+import { format as h, fromUnixTime as D } from "date-fns";
+var I = (t) => _[t] ?? m, A = ({ data: t, ariaLabel: e, top: r, beatTransactions: a, payload: o }) => {
+  if (r === "upcomingBill") {
+    const d = T(a, o);
+    return {
+      dataSeries: d,
+      chartData: s(d, e, u.MONTH_DAY),
+      comparisonBars: []
+    };
+  }
+  const n = [...g(t)].sort((d, i) => !d.date || !i.date ? 0 : new Date(d.date).getTime() - new Date(i.date).getTime());
+  return {
+    dataSeries: n,
+    chartData: s(n, e),
+    comparisonBars: []
+  };
+}, p = "TRN-projected-bill", f = (t) => ({
+  date: h(D(t.date), "yyyy-MM-dd"),
+  amount: t.amount,
+  guid: t.guid,
+  category_guid: t.top_level_category_guid ?? t.category_guid
+}), T = (t = [], e) => {
+  if (!t.length || e?.date == null || e?.amount == null) return [];
+  const r = [...t].sort((i, c) => i.date - c.date), a = /* @__PURE__ */ new Set(), o = [];
+  for (const i of r)
+    a.has(i.date) || (a.add(i.date), o.push(f(i)));
+  const n = r[r.length - 1], d = {
+    date: e.date,
+    amount: e.amount,
+    guid: p,
+    category_guid: n.top_level_category_guid ?? n.category_guid
+  };
+  return [...o, d];
+}, v = (t, e) => {
+  const r = e.insights_feed?.general?.transaction_history_title ?? "", a = e.insights_feed?.transaction_history_block;
+  if (t === l.TRANSACTION) return r;
+  const o = `${t}_drawer_title`;
+  return a?.[o] ?? r;
+}, R = (t, e) => ({
+  accounts: t.accounts ?? e.allAccountGuids,
+  dateRange: t.dateRange ?? e.displayedDateRange,
+  custom: t.custom ?? (() => !0),
+  showSplits: t.showSplits ?? !1
+}), M = ({ chartTabCount: t, actionDrawer: e, beatGuid: r }) => {
+  const a = e.guid === r && e.trigger === "chartBar", o = e.context, n = a ? o?.tabIndex ?? 0 : 0;
+  return a ? {
+    chartBarIndex: Math.min(Math.max(o?.chartBarIndex ?? 0, 0), Math.max(0, t - 1)),
+    subTabIndex: n
+  } : {
+    chartBarIndex: Math.max(0, t - 1),
+    subTabIndex: n
+  };
+};
+export {
+  p as PROJECTED_BILL_GUID,
+  T as buildUpcomingBillSeries,
+  M as getDefaultSelection,
+  v as getDrawerHeaderTitle,
+  I as getDrillDownConfig,
+  A as getFlattenedDataSeries,
+  R as toStoreFilter
+};
+
+//# sourceMappingURL=utils.es.js.map

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/utils.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/utils.ts"],"sourcesContent":["import { format, fromUnixTime } from 'date-fns'\n\nimport type {\n  ActionDrawerState,\n  DataSeries,\n  DrilldownPayload,\n  GlobalCopy,\n  Transaction,\n} from '../../../core'\nimport { DATE_FORMATS_INTL } from '../../../core/constants'\nimport type { DataSet } from '../../../core/types/InsightsInstanceSlotData'\nimport type { TransactionFilter } from '../../../core/stores/TransactionStore'\nimport { buildChartData, buildDataSeries, ChartDataSeriesItem } from '../../blocks'\nimport {\n  layout,\n  FALLBACK,\n  DRILLDOWN_VARIANTS,\n  DrillDownVariant,\n  DrillDownVariantConfig,\n} from './layout'\nimport { TransactionHistoryBlock } from '../../../core/types/localization/InsightsFeedCopy'\n\ninterface DefaultSelectionProp {\n  chartTabCount: number\n  comparisonTabCount: number\n  actionDrawer: ActionDrawerState\n  beatGuid: string\n}\nexport const getDrillDownConfig = (variant?: string): DrillDownVariantConfig =>\n  layout[variant as DrillDownVariant] ?? FALLBACK\n\n// The shaped chart inputs a drill-down needs, derived once from the beat's data_series. `dataSeries`\n// is the flat per-bar source (indexes the filterStrategy); `chartData` feeds the single-bar chart;\n// `comparisonBars` is reserved for the double-bar MR (empty until then).\nexport interface FlattenedDataSeries {\n  dataSeries: ChartDataSeriesItem[]\n  chartData: ReturnType<typeof buildChartData>\n  comparisonBars: DataSet[]\n}\n\n/**\n * Shapes the beat's raw data_series into the chart inputs for the variant's top kind. This MR handles\n * the single-bar family (singleBar / upcomingBill); the double-bar and tabsOnly branches are stubbed\n * for the next MR so the call site is already wired.\n */\ninterface FlattenedDataSeriesInput {\n  data: DataSeries | undefined\n  ariaLabel: string\n  top: DrillDownVariantConfig['top']\n  // UpcomingBill has no data_series; it builds its bars from these instead.\n  beatTransactions: Transaction[]\n  payload: { date?: string; amount?: number } | undefined\n}\n\nexport const getFlattenedDataSeries = ({\n  data,\n  ariaLabel,\n  top,\n  beatTransactions,\n  payload,\n}: FlattenedDataSeriesInput): FlattenedDataSeries => {\n  // UpcomingBill has no backend data_series: synthesize the bars from the beat's recurring-bill\n  // transactions + the projected bill, and label each bar by day (MONTH_DAY) since a bar is one bill.\n  if (top === 'upcomingBill') {\n    const dataSeries = buildUpcomingBillSeries(beatTransactions, payload)\n    return {\n      dataSeries,\n      chartData: buildChartData(dataSeries, ariaLabel, DATE_FORMATS_INTL.MONTH_DAY),\n      comparisonBars: [],\n    }\n  }\n\n  // Single-bar family (THIS MR): the backend sends data_series newest-first, so normalize it\n  // date-ascending here. chartData/tabs and the filter's dataSeries[selectedIndex] indexing both read\n  // this one array, so they stay aligned and the last tab is the most recent month.\n  const dataSeries = [...buildDataSeries(data)].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\n  // NEXT MR — double bar: comparison beats build paired bars instead of chartData.\n  //   if (top === \"doubleBar\") {\n  //     return { dataSeries, chartData: [], comparisonBars: buildComparisonSeries(data, ariaLabel) };\n  //   }\n  //\n  // NEXT MR — tabsOnly: donut-drawer beats render no top chart.\n  //   if (top === \"tabsOnly\") {\n  //     return { dataSeries, chartData: [], comparisonBars: [] };\n  //   }\n\n  return { dataSeries, chartData: buildChartData(dataSeries, ariaLabel), comparisonBars: [] }\n}\n\n// Sentinel guid for the synthesized projected bill. It intentionally matches no real store\n// transaction, so the projected tab's guid filter yields an empty list (projected-bar-only scope).\nexport const PROJECTED_BILL_GUID = 'TRN-projected-bill'\n\n// One bar in the UpcomingBill chart. `date` is 'yyyy-MM-dd' so buildChartData/parseISO can read both\n// historical unix timestamps and the ISO payload date after normalization here.\nexport interface UpcomingBillBar {\n  date: string\n  amount: number\n  guid: string\n  category_guid?: string\n}\n\nconst toUpcomingBillBar = (transaction: Transaction): UpcomingBillBar => ({\n  date: format(fromUnixTime(transaction.date), 'yyyy-MM-dd'),\n  amount: transaction.amount,\n  guid: transaction.guid,\n  category_guid: transaction.top_level_category_guid ?? transaction.category_guid,\n})\n\n/**\n * UpcomingBill has no data_series: build the bar series straight from the beat's recurring-bill\n * transactions plus the synthesized projected bill from payload (mirrors pulse's magicTransactions).\n * Historical bills are de-duped by date and each keeps its real transaction guid so the guid filter\n * finds it in the store; the projected bar (cloned category from the latest bill) carries the\n * PROJECTED_BILL_GUID sentinel. The result is sorted date-ascending so the projected bill lands last.\n */\nexport const buildUpcomingBillSeries = (\n  transactions: Transaction[] = [],\n  payload: { date?: string; amount?: number } | undefined,\n): UpcomingBillBar[] => {\n  if (!transactions.length || payload?.date == null || payload?.amount == null) {\n    return []\n  }\n\n  const sorted = [...transactions].sort((a, b) => a.date - b.date)\n\n  const seenDates = new Set<number>()\n  const history: UpcomingBillBar[] = []\n  for (const transaction of sorted) {\n    if (seenDates.has(transaction.date)) continue\n    seenDates.add(transaction.date)\n    history.push(toUpcomingBillBar(transaction))\n  }\n\n  const latestBill = sorted[sorted.length - 1]\n  const projected: UpcomingBillBar = {\n    date: payload.date,\n    amount: payload.amount,\n    guid: PROJECTED_BILL_GUID,\n    category_guid: latestBill.top_level_category_guid ?? latestBill.category_guid,\n  }\n\n  return [...history, projected]\n}\n\nexport const getDrawerHeaderTitle = (\n  variant: string | null | undefined,\n  copy: GlobalCopy,\n): string => {\n  const transactionHistoryTitle = copy.insights_feed?.general?.transaction_history_title ?? ''\n  const drawerTitleCopy = copy.insights_feed?.transaction_history_block as TransactionHistoryBlock\n\n  if (variant === DRILLDOWN_VARIANTS.TRANSACTION) return transactionHistoryTitle\n\n  // Safely access the drawer title from transaction_history_block\n  const key = `${variant}_drawer_title` as keyof TransactionHistoryBlock\n  return (drawerTitleCopy?.[key] as string) ?? transactionHistoryTitle\n}\n\nexport const toStoreFilter = (\n  filter: TransactionFilter,\n  defaults: { allAccountGuids: string[]; displayedDateRange: { start: Date; end: Date } },\n): TransactionFilter => ({\n  accounts: filter.accounts ?? defaults.allAccountGuids,\n  dateRange: filter.dateRange ?? defaults.displayedDateRange,\n  custom: filter.custom ?? (() => true),\n  showSplits: filter.showSplits ?? false,\n})\n\nexport const getDefaultSelection = ({\n  chartTabCount,\n  actionDrawer,\n  beatGuid,\n}: DefaultSelectionProp): { chartBarIndex: number; subTabIndex: number } => {\n  const openedViaChartBar = actionDrawer.guid === beatGuid && actionDrawer.trigger === 'chartBar'\n\n  // actionDrawer.context is an opaque `unknown` bag; narrow it to the shape the chart blocks write.\n  const context = actionDrawer.context as DrilldownPayload | undefined\n  const subTabIndex = openedViaChartBar ? (context?.tabIndex ?? 0) : 0\n\n  if (openedViaChartBar) {\n    const clamped = Math.min(\n      Math.max(context?.chartBarIndex ?? 0, 0),\n      Math.max(0, chartTabCount - 1),\n    )\n    return { chartBarIndex: clamped, subTabIndex }\n  }\n\n  return { chartBarIndex: Math.max(0, chartTabCount - 1), subTabIndex }\n}\n"],"mappings":";;;;AA4BA,IAAa,IAAA,CAAsB,MACjC,EAAO,CAAA,KAAgC,GAyB5B,IAAA,CAA0B,EACrC,MAAA,GACA,WAAA,GACA,KAAA,GACA,kBAAA,GACA,SAAA,EAAA,MACmD;AAGnD,MAAI,MAAQ,gBAAgB;AAC1B,UAAM,IAAa,EAAwB,GAAkB,CAAO;AACpE,WAAO;AAAA,MACL,YAAA;AAAA,MACA,WAAW,EAAe,GAAY,GAAW,EAAkB,SAAS;AAAA,MAC5E,gBAAgB,CAAC;AAAA,IACnB;AAAA,EACF;AAKA,QAAM,IAAa,CAAC,GAAG,EAAgB,CAAI,CAAC,EAAE,KAAA,CAAM,GAAG,MACjD,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAa,IAExB,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,CAC9D;AAYD,SAAO;AAAA,IAAE,YAAA;AAAA,IAAY,WAAW,EAAe,GAAY,CAAS;AAAA,IAAG,gBAAgB,CAAC;AAAA,EAAE;AAC5F,GAIa,IAAsB,sBAW7B,IAAA,CAAqB,OAA+C;AAAA,EACxE,MAAM,EAAO,EAAa,EAAY,IAAI,GAAG,YAAY;AAAA,EACzD,QAAQ,EAAY;AAAA,EACpB,MAAM,EAAY;AAAA,EAClB,eAAe,EAAY,2BAA2B,EAAY;AACpE,IASa,IAAA,CACX,IAA8B,CAAC,GAC/B,MACsB;AACtB,MAAI,CAAC,EAAa,UAAU,GAAS,QAAQ,QAAQ,GAAS,UAAU,KACtE,QAAO,CAAC;AAGV,QAAM,IAAS,CAAC,GAAG,CAAY,EAAE,KAAA,CAAM,GAAG,MAAM,EAAE,OAAO,EAAE,IAAI,GAEzD,IAAY,oBAAI,IAAY,GAC5B,IAA6B,CAAC;AACpC,aAAW,KAAe;AACxB,IAAI,EAAU,IAAI,EAAY,IAAI,MAClC,EAAU,IAAI,EAAY,IAAI,GAC9B,EAAQ,KAAK,EAAkB,CAAW,CAAC;AAG7C,QAAM,IAAa,EAAO,EAAO,SAAS,CAAA,GACpC,IAA6B;AAAA,IACjC,MAAM,EAAQ;AAAA,IACd,QAAQ,EAAQ;AAAA,IAChB,MAAM;AAAA,IACN,eAAe,EAAW,2BAA2B,EAAW;AAAA,EAClE;AAEA,SAAO,CAAC,GAAG,GAAS,CAAS;AAC/B,GAEa,IAAA,CACX,GACA,MACW;AACX,QAAM,IAA0B,EAAK,eAAe,SAAS,6BAA6B,IACpF,IAAkB,EAAK,eAAe;AAE5C,MAAI,MAAY,EAAmB,YAAa,QAAO;AAGvD,QAAM,IAAM,GAAG,CAAA;AACf,SAAQ,IAAkB,CAAA,KAAmB;AAC/C,GAEa,IAAA,CACX,GACA,OACuB;AAAA,EACvB,UAAU,EAAO,YAAY,EAAS;AAAA,EACtC,WAAW,EAAO,aAAa,EAAS;AAAA,EACxC,QAAQ,EAAO,WAAA,MAAiB;AAAA,EAChC,YAAY,EAAO,cAAc;AACnC,IAEa,IAAA,CAAuB,EAClC,eAAA,GACA,cAAA,GACA,UAAA,EAAA,MAC0E;AAC1E,QAAM,IAAoB,EAAa,SAAS,KAAY,EAAa,YAAY,YAG/E,IAAU,EAAa,SACvB,IAAc,IAAqB,GAAS,YAAY,IAAK;AAEnE,SAAI,IAKK;AAAA,IAAE,eAJO,KAAK,IACnB,KAAK,IAAI,GAAS,iBAAiB,GAAG,CAAC,GACvC,KAAK,IAAI,GAAG,IAAgB,CAAC,CAEP;AAAA,IAAS,aAAA;AAAA,EAAY,IAGxC;AAAA,IAAE,eAAe,KAAK,IAAI,GAAG,IAAgB,CAAC;AAAA,IAAG,aAAA;AAAA,EAAY;AACtE"}

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.d.ts

@@ -1,9 +1,9 @@
 import { Theme } from '@mui/material/styles';
 export declare const getLayoutConfig: (theme: Theme) => {
-    SavingsAccountBalancesSummary: {
+    savings_account_balances_summary: {
         color: string;
     };
-    MonthlySpendComparison: {
+    monthly_spend_comparison: {
         color: string | undefined;
     };
 };

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.es.js

@@ -1,6 +1,6 @@
 var o = (a) => ({
-  SavingsAccountBalancesSummary: { color: a.palette.success.main },
-  MonthlySpendComparison: { color: a.palette.chart.chart2 }
+  savings_account_balances_summary: { color: a.palette.success.main },
+  monthly_spend_comparison: { color: a.palette.chart.chart2 }
 });
 export {
   o as getLayoutConfig

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.es.js.map

@@ -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    SavingsAccountBalancesSummary: {\n      color: theme.palette.success.main,\n    },\n    MonthlySpendComparison: {\n      color: theme.palette.chart.chart2,\n    },\n  }\n}\n"],"mappings":"AACA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,+BAA+B,EAC7B,OAAO,EAAM,QAAQ,QAAQ,KAC/B;AAAA,EACA,wBAAwB,EACtB,OAAO,EAAM,QAAQ,MAAM,OAC7B;AACF"}
+{"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    savings_account_balances_summary: {\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,kCAAkC,EAChC,OAAO,EAAM,QAAQ,QAAQ,KAC/B;AAAA,EACA,0BAA0B,EACxB,OAAO,EAAM,QAAQ,MAAM,OAC7B;AACF"}

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.d.ts

@@ -1,4 +1,5 @@
 import { Theme } from '@mui/material/styles';
+import { formatDate } from '../../../../core/constants';
 import { DataSeries, InstanceSlot } from '../../../../core';
 import { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData';
 export declare const BAR_CHART_VARIANTS: {
@@ -6,11 +7,21 @@ export declare const BAR_CHART_VARIANTS: {
     SAVINGS_ACCOUNT_BALANCES_SUMMARY: string;
     MONTHLY_SPEND_COMPARISON: string;
 };
-export declare const buildDataSeries: (data: DataSeries | undefined) => any[];
-export declare const buildChartData: (dataSeries: any[], ariaLabel: string) => {
+export interface ChartDataSeriesItem {
+    date?: string;
+    amount?: number;
+    guid?: string;
+    label?: string;
+    aggregated_guids?: string[];
+    localized_label?: string;
+    category_guid?: string;
+}
+export declare const buildDataSeries: (data: DataSeries | undefined) => ChartDataSeriesItem[];
+export declare const buildChartData: (dataSeries: ChartDataSeriesItem[], ariaLabel: string, dateFormat?: Parameters<typeof formatDate>[1]) => {
     ariaLabel: string;
+    date: string | null;
     label: string;
-    value: any;
+    value: number;
     formattedAmount: string;
 }[];
 export declare const barChartVariant: (instanceSlot: InstanceSlot, instanceSlotData: InsightsInstanceSlotData, theme: Theme) => {

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js

@@ -1,35 +1,36 @@
-import { buildDynamicCopy as n } from "../../../../core/utils/Localization.es.js";
-import { DATE_FORMATS_INTL as i, formatDate as u } from "../../../../core/constants/DateFormats.es.js";
-import { getCategoryColor as C } from "../../../../core/utils/CategoryUtil.es.js";
+import { buildDynamicCopy as i } from "../../../../core/utils/Localization.es.js";
+import { DATE_FORMATS_INTL as u, formatDate as _ } from "../../../../core/constants/DateFormats.es.js";
+import { getCategoryColor as c } from "../../../../core/utils/CategoryUtil.es.js";
 import { formatCurrency as m } from "../../../../core/utils/NumberFormatting.es.js";
-import { getLayoutConfig as p } from "./layout.es.js";
-import { parseISO as A } from "date-fns/parseISO";
-var O = {
-  CATEGORY_COLOR: "CategoryColor",
-  SAVINGS_ACCOUNT_BALANCES_SUMMARY: "SavingsAccountBalancesSummary",
-  MONTHLY_SPEND_COMPARISON: "MonthlySpendComparison"
-}, l = (t) => t ? t.data ? t.data.map((o) => {
-  const r = {};
-  return t.names?.map((a, e) => {
-    r[a] = o[e];
-  }), r;
-}) : [] : [], y = (t, o) => [...t].sort((r, a) => new Date(r.date).getTime() - new Date(a.date).getTime()).map((r) => {
-  const a = u(A(r.date), i.MONTH_SHORT);
+import { getLayoutConfig as C } from "./layout.es.js";
+import { parseISO as p } from "date-fns/parseISO";
+var l = {
+  CATEGORY_COLOR: "category_color",
+  SAVINGS_ACCOUNT_BALANCES_SUMMARY: "savings_account_balances_summary",
+  MONTHLY_SPEND_COMPARISON: "monthly_spend_comparison"
+}, g = (t) => t ? t.data ? t.data.map((o) => {
+  const e = {};
+  return t.names?.map((r, a) => {
+    e[r] = o[a];
+  }), e;
+}) : [] : [], y = (t, o, e = u.MONTH_SHORT) => [...t].sort((r, a) => !r.date || !a.date ? 0 : new Date(r.date).getTime() - new Date(a.date).getTime()).map((r) => {
+  const a = r.date ? _(p(r.date), e) : r.label ?? "", n = r.amount ?? 0;
   return {
-    ariaLabel: n(o, a, m(r.amount, "0.00")),
+    ariaLabel: i(o, a, m(n, "0.00")),
+    date: r.date ?? null,
     label: a,
-    value: r.amount,
-    formattedAmount: m(r.amount, "0,0")
+    value: n,
+    formattedAmount: m(n, "0,0")
   };
-}), s = (t, o, r) => {
-  const { variant: a } = t, e = p(r);
-  return a === O.CATEGORY_COLOR && o.category_guid ? { color: C(o.category_guid, r) } : { color: e[a]?.color ?? r.palette.primary.main };
+}), R = (t, o, e) => {
+  const { variant: r } = t, a = C(e);
+  return r === l.CATEGORY_COLOR && o.category_guid ? { color: c(o.category_guid, e) } : { color: a[r]?.color ?? e.palette.primary.main };
 };
 export {
-  O as BAR_CHART_VARIANTS,
-  s as barChartVariant,
+  l as BAR_CHART_VARIANTS,
+  R as barChartVariant,
   y as buildChartData,
-  l as buildDataSeries
+  g as buildDataSeries
 };
 
 //# sourceMappingURL=utils.es.js.map

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js.map

@@ -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 type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\nimport { getLayoutConfig } from './layout'\n\nexport const BAR_CHART_VARIANTS = {\n  CATEGORY_COLOR: 'CategoryColor',\n  SAVINGS_ACCOUNT_BALANCES_SUMMARY: 'SavingsAccountBalancesSummary',\n  MONTHLY_SPEND_COMPARISON: 'MonthlySpendComparison',\n}\n\nexport const buildDataSeries = (data: DataSeries | undefined) => {\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 = (dataSeries: any[], ariaLabel: string) => {\n  // Bars render oldest→newest (Jan→Dec, left→right, per Figma). The single-bar backend sends\n  // data_series newest-first, so normalize date-ascending here — the single source of truth for both\n  // the card (BarchartBlock) and the drill-down. This keeps their bar/tab indices aligned, which the\n  // card relies on when it forwards a clicked bar index straight to the drill-down (openActionDrawer).\n  const data = [...dataSeries]\n    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())\n    .map((total) => {\n      const label = formatDate(parseISO(total.date), DATE_FORMATS_INTL.MONTH_SHORT)\n\n      return {\n        ariaLabel: buildDynamicCopy(\n          ariaLabel,\n          label,\n          formatCurrency(total.amount, '0.00'),\n        ) as string,\n        label,\n        value: total.amount,\n        formattedAmount: formatCurrency(total.amount, '0,0'),\n      }\n    })\n\n  return data\n}\n\nexport const barChartVariant = (\n  instanceSlot: InstanceSlot,\n  instanceSlotData: InsightsInstanceSlotData,\n  theme: Theme,\n) => {\n  const { variant } = instanceSlot\n  const barChartLayout = getLayoutConfig(theme)\n  if (variant === BAR_CHART_VARIANTS.CATEGORY_COLOR && instanceSlotData.category_guid) {\n    const categoryColor = getCategoryColor(instanceSlotData.category_guid, theme)\n    return {\n      color: categoryColor,\n    }\n  }\n  return {\n    color:\n      barChartLayout[variant as keyof typeof barChartLayout]?.color ?? theme.palette.primary.main,\n  }\n}\n"],"mappings":";;;;;;AAYA,IAAa,IAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,kCAAkC;AAAA,EAClC,0BAA0B;AAC5B,GAEa,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,CAAkB,GAAmB,MAKnC,CAAC,GAAG,CAAU,EACxB,KAAA,CAAM,GAAG,MAAM,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,EACtE,IAAA,CAAK,MAAU;AACd,QAAM,IAAQ,EAAW,EAAS,EAAM,IAAI,GAAG,EAAkB,WAAW;AAE5E,SAAO;AAAA,IACL,WAAW,EACT,GACA,GACA,EAAe,EAAM,QAAQ,MAAM,CACrC;AAAA,IACA,OAAA;AAAA,IACA,OAAO,EAAM;AAAA,IACb,iBAAiB,EAAe,EAAM,QAAQ,KAAK;AAAA,EACrD;AACF,CAEK,GAGI,IAAA,CACX,GACA,GACA,MACG;AACH,QAAM,EAAE,SAAA,EAAA,IAAY,GACd,IAAiB,EAAgB,CAAK;AAC5C,SAAI,MAAY,EAAmB,kBAAkB,EAAiB,gBAE7D,EACL,OAFoB,EAAiB,EAAiB,eAAe,CAE9D,EACT,IAEK,EACL,OACE,EAAe,CAAA,GAAyC,SAAS,EAAM,QAAQ,QAAQ,KAC3F;AACF"}
+{"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 type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\nimport { getLayoutConfig } from './layout'\n\nexport const BAR_CHART_VARIANTS = {\n  CATEGORY_COLOR: 'category_color',\n  SAVINGS_ACCOUNT_BALANCES_SUMMARY: 'savings_account_balances_summary',\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\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  instanceSlotData: InsightsInstanceSlotData,\n  theme: Theme,\n) => {\n  const { variant } = instanceSlot\n  const barChartLayout = getLayoutConfig(theme)\n  if (variant === BAR_CHART_VARIANTS.CATEGORY_COLOR && instanceSlotData.category_guid) {\n    const categoryColor = getCategoryColor(instanceSlotData.category_guid, theme)\n    return {\n      color: categoryColor,\n    }\n  }\n  return {\n    color:\n      barChartLayout[variant as keyof typeof barChartLayout]?.color ?? theme.palette.primary.main,\n  }\n}\n"],"mappings":";;;;;;AAYA,IAAa,IAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,kCAAkC;AAAA,EAClC,0BAA0B;AAC5B,GAYa,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,EAAiB,gBAE7D,EACL,OAFoB,EAAiB,EAAiB,eAAe,CAE9D,EACT,IAEK,EACL,OACE,EAAe,CAAA,GAAyC,SAAS,EAAM,QAAQ,QAAQ,KAC3F;AACF"}

package/dist/insights-v2/blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js

@@ -4,11 +4,11 @@ import { getDonutChartColors as _ } from "./utils.es.js";
 import { Fragment as b, jsx as e, jsxs as d } from "react/jsx-runtime";
 import { useTheme as f } from "@mui/material/styles";
 var D = ({ payload: r }) => {
-  const u = f(), { instance_slot: n, instance_slot_data: l } = r, { variant: i } = n, { legends: s = [], main: t } = l, m = _(i, l, u), c = s.map((a, p) => ({
+  const u = f(), { instance_slot: n, instance_slot_data: l } = r, { variant: i } = n, { legends: m = [], main: t } = l, s = _(i, l, u), c = m.map((a, p) => ({
     value: a.value,
-    color: m[p],
+    color: s[p],
     label: a.label,
-    labelValue: /* @__PURE__ */ d(b, { children: [/* @__PURE__ */ e("b", { children: o(a.value, a.value_type, "0,0.00") }), a.additional_value && a.additional_value_type ? ` (${o(a.additional_value, a.additional_value_type, "0,0.00")})` : null] })
+    labelValue: /* @__PURE__ */ d(b, { children: [/* @__PURE__ */ e("b", { children: o(a.value, a.value_type ?? "amount", "0,0.00") }), a.additional_value && a.additional_value_type ? ` (${o(a.additional_value, a.additional_value_type, "0,0.00")})` : null] })
   }));
   return /* @__PURE__ */ e(v, {
     centerLabel: t.label,

package/dist/insights-v2/blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles'\n\nimport type { DonutChartBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport { formatValueByType } from '../../../CommonUtils'\n\nimport type { BlockProps } from '../../types'\n\nimport DonutChartV2 from './DonutChart'\nimport { getDonutChartColors } from './utils'\n\nconst DonutChartBlock = ({ payload }: BlockProps<DonutChartBlockData>) => {\n  const theme = useTheme()\n  const { instance_slot, instance_slot_data } = payload\n  const { variant } = instance_slot\n  const { legends = [], main } = instance_slot_data\n  const colors = getDonutChartColors(variant, instance_slot_data, theme)\n\n  const data = legends.map((legend: (typeof legends)[number], index: number) => ({\n    value: legend.value,\n    color: colors[index],\n    label: legend.label,\n    labelValue: (\n      <>\n        <b>{formatValueByType(legend.value, legend.value_type, '0,0.00')}</b>\n        {legend.additional_value && legend.additional_value_type\n          ? ` (${formatValueByType(legend.additional_value, legend.additional_value_type, '0,0.00')})`\n          : null}\n      </>\n    ),\n  }))\n\n  return (\n    <DonutChartV2\n      centerLabel={main.label}\n      centerValue={formatValueByType(Number(main.value), main.value_type, '0,0')}\n      data={data}\n    />\n  )\n}\n\nexport default DonutChartBlock\n"],"mappings":";;;;;AAWA,IAAM,IAAA,CAAmB,EAAE,SAAA,EAAA,MAA+C;AACxE,QAAM,IAAQ,EAAS,GACjB,EAAE,eAAA,GAAe,oBAAA,EAAA,IAAuB,GACxC,EAAE,SAAA,EAAA,IAAY,GACd,EAAE,SAAA,IAAU,CAAC,GAAG,MAAA,EAAA,IAAS,GACzB,IAAS,EAAoB,GAAS,GAAoB,CAAK,GAE/D,IAAO,EAAQ,IAAA,CAAK,GAAkC,OAAmB;AAAA,IAC7E,OAAO,EAAO;AAAA,IACd,OAAO,EAAO,CAAA;AAAA,IACd,OAAO,EAAO;AAAA,IACd,YACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,KAAD,EAAA,UAAI,EAAkB,EAAO,OAAO,EAAO,YAAY,QAAQ,EAAK,CAAA,GACnE,EAAO,oBAAoB,EAAO,wBAC/B,KAAK,EAAkB,EAAO,kBAAkB,EAAO,uBAAuB,QAAQ,CAAA,MACtF,IACJ,EAAA,CAAA;AAAA,EAEN,EAAE;AAEF,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,aAAa,EAAK;AAAA,IAClB,aAAa,EAAkB,OAAO,EAAK,KAAK,GAAG,EAAK,YAAY,KAAK;AAAA,IACnE,MAAA;AAAA,EACP,CAAA;AAEL"}
+{"version":3,"file":"DonutChartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles'\n\nimport type { DonutChartBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport { formatValueByType } from '../../../CommonUtils'\n\nimport type { BlockProps } from '../../types'\n\nimport DonutChartV2 from './DonutChart'\nimport { getDonutChartColors } from './utils'\n\nconst DonutChartBlock = ({ payload }: BlockProps<DonutChartBlockData>) => {\n  const theme = useTheme()\n  const { instance_slot, instance_slot_data } = payload\n  const { variant } = instance_slot\n  const { legends = [], main } = instance_slot_data\n  const colors = getDonutChartColors(variant, instance_slot_data, theme)\n\n  const data = legends.map((legend: (typeof legends)[number], index: number) => ({\n    value: legend.value,\n    color: colors[index],\n    label: legend.label,\n    labelValue: (\n      <>\n        <b>{formatValueByType(legend.value, legend.value_type ?? 'amount', '0,0.00')}</b>\n        {legend.additional_value && legend.additional_value_type\n          ? ` (${formatValueByType(legend.additional_value, legend.additional_value_type, '0,0.00')})`\n          : null}\n      </>\n    ),\n  }))\n\n  return (\n    <DonutChartV2\n      centerLabel={main.label}\n      centerValue={formatValueByType(Number(main.value), main.value_type, '0,0')}\n      data={data}\n    />\n  )\n}\n\nexport default DonutChartBlock\n"],"mappings":";;;;;AAWA,IAAM,IAAA,CAAmB,EAAE,SAAA,EAAA,MAA+C;AACxE,QAAM,IAAQ,EAAS,GACjB,EAAE,eAAA,GAAe,oBAAA,EAAA,IAAuB,GACxC,EAAE,SAAA,EAAA,IAAY,GACd,EAAE,SAAA,IAAU,CAAC,GAAG,MAAA,EAAA,IAAS,GACzB,IAAS,EAAoB,GAAS,GAAoB,CAAK,GAE/D,IAAO,EAAQ,IAAA,CAAK,GAAkC,OAAmB;AAAA,IAC7E,OAAO,EAAO;AAAA,IACd,OAAO,EAAO,CAAA;AAAA,IACd,OAAO,EAAO;AAAA,IACd,YACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,KAAD,EAAA,UAAI,EAAkB,EAAO,OAAO,EAAO,cAAc,UAAU,QAAQ,EAAK,CAAA,GAC/E,EAAO,oBAAoB,EAAO,wBAC/B,KAAK,EAAkB,EAAO,kBAAkB,EAAO,uBAAuB,QAAQ,CAAA,MACtF,IACJ,EAAA,CAAA;AAAA,EAEN,EAAE;AAEF,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,aAAa,EAAK;AAAA,IAClB,aAAa,EAAkB,OAAO,EAAK,KAAK,GAAG,EAAK,YAAY,KAAK;AAAA,IACnE,MAAA;AAAA,EACP,CAAA;AAEL"}