Селектор

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

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

Примечание

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

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

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

Структура на вкладке 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_<знак><количество><единица измерения>.

Примеры

Предыдущая
Advanced-чарт
Следующая
Все визуализации