VibeUI
РусEng
Войти

Графики

Спарклайн с зоной нормы

Мини-график на фоне полосы нормы: сам ряд отвечает «росло или падало», а полоса — на главный вопрос «было ли плохо», и выходы за неё отмечены точками.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • ряд через values, подписи через label и value
  • границы нормы через low и high — в тех же единицах, что и данные
  • подписи подвала через bandTemplate с {low} и {high} и breachTemplate с {count}

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Спарклайн с зоной нормы — Мини-график на фоне полосы нормы: сам ряд отвечает «росло или падало», а полоса — на главный вопрос «было ли плохо», и выходы за неё отмечены точками.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/sparkline-005?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Sparkline005
  label="Время ответа, мс"
  value="131"
  low={100}
  high={160}
  values={[120, 210, 156, 131]}
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Подпись
label · по умолчанию: Время ответа, мс
Нижняя граница
low · по умолчанию: 100
Верхняя граница
high · по умолчанию: 160
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Ещё в разделе «Графики»

Частые вопросы

Как установить компонент «Спарклайн с зоной нормы» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Спарклайн с зоной нормы»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Спарклайн с зоной нормы»?
Можно менять: ряд через values, подписи через label и value; границы нормы через low и high — в тех же единицах, что и данные; подписи подвала через bandTemplate с {low} и {high} и breachTemplate с {count}. Сохранить как есть: локальную палитру --vibeui-sparkline-005-*: компонент обязан выглядеть одинаково в любом проекте; масштаб по объединению ряда и полосы — иначе полоса нормы уедет за кадр; отметки выходов за норму: без них полоса остаётся украшением, а не ответом.
Компонент «Спарклайн с зоной нормы» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/sparkline-005.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Один файл, ноль зависимостей, палитра --vibeui-sparkline-005-*. Серверный. Границы нормы приходят в тех же единицах, что и данные, и масштаб строится по объединению ряда с полосой — иначе полоса уехала бы за кадр, как только весь ряд окажется выше или ниже неё. Полоса нормы залита слабым акцентом, её края помечены пунктиром. Точки выхода за норму крупнее последней точки ряда и своего цвета: их ищут глазами в первую очередь. SVG помечен role=img с подписью из шаблона, а число выходов продублировано текстом в подвале.

Теги

  • sparkline
  • threshold
  • monitoring
  • compact
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…