По умолчанию кросс-фильтрация для графиков с одним уровнем иерархии работает так, что при выборе определенного значения на виджете остается только выбранный элемент. И для того, чтобы вернуться назад к первоначальному виду необходимо нажать на кнопку 
Первоначальный вид графика:
После фильтрации:
Скрытие отображения “Группы строк” в настройках виджета на информационной панели убирает доступ к кнопке “Назад”.
Встает вопрос, как убрать “шумовые” элементы и при этом сохранить функциональность?
Рассмотрим два способа.
Способ 1. Закрываем “шумовые” элементы баннером картинкой.
- Создадим системный виджет “Изображение”, но файл выбирать не нужно. Вместо этого в настройках фона выберем заливку белым цветом (или любым другим под цвет фона виджета).
- Зададим нужный размер изображения.
- На вкладке “Структура” перенесем изображение выше самого виджета.
- Перейдем в режим предпросмотра и убедимся, что виджет отображается корректно и при необходимости скорректируем расположение изображения.
Способ 2. Создаем html-кнопку “Назад”.
Второй способ предполагаем скрытие “Группы строк” с виджета вместе с родной кнопкой и создание кастомной html-кнопки с функцией сброса фильтра.
- Создаем новый виджет, выбираем модель, на которой построен основной виджет.
- Переключаем вид виджета на “HTML”.
- Заполняем вкладки 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-стилей создать свой авторский дизайн кнопки.
- Далее нажимаем кнопку “Выполнить”, в правой части экрана отобразиться кнопка.
- Если ее внешний вид устраивает, нажимаем “Опубликовать”. После можно разместить данный виджет на дашборде как обычный, например, поверх основного виджета. Как и в примере с изображением, необходимо разместить кнопку поверх виджета.
- Если на дашборде есть настроенные вручную связи, необходимо также создать связь между виджетом с кнопкой и основным виджетом.
Итоговый результат:
Раз мы научились создавать кнопку сброса фильтра для отдельного виджета, ничего не мешает создать одну большую кнопку, которая бы сбрасывала все примененные фильтры на дашборде. Такая кнопка может быть полезной, если на вашем дашборде используется много фильтров, с которыми пользователи активно взаимодействуют.
HTML-кнопка “Сброс всех фильтров”
Рассмотрим 2 способа. Первый, также как и предыдущий пример, основан на создании html-кнопки, а второй - вызывает обновление страницы, что ведёт к сбрасыванию всех фильтров к значениям по умолчанию.
Способ 1. Создаем html-кнопку “Сброс всех фильтров”.
Действия аналогичные предыдущему примеру:
- Создаем новый виджет, выбираем модель.
Использование фильтров на дашборде, созданных на нескольких моделях, будет ограничением такой реализации.
- Переключаем вид виджета на “HTML”.
- Заполняем вкладки 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', [‘Северо-Западный федеральный округ’], '=');
- Дальше последовательность действий аналогична предыдущему примеру.
Использование такой кнопки фактически сбрасывает примененные фильтры и графики в результате будут перестроены, но отображение системных фильтров останется неизменным.
Способ 2. Обновление страницы по стандартной кнопке
-
На информационной панели создаем кнопку как системный виджет и размещаем её на дашборде
-
В настройках кнопки на панели “Вид” справа задаем ее внешний вид (размер, фон, настройки шрифта, обводку, название кнопки, можно добавить иконку)
-
В разделе “Открытие ссылки” указываем ссылку на дашборд (внутреннюю или публичную)
-
Снимаем галку с опции “Открывать в новом окне”
Кнопка готова, теперь при нажатии на неё дашборд будет обновляться, имитируя обновление страницы браузера. В результате чего все фильтры будут сбрасываться в значения по умолчанию