statistic

KPI big-number with an optional trend delta.

Pass label + value; drop a StatisticDelta (or any node) as children for a trend line, and set trend (up | down | flat) to colour it.

import { Statistic, StatisticDelta } from '@fluixi-ui/statistic';

<Statistic label="Revenue" value="$48.2k" trend="up">
  <StatisticDelta>▲ 12% vs last month</StatisticDelta>
</Statistic>

Styled via data-statistic, data-statistic-label, data-statistic-value and data-statistic-delta; the delta colour follows the container's data-trend.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.

Examples

statistic