Charts

DataCard

The shared card for dashboards: a label, a number or a sentence, and a body.

Import

import { DataCard } from '@oztix/roadie-components/data-card'

Examples

Default

<div className='w-72'>
  <DataCard
    label='Gross revenue'
    value={118400}
    format='compactCurrency'
    delta={{ value: -0.04, format: 'percent' }}
    context='Last week, before fees'
  />
</div>

Takeaway

<div className='w-80'>
  <DataCard
    label='Where buyers are from'
    takeaway='Brisbane and the Gold Coast lead this show'
    source='Oztix sales. Postcode of purchase.'
  >
    <DataTable
      caption='Where buyers are from'
      columns={[
        { key: 'suburb', header: 'Suburb', kind: 'text' },
        { key: 'share', header: 'Share', kind: 'number', format: 'percent' }
      ]}
      rows={[
        { suburb: 'Fortitude Valley', share: 0.22 },
        { suburb: 'West End', share: 0.14 },
        { suburb: 'Surfers Paradise', share: 0.11 }
      ]}
    />
  </DataCard>
</div>

Actions

Put at most one visible action first and DataCard.MoreButton last. More passes its props and ref through, so pass it to a Menu trigger's render to open the card's menu.

<div className='w-72'>
  <DataCard
    label='Sales pace'
    value={0.61}
    format='percent'
    delta={{ value: 9, format: 'points' }}
    context='Forecast 96% by show day'
    actions={
      <>
        <Button size='sm' emphasis='subtle'>View chart</Button>
        <DataCard.MoreButton label='Sales pace' />
      </>
    }
  />
</div>

States

<div className='grid w-72 gap-4'>
  <p className='text-sm text-subtle'>Ready</p>
  <DataCard label='Tickets sold' value={1842} delta={{ value: 214 }} context='This week, of 2,400' source='Oztix sales.' />
  <p className='text-sm text-subtle'>Loading</p>
  <DataCard label='Tickets sold' value={0} state='loading' bodyHeight='2rem' />
  <p className='text-sm text-subtle'>Empty</p>
  <DataCard label='Tickets sold' state='empty' emptyMessage='No sales yet. Tickets go on sale Fri 27 Nov.' />
  <p className='text-sm text-subtle'>Error</p>
  <DataCard label='Tickets sold' state='error' errorAction={<Button size='sm' emphasis='normal'>Retry</Button>} />
  <p className='text-sm text-subtle'>Stale</p>
  <DataCard label='Tickets sold' value={1842} state='stale' staleLabel='As of 10:42am' source='Oztix sales.' />
</div>

Guidelines

Set value and delta for one headline number, or takeaway for a sentence. Never both. StatTile, table cards and chart cards all build on this rule.
Give every chart and table card a source. It sits under a hairline in the footer.
Pass actions for what a person can do from the card: at most one visible action, then DataCard.MoreButton for the rest. Actions show in every state, so a refresh still works on a card that failed to load. See card actions.

Accessibility

The card is an article named by its label, and truncated label or context text stays available in its title attribute. It isn't a landmark, so a dashboard can repeat a label such as "Tickets sold" across sections without repeating landmark names.
state='loading' sets aria-busy, so assistive tech knows the card isn't ready.

API reference

DataCard

labelstring Required: Fixed name for the card. People and agents refer to the card by it.
valuestring | number
format"number" | "compact" | "percent" | "currency" | "compactCurrency" | "points" | "index": Defaults to 'number'.
deltaDataCardDelta
takeawaystring: One sentence, used when there is no single headline number.
contextstring
sourcestring
actionsReactNode: Controls at the top right, after the label. Shown in every state, so an action such as refresh still works on a card that failed to load.
size"sm" | "md" | "lg" | "stat" | "full"
state"ready" | "loading" | "empty" | "error" | "stale": Defaults to ready.
emptyMessagestring: Defaults to We don't have data for this yet. You'll see it here once it arrives..
errorMessagestring
errorActionReactNode
staleLabelstring
bodyHeightstring: Body height while loading, such as the plot height.

Inherited from HTMLAttributes

relstring: Override the auto `rel='noopener noreferrer'` default on external hrefs.

DataCard.MoreButton

The More button at the end of a card's actions. It spreads every other prop and the ref onto the button, so it can be a menu trigger's `render`. As a `Menu.Trigger` render, its `data-slot` becomes the trigger's.

classNamestring | ((state: ButtonState) => string): CSS class applied to the element, or a function that returns a class based on the component's state.
intent"neutral" | "brand" | "brand-secondary" | "accent" | "danger" | "success" | "warning" | "info" | null
hrefstring: Pass a URL to render the button as a routed anchor instead of a `<button>`. Internal hrefs route through the configured `RoadieLinkProvider` (or fall back to plain `<a>`); external hrefs (`http(s)://`, `//…`) render as `<a target='_blank' rel='noopener noreferrer'>`; `mailto:` / `tel:` / `sms:` render as plain `<a>`. Pair with `external`, `target`, or `rel` to override the defaults.
externalboolean: Force external-link treatment regardless of `href` shape. Useful for first-party URLs that should still open in a new tab, or for an `https://` URL that should route internally through the provider.
targetstring: Override the auto `target='_blank'` default on external hrefs.
downloadstring | boolean: Download the `href` instead of navigating, optionally as this filename.
labelstring Required: The card's label. The button is named "More actions for {label}".

Inherited from HTMLAttributes

relstring: Override the auto `rel='noopener noreferrer'` default on external hrefs.

Inherited from ButtonProps

focusableWhenDisabledboolean: Whether the button should be focusable when disabled.
Defaults to false.

Inherited from NativeButtonProps

nativeButtonboolean: Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
Defaults to true.

Previous page← Dashboard Next pageStatTile →