{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-lg-02",
  "type": "registry:component",
  "dependencies": [
    "recharts",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json",
    "https://wigggle-ui.vercel.app/r/label.json",
    "https://wigggle-ui.vercel.app/r/select.json",
    "https://wigggle-ui.vercel.app/r/chart.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/dashboard/lg/dashboard-02.tsx",
      "content": "\"use client\";\r\nimport React from \"react\";\r\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\";\r\nimport {\r\n  ActivityIcon,\r\n  CalendarIcon,\r\n  ClockIcon,\r\n  StickyNoteIcon,\r\n} from \"lucide-react\";\r\n\r\nimport {\r\n  Widget,\r\n  WidgetHeader,\r\n  WidgetContent,\r\n  WidgetTitle,\r\n} from \"@/registry/default/ui/widget\";\r\nimport { Label } from \"@/registry/default/ui/label\";\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectGroup,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/registry/default/ui/select\";\r\nimport {\r\n  ChartConfig,\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n} from \"@/registry/default/ui/chart\";\r\n\r\nconst orgOptions = [\"wigggle-ui\", \"acme-inc\"];\r\n\r\nconst acmeIncChartData = [\r\n  { month: \"January\", desktop: 16 },\r\n  { month: \"February\", desktop: 35 },\r\n  { month: \"March\", desktop: 12 },\r\n  { month: \"April\", desktop: 34 },\r\n  { month: \"May\", desktop: 29 },\r\n  { month: \"June\", desktop: 24 },\r\n];\r\nconst acmeIncChartConfig = {\r\n  desktop: {\r\n    label: \"Desktop\",\r\n    color: \"var(--destructive)\",\r\n  },\r\n} satisfies ChartConfig;\r\n\r\nconst wigggleUIChartData = [\r\n  { month: \"January\", desktop: 186 },\r\n  { month: \"February\", desktop: 305 },\r\n  { month: \"March\", desktop: 237 },\r\n  { month: \"April\", desktop: 73 },\r\n  { month: \"May\", desktop: 209 },\r\n  { month: \"June\", desktop: 214 },\r\n];\r\nconst wigggleUIChartConfig = {\r\n  desktop: {\r\n    label: \"Desktop\",\r\n    color: \"var(--productive)\",\r\n  },\r\n} satisfies ChartConfig;\r\n\r\nexport default function WidgetDemo() {\r\n  const [org, setOrg] = React.useState(orgOptions[0]);\r\n\r\n  return (\r\n    <Widget size=\"lg\" className=\"gap-3\">\r\n      <WidgetHeader>\r\n        <WidgetTitle className=\"text-2xl\">Traffic Source</WidgetTitle>\r\n        <Select\r\n          onValueChange={(v) => setOrg(v)}\r\n          defaultValue={orgOptions[0].toLowerCase()}\r\n        >\r\n          <SelectTrigger className=\"w-36\">\r\n            <SelectValue placeholder=\"Organization\" />\r\n          </SelectTrigger>\r\n          <SelectContent>\r\n            <SelectGroup>\r\n              {orgOptions.map((el, i) => (\r\n                <SelectItem key={i} value={el.toLowerCase()}>\r\n                  {el}\r\n                </SelectItem>\r\n              ))}\r\n            </SelectGroup>\r\n          </SelectContent>\r\n        </Select>\r\n      </WidgetHeader>\r\n      <WidgetContent className=\"flex-col justify-start gap-4\">\r\n        <ChartContainer\r\n          className=\"size-full max-h-32\"\r\n          config={\r\n            org === \"wigggle-ui\" ? wigggleUIChartConfig : acmeIncChartConfig\r\n          }\r\n        >\r\n          <AreaChart\r\n            accessibilityLayer\r\n            data={org === \"wigggle-ui\" ? wigggleUIChartData : acmeIncChartData}\r\n            margin={{\r\n              left: 12,\r\n              right: 12,\r\n            }}\r\n          >\r\n            <CartesianGrid vertical={false} />\r\n            <XAxis\r\n              dataKey=\"month\"\r\n              tickLine={false}\r\n              axisLine={false}\r\n              tickMargin={8}\r\n              tickFormatter={(value) => value.slice(0, 3)}\r\n            />\r\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\r\n            <defs>\r\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n                <stop\r\n                  offset=\"5%\"\r\n                  stopColor=\"var(--color-desktop)\"\r\n                  stopOpacity={0.8}\r\n                />\r\n                <stop\r\n                  offset=\"95%\"\r\n                  stopColor=\"var(--color-desktop)\"\r\n                  stopOpacity={0.1}\r\n                />\r\n              </linearGradient>\r\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n                <stop\r\n                  offset=\"5%\"\r\n                  stopColor=\"var(--color-mobile)\"\r\n                  stopOpacity={0.8}\r\n                />\r\n                <stop\r\n                  offset=\"95%\"\r\n                  stopColor=\"var(--color-mobile)\"\r\n                  stopOpacity={0.1}\r\n                />\r\n              </linearGradient>\r\n            </defs>\r\n            <Area\r\n              dataKey=\"mobile\"\r\n              type=\"natural\"\r\n              fill=\"url(#fillMobile)\"\r\n              fillOpacity={0.4}\r\n              stroke=\"var(--color-mobile)\"\r\n              stackId=\"a\"\r\n            />\r\n            <Area\r\n              dataKey=\"desktop\"\r\n              type=\"natural\"\r\n              fill=\"url(#fillDesktop)\"\r\n              fillOpacity={0.4}\r\n              stroke=\"var(--color-desktop)\"\r\n              stackId=\"a\"\r\n            />\r\n          </AreaChart>\r\n        </ChartContainer>\r\n        <div className=\"flex w-full flex-col items-center justify-center\">\r\n          <StatsItem\r\n            icon={ActivityIcon}\r\n            label=\"Bounce rate\"\r\n            value={org === \"wigggle-ui\" ? \"37.07%\" : \"43.74%\"}\r\n          />\r\n          <StatsItem\r\n            icon={StickyNoteIcon}\r\n            label=\"Pages per visit\"\r\n            value={org === \"wigggle-ui\" ? \"36\" : \"19\"}\r\n          />\r\n          <StatsItem\r\n            icon={CalendarIcon}\r\n            label=\"Monthly hits\"\r\n            value={org === \"wigggle-ui\" ? \"689\" : \"184\"}\r\n          />\r\n          <StatsItem\r\n            icon={ClockIcon}\r\n            label=\"Avg. time spent\"\r\n            value={org === \"wigggle-ui\" ? \"00:07:43\" : \"00:03:57\"}\r\n          />\r\n        </div>\r\n      </WidgetContent>\r\n    </Widget>\r\n  );\r\n}\r\n\r\ntype StatsItemProps = {\r\n  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;\r\n  label: string;\r\n  value: string;\r\n};\r\n\r\nfunction StatsItem(item: StatsItemProps) {\r\n  return (\r\n    <div className=\"flex w-full items-center justify-between border-t-2 py-2.5 first:border-0\">\r\n      <div className=\"flex items-center justify-start gap-x-2\">\r\n        <item.icon className=\"stroke-muted-foreground size-4\" />\r\n        <Label className=\"font-light\">{item.label}</Label>\r\n      </div>\r\n      <Label>{item.value}</Label>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "dashboard"
    ],
    "size": "lg"
  }
}