{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "analytics-charts",
  "title": "Analytics charts",
  "description": "A dashboard pair — an area chart of audience growth beside a bar chart of weekly sales, each on its own card.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "card",
    "chart",
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/analytics-charts.tsx",
      "content": "'use client'\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n} from '@/components/ui/card'\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from '@/components/ui/chart'\nimport { Badge } from '@/components/ui/badge'\nimport { Area, AreaChart, Bar, BarChart, XAxis, YAxis } from 'recharts'\n\nconst traffic = [\n  { month: 'Jan', readers: 820, subscribers: 310 },\n  { month: 'Feb', readers: 932, subscribers: 340 },\n  { month: 'Mar', readers: 1105, subscribers: 415 },\n  { month: 'Apr', readers: 1043, subscribers: 462 },\n  { month: 'May', readers: 1290, subscribers: 550 },\n  { month: 'Jun', readers: 1481, subscribers: 618 },\n]\nconst trafficConfig = {\n  readers: { label: 'Readers', color: 'var(--chart-1)' },\n  subscribers: { label: 'Subscribers', color: 'var(--chart-2)' },\n}\n\nconst sales = [\n  { week: 'W1', prints: 12 },\n  { week: 'W2', prints: 19 },\n  { week: 'W3', prints: 14 },\n  { week: 'W4', prints: 26 },\n]\nconst salesConfig = {\n  prints: { label: 'Print sales', color: 'var(--chart-3)' },\n}\n\n/** A dashboard pair — an area chart of audience growth beside a bar chart of weekly sales, each on its own card. */\nexport function AnalyticsCharts() {\n  return (\n    <div className=\"mx-auto grid w-full max-w-[880px] grid-cols-[1.4fr_1fr] items-start gap-6 max-md:grid-cols-1\">\n      <Card>\n        <CardHeader>\n          <div className=\"flex items-center justify-between gap-2\">\n            <CardTitle>Audience</CardTitle>\n            <Badge variant=\"secondary\">Last 6 months</Badge>\n          </div>\n          <CardDescription>Monthly readers and new subscribers.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={trafficConfig} className=\"h-56 w-full\">\n            <AreaChart data={traffic}>\n              <XAxis dataKey=\"month\" />\n              <YAxis width={36} />\n              <ChartTooltip content={<ChartTooltipContent />} />\n              <ChartLegend content={<ChartLegendContent />} />\n              <Area\n                dataKey=\"readers\"\n                fill=\"var(--color-readers)\"\n                fillOpacity={0.2}\n                stroke=\"var(--color-readers)\"\n                strokeWidth={2}\n                type=\"monotone\"\n              />\n              <Area\n                dataKey=\"subscribers\"\n                fill=\"var(--color-subscribers)\"\n                fillOpacity={0.2}\n                stroke=\"var(--color-subscribers)\"\n                strokeWidth={2}\n                type=\"monotone\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n      </Card>\n      <Card>\n        <CardHeader>\n          <CardTitle>Engagements</CardTitle>\n          <CardDescription>Weekly sales this month.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={salesConfig} className=\"h-56 w-full\">\n            <BarChart data={sales}>\n              <XAxis dataKey=\"week\" />\n              <YAxis width={28} />\n              <ChartTooltip content={<ChartTooltipContent />} />\n              <Bar dataKey=\"prints\" fill=\"var(--color-prints)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/analytics-charts.tsx"
    }
  ],
  "meta": {
    "intent": [
      "data-viz",
      "data-display"
    ],
    "use_when": "You need a dashboard view of trends over time — an area chart plus a bar chart on card surfaces.",
    "not_for": "you need at-a-glance numbers, not a trend shape — a single KPI reads faster as a number than a chart → stat-cards; the audience needs to inspect exact values per row, not the shape of change over time → data-table"
  },
  "docs": "A dashboard pair — an area chart of audience growth beside a bar chart of weekly sales, each on its own card. Do: Color each series from the chart token set (--chart-1…--chart-5), assigned in a fixed order. Don't: Hardcode a raw accent pigment (--terracotta, --moss, --indigo…) for a series — some pairs are documented as failing colorblind-distinguishability. Do: Pair a multi-series chart with a ChartLegend, as the Audience chart does — color is tied to a series name in text, never left for the reader to infer. Don't: Ship a multi-series chart with no legend — color becomes the only signal distinguishing readers from subscribers. Use stat-cards when you need at-a-glance numbers, not a trend shape — a single KPI reads faster as a number than a chart. Use data-table when the audience needs to inspect exact values per row, not the shape of change over time.",
  "categories": [
    "data-viz",
    "data-display"
  ],
  "type": "registry:block"
}