Для создания пользовательских виджетов вы можете использовать сторонние JS библиотеки. С их помощью можно создавать интерактивные виджеты, такие как календари, карты и многое другое. Например, с помощью библиотеки можно создать слайдер, который позволит пользователям выбирать диапазон значений. Рассмотрим добавление библиотеки на примере Range Slider.

Добавление библиотеки

1. Найдите нужную библиотеку и скачайте её:
   
   

   Open

   

    

2. Откройте папку /var/lib/visiology/v3/dashboard-viewer/customjs на сервере и скопируйте в нее *.js файл.
   По возможности необходимо добавлять*.js-файл с меньшим размером файла (как правило, обозначается «...min»), например:
   
   

   Open

   

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

    

3. Если есть CSS, скопируйте его в эту же папку, при этом CSS должен быть без картинок.
   CSS следует использовать с осторожностью. Например, если в нем указано: table {color:red}, то все таблицы могут стать красными. Названия функций и т.п. в библиотеке должны быть уникальными.

4. Чтобы использовать добавленные библиотеки, необходимо перезапустить Visiology Designer.

После перезагрузки вы сможете создать пользовательский виджет:

Open

Open

Список подключенных библиотек

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

Список включенных в платформу библиотек:

• air-datepicker 2.2.3
  Использование: $(...).datepicker()
  Библиотека не доступна в кастомных скриптах.

• devextreme 21.1.7
  DevExtreme доступен через jQuery в коде виджета, поэтому подключение не рекомендуется.

• font-awesome 4.7.0
  Использование: <i class="fa fa-cog"></i>

• jquery 2.2.4
  Глобальные переменные: $, jQuery

• jquery-ui 1.12.1
  Использование: $(...).resizable()
  Подключенные модули:

  • resizable

  • draggable

• lodash 4.17.11
  Глобальная переменная:  _

• ECharts 5.6.0
  Глобальная переменная: echarts

• hotkeys-js 3.4.4
  Глобальная переменная: hotkeys

Полный список библиотек, используемых на дашборде:

"@congresspolymedia/devextreme": "21.1.7-vispatch5",
"@opentelemetry/auto-instrumentations-web": "0.32.3",
"@opentelemetry/instrumentation": "0.40.0",
"@opentelemetry/sdk-trace-web": "1.14.0",
"@types/knockout.mapping": "2.0.41",
"ace-builds": "1.4.11",
"air-datepicker": "2.2.3",
"b64-to-blob": "1.2.19",
"brace": "0.11.1",
"class-transformer": "0.5.1",
"color": "4.2.3",
"core-js": "3.38.1",
"dayjs": "1.11.10",
"decimal.js": "10.5.0",
"deepmerge": "2.1.1",
"echarts": "5.6.0",
"exceljs": "4.3.0",
"file-saver": "2.0.5",
"font-awesome": "4.7.0",
"hotkeys-js": "3.4.4",
"inversify": "6.0.3",
"jquery": "2.2.4",
"jquery-ui": "1.12.1",
"knockout": "3.5.1",
"knockout-mapping": "2.6.0",
"lint-staged": "13.0.3",
"lodash": "4.17.21",
"oidc-client": "1.11.5",
"regenerator-runtime": "0.13.2",
"urijs": "1.19.1",
"uuid": "3.3.2"

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

Смотрите также

Создание пользовательского виджета

Время чтения: 1 мин.

Нужна дополнительная помощь?

Свяжитесь с технической поддержкой.