Tick bar · Orbex Sonar-DB Design System

Examples

Orders of a month, and an overdue share

May orders

Overdue share of the balance

Code

tsx

import { ChartLegend } from '@orbex/sonar-components/chart-legend'
import { TickBar } from '@orbex/sonar-components/tick-bar'

const orders = [
  { value: 1420, tone: 'accent', label: 'Shipped' },
  { value: 80, tone: 'strong', label: 'On hold' },
  { value: 1100, tone: 'muted', label: 'Pending' },
] as const

const balance = [
  { value: 2_230_800, tone: 'danger', label: 'Overdue' },
  { value: 1_669_200, tone: 'muted', label: 'Not due yet' },
] as const

const plt = (value: number) => `${value.toLocaleString('en-US')} plt`
const usd = (value: number) => `${value.toLocaleString('en-US')} USD`

export default function TickBars() {
  return (
    <div className="chart-demo" data-shape="bars">
      <figure>
        <figcaption>May orders</figcaption>
        <TickBar label="May orders" format={plt} segments={[...orders]} />
        <ChartLegend aria-hidden="true" items={orders.map(({ label, tone }) => ({ label, tone }))} />
      </figure>
      <figure>
        <figcaption>Overdue share of the balance</figcaption>
        <TickBar label="Overdue share of the balance" format={usd} segments={[...balance]} />
        <ChartLegend aria-hidden="true" items={balance.map(({ label, tone }) => ({ label, tone }))} />
      </figure>
    </div>
  )
}

Usage

Two or three parts of one whole. The first in accent, then strong, the rest in muted; danger only for an alert.
A Chart legend under it names the colors; the card states the figures in text.
Give it a label and a format: they make its accessible name.

Do and don’t

DoThe parts of one whole, in their chart roles, named by a legend.

Don’tDanger for a part that is not an alert: the bar warns where nothing is wrong.

DoTwo or three parts, so each one reads.

Don’tMany small parts: the ticks blur into one color.

Accessibility

Keyboard

Key	What it does
None	A tick bar is a picture; the card states its figures in text.

Roles and attributes

Element or attribute	What it gives
`role="img" with aria-label`	One name lists every part with its value: “May orders: Shipped 1,420 plt, On hold 80 plt, Pending 1,100 plt”.
Ticks	Drawn in CSS, so they are never read one by one.

Notes

One name lists every part with its value, so the bar is read once, whole.

Use it

Each component is its own entry point with its own stylesheet, so an app loads only what it uses. The tokens and the cascade layers are set once for the app: see Installation.

tsx

import { TickBar } from '@orbex/sonar-components/tick-bar'
import '@orbex/sonar-components/tick-bar.css'

API

Props of TickBar
Prop	Type	Default
`segments` Required The parts of a whole, in order. Each takes its share of the width.	`ChartSegment[]`	—
`label` Required What the bar measures, read before its parts: “May orders”.	`string`	—
`format` Formats values for the accessible description.	`(value: number) => string`	—

Also takes every attribute of the native <div> , except children, and a ref to it.