2.3.2.2 Виджет «График»

Виджет «График» предназначен для визуализации временных рядов, метрик производительности и аналитических данных, полученных из внешних источников.

Окно конфигурации виджета разделено на три функциональные области:

• Предпросмотр (центр) - отображает график с текущими настройками. Изменения применяются автоматически (см. Рисунок 14, область 1);
• Источник данных (снизу) - панель для выбора типа данных и настройки запроса (см. Рисунок 14, область 2);
• Панель настроек (справа) - параметры внешнего вида графика, осей и легенды (см. Рисунок 14, область 3).

Рисунок 14 - Окно конфигурации виджета «График»

2.3.2.2.1           Настройка источника данных

В нижней панели необходимо выбрать тип источника данных: Данные GIMS или Внешние данные.

2.3.2.2.1.1               Данные GIMS.

Панель содержит следующие настройки:

• Источник данных - выбор типа данных (например, Метрики производительности - для отображения данных мониторинга объектов инвентарной базы);
• Кнопка «Метрики» - открывает форму выбора метрик для конкретного класса объектов, которые необходимо отобразить на графике (см. Рисунок 15);

Примечание. На графике можно отображать только одну метрику.

• Кнопка «Очистить» - для сброса текущих настроек.

Рисунок 15 - Виджет «График». Выбор метрик

2.3.2.2.1.2                 Внешние данные.

Данный режим используется для построения графиков на основе прямых SQL-запросов к сторонним базам данных. Панель настроек включает следующие параметры (см. Рисунок 16):

• Источник данных* - выбор подключения (обязательное поле);

Примечание. Подключения настраиваются в глобальном меню «Источники данных». В настоящий момент поддерживается только СУБД PostgreSQL.

• Размер выборки*- ограничение максимального количества загружаемых строк (10, 100, 200, 500 и 1000);
• SQL-запрос - поле для ввода текста запроса. Пример запроса,

SELECT
  generate_series(1, 10) as id,
  (random() * 1000)::numeric(10,0) AS price1,
  (random() * 1200)::numeric(10,0) AS price2,
  (random() * 800)::numeric(10,0) AS price3

• Кнопка «Выполнить» - запускает выполнение запроса и загружает данные для предпросмотра. Система автоматически интерпретирует полученные данные для построения графика. Если визуализация не соответствует ожиданиям, рекомендуется проверить параметры отображения или добавить в запрос сортировку (ORDER BY). В случае ошибки в запросе или отсутствия данных будет выведено соответствующее сообщение.
• Кнопка «Подробнее» - становится активной после успешного выполнения запроса. Открывает таблицу с полученными данными для предварительного просмотра;
• Кнопка «Подсказка» (?) - открывает справочную информацию и рекомендации по написанию запросов.

Рисунок 16 - Виджет «График».  Настройка внешних данных

2.3.2.2.2           Параметры отображения

Правая панель содержит следующие блоки параметров настройки внешнего вида. В верхней части панели выберите Тип графика: Линейный график или Столбчатая диаграмма.

2.3.2.2.2.1                 Общие настройки (для всех типов графиков)

• Блок «Общие»
• • Название и Описание - текстовые поля для ввода названия виджета и пояснения к графику;
  • Прозрачный фон - переключатель, управляющий заливкой фона виджета. Если включен, фон виджета становится прозрачным.
• Блок «Легенда» (см. Рисунок 17)
• • Видимость - включение/отключение легенды;

Рисунок 17 - Виджет «График». Панель инструментов. Блок «Легенда»

• Блок «Оси» (см. Рисунок 18)
• • Показать линии сетки - переключатель;
  • Ось X / Ось Y - настройки для каждой оси:
  • • Атрибут (только для Внешних данных) - выбор из выпадающего списка колонки данных;
    • Подпись - текст названия оси;
    • Наклон меток по оси - угол поворота подписей значений (-90°, -45°, 0°, 45°, 90°);
    • Размер - размер шрифта подписей.

Рисунок 18 - Виджет «График». Панель инструментов. Блок «Оси»

• Блок «Пороговые значения» (см. Рисунок 19)

Позволяет добавить пороговые значения (трешхолды) в виде горизонтальных линий или зон.

• • Кнопка «+ Добавить порог» - позволяет ввести значение и выбрать цвет;
  • Показать пороги - выбор режима (Выкл, Как линия, Как Зона).

Рисунок 19 - Виджет «График». Панель инструментов. Блок «Пороговые значения»

2.3.2.2.2.2                 Специфичные настройки: Линейный график

• Блок «Стиль графика» (см. Рисунок 20)
• • Тип линии - выбор типа (Линия, Пунктир, Штрих);
  • Плавность линий - включение сглаживания линий;
  • Толщина линии - настройка толщины (слайдер 0–10);
  • Прозрачность заливки - настройка интенсивности закрашивания области под графиком (слайдер 0–100).

Рисунок 20 - Виджет «График». Панель инструментов. Блок «Стиль графика»

2.3.2.2.2.3                 Специфичные настройки: Столбчатая диаграмма

• Блок «Общие»

 Дополнительно доступна настройка:

• • Ориентация - выбор расположения диаграммы (Вертикально / Горизонтально).

• Блок «Столбцы» (см. Рисунок 21)
• • Тип диаграммы:
  • • Группированная - столбцы расположены рядом;
    • Сложенная - столбцы накладываются друг на друга (накопление);
    • 100% сложенная - значения приводятся к 100% шкале.
  • Ширина столбца, Толщина линии, Прозрачность заливки - параметры визуализации.

Рисунок 21 - Виджет «График». Панель инструментов. Блок «Столбцы»

2.3.2.2.3             Панель управления и область предпросмотра

В верхней части окна конфигурации расположена панель инструментов с элементами управления (см. Рисунок 22):

• Показать таблицу - ползунок для переключения в режим просмотра таблицы, содержащей список отображенных на графике данных (используется для отладки);
• Отображаемый диапазон - настройка периода времени по умолчанию (конкретные даты или относительный период: «Последние X минут/часов/дней») ;

Примечание. Масштаб временной шкалы также можно изменять прокруткой колесика мыши при зажатой клавише Ctrl. Настройка регулирует только графики с осью X, содержащей дату или временную метку.

•   - Кнопка «Обновить» - перезагрузка данных на графике;
• Интервал обновления - частота автообновления данных (от 5 секунд до 1 дня);
• Кнопка «Отменить» - выход без сохранения;
• Кнопка «Сохранить» - предоставляет два варианта сохранения:
• • Сохранить и продолжить настройку - применяет параметры, оставляя окно конфигурации открытым;
  • Сохранить и вернуться в дашборд - сохраняет настройки и выполняет переход к просмотру страницы.

Рисунок 22 - Панель управления виджета «График»

В области предпросмотра графика пользователю доступны следующие функции навигации и элементы управления:

• Всплывающие подсказки - при наведении курсора на точку графика отображается точное значение данных (см. Рисунок 23);

Рисунок 23 - Виджет «График». Режим предпросмотра. Всплывающие подсказки

• Полноэкранный режим (см. Рисунок 24) - активируется нажатием на кнопку «Увеличить» в меню действий «»;

В полноэкранном режиме доступны следующие инструментов:

• • Выбор отображаемого диапазона - для временных осей;

Примечание. Масштаб временной шкалы также можно изменять прокруткой колесика мыши при зажатой клавише Ctrl.

• •  - Кнопка «Вернуть» - возвращает график к исходному временному диапазону;
  •  - Кнопка «Обновить» - выполняет перезагрузку данных на графике;
  • «Х» - Кнопка «Закрыть» - завершает полноэкранный режим и возвращает график в макет страницы.

Рисунок 24 - Виджет «График». Полноэкранный режим