[IAmJSD]

The Home "Savings over time" and per-service charts and the Purchases savings-history chart were destroyed and recreated on every range, filter, period or unit change, so the grow-from-zero animation replayed each time. The Home trend loader also had no request-generation guard: clicking 7d then 30d could let the slower 7d response paint last, under the highlighted 30d button. This PR updates those charts in place and ignores superseded trend responses.

Closes #747

What changed

• frontend/src/modules/chart-utils.ts: new upsertChart(existing, canvas, config). If the existing instance still draws on the same canvas, it sets data/options and calls update('none'); otherwise it destroys any stale instance and creates a new one.
• frontend/src/dashboard.ts: both Home charts use upsertChart (the per-service chart now destroys only in its empty state). loadSavingsTrendChart takes a generation number per call and returns early after the await (and in the catch) when a newer call has started.
• frontend/src/modules/savings-history.ts: the Purchases chart uses upsertChart.
• The ladder timeline item listed in the issue was already fixed on main by 6c4be959 (fix(ladder): show cumulative commitment as a stepped stacked chart #823), which updates that chart in place (frontend/src/ladder-timeline.ts:97).
• Tests: new __tests__/chart-upsert.test.ts and 4 new cases in __tests__/dashboard.test.ts.

Why this approach

Updating in place is what the issue suggests and keeps one Chart instance per canvas; the canvas-identity check keeps it safe if a view re-renders its DOM. update('none') skips the transition entirely; a short tween from old to new values would also stop the replay but isn't what the issue asks for. The generation counter copies the existing riexchange.ts pattern rather than adding AbortController plumbing to the API client.

Screenshots

Before is main (a14dc8f2), after is this branch. Both are headless Chromium at 1440x900 against the repo's mocked e2e API.

Before	After

• Stale response: click 7d (slow response), then 30d. On main the 30d button is highlighted but the chart shows the 7-day data ($0-$150, hourly Oct 16-23) that arrived last. After, the stale 7d response is ignored and the chart shows the 30-day data ($900, Sep 23-Oct 23).
• 150 ms after clicking 30d: on main the rebuilt chart is still growing from zero (the line ends near $700 of $900). After, it is already fully drawn at $900. This pair depends on animation timing; the stale-response pair is the deterministic one.

Verification

Run on this branch's head a18ba161 on top of main a14dc8f2:

• Lint: 0 errors (existing warnings). Typecheck and build pass.
• Jest: 110 suites, 3493 passed, 1 skipped. New: chart-upsert.test.ts (3: first render creates; same canvas updates in place with 'none' and no destroy; replaced canvas recreates) and 4 in dashboard.test.ts (an older trend response landing last is ignored; an older request failing last doesn't show the error state; a second trend load updates in place; a per-service re-render updates in place while the empty state still destroys). New tests pass with --randomize.
• Playwright via e2e-local.sh: 157 passed. No new spec: the race and the animation are asserted in jest with deferred promises and a Chart mock, and the screenshots reproduce both in the real build.
• git-secrets scan clean (planted key flagged); scripts/test-git-secrets-allowlist.sh: 137 pass, 0 fail.

Notes for review

• With update('none'), range and filter changes now redraw instantly with no animation at all; the first render still animates.
• The Purchases savings-history loader has the same missing request guard (period/refresh clicks). The issue only names the Home trend, so it is left out here; chore(frontend/core): medium/low findings from the 2026-07-28 full review #134 tracks other missing guards.

Overlaps

• fix(frontend): dashboard charts have no text alternative and layers differ only by shade #744 adds the chart text alternative right next to the same chart-creation lines in dashboard.ts and savings-history.ts. Expect small conflicts; after combining, the table/label code should stay before upsertChart.
• fix(frontend): "Potential savings range per service" legend and bar-color encoding mismatch #189 edits the per-service datasets inside the same config object.
• fix(frontend): Potential Monthly Savings differs between Home and Opportunities for the same recommendations #180 only touches loadDashboard/renderDashboardSummary.

Those PRs will be opened alongside this one and merged in sequence, with conflicts resolved on the later 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]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

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

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