4d:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 4e:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 4f:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 50:T3ab0,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useState } from "react"; import { AnimatedChart } from "@/components/motion-lexicon/animated-chart"; import { MetricTicker } from "@/components/motion-lexicon/metric-ticker"; import { SegmentedControl } from "@/components/motion-lexicon/segmented-control"; type Locale = "zh" | "en"; type Range = "7d" | "30d" | "90d"; export type AnalyticsDashboardBlockProps = { locale?: Locale; className?: string; }; const ease = [0.23, 1, 0.32, 1] as const; const ranges: Range[] = ["7d", "30d", "90d"]; export function AnalyticsDashboardBlock({ locale = "en", className = "" }: AnalyticsDashboardBlockProps) { const reduced = useReducedMotion(); const [range, setRange] = useState("30d"); const copy = locale === "zh" ? zh : en; const snapshot = copy.snapshots[range]; return (

{copy.workspace}{copy.updated}

{copy.eyebrow}

{copy.title}

{ranges.map((item) => )}

`${(value / 1000).toFixed(1)}k`} delta={Number.parseFloat(snapshot.metrics[0].change)} period={copy.rangeNames[range]} className="w-full sm:max-w-[280px]" /> ({ value: item, label: copy.rangeNames[item] }))} value={range} onValueChange={(value) => setRange(value as Range)} label={copy.rangeLabel} />

{snapshot.metrics.map((metric) =>

{metric.label}

{metric.value}{metric.change}

)}

{copy.traffic}{snapshot.trafficLabel}

{snapshot.axis}

{[0, 1, 2, 3].map((line) => )}

[42, 65, 51, 79][index]), color: "#2563eb" }]} />

{copy.channels}
{snapshot.channels.map((channel, index) =>
{channel.label}{channel.value}%
)}

{copy.segments}{copy.live}

{snapshot.segments.map((segment) =>
{segment.name}{segment.users}{segment.rate}
)}

); } type Snapshot = { metrics: Array<{ label: string; value: string; change: string; positive: boolean }>; trafficLabel: string; axis: string; path: string; channels: Array<{ label: string; value: number }>; segments: Array<{ name: string; users: string; rate: string }>; }; const baseSnapshots: Record & { values: string[]; changes: string[]; traffic: string }> = { "7d": { values: ["18.4k", "4.8%", "$42.6k", "3m 18s"], changes: ["+8.2%", "+0.6%", "+5.1%", "-4.0%"], traffic: "Daily traffic", axis: "AUG 06 — AUG 12", path: "M0 150 C70 140 84 94 150 110 C222 128 244 56 312 72 C380 89 414 44 474 58 C535 72 570 28 640 34", channels: [{ label: "Organic", value: 46 }, { label: "Direct", value: 31 }, { label: "Partner", value: 15 }, { label: "Paid", value: 8 }], segments: [{ name: "Product teams", users: "8,420 users", rate: "+12.4%" }, { name: "Independent makers", users: "5,118 users", rate: "+7.8%" }, { name: "Agencies", users: "2,906 users", rate: "+4.1%" }] }, "30d": { values: ["72.8k", "5.2%", "$168k", "3m 42s"], changes: ["+14.6%", "+0.9%", "+11.2%", "+6.3%"], traffic: "Monthly traffic", axis: "JUL 14 — AUG 12", path: "M0 158 C58 148 86 112 142 120 C212 132 240 70 304 84 C370 98 394 52 458 64 C524 77 566 34 640 42", channels: [{ label: "Organic", value: 52 }, { label: "Direct", value: 27 }, { label: "Partner", value: 13 }, { label: "Paid", value: 8 }], segments: [{ name: "Product teams", users: "31,840 users", rate: "+18.2%" }, { name: "Independent makers", users: "20,216 users", rate: "+12.5%" }, { name: "Agencies", users: "11,608 users", rate: "+8.4%" }] }, "90d": { values: ["208k", "4.9%", "$486k", "3m 31s"], changes: ["+32.1%", "+1.4%", "+28.5%", "+9.8%"], traffic: "Quarterly traffic", axis: "MAY 15 — AUG 12", path: "M0 165 C54 152 104 136 152 142 C218 150 250 92 316 101 C376 109 410 66 474 76 C536 85 574 46 640 50", channels: [{ label: "Organic", value: 55 }, { label: "Direct", value: 24 }, { label: "Partner", value: 14 }, { label: "Paid", value: 7 }], segments: [{ name: "Product teams", users: "91,204 users", rate: "+38.7%" }, { name: "Independent makers", users: "58,466 users", rate: "+27.9%" }, { name: "Agencies", users: "34,882 users", rate: "+19.6%" }] }, }; function makeSnapshots(labels: string[], trafficLabels: Record): Record { return Object.fromEntries(ranges.map((range) => { const item = baseSnapshots[range]; return [range, { metrics: item.values.map((value, index) => ({ label: labels[index], value, change: item.changes[index], positive: !item.changes[index].startsWith("-") })), trafficLabel: trafficLabels[range], axis: item.axis, path: item.path, channels: item.channels, segments: item.segments }]; })) as Record; } const en = { navigation: "Analytics navigation", nav: [{ label: "Overview", href: "#northstar-dashboard" }, { label: "Funnels", href: "#northstar-dashboard" }, { label: "Retention", href: "#northstar-dashboard" }, { label: "Reports", href: "#northstar-dashboard" }], pipeline: "Data pipeline", healthy: "All sources healthy", workspace: "Atlas analytics", updated: "Updated 2 minutes ago", export: "Export report", eyebrow: "Workspace health", title: "Growth overview", rangeLabel: "Date range", rangeNames: { "7d": "7 days", "30d": "30 days", "90d": "90 days" }, traffic: "Traffic trend", channels: "Acquisition channels", segments: "Top segments", live: "LIVE DATA", snapshots: makeSnapshots(["Unique visitors", "Activation", "Revenue", "Session time"], { "7d": "Daily traffic", "30d": "Monthly traffic", "90d": "Quarterly traffic" }), }; const zh = { navigation: "数据分析导航", nav: [{ label: "总览", href: "#northstar-dashboard" }, { label: "漏斗", href: "#northstar-dashboard" }, { label: "留存", href: "#northstar-dashboard" }, { label: "报告", href: "#northstar-dashboard" }], pipeline: "数据管道", healthy: "全部数据源正常", workspace: "Atlas 数据分析", updated: "2 分钟前更新", export: "导出报告", eyebrow: "工作区健康度", title: "增长总览", rangeLabel: "日期范围", rangeNames: { "7d": "7 天", "30d": "30 天", "90d": "90 天" }, traffic: "访问趋势", channels: "获客渠道", segments: "核心用户群", live: "实时数据", snapshots: makeSnapshots(["独立访客", "激活率", "收入", "会话时长"], { "7d": "每日访问趋势", "30d": "月度访问趋势", "90d": "季度访问趋势" }), }; 49:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4d",null,{"registryDependencies":["https://motion-lexicon.pages.dev/r/animated-chart.json","https://motion-lexicon.pages.dev/r/metric-ticker.json","https://motion-lexicon.pages.dev/r/segmented-control.json"]}]]}],["$","$L4e",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/analytics-dashboard.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/analytics-dashboard","itemId":"@motion-lexicon/analytics-dashboard"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L4f",null,{"files":[{"path":"src/registry/blocks/analytics-dashboard.tsx","content":"$50","type":"registry:component","target":"components/motion-lexicon/blocks/analytics-dashboard.tsx"}]}]]}],"$L51"]}]

Analytics Dashboard

Installation

Files

components

Styles