Documentation
Components
CloudX
Графики для систем мониторинга
Charts — архитектура компонентов, состояния взаимодействия и документация
Пример применения компонентов в интерфейсе мониторинга Kafka. Числа на экране относятся к содержимому интерфейса, а не к результатам проекта.
Задача.
Я разработал архитектуру компонентов, визуальное оформление графиков, состояния взаимодействия и документацию. Цвета, шрифты и размеры текста унаследованы из дизайн-системы компании.
Работа посвящена набору графиков для интерфейсов мониторинга: временным рядам, сравнению категорий, долям, текущим значениям и истории состояний. За разными способами отображения данных стоит общая структура компонентов и правила их настройки.
Общая основа.
Для линейных и столбчатых графиков я использовал ChartArea — основу с осями, сеткой, легендой и областью отображения данных. Содержимое графика меняется отдельно от его окружения.
Левую и правую оси, подписи и легенду можно включать по необходимости. Настройки сетки и подписей позволяют собирать разные представления внутри одной структуры, а не создавать окружение каждого графика заново.
Два примера ChartArea: отличаются содержимым, сеткой и наличием легенды. Общая основа сохраняется.
Разные данные — разные представления.
Линии показывают изменение показателей во времени. Группированные столбцы сопоставляют категории, а накопительные — показывают их вклад в общее значение. Круговые диаграммы описывают состав целого; индикаторы и числовые виджеты — текущее значение.
ВКЛАД В ОБЩЕЕ ЗНАЧЕНИЕ
СРАВНЕНИЕ КАТЕГОРИЙ
В кейсе я показываю несколько характерных вариантов. Важен не полный каталог графиков, а различие задач, которые они представляют.
Группировка сохраняет отдельные значения. Накопление показывает вклад частей в общую величину.
СОСТАВ ЦЕЛОГО
ТЕКУЩИЕ ЗНАЧЕНИЕ
ЗНАЧЕНИЕ НА ШКАЛЕ
Работа с данными.
Для временных рядов я предусмотрел состояние с подсказкой: дата, время и значения нескольких серий привязаны к одной позиции на графике. Выделение диапазона отдельно показывает участок, с которым работает пользователь.
В документации описал переход от выделенного диапазона к увеличению выбранного периода. На этих макетах показаны исходное состояние, подсказка и само выделение.
Обзор данных
Несколько серий в общей временной шкале.
Значения в выбранной точке
Подсказка связывает позицию на графике с датой и значениями.
Выделение периода
Подсветка обозначает выбранный диапазон; следующий шаг описан в документации.
История состояний.
Для истории состояний я разработал матричное представление: строки соответствуют сервисам, столбцы — временным участкам. Цвет ячейки показывает состояние, а подсказка раскрывает название сервиса, время и статус.
Два примера ChartArea: отличаются содержимым, сеткой и наличием легенды. Общая основа сохраняется.
Настройка компонента.
В примерах показано, как управлять подписями и сеткой, а для слоёв графического содержимого задавать масштабирование через Constraints. Это инструкция по подготовке макета, а не демонстрация адаптивной версии продукта.
Документацию построил вокруг устройства компонента, его поведения и вариантов. Отдельно описал сборку графика: настройку рабочей области, размещение содержимого и использование готового шаблона.
Настроить основу
Количество подписей и элементы окружения настраиваются внутри компонента.
Разместить содержимое
Графическое содержимое размещается в рабочей области; внутренним слоям задаётся Scale.
Собрать график
Готовый пример объединяет данные, оси, сетку и легенду.
Границы настройки.
Этот шаг я описал отдельно: настройка макета не равнозначна автоматическому построению диаграммы по данным.
У круговых диаграмм другой способ подготовки. Видимость сегментов задаётся в компоненте, а их пропорции настраиваются вручную через геометрию каждого сегмента.
Видимость сегментов и настройка их пропорций — два отдельных действия.
Что получилось.
Система включает общую основу для прямоугольных графиков, круговые диаграммы, индикаторы, числовые виджеты и историю состояний. Для компонентов подготовлены варианты, состояния взаимодействия и инструкции по настройке.