Metric

Usage

import { Metric } from '@acronis-platform/ui-react';

Metric is a presentational stats strip for dashboard widgets: a primary value row (status-info-tinted icon badge + value + unit + optional right-aligned caption), an optional trend row below the value, and a composable body for charts, breakdowns, or insights. It is not a card — nest it inside ChartWidget or a Card to get card chrome and padding.

Examples

A metric with an icon badge, value, unit, trend, and a supporting note:

<Metric
  value="95"
  unit="%"
  icon={<ChartPieIcon />}
  trend="up"
  trendValue="20%"
  supportingText="over 6 months"
/>

Use trend to render a TrendIndicator automatically. Sentiment follows direction: up → positive (green), down → negative (red), stable → neutral.

Compose with Card for a standalone dashboard tile; drop a chart, a labelled breakdown, Separator, or insight line into children to build the body:

<Card className="p-4">
  <Metric
    icon={<ChartPieIcon />}
    caption={<Tag>Now</Tag>}
    value="3"
    trend="down"
    trendValue="1 this week"
  >
    <BarChart
      orientation="horizontal"
      items={[{ label: 'Healthy', value: 46, color: '...' }]}
      max={54}
      showTooltip={false}
    />
    <Separator className="my-3" />
    <p>+3 customers predicted at-risk within 30 days.</p>
  </Metric>
</Card>

No data is value="—", not 0.

Accessibility

Metric imposes no roles and sets no accessible name on itself: it is a <div> of ordinary text read in DOM order — the tooltip trigger, caption, value, unit, badge, trend, supporting text, then whatever the body holds (the icon badge is aria-hidden, so nothing announces it). If a tile needs a name of its own (as a link target or a labelled region), pass aria-label / role yourself — they are spread onto the root.

The one label the component owns is on the info affordance: when tooltip is set, its trigger is a real <button> named by tooltipLabel, which defaults to "More information" and is the string to override for a localized UI. The hint is keyboard reachable, but it must not be the only place essential information lives.

loading swaps the value for a Skeleton with no live region of its own: the value simply leaves the accessible tree and returns, so wrap the tile yourself if an update needs announcing.

Direction (RTL)

Every row is a flex pair separated by justify-between, and the only directional spacing in the component is logical (ms- on the badge slot), so the component mirrors fully under dir="rtl" — value to the inline start, caption to the inline end. The slots hold your own nodes, so directional artwork inside them is yours to flip; a composed TrendIndicator already does.

API Reference