/**
* 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 (
)
}
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 (
)
}