Meter

Паттерны

Индикатор ёмкости

Когда использовать:

• Интерфейс показывает квоту, хранилище или ограниченную ёмкость.

Заметки о композиции:

• Сопровождайте полосу текстом, который объясняет и предмет, и шкалу.
• Используйте пороги, когда у измерения есть значимые зоны.

Компромиссы:

• Хорошо подходит для количественных сводок.
• Плохо подходит, когда диапазон ничего не говорит пользователям.

import { Meter, MeterTrack, Text } from '@vega-ui/react';
import { useId } from 'react';

export default function StorageUsage() {
  const labelId = useId();
  const usedGb = 36.2;
  const limitGb = 50;
  const summary = `${usedGb} GB of ${limitGb} GB used`;

  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-3)', width: '100%' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 'var(--spacing-8)' }}>

Сводка состояния или оценки

Когда использовать:

• Оценка или показатель состояния должны находиться на компактной сводной поверхности.

Заметки о композиции:

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

Компромиссы:

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

import { Card, Heading, Meter, MeterTrack, Text } from '@vega-ui/react';
import { useId } from 'react';

const usage = [
  { id: 'seats', label: 'Seats', used: 18, limit: 20, unit: 'seats' },
  { id: 'storage', label: 'Storage', used: 412, limit: 500, unit: 'GB' },
  { id: 'minutes', label: 'Build minutes', used: 1240, limit: 3000, unit: 'min' },
];

export const locales = ['en-US', 'ru-RU', 'ar-EG', 'he-IL'];

export default function MeterInsideACard({ locale = 'en-US' }: { locale?: string }) {

Измерение с учётом порогов

Когда использовать:

• У диапазона есть хорошая, предупреждающая и плохая зоны.

Заметки о композиции:

• Настраивайте low, high и optimum осознанно.
• Не полагайтесь только на смену цвета для передачи смысла.

Компромиссы:

• Более насыщенная семантическая обратная связь для одного измерения.
• Требует от продукта большей дисциплины в отношении порогов.

import { Button, Meter, MeterTrack, Text } from '@vega-ui/react';
import { useId, useState } from 'react';

export default function BatteryLevel() {
  const labelId = useId();
  const statusId = useId();
  const [level, setLevel] = useState(64);

  let status = 'Battery is fine';
  if (level < 20) {
    status = 'Battery is low — connect the charger';
  } else if (level > 80) {

Сравнение

Быстрое правило выбора

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

Meter или Progress

Используйте Meter, когда:

• значение — оценка, квота, ёмкость или другое ограниченное измерение

Используйте Progress, когда:

• значение отражает выполнение задачи во времени

Главный компромисс: meter описывает измерение, а progress — выполнение во времени.

Meter или Badge

Используйте Meter, когда:

• интерфейсу нужна количественная визуализация диапазона

Используйте Badge, когда:

• интерфейсу нужна только короткая метка категории или статуса

Главный компромисс: meter визуализирует количество, а badge подписывает состояние.

Meter или MeterStack

Используйте Meter, когда:

• одно непрерывное ограниченное значение — самое понятное представление

Используйте MeterStack, когда:

• должны оставаться видимыми несколько частей одного целого

Выбирайте этот компонент, когда

• Значение ограничено и носит описательный характер.
• Важны пороги или оптимальное состояние.
• Полезна количественная визуализация в виде полосы.
• одно непрерывное измерение понятнее разбивки на сегменты

Не выбирайте этот компонент, когда

• Значение отражает текущее выполнение.
• Интерфейсу нужна лишь короткая текстовая метка.
• Осмысленного диапазона нет.

Решение проблем

Вместо Meter, вероятно, нужен индикатор выполнения

Симптом

Значение на самом деле отражает текущее выполнение, а не ограниченное измерение.

Вероятная причина

Meter выбран для состояния прогресса во времени.

Как проверить

• Спросите себя, отражает ли число выполнение во времени.

Исправление

• Для выполнения задачи перейдите на Progress.

Цвета порогов кажутся произвольными

Симптом

Полоса меняет цвет, но пользователи не понимают почему.

Вероятная причина

low, high и optimum настроены без достаточного пояснения вокруг.

Как проверить

• Скройте подписи и проверьте, остаётся ли смысл порогов очевидным.

Исправление

• Объясните диапазон измерения в тексте рядом.
• Скорректируйте значения порогов, чтобы они отражали реальный смысл в продукте.

Meter показывает значение, но не его контекст

Симптом

Пользователи видят полосу, но не знают, что измеряется.

Вероятная причина

Компонент отрендерен без поясняющего текста вокруг.

Как проверить

• Уберите соседние заголовки и проверьте, остаётся ли смысл понятным.

Исправление

• Добавьте рядом понятный текст о предмете и диапазоне.