73 lines
2.8 KiB
TypeScript
73 lines
2.8 KiB
TypeScript
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
|
|
import './PriceChart.css';
|
|
|
|
interface PriceChartProps {
|
|
data: Array<{ timestamp: number; price: number }>;
|
|
currentPrice: number;
|
|
}
|
|
|
|
export const PriceChart = ({ data, currentPrice }: PriceChartProps) => {
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<div className="price-chart-empty">
|
|
<span>Collecting price data...</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Determine if price is trending up or down
|
|
const firstPrice = data[0]?.price || currentPrice;
|
|
const priceChange = ((currentPrice - firstPrice) / firstPrice) * 100;
|
|
const lineColor = priceChange >= 0 ? '#00ff88' : '#ff3366';
|
|
|
|
// Format data for chart
|
|
const chartData = data.map(point => ({
|
|
time: new Date(point.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
|
price: point.price
|
|
}));
|
|
|
|
return (
|
|
<div className="price-chart">
|
|
<div className="chart-header">
|
|
<span className="chart-label">Price Trend</span>
|
|
<span className={`chart-change ${priceChange >= 0 ? 'positive' : 'negative'}`}>
|
|
{priceChange >= 0 ? '+' : ''}{priceChange.toFixed(2)}%
|
|
</span>
|
|
</div>
|
|
<ResponsiveContainer width="100%" height={120}>
|
|
<LineChart data={chartData} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}>
|
|
<XAxis
|
|
dataKey="time"
|
|
tick={{ fontSize: 10, fill: '#666' }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
hide
|
|
/>
|
|
<YAxis
|
|
domain={['dataMin - 50', 'dataMax + 50']}
|
|
hide
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'rgba(30, 30, 46, 0.95)',
|
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
|
borderRadius: '8px',
|
|
fontSize: '12px'
|
|
}}
|
|
labelStyle={{ color: '#888' }}
|
|
itemStyle={{ color: lineColor }}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="price"
|
|
stroke={lineColor}
|
|
strokeWidth={2}
|
|
dot={false}
|
|
activeDot={{ r: 4, fill: lineColor }}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
};
|