MetricTile

Single KPI value with delta.

A labelled metric with optional prefix/suffix units and a directional delta. `trend` colours the delta by sentiment independently of the arrow `dir` (a rising error rate is negative), with an optional `deltaLabel`, an emphasis chip, a `loading` skeleton, and a `chart` snippet slot for hosting a <Sparkline>.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { MetricTile, Sparkline } from 'dssoca';
</script>

<MetricTile label="req/min" value="142" delta="12%" dir="up"
  deltaLabel="vs prev 7d">
  {#snippet chart()}
    <Sparkline data={[3, 7, 4, 9, 6, 11]} trend="auto" fluid />
  {/snippet}
</MetricTile>

HTML

CSS only — static markup The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css — see Plain HTML & CSS.

html

<div class="ss-metric">
  <div class="label">Requests</div>
  <div class="val" role="status" aria-live="polite">1,204</div>
  <div class="delta positive" role="img" aria-label="increased +4.2%">
    <span aria-hidden="true">↑ +4.2%</span>
  </div>
</div>

Props

Prop	Type	Default	Description
`label`	`string`	—	Required. Metric label.
`value`	`string \| number`	—	Required. The metric value.
`prefix`	`string`	—	Leading unit (e.g. $ / €); rendered faint.
`suffix`	`string`	—	Trailing unit/suffix; rendered faint.
`delta`	`string`	—	Delta text (the arrow is added from `dir`).
`dir`	`'up' \| 'down'`	`'up'`	Arrow direction.
`trend`	`'positive' \| 'negative' \| 'neutral'`	—	Sentiment colour for the delta, decoupled from `dir`. Defaults so up reads positive / down negative.
`deltaLabel`	`string`	—	Comparison-period label rendered faint after the delta ("vs prev 7d").
`emphasis`	`boolean`	`false`	Render the delta as a soft sentiment chip (non-colour redundancy).
`loading`	`boolean`	`false`	Skeleton/loading state: hides the real value behind aria-hidden bars.
`chart`	`Snippet`	—	Slot below the delta — drop in a <Sparkline> here.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.