[IAmJSD]

The Purchases savings chart drew period savings (left axis) and cumulative savings (right axis) in one plot with different scales, so line crossings meant nothing, and its ticks read $1500.00. savings-history.ts also had a private formatCurrency that shadowed the shared one, so its stat cards ($12.84K) did not match the rest of the page. This PR plots one series on one compact-currency axis, with a selector to switch to the cumulative view, and removes the local formatter.

Closes #749
Closes #171

What changed

• frontend/src/utils.ts: new formatCompactCurrency(value, digits = 2) on Intl.NumberFormat compact notation ($1.5K, $12.35K, $1.23M), pinned to en-US. Absent values return --, the marker formatCurrency used at the main commit this branch was last merged with (003170d).
• frontend/src/modules/savings-history.ts (43d1d5f):
  • The chart plots one series on one y-axis. "Savings per period" (default) is green bars; "Cumulative savings" is a filled blue line.
  • Y ticks use formatCompactCurrency; tooltips use formatCurrency with 2 decimals. The legend is hidden since there is one series and the axis title names it. The x-axis keeps its period-start anchor with offset: false.
  • The local formatCurrency is deleted. The Period / Avg / Peak stat cards use the shared formatCurrency(v, '$', 2) ($12,840.00, $428.00/mo).
• frontend/src/index.html: a new "Show:" select (#savings-series) picks the series and reloads, with the same no-duplicate-listener pattern as the unit select.
• Tests: utils.test.ts and savings-history.test.ts updated and extended. Main's fix(frontend): savings-analytics summary keys read by the client never exist on the wire #276 wire-key stats test now expects the shared formatter's $1,800.00 and $2,000.00/mo instead of the deleted compact formatter's $1.80K and $2.00K/mo; tests-e2e/savings-history-average.spec.ts expects full figures and switches to Cumulative and back in the narrow-screen test.

Why this approach

The issue suggests "bars on one compact-currency axis; cumulative as a separate small sparkline or a toggle". A toggle reuses the existing chart, needs no new layout and works on narrow screens, so it was chosen over a second sparkline canvas. Stat cards use full figures with cents (not compact) to match the Purchase History cards on the same page (the mismatch reported in #739); the compact form is used for axis ticks only. Deleting the local helper, rather than renaming it as #171 suggests, removes the shadowing and the duplicate formatter at the same time.

Screenshots

Screenshots were taken before this branch was merged with main; before = main at a14dc8f. After is this branch at that time. Both are headless Chromium at 1440x900 against the repo's mocked e2e API, with a 30-day fixture of varied daily savings.

Before	After
(no equivalent on main)

• Period view: on main, period savings (left axis, $1500.00 ticks) and cumulative (right axis) share one plot, and the stat cards read $12.84K / $1.50K/mo. On this branch, period savings are bars on one compact axis ($1.5K), there is a new Show selector, and the stat cards read $12,840.00 / $1,500.00/mo.
• Cumulative view (new): with Show = Cumulative savings, the running total is alone on its own single axis ($15K).

Verification

Run on this branch's head 7927c74c, merged with main 6122fa24:

• npm run lint: 0 errors. Typecheck and build pass.
• Jest: 4099 passed, 1 skipped, 0 failed. savings-history + utils: 188 passed.
• New jest tests: formatCompactCurrency (abbreviation, distinct fractional ticks, absent marker); savings-history "one series on one axis (issue fix(frontend): purchases savings chart uses two y-axes and shadows formatCurrency #749)" (period view is one bar dataset on scales x,y only; cumulative view is one line dataset with the running total and no rate suffix; changing the series reloads once after a double init). The three y1 tests are removed and the tick, tooltip and QA 2.4/2.5 tests now target the single axis.
• Playwright via e2e-local.sh: 231 passed, 0 failed.
• Secrets scan clean.
• Merged with main at 6122fa2; conflicts in savings-history.test.ts resolved, see the merge commits.

Notes for review

• Design choices to weigh in on: a toggle instead of a sparkline for the cumulative series; the "Show:" label and the option text "Savings per period" / "Cumulative savings"; stat cards changing from compact ($12.84K) to full with cents ($12,840.00); the hidden legend.
• The first and last bars are half-clipped at the axis edges, because the x-axis stays anchored to the exact period start and end (QA 2.2).
• Not in scope: the Unit select still does not convert the cumulative series, which is the data defect tracked in chore(frontend/core): medium/low findings from the 2026-07-28 full review #134. The cumulative view drops the rate suffix so it does not claim a unit.
• The chart canvas itself has no pixel test; it is checked in the screenshots.

Overlaps

• chore(frontend): no dark mode or theming path, literals bypass color tokens #699 (chart colors from design tokens), fix(frontend): dashboard charts have no text alternative and layers differ only by shade #744 (chart value summary and data table) and fix(frontend): charts rebuilt on every change; dashboard trend has no stale guard #747 (update charts in place) all edit modules/savings-history.ts and conflict with this branch there.
• fix(frontend): status badges use four shapes and conflicting colors per status #737 edits utils.ts, and fix(frontend): low-severity copy, toast, confirm and stale-state fixes #728, fix(frontend): ARIA tab pattern has no keyboard model and route changes keep focus #730, chore(frontend): replace mixed Unicode glyphs with one SVG icon set #751 and fix(frontend): first-run empty state says no rows match filters with no next step #756 edit index.html; all merge cleanly with this branch.

Note for the UI owner

This changes UI code that @cristim owns. IAmJSD reviewed the before/after screenshots and asked for it to be merged; any design point you disagree with can be a follow-up.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

• Run on-demand review

_{This review includes 6 billable files and costs up to $1.50.}

Or wait 58 minutes for your next included review.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration

• Source mode: Auto
• Repository: LeanerCloud/cloud-commitments-platform
• Branch: main
• File: .coderabbit.yaml
• Commit: 049c617
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: e5b42ea7-e0d2-43a2-88e4-9e9462f91b11

Commits

Reviewing files that changed from the base of the PR and between 049c617 and 55e4e29.

Files selected for processing: 6

• frontend/src/__tests__/savings-history.test.ts
• frontend/src/__tests__/utils.test.ts
• frontend/src/index.html
• frontend/src/modules/savings-history.ts
• frontend/src/utils.ts
• frontend/tests-e2e/savings-history-average.spec.ts

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

[IAmJSD]

Independent review (IAmJSD's agent, fresh context, given only the diff, the issue and the PR text): APPROVE 7927c74cc2517423600083e11684cf79b7694353

Blocking:

• none
  Non-blocking:
• frontend/src/modules/savings-history.ts:546: switching series re-fetches /history/analytics even though the data has not changed; it could re-render from the last response. There is no stale-series race, because getSelectedSeries() is read after the await.
• frontend/src/tests/utils.test.ts:644: the new formatCompactCurrency describe is inserted between the "Regression tests for finding 11-N2" banner (line 642) and the describe it labels (line 664), so the banner now heads the wrong block.
• frontend/src/modules/savings-history.ts:468: this chart's y-axis now uses compact ticks ($1.5K), while the Home charts use full formatCurrency ticks (dashboard.ts:1021,1170). That is two axis conventions in the app; fine for now.
  Attacked: Diffed origin/main...HEAD. Main still has no compact or other currency formatter besides utils.formatCurrency (CURRENCY_DEFAULT_DIGITS=0, so the explicit '$', 2 is needed). The local formatter is fully removed, and no other spec expects $x.xxK. Merge b8aa479: main's fix(frontend): read the savings-analytics summary keys the API sends #1341 wire-key tests are kept and only their two compact expectations changed, to $1,800.00 and $2,000.00/mo. A test-name diff against main shows only the intended y1 removals and renames. fix(frontend): read the savings-analytics summary keys the API sends #1341's server-total-first stats auto-merged and feed the shared formatter. 7927c74 merged cleanly, newest main f2ab673 touches nothing here, and merge-tree is clean. Checked the listener dedup on #savings-series, the null guards (?? 0) and the tooltip suffix for cumulative. Re-ran savings-history and utils jest: 188/188.

[IAmJSD]

Independent review (IAmJSD's agent, fresh context, given only the diff, the issue and the PR text): APPROVE 55e4e29d7d83a21cbad5cc787021bdeee78ea74d

Blocking:

• none
  Non-blocking:
• frontend/src/tests/savings-history.test.ts: the merge's own fix(frontend): dashboard charts have no text alternative and layers differ only by shade #744 changes have no test. The summary text now depends on the series ("Bar chart of savings per period" vs "Line chart of cumulative savings", savings-history.ts:438). In the cumulative view the table still keeps both columns and a "/mo" period header even though suffix is '' (savings-history.ts:442-449). The only fix(frontend): dashboard charts have no text alternative and layers differ only by shade #744 test (around line 176) runs the period view. One cumulative-view case asserting the aria-label prefix and the table headers/last row would lock in the resolution.
• frontend/src/tests/utils.test.ts:642-644: still not fixed from the last review. The "Regression tests for finding 11-N2" banner now heads the new formatCompactCurrency describe instead of the formatCurrency block it labels.
• frontend/src/modules/savings-history.ts:572: switching the series still re-fetches /history/analytics for unchanged data (carried over from the last review). There is no stale-series race, because the series is read after the await.
• This chart's y-axis uses compact ticks ($1.5K), while the Home charts use full formatCurrency ticks. That gives the app two axis conventions; fine for now, since formatCompactCurrency is the only compact money formatter on main (apikeys_usage.ts's /1000 helper is for counts).
  Attacked: Read git diff origin/main...HEAD in full. Compared merge 55e4e29 with both parents. The branch side kept the single series. From main fix(frontend): dashboard charts have no text alternative and layers differ only by shade #744 (fix(frontend): give the savings charts a value summary and data table #1381): setChartSummary, renderChartTable and removeChartTable in the empty and error paths all survive. The table rows are rebuilt from dataPoints with the same convertFromMonthly/?? 0 values, the shared formatCurrency(v,'$',2) (main's "$25.00" test still holds), and the header via unitSuffix(unit). Checked follow-up 33a18e5: absent values now delegate to formatCurrency, so they return NO_VALUE "—", and the test compares the two formatters. The earlier merge c6db683 (fix(frontend): one money formatter and placeholder, right-align money #1376 NO_VALUE, feat(frontend): show a sparse-data state on the savings trend chart #1334, fix(frontend): use skeletons for loading and add a slow-response note #1333) was clean and adds nothing outside the intended hunks. No y1 or "$x.xxK" expectations remain. Listener dedup is intact. merge-tree: chore(frontend): no dark mode or theming path, literals bypass color tokens #699 still conflicts in savings-history.ts, and fix(frontend): charts rebuilt on every change; dashboard trend has no stale guard #747 now auto-merges it. In a scratch worktree, jest savings-history/utils/chart-a11y passed 200/200.

[IAmJSD]

Local verification at 55e4e29d merged onto current main (e59d1438; merge-tree 9d663abe; Linux, Node, headless Chromium):

• This branch's own checks passed at this head: lint, typecheck, build, the full jest suite, the full Playwright e2e suite, and the git-secrets checks (see Verification in the PR body).
• The combined tree of every UI PR in this merge wave (tree 22a093f5, main plus 5 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 4374 passed, 4375 total), and the full Playwright suite (259 passed).
• CI is green on 55e4e29d (CI Success, Run pre-commit hooks).
• The independent review above approves this exact head.
• Nothing was applied to any cloud.

[IAmJSD]

Marked ready and merged by IAmJSD's agent, at IAmJSD's request (IAmJSD reviewed the before/after screenshots; cristim is traveling), after the independent review and local verification above, all at 55e4e29d.