ui sparkline.tsx

0% Statements 0/23

0% Branches 0/1

0% Functions 0/1

0% Lines 0/23

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import * as React from "react";
import { Area, AreaChart, ResponsiveContainer } from "recharts";
import { chartColor } from "@/config/theme";
import { cn } from "@/lib/utils";
 
type SparklineProps = {
  data: { value: number }[];
  className?: string;
  color?: string;
};
 
export function Sparkline({ data, className, color = chartColor(1) }: SparklineProps) {
  const gradientId = React.useId().replace(/:/g, "");
 
  return (
    <div className={cn("h-12 w-28", className)}>
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={data} margin={{ top: 4, right: 0, left: 0, bottom: 0 }}>
          <defs>
            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={color} stopOpacity={0.35} />
              <stop offset="100%" stopColor={color} stopOpacity={0} />
            </linearGradient>
          </defs>
          <Area
            type="monotone"
            dataKey="value"
            stroke={color}
            strokeWidth={2}
            fill={`url(#${gradientId})`}
            dot={false}
            isAnimationActive={false}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}