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:T218c,import { format } from "date-fns" import Grid from "@/components/charts/grid" import LineChart, { Line } from "@/components/charts/line-chart" import { ChartTooltip } from "@/components/charts/tooltip" import { Metric, MetricChange, MetricLabel, MetricValue, } from "@/registry/blocks/metrics-01/components/metric" export function Metrics01() { return (

Insights ^{({format(new Date(data.startDate), "dd.MM")} –{" "}
{format(new Date(data.endDate), "dd.MM")})}

Visitors {data.summary.uniqueVisitors.toLocaleString("en-US")} Sessions {data.summary.totalSessions.toLocaleString("en-US")} Views {data.summary.totalScreenViews.toLocaleString("en-US")} Duration {formatDuration(data.summary.avgSessionDuration)}

{data.series.length > 0 ? ( ) : (

No insights available.

)}

) } type ISODateString = string type InsightsSummary = { uniqueVisitors: number totalSessions: number totalScreenViews: number avgSessionDuration: number } type InsightsSeriesItem = { date: ISODateString uniqueVisitors: number totalSessions: number } /** * `null` where the previous period was zero, since growth from zero has no * meaningful percentage. */ type InsightsChanges = Record type InsightsData = { summary: InsightsSummary changes: InsightsChanges series: InsightsSeriesItem[] startDate: ISODateString endDate: ISODateString } const data: InsightsData = { summary: { uniqueVisitors: 13573, totalSessions: 16017, avgSessionDuration: 380.56365999999997, totalScreenViews: 100563, }, changes: { uniqueVisitors: 12.4, totalSessions: 8.1, avgSessionDuration: 5.7, totalScreenViews: -3.2, }, series: [ { date: "2026-07-21T00:00:00.000Z", uniqueVisitors: 438, totalSessions: 514, }, { date: "2026-07-22T00:00:00.000Z", uniqueVisitors: 452, totalSessions: 519, }, { date: "2026-07-23T00:00:00.000Z", uniqueVisitors: 433, totalSessions: 487, }, { date: "2026-07-24T00:00:00.000Z", uniqueVisitors: 466, totalSessions: 522, }, { date: "2026-07-25T00:00:00.000Z", uniqueVisitors: 484, totalSessions: 555, }, { date: "2026-07-26T00:00:00.000Z", uniqueVisitors: 545, totalSessions: 631, }, { date: "2026-07-27T00:00:00.000Z", uniqueVisitors: 596, totalSessions: 691, }, { date: "2026-07-28T00:00:00.000Z", uniqueVisitors: 522, totalSessions: 598, }, { date: "2026-07-29T00:00:00.000Z", uniqueVisitors: 531, totalSessions: 609, }, { date: "2026-07-30T00:00:00.000Z", uniqueVisitors: 537, totalSessions: 629, }, { date: "2026-07-31T00:00:00.000Z", uniqueVisitors: 442, totalSessions: 509, }, { date: "2026-08-01T00:00:00.000Z", uniqueVisitors: 437, totalSessions: 533, }, { date: "2026-08-02T00:00:00.000Z", uniqueVisitors: 380, totalSessions: 451, }, { date: "2026-08-03T00:00:00.000Z", uniqueVisitors: 435, totalSessions: 484, }, { date: "2026-08-04T00:00:00.000Z", uniqueVisitors: 485, totalSessions: 539, }, { date: "2026-08-05T00:00:00.000Z", uniqueVisitors: 465, totalSessions: 540, }, { date: "2026-08-06T00:00:00.000Z", uniqueVisitors: 423, totalSessions: 495, }, { date: "2026-08-07T00:00:00.000Z", uniqueVisitors: 421, totalSessions: 474, }, { date: "2026-08-08T00:00:00.000Z", uniqueVisitors: 328, totalSessions: 419, }, { date: "2026-08-09T00:00:00.000Z", uniqueVisitors: 577, totalSessions: 638, }, { date: "2026-08-10T00:00:00.000Z", uniqueVisitors: 682, totalSessions: 762, }, { date: "2026-08-11T00:00:00.000Z", uniqueVisitors: 450, totalSessions: 496, }, { date: "2026-08-12T00:00:00.000Z", uniqueVisitors: 413, totalSessions: 483, }, { date: "2026-08-13T00:00:00.000Z", uniqueVisitors: 422, totalSessions: 477, }, { date: "2026-08-14T00:00:00.000Z", uniqueVisitors: 424, totalSessions: 473, }, { date: "2026-08-15T00:00:00.000Z", uniqueVisitors: 378, totalSessions: 422, }, { date: "2026-08-16T00:00:00.000Z", uniqueVisitors: 383, totalSessions: 453, }, { date: "2026-08-17T00:00:00.000Z", uniqueVisitors: 413, totalSessions: 498, }, { date: "2026-08-18T00:00:00.000Z", uniqueVisitors: 417, totalSessions: 473, }, { date: "2026-08-19T00:00:00.000Z", uniqueVisitors: 572, totalSessions: 643, }, ], startDate: "2026-07-21", endDate: "2026-08-20", } /** * Formats a duration given in seconds into a compact `Xh Ym Zs` string. * Zero-valued units are omitted; a zero duration renders as `0s`. */ export function formatDuration(seconds: number): string { const totalSeconds = Math.round(seconds) const hours = Math.floor(totalSeconds / 3600) const minutes = Math.floor((totalSeconds % 3600) / 60) const secs = totalSeconds % 60 const parts: string[] = [] if (hours > 0) parts.push(`${hours}h`) if (minutes > 0) parts.push(`${minutes}m`) if (secs > 0) parts.push(`${secs}s`) return parts.length > 0 ? parts.join(" ") : "0s" } 51:T971,import { TrendingDownIcon, TrendingUpIcon } from "lucide-react" import { cn } from "@/lib/utils" export function Metric({ className, ...props }: React.ComponentProps<"div">) { return (

) } export function MetricLabel({ className, ...props }: React.ComponentProps<"div">) { return (

) } export type MetricChangeProps = { /** * Percentage change against the previous period, e.g. `12.4` for `+12.4%`. * `null` when there is no previous period to compare against. */ value: number | null } /** * Assumes every metric is one where higher is better, so up maps to green. * The icon carries the direction too, so the meaning survives without color. */ export function MetricChange({ value }: MetricChangeProps) { if (value === null) { return null } const percent = Math.round(value * 10) / 10 const Icon = percent > 0 ? TrendingUpIcon : TrendingDownIcon return ( 0 && "text-green-700 dark:text-green-500", percent < 0 && "text-red-700 dark:text-red-400" )} > {percent !== 0 && ( <> {percent > 0 ? "Up by " : "Down by "} )} {Math.abs(percent).toLocaleString("en-US")}% compared to the previous period ) } export function MetricValue({ className, ...props }: React.ComponentProps<"div">) { return (

) } 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","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","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":"date-fns"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@ncdai","registryDependencies":["@bklit/line-chart","https://chanhdai.com/r/style.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/blocks/metrics-01/metrics-01.tsx","content":"$50","type":"registry:component","target":"@components/metrics-01.tsx"},{"path":"src/registry/blocks/metrics-01/components/metric.tsx","content":"$51","type":"registry:component","target":"@components/metric.tsx"}],"className":"h-[70svh] min-h-80"}]]}]

Insights ({format(new Date(data.startDate), "dd.MM")} –{" "} {format(new Date(data.endDate), "dd.MM")})

Insights ^{({format(new Date(data.startDate), "dd.MM")} –{" "}
{format(new Date(data.endDate), "dd.MM")})}