Stat

Shows one key figure with its name and, if you give one, how it changed.

<script setup lang="ts">
import { FsStat } from '@fivespark/ui'
</script>

<template>
  <FsStat
    label="Omzet deze maand"
    :value="48200"
    :format-options="{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }"
  />
</template>

Usage

<script setup lang="ts">
import { FsStat } from '@fivespark/ui'
</script>

<template>
  <FsStat label="Orders vandaag" :value="37" />
</template>

Put the period in the label when the row does not give it: "Omzet deze maand". Several stats side by side go in FsStatGroup. A figure inside a sentence is just text.

Examples

Change against a comparison

change shows the rise or fall with an arrow and a sign; always give it a comparison that says what it is against. better says which direction is good for this figure, so a fall in open quotes reads as good. A percentage is given in points: 12 is "12%".

<script setup lang="ts">
import { FsStat, FsStatGroup } from '@fivespark/ui'

const euro = { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 } as const
</script>

<template>
  <FsStatGroup>
    <FsStat
      label="Omzet deze maand"
      :value="48200"
      :format-options="euro"
      :change="12"
      :change-options="{ style: 'percent' }"
      comparison="t.o.v. vorige maand"
      better="up"
    />
    <FsStat
      label="Openstaande offertes"
      :value="18420"
      :format-options="euro"
      :change="-8"
      :change-options="{ style: 'percent' }"
      comparison="t.o.v. vorige maand"
      better="down"
    />
  </FsStatGroup>
</template>

Without a judgement

Leave better out where either direction can be fine; the change is shown neutral.

<script setup lang="ts">
import { FsStat } from '@fivespark/ui'
</script>

<template>
  <FsStat label="Orders vandaag" :value="37" :change="5" comparison="t.o.v. gisteren" />
</template>

Unchanged

A change of 0 shows a sideways arrow and the words "Ongewijzigd".

<script setup lang="ts">
import { FsStat } from '@fivespark/ui'
</script>

<template>
  <FsStat label="Open orders" :value="37" :change="0" comparison="t.o.v. gisteren" />
</template>

In a group

FsStatGroup lays stats out as one row that wraps when narrow, with a hairline between them.

<script setup lang="ts">
import { FsStat, FsStatGroup } from '@fivespark/ui'
</script>

<template>
  <FsStatGroup>
    <FsStat label="Orders vandaag" :value="37" />
    <FsStat label="Open offertes" :value="14" />
    <FsStat label="Klanten met achterstand" :value="3" />
  </FsStatGroup>
</template>

No data

Pass null when there is no figure. It shows a dash, never 0.

<script setup lang="ts">
import { FsStat } from '@fivespark/ui'
</script>

<template>
  <FsStat label="Omzet vorige maand" :value="null" />
</template>

API Reference

FsStat

Prop	Type	Default	Description
label	string	required	The figure's name, with the period when the row does not give it: "Omzet deze maand".
value	number | null	required	The figure; `null` when there is no data, shown as a dash, never as 0.
formatOptions	Intl.NumberFormatOptions		How the value is written, in the app's language: `{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }`. A percentage is in points: 23 is "23%".
change	number | null	null	The change against the comparison: above 0 a rise, below 0 a fall. A percentage is in points. `null` when there is nothing to compare with.
changeOptions	Intl.NumberFormatOptions		How the change is written: `{ style: 'percent' }`. It is always signed.
comparison	string		What the change is against: "t.o.v. vorige maand". Give it with every change.
better	"up" | "down"		Which direction is good for this figure: a change that way is shown as better, the other as worse. Leave it out where either way can be fine.

FsStatGroup

Slot	Props	Description
default	any	The `FsStat`s, and nothing else.