Data Displayduskmoonimplemented7 demos

Statistic

Statistic emphasizes a metric, count, or countdown.

Import@duskmoon-dev/components/statistic

5API sections

12documented props

5behavior scenarios

Key API

titlevalueprecisionprefixsuffixformatter

Usage

When to use

Use it when users need to scan structured content and act on individual records.
Prefer it over ad hoc markup when the content has repeatable fields, hierarchy, or navigation state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Structured records

Designed for repeated or hierarchical content where users scan, compare, and inspect details.

Stateful interactions

Documents the props that control sorting, selection, expansion, pagination, or value changes where available.

Primary API surface

Statistic is most often configured through `title`, `value`, `precision`, `prefix`.

Covered behavior

Renders title, value, prefix, and suffix

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Uptime

98.6%

Basic usage

authored

Import the component stylesheet and Statistic from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Statistic } from "@duskmoon-dev/components/statistic";

export function Example() {
  return (<Statistic
  title="Uptime"
  value={98.6}
  precision={1}
  suffix="%"
/>);
}

Preview

Uptime

98.6%

Renders title, value, prefix, and suffix

test-backed

Statistic scenario from the component test coverage: renders title, value, prefix, and suffix.

Source

import "@duskmoon-dev/components/styles.css";
import { Statistic } from "@duskmoon-dev/components/statistic";

export function StatisticRendersTitleValuePrefixDemo() {
  return (<Statistic
  title="Uptime"
  value={98.6}
  precision={1}
  suffix="%"
/>);
}

Preview

Uptime

98.6%

Uses formatter before precision formatting

test-backed

Statistic scenario from the component test coverage: uses formatter before precision formatting.

Source

import "@duskmoon-dev/components/styles.css";
import { Statistic } from "@duskmoon-dev/components/statistic";

export function StatisticUsesFormatterBeforePrecisionDemo() {
  return (<Statistic
  title="Uptime"
  value={98.6}
  precision={1}
  suffix="%"
/>);
}

Preview

Uptime

98.6%

Applies native div props, custom classes, and valueStyle

test-backed

Statistic scenario from the component test coverage: applies native div props, custom classes, and valuestyle.

Source

import "@duskmoon-dev/components/styles.css";
import { Statistic } from "@duskmoon-dev/components/statistic";

export function StatisticAppliesNativeDivPropsDemo() {
  return (<Statistic
  title="Uptime"
  value={98.6}
  precision={1}
  suffix="%"
/>);
}

Preview

Uptime

98.6%

Renders formatted remaining time

test-backed

Statistic scenario from the component test coverage: renders formatted remaining time.

Source

import "@duskmoon-dev/components/styles.css";
import { Statistic } from "@duskmoon-dev/components/statistic";

export function StatisticRendersFormattedRemainingTimeDemo() {
  return (<Statistic
  title="Uptime"
  value={98.6}
  precision={1}
  suffix="%"
/>);
}

Preview

Uptime

98.6%

Calls onChange and onFinish

test-backed

Statistic scenario from the component test coverage: calls onchange and onfinish.

Source

import "@duskmoon-dev/components/styles.css";
import { Statistic } from "@duskmoon-dev/components/statistic";

export function StatisticCallsOnChangeAndOnFinishDemo() {
  return (<Statistic
  title="Uptime"
  value={98.6}
  precision={1}
  suffix="%"
/>);
}

Preview

Sunshine Theme

Uptime

98.6%

Moonlight Theme

Uptime

98.6%

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Statistic
  title="Uptime"
  value={98.6}
  precision={1}
  suffix="%"
/>
</div>

<div data-theme="moonlight">
  <Statistic
  title="Uptime"
  value={98.6}
  precision={1}
  suffix="%"
/>
</div>

API

The API reference below lists every parsed exported type or interface for Statistic. Start with `title`, `value`, `precision`, `prefix` for common usage.

Types: packages/components/src/components/statistic/Statistic.types.tsScenarios: packages/components/src/components/statistic/Statistic.test.tsx

StatisticPropsinterface extends Omit< ComponentProps<"div">, "prefix" | "title" >

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures Statistic.
`value`	`StatisticValue`	No	value configures Statistic.
`precision`	`number`	No	precision configures Statistic.
`prefix`	`ReactNode`	No	prefix configures Statistic.
`suffix`	`ReactNode`	No	suffix configures Statistic.
`formatter`	`(value: StatisticValue \| undefined) => ReactNode`	No	formatter configures Statistic.
`valueStyle`	`CSSProperties`	No	valueStyle configures Statistic.

CountdownPropsinterface extends Omit< StatisticProps, "value" | "formatter" | "precision" | "onChange" >

Prop	Type	Required	Description
`value`	`CountdownValue`	Yes	value configures Statistic.
`format`	`string`	No	format configures Statistic.
`onFinish`	`() => void`	No	onFinish configures Statistic.
`onChange`	`(value: number) => void`	No	onChange configures Statistic.

StatisticComponentinterface

Prop	Type	Required	Description
`Countdown`	`(props: CountdownProps) => ReactNode`	Yes	Countdown configures Statistic.

StatisticValuetype

string | number

CountdownValuetype

number | string | Date