{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "productivity-md-03",
  "type": "registry:component",
  "dependencies": [
    "lucide-react",
    "recharts"
  ],
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json",
    "https://wigggle-ui.vercel.app/r/label.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/productivity/md/productivity-03.tsx",
      "content": "import { ChartNoAxesColumnIcon } from \"lucide-react\";\r\nimport {\r\n  PolarAngleAxis,\r\n  RadialBar,\r\n  RadialBarChart,\r\n  ResponsiveContainer,\r\n} from \"recharts\";\r\n\r\nimport {\r\n  Widget,\r\n  WidgetContent,\r\n  WidgetHeader,\r\n  WidgetTitle,\r\n} from \"@/registry/default/ui/widget\";\r\nimport { Label } from \"@/registry/default/ui/label\";\r\n\r\nconst chartData = [\r\n  { name: \"Mockups\", visitors: 55, fill: \"var(--productive)\" },\r\n  { name: \"Features\", visitors: 70, fill: \"var(--vercel-yellow)\" },\r\n  { name: \"Testing\", visitors: 85, fill: \"var(--destructive)\" },\r\n];\r\n\r\nexport default function WidgetDemo() {\r\n  return (\r\n    <Widget size=\"md\">\r\n      <WidgetHeader className=\"w-full\">\r\n        <WidgetTitle className=\"flex items-center gap-2\">\r\n          <ChartNoAxesColumnIcon />\r\n          <Label className=\"text-base font-normal\">Weekly Progress</Label>\r\n        </WidgetTitle>\r\n      </WidgetHeader>\r\n      <WidgetContent className=\"justify-between gap-4\">\r\n        <div className=\"w-full space-y-2\">\r\n          <ResponsiveContainer width=\"100%\" height={150} className=\"-mt-1.5\">\r\n            <RadialBarChart\r\n              cx=\"50%\"\r\n              cy=\"50%\"\r\n              innerRadius=\"30%\"\r\n              outerRadius=\"90%\"\r\n              data={chartData}\r\n              startAngle={90}\r\n              endAngle={450}\r\n            >\r\n              <PolarAngleAxis\r\n                type=\"number\"\r\n                domain={[0, 100]}\r\n                angleAxisId={0}\r\n                tick={false}\r\n              />\r\n              <RadialBar dataKey=\"visitors\" cornerRadius={20} />\r\n            </RadialBarChart>\r\n          </ResponsiveContainer>\r\n        </div>\r\n        <div className=\"flex w-full flex-col items-start justify-center gap-3\">\r\n          <div className=\"flex items-center gap-3\">\r\n            <div className=\"bg-productive size-4 rounded-xs\" />\r\n            <div>\r\n              <Label>55/100</Label>\r\n              <Label className=\"text-muted-foreground text-xs font-normal\">\r\n                Design Mockups Completed\r\n              </Label>\r\n            </div>\r\n          </div>\r\n          <div className=\"flex items-center gap-3\">\r\n            <div className=\"bg-vercel-yellow size-4 rounded-xs\" />\r\n            <div>\r\n              <Label>70/100</Label>\r\n              <Label className=\"text-muted-foreground text-xs font-normal\">\r\n                Features Developed\r\n              </Label>\r\n            </div>\r\n          </div>\r\n          <div className=\"flex items-center gap-3\">\r\n            <div className=\"bg-destructive size-4 rounded-xs\" />\r\n            <div>\r\n              <Label>85/100</Label>\r\n              <Label className=\"text-muted-foreground text-xs font-normal\">\r\n                Test Cases Passed\r\n              </Label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </WidgetContent>\r\n    </Widget>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "productivity"
    ],
    "size": "md"
  }
}