UIPackage
Menu

Framework

VueReact

Change language

Boilerplate repo

Global Edge Network

blockdashboard
Boilerplate repo

Cloudflare Radar and Vercel Edge style infrastructure console with real-time anycast telemetry, interactive DottedMapChart with Bezier flow corridors, P95 latency HUD metrics, and live edge node routing table.

Also available for React ->

Installation

$npx shadcn-vue@latest add https://uipkge.dev/r/vue/global-edge-network.json
Named registry:npx shadcn-vue@latest add @uipkge/global-edge-networkInstalls to:app/components/blocks/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

EdgeNode
interface EdgeNode {
  id: string
  name: string
  code: string
  region: 'Americas' | 'Europe' | 'APAC'
  city: string
  country: string
  role: string
  lat: number
  lng: number
  latencyMs: number
  throughput: string
  status: 'optimal' | 'degraded'
}
CorridorDefinition
interface CorridorDefinition {
  fromNodeId: string
  toNodeId: string
  color?: string
  duration?: number
  curvature?: number
  dashed?: boolean
  label: string
}

npm dependencies

lucide-vue-next

Theming

CSS custom properties referenced in this item. Override any of them in your :root or per-element to retheme.

--chart-1--chart-2--chart-3--chart-4--chart-5--primary

Files installed (2)

  • app/components/blocks/GlobalEdgeNetwork.vue12.9 kB
    <script setup lang="ts">
import { computed, ref } from 'vue'
import { Globe, X } from 'lucide-vue-next'
import { DottedMapChart, type MapPin, type MapRoute } from '@/components/ui/charts/dotted-map-chart'
import { cn } from '@/lib/utils'

export interface EdgeNode {
  id: string
  name: string
  code: string
  region: 'Americas' | 'Europe' | 'APAC'
  city: string
  country: string
  role: string
  lat: number
  lng: number
  latencyMs: number
  throughput: string
  status: 'optimal' | 'degraded'
}

const REGIONS = ['All', 'Americas', 'Europe', 'APAC'] as const
type RegionFilter = (typeof REGIONS)[number]

const ALL_NODES: EdgeNode[] = [
  {
    id: 'sfo-01',
    name: 'SFO-Edge-1',
    code: 'SFO',
    region: 'Americas',
    city: 'San Francisco',
    country: 'United States',
    role: 'Tier-1 Gateway',
    lat: 37.7749,
    lng: -122.4194,
    latencyMs: 18,
    throughput: '340 Gbps',
    status: 'optimal',
  },
  {
    id: 'iad-01',
    name: 'IAD-Edge-1',
    code: 'IAD',
    region: 'Americas',
    city: 'Ashburn',
    country: 'United States',
    role: 'Primary Transit Core',
    lat: 39.0438,
    lng: -77.4874,
    latencyMs: 12,
    throughput: '520 Gbps',
    status: 'optimal',
  },
  {
    id: 'ord-01',
    name: 'ORD-Edge-1',
    code: 'ORD',
    region: 'Americas',
    city: 'Chicago',
    country: 'United States',
    role: 'Midwest Exchange',
    lat: 41.8781,
    lng: -87.6298,
    latencyMs: 19,
    throughput: '280 Gbps',
    status: 'optimal',
  },
  {
    id: 'gru-01',
    name: 'GRU-Edge-1',
    code: 'GRU',
    region: 'Americas',
    city: 'São Paulo',
    country: 'Brazil',
    role: 'LATAM Core Transit',
    lat: -23.5505,
    lng: -46.6333,
    latencyMs: 44,
    throughput: '140 Gbps',
    status: 'degraded',
  },
  {
    id: 'lhr-01',
    name: 'LHR-Edge-1',
    code: 'LHR',
    region: 'Europe',
    city: 'London',
    country: 'United Kingdom',
    role: 'EMEA Backbone Core',
    lat: 51.5074,
    lng: -0.1278,
    latencyMs: 14,
    throughput: '480 Gbps',
    status: 'optimal',
  },
  {
    id: 'fra-01',
    name: 'FRA-Edge-1',
    code: 'FRA',
    region: 'Europe',
    city: 'Frankfurt',
    country: 'Germany',
    role: 'DE-CIX Direct Peer',
    lat: 50.1109,
    lng: 8.6821,
    latencyMs: 16,
    throughput: '410 Gbps',
    status: 'optimal',
  },
  {
    id: 'ams-01',
    name: 'AMS-Edge-1',
    code: 'AMS',
    region: 'Europe',
    city: 'Amsterdam',
    country: 'Netherlands',
    role: 'AMS-IX Transit Ring',
    lat: 52.3676,
    lng: 4.9041,
    latencyMs: 15,
    throughput: '390 Gbps',
    status: 'optimal',
  },
  {
    id: 'nrt-01',
    name: 'NRT-Edge-1',
    code: 'NRT',
    region: 'APAC',
    city: 'Tokyo',
    country: 'Japan',
    role: 'East Asia Gateway',
    lat: 35.6762,
    lng: 139.6503,
    latencyMs: 22,
    throughput: '360 Gbps',
    status: 'optimal',
  },
  {
    id: 'sin-01',
    name: 'SIN-Edge-1',
    code: 'SIN',
    region: 'APAC',
    city: 'Singapore',
    country: 'Singapore',
    role: 'South Asia Gateway',
    lat: 1.3521,
    lng: 103.8198,
    latencyMs: 26,
    throughput: '290 Gbps',
    status: 'optimal',
  },
  {
    id: 'syd-01',
    name: 'SYD-Edge-1',
    code: 'SYD',
    region: 'APAC',
    city: 'Sydney',
    country: 'Australia',
    role: 'Oceania Anycast POP',
    lat: -33.8688,
    lng: 151.2093,
    latencyMs: 31,
    throughput: '170 Gbps',
    status: 'optimal',
  },
]

interface CorridorDefinition {
  fromNodeId: string
  toNodeId: string
  color?: string
  duration?: number
  curvature?: number
  dashed?: boolean
  label: string
}

const CORRIDORS: CorridorDefinition[] = [
  {
    fromNodeId: 'sfo-01',
    toNodeId: 'iad-01',
    color: 'var(--chart-1)',
    duration: 2.6,
    curvature: 0.2,
    label: 'Trans-US Backbone (SFO ↔ IAD)',
  },
  {
    fromNodeId: 'sfo-01',
    toNodeId: 'ord-01',
    color: 'var(--chart-1)',
    duration: 2.2,
    curvature: 0.16,
    dashed: true,
    label: 'Central Overland (SFO ↔ ORD)',
  },
  {
    fromNodeId: 'ord-01',
    toNodeId: 'iad-01',
    color: 'var(--chart-1)',
    duration: 1.8,
    curvature: 0.14,
    label: 'Great Lakes Trunk (ORD ↔ IAD)',
  },
  {
    fromNodeId: 'iad-01',
    toNodeId: 'lhr-01',
    color: 'var(--chart-2)',
    duration: 3.2,
    curvature: 0.28,
    label: 'Transatlantic Express (IAD ↔ LHR)',
  },
  {
    fromNodeId: 'lhr-01',
    toNodeId: 'fra-01',
    color: 'var(--chart-3)',
    duration: 1.9,
    curvature: 0.15,
    label: 'Channel Link (LHR ↔ FRA)',
  },
  {
    fromNodeId: 'fra-01',
    toNodeId: 'ams-01',
    color: 'var(--chart-3)',
    duration: 1.7,
    curvature: 0.14,
    dashed: true,
    label: 'Rhine Valley Ring (FRA ↔ AMS)',
  },
  {
    fromNodeId: 'lhr-01',
    toNodeId: 'ams-01',
    color: 'var(--chart-3)',
    duration: 1.8,
    curvature: 0.16,
    label: 'North Sea Subsea (LHR ↔ AMS)',
  },
  {
    fromNodeId: 'fra-01',
    toNodeId: 'sin-01',
    color: 'var(--chart-4)',
    duration: 3.6,
    curvature: 0.22,
    label: 'Eurasia Optical Trunk (FRA ↔ SIN)',
  },
  {
    fromNodeId: 'sin-01',
    toNodeId: 'nrt-01',
    color: 'var(--chart-4)',
    duration: 2.5,
    curvature: 0.18,
    label: 'East Asia Marine Cable (SIN ↔ NRT)',
  },
  {
    fromNodeId: 'sin-01',
    toNodeId: 'syd-01',
    color: 'var(--chart-5)',
    duration: 3.0,
    curvature: 0.22,
    dashed: true,
    label: 'Southern Cross Link (SIN ↔ SYD)',
  },
  {
    fromNodeId: 'nrt-01',
    toNodeId: 'sfo-01',
    color: 'var(--chart-2)',
    duration: 3.8,
    curvature: 0.3,
    label: 'Pacific High-Speed (NRT ↔ SFO)',
  },
  {
    fromNodeId: 'iad-01',
    toNodeId: 'gru-01',
    color: 'var(--chart-5)',
    duration: 3.4,
    curvature: 0.24,
    label: 'Americas Interlink (IAD ↔ GRU)',
  },
]

const activeRegion = ref<RegionFilter>('All')
const selectedNode = ref<EdgeNode | null>(null)
const hoveredNode = ref<EdgeNode | null>(null)

const activeNode = computed(() => hoveredNode.value || selectedNode.value)

function setRegion(region: RegionFilter) {
  activeRegion.value = region
  if (selectedNode.value && region !== 'All' && selectedNode.value.region !== region) {
    selectedNode.value = null
  }
}

function handlePinClick(pin: MapPin) {
  const node = ALL_NODES.find((n) => n.lat === pin.lat && n.lng === pin.lng)
  if (node) {
    selectedNode.value = selectedNode.value?.id === node.id ? null : node
  }
}

function handlePinHover(pin: MapPin | null) {
  if (!pin) {
    hoveredNode.value = null
  } else {
    hoveredNode.value = ALL_NODES.find((n) => n.lat === pin.lat && n.lng === pin.lng) ?? null
  }
}

const filteredNodes = computed(() => {
  if (activeRegion.value === 'All') return ALL_NODES
  return ALL_NODES.filter((n) => n.region === activeRegion.value)
})

const nodeMap = computed(() => new Map(ALL_NODES.map((n) => [n.id, n])))

const mapPins = computed<MapPin[]>(() => {
  return filteredNodes.value.map((n) => ({
    lat: n.lat,
    lng: n.lng,
    label: `${n.city} (${n.code})`,
    color: n.status === 'optimal' ? 'var(--chart-1)' : '#f59e0b',
    description: n.role,
    value: `${n.latencyMs}ms • ${n.throughput}`,
    status: n.status,
  }))
})

const mapRoutes = computed<MapRoute[]>(() => {
  const visibleIds = new Set(filteredNodes.value.map((n) => n.id))
  return CORRIDORS.filter((c) => {
    if (activeRegion.value === 'All') return true
    return visibleIds.has(c.fromNodeId) && visibleIds.has(c.toNodeId)
  })
    .map((c) => {
      const fromNode = nodeMap.value.get(c.fromNodeId)
      const toNode = nodeMap.value.get(c.toNodeId)
      if (!fromNode || !toNode) return null
      return {
        from: { lat: fromNode.lat, lng: fromNode.lng },
        to: { lat: toNode.lat, lng: toNode.lng },
        color: c.color ?? 'var(--primary)',
        duration: c.duration ?? 3,
        curvature: c.curvature ?? 0.2,
        dashed: c.dashed,
        label: c.label,
      }
    })
    .filter(Boolean) as MapRoute[]
})

const activeNodesText = computed(() => {
  switch (activeRegion.value) {
    case 'Americas':
      return '12 Nodes Active'
    case 'Europe':
      return '11 Nodes Active'
    case 'APAC':
      return '9 Nodes Active'
    default:
      return '32 Nodes Active'
  }
})

const activeAvgLatencyText = computed(() => {
  switch (activeRegion.value) {
    case 'Americas':
      return '16ms avg'
    case 'Europe':
      return '15ms avg'
    case 'APAC':
      return '26ms avg'
    default:
      return '18ms avg'
  }
})

const p95Latency = computed(() => {
  switch (activeRegion.value) {
    case 'Americas':
      return '19ms'
    case 'Europe':
      return '16ms'
    case 'APAC':
      return '28ms'
    default:
      return '24ms'
  }
})
</script>

<template>
  <div
    data-slot="global-edge-network"
    class="border-border bg-card/60 relative h-[500px] w-full overflow-hidden rounded-xl border shadow-xs backdrop-blur-xs"
  >
    <!-- Map Canvas (Hero) -->
    <DottedMapChart
      :pins="mapPins"
      :routes="mapRoutes"
      :height="500"
      aria-label="Global Anycast Edge Network World Map"
      class="h-full w-full"
      @pin-click="handlePinClick"
      @pin-hover="handlePinHover"
    />

    <!-- Top-Left Floating Chip: Title & Status -->
    <div class="pointer-events-none absolute top-3 left-3 z-10 sm:top-4 sm:left-4">
      <div
        class="border-border/60 bg-background/80 pointer-events-auto inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium shadow-xs backdrop-blur-md"
      >
        <span class="text-foreground flex items-center gap-1.5">
          <Globe class="text-muted-foreground h-3.5 w-3.5" />
          <span class="tracking-tight">Global Transit Mesh</span>
        </span>
        <span class="text-muted-foreground/40">•</span>
        <span class="text-muted-foreground inline-flex items-center gap-1.5">
          <span class="bg-success h-1.5 w-1.5 animate-pulse rounded-full" />
          <span>{{ activeNodesText }}</span>
        </span>
        <span class="text-muted-foreground/40 hidden md:inline">•</span>
        <span class="text-muted-foreground hidden font-mono md:inline">{{ activeAvgLatencyText }}</span>
      </div>
    </div>

    <!-- Top-Right Floating Chip: Glass Segmented Region Filter -->
    <div class="pointer-events-none absolute top-3 right-3 z-10 sm:top-4 sm:right-4">
      <div
        class="border-border/60 bg-muted/60 pointer-events-auto inline-flex items-center gap-0.5 rounded-lg border p-0.5 text-xs shadow-xs backdrop-blur-md"
      >
        <button
          v-for="region in REGIONS"
          :key="region"
          type="button"
          :class="
            cn(
              'rounded-md px-2.5 py-1 text-xs font-medium transition-colors duration-150',
              activeRegion === region
                ? 'bg-background text-foreground shadow-xs'
                : 'text-muted-foreground hover:text-foreground hover:bg-background/40',
            )
          "
          @click="setRegion(region)"
        >
          {{ region }}
        </button>
      </div>
    </div>

    <!-- Bottom-Left Floating Chip: Interactive Node Inspector -->
    <div class="pointer-events-none absolute bottom-3 left-3 z-10 sm:bottom-4 sm:left-4">
      <div
        class="border-border/60 bg-background/80 pointer-events-auto inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs shadow-xs backdrop-blur-md transition-colors duration-150"
      >
        <template v-if="activeNode">
          <span
            class="h-1.5 w-1.5 shrink-0 rounded-full"
            :class="activeNode.status === 'optimal' ? 'bg-success' : 'bg-warning'"
          />
          <span class="text-foreground font-medium"> {{ activeNode.city }} ({{ activeNode.code }}) </span>
          <span class="text-muted-foreground/40">•</span>
          <span class="text-muted-foreground font-mono">{{ activeNode.latencyMs }}ms</span>
          <span class="text-muted-foreground/40 hidden sm:inline">•</span>
          <span class="text-muted-foreground hidden font-mono sm:inline">{{ activeNode.throughput }}</span>
          <button
            v-if="selectedNode"
            type="button"
            aria-label="Clear selection"
            class="text-muted-foreground hover:text-foreground hover:bg-muted -mr-1 ml-0.5 rounded-full p-0.5 transition-colors"
            @click="selectedNode = null"
          >
            <X class="h-3 w-3" />
          </button>
        </template>
        <template v-else>
          <span class="bg-muted-foreground/40 h-1.5 w-1.5 shrink-0 rounded-full" />
          <span class="text-muted-foreground">Click a node to inspect</span>
        </template>
      </div>
    </div>

    <!-- Bottom-Right Floating Chip: Minimal Latency Badge -->
    <div class="pointer-events-none absolute right-3 bottom-3 z-10 sm:right-4 sm:bottom-4">
      <div
        class="border-border/60 bg-background/80 pointer-events-auto inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium shadow-xs backdrop-blur-md"
      >
        <span class="text-muted-foreground">P95</span>
        <span class="text-foreground font-mono">{{ p95Latency }}</span>
      </div>
    </div>
  </div>
</template>
  • app/components/blocks/global-edge-network/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/vue/global-edge-network.json