{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-md-01",
  "type": "registry:component",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json",
    "https://wigggle-ui.vercel.app/r/table.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/dashboard/md/dashboard-01.tsx",
      "content": "\"use client\";\r\n\r\nimport {\r\n  Label,\r\n  PolarGrid,\r\n  PolarRadiusAxis,\r\n  RadialBar,\r\n  RadialBarChart,\r\n} from \"recharts\";\r\n\r\nimport {\r\n  Widget,\r\n  WidgetContent,\r\n  WidgetHeader,\r\n} from \"@/registry/default/ui/widget\";\r\nimport {\r\n  Table,\r\n  TableBody,\r\n  TableCell,\r\n  TableRow,\r\n} from \"@/registry/default/ui/table\";\r\n\r\nconst dbInfo = [\r\n  {\r\n    label: \"Database\",\r\n    value: \"Neon Postgres\",\r\n  },\r\n  {\r\n    label: \"Size\",\r\n    value: \"128 MB\",\r\n  },\r\n  {\r\n    label: \"Tables\",\r\n    value: \"42\",\r\n  },\r\n  {\r\n    label: \"Uptime\",\r\n    value: \"3D 4H 21M\",\r\n  },\r\n  {\r\n    label: \"QPS\",\r\n    value: \"57\",\r\n  },\r\n  {\r\n    label: \"Backup\",\r\n    value: \"2025-11-06 02:13 UTC\",\r\n  },\r\n];\r\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\";\r\n\r\nconst chartData = [\r\n  { browser: \"safari\", visitors: 31, fill: \"var(--color-safari)\" },\r\n];\r\n\r\nconst chartConfig = {\r\n  visitors: {\r\n    label: \"Visitors\",\r\n  },\r\n  safari: {\r\n    label: \"Safari\",\r\n    color: \"var(--chart-2)\",\r\n  },\r\n} satisfies ChartConfig;\r\n\r\nexport default function WidgetDemo() {\r\n  return (\r\n    <Widget design=\"mumbai\" size=\"md\" className=\"gap-3 pt-2\">\r\n      <WidgetContent className=\"justify-between gap-3\">\r\n        <div className=\"mt-2 flex h-full w-max flex-col items-center justify-center gap-3\">\r\n          <WidgetHeader className=\"bg-muted mx-auto w-max items-center justify-center rounded-md px-2 py-1\">\r\n            <p>wigggle_db</p>\r\n          </WidgetHeader>\r\n          <ChartContainer\r\n            config={chartConfig}\r\n            className=\"mx-auto aspect-square h-full max-h-28 w-full\"\r\n          >\r\n            <RadialBarChart\r\n              data={chartData}\r\n              startAngle={90}\r\n              endAngle={220}\r\n              innerRadius={40}\r\n              outerRadius={60}\r\n            >\r\n              <PolarGrid\r\n                gridType=\"circle\"\r\n                radialLines={false}\r\n                stroke=\"none\"\r\n                className=\"first:fill-muted last:fill-background\"\r\n                polarRadius={[45, 36]}\r\n              />\r\n              <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\r\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\r\n                <Label\r\n                  content={({ viewBox }) => {\r\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\r\n                      return (\r\n                        <text\r\n                          x={viewBox.cx}\r\n                          y={viewBox.cy}\r\n                          textAnchor=\"middle\"\r\n                          dominantBaseline=\"middle\"\r\n                        >\r\n                          <tspan\r\n                            x={viewBox.cx}\r\n                            y={(viewBox.cy || 0) - 6}\r\n                            className=\"fill-foreground text-xl font-bold\"\r\n                          >\r\n                            {chartData[0].visitors.toLocaleString()}\r\n                          </tspan>\r\n                          <tspan\r\n                            x={viewBox.cx}\r\n                            y={(viewBox.cy || 0) + 10}\r\n                            className=\"fill-muted-foreground\"\r\n                          >\r\n                            MB used\r\n                          </tspan>\r\n                        </text>\r\n                      );\r\n                    }\r\n                  }}\r\n                />\r\n              </PolarRadiusAxis>\r\n            </RadialBarChart>\r\n          </ChartContainer>\r\n        </div>\r\n        <div className=\"h-full w-full\">\r\n          <Table>\r\n            <TableBody>\r\n              {dbInfo.map((el) => (\r\n                <TableRow key={el.label}>\r\n                  <TableCell className=\"text-muted-foreground py-1\">\r\n                    {el.label}\r\n                  </TableCell>\r\n                  <TableCell className=\"py-1 text-right\">{el.value}</TableCell>\r\n                </TableRow>\r\n              ))}\r\n            </TableBody>\r\n          </Table>\r\n        </div>\r\n      </WidgetContent>\r\n    </Widget>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "dashboard"
    ],
    "size": "md"
  }
}