47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
|
|
interface SparklineProps {
|
|
data: number[]
|
|
width?: number
|
|
height?: number
|
|
color?: string
|
|
strokeWidth?: number
|
|
}
|
|
|
|
export function Sparkline({
|
|
data,
|
|
width = 120,
|
|
height = 40,
|
|
color = 'currentColor',
|
|
strokeWidth = 2
|
|
}: SparklineProps) {
|
|
if (!data || data.length < 2) {
|
|
return null
|
|
}
|
|
|
|
// Normalize data to fit height
|
|
const min = Math.min(...data)
|
|
const max = Math.max(...data)
|
|
const range = max - min || 1 // Avoid division by zero
|
|
|
|
// Calculate points
|
|
const points = data.map((value, index) => {
|
|
const x = (index / (data.length - 1)) * width
|
|
const y = height - ((value - min) / range) * height
|
|
return `${x},${y}`
|
|
}).join(' ')
|
|
|
|
return (
|
|
<svg width={width} height={height} className="overflow-visible">
|
|
<polyline
|
|
points={points}
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth={strokeWidth}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|