@mx-cartographer/experiences 9.7.100 → 9.7.101

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [9.7.101] - 11-04-2026
+
+- **CHANGED** - Monthly Non-Essential Category Summary's donut card renders through `BaseLayout` on Insights 2.0 (WEC-2213)
+- **CHANGED** - The Cost of Living to Income card now renders on Insights 2.0 (WEC-2212)
+
 ## [9.7.100] - 11-04-2026
 
 - **ADDED** - Weekend Spending Summary's drawers on Insights 2.0: the Transaction List drawer's `help_header` variant and a `help_block` for "Learn More" (WEC-2211)

package/dist/core/types/InsightsInstanceSlotData.d.ts

@@ -19,13 +19,18 @@ export interface BarChartBlockData {
     /** [0] monthly amount, [1] trend. */
     additional_data?: Legends[];
 }
-interface Main {
-    value: string;
+/** The donut's centre: the total and its caption ("$6,306" / "Total"). */
+export interface DonutChartMain {
+    value: string | number;
     value_type: string;
     label: string;
 }
 export interface DonutChartBlockData {
-    main: Main;
+    main: DonutChartMain;
+    /** The category whose colour fills the primary slice (Cost of Living to Income: Housing). */
+    category_guid?: string;
+    /** Legend rows beside the donut: a label, its amount and an optional share ("$5,550.00 (88%)"). */
+    legends?: Legends[];
 }
 export interface LegendProps extends Legends {
     amount: number;

package/dist/core/types/InsightsInstanceSlotData.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsightsInstanceSlotData.es.js","names":[],"sources":["../../../src/core/types/InsightsInstanceSlotData.ts"],"sourcesContent":["import type { DataSeries, Legends, LogoRef } from '../../core'\n\nexport interface InsightsInstanceSlotData\n  extends\n    Partial<BudgetBlockData>,\n    Partial<DonutChartBlockData>,\n    Partial<ImageBlockData>,\n    Partial<AccountBlockData>,\n    Partial<SaveExtraBlockData>,\n    Partial<StepChartBlockData>,\n    Partial<SVGImageBlockData>,\n    Partial<AccountSwitchBlockData>,\n    Partial<TransactionDetailsBlockData>,\n    Partial<CreditUtilizationBlockData>,\n    Partial<MerchantBlockData>,\n    Partial<CommonProps> {}\n\n//when any of the type is used more than one times, we can use the common props\ninterface CommonProps {\n  amount?: number\n  ariaLabel?: string\n  date?: string\n  legends?: Legends[]\n  category_guid?: string\n  data_series?: DataSeries | DataSet[]\n  transaction_guids?: string[]\n  account_guids?: string[]\n  primary_transaction_guid?: string\n}\n\n//BarChart Block: `instance_slot.data` (Insights 2.0)\nexport interface BarChartBlockData {\n  series?: DataSeries\n  category_guid?: string\n  average_amount?: number\n  /** [0] monthly amount, [1] trend. */\n  additional_data?: Legends[]\n}\n\n//DonutChart Block\ninterface Main {\n  value: string\n  value_type: string\n  label: string\n}\nexport interface DonutChartBlockData {\n  main: Main\n}\n\n//DoubleBarChart Block\n// TODO : This has to be revisited again to update the below types based on API response once we have the final shape of the data_series for double bar chart from BE\nexport interface LegendProps extends Legends {\n  amount: number\n  formattedAmount: string\n  label: string\n  color?: string\n}\n\nexport interface DataSet extends DataSeries {\n  ariaLabelComparison: string\n  ariaLabelMain: string\n  comparison: number\n  // The comparison bar's transaction guids (data_series aggregated_guids), for the drawer filter.\n  comparisonGuids?: string[]\n  // The month's 'yyyy-MM-dd' date (the main row's).\n  date?: string\n  formattedComparison: string\n  formattedMain: string\n  label: string\n  main: number\n  // The main bar's transaction guids (data_series aggregated_guids), for the drawer filter.\n  mainGuids?: string[]\n}\n\n//DoubleProgressBar Block\n\n//Image Block\nexport interface ImageBlockData {\n  image: string\n}\n\n//Account Block\nexport interface AccountBlockData {\n  sub_text: string\n  institution_guid?: string\n  institution_name?: string\n  icon_name?: string\n  /** Header bar text (standard card), or the colored category strip label (deposit cards). */\n  header_text?: string\n  // Deposit variants (Unified Deposit, Unified Deposit Emergency Fund, Savings Account Deposit)\n  /** Merchant guid — renders a real merchant logo in the deposit card when present. */\n  merchant_guid?: string\n  /** Merchant display name — logo alt text and the payer line under the amount. */\n  merchant_name?: string\n  /** Secondary label beside the amount, e.g. `On {date}, you saved` or `Balance as of MM/DD/YY`. */\n  label?: string\n}\n\nexport interface SaveExtraBlockData {\n  /** Styled segments `[lead-in, amount digits, trailing copy]`, e.g. `['Save an extra', '100', 'to help your funds grow']`. */\n  primary_text?: string[]\n  /** Styled segments `[projected balance, caption]`, e.g. `['$8,313.87', 'After payday & projected expenses']`. */\n  secondary_text?: string[]\n  /** MakeTransfer drilldown: available balance (both variants). */\n  available_balance?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: average monthly spend. */\n  avg_monthly_spend?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: how long the balance lasts, overlaid on the timeline SVG (e.g. \"2 months, 11 days\"). */\n  time_period?: string\n  /** SAVE_AN_EXTRA_100: upcoming expenses (the \"Expenses\" figure). */\n  upcoming_expenses?: number\n  /** SAVE_AN_EXTRA_100: total remaining after expenses. */\n  total_remaining?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: date for the \"Your available balances as of {date}\" line. */\n  date?: string\n}\n\n// AccountSwitch Block. State comes from `instance_slot.variant`, not a data flag.\nexport interface AccountSwitchBlockData {\n  discovered_institution_guid: string\n  discovered_institution_name: string\n  held_institution_guid: string\n  held_institution_name: string\n}\n\n// AccountSwitch Block: `instance_slot.data` (Insights 2.0, Discovered Accounts V2). Each slot is\n// optional: tupac omits `to_logo` when the user holds no FI-managed account. `logo` is the compact\n// card's (micro, notification) discovered institution.\nexport interface AccountSwitchBlockV2Data {\n  from_logo?: LogoRef\n  to_logo?: LogoRef\n  logo?: LogoRef\n}\n\n// StepChart Block\nexport interface StepChartBlockData {\n  completed_steps: number\n  label_1: string\n  label_2?: string\n}\n\n//Budgets Blocks\nexport enum BudgetTierType {\n  LOW_BUDGET_TIER = 'LOW',\n  MEDIUM_BUDGET_TIER = 'MEDIUM',\n  OFF_TRACK_BUDGET_TIER = 'OFF_TRACK',\n}\n\nexport type BudgetTierValue = `${BudgetTierType}`\n\nexport interface BudgetLocalizedPayload {\n  primary_text?: string\n  amount_left_label?: string\n  spent_label?: string\n  budgeted_label?: string\n}\n\nexport interface BudgetBlockData {\n  budget_percent: number\n  budget_tier: BudgetTierValue\n  category_guid?: string\n  merchant_guid?: string\n  spent_amount: number\n  budgeted_amount: number\n  localized_payload: BudgetLocalizedPayload\n}\n\nexport interface SVGImageBlockData {\n  isCIBC?: boolean\n}\n\n// TransactionDetails Action Block\n// The drawer's subject is `InsightsPayload.primary_transaction_guid`; only action configuration\n// lives here.\nexport interface TransactionDetailsBlockData {\n  /** `TopActions` member names, e.g. `['Category', 'Date', 'Memo']`. Omit for the defaults. */\n  top_actions?: string[]\n  /** `BottomActions` member names, e.g. `['MerchantBudget', 'HideTransaction']`. Omit for defaults. */\n  bottom_actions?: string[]\n}\n\n// Credit Utilization action block. The per-card rows are the beat's `data_series` table\n// (`guid`, `label`, `amount`, `total_amount`, `percentage`), carried on `CommonProps.data_series`.\nexport interface CreditUtilizationBlockData {\n  accounts_balance_sum?: number\n  accounts_credit_limit_sum?: number\n  credit_utilization_percentage?: number\n}\n\n// Merchant block `instance_slot.data`; `primary_text` is ditto's name.\nexport interface MerchantBlockData {\n  merchant_name?: string\n  logo?: LogoRef\n  amount?: number\n  /** Pre-localized eyebrow; ditto sends `header_text`. */\n  date?: string\n  header_text?: string\n  status_text?: string\n  logos?: LogoRef[]\n}\n"],"mappings":"AA8IA,IAAY,IAAL,0BAAA,GAAA;AACL,SAAA,EAAA,kBAAA,OACA,EAAA,qBAAA,UACA,EAAA,wBAAA;AACF,GAAA,CAAA,CAAA"}
+{"version":3,"file":"InsightsInstanceSlotData.es.js","names":[],"sources":["../../../src/core/types/InsightsInstanceSlotData.ts"],"sourcesContent":["import type { DataSeries, Legends, LogoRef } from '../../core'\n\nexport interface InsightsInstanceSlotData\n  extends\n    Partial<BudgetBlockData>,\n    Partial<DonutChartBlockData>,\n    Partial<ImageBlockData>,\n    Partial<AccountBlockData>,\n    Partial<SaveExtraBlockData>,\n    Partial<StepChartBlockData>,\n    Partial<SVGImageBlockData>,\n    Partial<AccountSwitchBlockData>,\n    Partial<TransactionDetailsBlockData>,\n    Partial<CreditUtilizationBlockData>,\n    Partial<MerchantBlockData>,\n    Partial<CommonProps> {}\n\n//when any of the type is used more than one times, we can use the common props\ninterface CommonProps {\n  amount?: number\n  ariaLabel?: string\n  date?: string\n  legends?: Legends[]\n  category_guid?: string\n  data_series?: DataSeries | DataSet[]\n  transaction_guids?: string[]\n  account_guids?: string[]\n  primary_transaction_guid?: string\n}\n\n//BarChart Block: `instance_slot.data` (Insights 2.0)\nexport interface BarChartBlockData {\n  series?: DataSeries\n  category_guid?: string\n  average_amount?: number\n  /** [0] monthly amount, [1] trend. */\n  additional_data?: Legends[]\n}\n\n//DonutChart Block: `instance_slot.data` (Insights 2.0) — the same shape V1 sent as `instance_slot_data`.\n/** The donut's centre: the total and its caption (\"$6,306\" / \"Total\"). */\nexport interface DonutChartMain {\n  value: string | number\n  value_type: string\n  label: string\n}\nexport interface DonutChartBlockData {\n  main: DonutChartMain\n  /** The category whose colour fills the primary slice (Cost of Living to Income: Housing). */\n  category_guid?: string\n  /** Legend rows beside the donut: a label, its amount and an optional share (\"$5,550.00 (88%)\"). */\n  legends?: Legends[]\n}\n\n//DoubleBarChart Block\n// TODO : This has to be revisited again to update the below types based on API response once we have the final shape of the data_series for double bar chart from BE\nexport interface LegendProps extends Legends {\n  amount: number\n  formattedAmount: string\n  label: string\n  color?: string\n}\n\nexport interface DataSet extends DataSeries {\n  ariaLabelComparison: string\n  ariaLabelMain: string\n  comparison: number\n  // The comparison bar's transaction guids (data_series aggregated_guids), for the drawer filter.\n  comparisonGuids?: string[]\n  // The month's 'yyyy-MM-dd' date (the main row's).\n  date?: string\n  formattedComparison: string\n  formattedMain: string\n  label: string\n  main: number\n  // The main bar's transaction guids (data_series aggregated_guids), for the drawer filter.\n  mainGuids?: string[]\n}\n\n//DoubleProgressBar Block\n\n//Image Block\nexport interface ImageBlockData {\n  image: string\n}\n\n//Account Block\nexport interface AccountBlockData {\n  sub_text: string\n  institution_guid?: string\n  institution_name?: string\n  icon_name?: string\n  /** Header bar text (standard card), or the colored category strip label (deposit cards). */\n  header_text?: string\n  // Deposit variants (Unified Deposit, Unified Deposit Emergency Fund, Savings Account Deposit)\n  /** Merchant guid — renders a real merchant logo in the deposit card when present. */\n  merchant_guid?: string\n  /** Merchant display name — logo alt text and the payer line under the amount. */\n  merchant_name?: string\n  /** Secondary label beside the amount, e.g. `On {date}, you saved` or `Balance as of MM/DD/YY`. */\n  label?: string\n}\n\nexport interface SaveExtraBlockData {\n  /** Styled segments `[lead-in, amount digits, trailing copy]`, e.g. `['Save an extra', '100', 'to help your funds grow']`. */\n  primary_text?: string[]\n  /** Styled segments `[projected balance, caption]`, e.g. `['$8,313.87', 'After payday & projected expenses']`. */\n  secondary_text?: string[]\n  /** MakeTransfer drilldown: available balance (both variants). */\n  available_balance?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: average monthly spend. */\n  avg_monthly_spend?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: how long the balance lasts, overlaid on the timeline SVG (e.g. \"2 months, 11 days\"). */\n  time_period?: string\n  /** SAVE_AN_EXTRA_100: upcoming expenses (the \"Expenses\" figure). */\n  upcoming_expenses?: number\n  /** SAVE_AN_EXTRA_100: total remaining after expenses. */\n  total_remaining?: number\n  /** SAVE_ENOUGH_TO_LIVE_ON: date for the \"Your available balances as of {date}\" line. */\n  date?: string\n}\n\n// AccountSwitch Block. State comes from `instance_slot.variant`, not a data flag.\nexport interface AccountSwitchBlockData {\n  discovered_institution_guid: string\n  discovered_institution_name: string\n  held_institution_guid: string\n  held_institution_name: string\n}\n\n// AccountSwitch Block: `instance_slot.data` (Insights 2.0, Discovered Accounts V2). Each slot is\n// optional: tupac omits `to_logo` when the user holds no FI-managed account. `logo` is the compact\n// card's (micro, notification) discovered institution.\nexport interface AccountSwitchBlockV2Data {\n  from_logo?: LogoRef\n  to_logo?: LogoRef\n  logo?: LogoRef\n}\n\n// StepChart Block\nexport interface StepChartBlockData {\n  completed_steps: number\n  label_1: string\n  label_2?: string\n}\n\n//Budgets Blocks\nexport enum BudgetTierType {\n  LOW_BUDGET_TIER = 'LOW',\n  MEDIUM_BUDGET_TIER = 'MEDIUM',\n  OFF_TRACK_BUDGET_TIER = 'OFF_TRACK',\n}\n\nexport type BudgetTierValue = `${BudgetTierType}`\n\nexport interface BudgetLocalizedPayload {\n  primary_text?: string\n  amount_left_label?: string\n  spent_label?: string\n  budgeted_label?: string\n}\n\nexport interface BudgetBlockData {\n  budget_percent: number\n  budget_tier: BudgetTierValue\n  category_guid?: string\n  merchant_guid?: string\n  spent_amount: number\n  budgeted_amount: number\n  localized_payload: BudgetLocalizedPayload\n}\n\nexport interface SVGImageBlockData {\n  isCIBC?: boolean\n}\n\n// TransactionDetails Action Block\n// The drawer's subject is `InsightsPayload.primary_transaction_guid`; only action configuration\n// lives here.\nexport interface TransactionDetailsBlockData {\n  /** `TopActions` member names, e.g. `['Category', 'Date', 'Memo']`. Omit for the defaults. */\n  top_actions?: string[]\n  /** `BottomActions` member names, e.g. `['MerchantBudget', 'HideTransaction']`. Omit for defaults. */\n  bottom_actions?: string[]\n}\n\n// Credit Utilization action block. The per-card rows are the beat's `data_series` table\n// (`guid`, `label`, `amount`, `total_amount`, `percentage`), carried on `CommonProps.data_series`.\nexport interface CreditUtilizationBlockData {\n  accounts_balance_sum?: number\n  accounts_credit_limit_sum?: number\n  credit_utilization_percentage?: number\n}\n\n// Merchant block `instance_slot.data`; `primary_text` is ditto's name.\nexport interface MerchantBlockData {\n  merchant_name?: string\n  logo?: LogoRef\n  amount?: number\n  /** Pre-localized eyebrow; ditto sends `header_text`. */\n  date?: string\n  header_text?: string\n  status_text?: string\n  logos?: LogoRef[]\n}\n"],"mappings":"AAmJA,IAAY,IAAL,0BAAA,GAAA;AACL,SAAA,EAAA,kBAAA,OACA,EAAA,qBAAA,UACA,EAAA,wBAAA;AACF,GAAA,CAAA,CAAA"}

package/dist/insights-v2/blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.d.ts

@@ -1,4 +1,11 @@
 import { DonutChartBlockData } from '../../../../core/types/InsightsInstanceSlotData';
 import { BlockProps } from '../../types';
-declare const DonutChartBlock: ({ payload }: BlockProps<DonutChartBlockData>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * `donut_chart_block`: a donut with a centre total and a two-row legend.
+ *
+ * Reads `main` and `legends` from `instance_slot.data` (the Insights 2.0 envelope; ditto variant
+ * `deposit_summary` for Monthly Deposit Summary), falling back to the V1 `instance_slot_data` for
+ * payloads that still carry the facts there. The palette comes from `./layout.ts` by variant.
+ */
+declare const DonutChartBlock: ({ payload }: BlockProps<Partial<DonutChartBlockData>>) => import("react/jsx-runtime").JSX.Element | null;
 export default DonutChartBlock;

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

@@ -1,23 +1,30 @@
-import { formatValueByType as o } from "../../../CommonUtils.es.js";
+import { formatValueByType as e } from "../../../CommonUtils.es.js";
 import v from "./DonutChart.es.js";
-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: m = [], main: t } = l, s = _(i, l, u), c = m.map((a, p) => ({
+import { getDonutChartColors as y } from "./utils.es.js";
+import { Fragment as f, jsx as i, jsxs as b } from "react/jsx-runtime";
+import { useTheme as h } from "@mui/material/styles";
+var j = ({ payload: s }) => {
+  const c = h(), { instance_slot: l, instance_slot_data: r } = s, { variant: m } = l, n = l.data, t = n?.main ? n : r ?? {}, _ = Array.isArray(t.legends) ? t.legends : [], { main: o } = t;
+  if (!o) return null;
+  const u = y(m, {
+    ...t,
+    category_guid: t.category_guid ?? r?.category_guid
+  }, c);
+  if (!u) return null;
+  const d = _.map((a, p) => ({
     value: a.value,
-    color: s[p],
+    color: u[p],
     label: a.label,
-    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] })
+    labelValue: /* @__PURE__ */ b(f, { children: [/* @__PURE__ */ i("b", { children: e(a.value, a.value_type ?? "amount", "0,0.00") }), a.additional_value && a.additional_value_type ? ` (${e(a.additional_value, a.additional_value_type, "0,0.00")})` : null] })
   }));
-  return /* @__PURE__ */ e(v, {
-    centerLabel: t.label,
-    centerValue: o(Number(t.value), t.value_type, "0,0"),
-    data: c
+  return /* @__PURE__ */ i(v, {
+    centerLabel: o.label,
+    centerValue: e(Number(o.value), o.value_type, "0,0"),
+    data: d
   });
 };
 export {
-  D as default
+  j as default
 };
 
 //# sourceMappingURL=DonutChartBlock.es.js.map

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 ?? '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"}
+{"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\n/**\n * `donut_chart_block`: a donut with a centre total and a two-row legend.\n *\n * Reads `main` and `legends` from `instance_slot.data` (the Insights 2.0 envelope; ditto variant\n * `deposit_summary` for Monthly Deposit Summary), falling back to the V1 `instance_slot_data` for\n * payloads that still carry the facts there. The palette comes from `./layout.ts` by variant.\n */\nconst DonutChartBlock = ({ payload }: BlockProps<Partial<DonutChartBlockData>>) => {\n  const theme = useTheme()\n  const { instance_slot, instance_slot_data } = payload\n  const { variant } = instance_slot\n  // V2 contract first (`instance_slot.data`), V1 `instance_slot_data` as the legacy alias.\n  const slotData = instance_slot.data as Partial<DonutChartBlockData> | undefined\n  const blockData: Partial<DonutChartBlockData> = slotData?.main\n    ? slotData\n    : (instance_slot_data ?? {})\n  const legends = Array.isArray(blockData.legends) ? blockData.legends : []\n  const { main } = blockData\n\n  if (!main) return null\n\n  const colors = getDonutChartColors(\n    variant,\n    { ...blockData, category_guid: blockData.category_guid ?? instance_slot_data?.category_guid },\n    theme,\n  )\n\n  if (!colors) return null\n\n  const data = legends.map((legend, index) => ({\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":";;;;;AAkBA,IAAM,IAAA,CAAmB,EAAE,SAAA,EAAA,MAAwD;AACjF,QAAM,IAAQ,EAAS,GACjB,EAAE,eAAA,GAAe,oBAAA,EAAA,IAAuB,GACxC,EAAE,SAAA,EAAA,IAAY,GAEd,IAAW,EAAc,MACzB,IAA0C,GAAU,OACtD,IACC,KAAsB,CAAC,GACtB,IAAU,MAAM,QAAQ,EAAU,OAAO,IAAI,EAAU,UAAU,CAAC,GAClE,EAAE,MAAA,EAAA,IAAS;AAEjB,MAAI,CAAC,EAAM,QAAO;AAElB,QAAM,IAAS,EACb,GACA;AAAA,IAAE,GAAG;AAAA,IAAW,eAAe,EAAU,iBAAiB,GAAoB;AAAA,EAAc,GAC5F,CACF;AAEA,MAAI,CAAC,EAAQ,QAAO;AAEpB,QAAM,IAAO,EAAQ,IAAA,CAAK,GAAQ,OAAW;AAAA,IAC3C,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"}

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

@@ -1,3 +1,3 @@
 import { Theme } from '@mui/material/styles';
 import { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData';
-export declare const getDonutChartColors: (variant: string | null | undefined, blockData: InsightsInstanceSlotData, theme: Theme) => [string, string];
+export declare const getDonutChartColors: (variant: string | null | undefined, blockData: InsightsInstanceSlotData, theme: Theme) => [string, string] | null;

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

@@ -1,11 +1,11 @@
 import { getCategoryColor as a } from "../../../../core/utils/CategoryUtil.es.js";
 import { getLayoutConfig as t } from "./layout.es.js";
-var g = (n, i, o) => {
+var u = (n, i, o) => {
   const r = t(o)[n];
-  return "dynamicPrimary" in r && r.dynamicPrimary === "creditUtilization" ? [Number(i.main?.value ?? 0) > 30 ? o.palette.error.main : o.palette.warning.main, r.secondaryColor] : "secondaryColor" in r ? [a(i.category_guid ?? "", o), r.secondaryColor] : r.colors;
+  return r ? "dynamicPrimary" in r && r.dynamicPrimary === "creditUtilization" ? [Number(i.main?.value ?? 0) > 30 ? o.palette.error.main : o.palette.warning.main, r.secondaryColor] : "secondaryColor" in r ? [a(i.category_guid ?? "", o), r.secondaryColor] : r.colors : null;
 };
 export {
-  g as getDonutChartColors
+  u as getDonutChartColors
 };
 
 //# sourceMappingURL=utils.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DonutChartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { getLayoutConfig } from './layout'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\n\nexport const getDonutChartColors = (\n  variant: string | null | undefined,\n  blockData: InsightsInstanceSlotData,\n  theme: Theme,\n): [string, string] => {\n  const layouts = getLayoutConfig(theme)\n  const variantConfig = layouts[variant as keyof ReturnType<typeof getLayoutConfig>] as\n    | { dynamicPrimary: string; secondaryColor: string }\n    | { secondaryColor: string }\n    | { colors: [string, string] }\n\n  if ('dynamicPrimary' in variantConfig && variantConfig.dynamicPrimary === 'creditUtilization') {\n    const utilization = Number(blockData.main?.value ?? 0)\n    const primaryColor = utilization > 30 ? theme.palette.error.main : theme.palette.warning.main\n    return [primaryColor, variantConfig.secondaryColor]\n  }\n\n  if ('secondaryColor' in variantConfig) {\n    const categoryColor = getCategoryColor(blockData.category_guid ?? '', theme)\n    return [categoryColor, variantConfig.secondaryColor]\n  }\n\n  return variantConfig.colors\n}\n"],"mappings":";;AAKA,IAAa,IAAA,CACX,GACA,GACA,MACqB;AAErB,QAAM,IADU,EAAgB,CACV,EAAQ,CAAA;AAK9B,SAAI,oBAAoB,KAAiB,EAAc,mBAAmB,sBAGjE,CAFa,OAAO,EAAU,MAAM,SAAS,CAC/B,IAAc,KAAK,EAAM,QAAQ,MAAM,OAAO,EAAM,QAAQ,QAAQ,MACnE,EAAc,cAAc,IAGhD,oBAAoB,IAEf,CADe,EAAiB,EAAU,iBAAiB,IAAI,CAC9D,GAAe,EAAc,cAAc,IAG9C,EAAc;AACvB"}
+{"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DonutChartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { getLayoutConfig } from './layout'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\n\nexport const getDonutChartColors = (\n  variant: string | null | undefined,\n  blockData: InsightsInstanceSlotData,\n  theme: Theme,\n): [string, string] | null => {\n  const layouts = getLayoutConfig(theme)\n  const variantConfig = layouts[variant as keyof ReturnType<typeof getLayoutConfig>] as\n    | { dynamicPrimary: string; secondaryColor: string }\n    | { secondaryColor: string }\n    | { colors: [string, string] }\n    | undefined\n\n  if (!variantConfig) return null\n\n  if ('dynamicPrimary' in variantConfig && variantConfig.dynamicPrimary === 'creditUtilization') {\n    const utilization = Number(blockData.main?.value ?? 0)\n    const primaryColor = utilization > 30 ? theme.palette.error.main : theme.palette.warning.main\n    return [primaryColor, variantConfig.secondaryColor]\n  }\n\n  if ('secondaryColor' in variantConfig) {\n    const categoryColor = getCategoryColor(blockData.category_guid ?? '', theme)\n    return [categoryColor, variantConfig.secondaryColor]\n  }\n\n  return variantConfig.colors\n}\n"],"mappings":";;AAKA,IAAa,IAAA,CACX,GACA,GACA,MAC4B;AAE5B,QAAM,IADU,EAAgB,CACV,EAAQ,CAAA;AAM9B,SAAK,IAED,oBAAoB,KAAiB,EAAc,mBAAmB,sBAGjE,CAFa,OAAO,EAAU,MAAM,SAAS,CAC/B,IAAc,KAAK,EAAM,QAAQ,MAAM,OAAO,EAAM,QAAQ,QAAQ,MACnE,EAAc,cAAc,IAGhD,oBAAoB,IAEf,CADe,EAAiB,EAAU,iBAAiB,IAAI,CAC9D,GAAe,EAAc,cAAc,IAG9C,EAAc,SAbM;AAc7B"}

package/package.json

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