feat(Sparkline): compact activity bar sparkline

[ebellamy-bh]

Generalizes waggleline's activity-timeline sparkline into the design system's lightweight charting primitive — the "too small for DataVis" gap.

What it does

• Compact bar sparkline for activity-over-time strips: bars scale to the series maximum, zero values render as a low baseline stub, tooltips + accessible names per bar (formatValue for units)
• Optional selection: with onSelect, bars become aria-pressed toggle buttons for filtering the view to one bucket (click again to clear); omit it for a read-only strip
• Pure by design: data arrives pre-bucketed ({ key, label?, value }[]) — the host owns date math, so weeks/hours/anything works, not just days
• Track label, adjustable height, primary-token colors; stacked tracks make a compact multi-metric overview

Screenshots

Stacked read-only tracks (Calls / Emails / Meetings, 30 days):

Light	Dark

Provenance

Generalized from waggleline/app/imports/ui/components/activity-timeline/TimelineSparkline.tsx: the TimelineItem coupling and 30-day bucketing move to the host, brand-orange hardcodes become primary tokens, and the "hide when too little signal" heuristic is left to hosts (it was a product decision, not a component one).

Testing

• 6 unit tests (read-only accessible names, max scaling + zero stubs, selection toggling with aria-pressed, track label, formatValue, key fallback)
• 3 stories (default, selectable filter demo, stacked tracks) with deterministic seeded data for stable visual baselines
• typecheck / lint / format / rtl:scan clean; combined batch suite 651/651

[cloudflare-workers-and-pages]

Deploying ui with    Cloudflare Pages

Latest commit:	ae48fb0
Status:	✅  Deploy successful!
Preview URL:	https://8538a718.ui-6d0.pages.dev
Branch Preview URL:	https://feat-sparkline.ui-6d0.pages.dev

View logs

[Copilot]

Pull request overview

Adds a new lightweight Sparkline component to the design system to support compact “activity-over-time” bar strips (including optional selection) and exposes it via the package entrypoints.

Changes:

• Introduces Sparkline component with read-only and selectable (toggle button) modes plus accessibility labels/tooltips.
• Adds unit tests and Storybook stories for the new component.
• Exports the new component from src/index.ts and includes it in the tsup build entry map.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
tsup.config.ts	Adds Sparkline to the build entrypoints.
src/index.ts	Re-exports Sparkline from the library root.
src/components/Sparkline/Sparkline.tsx	Implements the compact bar sparkline component (rendering + selection behavior).
src/components/Sparkline/Sparkline.test.tsx	Adds unit tests covering scaling, accessible names, and selection toggling.
src/components/Sparkline/Sparkline.stories.tsx	Adds Storybook stories and seeded demo data for visual review.
src/components/Sparkline/index.ts	Provides the component/type barrel export.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Suppressed comments (2)

Previously missed (1) — in code that hasn't changed since the last review.

src/components/Sparkline/Sparkline.tsx:82

• Computing max via Math.max(1, ...data.map(...)) spreads the full dataset into function arguments, which can throw for large arrays (too many arguments) and is slower than a simple reduce. Using reduce avoids argument-length limits and keeps this safe as a generic primitive.

    const max = React.useMemo(
      () => Math.max(1, ...data.map((d) => d.value)),
      [data]
    );

src/tailwind-preset.ts:609

• focus-visible:ring-offset-1 is already safelisted earlier (src/tailwind-preset.ts:559), so this duplicate entry can be removed to keep the safelist DRY.

  'hover:bg-muted-foreground/20',
  'focus-visible:ring-offset-1',

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated no new comments.

Suppressed comments (1)

Previously missed (1) — in code that hasn't changed since the last review.

src/components/Sparkline/Sparkline.tsx:153

• Add an explicit displayName for this forwardRef component. Most components in this repo set it (e.g. Button.displayName = 'Button' in src/components/Button/Button.tsx:186), which improves React DevTools output and error messages.

);