Sparkline Chart

1"use client";
2 
3import { Line, LineChart, YAxis } from "recharts";
4import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
5import { cn } from "@/lib/utils";
6 
7interface SparklineChartProps {
8  series: {
9    time: string;
10    value: number;
11  }[];
12  className?: string;
13}
14 
15const chartConfig = {
16  value: {
17    label: "Value",
18  },
19} satisfies ChartConfig;
20 
21const POSITIVE_COLOR = "hsl(160 84% 39%)";
22const NEGATIVE_COLOR = "hsl(0 84% 67%)";
23 
24const SparklineChart = ({ series, className }: SparklineChartProps) => {
25  if (!series.length) return null;
26 
27  const minValue = Math.min(...series.map((s) => s.value));
28  const maxValue = Math.max(...series.map((s) => s.value));
29 
30  const firstValue = series[0].value;
31  const lastValue = series[series.length - 1].value;
32  const percentChange =
33    firstValue !== 0 ? ((lastValue - firstValue) / firstValue) * 100 : 0;
34  const isPositive = percentChange >= 0;
35  const chartColor = isPositive ? POSITIVE_COLOR : NEGATIVE_COLOR;
36 
37  return (
38    <div className={cn("relative w-full h-[60px]", className)}>
39      <ChartContainer
40        config={chartConfig}
41        className="w-full h-[60px] shrink-0 pr-12"
42      >
43        <LineChart accessibilityLayer data={series}>
44          <YAxis domain={[minValue, maxValue]} hide />
45          <Line
46            dataKey="value"
47            type="natural"
48            dot={false}
49            stroke={chartColor}
50          />
51        </LineChart>
52      </ChartContainer>
53      <div
54        className={cn(
55          "absolute right-0 z-10",
56          isPositive ? "top-0" : "bottom-0",
57        )}
58      >
59        <span
60          className={cn(
61            "text-xs font-medium",
62            isPositive ? "text-emerald-500" : "text-red-400",
63          )}
64        >
65          {isPositive ? "+" : ""}
66          {percentChange.toFixed(2)}%
67        </span>
68      </div>
69    </div>
70  );
71};
72 
73export type { SparklineChartProps };
74export { SparklineChart };