GrStatistic

• один показатель — главный — выручка, число заказов, конверсия: крупная цифра читается первой;
• рядом нужна динамика — trend со стрелкой и подписью «+12 % к прошлой неделе»;
• число длинное — группировка разрядов и precision по локали, без ручного форматирования;
• значение меняется на глазах — animate доводит цифру до нового значения, а не подменяет её;
• плитка кликабельна — href/clickable ведут в раздел с подробностями.

Компонент презентационный: данные не грузит и дельту не считает — только форматирует и подаёт. Тренд приходит готовым, потому что «к чему сравнивать» знает приложение, а не плитка.

<GrStatistic title="Выручка" :value="1234567.5" :precision="2" prefix="₽" />

Разделители берутся из локали через Intl.NumberFormat, а локаль — из i18n-адаптера пакета. Ничего настраивать не нужно: ru даст 1 234 567,50, de-DE — 1.234.567,50.

Порядок разрешения: groupSeparator/decimalSeparator → проп locale → локаль адаптера → встроенный дефолт (узкий пробел и точка). Явный разделитель подменяет только свою часть, остальные правила локали — группировку по три или по индийской схеме, знак минуса — компонент сохраняет.

Нечисловое значение выводится как есть: «2 ч 15 мин», «—» не требуют обходных пропов. Форматирование живёт отдельной чистой функцией formatStatisticValue и доступно из пакета.

Не доехавший обязательный value рисуется прочерком — тем же знаком пустоты, которым GrDelta показывает отсутствующую величину, — и объясняется предупреждением в dev-режиме. Плитка со словом undefined выглядит как данные, а не как ошибка, поэтому такой вариант исключён.

<GrStatistic :value="482" trend="up" trend-text="+12,5 % к прошлой неделе" />

trend задаёт цвет и иконку строки, trendText — сам текст. Иконки направления встроенные; проп icon слева от блока принимает Vue-компонент или класс иконки вашей сборки (см. «Иконки»). Направление дополнительно объявляется скрытой подписью («Рост», «Падение», «Без изменений»): иконка декоративна, а «+12,5 %» без контекста рост от падения не отличает — цвет диктору тоже не виден. Подпись остаётся и при своём слоте #trend.

<GrStatistic title="Средний чек" :value="14.99" :precision="2" prefix="$" suffix="за заказ" />

Запись величины — префикс, число, суффикс — плитка не рисует сама: этим занят примитив GrValue, общий у неё с GrDelta. Оттуда же и дефолты: слева приписка набирается как число ($14,99), справа — приглушённой и мельче (42 %).

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

Чем является приписка — валютой, единицей измерения или пометкой — не решает никто: оформление обеих настраивается токенами --gr-value-*. Так получается и валюта справа (1 284 500 ₽), которой дефолт суффикса не подходит, — рецепт на странице примитива.

<GrStatistic title="Маржа" :value="-1240" prefix="₽" polarity="positive-good" />

polarity красит значение по знаку самой величины: positive-good для выручки, negative-good для себестоимости и оттока, none — знак ничего не говорит о качестве. Ноль нейтрален при любой полярности, а нечисловое значение («2 ч 15 мин», «—») знака не имеет и тона не получает.

trend красит строку под значением и приходит готовым. Одно другого не требует: показатель может краснеть без подписи о динамике, а подпись — стоять под нейтральным значением.

Явный tone сильнее polarity: выведенный тон — умолчание, а не диктат. Тот же выбор тона доступен отдельной функцией deltaTone — см. GrDelta, где он и живёт.

<GrStatistic title="Выручка" :value="revenue" animate :animate-duration="900" />

animate перебирает числа при появлении плитки (от нуля) и при каждой смене значения — от прежнего числа, а не от нуля: перебор с нуля на каждом обновлении дашборда читался бы как сброс данных.

Длительность задаёт animateDuration в миллисекундах (по умолчанию 600). Токеном она не задаётся намеренно: шкала --gr-duration-* заканчивается на 300 мс и описывает смену состояния — цвет, рамку, появление слоя. Перебор чисел — другой жанр, и его число живёт там же, где твин, — в JS.

Перебираются только числа: «2 ч 15 мин» и «—» ставятся сразу. Ширина строки не дёргается — значение набрано tabular-nums.

prefers-reduced-motion компонент читает сам. Глобальный кламп в base.css гасит CSS-анимации и переходы, но не JS-твин — см. ../motion.md. Под reduce значение ставится мгновенно, без единого промежуточного кадра.

Диктор слышит конечное значение. Пока идёт перебор, видимое число помечено aria-hidden, а рядом живёт визуально скрытый узел с итогом: «1 284 500» на экране и «743 210» в ушах — не шум, а неверные данные.

<GrStatistic title="Заказы" :value="1284" href="/orders" />

<GrStatistic title="Заказы" :value="1284" clickable @click="drill" />

<GrStatistic title="Заказы" :value="1284" :as="RouterLink" :to="{ name: 'orders' }" />

Тот же приём, что у GrCard и GrListItem: href даёт ссылку, clickable — кнопку, as — свой тег или компонент роутера (сильнее href). Интерактивная плитка получает курсор, подсветку и фокус-кольцо; своей заливки у неё нет — показатель обычно уже лежит в карточке, и вторая поверхность спорила бы с ней.

Отдельного ariaLabel нет: доступное имя собирается из содержимого, а подпись показателя и есть его имя.

loading подменяет значение скелетоном той же высоты, чтобы блок не прыгал; область помечена role="status" и содержит скрытый текст загрузки.

Слоты #icon, #title, #prefix, #suffix, #trend и слот по умолчанию (вместо форматированного значения) заменяют соответствующие части разметкой.

Подпись и значение выводятся как <dl> → <dt> → <dd>: это пара «термин — значение», а не два соседних блока, которые диктор просто читает подряд. <dl> появляется только вместе с подписью — список определений без <dt> был бы той же бессвязностью, только с претензией на семантику.

Строка динамики остаётся снаружи <dl>: внутри списка определений разрешены только группы dt/dd. Место в DOM у неё прежнее, вёрстка не меняется. Поля <dl> и <dd> обнулены классом — preflight пакета сбрасывает их только у body.

Все data-атрибуты (data-gr-statistic-title, data-gr-statistic-value, …) сохранены: стили потребителя, написанные по ним, продолжают работать.