"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string
  subtitle?: string
  legend?: React.ReactNode
  chartClassName?: string
}

const ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(
  ({ title, subtitle, legend, chartClassName, className, children, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "flex flex-col gap-5 rounded-2xl border border-border bg-card p-6",
          className
        )}
        {...props}
      >
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div className="space-y-1">
            <h3 className="text-lg font-semibold text-foreground">{title}</h3>
            {subtitle ? (
              <p className="text-sm text-muted-foreground">{subtitle}</p>
            ) : null}
          </div>
          {legend ? (
            <div className="flex flex-wrap items-center gap-2">{legend}</div>
          ) : null}
        </div>
        <div
          className={cn(
            "min-h-[200px] w-full rounded-xl border border-border bg-background p-4",
            chartClassName
          )}
        >
          {children}
        </div>
      </div>
    )
  }
)

ChartContainer.displayName = "ChartContainer"

export { ChartContainer }
export type { ChartContainerProps }
Chart Container

Weekly Performance

Dependencies

Files

Installation
