Кнопка переключатель для виджета

[AnalyticWorkspace]

Часто возникает необходимость добавить кнопку переключатель для фильтрации данных в виджете на дашборде. К примеру, есть таблица с двумя показателями: “Сумма с НДС” и “Сумма без НДС”. В зависимости от выбранного значения в переключателе хотим отображать нужный график.

• Датасет:
  
  
• Результат:
  

Рассмотрим, как можно реализовать такое поведение через HTML виджет.

Подготовка датасета

В первую очередь необходимо создать модель, к которой будет применяться фильтрация.

Какие шаги необходимо выполнить:

1. Получить таблицу, где будет вынесен нужный показатель, а значения столбца с другим показателем приведены к null. Повторяем данную процедуру для каждого показателя.
   
   
2. Затем несколько таблиц объединяем в общий датасет через блок UNION.
   
3. Добавляем в модель вычисляемое поле, в котором определяем значение признака фильтрации.
   
   

Реализация HTML виджета

Создаем виджет с переключателями на модели из предыдущего пункта.

1. Вкладка HTML:
   создаем кнопки, в атрибуте data-sign тега <button> указываем значение признака из п.3 раздела “Подготовка датасета”

код HTML

<div class="container">
    <button class="btn" data-sign="НДС">
        С НДС
    <button>
    <button class="btn" data-sign="без НДС">
        Без НДС
    <button>
</div>

2. Вкладка CSS:
   Определяем стили для кнопок

код CSS

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    gap: 0;
}

.btn {
    flex: 1;
    width: 51%;
    margin: 0;
    background: rgb(238,174,202);
    padding: 1rem;
    border-radius: 5px;
    -webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
    transition: all .5s;
    font-size: 1.3rem;
}

.active {
    background-color: rgb(236, 112, 166);
    transform: translateY(10px);
}

.btn:hover {
    cursor: pointer;
    background-color: rgb(236, 112, 166);
}

3. Вкладка JS:
   Добавляем код для переключения кнопок. Самое интересное происходит при вызове функции

setFilter(signFieldName, btn.dataset.sign, "=");

setFilter применяет фильтрацию к модели, на которой построен виджет:

1. signFieldName - название поля в модели по которому осуществляется фильтрация.
2. btn.dataset.sign - значение признака фильтрации у текущей кнопки.
   Таким образом при нажатии на кнопку будет происходить фильтрация всех виджетов дашборда, построенных на нашей модели.

код JS

let isFirstRender = true;

function render() {
    const signFieldName = "calc__custom_sign"; //название поля с признаком
    const initialState = "НДС"; //начальное значение фильтра
    const btns = Array.from(document.querySelectorAll('.btn'));

    //установка начального значения
    const initState = () => {
        setFilter(signFieldName, initialState, "=");
        btns.forEach(btn => {
            if (btn.dataset.sign === initialState) {
                btn.classList.add('active');
            }
        })
    }
    isFirstRender ? (initState() & (isFirstRender = false)) : false;

    btns.forEach(btn => btn.addEventListener("click", 
        () => {
            btns.forEach(btnIter => {
                try {
                    btnIter.classList.remove('active');
                } catch(e) {
                    console.log("button is not active");
                }
            });
            btn.classList.add('active');
            setFilter(signFieldName, btn.dataset.sign, "=");
        }
    ));
}

Виджет диаграмма

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

Дашборд

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