[IAmJSD]

The Home "Potential savings range per service" chart's legend names three stacked layers (Current / Committed, Lowest option, Upside), but each bar was drawn in its own service color, with the layers as darker, solid and translucent shades of that color. The neutral gray legend swatches matched none of the bars. This PR colors the chart by layer, so each layer is one color on every bar and the legend shows exactly that color, and drops the redundant "Service" axis title.

Closes #189

What changed

• frontend/src/dashboard.ts: replaced the per-service palette (SERVICE_BAR_COLORS, KNOWN_SERVICE_COLOR_INDEX, serviceBarColor, parseHexColor, darkenHexColor, LEGEND_SWATCH_*) with SAVINGS_LAYER_COLORS, one color per layer: Current / Committed #2a78d6 (blue), Lowest option #eb6834 (orange), Upside #1baf7a (aqua). Each dataset gets a single backgroundColor, so Chart.js's default legend draws the bar color, and the custom generateLabels is removed. The x-axis "Service" title is removed.
• frontend/src/index.html: dropped "darker" from the static canvas aria-label.
• frontend/src/__tests__/dashboard.test.ts: removed the per-service color tests and added 4 for the new encoding (one color per layer equal to the legend, three distinct colors, colors unchanged when a service changes rank, no x-axis title).

Why this approach

The issue asks to pick one encoding. The x axis already names every service, so coloring by service repeats it, while the layers (what the legend explains) had no clear encoding. Coloring by layer makes the legend match the bars, removes the "shade only" problem that #744 also reports, and keeps the goal of #700 (colors never follow rank, because they follow the layer). The colors are the first three slots of a palette checked for color-vision-deficiency separation (CVD delta-E >= 9.2 and normal-vision delta-E >= 24 between every pair).

The alternative, keeping per-service hues and distinguishing layers with hatching or patterns plus a pattern legend, would keep the #700 design but needs canvas patterns and still spends hue on something the axis already shows.

Screenshots

Before is main (a14dc8f2), after is this branch. Both are headless Chromium at 1440x900 against the repo's mocked e2e API, with 4 services, 3 of them with existing commitments, so every bar shows all three layers.

Before	After

Before: bars are colored per service (blue, green, yellow, red) in three shades, the gray legend swatches match no bar, and there is a redundant "Service" axis title. After: each layer is one color on every bar (blue current, orange lowest option, aqua upside), the legend shows the same colors, and the axis title is gone.

Verification

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

• npm run lint: 0 errors (existing warnings). Typecheck and build pass.
• Jest: 109 suites, 3478 passed, 1 skipped (fewer than main because the per-service color tests were removed). The new tests pass with --randomize.
• Playwright (e2e-local.sh): 157 passed. No new Playwright spec: this is a Chart.js config change, the jest tests assert the config, and the screenshots show the rendered result.
• Secrets scan clean (planted key flagged). scripts/test-git-secrets-allowlist.sh: 137 PASS, 0 FAIL.

Notes for review

• Design decision: this reverses part of fix(frontend): upcoming fetch error state, stable service chart colours, money in purchase confirm #1186 from Oct 20 (stable per-service colors, the change made for fix(frontend): per-service savings chart colors change with rank and legend mismatches #700) and deletes the per-service palette code and its tests. fix(frontend): per-service savings chart colors change with rank and legend mismatches #700 offered either "one hue in three tones" or "a stable per-service color"; fix(frontend): upcoming fetch error state, stable service chart colours, money in purchase confirm #1186 chose the second and left fix(frontend): "Potential savings range per service" legend and bar-color encoding mismatch #189 open. If per-service hues should stay, the alternative is hatching or patterns per layer with a pattern legend (not done here).
• The three colors (blue, orange, aqua) are worth a look. Upside is now a saturated aqua instead of a pale tint, so the "uncertain" layer no longer looks lighter. Aqua is 2.7:1 against white (below 3:1); this is mitigated by the tooltip and by the "View as table" option added in fix(frontend): dashboard charts have no text alternative and layers differ only by shade #744.

Overlaps

• fix(frontend): dashboard charts have no text alternative and layers differ only by shade #744 edits the same renderSavingsByService block (a 2px gap border per dataset, plus a table and aria-label) and the same index.html aria-label line. Expect textual conflicts; merge this one first, then fix(frontend): dashboard charts have no text alternative and layers differ only by shade #744.
• fix(frontend): charts rebuilt on every change; dashboard trend has no stale guard #747 changes the same chart's create/destroy call (new Chart to upsertChart): small conflict.
• fix(frontend): Potential Monthly Savings differs between Home and Opportunities for the same recommendations #180 touches other functions in dashboard.ts.

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 3 billable files and costs up to $0.75.}

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: 61be5b6
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: 9d190938-cff9-4986-ad1d-b34dd61a8019

Commits

Reviewing files that changed from the base of the PR and between 61be5b6 and 38c6b19.

Files selected for processing: 3

• frontend/src/__tests__/dashboard.test.ts
• frontend/src/dashboard.ts
• frontend/src/index.html

• 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 38c6b1948a9470e3972bfc862db85998ef83e9eb

Blocking:

• none
  Non-blocking:
• frontend/src/dashboard.ts:43: the Upside aqua (#1baf7a) is about 2.7:1 against white, below the WCAG 1.4.11 3:1 bar for a graphical object that carries meaning, and the old legend swatch border that kept it at 3:1 is gone. The previous 35%-alpha bars were worse, so this isn't a regression, but a darker aqua would be cheap.
• This reverses the deliberate per-service palette from fix(frontend): per-service savings chart colors change with rank and legend mismatches #700/fix(frontend): upcoming fetch error state, stable service chart colours, money in purchase confirm #1186 (the PR body says so). That is a design call for the UI owner, not a defect.
  Attacked: Grepped for leftover references to the removed exports (serviceBarColor, parseHexColor, darkenHexColor, LEGEND_SWATCH_*): none in src or tests-e2e. Confirmed each dataset now has one string backgroundColor, so Chart.js's default legend draws exactly the bar colour. The tooltip callbacks don't depend on the colour arrays. No test or e2e asserts the old aria-label. The new tests check the dataset config, the absence of generateLabels, rank stability and the missing x title, as they claim.

[IAmJSD]

Local verification at 38c6b194 merged onto current main (9c32db4d; merge-tree 8f550312; 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 89dd34d8, main plus 46 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 3914 passed, 3915 total), and the full Playwright suite (208 passed).
• CI is green on 38c6b194 (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 38c6b194.