Remove unused Sparkline.tsx (replaced by MiniChart)
Closes #52 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,61 +0,0 @@
|
|||||||
import { useMemo, useRef } from 'react';
|
|
||||||
|
|
||||||
interface SparklineProps {
|
|
||||||
data: number[];
|
|
||||||
color: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Sparkline({ data, color }: SparklineProps) {
|
|
||||||
const gradientIdRef = useRef('spark-' + Math.random().toString(36).slice(2, 9));
|
|
||||||
const gradientId = gradientIdRef.current;
|
|
||||||
|
|
||||||
// Drop first and last buckets — they are partial time windows and skew the trend
|
|
||||||
const trimmed = useMemo(() => (data.length > 4 ? data.slice(1, -1) : data), [data]);
|
|
||||||
|
|
||||||
const { linePath, fillPath } = useMemo(() => {
|
|
||||||
if (trimmed.length < 2) return { linePath: '', fillPath: '' };
|
|
||||||
|
|
||||||
const w = 200;
|
|
||||||
const h = 24;
|
|
||||||
const max = Math.max(...trimmed);
|
|
||||||
const min = Math.min(...trimmed);
|
|
||||||
const range = max - min || 1;
|
|
||||||
const step = w / (trimmed.length - 1);
|
|
||||||
|
|
||||||
const points = trimmed.map(
|
|
||||||
(v, i) => `${i * step},${h - ((v - min) / range) * (h - 2) - 1}`,
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
|
||||||
linePath: points.join(' '),
|
|
||||||
fillPath: `0,${h} ${points.join(' ')} ${w},${h}`,
|
|
||||||
};
|
|
||||||
}, [trimmed]);
|
|
||||||
|
|
||||||
if (trimmed.length < 2) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ marginTop: 10, height: 24 }}>
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 200 24"
|
|
||||||
preserveAspectRatio="none"
|
|
||||||
style={{ width: '100%', height: '100%' }}
|
|
||||||
>
|
|
||||||
<defs>
|
|
||||||
<linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
|
|
||||||
<stop offset="0%" stopColor={color} stopOpacity={0.3} />
|
|
||||||
<stop offset="100%" stopColor={color} stopOpacity={0} />
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<polygon points={fillPath} fill={`url(#${gradientId})`} />
|
|
||||||
<polyline
|
|
||||||
points={linePath}
|
|
||||||
fill="none"
|
|
||||||
stroke={color}
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user