{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-block",
  "title": "Chart",
  "description": "Beautiful charts with bar, line, and area visualizations.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "@sistine/card",
    "@sistine/chart",
    "@sistine/tabs"
  ],
  "files": [
    {
      "path": "components/blocks/chart.tsx",
      "content": "\"use client\";\n\nimport { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from \"recharts\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from \"@/components/ui/chart\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nconst barChartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 273,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n];\n\nconst lineChartData = [\n  {\n    month: \"Jan\",\n    revenue: 186,\n    profit: 80,\n  },\n  {\n    month: \"Feb\",\n    revenue: 305,\n    profit: 200,\n  },\n  {\n    month: \"Mar\",\n    revenue: 237,\n    profit: 120,\n  },\n  {\n    month: \"Apr\",\n    revenue: 273,\n    profit: 190,\n  },\n  {\n    month: \"May\",\n    revenue: 209,\n    profit: 130,\n  },\n  {\n    month: \"Jun\",\n    revenue: 214,\n    profit: 140,\n  },\n];\n\nconst areaChartData = [\n  {\n    month: \"Jan\",\n    sales: 186,\n    returns: 20,\n  },\n  {\n    month: \"Feb\",\n    sales: 305,\n    returns: 45,\n  },\n  {\n    month: \"Mar\",\n    sales: 237,\n    returns: 30,\n  },\n  {\n    month: \"Apr\",\n    sales: 273,\n    returns: 50,\n  },\n  {\n    month: \"May\",\n    sales: 209,\n    returns: 35,\n  },\n  {\n    month: \"Jun\",\n    sales: 214,\n    returns: 40,\n  },\n];\n\nexport function ChartBlock() {\n  return (\n    <div className=\"p-6 space-y-6\">\n      <div>\n        <h2 className=\"text-3xl font-bold text-foreground\">Charts</h2>\n        <p className=\"text-muted-foreground\">Visualize your data with beautiful charts</p>\n      </div>\n\n      <Tabs defaultValue=\"bar\" className=\"w-full\">\n        <TabsList className=\"mb-6\">\n          <TabsTrigger value=\"bar\">Bar Chart</TabsTrigger>\n          <TabsTrigger value=\"line\">Line Chart</TabsTrigger>\n          <TabsTrigger value=\"area\">Area Chart</TabsTrigger>\n        </TabsList>\n\n        <TabsContent value=\"bar\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-foreground\">Bar Chart</CardTitle>\n              <CardDescription className=\"text-muted-foreground\">Desktop vs Mobile traffic comparison</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <ChartContainer\n                config={{\n                  desktop: {\n                    label: \"Desktop\",\n                    color: \"var(--chart-1)\",\n                  },\n                  mobile: {\n                    label: \"Mobile\",\n                    color: \"var(--chart-2)\",\n                  },\n                }}\n                className=\"h-[300px]\"\n              >\n                <BarChart data={barChartData}>\n                  <CartesianGrid strokeDasharray=\"3 3\" className=\"stroke-muted\" />\n                  <XAxis dataKey=\"month\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={(value) => value.slice(0, 3)} />\n                  <YAxis tickLine={false} axisLine={false} tickMargin={8} />\n                  <ChartTooltip content={<ChartTooltipContent />} />\n                  <ChartLegend content={<ChartLegendContent />} />\n                  <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n                  <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n                </BarChart>\n              </ChartContainer>\n            </CardContent>\n          </Card>\n        </TabsContent>\n\n        <TabsContent value=\"line\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-foreground\">Line Chart</CardTitle>\n              <CardDescription className=\"text-muted-foreground\">Revenue and profit trends over time</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <ChartContainer\n                config={{\n                  revenue: {\n                    label: \"Revenue\",\n                    color: \"var(--chart-1)\",\n                  },\n                  profit: {\n                    label: \"Profit\",\n                    color: \"var(--chart-2)\",\n                  },\n                }}\n                className=\"h-[300px]\"\n              >\n                <LineChart data={lineChartData}>\n                  <CartesianGrid strokeDasharray=\"3 3\" className=\"stroke-muted\" />\n                  <XAxis dataKey=\"month\" tickLine={false} axisLine={false} tickMargin={8} />\n                  <YAxis tickLine={false} axisLine={false} tickMargin={8} />\n                  <ChartTooltip content={<ChartTooltipContent />} />\n                  <ChartLegend content={<ChartLegendContent />} />\n                  <Line type=\"monotone\" dataKey=\"revenue\" stroke=\"var(--color-revenue)\" strokeWidth={2} dot={false} />\n                  <Line type=\"monotone\" dataKey=\"profit\" stroke=\"var(--color-profit)\" strokeWidth={2} dot={false} />\n                </LineChart>\n              </ChartContainer>\n            </CardContent>\n          </Card>\n        </TabsContent>\n\n        <TabsContent value=\"area\">\n          <Card>\n            <CardHeader>\n              <CardTitle className=\"text-foreground\">Area Chart</CardTitle>\n              <CardDescription className=\"text-muted-foreground\">Sales and returns comparison</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <ChartContainer\n                config={{\n                  sales: {\n                    label: \"Sales\",\n                    color: \"var(--chart-1)\",\n                  },\n                  returns: {\n                    label: \"Returns\",\n                    color: \"var(--chart-3)\",\n                  },\n                }}\n                className=\"h-[300px]\"\n              >\n                <AreaChart data={areaChartData}>\n                  <CartesianGrid strokeDasharray=\"3 3\" className=\"stroke-muted\" />\n                  <XAxis dataKey=\"month\" tickLine={false} axisLine={false} tickMargin={8} />\n                  <YAxis tickLine={false} axisLine={false} tickMargin={8} />\n                  <ChartTooltip content={<ChartTooltipContent />} />\n                  <ChartLegend content={<ChartLegendContent />} />\n                  <Area type=\"monotone\" dataKey=\"sales\" stroke=\"var(--color-sales)\" fill=\"var(--color-sales)\" fillOpacity={0.2} strokeWidth={2} />\n                  <Area\n                    type=\"monotone\"\n                    dataKey=\"returns\"\n                    stroke=\"var(--color-returns)\"\n                    fill=\"var(--color-returns)\"\n                    fillOpacity={0.2}\n                    strokeWidth={2}\n                  />\n                </AreaChart>\n              </ChartContainer>\n            </CardContent>\n          </Card>\n        </TabsContent>\n      </Tabs>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/chart.tsx"
    }
  ],
  "type": "registry:block"
}