Radar Chart

1'use client'
2 
3import * as React from 'react'
4import { cn } from '@/lib/utils'
5 
6export type RadarChartVariant = 'DEFAULT' | 'ACTIVE' | 'WARNING' | 'CRITICAL'
7 
8export interface RadarChartEntry {
9  axis: string
10  value: number  // 0–100
11}
12 
13export interface RadarChartProps extends React.HTMLAttributes<HTMLDivElement> {
14  data: RadarChartEntry[]
15  variant?: RadarChartVariant
16  title?: string
17  size?: number
18  showGrid?: boolean
19  showLabels?: boolean
20  showValues?: boolean
21}
22 
23const VARIANT_COLORS: Record<RadarChartVariant, string> = {
24  DEFAULT:  'var(--text-secondary)',
25  ACTIVE:   'var(--color-green)',
26  WARNING:  'var(--color-amber)',
27  CRITICAL: 'var(--color-red)',
28}
29 
30const LABEL_PAD = 36
31 
32const RadarChart = React.forwardRef<HTMLDivElement, RadarChartProps>(
33  (
34    {
35      className,
36      data,
37      variant    = 'ACTIVE',
38      title,
39      size       = 240,
40      showGrid   = true,
41      showLabels = true,
42      showValues = false,
43      style,
44      ...props
45    },
46    ref
47  ) => {
48    const [visible, setVisible] = React.useState(false)
49    React.useEffect(() => {
50      const id = requestAnimationFrame(() => setVisible(true))
51      return () => cancelAnimationFrame(id)
52    }, [])
53 
54    const color = VARIANT_COLORS[variant]
55    const cx = size / 2
56    const cy = size / 2
57    const r  = size / 2 - LABEL_PAD
58    const N  = data.length
59 
60    function axisAngle(i: number) {
61      return (i / N) * 2 * Math.PI - Math.PI / 2
62    }
63 
64    function gridPolygon(frac: number): string {
65      return data
66        .map((_, i) => {
67          const a = axisAngle(i)
68          return `${(cx + frac * r * Math.cos(a)).toFixed(2)},${(cy + frac * r * Math.sin(a)).toFixed(2)}`
69        })
70        .join(' ')
71    }
72 
73    const points = data.map((entry, i) => {
74      const a    = axisAngle(i)
75      const frac = Math.max(0, Math.min(1, entry.value / 100))
76      return {
77        x:     cx + frac * r * Math.cos(a),
78        y:     cy + frac * r * Math.sin(a),
79        ax:    cx + r * Math.cos(a),
80        ay:    cy + r * Math.sin(a),
81        a,
82        label: entry.axis,
83        value: entry.value,
84      }
85    })
86 
87    const dataPolygon = points.map(p => `${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(' ')
88 
89    function labelAnchor(a: number): React.SVGAttributes<SVGTextElement>['textAnchor'] {
90      const c = Math.cos(a)
91      if (Math.abs(c) < 0.3) return 'middle'
92      return c > 0 ? 'start' : 'end'
93    }
94 
95// … truncated