Chart

npx shadcn@latest add https://brutallab.facilito.dev/r/chart.json

'use client';

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from '@/components/ui/chart';
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';

export default function Demo() {
  const data = [
    { week: 'W1', count: 4 },
    { week: 'W2', count: 7 },
    { week: 'W3', count: 10 },
    { week: 'W4', count: 12 },
  ];
  return (
    <div className="w-full">
      <p className="mb-4 bl-type-label">Components used per week</p>
      <ChartContainer
        config={{ count: { label: 'Components', color: 'var(--primary)' } }}
        className="h-56 w-full"
      >
        <BarChart accessibilityLayer data={data}>
          <CartesianGrid vertical={false} />
          <XAxis dataKey="week" />
          <YAxis allowDecimals={false} />
          <ChartTooltip content={<ChartTooltipContent />} />
          <Bar dataKey="count" fill="var(--color-count)" radius={4} />
        </BarChart>
      </ChartContainer>
      <p className="bl-type-small">
        Week 1: 4; Week 2: 7; Week 3: 10; Week 4: 12.
      </p>
    </div>
  );
}