Mini Chart

"use client";

import * as React from "react";

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

/**
 * Dependency-free SVG charts for dashboards and stat tiles. They are
 * intentionally small; reach for a charting library once you need axes,
 * tooltips, or more than one series.
 */

type SparklineProps = React.ComponentProps<"svg"> & {
  data: number[];
  /** Fill the area under the line. @default true */
  area?: boolean;
  strokeWidth?: number;
  /** Highlight the last point. @default true */
  dot?: boolean;
};

function Sparkline({ data, area = true, strokeWidth = 1.5, dot = true, className, ...props }: SparklineProps) {
  const w = 100;
  const h = 32;
  const pad = 2;
  const max = Math.max(...data, 1);
  const min = Math.min(...data, 0);
  const range = max - min || 1;
  const pts = data.map((v, i) => {
    const x = pad + (i / Math.max(1, data.length - 1)) * (w - pad * 2);
    const y = h - pad - ((v - min) / range) * (h - pad * 2);
    return [x, y] as const;
  });
  const line = pts.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
  const last = pts[pts.length - 1];
  const id = React.useId().replace(/[^a-zA-Z0-9_-]/g, "");
  return (
    <svg
      data-slot="sparkline"
      viewBox={`0 0 ${w} ${h}`}
      preserveAspectRatio="none"
      className={cn("h-8 w-full overflow-visible text-brand", className)}
      aria-hidden="true"
      {...props}
    >
      {area ? (
        <>
          <defs>
            <linearGradient id={`grad-${id}`} x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="currentColor" stopOpacity="0.25" />
              <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d={`${line} L${last?.[0] ?? w},${h} L${pts[0]?.[0] ?? 0},${h} Z`} fill={`url(#grad-${id})`} />
        </>
      ) : null}
      <path d={line} fill="none" stroke="currentColor" strokeWidth={strokeWidth} vectorEffect="non-scaling-stroke" strokeLinejoin="round" strokeLinecap="round" />
      {dot && last ? <circle cx={last[0]} cy={last[1]} r={2} fill="currentColor" vectorEffect="non-scaling-stroke" /> : null}
    </svg>
  );
}

type BarDatum = { label: string; value: number; color?: string };

type BarChartProps = React.ComponentProps<"div"> & {
  data: BarDatum[];
  /** Chart height in px. @default 120 */
  height?: number;
  format?: (value: number) => string;
  /** Show the value above each bar. */
  showValues?: boolean;
};

function BarChart({ data, height = 120, format = (v) => String(v), showValues = false, className, ...props }: BarChartProps) {
  const max = Math.max(...data.map((d) => d.value), 1);
  return (
    <div data-slot="bar-chart" className={cn("flex w-full flex-col gap-2", className)} {...props}>
      <div className="flex w-full items-end gap-1.5" style={{ height }}>
        {data.map((d) => (
          <div key={d.label} className="group/bar flex h-full flex-1 flex-col items-center justify-end gap-1" title={`${d.label}: ${format(d.value)}`}>
            {showValues ? <span className="text-[10px] tabular-nums text-muted-foreground opacity-0 transition-opacity group-hover/bar:opacity-100">{format(d.value)}</span> : null}
            <div
              className="w-full rounded-t-sm bg-brand transition-[height] duration-500 ease-out group-hover/bar:opacity-80"
              style={{ height: `${(d.value / max) * 100}%`, background: d.color }}
            />
          </div>
        ))}
      </div>
      <div className="flex w-full gap-1.5">
        {data.map((d) => (
          <span key={d.label} className="flex-1 truncate text-center text-[10px] text-muted-foreground">
            {d.label}
          </span>
        ))}
      </div>
    </div>
  );
}

type StatTileProps = React.ComponentProps<"div"> & {
  label: React.ReactNode;
  value: React.ReactNode;
  /** Small trailing text such as "+12% vs last week". */
  delta?: React.ReactNode;
  deltaTone?: "up" | "down" | "neutral";
  /** Optional chart rendered under the value. */
  chart?: React.ReactNode;
};

function StatTile({ label, value, delta, deltaTone = "neutral", chart, className, ...props }: StatTileProps) {
  return (
    <div data-slot="stat-tile" className={cn("flex flex-col gap-2 rounded-2xl border bg-card p-4", className)} {...props}>
      <span className="text-xs text-muted-foreground">{label}</span>
      <div className="flex items-baseline justify-between gap-2">
        <span className="text-2xl font-semibold tracking-tight tabular-nums">{value}</span>
        {delta ? (
          <span
            className={cn(
              "text-xs tabular-nums",
              deltaTone === "up" && "text-emerald-600 dark:text-emerald-400",
              deltaTone === "down" && "text-red-600 dark:text-red-400",
              deltaTone === "neutral" && "text-muted-foreground",
            )}
          >
            {delta}
          </span>
        ) : null}
      </div>
      {chart}
    </div>
  );
}

export { Sparkline, BarChart, StatTile };
export type { BarDatum };