Macbook
50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
|
|
interface Props {
|
|
series: number[];
|
|
label?: string;
|
|
height?: number;
|
|
}
|
|
|
|
function sparkPath(values: number[], w: number, h: number): string {
|
|
if (values.length < 2) return '';
|
|
const lo = Math.min(...values);
|
|
const hi = Math.max(...values);
|
|
const range = hi - lo || 1;
|
|
return values.map((v, i) => {
|
|
const x = (i / (values.length - 1)) * w;
|
|
const y = h - 8 - ((v - lo) / range) * (h - 16);
|
|
return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
|
|
}).join(' ');
|
|
}
|
|
|
|
export default function DashboardSparkChart({ series, label, height = 140 }: Props) {
|
|
const w = 480;
|
|
const path = useMemo(() => sparkPath(series, w, height), [series, height]);
|
|
const area = path ? `${path} L ${w},${height} L 0,${height} Z` : '';
|
|
const last = series.length ? series[series.length - 1] : 0;
|
|
|
|
return (
|
|
<div className="gc-spark-chart">
|
|
{label && (
|
|
<div className="gc-spark-chart-head">
|
|
<span>{label}</span>
|
|
<strong>{last.toFixed(1)}/s</strong>
|
|
</div>
|
|
)}
|
|
<svg viewBox={`0 0 ${w} ${height}`} preserveAspectRatio="none" className="gc-spark-chart-svg">
|
|
<defs>
|
|
<linearGradient id="gcSparkGrad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="#22d3ee" stopOpacity="0.55" />
|
|
<stop offset="100%" stopColor="#6366f1" stopOpacity="0.05" />
|
|
</linearGradient>
|
|
</defs>
|
|
{area && <path d={area} fill="url(#gcSparkGrad)" />}
|
|
{path && (
|
|
<path d={path} fill="none" stroke="#22d3ee" strokeWidth="2" style={{ filter: 'drop-shadow(0 0 4px rgba(34,211,238,0.5))' }} />
|
|
)}
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|