Skip to content
UI
v0.3.1

Search the docs

StatTile

One key number with its change and trend.

Example

GGR, 7 days

€ 12 400

Up +4.2%

Rounds

52 095

No change

All partners

Errors

3

Down −2
stat-tile.example.svelte 
<script lang="ts">
  import { StatTile } from '@onlywin/ui-svelte';
</script>

<div class="example-grid example-grid--3">
  <StatTile
    label="GGR, 7 days"
    value="€ 12 400"
    delta={{ good: true, trend: 'up', value: '+4.2%' }}
    spark={[8, 9, 7, 10, 11, 10, 12]}
  />
  <StatTile
    label="Rounds"
    value="52 095"
    delta={{ trend: 'flat', value: '0.0%' }}
    hint="All partners"
  />
  <StatTile
    label="Errors"
    value="3"
    delta={{ good: true, trend: 'down', value: '−2' }}
    variant="raised"
  />
</div>

Usage

Do

  • Say whether a change is good with delta.good; colour follows it.

Don’t

  • Do not show more than four tiles in a row.

Accessibility

  • The change is read as words (“Up +4.2%”), not as an arrow and a colour.

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

StatTile

StatTile props
Prop Type Default Description
delta { — The change: its text (`+4.2%`), direction and whether that direction is good.
hint string —
label *required string —
loading boolean false
spark ReadonlyArray<number> — A small trend line under the value.
value *required string — The value, already formatted (use the formatters).
variant 'flat' | 'raised' 'raised'

Sparkline

Sparkline props
Prop Type Default Description
color 1 | 2 | 3 | 4 1
height number 34
label string — An accessible name; without one the sparkline is decorative.
values *required ReadonlyArray<number> —