Summary / KPI Table

1interface SparklineProps {
2  data: number[]
3  width?: number
4  height?: number
5  className?: string
6}
7 
8export function Sparkline({
9  data,
10  width = 96,
11  height = 28,
12  className,
13}: SparklineProps) {
14  if (data.length < 2) return null
15 
16  const min = Math.min(...data)
17  const max = Math.max(...data)
18  const range = max - min || 1
19  const stepX = width / (data.length - 1)
20 
21  const points = data
22    .map((value, i) => {
23      const x = i * stepX
24      const y = height - ((value - min) / range) * height
25      return `${x.toFixed(1)},${y.toFixed(1)}`
26    })
27    .join(' ')
28 
29  return (
30    <svg
31      width={width}
32      height={height}
33      viewBox={`0 0 ${width} ${height}`}
34      className={className}
35      aria-hidden="true"
36    >
37      <polyline
38        points={points}
39        fill="none"
40        stroke="currentColor"
41        strokeWidth={1.5}
42        strokeLinecap="round"
43        strokeLinejoin="round"
44      />
45    </svg>
46  )
47}