74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts";
|
|
|
|
export const PriceChart = () => {
|
|
// Mock data - will be replaced with real price history
|
|
const data = [
|
|
{ date: "Jan 1", samsung: 1499, wd: 1499, crucial: 599 },
|
|
{ date: "Jan 3", samsung: 1449, wd: 1450, crucial: 579 },
|
|
{ date: "Jan 5", samsung: 1399, wd: 1450, crucial: 569 },
|
|
{ date: "Jan 7", samsung: 1349, wd: 1399, crucial: 549 },
|
|
{ date: "Jan 9", samsung: 1299, wd: 1450, crucial: 549 },
|
|
];
|
|
|
|
const CustomTooltip = ({ active, payload, label }: any) => {
|
|
if (active && payload && payload.length) {
|
|
return (
|
|
<div className="bg-card border border-border rounded-lg p-3 shadow-lg">
|
|
<p className="text-sm font-medium mb-2">{label}</p>
|
|
{payload.map((entry: any, index: number) => (
|
|
<p key={index} className="text-sm" style={{ color: entry.color }}>
|
|
{entry.name}: {entry.value} DKK
|
|
</p>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<LineChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
|
|
<XAxis
|
|
dataKey="date"
|
|
stroke="hsl(var(--muted-foreground))"
|
|
fontSize={12}
|
|
/>
|
|
<YAxis
|
|
stroke="hsl(var(--muted-foreground))"
|
|
fontSize={12}
|
|
/>
|
|
<Tooltip content={<CustomTooltip />} />
|
|
<Legend
|
|
wrapperStyle={{ fontSize: '12px' }}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="samsung"
|
|
stroke="hsl(var(--chart-1))"
|
|
name="Samsung 990 PRO"
|
|
strokeWidth={2}
|
|
dot={{ fill: "hsl(var(--chart-1))" }}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="wd"
|
|
stroke="hsl(var(--chart-2))"
|
|
name="WD Black SN850X"
|
|
strokeWidth={2}
|
|
dot={{ fill: "hsl(var(--chart-2))" }}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="crucial"
|
|
stroke="hsl(var(--chart-3))"
|
|
name="Crucial P5 Plus"
|
|
strokeWidth={2}
|
|
dot={{ fill: "hsl(var(--chart-3))" }}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
};
|