PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Traffic Distribution

A traffic distribution card featuring a custom SVG-based semi-circular gauge with solid segments and radial ticks.

When to use

  • Semi-circular SVG radial gauge displays showing traffic bandwidth distribution or target quota capacity.
  • Radial tick indicators comparing current usage against max server thresholds.
  • Infrastructure load summaries or regional web traffic splits.

When not to use

  • Linear multi-month timeline comparisons.
  • Comparing more than 4 distinct capacity categories in a single meter.

Props

PropTypeDefaultDescription
dataTrafficMetricItem[]defaultMockMetricsArray of traffic channel distribution slices with id, label, display value, rawVal, colorClass, and colorVar.
classNamestring—Optional custom CSS classes for the card container.

Data Structure

FieldTypeDescription
idstringUnique channel identifier (e.g., desktop, mobile, tablet).
labelstringHuman-readable traffic channel label.
valuestringFormatted display currency string (e.g., $612.45).
rawValnumberNumerical valuation used for the semi-circular pie chart.
colorClassstringBackground CSS class for the indicator bar.
colorVarstringCSS variable color token for the pie chart slice.