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