Price Chart

1"use client";
2 
3import React from "react";
4import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
5import {
6  type ChartConfig,
7  ChartContainer,
8  ChartTooltip,
9  ChartTooltipContent,
10} from "@/components/ui/chart";
11import { cn } from "@/lib/utils";
12 
13interface PriceChartProps {
14  title?: string;
15  description?: string;
16  series: {
17    time: string;
18    value: number;
19  }[];
20  className?: string;
21}
22 
23const POSITIVE_COLOR = "hsl(160 84% 39%)";
24const NEGATIVE_COLOR = "hsl(0 84% 67%)";
25 
26const chartConfig = {
27  value: {
28    label: "Value",
29  },
30} satisfies ChartConfig;
31 
32const PriceChart = ({
33  title,
34  description,
35  series,
36  className,
37}: PriceChartProps) => {
38  const gradientId = React.useId();
39 
40  if (!series.length) return null;
41 
42  const firstValue = series[0].value;
43  const lastValue = series[series.length - 1].value;
44  const isPositive = lastValue >= firstValue;
45  const chartColor = isPositive ? POSITIVE_COLOR : NEGATIVE_COLOR;
46 
47  const minValue = Math.min(...series.map((s) => s.value));
48  const maxValue = Math.max(...series.map((s) => s.value));
49  const padding = (maxValue - minValue) * 0.1;
50 
51  return (
52    <div
53      className={cn(
54        "flex min-h-0 flex-1 flex-col gap-4 rounded-lg border bg-card p-4",
55        className,
56      )}
57    >
58      {(title || description) && (
59        <div className="flex flex-col gap-0.5">
60          {title && (
61            <h3 className="text-base font-semibold tracking-tight">{title}</h3>
62          )}
63          {description && (
64            <p className="text-sm text-muted-foreground">{description}</p>
65          )}
66        </div>
67      )}
68      <ChartContainer config={chartConfig} className="min-h-0 flex-1 w-full">
69        <AreaChart accessibilityLayer data={series}>
70          <defs>
71            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
72              <stop offset="0%" stopColor={chartColor} stopOpacity={0.2} />
73              <stop offset="100%" stopColor={chartColor} stopOpacity={0} />
74            </linearGradient>
75          </defs>
76          <CartesianGrid
77            vertical={false}
78            strokeDasharray="3 3"
79            stroke="var(--border)"
80          />
81          <XAxis
82            dataKey="time"
83            tickLine={false}
84            axisLine={false}
85            tickMargin={8}
86            tickFormatter={(value: string) => {
87              const date = new Date(value);
88              return date.toLocaleDateString("en-US", {
89                month: "short",
90// … truncated