Line chart

"use client";

import {
  ChartcnLineChart,
  Line,
  XAxis,
  Legend,
  Tooltip,
  Dot,
  ActiveDot,
} from "@/components/charts/line-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 ChartcnExampleLineChart() {
  return (
    <ChartcnLineChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
      showBrush
      xDataKey="month"
      brushFormatLabel={(value) => String(value).slice(0, 3)}
    >
      <XAxis dataKey="month" tickFormatter={(value) => value.slice(0, 3)} />
      <Legend isClickable />
      <Tooltip />
      <Line dataKey="desktop" strokeVariant="solid" isClickable>
        <Dot variant="border" />
        <ActiveDot variant="colored-border" />
      </Line>
      <Line dataKey="mobile" strokeVariant="solid" isClickable>
        <Dot variant="border" />
        <ActiveDot variant="colored-border" />
      </Line>
    </ChartcnLineChart>
  );
}