import * as React from "react"

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

type SparklineTone =
  | "text-foreground"
  | "text-primary"
  | "text-muted-foreground"
  | "text-secondary-foreground"

interface SparklineProps extends React.SVGAttributes<SVGSVGElement> {
  data: number[]
  width?: number
  height?: number
  strokeWidth?: number
  tone?: SparklineTone
}

function Sparkline({
  data,
  width = 140,
  height = 32,
  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((value, index) => {
    const x = (index / (safeData.length - 1)) * width
    const y = height - ((value - min) / range) * height
    return `${x},${y}`
  })

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

  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      className={cn(tone, className)}
      fill="none"
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d={path} />
    </svg>
  )
}

export { Sparkline }
export type { SparklineProps, SparklineTone }
Sparkline

Dependencies

Files

Installation
