Спарклайн
Спарклайн с зоной нормы
Мини-график на фоне полосы нормы: сам ряд отвечает «росло или падало», а полоса — на главный вопрос «было ли плохо», и выходы за неё отмечены точками.
Что можно поменять
- ряд через values, подписи через label и value
- границы нормы через low и high — в тех же единицах, что и данные
- подписи подвала через bandTemplate с {low} и {high} и breachTemplate с {count}
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/sparkline-005?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, палитра --vibeui-sparkline-005-*. Серверный. Границы нормы приходят в тех же единицах, что и данные, и масштаб строится по объединению ряда с полосой — иначе полоса уехала бы за кадр, как только весь ряд окажется выше или ниже неё. Полоса нормы залита слабым акцентом, её края помечены пунктиром. Точки выхода за норму крупнее последней точки ряда и своего цвета: их ищут глазами в первую очередь. SVG помечен role=img с подписью из шаблона, а число выходов продублировано текстом в подвале.
Теги
- sparkline
- threshold
- monitoring
- compact
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…