56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { View } from 'react-native';
|
|
import Svg, { Polyline, Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
|
|
|
|
interface SparklineProps {
|
|
data: number[];
|
|
width?: number;
|
|
height?: number;
|
|
color?: string;
|
|
strokeWidth?: number;
|
|
}
|
|
|
|
export default function Sparkline({
|
|
data,
|
|
width = 100,
|
|
height = 40,
|
|
color = '#00ff88',
|
|
strokeWidth = 1.5,
|
|
}: SparklineProps) {
|
|
if (!data || data.length < 2) return null;
|
|
|
|
const min = Math.min(...data);
|
|
const max = Math.max(...data);
|
|
const range = max - min || 1;
|
|
const padding = 2;
|
|
|
|
const points = data
|
|
.map((val, i) => {
|
|
const x = (i / (data.length - 1)) * (width - padding * 2) + padding;
|
|
const y = height - padding - ((val - min) / range) * (height - padding * 2);
|
|
return `${x},${y}`;
|
|
})
|
|
.join(' ');
|
|
|
|
return (
|
|
<View style={{ width, height }}>
|
|
<Svg width={width} height={height}>
|
|
<Defs>
|
|
<LinearGradient id={`grad-${color}`} x1="0" y1="0" x2="0" y2="1">
|
|
<Stop offset="0" stopColor={color} stopOpacity="0.15" />
|
|
<Stop offset="1" stopColor={color} stopOpacity="0" />
|
|
</LinearGradient>
|
|
</Defs>
|
|
<Polyline
|
|
points={points}
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth={strokeWidth}
|
|
strokeLinejoin="round"
|
|
strokeLinecap="round"
|
|
/>
|
|
</Svg>
|
|
</View>
|
|
);
|
|
}
|