Sparkline Glass

1// ========================================
2// SPARKLINE GLASS COMPONENT
3// Recharts-based sparkline following shadcn/ui Charts pattern
4// ========================================
5 
6import { forwardRef, useMemo } from 'react';
7import { Bar, BarChart, Cell, ResponsiveContainer, Tooltip } from 'recharts';
8import { type VariantProps } from 'class-variance-authority';
9import { cn } from '@/lib/utils';
10import { sparklineContainerVariants } from '@/lib/variants/sparkline-glass-variants';
11import { type ChartConfig } from '@/components/ui/chart';
12import '@/glass-theme.css';
13 
14// ========================================
15// SPARKLINE CONFIG TYPE
16// ========================================
17 
18export type SparklineConfig = ChartConfig;
19 
20// ========================================
21// DEFAULT CONFIG
22// ========================================
23 
24const defaultSparklineConfig = {
25  value: {
26    label: 'Value',
27    // Use existing chart-1 color with fallback to primary accent
28    color: 'var(--sparkline-bar-fill, hsl(var(--chart-1-base)))',
29  },
30  max: {
31    label: 'Maximum',
32    // Use existing success color with fallback
33    color: 'var(--sparkline-bar-max, var(--alert-success-text))',
34  },
35} satisfies SparklineConfig;
36 
37// ========================================
38// SPARKLINE PROPS
39// ========================================
40 
41export interface SparklineGlassProps
42  extends
43    Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>,
44    VariantProps<typeof sparklineContainerVariants> {
45  /** Array of numeric values to display */
46  readonly data: readonly number[];
47  /** Labels for each bar (shown in tooltip) */
48  readonly labels?: readonly string[];
49  /** Show labels below bars */
50  readonly showLabels?: boolean;
51  /** Highlight the maximum value with different color */
52  readonly highlightMax?: boolean;
53  /** Color for regular bars (CSS variable or color) */
54  readonly barColor?: string;
55  /** Color for maximum bar */
56  readonly maxBarColor?: string;
57  /** Tooltips for each bar */
58  readonly tooltips?: readonly string[];
59  /** Enable animation */
60  readonly animated?: boolean;
61  /** Minimum bar height as percentage */
62  readonly minBarHeightPercent?: number;
63  /** Chart configuration (shadcn/ui pattern) */
64  readonly config?: SparklineConfig;
65  /** Value formatter for tooltip */
66  readonly valueFormatter?: (value: number, index: number) => string;
67  /** Callback when bar is clicked */
68  readonly onBarClick?: (value: number, index: number) => void;
69  /** Show tooltip on hover */
70// … truncated