"use client"

import * as React from "react"

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

interface SparklineChartProps extends React.SVGAttributes<SVGSVGElement> {
  data: number[]
  width?: number
  height?: number
  strokeWidth?: number
  showFill?: boolean
}

function SparklineChart({
  data,
  width = 160,
  height = 48,
  strokeWidth = 2,
  showFill = true,
  className,
  ...props
}: SparklineChartProps) {
  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 linePath = `M ${points.join(" L ")}`
  const areaPath = `${linePath} L ${width},${height} L 0,${height} Z`

  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      className={cn("text-primary", className)}
      fill="none"
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      {showFill ? (
        <path d={areaPath} fill="currentColor" opacity={0.12} stroke="none" />
      ) : null}
      <path d={linePath} />
    </svg>
  )
}

export { SparklineChart }
export type { SparklineChartProps }
Sparkline Chart

Dependencies

Files

Installation
