Контейнер страниц переключает отображения визуализаций и групп визуализаций (как страницы) в рамках отчета без его перезагрузки.

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

Внутри одного контейнера страниц возможно расположить другой контейнер страниц, что позволяет выстраивать уровни отображения визуализаций, как «Вкладка 1» и «Вкладка 2» на рисунке выше.

Перед началом настройки контейнера страниц убедитесь, что в настройках отчета включен переключатель «Режим группировки».

Порядок настройки:

• Заранее подготовьте компоненты, которые будут отображаться на страницах. Например, компоненты «Сводная таблица» и «Временные ряды».
• Добавьте сам компонент «Контейнер страниц», настройте его.
• Настройте группировку между компонентами.

Настройка компонента

Добавьте новый компонент и перейдите в его настройки. Выберите визуализацию «Контейнер страниц».

Вы можете создать несколько страниц при помощи кнопки «Добавить страницу» (1).

При необходимости удалите страницу нажатием на кнопку «Удалить» (2).

Раздел «Общие настройки»

Заполните поля:

• «Цвет активной страницы» — выберите цвет фона активной страницы;

• «Цвет неактивной страницы» — выберите цвет фона неактивной страницы;
• «Цвет текста активной страницы» — выберите цвет текста активной страницы;
• «Цвет текста неактивной страницы» — выберите цвет текста неактивной страницы;
• «Отступы контейнера» — установите значение отступов слева, сверху, справа, снизу контейнера;
• «Ширина ярлычков» — настройте необходимый тип ширины ярлычков:
  • «Авто» — установлено по умолчанию;
  • «% от ширины» — устанавливается процент от ширины компонента. Заполните значение ширины;
  • «Фиксированная, px» — устанавливается фиксированное значение в пикселях. Заполните значение ширины.

Раздел «Стиль страниц»

Выберите сперва страницу, стиль которой необходимо настроить. 

Заполните поля:

• «Вид страниц» — выберите в каком виде будут отображаться вкладки страниц. Вид страниц распространяется на все страницы, не только на ту, которую мы настраиваем:
  • «Ярлычки» — в виде ярлычков, установлено по умолчанию;
  • «Кнопки» — в виде кнопок.

• «Заголовок» — заполните заголовок выбранной страницы;
• «Заголовок из данных» — при необходимости можно настроить отображение заголовка из данных. Подробнее в разделе «Отображение показателей на вкладках страниц компонента»;
• «Ширина ярлычков» — настройте необходимый тип ярлычка и его значение;
• «Разрешить использование html-тегов» — подробнее в разделе «Отображение показателей на вкладках страниц компонента»;

Группировка компонентов

Предположим, что необходимо отобразить компонент «Временные ряды» на вкладке «Страница 1» компонента «Контейнер страниц». Для этого убедитесь, что открыта именно вкладка «Страница 1» и у компонента «Временные ряды» нажмите на кнопку «Добавить в группу».

После этого установите галочку в компоненте «Контейнер страниц» и нажмите на кнопку «Добавить в группу» в правом нижнем углу.

Теперь компонент «Временные ряды» отображается на вкладке «Страница 1».

Аналогично вы можете добавить несколько визуализаций на одну страницу. 

Далее перейдите на следующую страницу — «Страница 2». Нажмите на кнопку «Добавить в группу» у компонента «Сводная таблица», установите галочку у компонента «Контейнер страниц» и нажмите на кнопку «Добавить группу» в правом нижнему углу.

Компонент «Сводная таблица» отображается на вкладке «Страница 2» компонента «Контейнер страниц».

При переключении между страницами отображаются разные визуализации.

Два уровня страниц

Вы можете расположить компонент «Контейнер страниц» внутри другого компонента «Контейнер страниц». Делается это аналогично обычной настройке при помощи группировки.

Добавьте второй компонент. И нажмите на кнопку «Добавить в группу» у того компонента, который будет вложен внутрь другого.

Установите галочку в основном компоненте и нажмите на кнопку «Добавить в группу» в правом нижнем углу.

Компонент отобразится внутри другого компонента, например, как на рисунке ниже, внутри страницы 1.

Внутри любого из компонентов «Контейнер страниц» можно расположить другую визуализацию при помощи группировки. Главное, правильно установить галочку в нужной визуализации.

Разворачивание и сворачивание

В компоненте контейнер страниц возможно развернуть вложенный компонент на всю страницу экрана, а после свернуть.

Полноэкранный режим увеличивает рабочую область для комфортного просмотра детализированных данных. Он незаменим при демонстрации аналитики на совещаниях или при работе с таблицами, содержащими множество столбцов.

Для этого у нужного компонента нажмите на кнопку «Развернуть на весь экран».

Для сворачивания нажмите на кнопку «Свернуть».

Отображение показателей на вкладках страниц компонента

В настройках компонента «Контейнер страниц» предусмотрены полки, поля которых можно применять в качестве заголовков для вкладок страниц.

Ниже приведен пример настройки вкладок при помощи html таким образом, что на нем отображается заголовок, цветовой индикатор и процент.

Для этого перейдите в настройки компонента и выполните следующие действия:

1. Выберите страницу, которую необходимо настроить.
2. Добавьте вычисляемое поле в полку Значения и откройте его поле редактирования.
3. В поле редактирования введите необходимый код. Например, '<div style="display: flex; align-items: center; justify-content: center; text-align: center; height:100%;">' ||  ' %  мероприятий (результатов) ФП, по которым установлено не менее 6-ти КТ в  отчетном году ' || '<svg width="14" height="14"><circle cx="7" cy="7" r="7" fill="#46D88B"/></svg>' || ' 100%' || '</div>'. Сохраните код.
4. В разделе «Стиль страниц» выберите в поле «Заголовок из данных» ранее настроенное вычисляемое поле.
5. Включите переключатель в поле «Разрешить использование html-тегов».