Stat

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

Структура компонента Stat

Компонент состоит из нескольких ключевых элементов:

  1. StatLabel – текстовая метка, поясняющая смысл числа.
  2. StatNumber – основное числовое значение.
  3. StatHelpText – дополнительная информация или контекст.
  4. StatArrow – стрелка для отображения направления изменения значения (увеличение/уменьшение).

Пример базовой структуры:

import { Stat, StatLabel, StatNumber, StatHelpText, StatArrow } from "@chakra-ui/react";

<Stat>
  <StatLabel>Продажи</StatLabel>
  <StatNumber>1,245</StatNumber>
  <StatHelpText>
    <StatArrow type="increase" /> 23.4%
  </StatHelpText>
</Stat>

В этом примере:

  • StatLabel показывает, что данные относятся к продажам.
  • StatNumber отображает текущее значение.
  • StatHelpText с StatArrow визуализирует динамику: рост на 23.4%.

Настройка направления стрелки

Компонент StatArrow поддерживает два типа:

  • type="increase" – стрелка вверх, обозначает рост.
  • type="decrease" – стрелка вниз, обозначает снижение.

Дополнительно можно использовать свойства цвета для подчеркивания динамики:

<StatArrow type="increase" color="green.500" />
<StatArrow type="decrease" color="red.500" />

Изменение размеров и стиля текста

Все текстовые элементы компонента можно настраивать через Chakra UI пропсы, такие как fontSize, color и fontWeight:

<Stat>
  <StatLabel fontSize="sm" color="gray.500">Доход</StatLabel>
  <StatNumber fontSize="2xl" fontWeight="bold">$8,420</StatNumber>
  <StatHelpText fontSize="md" color="green.400">
    <StatArrow type="increase" /> 12%
  </StatHelpText>
</Stat>

Компоновка нескольких статистик

Stat легко комбинируется с SimpleGrid, HStack или VStack для отображения нескольких показателей:

import { SimpleGrid, Stat, StatLabel, StatNumber, StatHelpText, StatArrow } from "@chakra-ui/react";

<SimpleGrid columns={3} spacing={5}>
  <Stat>
    <StatLabel>Пользователи</StatLabel>
    <StatNumber>5,230</StatNumber>
    <StatHelpText>
      <StatArrow type="increase" /> 8%
    </StatHelpText>
  </Stat>

  <Stat>
    <StatLabel>Заказы</StatLabel>
    <StatNumber>1,120</StatNumber>
    <StatHelpText>
      <StatArrow type="decrease" /> 3%
    </StatHelpText>
  </Stat>

  <Stat>
    <StatLabel>Выручка</StatLabel>
    <StatNumber>$12,450</StatNumber>
    <StatHelpText>
      <StatArrow type="increase" /> 15%
    </StatHelpText>
  </Stat>
</SimpleGrid>

Использование SimpleGrid позволяет равномерно распределять статистические блоки, создавая аккуратный и читаемый интерфейс.

Стилизация с Chakra UI

Компонент Stat наследует стили от Box, что открывает возможности для кастомизации:

  • Фон и границы: bg, border, borderRadius.
  • Отступы и размеры: p, m, w, h.
  • Тень и эффекты: boxShadow, transition, hover.

Пример с визуальным оформлением:

<Stat bg="gray.50" p={4} borderRadius="md" boxShadow="md">
  <StatLabel color="gray.600">Активные пользователи</StatLabel>
  <StatNumber color="blue.600">3,420</StatNumber>
  <StatHelpText>
    <StatArrow type="increase" /> 5.2%
  </StatHelpText>
</Stat>

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

StatNumber и StatHelpText можно обновлять через состояние React, что удобно для дашбордов с живыми данными:

import { useState, useEffect } from "react";
import { Stat, StatLabel, StatNumber, StatHelpText, StatArrow } from "@chakra-ui/react";

function DynamicStat() {
  const [sales, setSales] = useState(1245);

  useEffect(() => {
    const interval = setInterval(() => {
      setSales(prev => prev + Math.floor(Math.random() * 50));
    }, 3000);
    return () => clearInterval(interval);
  }, []);

  return (
    <Stat>
      <StatLabel>Продажи</StatLabel>
      <StatNumber>{sales}</StatNumber>
      <StatHelpText>
        <StatArrow type="increase" /> {((sales / 1245 - 1) * 100).toFixed(1)}%
      </StatHelpText>
    </Stat>
  );
}

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

Адаптивность и респонсивность

Все элементы Stat полностью совместимы с респонсивными пропсами Chakra UI:

<Stat>
  <StatLabel fontSize={{ base: "sm", md: "md" }}>Доход</StatLabel>
  <StatNumber fontSize={{ base: "xl", md: "2xl" }}>$8,420</StatNumber>
  <StatHelpText fontSize={{ base: "sm", md: "md" }}>
    <StatArrow type="increase" /> 12%
  </StatHelpText>
</Stat>

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

Интеграция с иконками и визуальными элементами

Для улучшения визуальной информативности к StatLabel и StatNumber можно добавлять иконки из @chakra-ui/icons или сторонних библиотек:

import { Stat, StatLabel, StatNumber, StatHelpText, StatArrow } from "@chakra-ui/react";
import { ArrowUpIcon } from "@chakra-ui/icons";

<Stat>
  <StatLabel>Подписки</StatLabel>
  <StatNumber>
    2,350 <ArrowUpIcon color="green.400" />
  </StatNumber>
  <StatHelpText>
    <StatArrow type="increase" /> 7.5%
  </StatHelpText>
</Stat>

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

Оглавление