Networks & maps
What connects to what and where: rings out from one thing, hubs and lanes, a globe of arcs and a map of regions.
Installation & usage
npx @youj/cli add app-radial-networkAlso installs alert, button, card, empty, radial-graph, segmented-control, skeleton, typography, use-controllable-state, youj-core, youj-ui-core.
The CLI copies the block to blocks/app/radial-network.tsx with every component it uses, so it’s yours to edit.
Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:
'use client'
import { RadialNetwork, type RadialNetworkProps } from '@/blocks/app/radial-network'
export function RadialNetworkView({ center, nodes, kinds, states }: Pick<RadialNetworkProps, 'center' | 'nodes' | 'kinds' | 'states'>) {
return (
<RadialNetwork
center={center}
nodes={nodes}
kinds={kinds}
states={states}
copy={{ title: 'Blast radius' }}
onRetry={() => {
// your code
}}
onHopsChange={(hops) => {
// your code
}}
/>
)
}Description
What a compromised account reaches, as a radial graph: the account in the middle, what it touches one hop out and what those lead to on the next ring, each dot in its kind's color. Compromised things wear a solid ring and at-risk ones a dashed ring, with the link into them drawn the same way, so the attacker's path reads at a glance. Pick 1 or 2 hops in the header; the foot counts what is compromised, at risk and reached.
A network of hubs on a world map: volume handled, the share on target and hubs healthy, with lanes drawn as arcs. Pick a hub for its figures and top lanes, then act on it. A parcel carrier by default, with airline routes and a data center mesh in the stories; the statuses, metrics, thresholds and formats are yours.
What comes in from around the world, live: a dot globe turns while each event is thrown across it as an arc to the place that serves it. Regions and places are toggles that bring a part of the globe forward; period and site re-cut every figure. Site visitors by default; card payments and flights are in the stories, and the regions, periods, sites, figures and words are all yours.
Where activity comes from: the total rate, a dot map with each region lit by its share, and a table of regions with share, rate and a reading that flags the ones in trouble. API traffic by default, with ride requests and store sales in the stories; the ranges, formats, threshold and the action are yours.
Code
Radial Network, the Radial network story: the files youj add writes.
blocks/app
Reference
Props17 props, 4 types
Props
| Prop | Type | |
|---|---|---|
theme | ThemeInputWraps the card in this theme. Default: the theme around it. | – |
embedded | booleanInside another app: a default true | true |
fill | booleanTake the whole width it's given instead of stopping at its natural width (448px at 100% scale). default false | false |
copy | Partial<RadialNetworkCopy>Any of the card's strings, to rewrite or translate. | – |
locale | stringFormats the counts (BCP 47). Default: the app's locale (YoujProvider), else en-US. | – |
center | RadialNetworkCenterWhere it starts. default demo | demo |
nodes | RadialNetworkNode[]Everything it reaches, each hanging from its default demo | demo |
kinds | RadialNetworkKind[]The kinds of things, with their colors, in the key's order. default demo | demo |
states | RadialNetworkState[]The states a node can be in, with their rings, in the key's order. default compromised, at risk, clean | compromised, at risk, clean |
format | (value: number) => stringFormats the foot's counts. Default: the locale's number format. | – |
loading | booleanSkeletons in place of the graph while your data loads. default false | false |
error | stringShown in place of the graph when it fails to load, with Retry when | – |
onRetry | () => voidRetries after an | – |
empty | ReactNodeReplaces the message when there is nothing to draw. Default: | – |
hops | numberHow many hops to show, controlled. | – |
defaultHops | numberHow many hops to show at first. Default: all of them. | – |
onHopsChange | (hops: number) => voidCalled with the hops picked in the header. | – |
RadialNetworkCenter
| Prop | Type | |
|---|---|---|
idRequired | string | – |
nameRequired | string | – |
short | stringUp to three characters in the center's disc. Default: the name's initials. | – |
kindRequired | string | – |
state | stringA | – |
RadialNetworkKind
| Prop | Type | |
|---|---|---|
idRequired | string | – |
labelRequired | string | – |
toneRequired | RadialNetworkTone'accent''neutral''chart-1''chart-2''chart-3''chart-4''chart-5' | – |
RadialNetworkNode
| Prop | Type | |
|---|---|---|
idRequired | string | – |
nameRequired | stringAs your tooling names it, set in mono in its tooltip: "lt-moreau". | – |
kindRequired | stringA | – |
via | stringThe node it is reached through, one hop in. Default: the center. | – |
state | stringA | – |
note | stringWhy it is in that state, in its tooltip: "Readable with the new token". | – |
RadialNetworkState
| Prop | Type | |
|---|---|---|
idRequired | string | – |
labelRequired | string | – |
ring | 'solid' | 'dashed'The ring the node wears, and how the link into it is drawn. Default: none. | – |
tone | 'accent' | 'info' | 'success' | 'warning' | 'danger'The ring's color. default 'danger' | 'danger' |
count | booleanCounted in the foot, in this order. | – |
emphasis | booleanThe foot's figure for it in the state's color. | – |
Strings13 keys for copy
Strings
copy takes any of these keys; the rest keep their defaults. A key whose text holds a value (a count, a name) takes a function.
titlesubtitlehopsLabelhopsgraphLabelstatesLabelkindsLabeltotalloadingLabelerrorTitleretryemptyTitleemptyDescriptionBuilt from8 components
Built from
Accessibilityimages, radio groups, tables, motion
Accessibility
Radial network picks its hops with one named choice and draws the graph as a named group described by how many things are reached within the hops shown. Every node is in a list, named with its distance ("invoice-exports, 2 hops away") and described by its state and note; the graph is one tab stop, the arrow keys walk the rings and follow links, and focus shows the same tooltip hovering does. States are words and solid or dashed rings, never color alone, and the foot's counts are a description list.
On the hubs map the drawing is aria-hidden and the hubs are a labelled radio group: each hub is named with its figures, and the arrow keys walk west to east. Each lane in the panel has a spoken label with its direction, volume and travel time.
The arc globe is an image with a text summary, drawn on a canvas that is aria-hidden; its figures are also in a visually hidden table and the lists beside it. Regions and places are aria-pressed toggles, places are named with their share, and the period and site controls and the Live toggle are labelled. The feed of latest visits has a heading.
The region map makes the table the source of truth for the dot map: the map is an image with a summary, rows are named, and each region's Show on map button has aria-pressed. The range control and Live toggle are labelled.
Under reduced motion the globe is a single still frame and values change in place.