DisplayStat

A figure with its label and how it changed, read by a screen reader as words and not only as an arrow.

import { DisplayStat } from '@zairakai/vue-components/Display'

Usage

<DisplayStat />

Example

Sales

1 280

▲Up 12.5%

Errors

14

▲Up 3%

<template>
  <DisplayStat
    label="Sales"
    value="1 280"
    :change="12.5"
  />
  <DisplayStat
    label="Errors"
    value="14"
    :change="3"
    :up-is-good="false"
  />
</template>

Props

Name	Type	Default	Description
id	string
class	string
label	string
value	string|number
change	number	undefined	The change since before: a number, positive or negative.
changeUnit	string	'%'	The unit or sign shown after the change: "%".
upIsGood	boolean	true	Whether going up is good news (turnover) or bad (errors).
changeLabel	string	'{direction} {value}'	The text read for the change. Use {value}, {direction}.
increaseWord	string	'Up'
decreaseWord	string	'Down'

Slots

Name	Description
label
default

See Theming for the class hooks and the data-* state of the components.