"use client"; import type * as React from "react"; import { Area, AreaChart as RechartsAreaChart, XAxis, YAxis, } from "recharts"; import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"; import { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; const CHART_COLORS = ["#00bbff", "#34d399", "#60a5fa", "#f472b6", "#fb923c"]; function toKeys(v: string | string[]): string[] { return Array.isArray(v) ? v : [v]; } function ChartCard({ title, description, footer, children, dataPoints = 0, }: { title?: string; description?: string; footer?: string; children: React.ReactNode; dataPoints?: number; }) { const maxWidth = dataPoints > 0 ? Math.min(768, Math.max(300, dataPoints * 80)) : undefined; return ( {(title || description) && ( {title && (

{title}

)} {description && (

{description}

)} )} {children} {footer && (

{footer}

)} ); } export type AreaChartProps = { data: Array>; xKey: string; yKeys: string | string[]; title?: string; description?: string; footer?: string; colors?: string[]; }; export function AreaChart(props: AreaChartProps) { const keys = toKeys(props.yKeys); const colors = props.colors ?? CHART_COLORS; const chartConfig: ChartConfig = Object.fromEntries( keys.map((key, i) => [ key, { label: key, color: colors[i % colors.length] }, ]), ); const showLegend = keys.length > 1; return ( {keys.map((key) => ( ))} } /> {showLegend && } />} {keys.map((key) => ( ))} ); }