Statistic

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

Основное использование

Базовый синтаксис компонента выглядит следующим образом:

import { Statistic } from 'antd';

<Statistic
  title="Активные пользователи"
  value={112893}
/>
  • title – заголовок, который поясняет значение.
  • value – числовое значение, отображаемое в компоненте. Может быть числом или строкой.
  • Компонент автоматически подбирает стили для корректного отображения числа.

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

Statistic поддерживает форматирование числовых значений с использованием различных опций.

1. Формат с разделителем тысяч

<Statistic
  title="Продажи"
  value={1234567}
  precision={0}
/>
  • precision – количество знаков после запятой.
  • По умолчанию используется стандартное разделение тысяч через запятую (например, 1,234,567).

2. Добавление символа валюты

<Statistic
  title="Доход"
  value={112893}
  precision={2}
  prefix="$"
/>
  • prefix – добавляет символ перед числом, например, валюту.
  • suffix – добавляет символ после числа, например, %.

Индикация изменений

Компонент позволяет визуально отображать динамику показателей с помощью стрелок up и down, либо с помощью цветов:

<Statistic
  title="Темп роста"
  value={11.28}
  precision={2}
  valueStyle={{ color: '#3f8600' }}
  prefix={<ArrowUpOutlined />}
/>

<Statistic
  title="Снижение"
  value={9.3}
  precision={2}
  valueStyle={{ color: '#cf1322' }}
  prefix={<ArrowDownOutlined />}
/>
  • valueStyle – позволяет задавать CSS-стили для числового значения.
  • prefix и suffix могут содержать иконки или текстовые обозначения для улучшения визуального восприятия.

Анимированное изменение значений

Для плавного отображения изменения чисел можно использовать компонент Countdown, встроенный в Statistic:

import { Statistic } from 'antd';

<Statistic.Countdown
  title="До события"
  value={Date.now() + 1000 * 60 * 60 * 24} // через 24 часа
  onFin ish={() => console.log('Событие наступило!')}
/>
  • value – конечное значение времени в миллисекундах.
  • onFinish – callback, который срабатывает при достижении конечного времени.
  • Поддерживается форматирование отображения дней, часов, минут и секунд.

Настройка формата отображения

Для более сложного форматирования чисел используется formatter:

<Statistic
  title="Преобразованное значение"
  value={1234567.89}
  formatter={value => `≈ ${value} USD`}
/>
  • formatter – функция, принимающая числовое значение и возвращающая строку для отображения.
  • Позволяет полностью контролировать форматирование, включая локализацию и добавление специальных символов.

Интеграция с другими компонентами Ant Design

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

import { Card, Row, Col, Statistic } from 'antd';

<Row gutter={16}>
  <Col span={8}>
    <Card>
      <Statistic title="Активные пользователи" value={112893} />
    </Card>
  </Col>
  <Col span={8}>
    <Card>
      <Statistic title="Доход" value={112893} prefix="$" />
    </Card>
  </Col>
  <Col span={8}>
    <Card>
      <Statistic title="Рост" value={11.28} suffix="%" />
    </Card>
  </Col>
</Row>
  • Row и Col управляют сеткой и расположением.
  • Комбинация с Card делает дашборд визуально структурированным.

Пользовательские стили и темы

Можно кастомизировать стили через style и className:

<Statistic
  title="Пользовательские стили"
  value={12345}
  style={{
    color: '#1890ff',
    fontSize: '24px',
    fontWeight: 'bold'
  }}
/>
  • Позволяет менять цвет, размер шрифта, отступы и другие CSS-свойства.
  • Можно использовать тематические переменные Ant Design для соблюдения общей стилистики.

Итоговые возможности

Компонент Statistic обеспечивает:

  • Отображение числовых показателей с заголовком.
  • Поддержку префиксов, суффиксов, символов валюты.
  • Индикацию роста или снижения значений с цветовой кодировкой.
  • Анимацию изменения значений и отсчёт времени.
  • Гибкое форматирование через formatter.
  • Интеграцию с другими компонентами для создания профессиональных дашбордов.
  • Полную кастомизацию внешнего вида через CSS и стили Ant Design.

Statistic является универсальным инструментом для визуализации ключевых метрик и аналитических данных в интерфейсах на React с Ant Design.

Оглавление