Statistic

Display key business metrics or quantitative numerical information with bold Neo-Brutalist aesthetics. Built on native Intl.NumberFormat and precision chunking algorithms to safeguard against floating-point distortion and integer truncation.

Preview

Preview

活跃用户

112,893上升

月度成交额

¥938,204.50

系统故障率

0.0012下降%

Installation

pnpm dlx brutx-vue@latest add statistic

Usage

<script setup>
import { Statistic } from 'brutx-ui-vue'
</script>

<template>
    <!-- Basic usage -->
    <Statistic title="Total Users" :value="128940" />

    <!-- Currency and precision -->
    <Statistic title="Revenue" :value="98234.5" prefix="$" :precision="2" />

    <!-- Trend indicator and card variant -->
    <Statistic
        title="Conversion Rate"
        :value="12.4"
        suffix="%"
        trend="up"
        variant="card"
    />
</template>

Big Numbers and Precision Safety

Safely pass numerical strings or BigInts that exceed standard JavaScript safe integer limits without precision degradation:

<template>
    <Statistic title="Total Supply" value="900719925474099200000000" />
    <Statistic title="Staked Amount" :value="123456789012345678901234567890n" />
</template>

Custom Group and Decimal Separators

<template>
    <Statistic
        title="European Style"
        :value="1234567.89"
        group-separator="."
        decimal-separator=","
        :precision="2"
    />
</template>

Variants

Variant	Description
default	Default variant with lightweight inline layout and no extra border/background
card	Neo-Brutalist card with 3px solid border, hard drop shadow, padding, and rounded corners
bordered	Solid bordered card container without drop shadow
subtle	Highlighted subtle background card with solid border and hard drop shadow

<template>
    <Statistic title="Default" :value="1200" variant="default" />
    <Statistic title="Card" :value="1200" variant="card" />
    <Statistic title="Bordered" :value="1200" variant="bordered" />
    <Statistic title="Subtle" :value="1200" variant="subtle" />
</template>

Sizes

Size	Title Font Size	Value Font Size	Trend Font Size
sm	text-xs	text-2xl	text-xs
default	text-sm	text-3xl sm:text-4xl	text-sm
lg	text-base	text-4xl sm:text-5xl	text-base

<template>
    <Statistic title="Small" :value="88" size="sm" variant="card" />
    <Statistic title="Default" :value="88" size="default" variant="card" />
    <Statistic title="Large" :value="88" size="lg" variant="card" />
</template>

Exported Types

The component exports variant helper functions and TypeScript types for composition:

import type {
    StatisticProps,
    StatisticValue,
    StatisticVariantProps,
    StatisticContentVariantProps,
} from 'brutx-ui-vue'
import {
    statisticVariants,
    statisticTitleVariants,
    statisticContentVariants,
    statisticValueVariants,
    statisticTrendVariants,
} from 'brutx-ui-vue'

API Reference

Statistic — Props

Name	Type	Default	Description
value Nullable	StatisticValue	undefined	The value to format and display; accepts number, string, bigint, or an empty value.
Details Declared type StatisticValue Literal values null Referenced types StatisticValue Type definition — StatisticValue export type StatisticValue = number | string | bigint | null | undefined Default value details Declaration undefined Source: packages/ui/src/components/statistic/Statistic.vue Resolved value undefined Source types.ts:10 packages/ui/src/components/statistic/types.ts
title	string | undefined	undefined	The title displayed above the statistic value.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/statistic/Statistic.vue Resolved value undefined Source types.ts:11 packages/ui/src/components/statistic/types.ts
prefix	string | undefined	undefined	Text displayed before the formatted value, such as a currency symbol.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/statistic/Statistic.vue Resolved value undefined Source types.ts:12 packages/ui/src/components/statistic/types.ts
suffix	string | undefined	undefined	Text displayed after the formatted value, such as a percent sign or unit.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/statistic/Statistic.vue Resolved value undefined Source types.ts:13 packages/ui/src/components/statistic/types.ts
precision	number | undefined	undefined	Sets the number of decimal places preserved in the formatted result.
Details Declared type number | undefined Default value details Declaration undefined Source: packages/ui/src/components/statistic/Statistic.vue Resolved value undefined Source types.ts:14 packages/ui/src/components/statistic/types.ts
decimalSeparator	string | undefined	undefined	Overrides the decimal separator in the formatted value.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/statistic/Statistic.vue Resolved value undefined Source types.ts:15 packages/ui/src/components/statistic/types.ts
groupSeparator	string | undefined	undefined	Overrides the thousands grouping separator in the formatted value.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/statistic/Statistic.vue Resolved value undefined Source types.ts:16 packages/ui/src/components/statistic/types.ts
formatter	((value: StatisticValue) => string) | undefined	undefined	A custom value-to-text function whose returned string is displayed as the formatted result.
Details Declared type ((value: StatisticValue) => string) | undefined Referenced types StatisticValue Type definition — StatisticValue export type StatisticValue = number | string | bigint | null | undefined Default value details Declaration undefined Source: packages/ui/src/components/statistic/Statistic.vue Resolved value undefined Source types.ts:17 packages/ui/src/components/statistic/types.ts
placeholder	string | undefined	undefined	Placeholder displayed when value is empty or cannot be formatted.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/statistic/Statistic.vue Resolved value undefined Source types.ts:18 packages/ui/src/components/statistic/types.ts
trend	"up" | "down" | undefined	undefined	Shows an upward or downward trend marker with the corresponding status color.
Details Declared type "up" | "down" | undefined Literal values "down" "up" Default value details Declaration undefined Source: packages/ui/src/components/statistic/Statistic.vue Resolved value undefined Source types.ts:19 packages/ui/src/components/statistic/types.ts
trendPlacement	"start" | "end" | undefined	"end"	Places the trend marker before or after the value content.
Details Declared type "start" | "end" | undefined Literal values "end" "start" Default value details Declaration 'end' Source: packages/ui/src/components/statistic/Statistic.vue Resolved value "end" Source types.ts:20 packages/ui/src/components/statistic/types.ts
variant	"bordered" | "card" | "default" | "subtle" | undefined	"default"	Sets the statistic container to the default, card, bordered, or subtle visual style.
Details Declared type NonNullable<"default" | "card" | "bordered" | "subtle" | null | undefined> | undefined Literal values "bordered" "card" "default" "subtle" Default value details Declaration 'default' Source: packages/ui/src/components/statistic/Statistic.vue Resolved value "default" Source types.ts:21 packages/ui/src/components/statistic/types.ts
size	"default" | "lg" | "sm" | undefined	"default"	Sets the statistic content to the default, small, or large size.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/statistic/Statistic.vue Resolved value "default" Source types.ts:22 packages/ui/src/components/statistic/types.ts
locale	string | undefined	undefined	The locale used for localized number formatting.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/statistic/Statistic.vue Resolved value undefined Source types.ts:23 packages/ui/src/components/statistic/types.ts
class	string | undefined	undefined	Custom CSS classes added to the statistic root container.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/statistic/Statistic.vue Resolved value undefined Source types.ts:24 packages/ui/src/components/statistic/types.ts

Statistic — Slots

Name	Signature or type	Description
#title	{ title?: string | undefined; }	Replaces the title area content and exposes the current title in its scope.
Details Declared type { title?: string | undefined; } Source Statistic.vue:36 packages/ui/src/components/statistic/Statistic.vue
#prefix	{ prefix?: string | undefined; }	Replaces the value prefix area and exposes the current prefix in its scope.
Details Declared type { prefix?: string | undefined; } Source Statistic.vue:37 packages/ui/src/components/statistic/Statistic.vue
#suffix	{ suffix?: string | undefined; }	Replaces the value suffix area and exposes the current suffix in its scope.
Details Declared type { suffix?: string | undefined; } Source Statistic.vue:38 packages/ui/src/components/statistic/Statistic.vue
#trend	{ trend: "up" | "down"; label: string; }	Replaces the trend indicator and exposes the trend direction and localized label.
Details Declared type { trend: "up" | "down"; label: string; } Source Statistic.vue:39 packages/ui/src/components/statistic/Statistic.vue
#default	{ value: StatisticValue; formattedValue: string; }	Replaces the formatted value content and exposes the raw value and formattedValue.
Details Declared type { value: StatisticValue; formattedValue: string; } Referenced types StatisticValue Type definition — StatisticValue export type StatisticValue = number | string | bigint | null | undefined Source Statistic.vue:40 packages/ui/src/components/statistic/Statistic.vue

Accessibility

• Keyboard Interaction: As a pure presentation component, it does not receive keyboard focus by default; nested interactive controls in slots maintain standard Tab order.
• ARIA Attributes: Values are structured using semantic markup; trend icons include explicit aria-label="up" or aria-label="down" to satisfy color-independent perception standards.
• Focus Management: Static typographic container with no focus traps, preserving screen reader virtual cursor flow.
• Motion Reduction: Static display with no animations, natively conforming to system-level reduced motion preferences.