cadence-ui/docs/exec-plans/2026-03-25-chart-pattern.md

Chart Pattern

• Status: completed
• Owner: codex
• Date: 2026-03-25

Goal

Add a reusable Chart pattern to @ai-ui/ui that can render the kind of dashboard trend panel shown in the supplied reference: multi-series lines, soft area shading, an active point summary, and a composable card-like review surface that still follows Cadence UI's current visual language.

Scope

• In scope:
  • add a new Chart component to packages/ui
  • keep the first release focused on cartesian trend charts for dashboard analytics surfaces
  • support multi-series rendering, optional area fills, axes, legend, and active-point callouts
  • add Storybook stories, including a Sales Impact-style showcase
  • add unit coverage for the public contract and interactive active-point behavior
  • refresh repo status docs to reflect the shipped pattern
• Out of scope:
  • introducing a third-party charting dependency
  • building a full visualization framework with bars, pies, heatmaps, and pivoting
  • server-driven drilldown, zooming, panning, or data transforms outside the component
  • adding the new story to the curated browser harness unless it becomes a required regression surface

Constraints

• Follow DESIGN.md over the raw screenshot when visual details conflict.
• Reuse existing tokens, motion rules, and card-like surface styling instead of hardcoded brand treatments.
• Keep the API source-owned and narrow, similar to the DataTable philosophy.
• Preserve stable data-slot and data-* hooks so docs and tests can target the component predictably.

Affected Surfaces

• docs/exec-plans/2026-03-25-chart-pattern.md
• packages/ui/src/components/chart.tsx
• packages/ui/src/components/chart.variants.ts
• packages/ui/src/components/chart.test.tsx
• packages/ui/src/index.ts
• apps/docs/src/components/chart.stories.tsx
• README.md
• roadmap.md
• registry/index.json

Plan

1. Add an execution plan and update repo status docs for the new public pattern.
2. Implement a source-owned Chart component that supports multi-series dashboard trend charts without adding an external chart library.
3. Add Storybook stories that explain anatomy and demonstrate a Sales Impact-style analytics panel.
4. Add unit tests for slots, legend rendering, active-point updates, and controlled state.
5. Run the narrowest useful validation suites, then record any remaining gaps.

Validation

• pnpm test -- --runInBand
• pnpm harness:validate:docs
• pnpm registry:build

Orchestration Task Sketch

• T1: implement the Chart component and export surface
• T2 -> T1: add docs stories and validate the rendered showcase
• T3 -> T1: add tests and registry updates

Status Log

• 2026-03-25 19:08 Read the system-of-record files and confirmed the repo does not yet ship a chart pattern.
• 2026-03-25 19:18 Started the chart implementation plan for a new dashboard-focused analytics pattern.
• 2026-03-25 19:42 Implemented the new Chart component, public exports, stories, tests, and status-doc updates.
• 2026-03-25 19:55 Validated packages/ui typecheck, targeted chart tests, package builds, Storybook docs build, and registry generation. pnpm harness:validate:changed still failed because the dirty worktree already contains unrelated apps/docs/src/revenue-dashboard.stories.tsx type errors and existing react-refresh/only-export-components warnings in packages/ui/src/components/context-menu.tsx.