[Документация Yandex Cloud](../../../../index.md) > [Yandex DataLens](../../../index.md) > Чарты > [Чарты в Editor](../index.md) > [Типы визуализаций](index.md) > Селектор # Селектор Селектор описывает набор [контролов](#controls) для проставления параметров чартам дашборда. Чарт парсит параметр и применяет соответствующую фильтрацию по полю, с которым связан параметр (подробнее в примере). Если селектору передаются числовые значения параметров, приведите их к строке или массиву строк. Это позволит избежать несогласованности отображения данных в разных состояниях виджета, например когда он просто отображается на дашборде и когда открыт на редактирование. {% note info %} Во время первоначальной отрисовки дашборда параметры всех чартов остаются статичными. Динамическое изменение параметров возможно только при последующем изменении селекторов. {% endnote %} В результате выполнения вкладки [Controls](../tabs.md#controls) экспортируются данные для отрисовки элементов управления чарта — контролов. Вкладка доступна для всех [типов визуализаций](index.md). Основное назначение контролов — изменение параметров и перерисовка чарта. Подробнее о параметрах чарта читайте в описании вкладки [Params](../tabs.md#params). ## Структура на вкладке Controls {#controls} На вкладке **Controls** в module.exports необходимо сформировать структуру: ```js module.exports = { controls: [ { // структура одного контрола }, ... ], }; ``` Структура контрола зависит от его типа. ## Общие для всех контролов поля {#common-fields} Есть общие для всех типов контролов поля: * `type` — тип контрола. Обязательное поле, тип значения строка из доступных значений: `input`, `textarea`, `datepicker`, `range-datepicker`, `select`, `checkbox`, `line-break`, `button`. * `param` — название связанного параметра. Обязательное поле, тип значения строка. Доступно для всех типов контролов кроме `line-break`. При изменении значения такого контрола такое же значение будет у связанного параметра при следующей перерисовке чарта. * `updateOnChange` — признак для инициации изменения его значения и перерисовки чарта. Значение можно выставить у каждого контрола, если нужна его перерисовка при изменении или, например, только у кнопки, тогда по клику будут применены все изменения контролов сразу. Необязательное поле, тип значения boolean. Доступно для всех типов контролов, кроме `line-break`. * `updateControlsOnChange` — признак для инициации перерисовки всего блока контролов и изменения его значения, без перерисовки всего чарта целиком. Необязательное поле, тип значения boolean. Доступно для всех типов контролов, кроме `line-break`. {% note info %} На вкладке [Sources](../tabs.md#sources) будут запрошены только те источники, у которых выставлено свойство `ui: true`. Вызов метода [Editor.getLoadedData()](../methods.md#get-loaded-data) после такой перерисовки вернет данные только по перезапрошенным источникам. {% endnote %} * `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`. ## Поле ввода {#input} Контрол с `type: "input"` (однострочное) или `type: "textarea"` (многострочное). Кроме общих полей контролов доступно: `placeholder` — текст-заглушка, отображаемая, когда у поля нет содержимого. Необязательное поле, тип значения строка. ## Календарь (одиночная дата) {#calendar} Контрол с `type: "datepicker"`. Значением связанного параметра должна быть строка с ISO датой или [относительная дата](../tabs.md#relative-date). Кроме общих полей контролов доступно: * `minDate` — минимальное возможное значение в ISO. Необязательное поле, тип значения строка или `null`, например `'2024-09-30'`. * `maxDate` — минимальное возможное значение в ISO. Необязательное поле, тип значения строка или `null`, например `'2025-09-30'`. ## Календарь (интервал дат) {#calendar-interval} Контрол с `type: "range-datepicker"`. Можно использовать либо `param`, либо `paramTo` и/или `paramFrom`. При наличии `paramTo` и/или `paramFrom` поле `param` не будет работать. Значением связанного параметра должна быть строка с ISO датой или относительная дата. Если используется поле `param` вместо `paramFrom` и `paramTo`, то его значением должен быть [интервал](../tabs.md#interval). Кроме общих полей контролов доступно: * `paramFrom` — название связанного параметра начала интервала (вместо поля `param`). Обязательное поле, тип значения строка в ISO формате или [относительная дата](../tabs.md#relative-date). * `paramTo` — название связанного параметра конца интервала (вместо поля `param`). Обязательное поле, тип значения — строка в ISO-формате или [относительная дата](../tabs.md#relative-date). * `minDate` — минимальное возможное значение в ISO формате. Необязательное поле, тип значения строка или `null`, например, `'2024-09-30'`. * `maxDate` — минимальное возможное значение в ISO формате. Необязательное поле, тип значения строка или `null`, например `'2025-09-30'`. ## Список {#select} Контрол с `type: "select"`. Кроме общих полей контролов доступно: * `multiselect` — признак, включен ли множественный выбор. Необязательное поле, тип значения boolean. * `searchable` — признак, включена ли поисковая строка. Необязательное поле, тип значения boolean. * `content` — содержимое выпадающего списка. Обязательное поле, тип массив объектов: ```json [ { title: "", value: "", }, ... ], ``` Где: * `title` — выводимое название опции. Обязательное поле, тип значения строка. * `value` — значение опции, при выборе устанавливается в качестве значения связанного параметра. Обязательное поле, тип значения строка. `value` обязательно должно быть строкой, т.к. все параметры приводятся к строке (`true` -> `'true'`, `42` -> `'42'`). Иначе значение параметра не совпадет ни с одним из перечисленных, а выглядеть будет как будто значение не выбрано. ## Чекбокс {#checkbox} Контрол с `type: "checkbox"`. ## Переход на новую строку {#switch-line} Контрол с `type: "line-break"`. ## Кнопка {#button} Контрол с `type: "button"`. Кроме общих полей контролов доступно: * `theme` — тема кнопки. Необязательное поле. Тип значения — строка из [возможных значений](https://preview.gravity-ui.com/uikit/?path=/story/components-inputs-button--view) поля `view` компоненты `Button` из дизайн-системы Gravity UI. Значение по умолчанию — `action`. [Пример внешнего вида](https://datalens.yandex/nvkfwnekf9xy9?tab=jEx#Селектор%20с%20кнопкой%2C%20выбор%20внешнего%20вида). * `onClick` — действие по клику на кнопку. Обязательное поле, тип объект: ```json { action: "", mode: "", args: , }, ``` Где: * `action` — тип действия, обязательное поле, возможные значения: * `setParams` — устанавливает новые переданных статичных в `args` параметров по клику, пример описания действия: ```json onClick: { action: "setParams", args: { month: "May", region: "RU", } } ``` * `setInitialParams` — устанавливает дефолтное значение параметров: * в превью, редактировании чарта/селектора — к значениям параметров на вкладке **Params**; * на дашборде — к значениям параметров в настройках чарта/селектора; * фолбэк — к значениям параметров на вкладке **Params**. пример описания действия: ```json onClick: { action: "setInitialParams" } ``` * `mode` — определяет стратегию обновления параметров, возможные значения: * `replace` (по умолчанию) — перезаписывает все существующие параметры новыми `args`; * `merge` — бъединяет новые `args` с текущими существующими параметрами. * `args` — статические аргументы. Обязательное поле, формат зависит от типа действия. ## Добавление селектора на дашборд и в отчет {#add-to-dash-report} [Добавление Селектора JS](../add-js-selector.md) в отчет аналогично добавлению обычного селектора в отдельную секцию со всеми селекторами. При необходимости создайте алиасы для связи селектора с другими виджетами на дашборде. ## Специальные параметры {#spec-params} Чтобы в настройках параметров внешнего селектора указать [относительную дату](../tabs.md#relative-date), используйте формат вида `__relative_<знак><количество><единица измерения>`. ## Примеры {#examples} * [Селектор с возможными контролами](https://datalens.yandex/nvkfwnekf9xy9?tab=jEx#Селектор%20с%20возможными%20контролами) * [Селектор с отображением второго селектора в зависимости от выбора значения первого](https://datalens.yandex/nvkfwnekf9xy9?tab=jEx#Селектор%20с%20отображением%20второго%20селектора%20в%20зависимости%20от%20выбора%20значения%20первого) * [Пример внешнего вида кнопки (выбор в селекторе)](https://datalens.yandex/nvkfwnekf9xy9?tab=jEx#Селектор%20с%20кнопкой%2C%20выбор%20внешнего%20вида) * [Пример с контролами в чарте](https://datalens.yandex/nvkfwnekf9xy9?tab=jEx#Селекторы%20(контролы)%20в%20чарте)