Statistic

Компонент Statistic предназначен для отображения числовых значений с дополнительной информацией, такой как заголовок, описание или динамическое изменение значения. Он позволяет создавать информативные панели с ключевыми метриками, например, для дашбордов или аналитических страниц.

Основные свойства

  • title (string | VNode) – заголовок статистики. Может быть простым текстом или компонентом Vue для более сложного оформления.
  • value (number | string) – отображаемое числовое значение. Значение может быть числом или строкой, поддерживаются любые форматы.
  • prefix (string | VNode) – символ или компонент перед значением (например, валютный знак, иконка).
  • suffix (string | VNode) – символ или компонент после значения (например, единицы измерения).
  • precision (number) – количество знаков после запятой при отображении числовых значений.
  • groupSeparator (string) – символ, используемый для разделения тысяч. По умолчанию запятая.
  • valueStyle (CSSProperties) – возможность кастомизировать стиль отображения значения.
  • renderValue (Function) – функция для кастомного рендера значения. Получает value как аргумент.

Простейший пример использования

<template>
  <n-statistic title="Продажи за месяц" :value="12345" suffix="₽" />
</template>

<script setup>
import { NStatistic } from 'naive-ui'
</script>

В этом примере отображается число 12345 с заголовком и валютным суффиксом.

Форматирование чисел

Компонент поддерживает локализованное форматирование через свойства precision и groupSeparator:

<n-statistic 
  title="Доход" 
  :value="1234567.89" 
  precision="2" 
  group-separator=" " 
  suffix="₽" 
/>

Результат будет отображаться как 1 234 567.89 ₽, что повышает читаемость больших чисел.

Динамическое обновление значения

Компонент Statistic интегрируется с реактивными данными Vue, что позволяет создавать динамические дашборды:

<template>
  <n-statistic 
    title="Пользователи онлайн" 
    :value="onlineUsers" 
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { NStatistic } from 'naive-ui'

const onlineUs ers = ref(0)

onMounted(() => {
  setInterval(() => {
    onlineUsers.value = Math.floor(Math.random() * 5000)
  }, 2000)
})
</script>

Значение onlineUsers обновляется каждые 2 секунды, и компонент автоматически отображает новое число.

Кастомизация стиля

Свойство valueStyle позволяет изменять цвет, шрифт, размер или другие CSS-атрибуты значения:

<n-statistic 
  title="Доход" 
  :value="10500" 
  suffix="₽"
  :value-style="{ color: 'green', fontWeight: 'bold', fontSize: '24px' }"
/>

Так можно визуально выделять показатели, например, прибыль положительного значения зеленым цветом.

Использование слотов

Statistic поддерживает слоты для более гибкой кастомизации:

  • title – для сложного заголовка с иконками или дополнительной информацией.
  • value – полный контроль над рендером значения через слот.
  • prefix / suffix – для вставки элементов перед или после значения.
<n-statistic>
  <template #title>
    <span>Доход <n-icon name="trending-up" /></span>
  </template>
  <template #value>
    <strong>12345 ₽</strong>
  </template>
</n-statistic>

С помощью слотов можно интегрировать иконки, стилизованные компоненты и другие визуальные элементы без ограничения стандартных свойств.

Анимация изменения значения

Naive UI не имеет встроенной анимации числа, но можно использовать сторонние решения или анимацию через Vue transitions:

<n-statistic :value="animatedValue" />

<script setup>
import { ref, onMounted } from 'vue'

const animatedValue = ref(0)

onMounted(() => {
  let value = 0
  const interval = setInterval(() => {
    value += 100
    animatedValue.value = value
    if (value >= 5000) clearInterval(interval)
  }, 50)
})
</script>

Плавное изменение значения создается за счет реактивного обновления данных.

Использование с темами

Компонент наследует тему Naive UI и может использовать theme-overrides для локального изменения цветов и шрифтов:

<n-statistic
  title="Доход"
  :value="12345"
  :theme-overrides="{ 
    common: { primaryColor: '#4caf50' },
    Statistic: { valueFontSize: '22px' } 
  }"
/>

Это позволяет создавать визуально согласованные панели с уникальным оформлением под конкретный проект.

Сочетание с другими компонентами

Statistic часто комбинируется с Card, Grid и другими компонентами Naive UI для построения дашбордов:

<n-card title="Основные показатели">
  <n-grid cols="3" :x-gap="20" :y-gap="20">
    <n-statistic title="Доход" :value="12000" suffix="₽" />
    <n-statistic title="Пользователи" :value="3400" />
    <n-statistic title="Конверсии" :value="120" suffix="%" />
  </n-grid>
</n-card>

Такой подход обеспечивает компактное и визуально структурированное представление ключевых метрик.

Важные рекомендации

  • Для больших чисел используйте groupSeparator для улучшения читаемости.
  • Для финансовых показателей указывайте precision, чтобы избежать округления значений.
  • Слоты предпочтительны при необходимости добавления иконок или сложной разметки.
  • valueStyle и theme-overrides позволяют сохранять единый стиль приложения без изменения глобальных настроек.

Компонент Statistic в Naive UI — универсальный инструмент для отображения числовой информации с гибкой кастомизацией, поддержкой динамики и интеграции в сложные интерфейсы.

Оглавление