Сравнение версий

Ключ

  • Эта строка добавлена.
  • Эта строка удалена.
  • Изменено форматирование.

...

  1. По максимуму используйте встроенный в платформу функционал и минимизируйте количество JS кода. Через JS можно получить доступ во внутренние структуры системы, у которых нет обратной совместимости и они могут быть изменены в любой момент.

  2. Минимизируйте в JS коде обращение к DOM элементам, стилям, CSS классам. Эти сущности могут измениться в любой момент.

  3. Используйте JS API, везде где это возможно. Например, для получения данных виджета можно залезть во внутренние структуры объектов, а можно вызвать функцию API. Вызывайте функцию. Мы поддерживаем обратную совместимость всех функций. Либо обязательно предупредим, если поведение функции изменилось.

  4. Пишите валидный JS/HTML код, чтобы избежать undefined behavior, в противном случае, после обновления поведение может измениться.

  5. Читайте особенности обновления, где мы предупреждаем о вероятных проблемах, которые выявили.

  6. Если много JS/Python кода, то нужно тестировать результат после обновления. Мы используем для этого автоматическое сравнение скриншотов дашбордов инструментом BackstopJS.

...

  1. Для установки фильтра в виджет не нужно добавлять еще один виджет «Фильтр», чтобы повлиять на третий виджет. Достаточно установить фильтр (visApi.setFilterSelectedValues(id виджет, где происходит клик , ...)) в виджет, где происходит клик. Например, если есть карта, в которой вы хотите повлиять на другой виджет, то в коде карты нужно написать visApi.setFilterSelectedValues(id карты, ...).

  2. Для показа числа из данных (рисунок 1) не нужно использовать «Пользовательский» виджет. Достаточно использовать виджет «Текст», в форматировании которого можно взять числа из данных и отобразить нужным образом. Например: @array[0] + @array[1]. Таким образом, мы взяли и сложили первые два числа из данных. В форматировании можно использовать JS код. Например, Math.round(@array[2]). Округление третьего числа из данных.

    Image RemovedImage Added

     Рисунок 1

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

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

  5. Не использовать кастомные ajax запросы в коде для установки фильтра, получения данных и т.д., так как это может привести к непредвиденным последствиям, после которых платформа может работать нестабильно. Для таких случаев есть функция visApi(), в которой есть все необходимые функции: установка фильтра, запрос данных по виджету, drilldown, drillup, подписка по установке фильтра и многое другое.

  6. Старайтесь не добавлять JS файлы от разных версий одних и тех же библиотек, в противном случае возможны конфликты.

  7. Когда вы используете одинаковую логику для многих виджетов, то лучше создать JS файл на сервере, в файле которого создать глобальную функцию, например (window.myAdditionalLogic = function (parameter1, parameter2, ...) {}), и внутри нее написать всю логику. А в самом виджете просто вызывать эту функцию с нужными параметрами (window.myAdditionalLogic()).

  8. Не используйте в коде виджета получение данных от другого виджета (visApi.getWidgetData()), если эти полученные данные далее не будут использоваться. Лишние запросы нагружают систему.

  9. Для получения выбранных значений в виджете, используйте функцию visApi.getSelectedValues() вместо visApi.getWidgetData(). Так как visApi.getWidgetData() запрашивает данные с сервера, таким образом, идет излишняя нагрузка на сервер.

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

  11. Не добавляйте в проекты JS и CSS библиотеки, если вы не уверены в том, что они ничего не поломают на существующем проект.

  12. Старайтесь всегда добавлять в проект только минифицированные файлы JS или CSS. Обычно они называются с приставкой min. Например, tippy.min.js.

  13. Не добавляйте в проекты большие JS и CSS файлы, так как каждый добавленный JS или CSS файл увеличивает время загрузки дашборда.

  14. Старайтесь не оставлять в коде вывод в консоль (console.log, console.warn, console.error и т.д.). Если при работе дашборда возникают какие-то проблемы и разработчикам приходится исследовать код виджетов, то в консоль будет сыпаться лишняя информация, которая затруднит поиск проблемы.

  15. Не используйте стандартные виджеты («Гистограма», «Текст», «Круговая» и т.д.), чтобы отрисовать кастомный виджет (например, Dragon D3). Вместо этого используйте «Пользовательский виджет». У стандартных виджетов есть свои настройки (легенда, ось Х, ось Y, настройки фильтра, таблицы и так далее), которые, скорее всего, не будут влиять на отрисованный виджет Дракон, к примеру. Тут спорный момент. Конечно, ничего не мешает подстроить Дракон таким образом, чтобы он использовал настройки другого типа виджета. Но лучше использовать свой «пользовательский» виджет, который будет добавляться на дашборды с помощью Ribbon.

  16. Не редактируйте код виджета «Фильтр», чтобы отрисовать заголовок слева. Вместо этого добавьте слева виджет «Текст».

  17. Старайтесь использовать фильтры в настройках «OLAP», где это необходимо. Не используйте вместо этого виджет «Фильтр», который будет вынесен за границы дашборда, и применять фильтры по умолчанию.

  18. Старайтесь не редактировать название серий в коде виджета. Вместо этого редактируйте название серии в настройках виджета «Настройка серий и сегментов».

  19. Старайтесь не добавлять все файлы JS и CSS сторонней библиотеки. Внимательно читайте документацию и используйте только те файлы, которые необходимы для работы библиотеки. Обычно такие файлы лежат в папке dist. Например, для библиотеки Leaflet достаточно добавить только dist/leaflet.js, все остальные файлы не нужны (например, папка src) – это исходные файлы.