import * as React from "react"

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

type SparkLineTone = "text-primary" | "text-muted-foreground" | "text-foreground"

interface SparkLineProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
  value: string | number
  data: number[]
  width?: number
  height?: number
  strokeWidth?: number
  tone?: SparkLineTone
}

function SparkLine({
  label,
  value,
  data,
  width = 96,
  height = 28,
  strokeWidth = 2,
  tone = "text-primary",
  className,
  ...props
}: SparkLineProps) {
  const safeData = data.length > 1 ? data : [...data, data[0] ?? 0]
  const min = Math.min(...safeData)
  const max = Math.max(...safeData)
  const range = max - min || 1

  const points = safeData.map((point, index) => {
    const x = (index / (safeData.length - 1)) * width
    const y = height - ((point - min) / range) * height
    return `${x},${y}`
  })

  const path = `M ${points.join(" L ")}`

  return (
    <div
      className={cn(
        "flex items-center justify-between gap-4 rounded-lg border border-border bg-card px-3 py-2",
        className
      )}
      {...props}
    >
      <div className="min-w-0">
        <p className="text-xs text-muted-foreground">{label}</p>
        <p className="text-sm font-semibold text-foreground tabular-nums">
          {value}
        </p>
      </div>
      <svg
        width={width}
        height={height}
        viewBox={`0 0 ${width} ${height}`}
        className={cn("shrink-0", tone)}
        fill="none"
        stroke="currentColor"
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        role="img"
        aria-label={`${label} sparkline`}
      >
        <path d={path} />
      </svg>
    </div>
  )
}

export { SparkLine }
export type { SparkLineProps, SparkLineTone }
Spark Line

Dependencies

Files

Installation
