12  Quarto Dashboards

В этой главе мы рассмотрим создание дэшбордов1 (или информационных панелей или панелей мониторинга или дашбордов). Дэшборд, по сути, представляет собой группу связанных визуализаций данных для краткого доступного отображения сводной информации, в качестве элементов могут выступать графики, таблицы, текст, иная наглядная информация, структурно объединенные макетом.

Дэшборды возможно публиковать как в виде статических веб-страниц, так и в виде динамических страниц, например, на основе Shiny. Примеры информационных панелей можно увидеть на странице галереи Quarto. Отметим, что многие идеи, связанные с дэшбордами в Quarto, заимствованы из библиотеки {flexdashboard}.

Quarto дэшборды представляют собой *.qmd-документы (или *.ipynb-ноутбуки), в YAML-преамбуле которых указывается:

format: dashboard
Код примера информационной панели 
hello-dashboard.qmd
---
title: "Моя информационная панель"
author: "[Автор]"
format: dashboard
---

## Row {height="20%"}
```{r}
#| content: valuebox
#| title: "Значения"

1
```

```{r}
#| content: valuebox
#| title: "Информация"

2
```

```{r}
#| content: valuebox
#| title: "Тренды"

3
```

## Row
```{r}
#| title: Пример графика
library(tinyplot)
plt(
  Sepal.Length ~ Petal.Length | Species, 
  data = iris,
  palette = "dark", pch = 16,
  grid = TRUE, frame = FALSE
)
```

```{r}
#| title: Таблица
library(reactable)
reactable(iris[1:10, ])
```

Здесь мы рассмотрим следующие элементы структуры дэшбордов:

  1. Макет страницы показывает, как размещать контент на страницах, в строках, столбцах, вкладках и карточках, а также на основе Markdown управлять дополнительными атрибутами: высотой, шириной и т. д.
  2. Навигация обеспечивает удобный доступ к различным разделам и страницам, упрощая взаимодействие пользователя с веб-сайтом. Например, панель навигации содержит заголовок, имя автора, а также ссылки на подстраницы (если их определено более одной).
  3. Дополнительные элементы:
    • карточки (cards) — основные компоненты дэшбордов, контейнеры для графиков, отображения данных и контента в свободной форме;
    • панели показателей (value boxes) служат для наглядного отображения значений;
    • наборы вкладок (tabsets) необходимы для разделения контента;
    • боковые панели (sidebars) как правило служат для ввода данных;
    • панели инструментов (toolbars) во многом похожи на боковые панели, но обеспечивают горизонтальную компоновку.

12.1 Макет страницы

Основными составными элементами дэшборда являются карточки (cards), которые содержат блоки контента и упорядочены в строки или столбцы. Чтобы определить макет для каждой страницы панели, отражающий расположение компонентов, используются элементы Markdown.

УведомлениеЗамечание

Ячейки кода автоматически создают карточки внутри дэшборда, размещая их в столбцах внутри строк.

Рассмотрим пример простого макета: пусть первая строка занимает всю ширину, а во второй строке содержатся два столбца. Здесь параметр height определяет относительную высоту.

sample-dashboard.qmd
---
title: "Простейшая информационная панель"
format: dashboard
---
    
## Row {height=70%}

```{r}
cat("Карточка 1")
```

## Row {height=30%}

```{r}
cat("Карточка 2")
```

```{r}
cat("Карточка 3")
```
Рисунок 12.2: Пример простейшей информационной панели

Ширину элементов-карточек в каждой также можно изменять, используя заголовки следующего (3-го) уровня.

sample-dashboard-refined.qmd
---
title: "Простейшая информационная панель"
format: dashboard
---
    
## Row {height=70%}

```{r}
cat("Карточка 1")
```

## Row {height=30%}

### Row-1 {width=40%}

```{r}
cat("Карточка 2")
```

### Row-2 {width=60%}

```{r}
cat("Карточка 3")
```
Рисунок 12.3: Пример информационной панели с измененными размерами карточек

По умолчанию страницы панели мониторинга сначала располагаются по строкам, затем уже по столбцам. Тем не менее, это можно изменить, указав параметр orientation: columns.

sample-dashboard-rows.qmd
---
title: "Простейшая информационная панель"
format: 
  dashboard:
    # orientation: rows -- по умолчанию
      orientation: columns
---
    
## Column {width=70%}

```{r}
cat("Карточка 1")
```

## Column {width=30%}

```{r}
cat("Карточка 2")
```

```{r}
cat("Карточка 3")
```
Рисунок 12.4: Пример макетирования информационной панели с первичным вертикальным (колоночным) заполнением
УведомлениеЗамечание

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

Каждая строка на панели мониторинга, для которой не указана явная высота, будет определять свой размер либо за счет доступного пространства (fill), либо за счет своей естественной высоты (flow). По умолчанию используется заполняющий макет (fill) для определения дизайна страницы, заполняя доступное пространство, однако для некоторых типов контента (например, текста Markdown) может использоваться поточный макет (flow), который описывает, как элементы располагаются в пространстве, используя естественный порядок потока. Переопределить соответствующее макетирование возможно используя классы .fill и .flow, например:

## Row {.fill}

## Row {.flow}

В том случае, если необходимо больше пространства для содержания, можно установить опцию scrolling: true для размещения переполнения страницы.

scrolling-dashboard.qmd
---
title: "Информационная панель с переполнением"
format: 
  dashboard:
    scrolling: true 
---
    
```{r}
cat("Карточка 1")
```

```{r}
cat("Карточка 2")
```

```{r}
cat("Карточка 3")
```

```{r}
cat("Карточка 4")
```
Рисунок 12.5: Пример макетирования информационной панели с вертикальным заполнением с помощью опции scrolling: true

Отметим, что опции orientation и scrolling можно задавать внутри дэшборда или страницы.

orientation-scrolling-dashboard.qmd
---
title: "Информационная панель с переполнением"
format: dashboard 
---
    
## Обзор {orientation="rows"}

Текст 1.

## Анализ {orientation="columns" scrolling="true"}

Текст 2.

12.2 Навигация

Дэшборды могут иметь как одностраничную, так и многостраничную структуру. Заголовки первого уровня определяют страницы, ссылки на которые будут расположены в панели навигации.

dashboard-multiple-pages.qmd
---
title: "Несколько страниц"
format: dashboard
---

# Страница 1

Текст первой страницы.

# Страница 2

## Row

```{r}
cat("Карточка 1")
```

## Row

### Row-1

```{r}
cat("Карточка 2")
```

### Row-2

```{r}
cat("Карточка 3")
```
Рисунок 12.6: Пример многостраничной информационной панели

Все дэшборды включают в себя навигационную панель верхнего уровня, которая может содержать (опционально) заголовок и логотип автора. Навигация реализована так же, как и в обычных документах, параметры можно посмотреть на странице Website Options.

Навигационная панель может содержать заголовок (title), данные автора (author), логотип (logo), а также кнопки навигации (nav-buttons). Для кнопок навигации распознаются специальные псевдонимы, например: reddit, twitter, github (если ранее был определен репозиторий проекта).

dashboard-nav-bar.qmd
---
title: "Пример"
author: "[Автор]"
format: 
  dashboard:
    logo: images/logo.jpeg
    nav-buttons: [reddit, twitter]
theme: cosmo
---

# Страница 1


# Страница 2

## Row

Текст.
Рисунок 12.7: Пример навигационной панели

Также можно использовать наборы иконок Bootstrap Icons и создавать пользовательские кнопки как в примере ниже.

format:
  dashboard:
    nav-buttons:
      - telegram
      - icon: telegram
        href: https://web.telegram.org/

12.3 Дополнительные элементы

12.3.1 Карточки

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

::: {.card}
Текст внутри карточки
:::
dashboard-text-card.qmd
---
title: "Информационная панель"
format: dashboard
---
    
## Row

```{r}
cat("Карточка 1")
```

## Row

```{r}
cat("Карточка 2")
```

::: {.card}
Текст внутри карточки
:::
Рисунок 12.8: Пример карточек в Quarto дэшборде

Карточки по умолчанию отображаются без заголовка с небольшим отступом по краям.

Рисунок 12.9: Пример карточки

Вы можете добавить заголовок к карточке, указав параметр title в настройках ячейки. Кроме того, отступы можно настроить с помощью параметра padding.

dashboard-map.qmd
---
format: dashboard
---
    
## Row

```{r}
#| title: "World Map"
#| padding: 5px

library(leaflet)

...

```
Рисунок 12.10: Пример карточки с заголовком и измененным размером полей

Если вы хотите отключить возможность разворачивания карточек, укажите параметр expandable: false как на уровне всего документа, так и для отдельных карточек.

12.3.2 Панели показателей

Одним из эффективных приемов для отображения отдельных значений вместе с заголовком и дополнительным значком в Quarto служат панели показателей (value boxes).

dashboard-valuebox.qmd
---
title: "Пример панели показателей"
format: dashboard
---

## Row 

```{r}
#| content: valuebox
#| title: "Количество статей"
#| icon: pencil
#| color: info
list(
  value = 45
)
```

```{r}
#| content: valuebox
#| title: "Комментарии"
list(
  icon = "chat",
  color = "warning",
  value = 126
)
```

```{r}
#| include: false
value = 12
```

::: {.valuebox icon="apple" color="success"}
Съедено яблок

`{r} value`
:::
Рисунок 12.11: Пример панели показателей
УведомлениеЗамечание

Если вы используете язык Python, то в R-конструкции выше необходимо заменить list() на dict(), конструкция с .valuebox универсальна и подходит также и для Julia и для OJS.

Используемые иконки (параметр icon) соответствуют названиям со страницы Bootstrap Icons, а цвет заполнения (параметр color) можно либо задать самостоятельно, указав переменные Sass в стилевом файле, либо рассмотрев готовые псевдонимы из таблицы ниже со значениями по умолчанию. Следует учитывать, что цвета могут отличаться в соответствии с выбранной основной темой.

Таблица 12.1: Цвета по умолчанию для панелей показателей
Название цвета Цвет(а) темы по умолчанию
primary синий
secondary серый
success зеленый
info ярко-синий
warning желтый / оранжевый
danger красный
light светло-серый
dark черный

12.3.3 Наборы вкладок

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

dashboard-tabset.qmd
---
title: "Информационная панель с наборами вкладок"
format: dashboard
---
    
## Row

```{r}
cat("Карточка 1")
```

## Row {.tabset}

```{r}
#| title: Чарт 1
cat("Карточка 2")
```

```{r}
#| title: Чарт 2
cat("Карточка 3")
```
Рисунок 12.12: Пример панели с наборами вкладок

12.3.4 Боковые панели

Сайдбары (или боковые панели) обычно используются для ввода данных, например, если компоненты дэшборда содержат элементы Shiny. Боковые панели могут быть добавлены глобально для многостраничного документа (занимая пространство от верха до низа страницы), на уровне отдельной страницы или как элемент макета, аналогичный карточкам. Уровень заголовка будет соответствовать уровню включения боковой панели.

Для создания боковой панели используется класс {.sidebar}, добавляемый к заголовку. Ниже показан пример глобального включения боковой панели.

dashboard-sidebar-global.qmd
---
title: "Исследование"
author: "[автор]"
format: dashboard
server: shiny
theme: cosmo
---

```{r}
#| context: setup
library(ggplot2)
library(shiny)
dataset <- diamonds
```

# {.sidebar}

```{r}
br()
checkboxInput("jitter", "Jitter", value = TRUE)
checkboxInput("smooth", "Smooth", value = TRUE)
```

```{r}
selectInput("x", "X", names(dataset)) 
selectInput("y", "Y", names(dataset), 
                      names(dataset)[[2]])
selectInput("color", "Цвет заполнения", 
            c("None", names(dataset)), 
             selected = "clarity")
```

# Рисунок

```{r}
plotOutput("plot")
```
Рисунок 12.13: Пример боковой панели на уровне всего документа

Боковую панель можно при желании закрыть, нажав на кнопку в левом верхнем углу.

Приведем идею примера, в котором боковая панель не охватывает все строки макета целиком, а привязана лишь к части дэшборда Quarto.

dashboard-sidebar-local.qmd
---
title: "Исследование"
author: "[автор]"
format: dashboard
server: shiny
theme: cosmo
---

## Row {height=55%}

### {.sidebar}

```{r}
Shiny_input
```

### Column

```{r}
leaflet_map
```

## Row {height=45%}

```{r}
table
```
Рисунок 12.14: Пример боковой панели внутри строки

В заключении отметим, что боковые панели могут располагаться как слева, так и справа. Чтобы изменить ширину боковых панелей, используйте атрибут width.

12.3.5 Панели инструментов

Панели инструментов схожи с боковыми панелями (сайдбарами), они, как правило, отвечают за ввод данных, однако располагаются горизонтально, обеспечивая удобную компоновку элементов в ширину. Для создания панелей инструментов используется класс {.toolbar} и применима такая же структура при расположении в макете, что и для сайдбаров:

  • для создания глобальных панелей инструментов видимых на всех страницах многостраничного документа, используются заголовки первого уровня;
  • для отображения панелей инструментов только на одной странице используются заголовки второго уровня;
  • для включения панелей инструментов в любое место макета необходимо использовать заголовки третьего уровня.
dashboard-toolbar.qmd
---
title: "Исследование"
author: "[автор]"
format: dashboard
server: shiny
theme: cosmo
---

## {.toolbar}

```{r}
Shiny_input
```

## Row 

```{r}
table
```
Рисунок 12.15: Пример панели инструментов

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

dashboard-toolbar-flip.qmd
---
title: "Исследование"
author: "[автор]"
format: dashboard
server: shiny
theme: cosmo
---

## Row 

```{r}
table
```

## {.toolbar}

```{r}
Shiny_input
```
Рисунок 12.16: Пример панели инструментов расположенной внизу страницы

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

dashboard-toolbar-layout.qmd
---
title: "Исследование"
author: "[автор]"
format: 
  dashboard:
    orientation: columns
server: shiny
theme: cosmo
---

## Column {width=70%}

### {.toolbar}

```{r}
Shiny_input
```

### Row 

```{r}
table
```

## Column {width=30%}

```{r}
table
```
Рисунок 12.17: Пример панели инструментов расположенной внутри столбца

Заключение

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

Для дополнительного изучения структуры дэшбордов Quarto рекомендуем обратиться к странице Quarto dashboards video series, на которой Mine Çetinkaya-Rundel собрала небольшие обучающие видео-уроки.

  1. англ. dashboard — приборная панель.↩︎