Sparkline

import { useId } from "react";
import { cn } from "@dashboardpack/core/lib/utils";
export interface SparklineProps {
  data: number[];
  label: string;
  variant?: "line" | "bar";
  tone?: "primary" | "positive" | "negative";
  className?: string;
}
export function Sparkline({
  data,
  label,
  variant = "line",
  tone = "primary",
  className,
}: SparklineProps) {
  const id = useId();
  const points = data.filter(Number.isFinite);
  const width = 240,
    height = 64,
    padding = 4;
  const low = Math.min(0, ...points),
    high = Math.max(0, ...points);
  const range = high - low || 1;
  const y = (value: number) =>
    height - padding - ((value - low) / range) * (height - padding * 2);
  const x = (index: number) =>
    padding +
    (points.length === 1
      ? (width - padding * 2) / 2
      : (index / (points.length - 1)) * (width - padding * 2));
  if (!points.length)
    return (
      <p className={cn("text-xs text-muted-foreground", className)}>
        {label}: no data available.
      </p>
    );
  return (
    <svg
      viewBox={`0 0 ${width} ${height}`}
      role="img"
      aria-labelledby={`${id}-title ${id}-description`}
      className={cn(
        "h-16 w-full",
        tone === "negative"
          ? "text-destructive"
          : tone === "positive"
            ? "text-success"
            : "text-primary",
        className,
      )}
    >
      <title id={`${id}-title`}>{label}</title>
      <desc id={`${id}-description`}>
        {points.length} values: {points.join(", ")}. Ordered from left to right.
      </desc>
      <line
        x1={padding}
        x2={width - padding}
        y1={y(0)}
        y2={y(0)}
        stroke="currentColor"
        opacity="0.15"
      />
      {variant === "bar" ? (
        points.map((value, index) => {
          const barWidth = (width - padding * 2) / points.length;
          return (
            <rect
              key={index}
              x={padding + index * barWidth + barWidth * 0.15}
              y={Math.min(y(0), y(value))}
              width={barWidth * 0.7}
              height={Math.max(1, Math.abs(y(value) - y(0)))}
              rx="1.5"
              fill="currentColor"
            />
          );
        })
      ) : (
        <>
          <polyline
            points={points
              .map((value, index) => `${x(index)},${y(value)}`)
              .join(" ")}
            fill="none"
            stroke="currentColor"
            strokeWidth="2.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          {points.length === 1 && (
            <circle cx={x(0)} cy={y(points[0])} r="3" fill="currentColor" />
          )}
        </>
      )}
    </svg>
  );
}