TrendIndicator

Usage

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

TrendIndicator shows how a metric changed — a direction glyph and an already-formatted change value. It is purely presentational: the consumer computes the trend and passes a ready value; the component never diffs numbers, rounds, or interprets domain rules.

Direction is not sentiment

The key design decision: direction is the maths (up / down / flat), sentiment is whether that change is good (positive / negative / neutral). The kit can't assume up = good — revenue ↑ is positive, threats ↑ is negative, MTTR ↓ is positive. Always pass both.

Examples

Inline, next to a metric value:

<TrendIndicator direction="up" sentiment="positive" value="12%" />

The same arrow, opposite sentiment (an increase that is bad):

<TrendIndicator direction="up" sentiment="negative" value="35%" />

A qualitative change with no number:

<TrendIndicator direction="up" sentiment="positive" value="Improving" />

Provide a full accessible sentence with ariaLabel (the glyph is decorative):

<TrendIndicator
  direction="up"
  sentiment="positive"
  value="12%"
  ariaLabel="Revenue increased 12% compared with the previous quarter"
/>

Accessibility

The direction glyph is always aria-hidden, so the trend has to reach a screen reader as text. Which text depends on ariaLabel:

• With ariaLabel, the root becomes role="img" named by your sentence, and that sentence is announced in place of the inner text. It is the only way the direction itself is conveyed, and the kit never synthesizes it — "up" plus "12%" is not a correct, localized statement in every domain.
• Without it, the root takes no role and assistive tech reads the visible value you supplied. That is enough when the value says it on its own ("Improving", "4.2 h → 2.8 h") and thin when it doesn't: a bare "12%" tells a screen-reader user nothing about the direction.

sentiment is color and nothing else — no attribute announces whether a change is good or bad, so keep that in the surrounding copy. Leave showIcon on so the direction isn't carried by color alone visually either. When tooltip is set the root takes tabIndex={0}, which makes the hint reachable by keyboard rather than by hover alone.

Direction (RTL)

An inline flex row with no physical directional utilities, so it mirrors under dir="rtl". The glyph is the one thing flipped on purpose — rtl:-scale-x-100 — so the up, down, and flat arrows keep pointing along the reading direction instead of against it.

API Reference