Добавление новых JS библиотек

Owned by Эдуард Столяр, created
Last updated: дек. 15, 2023
2 min read

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

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

  • Добавление библиотеки всегда осуществляется на сервере.

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

     

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

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

     

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

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

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

 

 

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

В платформу уже включен ряд популярных 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 мин.

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

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