58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface LineChartProps {
|
|
className?: string
|
|
height?: number
|
|
data?: number[]
|
|
}
|
|
|
|
export default function LineChart({
|
|
className,
|
|
height = 160,
|
|
data = [],
|
|
}: LineChartProps) {
|
|
const points = data.length >= 2
|
|
? data
|
|
.map((v, i) => {
|
|
const x = (i / Math.max(1, data.length - 1)) * 100
|
|
const y = 100 - Math.min(100, Math.max(0, v))
|
|
return `${x},${y}`
|
|
})
|
|
.join(' ')
|
|
: '0,100 100,100'
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'rounded-lg bg-dark-200/80 border border-white/5 overflow-hidden',
|
|
className
|
|
)}
|
|
style={{ height }}
|
|
>
|
|
{data.length >= 2 ? (
|
|
<svg
|
|
viewBox="0 0 100 100"
|
|
preserveAspectRatio="none"
|
|
className="w-full h-full text-cyan-500/30"
|
|
>
|
|
<polyline
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="0.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
points={points}
|
|
className="transition-all duration-500"
|
|
/>
|
|
</svg>
|
|
) : (
|
|
<div className="flex h-full items-center justify-center text-gray-600 text-sm">
|
|
—
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|