import * as React from "react"

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

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

type LineChartSeries = {
  id: string
  label: string
  data: number[]
  tone?: LineChartTone
}

interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
  series: LineChartSeries[]
  labels?: string[]
  height?: number
  width?: number
  showDots?: boolean
  showLegend?: boolean
  showGrid?: boolean
  showArea?: boolean
}

const defaultTones: LineChartTone[] = [
  "text-primary",
  "text-foreground",
  "text-muted-foreground",
]

function getPoints(
  values: number[],
  width: number,
  height: number,
  padding: number,
  min: number,
  range: number
) {
  const safeValues = values.length > 1 ? values : [...values, values[0] ?? 0]
  const chartWidth = width - padding * 2
  const chartHeight = height - padding * 2
  const step = chartWidth / (safeValues.length - 1)

  return safeValues.map((value, index) => {
    const x = padding + step * index
    const y = padding + (1 - (value - min) / range) * chartHeight
    return { x, y }
  })
}

function buildLinePath(points: { x: number; y: number }[]) {
  if (points.length === 0) {
    return ""
  }

  return `M ${points.map((point) => `${point.x},${point.y}`).join(" L ")}`
}

function buildAreaPath(
  points: { x: number; y: number }[],
  height: number,
  padding: number
) {
  if (points.length === 0) {
    return ""
  }

  const baseline = height - padding
  const lastPoint = points[points.length - 1]
  const firstPoint = points[0]

  return `${buildLinePath(points)} L ${lastPoint.x},${baseline} L ${firstPoint.x},${baseline} Z`
}

function LineChart({
  series,
  labels,
  height = 180,
  width = 360,
  showDots = true,
  showLegend = true,
  showGrid = true,
  showArea = false,
  className,
  ...props
}: LineChartProps) {
  const allValues = series.flatMap((item) => item.data)
  const min = Math.min(0, ...allValues)
  const max = Math.max(1, ...allValues)
  const range = max - min || 1
  const padding = 16

  const resolvedSeries = series.map((item, index) => ({
    ...item,
    tone: item.tone ?? defaultTones[index % defaultTones.length],
  }))

  return (
    <div
      className={cn("rounded-2xl border border-border bg-card p-4", className)}
      {...props}
    >
      <svg
        width={width}
        height={height}
        viewBox={`0 0 ${width} ${height}`}
        className="w-full"
        fill="none"
      >
        {showGrid
          ? [0, 1, 2, 3].map((index) => {
              const y = padding + ((height - padding * 2) / 3) * index
              return (
                <line
                  key={index}
                  x1={padding}
                  y1={y}
                  x2={width - padding}
                  y2={y}
                  stroke="currentColor"
                  strokeWidth={1}
                  strokeOpacity={0.2}
                  className="text-muted-foreground"
                />
              )
            })
          : null}

        {resolvedSeries.map((item) => {
          const points = getPoints(item.data, width, height, padding, min, range)
          const linePath = buildLinePath(points)
          const areaPath = showArea ? buildAreaPath(points, height, padding) : ""

          return (
            <g key={item.id} className={cn(item.tone)}>
              {showArea ? (
                <path d={areaPath} fill="currentColor" fillOpacity={0.12} />
              ) : null}
              <path
                d={linePath}
                stroke="currentColor"
                strokeWidth={2}
                fill="none"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              {showDots
                ? points.map((point, index) => (
                    <circle
                      key={`${item.id}-${index}`}
                      cx={point.x}
                      cy={point.y}
                      r={3}
                      fill="currentColor"
                    />
                  ))
                : null}
            </g>
          )
        })}
      </svg>

      {labels && labels.length > 0 ? (
        <div className="mt-3 grid grid-cols-[repeat(auto-fit,minmax(0,1fr))] gap-2 text-xs text-muted-foreground">
          {labels.map((label) => (
            <span key={label} className="text-center">
              {label}
            </span>
          ))}
        </div>
      ) : null}

      {showLegend ? (
        <div className="mt-4 flex flex-wrap items-center gap-4">
          {resolvedSeries.map((item) => (
            <div key={item.id} className="flex items-center gap-2">
              <svg
                aria-hidden="true"
                viewBox="0 0 8 8"
                className={cn("h-2.5 w-2.5", item.tone)}
              >
                <circle cx="4" cy="4" r="4" fill="currentColor" />
              </svg>
              <span className="text-xs text-muted-foreground">{item.label}</span>
            </div>
          ))}
        </div>
      ) : null}
    </div>
  )
}

export { LineChart }
export type { LineChartProps, LineChartSeries, LineChartTone }
Line Chart

Dependencies

Files

Installation
