Card Traffic (Tailwind)

1"use client";
2 
3import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
4import { cn } from "@/lib/utils";
5import { Badge } from "@/registry/brook/tailwind/ui/badge";
6import { Card, CardContent, CardHeader, CardTitle } from "@/registry/brook/tailwind/ui/card";
7import {
8  type ChartConfig,
9  ChartContainer,
10  ChartTooltip,
11  ChartTooltipContent,
12} from "@/registry/brook/tailwind/ui/chart";
13 
14type TrafficDataPoint = {
15  date: number;
16  desktop: number;
17  mobile: number;
18};
19 
20type CardTrafficProps = {
21  data: TrafficDataPoint[];
22};
23 
24const CHART_START_YEAR = 2025;
25const CHART_START_MONTH = 6;
26const CHART_START_DAY = 14;
27 
28const formatDate = (value: unknown) => {
29  const dayNumber = Math.round(Number(value));
30 
31  const startDate = new Date(CHART_START_YEAR, CHART_START_MONTH, CHART_START_DAY);
32  const currentDate = new Date(startDate);
33  currentDate.setDate(startDate.getDate() + (dayNumber - 1));
34 
35  return currentDate.toLocaleDateString("en-US", {
36    month: "short",
37    day: "numeric",
38  });
39};
40 
41const chartConfig = {
42  mobile: {
43    label: "Mobile",
44    color: "var(--chart-1)",
45  },
46  desktop: {
47    label: "Desktop",
48    color: "var(--chart-2)",
49  },
50} satisfies ChartConfig;
51 
52export function CardTraffic({ data }: CardTrafficProps) {
53  return (
54    <Card
55      className="w-full max-w-[600px]"
56      style={{
57        maxWidth: "600px",
58        width: "100%",
59      }}
60    >
61      <CardHeader>
62        <CardTitle>Website Traffic</CardTitle>
63      </CardHeader>
64      <CardContent className="h-[200px] p-0">
65        <div style={{ width: "100%", height: "100%" }}>
66          <ChartContainer config={chartConfig}>
67            <LineChart data={data}>
68              <CartesianGrid strokeDasharray="3 3" vertical={false} />
69              <XAxis dataKey="date" hide={true} tickFormatter={formatDate} />
70              <YAxis hide={true} />
71              <ChartTooltip content={<ChartTooltipContent />} />
72              <Line
73                animationDuration={800}
74                dataKey="mobile"
75                dot={false}
76                stroke="var(--color-mobile)"
77                strokeWidth={2}
78                type="monotone"
79              />
80              <Line
81                animationBegin={200}
82                animationDuration={800}
83                dataKey="desktop"
84                dot={false}
85                stroke="var(--color-desktop)"
86                strokeWidth={2}
87                type="monotone"
88              />
89            </LineChart>
90// … truncated