Analytics bento block: revenue line with scrub, desktop vs mobile waves, a category treemap that re-flows between periods and a smooth seasonality radar. Live tooltips, count-ups, light and dark. SVG only, no chart library.
"use client";
import * as React from "react";
import { AnalyticsBento } from "@/components/ui/analytics-bento";
/* Geist + Geist Mono for the demo */
function useFonts() {
React.useEffect(() => {
const id = "geist-fonts";
if (document.getElementById(id)) return;
const l = document.createElement("link");
l.id = id;
l.rel = "stylesheet";
l.href = "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap";
document.head.appendChild(l);
}, []);
}
const bell = (x: number, m: number, s: number) => Math.exp(-(((x - m) / s) ** 2) / 2);
const hours = Array.from({ length: 25 }, (_, h) => h);
const desktop = [0, 1, 2].map((w) => hours.map((h) => Math.round(2400 * (1 - w * 0.16) * (bell(h, 13 - w * 0.6, 3.4) * 0.92 + bell(h, 20, 2.2) * 0.18))));
const mobile = [0, 1, 2].map((w) => hours.map((h) => Math.round(2600 * (1 - w * 0.18) * (bell(h, 20.5 - w * 0.4, 3) * 0.95 + bell(h, 8, 1.8) * 0.2))));
const revenue = [7420, 7510, 7460, 7380, 7490, 7640, 7720, 7680, 7590, 7560, 7630, 7780, 7900, 7960, 7910, 7850, 7880, 8010, 8140, 8230, 8190, 8120, 8260, 8430, 8560, 8620, 8700, 8890, 9020, 9134];
export default function AnalyticsBentoDemo() {
useFonts();
return (
<div
className="min-h-screen w-full bg-background px-4 py-8 sm:px-6 sm:py-10"
style={{
backgroundImage: "radial-gradient(circle, color-mix(in oklab, var(--color-foreground) 7%, transparent) 0 1px, transparent 1.4px)",
backgroundSize: "20px 13px",
backgroundPosition: "-6px -1px",
}}
>
<AnalyticsBento
className="mx-auto max-w-[1240px]"
revenue={{
label: "Revenue",
value: 9134,
delta: "2.5%",
note: <>Avg. order <span className="text-foreground/80">$185</span></>,
caption: "Last 30 days",
series: revenue.map((value, i) => ({ value, label: new Date(2026, 8, 22 + i).toLocaleDateString("en-US", { month: "short", day: "numeric" }) })),
}}
sessions={{ label: "Sessions", value: 48210, delta: "12.4%", note: "By hour, last 3 weeks", desktop, mobile }}
categories={{
title: "Sales by category",
groups: [
{ id: "product", name: "Product", color: "#7CFF5B", ink: "dark" },
{ id: "eng", name: "Engineering", color: "#8B3DFF", ink: "light" },
{ id: "growth", name: "Growth", color: "#FFB800", ink: "dark" },
{ id: "brand", name: "Brand", color: "#FF5A1F", ink: "dark" },
{ id: "ops", name: "Ops", color: "color-mix(in oklab, var(--color-muted-foreground) 45%, var(--color-muted))" },
],
periods: [
{ label: "Weekly", total: 2197, delta: "19.6%", compare: "vs $1,340 last week" },
{ label: "Monthly", total: 8903, delta: "1.9%", compare: "vs $5,441 last month" },
{ label: "Yearly", total: 98134, delta: "22%", compare: "vs $76,330 last year" },
],
items: [
{ name: "Design", group: "product", values: [509, 2140, 25600] },
{ name: "Research", group: "product", values: [353, 1460, 17800] },
{ name: "Frontend", group: "eng", values: [412, 1880, 22900] },
{ name: "DevOps", group: "eng", values: [551, 2010, 24100] },
{ name: "Testing", group: "eng", values: [532, 1720, 19400] },
{ name: "Backend", group: "eng", values: [498, 2230, 26800] },
{ name: "SMM", group: "growth", values: [445, 1590, 18100] },
{ name: "SEO", group: "growth", values: [290, 1310, 16900] },
{ name: "Content", group: "brand", values: [331, 1240, 13400] },
{ name: "Support", group: "ops", values: [380, 1120, 12300] },
{ name: "Legal", group: "ops", values: [118, 520, 6100] },
],
table: {
columns: ["City", "Weekly", "Monthly", "Yearly"],
rows: [
{ label: "New York", values: ["$20,030", "$50,331", "$270,120"] },
{ label: "London", values: ["$18,782", "$40,795", "$210,650"] },
{ label: "Tokyo", values: ["$14,221", "$30,123", "$200,080"] },
],
},
}}
seasonality={{
title: "Seasonality",
years: [
{
label: "2026",
values: [16120, 20540, 24440, 18460, 28080, 21580, 17160, 25740, 30160, 22880, 32240, 23660],
stats: [
{ label: "Monthly avg", value: 8097, delta: "19.6%", note: "44,214 orders" },
{ label: "Year total", value: 312134, delta: "2.5%", note: "301,002 orders" },
],
rows: [{ label: "New York", value: "201,192" }, { label: "London", value: "192,054" }, { label: "Tokyo", value: "161,300" }],
},
{
label: "2025",
values: [13260, 16640, 18720, 22360, 20020, 15860, 14560, 19240, 23920, 26260, 23140, 19760],
stats: [
{ label: "Monthly avg", value: 6772, delta: "8.1%", note: "38,920 orders" },
{ label: "Year total", value: 304521, delta: "4.4%", note: "287,410 orders" },
],
rows: [{ label: "New York", value: "188,340" }, { label: "London", value: "171,215" }, { label: "Tokyo", value: "150,870" }],
},
],
}}
/>
</div>
);
}