4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:Tf22,"use client"; import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"; import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card/card"; import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "../../ui/chart/chart"; import styles from "./card-traffic.module.css"; export type TrafficDataPoint = { /** ISO date (YYYY-MM-DD), or a numeric day label. */ date: string | number; desktop: number; mobile: number; }; export type CardTrafficProps = { data: TrafficDataPoint[]; bounceRate?: number; conversionRate?: number; }; const formatDate = (value: unknown) => { if (typeof value === "number") { return `Day ${value}`; } const date = new Date(String(value)); return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" }); }; const chartConfig = { mobile: { label: "Mobile", color: "var(--chart-1)", }, desktop: { label: "Desktop", color: "var(--chart-2)", }, } satisfies ChartConfig; export function CardTraffic({ data, bounceRate, conversionRate }: CardTrafficProps) { const mobile = data.reduce((sum, point) => sum + point.mobile, 0); const desktop = data.reduce((sum, point) => sum + point.desktop, 0); return ( Website Traffic

} />

Mobile

{mobile.toLocaleString("en-US")}

Desktop

{desktop.toLocaleString("en-US")}

Bounce Rate

{bounceRate === undefined ? "Not provided" : `${bounceRate}%`}

Conversion

{conversionRate === undefined ? "Not provided" : `${conversionRate}%`}

); } 51:T703,.cardContainer { width: 100%; max-width: 600px; } .chartContainer { height: 200px; padding: 0; } .statsGrid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; border-top: 0.5px solid oklch(from var(--border) l c h / 0.7); margin: 0 -24px -24px -24px; } .statCard { padding: 1rem; display: flex; flex-direction: column; gap: 8px; border-right: 0.5px solid oklch(from var(--border) l c h / 0.7); border-bottom: 0.5px solid oklch(from var(--border) l c h / 0.7); } .statCard:nth-child(2n) { border-right: none; } .statCard:nth-child(n + 3) { border-bottom: none; } @media (max-width: 640px) { .cardContainer { max-width: 100%; } .chartContainer { height: 200px; } .statsGrid { margin: 0 -20px -20px -20px; } .statCard { padding: 1rem; gap: 0.5rem; } .statLabel { font-size: 0.875rem; } .statNumber { font-size: 1.75rem; font-weight: 700; } } @media (max-width: 400px) { .statsGrid { grid-template-columns: 1fr; grid-template-rows: auto; margin: 0 -20px -20px -20px; } .statCard { border-right: none; border-bottom: 1px solid var(--border); padding: 1rem; } .statCard:nth-child(2n) { border-right: none; } .statCard:nth-child(n + 3) { border-bottom: 1px solid var(--border); } .statCard:last-child { border-bottom: none; } .statNumber { font-size: 1.5rem; } } .statHeader { display: flex; justify-content: space-between; align-items: center; } .statLabel { font-size: 14px; line-height: 20px; color: var(--muted-foreground); font-weight: 500; } .statNumber { font-size: 32px; font-weight: 700; color: var(--foreground); line-height: 1; font-variant-numeric: tabular-nums; } 52:T8cd,[ { "date": "2025-07-14", "desktop": 12.3, "mobile": 28.7 }, { "date": "2025-07-15", "desktop": 11.8, "mobile": 29.2 }, { "date": "2025-07-16", "desktop": 13.1, "mobile": 31.4 }, { "date": "2025-07-17", "desktop": 12.9, "mobile": 30.8 }, { "date": "2025-07-18", "desktop": 14.2, "mobile": 33.1 }, { "date": "2025-07-19", "desktop": 13.7, "mobile": 32.3 }, { "date": "2025-07-20", "desktop": 11.5, "mobile": 27.9 }, { "date": "2025-07-21", "desktop": 10.8, "mobile": 26.4 }, { "date": "2025-07-22", "desktop": 12.6, "mobile": 29.8 }, { "date": "2025-07-23", "desktop": 13.9, "mobile": 32.7 }, { "date": "2025-07-24", "desktop": 14.1, "mobile": 33.9 }, { "date": "2025-07-25", "desktop": 13.3, "mobile": 31.8 }, { "date": "2025-07-26", "desktop": 12.7, "mobile": 30.2 }, { "date": "2025-07-27", "desktop": 11.9, "mobile": 28.6 }, { "date": "2025-07-28", "desktop": 13.8, "mobile": 32.4 }, { "date": "2025-07-29", "desktop": 14.5, "mobile": 34.2 }, { "date": "2025-07-30", "desktop": 13.2, "mobile": 31.1 }, { "date": "2025-07-31", "desktop": 12.4, "mobile": 29.7 }, { "date": "2025-08-01", "desktop": 14.8, "mobile": 35.1 }, { "date": "2025-08-02", "desktop": 15.2, "mobile": 36.3 }, { "date": "2025-08-03", "desktop": 11.6, "mobile": 28.2 }, { "date": "2025-08-04", "desktop": 10.9, "mobile": 26.8 }, { "date": "2025-08-05", "desktop": 13.4, "mobile": 32.1 }, { "date": "2025-08-06", "desktop": 14.7, "mobile": 34.8 }, { "date": "2025-08-07", "desktop": 13.1, "mobile": 31.7 }, { "date": "2025-08-08", "desktop": 12.8, "mobile": 30.4 }, { "date": "2025-08-09", "desktop": 14.3, "mobile": 33.6 }, { "date": "2025-08-10", "desktop": 15.1, "mobile": 35.7 }, { "date": "2025-08-11", "desktop": 11.7, "mobile": 28.9 }, { "date": "2025-08-12", "desktop": 12.2, "mobile": 29.4 } ] 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"recharts"}]]}]}]]}],["$","$L4e",null,{"namespace":"@roiui","registryDependencies":["https://roiui.com/r/badge.json","https://roiui.com/r/card.json","https://roiui.com/r/chart.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/brook/blocks/card-traffic/components/card-traffic.tsx","content":"$50","type":"registry:file","target":"~/components/blocks/card-traffic/card-traffic.tsx"},{"path":"registry/brook/blocks/card-traffic/components/card-traffic.module.css","content":"$51","type":"registry:file","target":"~/components/blocks/card-traffic/card-traffic.module.css"},{"path":"registry/brook/blocks/card-traffic/data.json","content":"$52","type":"registry:file","target":"~/components/blocks/card-traffic/data.json"}],"className":"h-[70svh] min-h-80"}]]}]