39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
export function AreaChart({ values, color = "#0F6E56" }: { values: number[]; color?: string }) {
|
|
const max = Math.max(...values);
|
|
const min = Math.min(...values);
|
|
const points = values.map((v, i) => {
|
|
const x = (i / (values.length - 1)) * 100;
|
|
const y = 70 - ((v - min) / (max - min || 1)) * 50;
|
|
return `${x},${y}`;
|
|
});
|
|
const area = `0,78 ${points.join(" ")} 100,78`;
|
|
const gradientId = `areaFill-${color.replace(/[^a-zA-Z0-9]/g, "")}`;
|
|
|
|
return (
|
|
<svg
|
|
viewBox="0 0 100 80"
|
|
preserveAspectRatio="none"
|
|
className="h-40 w-full"
|
|
role="img"
|
|
aria-label="Trend chart"
|
|
>
|
|
<defs>
|
|
<linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stopColor={color} stopOpacity=".28" />
|
|
<stop offset="100%" stopColor={color} stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
<polygon points={area} fill={`url(#${gradientId})`} />
|
|
<polyline
|
|
points={points.join(" ")}
|
|
fill="none"
|
|
stroke={color}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2.5"
|
|
vectorEffect="non-scaling-stroke"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|