Metric

A label, one big number and its change. When the value changes the number counts to it through a real odometer: the next wheel up only turns when the one below passes nine, and with per-digit mass each wheel follows on its own spring, heavier per place, so units flick and thousands lumber; wheels too fast to read fade back.

$149 once · every Pro piece

Customize

Value

Label

Unit

Change as

percent

absolute

both

Pilot light

none

fresh

stale

Digit mass

Sparkline

Changing

Row of three

Size

Status

ready

empty

Seed

The change is a small drawn chevron, accent when up and grey when down, as a percentage, an absolute step or both. Options: a pilot light by the label that breathes in the accent while the value is fresh and goes ash and still once it is stale (“6m ago”); an inline sparkline that slides left as values arrive, whose hover drops the line back, re-strokes a sprung window round the pointer and rolls the big number to the point under it; loading and empty states.

Install

npx shadcn@latest add @obsyde/metric

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Metric } from '@/components/obsyde/ember/metric/Metric';

export function Example() {
  return (
    <Metric label="Count" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/metric/Metric.tsxcomponent
ember/metric/metric.cssstyles
ember/metric/metric-demo.cssstyles
ember/metric/MetricDemo.tsxdemo
ember/viz-kit/viz-kit.cssshared
ember/viz-kit/size.tsshared
ember/viz-kit/shape.tsshared
ember/viz-kit/scale.tsshared
ember/viz-kit/patterns.tsxshared
ember/viz-kit/motion.tsshared
ember/shared/spring.tsshared
ember/shared/accent.tsshared
ember/shared/RollingNumber.tsxshared
ember/shared/rolling-number.cssshared
ember/shared/ember.cssshared
ember/viz-kit/touch.tsshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`value`Value	`number`	`12408`
`previous`Previous	`number`	`11906`
`label`Label	`string`	`'Count'`
`unit`Unit	`string`	`—`
`deltaFormat`Change as	`'percent' \| 'absolute' \| 'both'`	`'percent'`
`pilot`Pilot light	`'none' \| 'fresh' \| 'stale'`	`'none'`
`mass`Digit mass	`boolean`	`true`
`sparkline`Sparkline	`boolean`	`false`
`changing`Changing	`boolean`	`false`
`row`Row of three	`boolean`	`false`
`size`Size	`'md' \| 'lg'`	`'lg'`
`status`Status	`'ready' \| 'loading' \| 'empty'`	`'ready'`
`seed`Seed	`number`	`1`