A dotted world map with edge regions and an origin: requests arc from everywhere on land to the nearest region, most answered from its cache, the rest fetched from the origin first; each region shows its latency live, and the requests a second, cache hits and median latency tick under the map. Pauses, and fits any width.
When to use
- A world map with traffic arcing between regions and attacks stopped at the edge.
- CDN, security and global infrastructure products; a live view of your own regions.
When not to use
- Products served from one region: the map would overstate them.
- Exact traffic by region: a table or a Bar List.
Usage
Global network with your own data: every prop has the sample as its default, so pass only what you have.
import { useEffect, useRef } from "react"
import { GlobalNetwork, type NetworkMapHandle } from "@/components/dashral/blocks/global-network"
const map = useRef<NetworkMapHandle>(null)
useEffect(() => edge.on("request", (r) => map.current?.send({ lon: r.lon, lat: r.lat }, { edge: r.pop, hit: r.cached })), [])
<GlobalNetwork ref={map} mode="live" edges={regions} />API reference
GlobalNetwork
The section: a heading, the map in a dotted panel with a Live badge and Pause, and a row of figures. Every part comes from props, with a sample network by default.
| Prop | Type | Default |
|---|---|---|
eyebrow | React.ReactNode | "Global network" |
title | React.ReactNode | sample |
description | React.ReactNode | sample |
edges | Region[]The edge regions and the origin they fetch from on a miss. | sample |
origin | Region | sample |
totals | NetworkMapProps["totals"]The figures under the map, shown as they are; sample ones without them. | — |
stats | { value: string; label: string }[]The figures under the panel; none hides the row. | sample |
mode | NetworkMapProps["mode"]With your own traffic instead of sample requests (see NetworkMap's mode="live"). | — |
ref | React.Ref<NetworkMapHandle> | — |
NetworkMap
Requests crossing the world: each sets off from somewhere on land as a hollow dot to the nearest edge region (it lights up); most are answered from its cache and go back as a solid square, the rest fetch from the origin first (dashed arcs). Latencies and the totals under the map tick live. The map is a fixed picture scaled to fit, so nothing is measured. One requestAnimationFrame loop writes the SVG and the numbers directly. Sample requests by default; with mode="live", the ones you send (see NetworkMapHandle). It stops off screen, in a hidden tab, when paused and (live) with nothing on its way; with reduced motion it's the map, the regions and their numbers, still.
| Prop | Type | Default |
|---|---|---|
edges | Region[]Required. | — |
origin | RegionRequired. | — |
totals | { label: string; value: string }[]The figures under the map, shown as they are. Without them, sample ones that wander a little in the demo. | — |
speed | numberHow fast it runs: 1 is the usual pace, 2 twice as fast, 0 holds it still. | 1 |
paused | booleanBrings it to rest where it is (easing down, not stopping in one frame). | false |
mode | "demo" | "live""demo" plays sample requests and lets latencies wander; "live" moves one only when you send it and shows each region's | "demo" |
ref | React.Ref<NetworkMapHandle> | — |
className | string | — |
type Region
| Prop | Type | Default |
|---|---|---|
id | string | — |
name | string | — |
code | string | — |
lon | number | — |
lat | number | — |
detail | string | — |
latency | number | — |
type NetworkMapHandle
Sends requests across a live map (mode="live").
| Prop | Type | Default |
|---|---|---|
send | (from: { lon: number; lat: number }, options?: { edge?: string; hit?: boolean }) => voidSends one request from a place (longitude and latitude) to the edge region with id | — |