Виджеты

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

image

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

Отображение виджетов

Виджеты отображаются:

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

Для создания нового виджета необходимо:

  1. Открыть окно Добавить виджет одним из способов:

  2. Выбрать тип виджета.

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

  4. Выбрать отображаемые метрики.

  5. Задать параметры, специфичные для конкретного типа виджета.

Для удаления image или редактирования image виджета достаточно задержать на нём курсор мыши и нажать появившуюся соответствующую иконку.

Порядок отображения и размеры виджетов можно менять перетаскиванием.

Публикация виджетов на внешних сайтах

Виджеты могут быть встроены на внешние сайты.

embedded graph

Чтобы опубликовать виджет на внешнем сайте, необходимо сделать следующее:

  1. Навести курсор мыши на виджет.

  2. Нажать на появившуюся иконку image(код виджета).

  3. Скопировать и вставить HTML-код на нужную страницу.

При публикации виджета на внешнем сайте виджет сохраняет:

  • период отображения данных (на графиках),

  • заголовок (подпись).

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

Следующие виджеты поддерживают встраивание:

Настройки виджета

Встраиваемые виджеты могут быть настроены после генерации HTML кода.

Пример исходного кода встраиваемого виджета
<iframe
    src="http://192.168.1.48/embedded-widgets/html/chart.html?token=71656418-8912-42a3-b151-3b91c63df707&height=160&width=250&linkUrl=http://saymon.info/&linkName=SAYMON&duration=3600000&metricCaption=roundTripAverage"
    height="215" width="262" frameborder="0">
</iframe>

Список параметров виджета:

  • src – ссылка на метрику;

  • height – высота компонента iframe. Не влияет на высоту графика;

  • width – ширина компонента iframe. Не влияет на ширину графика;

  • frameborder – ширина рамки вокруг виджета в пикселях.

Список параметров ссылки:

  • token – API токен для доступа к метрике без дополнительной аутентификации. Более подробно о генерации и использовании этого токена можно прочитать в документации REST API;

  • height – высота графика. Не влияет на высоту виджета;

  • width – ширина графика. Не влияет на ширину виджета;

  • linkUrl – ссылка под графиком;

  • linkName – текст ссылки;

  • duration – период отображения данных на графике в миллисекундах;

  • metricCaption – подпись метрики на графике. Может не совпадать с названием метрики на объекте.

С помощью файла конфигурации Web-приложения можно настроить значения параметров linkUrl и linkName по умолчанию.

Примеры использования виджетов

Примеры настройки виджетов с использованием различных полей.

Примеры использования отсчёта

Текущий момент

Настроено выполнение скрипта, в результате которого возвращается сегодняшняя дата - метрика date - со значением 15.

При настройке отображения минимального значения за неделю:
image
Результат = значение метрики (15) - Период (7 дней). На виджете отобразится дата 8.

Календарный период

Настроено выполнение скрипта, в результате которого возвращается сегодняшняя дата - метрика date *- со значением *15 (четверг).

При настройке отображения минимального значения за неделю:
image
Результат = значение метрики (15) - Период (понедельник). На виджете отобразится дата 12.

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

Проверяется доступность сайта сенсором Ping, и в качестве одной из метрик возвращается packetsReceived (количество полученных пакетов). На виджете можно отобразить среднее количество полученных пакетов за предыдущую неделю, переключив слайдер За предыдущий период в положение ДА и указав отступ "1".

image

Пример использования словаря

Датчик открытия двери присылает значения "1" и "0", что соответствует её открытию и закрытию соответственно. Для отображения состояния двери в человекочитаемом виде можно добавить виджету словарь со значениями:

  • 0 = Дверь закрыта,

  • 1 = Дверь открыта.

Датчик зафиксировал открытие двери и прислал значение "1". Эти данные сравниваются со словарём:

image

На виджете будет отображено значение Дверь открыта.

Пример использования многострочного текста

При выполнении HTTP-запроса возвращается метрика body (тело ответа), значение которой - многострочный текст.

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

image