48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
|
|
interface ChartDataPoint {
|
|
value: number
|
|
label?: string
|
|
timestamp?: string
|
|
}
|
|
|
|
interface AreaChartProps {
|
|
className?: string
|
|
data?: ChartDataPoint[]
|
|
}
|
|
|
|
const AreaChart: React.FC<AreaChartProps> = ({ className = '' }) => {
|
|
return (
|
|
<div className={`w-full h-full ${className}`}>
|
|
<svg className="w-full h-full" viewBox="0 0 635 200">
|
|
<defs>
|
|
<linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="rgb(42, 157, 144)" stopOpacity="0.3" />
|
|
<stop offset="100%" stopColor="rgb(42, 157, 144)" stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path
|
|
d="M0,180 L100,120 L200,140 L300,80 L400,60 L500,100 L635,90 L635,200 L0,200 Z"
|
|
fill="url(#areaGradient)"
|
|
/>
|
|
<path
|
|
d="M0,180 L100,120 L200,140 L300,80 L400,60 L500,100 L635,90"
|
|
stroke="rgb(42, 157, 144)"
|
|
strokeWidth="2"
|
|
fill="none"
|
|
/>
|
|
<circle cx="0" cy="180" r="3" fill="rgb(42, 157, 144)" />
|
|
<circle cx="100" cy="120" r="3" fill="rgb(42, 157, 144)" />
|
|
<circle cx="200" cy="140" r="3" fill="rgb(42, 157, 144)" />
|
|
<circle cx="300" cy="80" r="3" fill="rgb(42, 157, 144)" />
|
|
<circle cx="400" cy="60" r="3" fill="rgb(42, 157, 144)" />
|
|
<circle cx="500" cy="100" r="3" fill="rgb(42, 157, 144)" />
|
|
<circle cx="635" cy="90" r="3" fill="rgb(42, 157, 144)" />
|
|
</svg>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AreaChart |