calendar-27.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-27",
  "type": "registry:block",
  "author": "shadcn (https://ui.shadcn.com)",
  "description": "Chart filter",
  "registryDependencies": [
    "calendar",
    "chart",
    "card",
    "popover",
    "button"
  ],
  "files": [
    {
      "path": "blocks/calendar-27.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst chartData = [\n  { date: \"2025-06-01\", visitors: 178 },\n  { date: \"2025-06-02\", visitors: 470 },\n  { date: \"2025-06-03\", visitors: 103 },\n  { date: \"2025-06-04\", visitors: 439 },\n  { date: \"2025-06-05\", visitors: 88 },\n  { date: \"2025-06-06\", visitors: 294 },\n  { date: \"2025-06-07\", visitors: 323 },\n  { date: \"2025-06-08\", visitors: 385 },\n  { date: \"2025-06-09\", visitors: 438 },\n  { date: \"2025-06-10\", visitors: 155 },\n  { date: \"2025-06-11\", visitors: 92 },\n  { date: \"2025-06-12\", visitors: 492 },\n  { date: \"2025-06-13\", visitors: 81 },\n  { date: \"2025-06-14\", visitors: 426 },\n  { date: \"2025-06-15\", visitors: 307 },\n  { date: \"2025-06-16\", visitors: 371 },\n  { date: \"2025-06-17\", visitors: 475 },\n  { date: \"2025-06-18\", visitors: 107 },\n  { date: \"2025-06-19\", visitors: 341 },\n  { date: \"2025-06-20\", visitors: 408 },\n  { date: \"2025-06-21\", visitors: 169 },\n  { date: \"2025-06-22\", visitors: 317 },\n  { date: \"2025-06-23\", visitors: 480 },\n  { date: \"2025-06-24\", visitors: 132 },\n  { date: \"2025-06-25\", visitors: 141 },\n  { date: \"2025-06-26\", visitors: 434 },\n  { date: \"2025-06-27\", visitors: 448 },\n  { date: \"2025-06-28\", visitors: 149 },\n  { date: \"2025-06-29\", visitors: 103 },\n  { date: \"2025-06-30\", visitors: 446 },\n]\n\nconst total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--primary))\",\n  },\n} satisfies ChartConfig\n\nexport default function Calendar27() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(2025, 5, 5),\n    to: new Date(2025, 5, 20),\n  })\n  const filteredData = React.useMemo(() => {\n    if (!range?.from && !range?.to) {\n      return chartData\n    }\n\n    return chartData.filter((item) => {\n      const date = new Date(item.date)\n      return date >= range.from! && date <= range.to!\n    })\n  }, [range])\n\n  return (\n    <Card className=\"@container/card w-full max-w-xl\">\n      <CardHeader className=\"@md/card:grid relative flex flex-col border-b\">\n        <CardTitle>Web Analytics</CardTitle>\n        <CardDescription>\n          Showing total visitors for this month.\n        </CardDescription>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"absolute right-4 top-4\">\n              <CalendarIcon />\n              {range?.from && range?.to\n                ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`\n                : \"June 2025\"}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"end\">\n            <Calendar\n              className=\"w-full\"\n              mode=\"range\"\n              defaultMonth={range?.from}\n              selected={range}\n              onSelect={setRange}\n              disableNavigation\n              startMonth={range?.from}\n              fixedWeeks\n              showOutsideDays\n              disabled={{\n                after: new Date(2025, 5, 31),\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={filteredData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={20}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"visitors\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey=\"visitors\" fill={`var(--color-visitors)`} radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"border-t pt-6\">\n        <div className=\"text-sm\">\n          You had{\" \"}\n          <span className=\"font-semibold\">{total.toLocaleString()}</span>{\" \"}\n          visitors for the month of June.\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": ""
    }
  ],
  "meta": {
    "iframeHeight": "600px",
    "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "calendar",
    "date"
  ]
}