Sparkline

import { Sparkline } from "@/components/ui/sparkline";

export default function Example() {
  return <Sparkline />;
}

"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Sparkline = forwardRef(({ className, data = [], width = 120, height = 32, color = "var(--primary)", ...props }, ref) => {
  const maxVal = Math.max(...data, 1);
  const minVal = Math.min(...data, 0);
  const range = maxVal - minVal || 1;
  const points = data.map((v, i) => `${(i / (data.length - 1 || 1)) * width},${height - ((v - minVal) / range) * height}`).join(" ");

  return (
    <svg ref={ref} width={width} height={height} className={cn("inline-block", className)} viewBox={`0 0 ${width} ${height}`} {...props}>
      <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
});
Sparkline.displayName = "Sparkline";

export { Sparkline };