{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "charts-1",
  "title": "Revenue Bars With Year Select",
  "description": "Bar chart card of monthly revenue with a value label above each bar and a fiscal year select that swaps the whole dataset.",
  "dependencies": [
    "recharts",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "card",
    "chart",
    "select"
  ],
  "files": [
    {
      "path": "registry/blocks/charts/1/charts-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  type ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\n\nconst MONTHS = [\n  \"Jan\",\n  \"Feb\",\n  \"Mar\",\n  \"Apr\",\n  \"May\",\n  \"Jun\",\n  \"Jul\",\n  \"Aug\",\n  \"Sep\",\n  \"Oct\",\n  \"Nov\",\n  \"Dec\",\n]\n\nconst DATASETS: Record<string, number[]> = {\n  \"2024\": [\n    42_000, 58_300, 51_700, 74_200, 68_900, 91_400, 83_600, 107_500, 98_100,\n    121_300, 113_800, 139_600,\n  ],\n  \"2023\": [\n    28_400, 33_100, 39_800, 36_500, 44_200, 51_900, 48_700, 57_300, 61_800,\n    59_400, 68_100, 82_500,\n  ],\n  \"2022\": [\n    14_200, 17_800, 16_500, 21_300, 24_900, 22_600, 29_400, 31_200, 28_800,\n    35_500, 39_100, 47_300,\n  ],\n}\n\nconst YEARS = Object.keys(DATASETS).sort((a, b) => Number(b) - Number(a))\n\nconst chartConfig = {\n  revenue: {\n    label: \"Revenue\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartsBlock() {\n  const [year, setYear] = React.useState(YEARS[0])\n\n  const chartData = React.useMemo(\n    () =>\n      MONTHS.map((month, i) => ({\n        month,\n        revenue: DATASETS[year][i],\n      })),\n    [year]\n  )\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <Card className=\"w-full max-w-2xl\">\n        <CardHeader>\n          <CardTitle>Annual Revenue</CardTitle>\n          <CardDescription>\n            Monthly revenue for Acme Inc., fiscal year {year}\n          </CardDescription>\n          <CardAction>\n            <Select\n              value={year}\n              onValueChange={(value) => setYear(value as string)}\n            >\n              <SelectTrigger\n                className=\"w-24 tabular-nums\"\n                aria-label=\"Select fiscal year\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {YEARS.map((y) => (\n                  <SelectItem key={y} value={y} className=\"tabular-nums\">\n                    {y}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer\n            config={chartConfig}\n            className=\"h-64 w-full [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-ring [&_.recharts-surface:focus-visible]:outline-solid\"\n          >\n            <BarChart\n              aria-label=\"Revenue by month\"\n              data={chartData}\n              margin={{ top: 24, left: 0, right: 0 }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={\n                  <ChartTooltipContent\n                    formatter={(value) =>\n                      `$${Number(value).toLocaleString(\"en-US\")}`\n                    }\n                  />\n                }\n              />\n              <Bar\n                dataKey=\"revenue\"\n                fill=\"var(--color-revenue)\"\n                radius={0}\n                maxBarSize={40}\n                fillOpacity={0.9}\n              >\n                <LabelList\n                  dataKey=\"revenue\"\n                  position=\"top\"\n                  offset={8}\n                  className=\"fill-muted-foreground\"\n                  fontSize={10}\n                  formatter={(value) => `$${Math.round(Number(value) / 1000)}k`}\n                />\n              </Bar>\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/charts-1.tsx"
    }
  ],
  "meta": {
    "height": "452px",
    "tier": "free"
  },
  "categories": [
    "charts"
  ],
  "type": "registry:block"
}