Bar chart

"use client";

import {
  ChartcnBarChart,
  Bar,
  XAxis,
  Grid,
  Tooltip,
  Legend,
} from "@/components/charts/bar-chart";
import type { ChartConfig } from "@/components/ui/chart";

const data = [
  { desktop: 342, mobile: 184, month: "January" },
  { desktop: 876, mobile: 491, month: "February" },
  { desktop: 512, mobile: 290, month: "March" },
  { desktop: 629, mobile: 391, month: "April" },
  { desktop: 458, mobile: 309, month: "May" },
  { desktop: 781, mobile: 449, month: "June" },
  { desktop: 394, mobile: 234, month: "July" },
  { desktop: 925, mobile: 557, month: "August" },
  { desktop: 647, mobile: 367, month: "September" },
  { desktop: 532, mobile: 357, month: "October" },
  { desktop: 803, mobile: 515, month: "November" },
  { desktop: 271, mobile: 149, month: "December" },
];

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

export function ChartcnExampleBarChart() {
  return (
    <ChartcnBarChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      xDataKey="month"
      showBrush
      brushFormatLabel={(value) => String(value).slice(0, 3)}
    >
      <Grid />
      <XAxis dataKey="month" tickFormatter={(value) => value.slice(0, 3)} />
      <Legend isClickable />
      <Tooltip />
      <Bar dataKey="desktop" variant="default" isClickable />
      <Bar dataKey="mobile" variant="default" isClickable />
    </ChartcnBarChart>
  );
}