Для создания пользовательских виджетов вы можете использовать сторонние 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
  Глобальная переменная:  _

• highcharts 10.3.3
  Глобальная переменная: Highcharts
  Подключенные модули Highcharts:

  • highcharts/highcharts-more

  • highcharts/modules/drilldown

  • highcharts/modules/map

  • highcharts/modules/solid-gauge

  • highcharts/modules/treemap

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

• moment js 2.24.0
  Глобальная переменная:  moment
  Библиотека не доступна в кастомных скриптах.

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

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

"@congresspolymedia/devextreme": "21.1.7-vispatch3",
"@opentelemetry/auto-instrumentations-web": "0.32.3",
"@opentelemetry/instrumentation": "0.40.0",
"@opentelemetry/sdk-trace-web": "1.14.0",
"ace-builds": "1.4.11",
"air-datepicker": "2.2.3",
"aspnet-webpack": "2.0.3",
"b64-to-blob": "1.2.19",
"brace": "0.11.1",
"class-transformer": "0.5.1",
"core-js": "3.1.3",
"dayjs": "1.11.10",
"deepmerge": "2.1.1",
"exceljs": "4.3.0",
"file-saver": "2.0.5",
"font-awesome": "4.7.0",
"highcharts": "10.3.3",
"hotkeys-js": "3.4.4",
"html2canvas": "1.0.0-alpha.12",
"intl": "1.2.5",
"inversify": "5.0.1",
"jquery": "2.2.4",
"jquery-ui": "1.12.1",
"knockout": "3.5.0",
"knockout-mapping": "2.6.0",
"localforage": "1.9.0",
"lodash": "4.17.11",
"moment": "2.24.0",
"oidc-client": "1.11.5",
"regenerator-runtime": "0.13.2",
"store": "2.0.12",
"tablesorter": "2.28.13",
"urijs": "1.19.1",
"uuid": "3.3.2"

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

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

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

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

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

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