calendar-27

1"use client"
2 
3import * as React from "react"
4import { CalendarIcon } from "lucide-react"
5import { DateRange } from "react-day-picker"
6import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
7 
8import { Button } from "@/registry/new-york/ui/button"
9import { Calendar } from "@/registry/new-york/ui/calendar"
10import {
11  Card,
12  CardContent,
13  CardDescription,
14  CardFooter,
15  CardHeader,
16  CardTitle,
17} from "@/registry/new-york/ui/card"
18import {
19  ChartConfig,
20  ChartContainer,
21  ChartTooltip,
22  ChartTooltipContent,
23} from "@/registry/new-york/ui/chart"
24import {
25  Popover,
26  PopoverContent,
27  PopoverTrigger,
28} from "@/registry/new-york/ui/popover"
29 
30const chartData = [
31  { date: "2025-06-01", visitors: 178 },
32  { date: "2025-06-02", visitors: 470 },
33  { date: "2025-06-03", visitors: 103 },
34  { date: "2025-06-04", visitors: 439 },
35  { date: "2025-06-05", visitors: 88 },
36  { date: "2025-06-06", visitors: 294 },
37  { date: "2025-06-07", visitors: 323 },
38  { date: "2025-06-08", visitors: 385 },
39  { date: "2025-06-09", visitors: 438 },
40  { date: "2025-06-10", visitors: 155 },
41  { date: "2025-06-11", visitors: 92 },
42  { date: "2025-06-12", visitors: 492 },
43  { date: "2025-06-13", visitors: 81 },
44  { date: "2025-06-14", visitors: 426 },
45  { date: "2025-06-15", visitors: 307 },
46  { date: "2025-06-16", visitors: 371 },
47  { date: "2025-06-17", visitors: 475 },
48  { date: "2025-06-18", visitors: 107 },
49  { date: "2025-06-19", visitors: 341 },
50  { date: "2025-06-20", visitors: 408 },
51  { date: "2025-06-21", visitors: 169 },
52  { date: "2025-06-22", visitors: 317 },
53  { date: "2025-06-23", visitors: 480 },
54  { date: "2025-06-24", visitors: 132 },
55  { date: "2025-06-25", visitors: 141 },
56  { date: "2025-06-26", visitors: 434 },
57  { date: "2025-06-27", visitors: 448 },
58  { date: "2025-06-28", visitors: 149 },
59  { date: "2025-06-29", visitors: 103 },
60  { date: "2025-06-30", visitors: 446 },
61]
62 
63const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)
64 
65const chartConfig = {
66  visitors: {
67    label: "Visitors",
68    color: "hsl(var(--primary))",
69  },
70} satisfies ChartConfig
71 
72export default function Calendar27() {
73  const [range, setRange] = React.useState<DateRange | undefined>({
74    from: new Date(2025, 5, 5),
75    to: new Date(2025, 5, 20),
76  })
77  const filteredData = React.useMemo(() => {
78    if (!range?.from && !range?.to) {
79      return chartData
80    }
81 
82    return chartData.filter((item) => {
83      const date = new Date(item.date)
84// … truncated