Паттерны
Сегментированный индикатор состояния
Когда использовать:
- метрику статуса проще читать как несколько составных частей
Заметки по композиции:
- сохраняйте осмысленный порядок сегментов
- оставляйте подписи рядом, если одних цветов недостаточно
Компромиссы:
- выразительно
- без контекста понять сложнее, чем одну полосу
import { Button, MeterStack, MeterStackSegment, Text } from '@vega-ui/react';
import { CSSProperties, useId, useState } from 'react';
type Period = '24h' | '7d' | '30d';
const minutesByPeriod: Record<Period, { healthy: number, degraded: number, outage: number }> = {
'24h': { healthy: 1380, degraded: 52, outage: 8 },
'7d': { healthy: 9640, degraded: 410, outage: 30 },
'30d': { healthy: 42310, degraded: 690, outage: 200 },
};
const periods: Period[] = ['24h', '7d', '30d'];Разбивка надёжности пароля
Когда использовать:
- оценка представлена дискретными сегментами
Заметки по композиции:
- держите число сегментов постоянным
- дополняйте текстовой подписью надёжности
Компромиссы:
- интуитивная обратная связь на основе сегментов
- без текста её можно принять за точную валидацию
import { Button, HelperText, Label, MeterStack, MeterStackSegment, TextField, TextFieldInput } from '@vega-ui/react';
import { CSSProperties, FormEvent, useId, useState } from 'react';
const levels = [
{ label: 'Too weak', color: 'var(--color-red-500)' },
{ label: 'Weak', color: 'var(--color-red-500)' },
{ label: 'Fair', color: 'var(--color-orange-500)' },
{ label: 'Good', color: 'var(--color-amber-500)' },
{ label: 'Strong', color: 'var(--color-green-500)' },
];
export default function PasswordStrengthBreakdown() {Распределение выручки или квоты
Когда использовать:
- одну сумму нужно показать как несколько составляющих частей
Заметки по композиции:
- следите, чтобы значения сегментов в сумме давали задуманный итог
- используйте цвет осознанно
Компромиссы:
- хорошая сравнительная сводка
- крошечным сегментам могут понадобиться подписи вне компонента
import { Card, Heading, MeterStack, MeterStackSegment, Text } from '@vega-ui/react';
import { CSSProperties, useId } from 'react';
const channels = [
{ id: 'web', label: 'Web store', amount: 184200, color: 'var(--color-blue-500)' },
{ id: 'ios', label: 'iOS app', amount: 121700, color: 'var(--color-purple-500)' },
{ id: 'android', label: 'Android app', amount: 64300, color: 'var(--color-green-500)' },
{ id: 'partners', label: 'Partners', amount: 29800, color: 'var(--color-orange-500)' },
];
export default function RevenueSplitSummary() {
const titleId = useId();Сравнение
Быстрое правило выбора
Используйте MeterStack, когда метрику проще всего понять как несколько цветных частей. Используйте Meter или Progress, когда одна сплошная полоса передаёт значение яснее.
MeterStack или Meter
Используйте MeterStack, когда:
- главное сообщение — именно состав из сегментов
Используйте Meter, когда:
- достаточно одного непрерывного значения в границах
MeterStack или Progress
Используйте MeterStack, когда:
- интерфейс показывает разбивку по составу
Используйте Progress, когда:
- интерфейс показывает выполнение одной задачи во времени
Выбирайте этот компонент, когда
- одна метрика состоит из нескольких значимых сегментов
- порядок и цвет сегментов несут реальную информацию
- сама разбивка важнее одного итогового значения
Не выбирайте этот компонент, когда
- достаточно одной сплошной полосы
- смысл сегментов неясен или чисто декоративен
Решение проблем
Индикатор выглядит неправильно, хотя UI рендерится
Симптом
Сегментированная полоса рендерится, но пропорции не соответствуют задуманной метрике.
Вероятная причина
Значения сегментов или max корня не отражают реальную модель данных.
Как проверить
- сложите значения сегментов
- сравните их с
valueиmaxкорня
Решение
Нормализуйте значения сегментов в родительской функции перед рендером.
Крошечные сегменты невозможно понять
Симптом
Некоторые сегменты видны, но слишком малы, чтобы их интерпретировать.
Вероятная причина
Закодировано слишком много мелких частей без внешних подписей.
Как проверить
- проверьте компонент на реальной ширине в продакшене
Решение
Сократите число сегментов, расширьте компонент или добавьте подписи и тултипы вне индикатора.
Весь смысл передаётся только различием цветов
Симптом
Индикатор понятен, только если пользователь идеально различает соответствие цветов.
Вероятная причина
Рядом нет поясняющего текста или легенды.
Как проверить
- мысленно уберите цвет и проверьте, остаётся ли структура понятной
Решение
Добавьте подписи или текст рядом, которые объясняют категории сегментов.