Главная / Каталог / UI-компоненты
«Цифры и метрики» — 6 блоков с данными
Цена: 590 ₽
Шесть блоков для показа чисел: счётчики, KPI с динамикой, кольцевая диаграмма, полосы распределения, спарклайны и график-область. Только SVG и CSS, без библиотек.
Набор для блоков «в цифрах», отчётов и дашбордов. Всё нарисовано вручную на SVG и CSS: ни Chart.js, ни D3 — страница не тянет 200 килобайт ради одного графика.
В счётчиках учтён неочевидный момент: числа меньше 60 шагов считаются ровным темпом, а не с замедлением. С ускорением половина пути проскакивает мгновенно, а хвост стоит — и это выглядит как рывки. Крупные числа идут с замедлением, там значений больше, чем кадров.
У KPI-плиток есть поле good: у метрик вроде отказов, времени ответа или стоимости заявки падение — это успех. Стрелка показывает направление изменения, а цвет — хорошо это или плохо. Кольцевая диаграмма собрана из окружностей со сдвигом штриха, без вычисления дуг, и подсвечивает сегмент при наведении на легенду.
Что умеет
- Счётчики с ровным темпом на малых числах
- KPI-плитки с честной трактовкой роста и падения
- Кольцевая диаграмма с интерактивной легендой
- Полосы распределения от максимума, а не от суммы
- Спарклайны с нормализацией по ряду
- Большой график-область с переключателем периодов
- Палитра различима на ч/б печати и при дальтонизме
- Префикс .prd- — не конфликтует с чужими стилями
Разделы
- Полоса счётчиков
- KPI-плитки
- Кольцевая диаграмма
- Полосы распределения
- Спарклайны
- Большая метрика с графиком