52: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"] 53:T839b,"use client" import type * as React from "react" import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react" import { cn } from "@/lib/utils" export type AnalyticsHeroChartDatum = { label: string value: number } export type AnalyticsHeroSourceIconKey = | "google" | "vercel" | "x" | "yc" | "splitbee" | "linear" | "github" export type AnalyticsHeroSource = { name: string visitors: number icon: AnalyticsHeroSourceIconKey } export type AnalyticsHeroLog = { time: string rt: "mw" | "fe" method: string status: number path: string } export const ANALYTICS_HERO_CHART_DATA: AnalyticsHeroChartDatum[] = [ { label: "Fri May 10 6am - 7am", value: 142_310 }, { label: "Fri May 10 7am - 8am", value: 142_310 }, { label: "Fri May 10 8am - 9am", value: 285_420 }, { label: "Fri May 10 9am - 10am", value: 428_530 }, { label: "Fri May 10 10am - 11am", value: 428_530 }, { label: "Fri May 10 11am - 12pm", value: 609_797 }, { label: "Fri May 10 12pm - 1pm", value: 752_640 }, { label: "Fri May 10 1pm - 2pm", value: 618_070 }, { label: "Fri May 10 2pm - 3pm", value: 895_750 }, { label: "Fri May 10 3pm - 4pm", value: 752_640 }, { label: "Fri May 10 4pm - 5pm", value: 895_750 }, { label: "Fri May 10 5pm - 6pm", value: 895_750 }, { label: "Fri May 10 6pm - 7pm", value: 1_038_860 }, ] export const ANALYTICS_HERO_SOURCES: AnalyticsHeroSource[] = [ { name: "google.com", visitors: 259_010, icon: "google" }, { name: "vercel.com", visitors: 132_821, icon: "vercel" }, { name: "x.com", visitors: 51_280, icon: "x" }, { name: "ycombinator.com", visitors: 27_102, icon: "yc" }, { name: "splitbee.com", visitors: 20_186, icon: "splitbee" }, { name: "linear.com", visitors: 18_281, icon: "linear" }, { name: "github.blog", visitors: 13_021, icon: "github" }, ] export const ANALYTICS_HERO_LOGS: AnalyticsHeroLog[] = [ { time: "24:59", rt: "mw", method: "GET", status: 200, path: "/app/front/ap...", }, { time: "24.52", rt: "fe", method: "GET", status: 200, path: "/status/api" }, { time: "24.50", rt: "mw", method: "GET", status: 200, path: "/docs" }, { time: "24.43", rt: "fe", method: "GET", status: 200, path: "/api/jwt" }, ] export const ANALYTICS_HERO_STOPS = [ "#FF975C", "#FAA95A", "#F5BE57", "#EED353", "#EAE550", "#D7E84B", "#C2E447", "#B2E444", "#9ADD3E", "#84DB40", "#67D141", "#4ECB42", "#37C442", ] as const export function getAnalyticsHeroColor(index: number) { return ANALYTICS_HERO_STOPS[Math.min(index, ANALYTICS_HERO_STOPS.length - 1)] } export function AnalyticsHeroGoogleIcon(props: React.ComponentProps<"svg">) { return ( ) } export function AnalyticsHeroVercelIcon(props: React.ComponentProps<"svg">) { return ( ) } export function AnalyticsHeroXIcon(props: React.ComponentProps<"svg">) { return ( ) } export function AnalyticsHeroYcIcon(props: React.ComponentProps<"svg">) { return ( ) } export function AnalyticsHeroSplitbeeIcon(props: React.ComponentProps<"svg">) { return ( ) } export function AnalyticsHeroLinearIcon(props: React.ComponentProps<"svg">) { return ( ) } export function AnalyticsHeroGithubIcon(props: React.ComponentProps<"svg">) { return ( ) } export const ANALYTICS_HERO_ICONS: Record< AnalyticsHeroSourceIconKey, (props: React.ComponentProps<"svg">) => React.JSX.Element > = { google: AnalyticsHeroGoogleIcon, vercel: AnalyticsHeroVercelIcon, x: AnalyticsHeroXIcon, yc: AnalyticsHeroYcIcon, splitbee: AnalyticsHeroSplitbeeIcon, linear: AnalyticsHeroLinearIcon, github: AnalyticsHeroGithubIcon, } export interface AnalyticsHeroCrosshairProps extends React.ComponentProps<"div"> {} export function AnalyticsHeroCrosshair({ className, ...props }: AnalyticsHeroCrosshairProps) { return (

) } export interface AnalyticsHeroGridLinesProps extends React.ComponentProps<"div"> { cols: number rows: number } export function AnalyticsHeroGridLines({ cols, rows, className, ...props }: AnalyticsHeroGridLinesProps) { const verticalPositions = Array.from( { length: cols + 1 }, (_, i) => `${((i / cols) * 100).toFixed(4)}%` ) const horizontalPositions = Array.from( { length: rows + 1 }, (_, i) => `${((i / rows) * 100).toFixed(4)}%` ) return (

{verticalPositions.map((left) => (

))} {horizontalPositions.map((top) => (

))}

) } export interface AnalyticsHeroChartProps extends Omit, "onHover"> { data: AnalyticsHeroChartDatum[] hovered: number | null onHover: (index: number | null) => void } export function AnalyticsHeroChart({ data, hovered, onHover, className, ...props }: AnalyticsHeroChartProps) { const idBase = useId().replaceAll(":", "") const lineGradientId = `${idBase}-line-gradient` const fillGradientId = `${idBase}-fill-gradient` const hoverClipId = `${idBase}-hover-clip` const max = Math.max(...data.map((d) => d.value)) const points = data.map((d, i) => ({ x: (i / (data.length - 1)) * 960, y: 560 - (d.value / max) * 480 - 20, })) const linePath = points .map((point, i) => `${i ? "L" : "M"}${point.x} ${point.y}`) .join(" ") const fillPath = `${linePath} L960 560 L0 560 Z` const clipX = hovered !== null ? (points[hovered]?.x ?? 0) : 0 return ( ) } export interface AnalyticsHeroTooltipProps extends React.ComponentProps<"div"> { data: AnalyticsHeroChartDatum[] index: number | null containerRef: React.RefObject sectionRef: React.RefObject } export function AnalyticsHeroTooltip({ data, index, containerRef, sectionRef, className, ...props }: AnalyticsHeroTooltipProps) { if (index === null || !containerRef.current || !sectionRef.current) { return null } const chartRect = containerRef.current.getBoundingClientRect() const sectionRect = sectionRef.current.getBoundingClientRect() const max = Math.max(...data.map((d) => d.value)) const xRatio = index / (data.length - 1) const yRatio = 1 - (data[index].value / max) * (480 / 560) - 20 / 560 let left = chartRect.left - sectionRect.left + xRatio * chartRect.width + 12 const top = chartRect.top - sectionRect.top + yRatio * chartRect.height + 12 if (left + 200 > sectionRect.width) { left = chartRect.left - sectionRect.left + xRatio * chartRect.width - 210 } return (

Visitors {data[index].value.toLocaleString()}

{data[index].label}

) } export interface AnalyticsHeroAppLogsProps extends React.ComponentProps<"div"> { logs: AnalyticsHeroLog[] timestamp?: string } export function AnalyticsHeroAppLogs({ logs, timestamp = "13:39", className, ...props }: AnalyticsHeroAppLogsProps) { const [visible, setVisible] = useState(false) useEffect(() => { const timeout = setTimeout(() => setVisible(true), 420) return () => clearTimeout(timeout) }, []) return (

App Logs {timestamp}

{logs.map((log) => (

{log.time} {log.rt === "mw" ? "M" : "ƒe"} {log.method} {log.status} {log.path}

))}

) } export interface AnalyticsHeroTopSourcesProps extends React.ComponentProps<"div"> { sources: AnalyticsHeroSource[] } export function AnalyticsHeroTopSources({ sources, className, ...props }: AnalyticsHeroTopSourcesProps) { const maxVisitors = Math.max(...sources.map((source) => source.visitors)) const [visible, setVisible] = useState(false) useEffect(() => { const timeout = setTimeout(() => setVisible(true), 540) return () => clearTimeout(timeout) }, []) return (

Top Sources Visitors

{sources.map((source) => { const SourceIcon = ANALYTICS_HERO_ICONS[source.icon] const width = (source.visitors / maxVisitors) * 100 return (

{source.name}

{source.visitors.toLocaleString()}

) })}

) } export interface AnalyticsHeroCopyProps extends React.ComponentProps<"div"> { visible: boolean title?: string description?: string deployLabel?: string demoLabel?: string } export function AnalyticsHeroCopy({ visible, title = "Understand production from the inside out.", description = "With real-time infrastructure and traffic insights, Vercel is the mission control for frontend applications.", deployLabel = "Deploy Now", demoLabel = "Get a Demo", className, ...props }: AnalyticsHeroCopyProps) { return (

{title}

{description}

) } export interface AnalyticsHeroVisualProps extends React.ComponentProps<"div"> { logs: AnalyticsHeroLog[] sources: AnalyticsHeroSource[] } export function AnalyticsHeroVisual({ logs, sources, className, ...props }: AnalyticsHeroVisualProps) { return (

) } export interface AnalyticsHeroProps extends React.ComponentProps<"section"> { data?: AnalyticsHeroChartDatum[] sources?: AnalyticsHeroSource[] logs?: AnalyticsHeroLog[] logsTimestamp?: string title?: string description?: string deployLabel?: string demoLabel?: string } export function AnalyticsHero({ data = ANALYTICS_HERO_CHART_DATA, sources = ANALYTICS_HERO_SOURCES, logs = ANALYTICS_HERO_LOGS, title, description, deployLabel, demoLabel, className, ...props }: AnalyticsHeroProps) { const [hovered, setHovered] = useState(null) const chartRef = useRef(null) const sectionRef = useRef(null) const [visible, setVisible] = useState(false) useEffect(() => { const timeout = setTimeout(() => setVisible(true), 60) return () => clearTimeout(timeout) }, []) const lineX = useMemo(() => { if (hovered === null || !chartRef.current || !sectionRef.current) { return null } const chartRect = chartRef.current.getBoundingClientRect() const sectionRect = sectionRef.current.getBoundingClientRect() const xRatio = hovered / (data.length - 1) return chartRect.left - sectionRect.left + xRatio * chartRect.width }, [data.length, hovered]) const handleHover = useCallback((index: number | null) => { setHovered(index) }, []) return (

{lineX !== null ? (

) } export default AnalyticsHero 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/default/ui/marketing-hero-analytics.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]