Card Traffic

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