"use client"

import * as React from "react"

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

interface MiniChartProps extends React.SVGAttributes<SVGSVGElement> {
  data: number[]
  height?: number
  width?: number
  variant?: "line" | "bar"
  strokeWidth?: number
  barRadius?: number
}

const MiniChart = React.forwardRef<SVGSVGElement, MiniChartProps>(
  (
    {
      data,
      height = 36,
      width = 140,
      variant = "line",
      strokeWidth = 2,
      barRadius = 2,
      className,
      ...props
    },
    ref
  ) => {
    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.map((point) => `${point.x},${point.y}`).join(" L ")}`

    const barWidth = width / safeData.length

    return (
      <svg
        ref={ref}
        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}
      >
        {variant === "bar" ? (
          <g fill="currentColor" stroke="none">
            {safeData.map((value, index) => {
              const barHeight = ((value - min) / range) * height
              const x = index * barWidth + barWidth * 0.2
              const y = height - barHeight
              const widthValue = barWidth * 0.6
              return (
                <rect
                  key={`${index}-${value}`}
                  x={x}
                  y={y}
                  width={widthValue}
                  height={barHeight}
                  rx={barRadius}
                />
              )
            })}
          </g>
        ) : (
          <path d={linePath} />
        )}
      </svg>
    )
  }
)

MiniChart.displayName = "MiniChart"

export { MiniChart }
export type { MiniChartProps }
Mini Chart

Dependencies

Files

Installation
