jiaiyan Naive UI Statistic Component
Statistic component for displaying statistical values with labels, prefixes, suffixes, and support for animated numbers.
When to Use
Use this component when:
- Dashboard metrics: Display key performance indicators
- Data summaries: Show summary statistics for data sets
- Analytics displays: Present analytical results
- Financial data: Display monetary values with currency symbols
When to Invoke
Invoke this skill when:
- User needs to display statistical values
- User wants to show metrics with labels
- User needs prefix or suffix for values
- User wants to combine with number animation
- User asks about tabular number alignment
Features
- Label Support: Add descriptive labels above values
- Prefix & Suffix: Add symbols or text before/after values
- Tabular Numbers: Align numbers with equal width
- Slot Support: Customize all parts of the statistic
- Animation Compatible: Works with n-number-animation
API Reference
Statistic Props
| Name | Type | Default | Description |
|---|---|---|---|
| label | string |
undefined |
Label of the statistics. |
| tabular-nums | boolean |
false |
Whether to make numbers with same width. |
| value | string | number |
undefined |
Statistics value. |
Statistic Slots
| Name | Parameters | Description |
|---|---|---|
| default | () |
Value slot. |
| label | () |
Label slot. |
| prefix | () |
Value prefix. |
| suffix | () |
Value suffix. |
Basic Usage
Basic Statistic
<template>
<n-statistic label="Statistic" :value="99" />
</template>
With Prefix
<template>
<n-statistic label="Active Users" :value="12345">
<template #prefix>
<n-icon>
<MdPeople />
</n-icon>
</template>
</n-statistic>
</template>
With Suffix
<template>
<n-statistic label="Growth Rate" :value="23.5">
<template #suffix>%</template>
</n-statistic>
</template>
With Prefix and Suffix
<template>
<n-statistic label="Total Revenue" :value="1234567.89">
<template #prefix>$</template>
<template #suffix>USD</template>
</n-statistic>
</template>
Tabular Numbers
<template>
<n-space>
<n-statistic label="Value A" tabular-nums :value="12345" />
<n-statistic label="Value B" tabular-nums :value="67890" />
</n-space>
</template>
Custom Label Slot
<template>
<n-statistic :value="100">
<template #label>
<n-space align="center">
<n-icon><TrendingUpIcon /></n-icon>
<span>Custom Label</span>
</n-space>
</template>
</n-statistic>
</template>
Common Patterns
Dashboard Statistics
<template>
<n-grid :cols="4" :x-gap="16">
<n-gi>
<n-card>
<n-statistic label="Total Users" tabular-nums>
<template #prefix>
<n-icon><UsersIcon /></n-icon>
</template>
{{ stats.totalUsers }}
</n-statistic>
</n-card>
</n-gi>
<n-gi>
<n-card>
<n-statistic label="Revenue" tabular-nums>
<template #prefix>$</template>
{{ stats.revenue }}
</n-statistic>
</n-card>
</n-gi>
<n-gi>
<n-card>
<n-statistic label="Orders" tabular-nums>
<template #prefix>
<n-icon><CartIcon /></n-icon>
</template>
{{ stats.orders }}
</n-statistic>
</n-card>
</n-gi>
<n-gi>
<n-card>
<n-statistic label="Growth" tabular-nums>
{{ stats.growth }}
<template #suffix>%</template>
</n-statistic>
</n-card>
</n-gi>
</n-grid>
</template>
<script setup>
import { ref } from 'vue'
const stats = ref({
totalUsers: '12,345',
revenue: '98,765',
orders: '1,234',
growth: '23.5',
})
</script>
With Number Animation
<template>
<n-statistic label="Animated Value" tabular-nums>
<n-number-animation
ref="numberAnimationRef"
:from="0"
:to="10000"
show-separator
:active="false"
/>
</n-statistic>
<n-button @click="play">Play Animation</n-button>
</template>
<script setup>
import { ref } from 'vue'
const numberAnimationRef = ref(null)
const play = () => {
numberAnimationRef.value?.play()
}
</script>
Comparison Statistics
<template>
<n-space vertical>
<n-statistic label="Current Month" tabular-nums>
<template #prefix>$</template>
{{ currentMonth }}
</n-statistic>
<n-space>
<n-text>vs Last Month: </n-text>
<n-text :type="changeType">
{{ changeSign }}{{ lastMonth }}
</n-text>
</n-space>
</n-space>
</template>
<script setup>
import { ref, computed } from 'vue'
const currentMonth = ref(12500)
const lastMonth = ref(10000)
const changeType = computed(() =>
currentMonth.value >= lastMonth.value ? 'success' : 'error'
)
const changeSign = computed(() =>
currentMonth.value >= lastMonth.value ? '+' : ''
)
</script>
Statistics in Card
<template>
<n-card title="Performance Overview">
<n-grid :cols="3" :x-gap="24">
<n-gi>
<n-statistic label="Page Views" tabular-nums>
<template #prefix>
<n-icon color="#18a058"><EyeIcon /></n-icon>
</template>
123,456
</n-statistic>
</n-gi>
<n-gi>
<n-statistic label="Unique Visitors" tabular-nums>
<template #prefix>
<n-icon color="#2080f0"><UserIcon /></n-icon>
</template>
45,678
</n-statistic>
</n-gi>
<n-gi>
<n-statistic label="Bounce Rate" tabular-nums>
<template #prefix>
<n-icon color="#f0a020"><ChartIcon /></n-icon>
</template>
32.5
<template #suffix>%</template>
</n-statistic>
</n-gi>
</n-grid>
</n-card>
</template>
Real-time Statistics
<template>
<n-statistic label="Live Viewers" tabular-nums>
<n-number-animation
:from="previousValue"
:to="currentValue"
:duration="500"
/>
<template #suffix>
<n-badge dot :type="isIncreasing ? 'success' : 'error'" />
</template>
</n-statistic>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const currentValue = ref(1000)
const previousValue = ref(1000)
const isIncreasing = ref(true)
let interval = null
onMounted(() => {
interval = setInterval(() => {
previousValue.value = currentValue.value
const change = Math.floor(Math.random() * 100) - 50
currentValue.value = Math.max(0, currentValue.value + change)
isIncreasing.value = change > 0
}, 2000)
})
onUnmounted(() => {
if (interval) clearInterval(interval)
})
</script>
Currency Statistics
<template>
<n-space vertical>
<n-statistic label="Total Balance" tabular-nums>
<template #prefix>
<n-text type="success">$</n-text>
</template>
{{ formatCurrency(balance) }}
</n-statistic>
<n-divider />
<n-grid :cols="2">
<n-gi>
<n-statistic label="Income" tabular-nums>
<template #prefix>
<n-text type="success">+$</n-text>
</template>
{{ formatCurrency(income) }}
</n-statistic>
</n-gi>
<n-gi>
<n-statistic label="Expenses" tabular-nums>
<template #prefix>
<n-text type="error">-$</n-text>
</template>
{{ formatCurrency(expenses) }}
</n-statistic>
</n-gi>
</n-grid>
</n-space>
</template>
<script setup>
import { ref } from 'vue'
const balance = ref(12345.67)
const income = ref(5000.00)
const expenses = ref(2345.33)
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { minimumFractionDigits: 2 })
}
</script>
Progress Statistics
<template>
<n-space vertical>
<n-statistic label="Completion Rate" tabular-nums>
{{ completed }} / {{ total }}
<template #suffix>
({{ percentage }}%)
</template>
</n-statistic>
<n-progress
type="line"
:percentage="percentage"
:show-indicator="false"
/>
</n-space>
</template>
<script setup>
import { ref, computed } from 'vue'
const completed = ref(75)
const total = ref(100)
const percentage = computed(() =>
Math.round((completed.value / total.value) * 100)
)
</script>
Best Practices
Use tabular-nums for number alignment: Ensure consistent number width
<n-statistic tabular-nums :value="12345" />Add context with labels: Always provide descriptive labels
<n-statistic label="Monthly Revenue" :value="50000" />Use prefix for currency symbols: Place currency in prefix slot
<n-statistic :value="1234.56"> <template #prefix>$</template> </n-statistic>Combine with n-number-animation: Create animated statistics
<n-statistic label="Total"> <n-number-animation :from="0" :to="1000" /> </n-statistic>Use icons in prefix/suffix: Add visual indicators
<n-statistic :value="100"> <template #prefix> <n-icon><UserIcon /></n-icon> </template> </n-statistic>Group related statistics: Use grid layout for dashboards
<n-grid :cols="4"> <n-gi v-for="stat in stats" :key="stat.label"> <n-statistic :label="stat.label" :value="stat.value" /> </n-gi> </n-grid>Use cards for visual separation: Wrap statistics in cards
<n-card> <n-statistic label="Key Metric" :value="value" /> </n-card>