feat: data-viz signal redesign for Today's Pulse (deviation bars + recessed surface) - #49
Merged
Merged
Conversation
Reworks the Pulse card's signal system on data-viz principles: colour
follows each metric's JOB, magnitude becomes a mark, and the accent stops
carrying signal.
- Deviation bars replace ±%-text: each delta is a bar diverging from a
centre "normal" line — side = direction, length = magnitude, so +142%
visibly outweighs +19% (the old text weighted them the same). A drop is
now visible instead of greyed out.
- Colour by job (palette validated with the dataviz validator — CVD-safe,
contrast checked on the actual surfaces, per theme):
· Tokens/Cost are value-neutral → cool-blue slate (amber's complement,
so it pops off the card), darker for a large swing. No good/bad.
· $/MTok carries a verdict → reserved green/red + an arrow (never
colour-alone). New --pulse-good/bad tuned per theme for the surface.
- Recessed "readout well" card surface (darker + inset + a 2px amber
top-rail) replaces the amber wash — the card is distinguished by surface
hierarchy, not a full tint, so the marks stay the loudest thing and the
amber accent is freed to be structure only.
- Signal logic extracted to a pure, unit-tested lib/pulse-mark.ts
(magnitude cap, direction, tone, flat/missing guards). Day-progress
gauge kept (amber = the day axis, distinct from the blue bars).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Reworks the Pulse card's signal system on professional data-viz principles (mockups). Two design smells fixed: the "attention" colour was the same amber as the accent (so a spike blended in), and a drop was greyed to nothing.
--pulse-good/badtuned per theme (light green#10b981was 2.24:1 on the light surface → dropped to#059669at ≥3:1).lib/pulse-mark.ts(magnitude cap ±200%, direction, tone, flat/missing guards). Day-progress gauge kept.Test plan
pulse-markunit tests (8): tone by kind, magnitude half-scale + cap, drop-visible, price arrows, null/flat guards,toneVarmappingci:localgreen — root 775, copy, ui-hardcode unchanged (all colour now in CSS vars, none hardcoded in JSX), guardrails 4/4validate_palette.js) on the real surfaces both themes: dark CVD ΔE 18.5 / light 24.1, contrast ≥3:1$/MTok, amber top-rail + gauge