Line Chart

1'use client'
2 
3import * as React from 'react'
4import { cn } from '@/lib/utils'
5 
6export type LineChartVariant = 'DEFAULT' | 'ACTIVE' | 'WARNING' | 'CRITICAL'
7 
8export interface LineChartSeries {
9  id: string
10  label: string
11  data: number[]
12  variant?: LineChartVariant
13}
14 
15export interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
16  series: LineChartSeries[]
17  labels: string[]
18  title?: string
19  height?: number
20  min?: number
21  max?: number
22  showDots?: boolean
23  showArea?: boolean
24  showGrid?: boolean
25  showLegend?: boolean
26  animated?: boolean
27}
28 
29const LEFT   = 40
30const RIGHT  = 8
31const TOP    = 8
32const BOTTOM = 24
33 
34const SERIES_COLORS = [
35  'var(--color-green)',
36  'var(--color-amber)',
37  'var(--color-red)',
38  'var(--color-blue)',
39]
40 
41const VARIANT_COLORS: Record<LineChartVariant, string> = {
42  DEFAULT:  'var(--text-secondary)',
43  ACTIVE:   'var(--color-green)',
44  WARNING:  'var(--color-amber)',
45  CRITICAL: 'var(--color-red)',
46}
47 
48function seriesColor(s: LineChartSeries, idx: number): string {
49  if (s.variant) return VARIANT_COLORS[s.variant]
50  return SERIES_COLORS[idx % SERIES_COLORS.length]
51}
52 
53const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
54  (
55    {
56      className,
57      series,
58      labels,
59      title,
60      height    = 160,
61      min,
62      max,
63      showDots  = true,
64      showArea  = false,
65      showGrid  = true,
66      showLegend,
67      animated  = true,
68      style,
69      ...props
70    },
71    ref
72  ) => {
73    const containerRef = React.useRef<HTMLDivElement>(null)
74    const [svgW, setSvgW] = React.useState(500)
75    const [drawn, setDrawn] = React.useState(false)
76 
77    React.useEffect(() => {
78      if (!containerRef.current) return
79      const ro = new ResizeObserver(entries => {
80        setSvgW(entries[0].contentRect.width)
81      })
82      ro.observe(containerRef.current)
83      return () => ro.disconnect()
84    }, [])
85 
86    React.useEffect(() => {
87      const id = requestAnimationFrame(() => setDrawn(true))
88      return () => cancelAnimationFrame(id)
89    }, [])
90 
91    const allValues = series.flatMap(s => s.data)
92    const dataMin = allValues.length > 0 ? Math.min(...allValues) : 0
93    const dataMax = allValues.length > 0 ? Math.max(...allValues) : 100
94    const minV = min ?? dataMin
95    const maxV = max ?? dataMax
96    const range = Math.max(maxV - minV, 1)
97 
98    const plotW = svgW - LEFT - RIGHT
99    const plotH = height - TOP - BOTTOM
100    const n = labels.length
101 
102    function xPos(i: number) {
103// … truncated