Skip to content
Motir
Start free

moooon

Motir

Vibe your whole project. Bring an idea — Motir's three AI layers plan it, track it, and ship it, end to end. You're looking at Motir, built in Motir.

  • Vibe Project
  • Open Source
  • AI Agent
  • AI Loop
1
requests
0
upvotes
145
planned
1,361
shipped
Follow  — continues on app.motir.co
Request a featureAtom feed

← Motir · Work items

MOTIR-345Done

6.3.4 Chart primitives — donut + two-series difference/area forms in the 4.6.2 token-aware SVG layer (+ the categorical `--el-chart-*` ramp)

Estimate: 26m · Depends on: 4.6.2, 6.3.3

The two chart forms 6.3 needs, grown INSIDE the 4.6.2 primitive layer (same shared frame, axis/legend grammar, a11y pattern — no charting library, the recorded decision). Per the 6.3.3 design.

Donut — segments from (label, count, percentage) data; the visible text legend with counts + percentages (colour never the sole signal — finding #35); hover/focus segment emphasis; the None segment styling; bounded segment count with the designed overflow treatment ("+N more" rolled into the legend). Difference/area — two series over time buckets; the red/green difference fill between them (the verified mirror semantics) via the --el-chart-* danger/success-mapped tokens; the cumulative variant is just data (no separate form); reuses the 4.6.2 axes/gridlines/ticks.

Tokens — ADD the categorical ramp (--el-chart-cat-1..n) + the created/resolved series tokens to globals.css Tier 3 per the growth pattern (mistake #20), mapped to existing --color-*, dark-parity inherited; extend the /tokens chart specimen (the 4.6.2 pattern) with both forms.

A11y — both forms carry the 4.6.1 pattern: the visually-hidden data table mirroring the series/segments, role="img" + a generated summary label.

Acceptance criteria

  • Both forms render from data props alone (pure presentational, SSR-friendly), match the 6.3.3 spec panel-for-panel, and compose the 4.6.2 frame (no duplicated axis/legend code).
  • All colour via --el-chart-* (the new tokens added to Tier 3 + the dark flip verified); shape via element tokens; the /tokens specimen shows both forms light + dark.
  • The donut overflow treatment caps segments; zero-data renders the designed empty treatment (never NaN geometry).
  • Unit tests over the geometry helpers (arc math, difference-fill segmentation, bucket scaling) + the hidden-table rendering; pnpm test:coverage ≥90%.

Context refs

  • The 4.6.2 chart primitives + --el-chart-* Tier-3 block + the /tokens chart specimen — the layer this grows
  • design/reports/dashboard.mock.html + notes (6.3.3) — THE authority for both forms
  • motir-core/CLAUDE.md (token tiers, the growth pattern); findings #35/#54
  • The 4.6.1 chart a11y pattern (hidden data table)