Bar Chart

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4export type BarChartVariant = 'DEFAULT' | 'ACTIVE' | 'WARNING' | 'CRITICAL'
5 
6export interface BarChartEntry {
7  label: string
8  value: number
9}
10 
11export interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
12  data:          BarChartEntry[]
13  orientation?:  'horizontal' | 'vertical'
14  variant?:      BarChartVariant
15  title?:        string
16  showValues?:   boolean
17  /** Override the max value for scaling. Defaults to max(data). */
18  max?:          number
19}
20 
21const VERTICAL_CHART_HEIGHT = 144  // px — 9rem
22 
23const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
24  (
25    {
26      className,
27      data,
28      orientation = 'horizontal',
29      variant     = 'ACTIVE',
30      title,
31      showValues  = true,
32      max,
33      style,
34      ...props
35    },
36    ref
37  ) => {
38    const computedMax = max ?? Math.max(...data.map((d) => d.value), 1)
39 
40    const accentColor =
41      variant === 'ACTIVE'   ? 'var(--color-green)' :
42      variant === 'WARNING'  ? 'var(--color-amber)' :
43      variant === 'CRITICAL' ? 'var(--color-red)'   :
44      'var(--text-secondary)'
45 
46    const accentGlow =
47      variant === 'ACTIVE'   ? 'var(--glow-green)' :
48      variant === 'WARNING'  ? 'var(--glow-amber)'  :
49      variant === 'CRITICAL' ? 'var(--glow-red)'    :
50      'none'
51 
52    return (
53      <div
54        ref={ref}
55        className={cn(className)}
56        style={{
57          border:     '1px solid var(--border)',
58          background: 'var(--surface)',
59          fontFamily: 'var(--font-mono)',
60          overflow:   'hidden',
61          ...style,
62        }}
63        {...props}
64      >
65        {/* Title bar */}
66        {title && (
67          <div
68            style={{
69              padding:       '0.4rem 0.75rem',
70              borderBottom:  '1px solid var(--border)',
71              background:    'var(--surface-raised)',
72              fontSize:      '0.6rem',
73              color:         'var(--text-muted)',
74              letterSpacing: '0.12em',
75              textTransform: 'uppercase',
76            }}
77          >
78            {title}
79          </div>
80        )}
81 
82        {orientation === 'horizontal' ? (
83          /* ── Horizontal bars ── */
84          <div
85            style={{
86              padding:       '0.75rem',
87              display:       'flex',
88              flexDirection: 'column',
89              gap:           '0.5rem',
90            }}
91          >
92            {data.map((entry, i) => {
93// … truncated