Skip to content

Візуалізація даних та інтерфейсів в Node-RED.

Мета: Набуття навичок практичного застосування засобів розробки інтерфейсів та компонентів візуалізації даних в середовищі Node-RED для ефективного представлення результатів обробки.

Виконавець:
студент групи КН-41
Кривобоков Микита Олександрович

Завдання

  1. Використовуючи попередній потік, спроектуйте інтерфейс для візуалізації значень з послідовності повідомлень, а також зведеної аналітики (рисунок 1.0).
  2. Для побудови візуалізації значень з послідовності повідомлень використайте вузол Chart і налаштуйте його відповідним чином (рисунок 1.0, пункт 1).
  3. Потрібен Bar chart з діапазоном значень 0 - 86400 (1 доба в секундах).
  4. Інтерфейс повинен надавати можливість:
    • контролювати процес оновлення даних з підпотоку (рисунок 1.0, пункт 2);
    • очищати значення в графіку за потреби (рисунок 1.0, пункт 4) — для цього достатньо надіслати [] в якості корисного навантаження в повідомленні, спрямованому до вузла Chart.
  5. Для конвертування даних з контракту повідомлень у необхідний контракт для вузла Chart використовуйте вузол Function.
  6. Примітка: кожен стовпчик графіку складається з { topic: <Значення вісі Y>, payload: <Значення вісі X> }.
  7. Візуалізуйте загальну аналітику.
  8. Її необхідно отримувати з порта No2 підпотоку, додатково форматуючи відповідно до одиниць вимірювання.
  9. Для цього використайте вузол Gauge з різними видами оформлення:
    • Загальна тривалість тривог (total duration) — Donut (рисунок 1.0, пункт 5).
    • Середня тривалість тривоги (average duration) — Gauge (рисунок 1.0, пункт 8).
    • Мінімальна та максимальна тривалості тривоги (min duration, max duration) — Level (рисунок 1.0, пункти 6-7).
  10. Інтерфейс повинен надавати можливість скидання статистики (рисунок 1.0, пункт 3).
  11. Загальну кількість тривог виведіть у вигляді тексту поруч з попередніми показниками (на зображенні прикладів не наведено).
  12. Можливість контролю над обробкою повідомлень з підпотоку реалізуйте за рахунок прапорця в контексті потоку (рисунок 1.0, пункт 2).
  13. При розгортанні потоку необхідно ініціалізовувати значення в компонентах інтерфейсу (відповідність пункту 2 і змінної середовища, як приклад) і скинути попередні дані, які залишились з минулої сесії розгортання (як приклад, вузол Inject).
  14. В момент надходження нового набору даних і активному прапорцю контролю над потоком обробки необхідно повідомити користувача про оновлення даних за допомогою Notification.
  15. В якості заголовку вузол використовує msg.topic, а в якості повідомлення — msg.payload.
  16. Візуальне оформлення інтерфейсу налаштуйте відповідно до прикладу (рисунок 1.1).
  17. Складіть звіт про виконану роботу, в якому необхідно перелічити використані вузли та їх застосування.
  18. А також, опишіть в деталях перший пункт з даного переліку завдань.

Хід роботи

Реалізація UI

Завдання передбачає використання потоку з попередньої практичної з додаванням компонентів UI, нижче наведено кінцеву реалізацію під-потоку UI «Статистика»:

UI components

Пояснення: Основним зміни, порівняно з прикладом, полягають у організації компонентів та типі топіків, які приймаються даним під-потоком.

Які topic приймає UI?

Поточна реалізація передбачає прийняття topic типу двох видів: stats — статистика загалом, chart — конкрентно для графіка.

Принцип роботи даного під-потоку заключається в тому що існує змінна isEnableStatisticInterface, яка або true що значить виводити в інтерфейс статистику, або false — не виводити.

Чистота і узгодженість

Враховуючи що завдання не вимагало потокової обробки повідомлень, було вирішено виводити дані в UI з одноразового джерела №2. Таким чином повідомлення що генеруються періодично — виводяться в дебаг, а вже готові дані відправляються в статистику — поточна ідея розподілу джерел.

Незначні зміни в інших під-потоках

Збір статистики

Саме з цього компонента ми "перехоплюємо" дані ще до того як вони пройдуть обробку даних і гуманізацію для компонентів індикаторів, і використовуємо цей проміжковий результат напряму для графіка.

Початковий UI

Результат 1

  • Одноразова обробка набору

Результат 2

  • Накопичення даних

alt text

  • Скинули дані індикаторів

alt text

  • Скинули дані графіка

Нові компоненти представлені у цій практичній є доволі простими та переважно мають лише налаштування для кастомізації так, як, вони напряму стосуються візуального вигляду на сайті.

Висновок

Набутті навичоки практичного застосування засобів розробки інтерфейсів та компонентів візуалізації даних в середовищі Node-RED передбачають ефективне представлення результатів обробки за допомогою компонентів UI.