"use client";
import * as React from "react";
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Label,
  Line,
  LineChart,
  Pie,
  PieChart,
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
  RadialBar,
  RadialBarChart,
  XAxis,
  YAxis,
} from "recharts";
import { ArrowUpRightIcon } from "@phosphor-icons/react";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

/* ---------- Data ---------- */

const activity = [
  { month: "Jan", bills: 18, petitions: 42, hearings: 12 },
  { month: "Feb", bills: 24, petitions: 55, hearings: 19 },
  { month: "Mar", bills: 31, petitions: 48, hearings: 15 },
  { month: "Apr", bills: 22, petitions: 71, hearings: 28 },
  { month: "May", bills: 37, petitions: 66, hearings: 24 },
  { month: "Jun", bills: 44, petitions: 89, hearings: 33 },
];
const activityConfig = {
  petitions: { label: "Petitions", color: "var(--secondary)" },
  bills: { label: "Bills", color: "var(--primary)" },
  hearings: { label: "Hearings", color: "var(--tertiary)" },
} satisfies ChartConfig;

const votes = [
  { commission: "I", yes: 62, no: 18, abstain: 9 },
  { commission: "II", yes: 36, no: 44, abstain: 12 },
  { commission: "V", yes: 71, no: 11, abstain: 6 },
  { commission: "VII", yes: 33, no: 47, abstain: 10 },
  { commission: "X", yes: 55, no: 22, abstain: 14 },
];
const votesConfig = {
  yes: { label: "Yes", color: "var(--primary)" },
  no: { label: "No", color: "var(--tertiary)" },
  abstain: { label: "Abstain", color: "var(--accent)" },
} satisfies ChartConfig;

const seats = [
  { faction: "hijau", seats: 128, fill: "var(--color-hijau)" },
  { faction: "biru", seats: 94, fill: "var(--color-biru)" },
  { faction: "ungu", seats: 71, fill: "var(--color-ungu)" },
  { faction: "kuning", seats: 52, fill: "var(--color-kuning)" },
  { faction: "lain", seats: 30, fill: "var(--color-lain)" },
];
const seatsConfig = {
  seats: { label: "Seats" },
  hijau: { label: "Fraksi Hijau", color: "var(--success)" },
  biru: { label: "Fraksi Biru", color: "var(--secondary)" },
  ungu: { label: "Fraksi Ungu", color: "var(--tertiary)" },
  kuning: { label: "Fraksi Kuning", color: "var(--warning)" },
  lain: { label: "Others", color: "var(--primary)" },
} satisfies ChartConfig;

const goals = [
  { goal: "bills", value: 78, fill: "var(--color-bills)" },
  { goal: "hearings", value: 62, fill: "var(--color-hearings)" },
  { goal: "petitions", value: 91, fill: "var(--color-petitions)" },
];
const goalsConfig = {
  value: { label: "Progress" },
  bills: { label: "Bills passed", color: "var(--primary)" },
  hearings: { label: "Hearings held", color: "var(--tertiary)" },
  petitions: { label: "Petitions answered", color: "var(--secondary)" },
} satisfies ChartConfig;

const skills = [
  { area: "Economy", fraksiHijau: 82, fraksiBiru: 64 },
  { area: "Health", fraksiHijau: 70, fraksiBiru: 88 },
  { area: "Education", fraksiHijau: 91, fraksiBiru: 72 },
  { area: "Environment", fraksiHijau: 95, fraksiBiru: 48 },
  { area: "Defense", fraksiHijau: 40, fraksiBiru: 77 },
  { area: "Tech", fraksiHijau: 66, fraksiBiru: 81 },
];
const skillsConfig = {
  fraksiHijau: { label: "Fraksi Hijau", color: "var(--success)" },
  fraksiBiru: { label: "Fraksi Biru", color: "var(--secondary)" },
} satisfies ChartConfig;

/* ---------- Shared bits ---------- */

const axis = { tickLine: false, axisLine: false } as const;

function ChartCard({ title, description, children, footer, action }: { title: string; description: string; children: React.ReactNode; footer?: React.ReactNode; action?: React.ReactNode }) {
  return (
    <Card className="flex flex-col">
      <CardHeader className="flex-row flex-wrap items-start justify-between gap-3">
        <div className="flex flex-col gap-1.5">
          <CardTitle>{title}</CardTitle>
          <CardDescription>{description}</CardDescription>
        </div>
        {action}
      </CardHeader>
      <CardContent className="flex-1">{children}</CardContent>
      {footer && <CardFooter className="flex-wrap text-sm font-semibold">{footer}</CardFooter>}
    </Card>
  );
}

function Trend({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Badge variant="soft" color="success"><ArrowUpRightIcon weight="bold" />{children}</Badge>
      <span className="text-on-surface-muted">vs last session</span>
    </>
  );
}

/* ---------- Area ---------- */

function AreaCharts() {
  const [mode, setMode] = React.useState<"overlap" | "stacked" | "expanded">("overlap");
  const stack = mode === "overlap" ? undefined : "a";
  return (
    <ChartCard
      title="Floor activity"
      description="Bills, petitions and hearings, first half of the session."
      action={
        <ToggleGroup type="single" size="sm" value={mode} onValueChange={(v) => v && setMode(v as typeof mode)} aria-label="Area layout">
          <ToggleGroupItem value="overlap">Overlap</ToggleGroupItem>
          <ToggleGroupItem value="stacked">Stacked</ToggleGroupItem>
          <ToggleGroupItem value="expanded">100%</ToggleGroupItem>
        </ToggleGroup>
      }
      footer={<Trend>+18.4%</Trend>}
    >
      <ChartContainer config={activityConfig} className="aspect-auto h-72 w-full">
        <AreaChart data={activity} margin={{ left: -16, right: 8, top: 8 }} stackOffset={mode === "expanded" ? "expand" : undefined}>
          <defs>
            {(Object.keys(activityConfig) as (keyof typeof activityConfig)[]).map((k) => (
              <linearGradient key={k} id={`area-${k}`} x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={`var(--color-${k})`} stopOpacity={0.7} />
                <stop offset="95%" stopColor={`var(--color-${k})`} stopOpacity={0.05} />
              </linearGradient>
            ))}
          </defs>
          <CartesianGrid vertical={false} strokeDasharray="4 6" />
          <XAxis dataKey="month" {...axis} tickMargin={8} />
          <YAxis {...axis} tickMargin={4} tickFormatter={mode === "expanded" ? (v) => `${Math.round(v * 100)}%` : undefined} />
          <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
          {(["petitions", "hearings", "bills"] as const).map((k) => (
            <Area key={k} dataKey={k} type="natural" stackId={stack} fill={`url(#area-${k})`} stroke={`var(--color-${k})`} strokeWidth={3} />
          ))}
          <ChartLegend content={<ChartLegendContent />} />
        </AreaChart>
      </ChartContainer>
    </ChartCard>
  );
}

/* ---------- Bar ---------- */

function BarCharts() {
  return (
    <div className="grid gap-6 lg:grid-cols-2">
      <ChartCard title="Votes by commission" description="Grouped. Last flagship bill." footer={<Trend>+6 yes votes</Trend>}>
        <ChartContainer config={votesConfig} className="aspect-auto h-64 w-full">
          <BarChart data={votes} margin={{ left: -16, right: 8, top: 8 }} barGap={4}>
            <CartesianGrid vertical={false} strokeDasharray="4 6" />
            <XAxis dataKey="commission" {...axis} tickMargin={8} tickFormatter={(v) => `K-${v}`} />
            <YAxis {...axis} tickMargin={4} />
            <ChartTooltip cursor={{ radius: 12 }} content={<ChartTooltipContent labelFormatter={(l) => `Komisi ${l}`} />} />
            {(["yes", "no", "abstain"] as const).map((k) => (
              <Bar key={k} dataKey={k} fill={`var(--color-${k})`} radius={[10, 10, 4, 4]} />
            ))}
            <ChartLegend content={<ChartLegendContent />} />
          </BarChart>
        </ChartContainer>
      </ChartCard>

      <ChartCard title="Stacked" description="Total votes split by choice.">
        <ChartContainer config={votesConfig} className="aspect-auto h-64 w-full">
          <BarChart data={votes} margin={{ left: -16, right: 8, top: 8 }}>
            <CartesianGrid vertical={false} strokeDasharray="4 6" />
            <XAxis dataKey="commission" {...axis} tickMargin={8} tickFormatter={(v) => `K-${v}`} />
            <ChartTooltip cursor={{ radius: 12 }} content={<ChartTooltipContent labelFormatter={(l) => `Komisi ${l}`} />} />
            <Bar dataKey="yes" stackId="v" fill="var(--color-yes)" radius={[0, 0, 8, 8]} />
            <Bar dataKey="no" stackId="v" fill="var(--color-no)" />
            <Bar dataKey="abstain" stackId="v" fill="var(--color-abstain)" radius={[8, 8, 0, 0]} />
          </BarChart>
        </ChartContainer>
      </ChartCard>

      <ChartCard title="Horizontal" description="Yes votes, ranked." >
        <ChartContainer config={votesConfig} className="aspect-auto h-64 w-full">
          <BarChart data={[...votes].sort((a, b) => b.yes - a.yes)} layout="vertical" margin={{ left: 0, right: 24 }}>
            <XAxis type="number" hide />
            <YAxis dataKey="commission" type="category" {...axis} width={44} tickFormatter={(v) => `K-${v}`} />
            <ChartTooltip cursor={{ radius: 12 }} content={<ChartTooltipContent hideLabel />} />
            <Bar dataKey="yes" fill="var(--color-yes)" radius={10} label={{ position: "right", className: "fill-on-surface font-mono text-xs font-bold" }} />
          </BarChart>
        </ChartContainer>
      </ChartCard>

      <ChartCard title="Negative" description="Net support (yes minus no).">
        <ChartContainer config={{ net: { label: "Net support", color: "var(--primary)" } }} className="aspect-auto h-64 w-full">
          <BarChart data={votes.map((v) => ({ commission: v.commission, net: v.yes - v.no }))} margin={{ left: -16, right: 8, top: 8 }}>
            <CartesianGrid vertical={false} strokeDasharray="4 6" />
            <XAxis dataKey="commission" {...axis} tickMargin={8} tickFormatter={(v) => `K-${v}`} />
            <YAxis {...axis} tickMargin={4} />
            <ChartTooltip cursor={{ radius: 12 }} content={<ChartTooltipContent hideIndicator labelFormatter={(l) => `Komisi ${l}`} />} />
            <Bar dataKey="net" radius={10}>
              {votes.map((v) => (
                <Cell key={v.commission} fill={v.yes - v.no >= 0 ? "var(--success)" : "var(--danger)"} />
              ))}
            </Bar>
          </BarChart>
        </ChartContainer>
      </ChartCard>
    </div>
  );
}

/* ---------- Line ---------- */

function LineCharts() {
  const [series, setSeries] = React.useState<(keyof typeof activityConfig)[]>(["petitions", "bills"]);
  return (
    <ChartCard
      title="Trends"
      description="Pick the series to compare."
      action={
        <ToggleGroup type="multiple" size="sm" value={series} onValueChange={(v) => v.length && setSeries(v as typeof series)} aria-label="Series">
          {(Object.keys(activityConfig) as (keyof typeof activityConfig)[]).map((k) => (
            <ToggleGroupItem key={k} value={k}>
              <span className="size-2.5 rounded-full" style={{ background: activityConfig[k].color }} />
              {activityConfig[k].label}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      }
    >
      <ChartContainer config={activityConfig} className="aspect-auto h-72 w-full">
        <LineChart data={activity} margin={{ left: -16, right: 12, top: 12 }}>
          <CartesianGrid vertical={false} strokeDasharray="4 6" />
          <XAxis dataKey="month" {...axis} tickMargin={8} />
          <YAxis {...axis} tickMargin={4} />
          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
          {series.map((k) => (
            <Line
              key={k}
              dataKey={k}
              type="natural"
              stroke={`var(--color-${k})`}
              strokeWidth={3.5}
              dot={{ r: 5, fill: `var(--color-${k})`, strokeWidth: 3, stroke: "var(--surface)" }}
              activeDot={{ r: 8, strokeWidth: 3, stroke: "var(--surface)" }}
            />
          ))}
        </LineChart>
      </ChartContainer>
    </ChartCard>
  );
}

/* ---------- Pie ---------- */

function PieCharts() {
  const total = seats.reduce((s, d) => s + d.seats, 0);
  const [active, setActive] = React.useState<string>("hijau");
  const current = seats.find((s) => s.faction === active)!;
  return (
    <div className="grid gap-6 lg:grid-cols-2">
      <ChartCard title="Seat share" description="Donut with the total in the middle.">
        <ChartContainer config={seatsConfig} className="mx-auto aspect-square max-h-72">
          <PieChart>
            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel nameKey="faction" />} />
            <Pie data={seats} dataKey="seats" nameKey="faction" innerRadius="58%" outerRadius="92%" paddingAngle={3} cornerRadius={10} strokeWidth={0}>
              <Label
                content={({ viewBox }) =>
                  viewBox && "cx" in viewBox ? (
                    <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
                      <tspan x={viewBox.cx} y={viewBox.cy} className="fill-on-surface text-3xl font-extrabold">{total}</tspan>
                      <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) + 24} className="fill-on-surface-muted text-xs font-semibold">seats</tspan>
                    </text>
                  ) : null
                }
              />
            </Pie>
            <ChartLegend content={<ChartLegendContent nameKey="faction" />} />
          </PieChart>
        </ChartContainer>
      </ChartCard>

      <ChartCard
        title="Interactive"
        description="Pick a faction to pull its slice out."
        action={
          <ToggleGroup type="single" size="sm" value={active} onValueChange={(v) => v && setActive(v)} aria-label="Faction" className="flex-wrap">
            {seats.slice(0, 3).map((s) => (
              <ToggleGroupItem key={s.faction} value={s.faction} className="capitalize">{s.faction}</ToggleGroupItem>
            ))}
          </ToggleGroup>
        }
        footer={
          <span>
            {seatsConfig[current.faction as keyof typeof seatsConfig].label} holds <b>{Math.round((current.seats / total) * 100)}%</b> of the floor.
          </span>
        }
      >
        <ChartContainer config={seatsConfig} className="mx-auto aspect-square max-h-72">
          <PieChart>
            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel nameKey="faction" />} />
            <Pie data={seats} dataKey="seats" nameKey="faction" outerRadius="80%" cornerRadius={8} strokeWidth={4} stroke="var(--surface)">
              {seats.map((s) => (
                <Cell key={s.faction} fill={s.fill} opacity={s.faction === active ? 1 : 0.45} style={{ transition: "opacity 200ms" }} />
              ))}
            </Pie>
          </PieChart>
        </ChartContainer>
      </ChartCard>
    </div>
  );
}

/* ---------- Radial ---------- */

function RadialCharts() {
  return (
    <div className="grid gap-6 lg:grid-cols-2">
      <ChartCard title="Session goals" description="Progress towards this session's targets.">
        <ChartContainer config={goalsConfig} className="mx-auto aspect-square max-h-72">
          <RadialBarChart data={goals} innerRadius="30%" outerRadius="100%" startAngle={90} endAngle={-270}>
            <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel nameKey="goal" />} />
            <RadialBar dataKey="value" background={{ fill: "var(--surface-sunken)" }} cornerRadius={12} />
            <ChartLegend content={<ChartLegendContent nameKey="goal" />} />
          </RadialBarChart>
        </ChartContainer>
      </ChartCard>

      <ChartCard title="Quorum" description="Members present today." footer={<Trend>+4 members</Trend>}>
        <ChartContainer config={{ present: { label: "Present", color: "var(--primary)" } }} className="mx-auto aspect-square max-h-72">
          <RadialBarChart data={[{ present: 412, fill: "var(--color-present)" }]} startAngle={180} endAngle={0} innerRadius="70%" outerRadius="105%" cy="65%">
            <PolarAngleAxis type="number" domain={[0, 575]} tick={false} />
            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
              <Label
                content={({ viewBox }) =>
                  viewBox && "cx" in viewBox ? (
                    <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
                      <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) - 12} className="fill-on-surface text-3xl font-extrabold">412</tspan>
                      <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) + 12} className="fill-on-surface-muted text-xs font-semibold">of 575 members</tspan>
                    </text>
                  ) : null
                }
              />
            </PolarRadiusAxis>
            <RadialBar dataKey="present" background={{ fill: "var(--surface-sunken)" }} cornerRadius={14} />
          </RadialBarChart>
        </ChartContainer>
      </ChartCard>
    </div>
  );
}

/* ---------- Radar ---------- */

function RadarCharts() {
  return (
    <ChartCard title="Policy focus" description="How often each faction speaks on a topic.">
      <ChartContainer config={skillsConfig} className="mx-auto aspect-square max-h-80">
        <RadarChart data={skills} outerRadius="72%">
          <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
          <PolarGrid className="stroke-outline" />
          <PolarAngleAxis dataKey="area" tick={{ className: "fill-on-surface-muted text-xs font-semibold" }} />
          <Radar dataKey="fraksiBiru" fill="var(--color-fraksiBiru)" fillOpacity={0.35} stroke="var(--color-fraksiBiru)" strokeWidth={3} />
          <Radar dataKey="fraksiHijau" fill="var(--color-fraksiHijau)" fillOpacity={0.45} stroke="var(--color-fraksiHijau)" strokeWidth={3} dot={{ r: 4, fillOpacity: 1 }} />
          <ChartLegend content={<ChartLegendContent />} />
        </RadarChart>
      </ChartContainer>
    </ChartCard>
  );
}

/* ---------- Gallery ---------- */

const kinds = [
  { value: "area", label: "Area", Chart: AreaCharts },
  { value: "bar", label: "Bar", Chart: BarCharts },
  { value: "line", label: "Line", Chart: LineCharts },
  { value: "pie", label: "Pie", Chart: PieCharts },
  { value: "radial", label: "Radial", Chart: RadialCharts },
  { value: "radar", label: "Radar", Chart: RadarCharts },
];

export default function ChartDemo() {
  return (
    <Tabs defaultValue="area" className="w-full">
      <div className="-mx-1 overflow-x-auto px-1 pb-1">
        <TabsList>
          {kinds.map((k) => (
            <TabsTrigger key={k.value} value={k.value}>{k.label}</TabsTrigger>
          ))}
        </TabsList>
      </div>
      {kinds.map(({ value, Chart }) => (
        <TabsContent key={value} value={value}>
          <Chart />
        </TabsContent>
      ))}
    </Tabs>
  );
}
Floor activity

Installation

Floor activity
