Shadcn Area Chart Generator

"use client"

import { useId } from "react"
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
} from "@/components/ui/chart"

const data = [
  { Quarter: "Q1", "Product A": 12000, "Product B": 8000, "Product C": 5000 },
  { Quarter: "Q2", "Product A": 15000, "Product B": 9500, "Product C": 6200 },
  { Quarter: "Q3", "Product A": 18000, "Product B": 11000, "Product C": 7800 },
  { Quarter: "Q4", "Product A": 22000, "Product B": 13500, "Product C": 9100 },
]

const chartConfig = {
  "Product A": { label: "Product A", color: "var(--chart-1)" },
  "Product B": { label: "Product B", color: "var(--chart-2)" },
  "Product C": { label: "Product C", color: "var(--chart-3)" },
} satisfies ChartConfig

/** Tooltip for multi-series charts: the row total plus each series' share. */
function ChartBreakdownTooltip({
  active,
  payload,
  label,
  labelFormatter,
  config,
}: {
  active?: boolean
  payload?: ReadonlyArray<{ dataKey?: unknown; value?: unknown }>
  label?: string | number
  labelFormatter?: (label: unknown) => string
  config: ChartConfig
}) {
  if (!active || !payload?.length) return null

  const entries = payload
    .map((item) => {
      const key = String(item.dataKey)
      const value = Math.abs(Number(item.value))
      return {
        key,
        label: config[key]?.label ?? key,
        color: config[key]?.color ?? "var(--chart-1)",
        value: Number.isFinite(value) ? value : 0,
      }
    })
    .filter((entry) => entry.value > 0)
  if (entries.length === 0) return null

  const total = entries.reduce((sum, entry) => sum + entry.value, 0)
  const stops = entries.map((entry, index) => {
    const before = entries.slice(0, index).reduce((sum, e) => sum + e.value, 0)
    return `${entry.color} ${(before / total) * 100}% ${((before + entry.value) / total) * 100}%`
  })

  return (
    <div className="min-w-52 rounded-xl border border-border bg-card p-3 text-xs shadow-lg">
      <div className="mb-2 flex items-center justify-between gap-3">
        <span className="font-medium text-foreground">
          {label !== undefined && labelFormatter ? labelFormatter(label) : label}
        </span>
        <span className="font-mono font-semibold text-foreground">
          {new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(total)}
        </span>
      </div>
      <div className="flex items-center gap-3">
        <div
          className="relative size-14 shrink-0 rounded-full"
          style={{ background: `conic-gradient(${stops.join(", ")})` }}
        >
          <div className="absolute inset-1.5 rounded-full bg-card" />
        </div>
        <div className="flex flex-1 flex-col gap-1">
          {entries.map((entry) => (
            <div key={entry.key} className="flex items-center justify-between gap-3">
              <span className="flex items-center gap-1.5 text-muted-foreground">
                <span className="size-1.5 shrink-0 rounded-full" style={{ backgroundColor: entry.color }} />
                <span className="truncate">{entry.label}</span>
              </span>
              <span className="shrink-0 font-medium text-foreground">
                {Math.round((entry.value / total) * 100)}%
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export function Chart() {
  const uid = useId().replace(/[^\w-]/g, "")

  return (
    <ChartContainer config={chartConfig} className="aspect-auto h-[350px] w-full">
      <AreaChart accessibilityLayer data={data}>
        <defs>
          <linearGradient id={`${uid}-fill-0`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--chart-1)" stopOpacity={0.85} />
            <stop offset="100%" stopColor="var(--chart-1)" stopOpacity={0.04} />
          </linearGradient>
          <linearGradient id={`${uid}-fill-1`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--chart-2)" stopOpacity={0.85} />
            <stop offset="100%" stopColor="var(--chart-2)" stopOpacity={0.04} />
          </linearGradient>
          <linearGradient id={`${uid}-fill-2`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--chart-3)" stopOpacity={0.85} />
            <stop offset="100%" stopColor="var(--chart-3)" stopOpacity={0.04} />
          </linearGradient>
        </defs>
        <CartesianGrid vertical={false} strokeDasharray="3 5" />
        <XAxis dataKey="Quarter" tickLine={false} axisLine={false} tickMargin={10} />
        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={40} tickFormatter={(value) => new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(value)} />
        <ChartTooltip content={<ChartBreakdownTooltip config={chartConfig} />} />
        <ChartLegend content={<ChartLegendContent />} itemSorter={null} />
        <Area dataKey="Product A" type="natural" fill={`url(#${uid}-fill-0)`} fillOpacity={1} stroke="var(--chart-1)" strokeWidth={2.5} />
        <Area dataKey="Product B" type="natural" fill={`url(#${uid}-fill-1)`} fillOpacity={1} stroke="var(--chart-2)" strokeWidth={2.5} animationBegin={120} />
        <Area dataKey="Product C" type="natural" fill={`url(#${uid}-fill-2)`} fillOpacity={1} stroke="var(--chart-3)" strokeWidth={2.5} animationBegin={240} />
      </AreaChart>
    </ChartContainer>
  )
}