Часто бывает нужно дать пользователю возможность самому выбирать, какие колонки выводить в таблицу. Например, у вас есть 30 разных метрик. Если вывалить их все сразу — таблица станет нечитаемой. Намного удобнее, когда человек может просто отметить галочками 3–5 нужных показателей и смотреть только их.
В Insight такую гибкую настройку можно легко собрать всего на трех виджетах:
- Любой фильтр с мультивыбором — это то, куда пользователь будет кликать. Подойдут обычные чекбоксы, кнопочный фильтр или фильтр. В нем просто будет перечень всех ваших метрик.
- Конструктор бизнес-логики — это «мозг» связки. Он будет подхватывать выбранные в фильтре метрики и передавать их дальше.
- Конструктор таблиц — это и есть та самая итоговая таблица. Она принимает команду от бизнес-логики, сама динамически перестраивает свои колонки и оставляет на экране только то, что отметил пользователь.
Получается очень удобно: интерфейс не перегружен, а аналитик смотрит только то, что ему важно прямо сейчас.
Чтобы всё завелось, нам понадобятся два разных датасета.
-
Датасет 1: Список метрик (для фильтра)
В нем должен быть простой перечень: названия метрик и их уникальные ID. -
Важный лайфхак: всегда настраивайте фильтрацию именно по ID (айдишникам), а не по текстовым названиям. В тексте легко пропустить случайный пробел или опечатку, из-за чего фильтр просто сломается. ID — это гарантия, что всё отработает четко.
Этот датасет мы цепляем к нашему кнопочному фильтру. Когда пользователь нажимает на кнопку, фильтр отправляет ID метрики в конструктор бизнес-логики, а тот уже открывает нужный слот в таблице.
Датасет 2: Основные данные (для самой таблицы)
Это наш главный массив данных, который пойдет в конструктор таблиц. Например, в строках у вас будут категории товаров, а в колонках — те самые метрики с числовыми значениями. Именно этой таблицей мы и будем динамически управлять, скрывая или показывая нужные столбцы-метрики.
Теперь давайте свяжем первый датасет с кнопочным фильтром, чтобы он начал передавать данные. В настройках датасета создаем Измерение (оно будет выводить текстовые названия метрик для пользователя) и Метрику с уникальными ID. Эту же метрику с ID можно использовать для сортировки, чтобы кнопки в фильтре выстроились ровно в том порядке, в каком вам нужно. Далее заходим в настройки самого виджета Кнопочный фильтр и ставим галочку на Мультиселект. Теперь пользователь сможет выбирать несколько колонок сразу. Затем переходим в раздел Переменные, находим нашу метрику с ID и выставляем для нее режим Пишет.
Как проверить, что всё работает? Просто кликните по паре кнопок в фильтре на дашборде и загляните в хранилище . Если там появились ID выбранных вами метрик — поздравляю, первый этап пройден, фильтр успешно отдает данные!
Далее перейдем к настройке конструктора таблиц. К слову, подробную инструкцию и видео по работе с этим виджетом вы всегда можете найти в нашей вики. Из каталога виджетов выбираем конструктор таблиц, берем наш второй датасет и подключаем его к таблице. В настройках виджета нужно выбрать измерение, например, категории товара, которые будут выводиться построчно, а также активировать для отображения все тридцать наших метрик.
Далее внутрь таблицы мы вставляем виджет строка, а уже в саму строку добавляем виджет разметка. В этой разметке мы делим экран на две области: первая пойдет под категории товаров, а вторая — под конструктор бизнес-логики. Для первой области можно задать ширину один фрейм (1fr), а для второй, например, три фрейма (3fr). Затем в первую область разметки мы вставляем виджет значение и выводим в нем категории продуктов, а во вторую область помещаем конструктор бизнес-логики. Важный нюанс: для виджета значения с категорией продуктов лучше сразу задать минимальную ширину, например, пятнадцать процентов от ширины экрана (15 vw), чтобы первая колонка всегда оставалась одинаковой и аккуратной.
Далее перейдем к настройке конструктора бизнес-логики, или сокращенно КБЛ. Подключать его к датасету не нужно. Сначала переходим в настройки слоев КБЛ и добавляем туда тридцать слоев. Названия этих слоев должны строго совпадать со значениями ID метрик, которые приходят из кнопочного фильтра.
После этого заходим в настройки сетки КБЛ и в поле количества колонок тоже указываем тридцать штук. Напоследок переходим в раздел переменных КБЛ, находим там встроенную переменную slot_names и настраиваем ее в режим Читает. В качестве источника выбираем переменную из кнопочного фильтра, например mtrc_id. Теперь КБЛ будет автоматически считывать выбранные ID и показывать нужные колонки.
Теперь снова возвращаемся к нашей таблице. В каждый настроенный слот конструктора бизнес-логики нам нужно вставить виджет значение и вывести в нем соответствующую метрику. Чтобы сделать это было проще, есть два пути. Первый — активировать в настройках КБЛ опцию Показать все слоты. Но метрик у нас много, целых тридцать штук, поэтому на экране начнется путаница и можно легко ошибиться. Вторым способом пользоваться гораздо удобнее: вы просто по очереди нажимаете на нужную метрику в кнопочном фильтре. На дашборде сразу открывается именно тот слот КБЛ, который вам нужен в данный момент. Вы спокойно вставляете в него виджет значение и выбираете нужную метрику. И еще один полезный совет: для каждого такого виджета значения лучше сразу прописать минимальную ширину, чтобы все будущие колонки в таблице выглядели аккуратно и были одного размера.
Настройка завершена)