시각화 원칙

"use client";
import { scaleTime, scaleLinear, line, curveMonotoneX, bisector } from "d3";

export function LineChart({ series, height = 280 }: Props) {
  const [ref, width] = useChartWidth();        // ResizeObserver
  const t = useEnterProgress(900);             // d3.timer + easeCubicOut (0 → 1)

  const x = scaleTime().domain(extent).range([0, innerW]);
  const y = scaleLinear().domain([0, max]).nice(4).range([innerH, 0]);
  const path = line<Point>().x(d => x(d.x)).y(d => y(d.y)).curve(curveMonotoneX);

  return (
    <svg role="img" aria-label="…" tabIndex={0} onKeyDown={arrowKeyNav}>
      {y.ticks(4).map(tick => <GridLine key={tick} y={y(tick)} />)}
      <clipPath id="reveal"><rect width={innerW * t} /></clipPath>
      <path d={path(values)} clipPath="url(#reveal)" stroke="var(--viz-1)" />
    </svg>
  );
}