3 интересных способа использования контейнеров на дашбордах Tableau
Прежде чем мы расскажем три интересных способа использования контейнеров Tableau, давайте сначала разберемся, зачем вообще использовать контейнеры на дашбордах. Во-первых, контейнеры — это один из способов работы с рабочими листами на дашборде. Контейнеры помогают упорядочить и стандартизировать размер и макет рабочих листов. Во-вторых, при просмотре дашбордов на экранах и устройствах разного размера плавающие объекты могут быть искажены. Использование контейнеров позволяет разработчикам фиксировать расположение элементов дашборда независимо от того, где и как вы просматриваете дашборд.
Контейнеры — это объекты дашборда, которые позволяют упорядочивать рабочие листы, помещаемые на дашборд. Контейнеры могут быть как горизонтальными, так и вертикальными — вы можете либо складывать рабочие листы друг на друга, либо располагать их бок о бок. Вы также можете вставлять контейнеры разных типов друг в друга — далее мы рассмотрим несколько примеров.
Начнем с основ: помещение листа в контейнер. В приведенном ниже примере мы поместим два пустых объекта в горизонтальный контейнер . Ключевыми индикаторами того, что пустой объект помещается внутрь контейнера, являются толстая синяя линия вокруг родительского контейнера и заполняемая серая область. Когда оба объекта размещены, дважды кликаем на вкладку одного из объектов, чтобы выбрать родительский контейнер. Вы можете увидеть пунктирную линию между двумя объектами внутри контейнера.
В примере ниже вы можете увидеть тот же пример, что и выше, но с вертикальным контейнером .
После того, как мы поместили объекты в нужные контейнеры, мы можем контролировать не только размеры и характеристики отдельных объектов, но также размеры и характеристики контейнеров. В примере с горизонтальным контейнером можно либо изменить размер каждого объекта до определенной ширины, либо кликнуть на стрелку вниз родительского контейнера и выбрать «Distribute Contents Evenly», чтобы распределить содержимое равномерно. Также можно добавить цвет фона к каждому объекту отдельно или к контейнеру в целом.
На гифке ниже мы добавляем горизонтальный контейнер посередине двух объектов, которые находятся в существующем вертикальном контейнере. Затем устанавливаем размер этого горизонтального контейнера, а затем равномерно распределяем его содержимое.
Теперь, когда вы понимаете, как функционируют контейнеры, давайте перейдем к некоторым интересным способам эффективного использования контейнеров на ваших дашбордах.
Пример использования № 1: Подчеркивание заголовка
Вы когда-нибудь заходили на дашборд и обнаруживали, что подчеркивание под заголовком дашборда представляет собой плавающий пустой объект с нанесенным на него фоном? Можно увидеть, что эти подчеркивания заканчиваются на середине страницы в зависимости от того, на каком устройстве вы их просматриваете. В этом примере использования контейнеров мы расскажем вам, как использовать контейнеры для создания подчеркивания.
— Создаем вертикальный контейнер
— Вставляем пустой объект
— Создаем горизонтальный контейнер сверху вертикального контейнера
— Перетаскиваем текстовое поле в горизонтальный контейнер — вводим нужный текст
— Дважды кликаем на текстовое поле, чтобы выбрать родительский контейнер — в раскрывающемся списке выбираем «Edit Height»
Обратите внимание, мы не ввели нужный текст в горизонтальный контейнер, который находится в теле вертикального контейнера. Теперь мы будем использовать цвета фона как текстового поля, так и горизонтального контейнера, чтобы создать подчеркивание.
— Кликаем один раз на текстовое поле и изменяем фон на белый
— Дважды кликаем по текстовому полю и изменяем фон на светло-серый — должна появиться рамка вокруг текстового поля
— Возвращаемся к текстовому полю — кликаем по Outer Padding — выбираем 0 для всех — граница должна исчезнуть
— Снимаем флажок «All sides equal» — добавляем 2 пикселя нижнего отступа — должна появиться нижняя линия, затем рекомендуем отрегулировать желаемую толщину нижней линии
— Далее необходимо отрегулировать заголовок с помощью функции «Inner Padding feature» — будет достаточно примерно 8–10 пикселей
— Кликаем правой кнопкой мыши на текстовое поле — выбираем «Format text object» — далее необходимо изменить вертикальное выравнивание на нижнее, чтобы текст оставался рядом с нижней строкой
Вариант использования № 2: разделы дашборда
При построении дашборда мы начинаем с создания разделов для размещения в них будущих рабочих листов. Используя горизонтальные контейнеры с несколькими вертикальными контейнерами внутри них, мы формируем шаблон дашборда, который позволяет легко создать нужный дашборд.
— В существующий вертикальный контейнер необходимо поместить горизонтальный контейнер
— Настраиваем размер нового горизонтального контейнера до нужной высоты (в примере 300)
— Сначала нужно добавить пустой объект, затем — три вертикальных контейнера и удалить пустой объект
— Кликаем на стрелку вниз и распределяем равномерно контейнеры ( Distribute evenly)
— Далее необходимо раскрасить каждый вертикальный контейнер в белый цвет
— Далее нужно отрегулировать внешний отступ до 10
После того, как рабочие листы созданы, их можно добавить на дашборд, мы можем добавить их в вертикальные контейнеры. Готово! Посмотрите, как рабочие листы органично вписываются в существующие контейнеры ниже.
Вариант использования № 3: боковые панели
Этот пример похож на первый, но делается с отступами на левой или правой границах. В конце статьи мы покажем вам небольшой трюк с добавлением рабочего листа, который меняет цвета в соответствии с соответствующими показателями.
— Добавляем горизонтальный контейнер к вертикальным контейнерам в существующем горизонтальном контейнере
— Перетаскиваем один из вертикальных контейнеров в новый горизонтальный контейнер
— Далее необходимо отрегулировать отступы так, чтобы отступы существующих вертикальных контейнеров были равны 0
— Далее нужно окрасить фон родительского горизонтального контейнера, в который мы только что перетащили вертикальный контейнер, темно-серым цветом
— Теперь необходимо отрегулировать внутренний левый отступ родительского горизонтального контейнера на 8
Теперь, когда у нас есть способ добавить полосу в наши контейнеры, мы расскажем вам, как создать полосу, которая меняет цвет в зависимости от изменения метрики.
— Создаем логическое вычисление, которое возвращает T|F в зависимости от того, достигло ли выбранное значение желаемого результата
— Создаем рабочий лист, который представляет собой гистограмму, занимающую все пространство — можно поиграть с осями и вычислениями SUM (1) в столбцах и строках, чтобы сделать это
— Далее необходимо раскрасить гистограмму вычисляемым полем T|F, созданным на шаге 1
— Перетаскиваем новый горизонтальный контейнер в существующий родительский горизонтальный контейнер — добавляем другие контейнеры, которые будут сопровождать эту изменяющуюся цветовую полосу
— Изменяем ширину цветной полосы на 8 пикселей
— Теперь нужно отрегулировать внешнее заполнение родительского контейнера на 10
Используя этот метод, вы можете создавать индикаторы своих показателей, которые также помогают с дизайном и выравниванием вашего дашборда.
В заключение
Рекомендуем использовать контейнеры во всех дашбордах, которые вы создаете, так как они чрезвычайно полезны для организации и выравнивания дашборда. Пользователям, использующим разные средства просмотра не нужно беспокоиться об изменении макета дашборда. Надеюсь, эти приемы оказались полезными и помогли вам понять несколько различных вариантов использования контейнеров.