Analytics Overview
A working analytics overview with illustrative data and frontend interactions.
Make it yours.
Install the editable source and its dependencies into your React + Tailwind project.
Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/analytics-overview.jsonUse it
Scroll horizontally for long lines
"use client";
import {AnalyticsOverview} from '@/components/jez-ui/blocks/analytics-overview';
export default function Example(){
return <><AnalyticsOverview/></>;
}Props & types
Scroll horizontally for long lines
{ className?: string }Source
View 5 source files
registry/blocks/analytics-overview.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { ArrowUpRight } from "lucide-react";
import { cn } from "../ui/utils";
import { AreaChart } from "../ui/area-chart";
import { DonutChart } from "../ui/donut-chart";
export function AnalyticsOverview({ className }: { className?: string }) {
return (
<section className={cn("grid gap-6", className)}>
<div className="grid gap-4 sm:grid-cols-3">
{[
{
label: "Revenue",
value: "£24,860",
change: "12.8%",
note: "vs. previous month",
},
{
label: "Sessions",
value: "18,204",
change: "8.2%",
note: "vs. previous month",
},
{
label: "Conversion",
value: "3.8%",
change: "0.6 pts",
note: "vs. previous month",
},
].map((m) => (
<div key={m.label} className="rounded-xl border border-border p-5">
<p className="text-sm text-muted-foreground">{m.label}</p>
<p className="mt-3 font-display text-3xl tracking-tight tabular-nums">
{m.value}
</p>
<p className="mt-4 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
<span className="flex items-center gap-1 font-medium text-primary">
<ArrowUpRight size={13} />
{m.change}
</span>
{m.note}
</p>
</div>
))}
</div>
<div className="grid gap-5 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
<div className="min-w-0 rounded-xl border border-border p-5">
<h3 className="text-sm font-semibold">Revenue over time</h3>
<p className="mb-5 mt-1 text-xs text-muted-foreground">
Weekly breakdown · illustrative data
</p>
<AreaChart
label="Weekly revenue (£) · illustrative"
className="[&_figcaption]:sr-only"
data={[
{ name: "Mon", value: 2840 },
{ name: "Tue", value: 3420 },
{ name: "Wed", value: 2960 },
{ name: "Thu", value: 4120 },
{ name: "Fri", value: 3650 },
{ name: "Sat", value: 4290 },
{ name: "Sun", value: 3580 },
]}
/>
</div>
<div className="min-w-0 rounded-xl border border-border p-5">
<h3 className="text-sm font-semibold">Audience mix</h3>
<p className="mb-5 mt-1 text-xs text-muted-foreground">
Sessions by source
</p>
<DonutChart className="[&_figcaption]:sr-only" />
</div>
</div>
</section>
);
}
registry/ui/utils.ts
Scroll horizontally for long lines
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
return twMerge(clsx(values));
}
registry/ui/area-chart.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
import {
ResponsiveContainer,
AreaChart as Plot,
Area,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
} from "recharts";
import { ChartFrame, sampleChartData, type ChartProps } from "./chart-frame";
export function AreaChart({
data = sampleChartData,
label = "Area chart",
className,
color = "var(--primary)",
}: ChartProps) {
return (
<ChartFrame data={data} label={label} className={cn("", className)}>
<ResponsiveContainer
initialDimension={{ width: 600, height: 240 }}
width="100%"
height="100%"
>
<Plot
data={data}
margin={{ top: 8, right: 12, left: -24, bottom: 0 }}
accessibilityLayer
>
<CartesianGrid vertical={false} stroke="var(--border)" />
<XAxis
dataKey="name"
tickLine={false}
axisLine={false}
tick={{ fill: "var(--muted-foreground)", fontSize: 11 }}
/>
<YAxis
tickLine={false}
axisLine={false}
tick={{ fill: "var(--muted-foreground)", fontSize: 11 }}
/>
<Tooltip
contentStyle={{
background: "var(--background)",
border: "1px solid var(--border)",
borderRadius: 8,
color: "var(--foreground)",
}}
/>
<Area
dataKey="value"
fill={color}
stroke={color}
type="monotone"
fillOpacity={0.14}
strokeWidth={2}
isAnimationActive={false}
/>
</Plot>
</ResponsiveContainer>
</ChartFrame>
);
}
registry/ui/chart-frame.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
export type ChartDatum = { name: string; value: number; previous?: number };
export const sampleChartData: ChartDatum[] = [
{ name: "Mon", value: 32, previous: 24 },
{ name: "Tue", value: 48, previous: 31 },
{ name: "Wed", value: 39, previous: 36 },
{ name: "Thu", value: 65, previous: 42 },
{ name: "Fri", value: 57, previous: 38 },
{ name: "Sat", value: 82, previous: 49 },
{ name: "Sun", value: 73, previous: 51 },
];
export type ChartProps = {
data?: ChartDatum[];
label?: string;
className?: string;
color?: string;
};
export function ChartFrame({
children,
data,
label,
className,
}: {
children: React.ReactNode;
data: ChartDatum[];
label: string;
className?: string;
}) {
return (
<figure className={cn("m-0 w-full min-w-0", className)}>
<figcaption className="mb-4 text-sm font-medium">{label}</figcaption>
<div className="h-60 w-full min-w-0 overflow-hidden">{children}</div>
<details className="mt-3 text-xs text-muted-foreground">
<summary>View data table</summary>
<table className="mt-3 w-full text-left">
<caption className="sr-only">{label}</caption>
<thead>
<tr>
<th>Period</th>
<th>Value</th>
<th>Previous</th>
</tr>
</thead>
<tbody>
{data.map((d, i) => (
<tr key={i}>
<th className="py-1 font-normal">{d.name}</th>
<td>{d.value}</td>
<td>{d.previous ?? "—"}</td>
</tr>
))}
</tbody>
</table>
</details>
</figure>
);
}
registry/ui/donut-chart.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip } from "recharts";
import { ChartFrame, type ChartProps } from "./chart-frame";
export function DonutChart({
data = [
{ name: "Direct", value: 48 },
{ name: "Search", value: 32 },
{ name: "Referral", value: 20 },
],
label = "Traffic sources",
className,
}: ChartProps) {
return (
<ChartFrame data={data} label={label} className={cn("", className)}>
<ResponsiveContainer initialDimension={{ width: 600, height: 240 }}>
<PieChart>
<Pie
data={data}
dataKey="value"
nameKey="name"
innerRadius="58%"
outerRadius="88%"
paddingAngle={3}
isAnimationActive={false}
>
{data.map((_, i) => (
<Cell
key={i}
fill={["#525be3", "#9eb95f", "#e29366", "#8498bb"][i % 4]}
/>
))}
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
</ChartFrame>
);
}
Dependencies
lucide-react@0.577.0 · clsx@2.1.1 · tailwind-merge@3.5.0 · recharts@3.8.0
Accessibility & behaviour
Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.
Read the accessibility and performance guide →