Chart

1"use client"
2 
3import * as React from "react"
4import {
5  ChartContainer as BaseChartContainer,
6  ChartTooltip,
7  ChartTooltipContent as BaseChartTooltipContent,
8  ChartLegend,
9  ChartLegendContent as BaseChartLegendContent,
10} from "@/components/ui/chart"
11import { cn } from "@/lib/utils"
12import type { ChartConfig } from "@/components/ui/chart"
13 
14export interface ChartContainerProps extends React.ComponentProps<typeof BaseChartContainer> {
15  glow?: boolean
16}
17 
18export interface ChartTooltipContentProps extends React.ComponentProps<typeof BaseChartTooltipContent> {
19  glow?: boolean
20}
21 
22export interface ChartLegendContentProps extends React.ComponentProps<typeof BaseChartLegendContent> {
23  glow?: boolean
24}
25 
26/**
27 * Glass UI Chart - Enhanced chart components with glassy effects
28 */
29export const ChartContainer = React.forwardRef<
30  HTMLDivElement,
31  ChartContainerProps
32>(({ className, variant = "glass", glow = false, ...props }, ref) => {
33  return (
34    <BaseChartContainer
35      ref={ref}
36      variant={variant}
37      className={cn(
38        glow && "shadow-lg shadow-purple-500/20",
39        className
40      )}
41      {...props}
42    />
43  )
44})
45ChartContainer.displayName = "ChartContainer"
46 
47export const ChartTooltipContent = React.forwardRef<
48  HTMLDivElement,
49  ChartTooltipContentProps
50>(({ className, variant = "glass", glow = false, ...props }, ref) => {
51  return (
52    <BaseChartTooltipContent
53      ref={ref}
54      variant={variant}
55      className={cn(
56        glow && "shadow-lg shadow-purple-500/30",
57        className
58      )}
59      {...props}
60    />
61  )
62})
63ChartTooltipContent.displayName = "ChartTooltipContent"
64 
65export const ChartLegendContent = React.forwardRef<
66  HTMLDivElement,
67  ChartLegendContentProps
68>(({ className, variant = "glass", glow = false, ...props }, ref) => {
69  return (
70    <BaseChartLegendContent
71      ref={ref}
72      variant={variant}
73      className={cn(
74        glow && "shadow-md shadow-purple-500/20",
75        className
76      )}
77      {...props}
78    />
79  )
80})
81ChartLegendContent.displayName = "ChartLegendContent"
82 
83export {
84  ChartTooltip,
85  ChartLegend,
86}
87 
88export type { ChartConfig }
89