Traffic Split

Traffic weights across versions — canary or blue/green. Weights that do not total 100 are called out rather than silently rescaled, because a config adding to 97 is a real state during an edit.

src/components/ui/traffic-split.tsx

About

From the component's own source, where it was written.

Traffic weights across versions — a canary or blue/green rollout.

Weights are normalised for display rather than assumed to total 100. A rollout config that adds up to 97 is a real state during an edit, and a bar that renders it as a gap is more honest than one that silently rescales and hides the mistake — so the shortfall is called out instead.

Each segment is labelled inside when it is wide enough and in the legend always, since a 3% canary has no room for text but is precisely the segment you are watching.

Install

npx astralyx-ui add traffic-split

Usage

import { TrafficSplit } from '@/components/ui/traffic-split'

<TrafficSplit targets={targets} label="checkout" />

Composer

Change the props and the source below follows.

checkout

90%

Stablev1.4.190%
Canaryv1.4.2canary10%

Props

canary weight

tsx

<TrafficSplit
  label="checkout"
  targets={[
    { id: 'stable', label: 'Stable', weight: 90 },
    { id: 'canary', label: 'Canary', weight: 10, canary: true },
  ]}
/>

Examples

Canary

tsx

<TrafficSplit targets={targets} label="checkout" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`TrafficSplit`

Traffic weights across versions — a canary or blue/green rollout.

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
targets	TrafficTarget[]	required	`{ id, label, weight, version?, color?, canary? }`.
label	ReactNode	—	—
canaryLabel	ReactNode	'canary'	Badge on the canary variant.

Types

`TrafficTarget`

Field	Type	Description
id	string	—
label	ReactNode	—
weight	number	—
version?	string	—
color?	string	—
canary?	boolean	Marks the version being rolled out.

Behaviour

Topic	Detail	Description
shortfall	reported	A total other than 100 is stated above the bar; the segments still render proportionally so the picture stays readable.
labels	inside and legend	Inside only above 12% width — a 3% canary has no room for text but is exactly the segment you are watching.