[IAmJSD]

With a single data point (for example one ~$1.10 purchase), the Home "Savings over time" chart drew one tiny dot in the corner of an otherwise blank 90-day canvas, which looked broken rather than "just started". This PR replaces the canvas with a short message that still shows the one value and its date when there are fewer than two points.

Closes #188

What changed

• frontend/src/modules/chart-utils.ts: new MIN_TREND_POINTS = 2 and formatSparseTrendMessage(point).
• frontend/src/dashboard.ts (loadSavingsTrendChart): with fewer than MIN_TREND_POINTS points, the canvas is hidden, any old chart is destroyed, and the existing #savings-trend-empty slot (same muted card style and height as the no-data state) shows "Not enough history yet to show a trend. So far: $1.10 in cumulative savings as of Oct 20, 2026." Two or more points render exactly as before. The function's doc comment is updated.
• Tests: __tests__/chart-utils.test.ts, new cases in __tests__/dashboard.test.ts, and tests-e2e/savings-trend-sparse.spec.ts. Four existing single-point chart tests now use two points.

Why this approach

The issue suggests a sparse message and/or auto-fitting the range. This uses the message: auto-fitting would undo the QA 3.1 decision that the x-axis spans the full selected window, and with one point it would collapse to a zero-width range anyway. Reusing the empty-state element avoids new markup and CSS and keeps the layout from jumping, and the message keeps the one value visible. The helpers live in chart-utils.ts because dashboard.ts is already well over the 500-line guideline.

Screenshots

Before is main (a14dc8f2), after is this branch. Both are headless Chromium at 1440x900 against the repo's mocked e2e API. The scenario is the Home Savings over time card with one $1.10 point on the 90d range.

Before	After

• Before, a lone dot in the top-right corner of a blank canvas, with repeated $1/$0 y-axis ticks. After, a same-height muted message: "Not enough history yet to show a trend. So far: $1.10 in cumulative savings as of Oct 20, 2026."

Verification

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

• Lint: 0 errors (142 warnings, same as base). Typecheck and build pass.
• Jest: 110 suites, 3492 passed, 1 skipped, 0 failed. New tests: chart-utils.test.ts (exact copy, thousands separators, missing value, threshold); dashboard.test.ts (one point shows the message and creates no Chart; going from one point to two redraws the chart). New tests re-run 3x with --randomize: 14/14. With the whole dashboard.test.ts randomized, 2 loadDashboard tests are order-dependent and fail the same way on unmodified base.
• Playwright via e2e-local.sh: 159/159. New savings-trend-sparse.spec.ts: one point shows the message and hides the canvas with the card height staying above 200px; two points show the chart.
• git-secrets scan clean (planted key flagged); test-git-secrets-allowlist.sh: 137 pass.

Notes for review

• Copy to approve: "Not enough history yet to show a trend. So far: $1.10 in cumulative savings as of Oct 20, 2026." Threshold: fewer than 2 points.
• Two points close together still draw a short line at the right edge of the window, as before.
• The date uses en-US local time like the chart axis, so a UTC-midnight daily bucket can show the previous day for users west of UTC (the chart already does the same).
• Noticed and not fixed: for values under a few dollars the y-axis ticks round to repeated "$1, $1, $1, $0" labels (visible in the before shot).
• The YTD sparkline still receives the single point, unchanged. The Savings History page chart (/purchases/history) is a different widget and is not touched.

Overlaps

• fix(frontend): dashboard charts have no text alternative and layers differ only by shade #744 changes the same loadSavingsTrendChart function (chart summary and data table, plus removeChartTable on the empty/error paths) and the import line, so expect a conflict. When combining, the sparse path should also call removeChartTable.
• fix(dashboard): Home 'All' range toggle truncates history at 365 days but is labeled 'All' #52 and fix(dashboard): savings-trend tooltip omits year for daily/weekly intervals; ambiguous across year boundaries #53 also touch loadSavingsTrendChart and chart-utils.ts.
• fix(frontend): "Potential savings range per service" legend and bar-color encoding mismatch #189 edits other parts of dashboard.ts and dashboard.test.ts.

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]

Warning

Review limit reached

• Run on-demand review

_{This review includes 5 billable files and costs up to $1.25.}

Or wait 59 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: 6122fa2
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: dc1502b1-4f18-4429-a8bb-9702a0622665

Commits

Reviewing files that changed from the base of the PR and between 6122fa2 and d491b9d.

Files selected for processing: 5

• frontend/src/__tests__/chart-utils.test.ts
• frontend/src/__tests__/dashboard.test.ts
• frontend/src/dashboard.ts
• frontend/src/modules/chart-utils.ts
• frontend/tests-e2e/savings-trend-sparse.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 d491b9d330a84efe2183e88d89d468b083a1fbbf

Blocking:

• none
  Non-blocking:
• frontend/src/modules/chart-utils.ts:33: formatSparseTrendMessage builds its date with its own toLocaleDateString('en-US', {month, day, year}). That is byte-for-byte the daily branch of main's formatTrendTooltipTitle (fix(dashboard): include the year in the savings-trend tooltip title #1323), which now sits 11 lines below in the same file. There are now two formatters for the same date. Use formatTrendTooltipTitle(Date.parse(point.timestamp), 'daily') so a future change to the tooltip format also reaches this message.
• frontend/src/modules/chart-utils.ts:34 vs dashboard.ts:284: the message forces 2 decimals ("$1.10"). The YTD Savings tile directly above it and the chart's tooltip and axis use formatCurrency's default 0 digits. With one $1.10 purchase the tile reads "$1" and the card below reads "$1.10". This is a deliberate copy choice, but the two disagree on screen.
• frontend/src/dashboard.ts:1125-1133: the sparse path ignores the active provider/account chip. The 0-point path says "No savings history for ", but this one gives no filter context. On the 1y range (weekly interval), "as of " is the start of the bucket's week, not the purchase date.
• frontend/src/dashboard.ts:1041: this is pre-existing, not a regression. loadSavingsTrendChart still has no generation guard, while main's new loadYtdSparkline (fix(frontend): storage-clear sign-out, safe lookups, real YTD sparkline #1344) has one. A quick 90d->7d toggle can let a slower earlier response overwrite the message or chart. The new branch writes #savings-trend-empty too, so it inherits the race.
  Attacked: Read git diff origin/main...HEAD in full. Both merges, d99db58 and d491b9d, diff against their main parent to exactly the branch's 5 files, so nothing of main's was dropped. In the conflict resolution, both chart-utils exports and the import union are intact. The sparse branch sits after main's 0-point/filter path, and fix(frontend): storage-clear sign-out, safe lookups, real YTD sparkline #1344's separate YTD fetch is untouched. Main has moved one commit, to f2ab673 (app.ts bulk confirm); it merges cleanly. Checked: XSS (textContent only), NaN/undefined handling (|| 0), chart destroy on the sparse path, and the 1->2 point redraw test. The 4 single-point tests switched to 2 points still assert their original QA 3.1/3.2 behaviour. fix(frontend): dashboard charts have no text alternative and layers differ only by shade #744 (PR 1381, open) still conflicts in dashboard.ts per merge-tree, as the body says. Ran jest in a scratch worktree on chart-utils, dashboard and css*: 348 passed, 1 skipped.

[IAmJSD]

Local verification at d491b9d3 merged onto current main (c5158e33; merge-tree 4ef75bf7; 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 04af8e9b, main plus 5 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 4122 passed, 4123 total), and the full Playwright suite (238 passed).
• CI is green on d491b9d3 (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 d491b9d3.