Gauge Chart

1/* eslint-disable react-refresh/only-export-components */
2import * as React from 'react'
3import { cva, type VariantProps } from 'class-variance-authority'
4import { cn } from '@/lib/utils'
5 
6const gaugeChartVariants = cva(
7  'relative flex items-center justify-center',
8  {
9    variants: {
10      size: {
11        sm: '',
12        md: '',
13        lg: '',
14      },
15      variant: {
16        semicircle: '',
17        full: '',
18        meter: '',
19      },
20    },
21    defaultVariants: {
22      size: 'md',
23      variant: 'semicircle',
24    },
25  }
26)
27 
28export interface GaugeChartZone {
29  from: number
30  to: number
31  color: string
32  label?: string
33}
34 
35export interface GaugeChartProps
36  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,
37    VariantProps<typeof gaugeChartVariants> {
38  value: number
39  min?: number
40  max?: number
41  zones?: GaugeChartZone[]
42  label?: string
43  valueFormatter?: (value: number) => string
44  showTicks?: boolean
45  animated?: boolean
46}
47 
48const DEFAULT_ZONES: GaugeChartZone[] = [
49  { from: 0, to: 33, color: 'hsl(var(--destructive))', label: 'Low' },
50  { from: 33, to: 66, color: 'hsl(var(--warning))', label: 'Medium' },
51  { from: 66, to: 100, color: 'hsl(var(--success))', label: 'High' },
52]
53 
54/**
55 * Variant arc configs (angles in SVG space: 0°=east, increasing = clockwise, y points down):
56 *   semicircle — 180° sweep, arc from left (180°) over the top (270°) to right (360°), open at bottom
57 *   full       — 360° sweep (full ring) starting at the top
58 *   meter      — same top semicircle as semicircle but with denser tick marks (every 10%)
59 */
60const VARIANT_ARC_CONFIG = {
61  semicircle: { arcStartDeg: 180, sweepDeg: 180 },
62  full:       { arcStartDeg: -90, sweepDeg: 360 }, // full 360° sweep
63  meter:      { arcStartDeg: 180, sweepDeg: 180 },
64} as const
65 
66type Variant = 'semicircle' | 'full' | 'meter'
67 
68const GaugeChart = React.forwardRef<HTMLDivElement, GaugeChartProps>(
69  (
70    {
71      value,
72      min = 0,
73      max = 100,
74      zones = DEFAULT_ZONES,
75      label,
76      valueFormatter = (v) => `${v}`,
77      showTicks = true,
78      animated = true,
79      size,
80      variant,
81      className,
82      ...props
83    },
84    ref
85  ) => {
86    const resolvedVariant: Variant = (variant as Variant) || 'semicircle'
87    const arcConfig = VARIANT_ARC_CONFIG[resolvedVariant]
88 
89    const normalizedValue = Math.max(min, Math.min(max, value))
90    const percentage = max === min ? 0 : ((normalizedValue - min) / (max - min)) * 100
91 
92// … truncated