Components

StatCard

Shows the value of one measure, its change against a period and an optional trend in one tile.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { StatCard } from '@bigbang/ui';
Source: StatCard.tsx
Storybook: StatCard · Playground

StatCard is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab.

import { StatCard } from '@bigbang/ui';

<StatCard
  label="Total items"
  value="1.280"
  delta={{ value: '8 %', direction: 'up' }}
  period="vs last month"
/>;

The part prop types are exported too: StatCardLabelProps, StatCardValueProps, StatCardDeltaProps, StatCardPeriodProps, StatCardTrendProps, StatCardInfoProps.

Props

label

Description: What the number measures, such as "Total items". It names the group. Omit it when you compose children.
Type: string

value

Description: The figure, pre-formatted by the app with Intl; StatCard never formats numbers. null, undefined or an empty string shows a dash and noDataLabel.
Type: ReactNode

delta

Description: Change against the previous period: a pre-formatted value, its direction and an optional sentiment.
Type: StatCardDelta

period

Description: What the change is measured against, such as "vs last month".
Type: string

trend

Description: A sparkline or small chart. It is decorative and hidden from assistive technology unless the child has role="img" or an aria-label.
Type: ReactNode

info

Description: Help text under the figure, such as how the number is counted.
Type: ReactNode

loading

Description: Shows placeholders for the value and the change, marks the card aria-busy and announces loadingLabel.
Type: boolean
Default: false

hidden

Description: Privacy mode: the value shows as •••• and screen readers read hiddenLabel.
Type: boolean
Default: false

variant

Description: Surface of the card, passed to Card.
Type: 'outlined' | 'elevated' | 'filled'
Default: 'outlined'

loadingLabel

Description: Text read while loading. Defaults to the library string "Yükleniyor" or "Loading".
Type: string

hiddenLabel

Description: Text read in place of a hidden value. Defaults to the library string "Gizlendi" or "Hidden".
Type: string

noDataLabel

Description: Reason read next to the dash when there is no value. Defaults to the library string "bilgi yok" or "no information".
Type: string

className

Description: For layout only: margins, width and grid placement. Do not use it to change colour or padding.
Type: string

children

Description: Custom layout from StatCard.Label, StatCard.Value, StatCard.Delta, StatCard.Period, StatCard.Trend and StatCard.Info. When set, it replaces the layout built from the props above.
Type: ReactNode

Native attributes (id, aria-*) pass through to the root element. The delta object carries value, direction, sentiment and label.

Parts

Use the props for the common case and the parts for a custom layout. When you pass children, they replace the layout built from the props; loading and hidden reach the parts from the root.

Part	Element	Props
`StatCard.Label`	`<p>`	Native attributes. It names the group; the root sets its `id`.
`StatCard.Value`	`<div>`	Native attributes. It shows its own state while loading, hidden and without a value.
`StatCard.Delta`	`<span>`	`value`, `direction`, `sentiment`, `label`.
`StatCard.Period`	`<span>`	Native attributes.
`StatCard.Trend`	`<div>`	Native attributes. Unlabelled content becomes `aria-hidden`.
`StatCard.Info`	`<p>`	Native attributes.

Data attributes

data-stat-card: on the root (the root also carries Card’s data-component="card" and data-variant).
data-part: label, value, delta, period, trend, info.
data-direction, data-sentiment: on the delta part.

Custom layout

<StatCard>
  <StatCard.Label>Total items</StatCard.Label>
  <StatCard.Value>1.280</StatCard.Value>
  <StatCard.Delta value="8 %" direction="up" />
  <StatCard.Period>vs last month</StatCard.Period>
</StatCard>