praxis/client/src/operator/Sparkline.tsx

/**
 * Inline SVG sparkline (SLICE-09 TASK-09-05, RESEARCH-v0.4 §4.3).
 *
 * Zero-dep ~50 LOC. Renders a polyline from `data`. Handles empty (renders
 * nothing), single point (dot), all-same (flat line). stroke=currentColor.
 * No axes/tooltips — sparklines are compact trend indicators.
 */
interface SparklineProps {
  data: number[]
  width?: number
  height?: number
}

export default function Sparkline({ data, width = 60, height = 20 }: SparklineProps) {
  if (!data || data.length === 0) {
    return null
  }
  if (data.length === 1) {
    return (
      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
        <circle cx={width / 2} cy={height / 2} r={1.5} fill="currentColor" />
      </svg>
    )
  }
  const min = Math.min(...data)
  const max = Math.max(...data)
  const span = max - min || 1
  const pad = 2
  const w = width - pad * 2
  const h = height - pad * 2
  const stepX = w / (data.length - 1)
  const points = data.map((v, i) => {
    const x = pad + i * stepX
    const y = pad + h - ((v - min) / span) * h
    return `${x.toFixed(2)},${y.toFixed(2)}`
  })
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
      <polyline
        points={points.join(' ')}
        fill="none"
        stroke="currentColor"
        strokeWidth={1.25}
        strokeLinejoin="round"
        strokeLinecap="round"
      />
    </svg>
  )
}