Session: chart-component-library — 2026-08-27

Project: pixel-dash · Branch: feat/charts · Mode: default · Model: claude-sonnet-4-6

Summary

Built a small typed chart kit on top of D3 scales: LineChart, BarChart, Sparkline, shared axis and tooltip primitives, and Storybook stories for each. Charts resize with a ResizeObserver hook.

Conversation

Turn 1 — User

I need reusable chart components for the dashboard. React + TypeScript, no heavy chart library.

Turn 1 — Assistant

D3 only for scales and shapes, React for rendering. A useResize hook drives width; every chart takes typed Series<T> data.

export function Sparkline({ data, height = 32 }: SparklineProps) {
  const [ref, width] = useResize<HTMLDivElement>();
  const x = scaleLinear().domain([0, data.length - 1]).range([0, width]);
  const y = scaleLinear().domain(extent(data) as [number, number]).range([height, 0]);
  const d = line<number>().x((_, i) => x(i)).y(y)(data) ?? "";
  return (
    <div ref={ref}>
      <svg width={width} height={height}><path d={d} fill="none" stroke="currentColor" /></svg>
    </div>
  );
}

Tools used in this turn:

• Write: src/charts/LineChart.tsx
• Write: src/charts/useResize.ts
• Write: src/charts/LineChart.stories.tsx
• Bash: pnpm test — 18 passed

Connections

• [[pixel-dash]]
• [[React]]
• [[D3]]
• [[Storybook]]
• [[TypeScript]]