Дашборды

Раздел «Дашборды» (панели мониторинга) предназначен для визуализации телеметрических данных, поступающих от IoT-устройств. Это основной инструмент аналитика и оператора, позволяющий создавать интерактивные экраны для наблюдения за процессами в реальном времени или анализа исторических данных.

Дашборды собирают информацию из различных источников (объектов, датчиков) и представляют её в виде графиков, индикаторов, таблиц и других виджетов.

Основные возможности:

Управление дашбордами:

• Создание и редактирование дашбордов

• Поиск по существующим дашбордам

• Навигация между дашбордами

Добавление виджетов:

Типы виджетов:

• На скриншоте показан виджет “Линейная диаграмма”

Настройки отображения виджета:

1. Основные параметры:

   • Имя виджета

   • Описание

2. Визуализация:

   • Показать рамку (вкл/выкл)

   • Цвет рамки

   • Количество знаков после запятой

   • Стиль отображения

   • Ширина линии

   • Радиус точки

3. Элементы графика:

   • Показать единицы измерения (вкл/выкл)

   • Показать легенду (вкл/выкл)

   • Параметры легенды

   • Расположение легенды (снизу/сверху/справа/слева)

4. Источник данных:

   • Показать все объекты

   • Фильтр по модели

   • Добавление нового источника данных

Назначение раздела:

Раздел “Дашборды” позволяет создавать информационные панели для:

• Мониторинга показателей устройств в реальном времени

• Визуализации исторических данных

• Создания аналитических отчетов

• Отображения ключевых метрик системы

• Контроля состояния IoT-решения

Создание дашборда

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

Заполните следующие поля:

• имя — наименование дашборда;

• описание - подробная характеристика дашборда, заполняется при необходимости.

Выберите тип:

• по объектам - в таком дашборде можно настроить отображение данных от объектов с разными моделями. В этом случае каждый виджет настраивается под конкретные объекты, в нем можно комбинировать данные от устройств с разными моделями. Также в дашборде этого типа можно создать виджеты, в которых отображена информация только по одному конкретному объекту.

• по моделям - в таком дашборде можно настроить отображение данных объектов с одинаковой моделью, выбираемой при создании дашборда. Дашборд этого типа удобно использовать, когда нужно контролировать параметры большого количества объектов с одинаковой моделью. В этом случае каждый виджет настраивается согласно конкретной модели, а затем к дашборду добавляются необходимые объекты - на каждом виджете дашборда появляются данные по всем выбранным объектам.

Также вы можете импортировать готовый дашборд в виде файла или по ссылке.

Дашборды с типом “По объектам”

При создании нового дашборда выберите тип По объектам и нажмите кнопку Создать. Перед вами откроется пустая рабочая область, на которой вы расположите виджеты - главные элементы дашборда.

1. Добавить новый виджет: Добавить виджет на рабочую область
2. Сохранить: Сохранить изменения дашборда
3. Автообновление включено/выключено: Если индикатор активен, значит автообновление включено и виджеты на дашборде обновляются в режиме реального времени при получении новых пакетов данных, если они соответствуют выбранному интервалу просмотра. Если индикатор неактивен, значит автообновление выключено и данные на виджете актуализируются только после обновления страницы или переключении между вкладками платформы
4. Интервал просмотра данных: Настроить период просмотра данных на дашборде
5. Настройки: Управлять автообновлением и включением сетки для рабочей области
6. Экспорт .json: Экспортировать дашборд в файл формата JSON
7. На весь экран: Открыть рабочую область на весь экран

Создание виджета

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

В дашборде можно создать не более 15 виджетов.

Выберите тип виджета. В зависимости от него формируются соответствующие поля формы для последующего заполнения.

Возможные типы виджетов:

• Линейная диаграмма - график изменения данных во времени. Такой виджет можно использовать для отслеживания температуры, потребления энергии и других показателей датчиков;

• Круговая диаграмма - круг, разделенный на сектора, где каждый сектор отражает долю (процент) значения одного аргумента относительно суммы значений всех аргументов, выбранных в качестве источника данных. Такой виджет позволяет быстро сравнить небольшой набор величин и оценить долю каждого значения по сравнению с другими секторами и со всей круговой диаграммой. Например, его можно использовать для отображения длительности работы оборудования в разных режимах, причин инцидентов по категориям;

• Спидометр - половинная кольцевая диаграмма, разделенная на сектора, где каждый сектор отражает один из уровней, заданных в модели для аргумента, выбранного в качестве источника данных. Такой виджет позволяет быстро увидеть, в каком из интервалов находится значение в пределах заданного диапазона. Например, его можно использовать для отображения скорости движения транспортного средства в пределах установленных ограничений;

• Проценты - кольцевая диаграмма, где по окружности цветом выделяется процентная доля заполнения для аргумента, выбранного в качестве источника данных. Такой виджет позволяет визуально оценить величину в интервале от 0 до 100 процентов. Например, его можно использовать для оценки зарядка аккумулятора, прогресса выполнения задачи, степени загруженности оборудования;

• Столбчатая диаграмма - график в виде вертикальных или горизонтальных столбцов, где высота или длина каждого столбца соответствует значению выбранного для него аргумента. Такой виджет удобно использовать для составления рейтинга, когда надо сравнить величины между собой и акцентировать внимание на лучших и худших показателях, или для сравнения значений по разным категориям;

• Счетчик - числовое значение аргумента с заданным цветом, который может меняться согласно уровням;

• LED - виртуальный светодиод, который сигнализирует о состоянии аргумента;

• Текст - обычный текст или текст в формате Markdown. Такой виджет позволяет добавить контекстную информацию и описания. Например, его можно использовать

  • для важных ссылок или полезных аннотаций;

  • для инструкций или рекомендаций по интерпретации различных виджетов, настройке параметров или выполнению конкретных действий на основе отображаемых данных;

  • для объявления о запланированном обслуживании или простое;

• Батарея, Колба, Термометр - схематичные изображения батареи, колбы и термометра соответственно, где цветом выделяется процентная доля заполнения для аргумента, выбранного в качестве источника данных;

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

• Переключатель представляет собой двухпозиционную кнопку для включения/выключения чего-либо;

• Кнопка предназначена для отправки любой команды объекта;

• Степпер, подобно ползунку, позволяет отправить команду с переменным числовым значением, но в данном случае это значение можно изменять только с заранее определенным шагом;

• Виджет Цвет отлично подходит для выбора точного цвета по схеме RGB - например, для установки цвета светодиода или лампы.

Далее можно указать имя и описание виджета. Имя отобразится вверху в окне виджета, описание - внизу.

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

Настройка	Где используется	Описание
Показать рамку	Все виджеты	Показать или скрыть рамку по периметру виджета
Цвет рамки	Все виджеты	Задать цвет рамки виджета
Количество знаков после запятой	Линейная диаграмма, Гистограмма, Круговая диаграмма, Спидометр, Столбчатая диаграмма, Счетчик, Батарея, Колба, Термометр	Выбрать количество знаков после запятой для данных виджета
Стиль	Линейная диаграмма	Выбрать стиль отображения данных виджета на графике: По умолчанию, Только точки, Закрашенная область, Пунктир, Закругленный
Ширина линии	Линейная диаграмма	Выбрать ширину линии для графика данных виджета: 1px, 2px, 4px, 8px
Радиус точки	Линейная диаграмма	Выбрать размер точек для графика данных виджета: Не показывать, 1px, 2px, 4px
Показать единицы измерения	Линейная диаграмма, Гистограмма, Круговая диаграмма, Спидометр, Столбчатая диаграмма, Счетчик, Батарея, Колба, Термометр	Показать или скрыть единицы измерения для данных виджета
Показать легенду	Линейная диаграмма, Гистограмма, Круговая диаграмма, Столбчатая диаграмма	Показать или скрыть легенду виджета
Параметры легенды	Линейная диаграмма, Гистограмма, Круговая диаграмма, Столбчатая диаграмма	Выбрать параметры, отображаемые в легенде виджета: MIN, MAX, FIRST, LAST, AVG, DIFF, SUM
Расположение легенды	Линейная диаграмма, Гистограмма, Круговая диаграмма, Столбчатая диаграмма	Задать расположение легенды виджета: Сверху, Справа, Снизу, Слева
Min, Max	Столбчатая диаграмма, Батарея, Колба, Термометр	Установить граничные значения для отображения данных виджета
Порядок вывода данных	Столбчатая диаграмма	Задать порядок сортировки данных виджета: По умолчанию - порядок зафиксирован и соответствует очередности добавленных источников данных; По возрастанию/По убыванию - порядок динамический и зависит от значений источников данных
Использовать значение из модели	Счетчик, Батарея, Колба, Термометр	Установить количество знаков после запятой для аргумента, выбранного в качестве источника данных виджета, таким, как оно задано в модели.

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

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

Каждый виджет напрямую связан с параметрами и командами конкретных объектов. Выбор источников данных и настройка их отображения происходит в разделе Данные виджета и зависит от типа виджета.

Линейная диаграмма

Выберите один или несколько интересующих вас объектов. Для каждого объекта задайте аргументы, значения которых будут использоваться в качестве источников данных. В списке возможных для выбора параметров доступны только те, у которых в модели указан тип данных Число. Суммарно по всем объектам можно добавить до 20 параметров. Также вы можете переименовать название источника данных и задать свой цвет для каждого аргумента.

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

Для настройки стиля графика перейдите в Настройки отображения виджета и воспользуйтесь опциями Стиль, Ширина линии и Радиус точки. В разделе Пример отображения отобразится график, соответствующий вашим настройкам. Когда закончите редактировать виджет, нажмите кнопку Сохранить.

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

Круговая диаграмма

Выберите один или несколько интересующих вас объектов. Для каждого объекта задайте аргументы, значения которых будут использоваться в качестве источников данных. В списке возможных для выбора параметров доступны только те, у которых в модели указан тип данных Число. Суммарно по всем объектам можно добавить до 20 параметров. Также вы можете переименовать название источника данных и задать свой цвет сектора для каждого аргумента.

Нажмите кнопку Создать. На дашборде появится новый виджет. Значение каждого аргумента на виджете визуально представлено в виде сектора круга.

При наведении на сектор круга он становится ярче, выводится название аргумента, его значение и сумма всех аргументов диаграммы.

Спидометр

Выберите один интересующий вас объект. Из списка параметров этого объекта определите тот аргумент, значения которого будут использоваться в качестве источника данных. В списке возможных для выбора параметров доступны только те, у которых в модели указан тип данных Число. Задайте функцию для расчета значения, выводимого на виджете:

• MIN/MAX - минимальное/максимальное значение этого аргумента за выбранный период;
• FIRST/LAST - первое/последнее значение этого аргумента за выбранный период;
• AVG - среднее значение этого аргумента за выбранный период;
• DIFF - разница между последним и первым значением этого аргумента за выбранный период;
• SUM - сумма всех значений этого аргумента, полученных на объекте за выбранный период. Вы можете включить режим Показывать крайние интервалы, тогда кольцевая диаграмма разделится на цветные сектора в соответствии с уровнями, заданными в модели для этого аргумента. Если данный режим выключен, то диаграмма полностью окрашена в цвет уровня, соответствующего отображаемому значению аргумента. Если у выбранного аргумента еще не заданы уровни в модели или вам не подходят границы интервалов и их цвет, нажмите кнопку **Перейти в модель и настроить уровни **. После сохранения новых уровней в модели цвета секторов на диаграмме также обновятся.

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на сектор спидометра он становится ярче и выводится информация об источнике данных и текущем интервале.

Проценты

Выберите один интересующий вас объект. Из списка параметров этого объекта определите тот аргумент, текущее значение которого будет использоваться в качестве источника данных. В списке возможных для выбора параметров доступны только те, у которых в модели указан тип данных Число и единица измерения Проценты. Вы можете задать свой цвет шкалы процентного заполнения и выбрать изображение, отображаемое над числовым значением аргумента.

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на виджет выводится информация об источнике данных.

Столбчатая диаграмма

Выберите один или несколько интересующих вас объектов. Для каждого объекта задайте аргументы, значения которых будут использоваться в качестве источников данных. В списке возможных для выбора параметров доступны только те, у которых в модели указан тип данных Число. Суммарно по всем объектам можно добавить до 20 аргументов. Также вы можете переименовать название источника данных и задать свой цвет столбца для каждого аргумента.

Нажмите кнопку Сохранить. На дашборде появится новый виджет. Значение каждого аргумента на виджете визуально представлено в виде столбца.

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

При наведении на столбцы выводится информация об источнике данных.

Счетчик

Выберите один интересующий вас объект. Из списка параметров этого объекта определите тот аргумент, текущее значение которого будет использоваться в качестве источника данных. В списке возможных для выбора параметров доступны только те, у которых в модели указан тип данных Число. Вы можете задать свой цвет для значения, отображаемого на виджете, либо выберите Использовать цвета из уровней, тогда значение будет окрашено в цвет, соответствующий интервалу. Если у выбранного аргумента еще не заданы уровни в модели или вам хочется изменить их цвет, нажмите кнопку Перейти в модель и настроить уровни. После сохранения новых уровней в модели цвет значения на виджете также обновится.

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на виджет выводится информация об источнике данных.

LED

Выберите один интересующий вас объект. Из списка параметров этого объекта определите тот аргумент, текущее значение которого будет использоваться в качестве источника данных. В списке возможных для выбора параметров доступны только те, у которых в модели указан тип данных Логический. Вы можете включить Показать значение, тогда под изображением светодиода будет отображаться значение Да/Нет. По умолчанию зеленый цвет светодиода соответствует Да, красный - Нет. Если данное цветовое решение или текст не подходит под вашу задачу, включите Использовать цвета из уровней. Если у выбранного аргумента еще не заданы уровни в модели или вам хочется изменить их цвет и отображаемый текст, нажмите кнопку Перейти в модель и настроить уровни. После сохранения новых уровней в модели цвет и соответствующий текст состояния светодиода на виджете также обновится.

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

При наведении на виджет выводится информация об источнике данных.

Текст

Данный виджет - единственный, в котором не нужно выбирать ни объект, ни аргумент. Просто напишите свой текст в обычном формате или используйте разметку Markdown.

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

Батарея, Колба, Термометр

Настройка этих трех виджетов одинакова. Выберите один интересующий вас объект. Из списка параметров этого объекта определите тот аргумент, текущее значение которого будет использоваться в качестве источника данных. В списке возможных для выбора параметров доступны только те, у которых в модели указан тип данных Число. Вы можете задать свой цвет заполнения на виджете, либо выберите Использовать цвета из уровней, тогда значение будет окрашено в цвет, соответствующий интервалу. Если у выбранного аргумента еще не заданы уровни в модели или вам хочется изменить их цвет, нажмите кнопку Перейти в модель и настроить уровни. После сохранения новых уровней в модели цвет значения на виджете также обновится.

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

Ниже представлены примеры трех виджетов.

По умолчанию заполнение на виджете происходит из расчета, что 0 - минимальное значение, 100 - максимальное. Если реальные граничные значения другие, установите их в настройках отображения. В этом случае процент заполнения цветом на виджете рассчитывается от ваших значений.

Ползунок

Выберите один интересующий вас объект. Из списка команд этого объекта определите команду, в данных которой будет отправляться числовое значение, заданное положением ползунка. Задайте начальную и конечную границу ползунка, а также значение по умолчанию. Также вы можете установить шаг, с которым будет перемещаться ползунок.

В списке возможных для выбора команд присутствуют только те, у которых в модели задан строго один параметр, значение которого можно указать непосредственно при отправке команды. Для создания такого параметра необходимо при создании команды в модели объявить его в фигурных скобках {{param_name}}. Такие же команды используются в качестве источников данных для виджетов Степпер и Цвет

Нажмите кнопку Сохранить. На дашборде появится новый виджет.

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

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

Переключатель

Выберите один интересующий вас объект. Из списка команд этого объекта определите команды, которые будут отправляться при включении и выключении переключателя. Вы можете задать названия состояний, которые будут отображаться рядом с переключателем после отправки соответствующей команды.

Дашборды с типом “По моделям”

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

Объекты в данном типе дашборда выбираются как общий список, применяемый ко всем виджетам, то есть при настройке виджетов в источнике данных нет выбора объектов - можно переходить сразу к настройке аргументов.

Выбор источника данных виджета Линейная диаграмма для дашборда с типом По объекту	Выбор источника данных виджета Линейная диаграмма для дашборда с типом По модели

Возможные типы виджетов:

• Линейная диаграмма;

• Круговая диаграмма;

• Столбчатая диаграмма;

• Текст.

Добавьте виджеты, нажмите на кнопку Выбрать объекты и кликните по карточкам объектов, данные и команды которых используются в дашборде. Обратите внимание, что в списке отображаются объекты с моделью, выбранной при создании дашборда.

Нажмите на кнопку Сохранить, на всех виджетах дашборда отобразятся данные по выбранным объектам за заданный период времени.

Настройка легенды

Для виджетов Линейная диаграмма, Гистограмма, Круговая диаграмма и Столбчатая диаграмма доступна легенда, которая помогает при просмотре данных на дашборде. Чтобы ее добавить и настроить, при редактировании виджета перейдите в раздел Настройки отображения и включите Показать легенду. В легенде всегда отображаются используемые в визуализации источники данных. При просмотре данных нажмите на один из таких источников, и его визуализация исчезнет с виджета. Повторное нажатие вернет источник данных на виджет. Так вы можете оставить на виджете только один или несколько конкретных источников данных для удобства анализа.

Также в разделе Настройки отображения виджета можно добавить в легенду параметры, рассчитываемые для каждого источника данных:

• MIN/MAX - минимальное/максимальное значение этого аргумента за выбранный период;
• FIRST/LAST - первое/последнее значение этого аргумента за выбранный период;
• AVG - среднее значение этого аргумента за выбранный период;
• DIFF - разница между последним и первым значением этого аргумента за выбранный период;
• SUM - сумма всех значений этого аргумента, полученных на объекте за выбранный период.

Просмотр данных на дашборде

После того как вы добавите все необходимые виджеты, можно приступить к оформлению удобного внешнего вида дашборда:

• чтобы переместить виджет, наведите курсор на его верхнюю часть с именем и передвиньте виджет в нужное место с помощью drag-and-drop;

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

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

• Редактировать - редактирование виджета. После нажатия на кнопку справа откроется форма для настройки его параметров;
• Скачать .xlsx - скачивание данных из виджета за выбранный период;

• На весь экран - отображение виджета на весь экран. Чтобы выйти из полноэкранного режима, нажмите на кнопку в правом верхнем углу или клавишу Esc;

• Создать копию - копирование виджета. При этом копируется вся заполненная по виджету информация с тем отличием, что у имени добавляется надпись ”(копия)”;

• Удалить - удаление виджета. После нажатия появится модальное окно для подтверждения действия.

После того как дашборд примет вид, удобный для просмотра данных, приступайте к выбору временного интервала. Данная настройка позволяет выбрать период времени, за который необходимо отобразить данные на дашборде. Есть ряд пресетов, которые можно использовать сразу (15 минут назад, 1 час назад, Сегодня и т.д.), либо выберите конкретную дату и время из календаря. Обратите внимание, что между началом и концом периода может быть интервал не более одного месяца. При переключении между дашбордами выбранный период сохраняется. В случае обновления страницы интервал-пресет также сохранится, а интервал, заданный через календарь, сменится на дефолтный пресет Сегодня.

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

Если за выбранный интервал времени не поступало данных от устройства, виджеты будут пустыми.

Виджеты Круговая диаграмма, Спидометр, Проценты, Столбчатая диаграмма, Счетчик, LED, Батарея, Колба, Термометр показывают только последнее полученное значение в заданном интервале. Предположим, что виджет Проценты получал сегодня следующие значения:

• 26 % в 13:05;
• 28 % в 13:10;
• 30 % в 13:15. Тогда при выборе интервала времени 13:00 - 13:05 вы увидите значение 26 %, при выборе интервала времени 13:00 - 13:10 вы увидите значение 28 %, при выборе интервала времени 13:00 - 13:15 вы увидите значение 30 %.

Также доступны следующие настройки отображения:

• Автообновление - при включенном чекбоксе автообновления виджеты на дашборде обновляются в режиме реального времени при получении новых пакетов данных, если они соответствуют выбранному интервалу просмотра. Если чекбокс выключен, то данные на виджете актуализируются только после обновления страницы или переключении между вкладками платформы;

• Показывать сетку - отображать или отключить сетку за виджетами на дашборде.

Импорт/экспорт

В дашбордах также есть функция импорта/экспорта, для того чтобы делиться своими дашбордами с настроенными виджетами.

Импорт

Импорт производится при создании дашборда.

После импорта дашборда не забудьте настроить объекты и аргументы в виджетах.

Источники для импорта:

• файл

• ссылка, например, через raw-режим просмотра файлов на GitHub

Экспорт

Для экспорта модели нажмите на кнопку Экспорт .json.