Delta

A change with an arrow, coloured by whether it is good or bad.

Import

import { Delta } from '@oztix/roadie-components/delta'

Examples

Default

<Delta value={214} />

Formats

<Delta value={0.04} format='percent' />
<Delta value={-9} format='points' />
<Delta value={1250} format='currency' />
<Delta value={48200} format='compact' />

When lower is better

<Delta value={-0.003} format='percent' goodWhen='down' />
<Delta value={12} goodWhen='down' />
<Delta value={6} goodWhen='neither' />

Against a baseline

<Delta value={112} format='index' baseline={100} context='pace against the average show' />

States

{/* No change */}
<Delta value={0} format='percent' />
{/* Not available */}
<Delta value={Number.NaN} format='points' />

Guidelines

• Use Delta beside a value or in a sentence. In a tile, pass delta to StatTile or DataCard, and in a DataTable, give the column kind: 'delta'. Both render one for you.
• value is the change itself, and the arrow shows its sign. Pass baseline when the number to show is a level, such as a pace index of 112 against 100.
• Set goodWhen='down' for numbers where falling is good, such as refunds, and goodWhen='neither' when a change has no better direction. Neither colours it grey.
• Say what the change compares against in context or nearby text. The delta stays short.

Accessibility

• The change reads as a sentence, such as "up 214, better", so colour is never the only cue. context is added to the end, such as "down 4%, worse, on last week".
• The arrow and the shown text are hidden from screen readers, because the sentence already says them.
• A non-finite value, such as NaN, shows and reads as "Not available" rather than a number.