112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
type PriceHistoryPoint = {
|
|
date: string;
|
|
price: number;
|
|
};
|
|
|
|
interface PricingHistoryGraphProps {
|
|
data: PriceHistoryPoint[];
|
|
currentPrice: number;
|
|
}
|
|
|
|
export function PricingHistoryGraph({
|
|
data,
|
|
currentPrice,
|
|
}: PricingHistoryGraphProps) {
|
|
if (data.length === 0) return null;
|
|
|
|
// Calculate chart dimensions
|
|
const width = 100;
|
|
const height = 60;
|
|
const padding = 4;
|
|
|
|
// Find min and max prices for scaling
|
|
const prices = data.map((d) => d.price);
|
|
const minPrice = Math.min(...prices);
|
|
const maxPrice = Math.max(...prices);
|
|
const priceRange = maxPrice - minPrice || 1; // Avoid division by zero
|
|
|
|
// Generate path points
|
|
const points = data.map((point, index) => {
|
|
const x = padding + ((index / (data.length - 1)) * (width - padding * 2));
|
|
const normalizedPrice = (point.price - minPrice) / priceRange;
|
|
const y = padding + (height - padding * 2) * (1 - normalizedPrice);
|
|
return { x, y, price: point.price };
|
|
});
|
|
|
|
// Create SVG path
|
|
const pathData = points
|
|
.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`)
|
|
.join(" ");
|
|
|
|
// Create area path (for gradient fill)
|
|
const areaPath = `${pathData} L ${width - padding} ${height - padding} L ${padding} ${height - padding} Z`;
|
|
|
|
// Format date for display
|
|
const formatDate = (dateStr: string) => {
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
|
};
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<div>
|
|
<div className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400">
|
|
Price History (30 Days)
|
|
</div>
|
|
<div className="mt-1 text-xs text-zinc-500">
|
|
Current: <span className="text-amber-300 font-semibold">${currentPrice.toFixed(2)}</span>
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-zinc-500">
|
|
{formatDate(data[0].date)} - {formatDate(data[data.length - 1].date)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative w-full h-32 rounded-md border border-zinc-800 bg-zinc-900/30 p-3">
|
|
<svg
|
|
viewBox={`0 0 ${width} ${height}`}
|
|
className="w-full h-full"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<defs>
|
|
<linearGradient id="priceGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stopColor="#fbbf24" stopOpacity="0.3" />
|
|
<stop offset="100%" stopColor="#fbbf24" stopOpacity="0.05" />
|
|
</linearGradient>
|
|
</defs>
|
|
{/* Area fill */}
|
|
<path
|
|
d={areaPath}
|
|
fill="url(#priceGradient)"
|
|
/>
|
|
{/* Line */}
|
|
<path
|
|
d={pathData}
|
|
fill="none"
|
|
stroke="#fbbf24"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
{/* Current price indicator */}
|
|
<circle
|
|
cx={points[points.length - 1].x}
|
|
cy={points[points.length - 1].y}
|
|
r="2"
|
|
fill="#fbbf24"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="mt-2 flex items-center justify-between text-xs text-zinc-500">
|
|
<span>Low: ${minPrice.toFixed(2)}</span>
|
|
<span>High: ${maxPrice.toFixed(2)}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|