Селектор

Селектор описывает набор контролов для проставления параметров чартам дашборда.

Чарт парсит параметр и применяет соответствующую фильтрацию по полю, с которым связан параметр (см. пример). Если селектору передаются числовые значения параметров, приведите их к строке или массиву строк. Это позволит избежать несогласованности отображения данных в разных состояниях виджета, например когда он просто отображается на дашборде и когда открыт на редактирование.

В результате выполнения вкладки Controls экспортируются данные для отрисовки элементов управления чарта — контролов. Вкладка доступна только для визуализаций График, Advanced-чарт, Таблица, Селектор.

Основное назначение контролов — изменение параметров и перерисовка чарта. Подробнее о параметрах чарта см. в описании вкладки Params.

Структура на вкладке ControlsСтруктура на вкладке Controls

На вкладке Controls в module.exports необходимо сформировать структуру:

module.exports = {
    controls: [
        {
            // структура одного контрола
        },
        ...
    ],
};

Структура контрола зависит от его типа.

Общие для всех контролов поляОбщие для всех контролов поля

Есть общие для всех типов контролов поля:

• type — тип контрола. Обязательное поле, тип значения строка из доступных значений: input, textarea, datepicker, range-datepicker, select, checkbox, line-break, button.

• param — название связанного параметра. Обязательное поле, тип значения строка. Доступно для всех типов контролов кроме line-break. При изменении значения такого контрола такое же значение будет у связанного параметра при следующей перерисовке чарта.

• updateOnChange — признак для инициации изменения его значения и перерисовки чарта. Значение можно выставить у каждого контрола, если нужна его перерисовка при изменении или, например, только у кнопки, тогда по клику будут применены все изменения контролов сразу. Необязательное поле, тип значения boolean. Доступно для всех типов контролов, кроме line-break.

• updateControlsOnChange — признак для инициации перерисовки всего блока контролов и изменения его значения, без перерисовки всего чарта целиком. Необязательное поле, тип значения boolean. Доступно для всех типов контролов, кроме line-break.

  Примечание

  На вкладке Sources будут запрошены только те источники, у которых выставлено свойство ui: true. Вызов метода Editor.getLoadedData() после такой перерисовки вернет данные только по перезапрошенным источникам.

• width — ширина контрола. Необязательное поле, тип значения строка или число из возможных значений css-свойств. Доступно для всех типов контролов, кроме button и line-break.

• hidden — признак, скрывать ли контрол со страницы. Необязательное поле, тип значения boolean.

• label — внешний заголовок селектора. Необязательное поле, тип значения строка. Доступно для всех типов контролов, кроме line-break.

• labelPlacement — расположение внешнего заголовка селектора. Необязательное поле, тип значения строка из возможных значений: top или left . Доступно для всех типов контролов, кроме checkbox, button и line-break.

• innerLabel — внутренний заголовок. Необязательное поле, тип значения строка. Доступно для всех типов контролов, кроме checkbox, button и line-break.

• required — признак, является ли контрол обязательным для заполнения. В этом случае задайте дефолтное значение связанного с контролом параметра, иначе контрол будет подсвечиваться красным, а в выборке для чарта будет использовано пустое значение параметра. Доступно для всех типов контролов, кроме line-break.

• accentType — настройка акцентного выделения контрола цветом. Необязательное поле, возможное значение строка info. Доступно для всех типов контролов, кроме button и line-break.

• operation — для контрола можно указать оператор через словарь OPERATIONS. После этого к параметру будет добавляться строка, определяющая тип оператора, например, селектор с оператором GT и значением 42 будет задавать параметр __gt_42. Доступно для всех типов контролов, кроме button и line-break.

Поле вводаПоле ввода

Контрол с type: "input" (однострочное) или type: "textarea" (многострочное).

Кроме общих полей контролов доступно:

placeholder — текст-заглушка, отображаемая, когда у поля нет содержимого. Необязательное поле, тип значения строка.

Календарь (одиночная дата)Календарь (одиночная дата)

Контрол с type: "datepicker". Значением связанного параметра должна быть строка с ISO датой или относительная дата.

Кроме общих полей контролов доступно:

• minDate — минимальное возможное значение в ISO. Необязательное поле, тип значения строка или null, например '2024-09-30'.
• maxDate — минимальное возможное значение в ISO. Необязательное поле, тип значения строка или null, например '2025-09-30'.

Календарь (интервал дат)Календарь (интервал дат)

Контрол с type: "range-datepicker". Если используется поле param вместо paramFrom и paramTo, то его значением должен быть интервал. Значением связанного параметра должна быть строка с ISO датой или относительная дата.

Кроме общих полей контролов доступно:

• paramFrom — название связанный параметр начала интервала (вместо поля param). Обязательное поле, тип значения строка в ISO формате или относительная дата.
• aramTo — название связанный параметр конца интервала (вместо поля param). Обязательное поле, тип значения строка в ISO формате или относительная дата.
• minDate — минимальное возможное значение в ISO формате. Необязательное поле, тип значения строка или null, например, '2024-09-30'.
• maxDate — минимальное возможное значение в ISO формате. Необязательное поле, тип значения строка или null, например '2025-09-30'.

СписокСписок

Контрол с type: "select".

Кроме общих полей контролов доступно:

• multiselect — признак, включен ли множественный выбор. Необязательное поле, тип значения boolean.

• searchable — признак, включена ли поисковая строка. Необязательное поле, тип значения boolean.

• content — содержимое выпадающего списка. Обязательное поле, тип массив объектов:

  [
      {
          title: "<string>",
          value: "<string>",
      },
      ...
  ],
  

  Где:

  • title — выводимое название опции. Обязательное поле, тип значения строка.
  • value — значение опции, при выборе устанавливается в качестве значения связанного параметра. Обязательное поле, тип значения строка. value обязательно должно быть строкой, т.к. все параметры приводятся к строке
    (true -> 'true', 42 -> '42'). Иначе значение параметра не совпадет ни с одним из перечисленных, а выглядеть будет как будто значение не выбрано.

ЧекбоксЧекбокс

Контрол с type: "checkbox".

Переход на новую строкуПереход на новую строку

Контрол с type: "line-break".

КнопкаКнопка

Контрол с type: "button".

Кроме общих полей контролов доступно:

• theme — тема кнопки. Необязательное поле. Тип значения — строка из возможных значений поля view компоненты Button из дизайн-системы Gravity UI. Значение по умолчанию — action. Пример внешнего вида.

• onClick — действие по клику на кнопку. Обязательное поле, тип объект:

  {
      action: "<string>",
      args: <object>,
  },
  

  Где:

  • action — тип действия, обязательное поле, возможные значения:

    • setParams — устанавливает новые переданных статичных в args параметров по клику, пример описания действия:

      onClick: {
          action: "setParams",
          args: {
              month: "May",
              region: "RU",
          }
      }
      

    • setInitialParams — устанавливает дефолтное значение параметров:

      • в превью, редактировании чарта/селектора — к значениям параметров на вкладке Params;
      • на дашборде — к значениям параметров в настройках чарта/селектора;
      • фолбэк — к значениям параметров на вкладке Params.

      пример описания действия:

      onClick: {
         action: "setInitialParams"
      }
      

  • args — статические аргументы. Обязательное поле, формат зависит от типа действия.

Доступные методыДоступные методы

Этот вид чарта поддерживает тот же функционал, что и таблица в визарде, есть возможность кастомизации стилей, настройки кросс-фильтрации, пагинации и т. п.

Добавление селектора на дашборд и в отчетДобавление селектора на дашборд и в отчет

Добавление Селектора JS в отчет аналогично добавлению обычного селектора в отдельную секцию со всеми селекторами.

При необходимости создайте алиасы для связи селектора с другими виджетами на дашборде.

Специальные параметрыСпециальные параметры

Чтобы в настройках параметров внешнего селектора указать относительную дату, используйте формат вида __relative_<знак><количество><единица измерения>.

ПримерыПримеры

• Селектор с возможными контролами
• Селектор с отображением второго селектора в зависимости от выбора значения первого
• Пример внешнего вида кнопки (выбор в селекторе)
• Пример с контролами в чарте