OrbitStatus

OrbitStatus encodes two numbers in one glyph. The orbit radius is latency, so a wider orbit is a slower service, and the orbit's dash density is the call rate, so denser dashes mean more calls. In the interactive entry the satellite orbits at a speed that mirrors the rate. Both channels are low-precision ambient reads; for exact numbers use a Sparkline for latency and a Delta or MiniBar for rate. A lone orbit radius means nothing on its own, so pass explicit latencyDomain and rateDomain — the same steer as FatDigits.

Install

import { OrbitStatus } from "@microcharts/react/orbit-status";<OrbitStatus  latency={240}  rate={12}  latencyDomain={[0, 500]}  rateDomain={[0, 20]}  title="Payments API"/>

Try it

Motion, and reduced motion

The satellite's angular speed is quantized to the same five steps as the static dash density, so the motion and the still frame decode identically. Rate lives in the dashes as well as the spin, which is what lets a paused satellite still carry both variables. This is the deliberate idle-loop exception, allowed because the loop rate is the datum. It pauses off-screen and, under prefers-reduced-motion, does not spin at all: the dash density already carries the rate. Read the satellite's speed, not its angular position; the position encodes nothing.

When to use it

Use it for a live dependency health dot in a service table, for latency and rate together in one small mark, or for an infra status read. For exact latency or a trend over time use Sparkline; for exact rate use Delta or MiniBar.

Sizing

One size prop, in viewBox units, sets the orbit box — it defaults to 20. There is no separate width/height: the glyph is square, and the rendered box widens only by the gutter a label reserves. fontSize follows size unless you set it.

Variants

Edge cases

An unknown latency or rate renders gray, drops the satellite, and stops the spin, so an unreachable dependency never looks healthy. A rate of 0 draws a solid, dash-free orbit. At threshold the satellite doubles in size. The rate is quantized to five ordinal steps in both renderings (five dash counts and five angular periods), and radius and speed read from the same domains in the static and interactive frames.

Four homes

Accessibility

The accessible name is both variables with units — "240ms latency at 12 calls/s." — plus "— above threshold" when the latency crosses threshold, or "Latency unknown." when a value is missing. The satellite's size and the summary carry the threshold state, never color alone. Motion is gated on prefers-reduced-motion, and the live region announces threshold crossings only.

This chart is a single unit, so there is nothing to rove between: a click, tap, Enter or Space selects it and fires onSelect, and no selection stays pinned. That is the scalar half of the shared interaction contract. Hover or focus also reveals the reading itself in a floating chip, for the sizes and label modes where the mark does not print it; readout={false} drops the chip and keeps everything else.

Props

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.