HTML-кнопка “Назад” и “Сбросить все фильтры”

Примеры и гайды
1

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

Скрытие отображения “Группы строк” в настройках виджета на информационной панели убирает доступ к кнопке “Назад”.

Встает вопрос, как убрать “шумовые” элементы и при этом сохранить функциональность?

Рассмотрим два способа.

Способ 1. Закрываем “шумовые” элементы баннером картинкой.

  1. Создадим системный виджет “Изображение”, но файл выбирать не нужно. Вместо этого в настройках фона выберем заливку белым цветом (или любым другим под цвет фона виджета).
  2. Зададим нужный размер изображения.
  3. На вкладке “Структура” перенесем изображение выше самого виджета.

  1. Перейдем в режим предпросмотра и убедимся, что виджет отображается корректно и при необходимости скорректируем расположение изображения.

Способ 2. Создаем html-кнопку “Назад”.

Второй способ предполагаем скрытие “Группы строк” с виджета вместе с родной кнопкой и создание кастомной html-кнопки с функцией сброса фильтра.

  1. Создаем новый виджет, выбираем модель, на которой построен основной виджет.
  2. Переключаем вид виджета на “HTML”.
  3. Заполняем вкладки HTML, CSS, JS следующим кодом.

HTML

<div class="container">
    <div class="clear-filter">❮ ❮</div>
</div>

CSS

.clear-filter {
    cursor: pointer;
    color: black;
    border: 1px solid #5594e8;
    width: 35px;
    height: 20px;
    border-radius: 5px;
    padding-inline: 7px;
}

JS

function render() {
    const clearElement = document.querySelector('.clear-filter');
    clearElement.addEventListener('click', (event) => {
        setFilter('field', [], '=');
    });
}

В JS-коде в строке setFilter('field', [], '='); заменяем название поля 'field' на код поля, по которому необходимо сбросить фильтр.

При необходимости можно с помощью CSS-стилей создать свой авторский дизайн кнопки.

  1. Далее нажимаем кнопку “Выполнить”, в правой части экрана отобразиться кнопка.
  2. Если ее внешний вид устраивает, нажимаем “Опубликовать”. После можно разместить данный виджет на дашборде как обычный, например, поверх основного виджета. Как и в примере с изображением, необходимо разместить кнопку поверх виджета.

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

Итоговый результат:

:white_check_mark: Раз мы научились создавать кнопку сброса фильтра для отдельного виджета, ничего не мешает создать одну большую кнопку, которая бы сбрасывала все примененные фильтры на дашборде. Такая кнопка может быть полезной, если на вашем дашборде используется много фильтров, с которыми пользователи активно взаимодействуют.

HTML-кнопка “Сброс всех фильтров”

Действия аналогичные:

  1. Создаем новый виджет, выбираем модель.

:exclamation: Использование фильтров на дашборде, созданных на нескольких моделях, будет ограничением такой реализации.

  1. Переключаем вид виджета на “HTML”.
  2. Заполняем вкладки HTML, CSS, JS следующим кодом:

HTML

<div class="container">
    <div class="clear-filter">✕ Сбросить все фильтры</div>
</div>

CSS

.clear-filter {
    cursor: pointer;
    color: black;
    border: 1px solid #5594e8;
    width: 180px;
    height: 20px;
    border-radius: 5px;
    padding-inline: 7px;
}

JS

function render() {
    const clearElement = document.querySelector('.clear-filter');
    clearElement.addEventListener('click', (event) => {
        setFilter('field_1', [], '=');
        setFilter('field_2', [], '=');
        setFilter('field_3', [], '=');
    });
}

В JS-коде в функциях setFilter() нужно перечислить коды полей, по которым необходимо сбросить фильтры.

Если в фильтрах установлены значения по умолчанию, то необходимо указать эти же значения и здесь в квадратных скобках. Например,

setFilter('field_1', [‘Северо-Западный федеральный округ’], '=');

  1. Дальше последовательность действий аналогична предыдущему примеру.

:exclamation: Использование такой кнопки фактически сбрасывает примененные фильтры и графики в результате будут перестроены, но отображение системных фильтров останется неизменным.