GrStatistic

<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 задаёт строку под значением: направление — иконкой и скрытой подписью, а цвет — полярностью, а не направлением. Рост оттока — плохая новость, падение просрочки — хорошая; зелёной стрелка «вверх» бывает только там, где рост и правда хорош. Тон считает тот же deltaTone: negative-good красит up в danger, down — в success, none и flat — без тона.

<GrStatistic title="Отток" :value="2.4" suffix="%" trend="up" trend-text="+0.6 п. п." trend-polarity="negative-good" />

Абсолютный показатель — отток 2.4 %, время ответа, число просроченных счетов — знака не несёт: красить само число не за что. Ему полярность задают динамике, trendPolarity, и значение остаётся нейтральным, а строка «↑ +0.6 п. п.» — красной. Не задан trendPolarity — динамика берёт polarity; не задано ни то, ни другое — рост хорош, как у выручки.

Явный 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, …) сохранены: стили потребителя, написанные по ним, продолжают работать.