Area chart

"use client";

import {
  ChartcnAreaChart,
  Area,
  XAxis,
  Grid,
  Tooltip,
  Legend,
  Dot,
  ActiveDot,
} from "@/components/charts/area-chart";
import type { ChartConfig } from "@/components/ui/chart";

const data = [
  { desktop: 342, mobile: 245, month: "January" },
  { desktop: 876, mobile: 654, month: "February" },
  { desktop: 512, mobile: 387, month: "March" },
  { desktop: 629, mobile: 521, month: "April" },
  { desktop: 458, mobile: 412, month: "May" },
  { desktop: 781, mobile: 598, month: "June" },
  { desktop: 394, mobile: 312, month: "July" },
  { desktop: 925, mobile: 743, month: "August" },
  { desktop: 647, mobile: 489, month: "September" },
  { desktop: 532, mobile: 476, month: "October" },
  { desktop: 803, mobile: 687, month: "November" },
  { desktop: 271, mobile: 198, month: "December" },
];

const chartConfig = {
  desktop: {
    colors: {
      dark: ["#10b981"],
      light: ["#047857"],
    },
    label: "Desktop",
  },
  mobile: {
    colors: {
      dark: ["#f43f5e"],
      light: ["#be123c"],
    },
    label: "Mobile",
  },
} satisfies ChartConfig;

export function ChartcnExampleAreaChart() {
  return (
    <ChartcnAreaChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      stackType="stacked"
      showBrush
      xDataKey="month"
      brushFormatLabel={(value) => String(value).slice(0, 3)}
    >
      <Grid />
      <XAxis dataKey="month" tickFormatter={(value) => value.slice(0, 3)} />
      <Legend isClickable />
      <Tooltip />
      <Area dataKey="desktop" variant="gradient" isClickable>
        <Dot variant="border" />
        <ActiveDot variant="colored-border" />
      </Area>
      <Area dataKey="mobile" variant="gradient" isClickable>
        <Dot variant="border" />
        <ActiveDot variant="colored-border" />
      </Area>
    </ChartcnAreaChart>
  );
}