chart-area-interactive

1"use client"
2 
3import * as React from "react"
4import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
5 
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/registry/new-york/ui/card"
13import {
14  ChartConfig,
15  ChartContainer,
16  ChartLegend,
17  ChartLegendContent,
18  ChartTooltip,
19  ChartTooltipContent,
20} from "@/registry/new-york/ui/chart"
21import {
22  Select,
23  SelectContent,
24  SelectItem,
25  SelectTrigger,
26  SelectValue,
27} from "@/registry/new-york/ui/select"
28const chartData = [
29  { date: "2024-04-01", desktop: 222, mobile: 150 },
30  { date: "2024-04-02", desktop: 97, mobile: 180 },
31  { date: "2024-04-03", desktop: 167, mobile: 120 },
32  { date: "2024-04-04", desktop: 242, mobile: 260 },
33  { date: "2024-04-05", desktop: 373, mobile: 290 },
34  { date: "2024-04-06", desktop: 301, mobile: 340 },
35  { date: "2024-04-07", desktop: 245, mobile: 180 },
36  { date: "2024-04-08", desktop: 409, mobile: 320 },
37  { date: "2024-04-09", desktop: 59, mobile: 110 },
38  { date: "2024-04-10", desktop: 261, mobile: 190 },
39  { date: "2024-04-11", desktop: 327, mobile: 350 },
40  { date: "2024-04-12", desktop: 292, mobile: 210 },
41  { date: "2024-04-13", desktop: 342, mobile: 380 },
42  { date: "2024-04-14", desktop: 137, mobile: 220 },
43  { date: "2024-04-15", desktop: 120, mobile: 170 },
44  { date: "2024-04-16", desktop: 138, mobile: 190 },
45  { date: "2024-04-17", desktop: 446, mobile: 360 },
46  { date: "2024-04-18", desktop: 364, mobile: 410 },
47  { date: "2024-04-19", desktop: 243, mobile: 180 },
48  { date: "2024-04-20", desktop: 89, mobile: 150 },
49  { date: "2024-04-21", desktop: 137, mobile: 200 },
50  { date: "2024-04-22", desktop: 224, mobile: 170 },
51  { date: "2024-04-23", desktop: 138, mobile: 230 },
52  { date: "2024-04-24", desktop: 387, mobile: 290 },
53  { date: "2024-04-25", desktop: 215, mobile: 250 },
54  { date: "2024-04-26", desktop: 75, mobile: 130 },
55  { date: "2024-04-27", desktop: 383, mobile: 420 },
56  { date: "2024-04-28", desktop: 122, mobile: 180 },
57  { date: "2024-04-29", desktop: 315, mobile: 240 },
58  { date: "2024-04-30", desktop: 454, mobile: 380 },
59  { date: "2024-05-01", desktop: 165, mobile: 220 },
60  { date: "2024-05-02", desktop: 293, mobile: 310 },
61  { date: "2024-05-03", desktop: 247, mobile: 190 },
62  { date: "2024-05-04", desktop: 385, mobile: 420 },
63  { date: "2024-05-05", desktop: 481, mobile: 390 },
64  { date: "2024-05-06", desktop: 498, mobile: 520 },
65  { date: "2024-05-07", desktop: 388, mobile: 300 },
66// … truncated