Node graph#

Node graph полезны, когда вам нужно визуализировать элементы, связанные друг с другом. Для этого для каждого элемента, который вы хотите визуализировать, отображаются окружности (или узлы), соединенные линиями (или ребрами). При визуализации используется схема направленного воздействия, которая позволяет расположить узлы в виде сети соединенных кругов.

Графики узлов отображают полезную информацию о каждом узле, а также взаимосвязи между ними, позволяя визуализировать сложные карты инфраструктуры, иерархии или схемы выполнения.\

Появление узлов и Edges также может быть настроен несколькими способами, включая цвета, рамки и тип линии.

Можно использовать Node graph, если вам нужно, чтобы показать:

• Топологий решение

• Сети

• Инфраструктура

• Организационные схемы

• Диаграммы критических путей

• Генеалогические древа

• Ментальные карты

Предусловия#

• Пользователь авторизован и имеет права на редактирование дашборда.

• Источник данных предоставляет два фрейма: nodes (узлы) и edges (ребра) с обязательными полями id, source, target.

• Данные соответствуют структуре, требуемой для визуализации Node graph.

• Визуализация «Node graph» доступна в списке типов панелей.

Правила эксплуатации#

• Используйте Node graph для визуализации связей между сущностями — не подходит для отображения табличных или временных данных.

• Обеспечьте корректную структуру данных: отдельные фреймы для узлов и ребер с обязательными полями id, source, target.

• Указывайте уникальные id — дубликаты приводят к ошибкам отображения.

• Используйте highlighted: true для выделения ключевых путей или инцидентных узлов.

• Применяйте arc__* поля для визуализации долей (например, загрузки) через цветные дуги.

• Ограничивайте количество узлов — при перегрузке включается постраничная загрузка через маркеры скрытых узлов.

• Используйте Grid view для анализа метрик без визуального шума от связей.

• Настройте Data links для навигации по узлам — с передачей контекста (например, id узла).

• Не используйте значки (icon) для критически важной информации — они заменяют текст.

Последовательность выполнения#

1. Убедитесь, что плагин визуализации «Node graph» установлен в продукте PVV.

2. Откройте дашборд визуализации в интерфейсе PVV.

3. Выберите тип визуализации «Node graph».

4. Настройте параметры конфигурации

   

5. Нажмите кнопку «Save Dashboard», чтобы отобразить визуализацию панели.

Поддерживаемые форматы данных#

Для создания графиков узлов вам понадобятся два набора данных: один, содержащий записи для отображаемых элементов (узлов), и один набор данных, содержащий записи для связей между этими элементами (ребрами).

Набор данных узлов#

Набор данных nodes должен содержать одно буквенно-цифровое поле ID, которое присваивает каждому элементу уникальный идентификатор. Визуализация также поддерживает другие поля параметров для заголовков, субтитров, основной и дополнительной статистики, информации о дуге, указывающей, какую часть границы круга нужно закрасить, деталей, цветов, значков, размера узла и индикаторов для выделения элементов. Для получения дополнительной информации и соглашений об именовании этих полей обратитесь к разделу Структура фрейма данных Nodes.

Пример#

Если поле значок содержит значение, оно отображается вместо заголовка и подзаголовка. Список доступных значков приведен в разделе Обзор значков.

Набор данных Edges#

Как и в наборе данных nodes, в наборе данных edges требуется одно уникальное поле идентификатора для каждой связи, содержащие исходный и целевой узлы ребра, то есть узлы, которые соединяет ребро. К другим необязательным полям относятся основные и дополнительные статистические данные, элементы контекстного меню, толщина линий, индикация выделения, цвета линий и конфигурации для преобразования соединения в пунктирную линию. Дополнительную информацию и правила присвоения имен этим полям.

Пример#

Если у узла отсутствуют пограничные соединения, он отображается сам по себе за пределами сети.

Требования к данным#

Node graph требует определенной формы данных для отображения их вершин и Edges. Это означает, что не каждый источник данных или запрос можно визуализировать с помощью этого графика. Если вы хотите использовать его в качестве разработчика источников данных, ознакомьтесь с разделом о data API.

Node graph состоит из вершин и Edges.

Узел отображается в виде круга. Узел может представлять приложение, службу или что-либо еще, что имеет значение с точки зрения приложения. Ребро отображается в виде линии, соединяющей два узла. Соединение может быть запросом, выполнением или каким-либо другим отношением между двумя узлами. Как узлы, так и ребра могут иметь связанные метаданные или статистику. Источник данных определяет, какая информация и значения отображаются, поэтому разные источники данных могут отображать значения разного типа или не отображать некоторые значения.

Навигация по Node graph#

Можно использовать перемещение, масштабирование и другие функции для навигации по графику узлов.

Pan#

Можно перемещать изображение, щелкнув за пределами любого узла или ребра и перетащив курсор мыши.

Zoom#

Используйте кнопки в правом нижнем углу, чтобы увеличить или уменьшить масштаб изображения. Можно использовать для этого колесико мыши или прокрутку с сенсорной панели, а также клавиши Ctrl или Cmd.

Hidden nodes#

Количество узлов, отображаемых в данный момент времени, ограничено для обеспечения приемлемой производительности визуализации. Узлы, которые в данный момент не видны, скрыты за интерактивными маркерами, которые показывают приблизительное количество скрытых узлов, соединенных определенным ребром. Можно щелкнуть по маркеру, чтобы развернуть график вокруг этого узла.

Grid view#

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

Чтобы отсортировать узлы, нажмите на статистику в условных обозначениях. Маркер рядом с названием параметра показывает, какой параметр в данный момент используется для сортировки, а также направление сортировки.

Нажмите на узел и выберите опцию Show in Graph layout, чтобы переключиться обратно в режим отображения графика и сфокусироваться на выбранном узле, чтобы показать его в контексте полного графика.

Параметры конфигурации#

Panel options#

В разделе Параметры панели на панели редактора панелей задайте основные параметры, такие как заголовок и описание панели, а также ссылки на панели. Дополнительные сведения смотри в разделе Настройка параметров панели.

Node graph options#

Используйте следующие опции для улучшения визуализации графика узлов.

• Zoom mode - выберите, как график узлов должен обрабатывать события масштабирования и прокрутки.

Nodes options#

В разделе Nodes options представлены настройки поведения узлов.

• Main stat unit - выберите, какая единица измерения будет отображаться в узлах графика.

• Secondary stat unit - выберите, какая единица измерения будет отображаться в узлах графика.

• Arc sections - укажите, какие поля определяют размер цветного круга вокруг узла, и выберите цвет для каждого из них. Можно добавить несколько полей.

Edges options#

В разделе Параметры ребер представлены настройки поведения ребер узлов.

• Main stat unit - выберите, какая единица измерения будет отображаться на ребрах графика.

• Secondary stat unit- выберите, какая единица измерения будет отображаться на ребрах графика.

Data links#

Ссылки на данные позволяют создавать ссылки на другие панели, сводные панели мониторинга и внешние ресурсы, сохраняя при этом контекст исходной панели. Можно создавать ссылки, содержащие название серии или даже значение, указанное под курсором. Для каждого канала передачи данных установите следующие параметры:

• Title

• URL

• Open in new tab

В графиках узлов некоторые поля данных могут иметь предварительно настроенные ссылки на данные. Чтобы добавить другую ссылку на данные в таких случаях, используйте переопределение поля.

Field overrides#

Data API#

Для корректного отображения этой визуализации требуется определенная форма данных, возвращаемых из источника данных.

Узловые графики, как минимум, требуют наличия фрейма данных, описывающего ребра графика. По умолчанию узловые графики будут вычислять узлы и любую статистику на основе этого фрейма данных. Опционально может быть отправлен второй фрейм данных, описывающий узлы, в случае необходимости отображения большего количества метаданных, относящихся к конкретному узлу. Можно установить frame.meta.preferredVisualisationType = 'NodeGraph' для обоих фреймов данных или назвать их узлами и ребрами соответственно, чтобы граф узлов отображался.

Структура фрейма данных Edges#

Обязательные для заполнения поля:

Необязательные поля:

Структура фрейма данных узлов#

Обязательные для заполнения поля:

Необязательные поля:

Результат#

После настройки и сохранения панели с визуализацией Node graph выполните следующие шаги для проверки корректности ее работы:

1. Проверка отображения узлов и связей
   Убедитесь, что:

   • Все узлы (nodes) отображаются в виде кругов.

   • Все ребра (edges) корректно соединяют узлы по полям source и target.

   • Узлы без связей отображаются отдельно от основной сети.

   • При наличии второго фрейма данных (nodes) — отображаются дополнительные метаданные (заголовки, статистика, значки и т.д.).

2. Проверка данных узлов

   • Убедитесь, что:

     • Поле id уникально для каждого узла.

     • Отображаются title и subtitle (если заданы).

     • Внутри узла отображается mainstat и secondarystat с правильными единицами измерения.

     • При наличии поля icon — значок отображается вместо текста.

     • Размер узла соответствует значению nodeRadius (если задано).

     • Цвет узла соответствует настройкам:

       • При использовании color — узел окрашен в заданный цвет.

       • При использовании arc__* — отображаются цветные сегменты по окружности.

     • Выделенные узлы (highlighted: true) визуально отличаются (например, жирной обводкой).

3. Проверка данных ребер

   • Убедитесь, что:

     • Каждое ребро имеет уникальный id.

     • Поля source и target ссылаются на существующие id узлов.

     • Отображаются mainstat и secondarystat на ребре (при наведении или в оверлее).

     • Толщина линии соответствует значению thickness.

     • Цвет линии соответствует полю color.

     • При включенном strokeDasharray — линия отображается как пунктир.

     • Выделенные ребра (highlighted: true) визуально отличаются.

4. Проверка навигации и взаимодействия

   • Убедитесь, что:

     • Работает панорамирование (перетаскивание графа мышью).

     • Работает масштабирование:

       • Колесиком мыши.

       • Кнопками в правом нижнем углу.

       • Сочетаниями клавиш (Ctrl/Cmd + колесико).

     • При достижении лимита отображаемых узлов — появляются маркеры скрытых узлов с указанием количества.

     • При клике на маркер — граф разворачивается, показывая дополнительные узлы.

5. Проверка режима сетки (Grid view)

   • Убедитесь, что:

     • Кнопка переключения в Grid view доступна.

     • В режиме сетки узлы отображаются в виде таблицы без ребер.

     • Узлы сортируются по выбранному параметру (mainstat, цвету дуги и т.д.).

     • Рядом с параметром в легенде отображается индикатор сортировки (↑/↓).

     • При клике на узел и выборе Show in Graph layout — происходит возврат к графу с фокусом на этом узле.

6. Проверка всплывающих подсказок и контекстного меню

   • Убедитесь, что:

     • При наведении на узел или ребро отображается всплывающая подсказка с mainstat и secondarystat.

     • При клике на узел или ребро открывается контекстное меню.

     • Поля с префиксом detail__* отображаются в меню.

     • Используется DisplayName (если задан) вместо технического имени поля.

7. Проверка единиц измерения

   • Убедитесь, что:

     • В узлах и ребрах применяются выбранные Main stat unit и Secondary stat unit.

     • Числовые значения отображаются с правильным форматированием (например, ms, %, GB).

8. Проверка цветовой схемы и стилизации

   • Убедитесь, что:

     • Цвета узлов и ребер соответствуют настройкам.

     • При использовании градиентов или динамической раскраски — цвет зависит от значения поля.

     • Переопределения (Field overrides) применяются корректно (например, изменение цвета по условию).

9. Проверка интерактивности и ссылок

   • Убедитесь, что:

     • При клике на узел или ребро:

       • Если настроена одна Data link — происходит переход по ссылке (один клик).

       • Если несколько — открывается меню выбора.

     • Контекст (например, id узла) передается в URL при использовании переменных.

     • Заголовки и URL ссылок отображаются корректно.

10. Проверка производительности и адаптивности

    • Убедитесь, что:

      • Граф загружается быстро даже при большом количестве узлов и ребер.

      • При уменьшении размера панели — элементы не накладываются.

      • На мобильных устройствах — граф остается интерактивным.

11. Проверка отображения в разных режимах

    • Убедитесь, что:

      • Визуализация корректно отображается в режиме редактирования и в режиме просмотра.

      • Все настройки сохраняются после перезагрузки дашборда.

      • При открытии в полноэкранном режиме — масштаб и расположение элементов корректны.

После выполнения всех проверок сохраните дашборд и убедитесь, что визуализация сохраняет настройки при повторном открытии. При необходимости скорректируйте параметры и повторите проверку.