These are exercises to get you started with Quarto Dashboards. Refer to the official Quarto Dashboards documentation for help.
By the end of this exercise, you will be able to:
- Create a basic Quarto dashboard.
- Become familiar with different components of a dashboard.
- Customize dashboard layout and appearance.
- Add dynamic components to your dashboard.
For this exercise, we will use the cake data provided by the Immunotechnology Cake Club in Lund. The GitHub repository also includes pictures of all the cakes.
1 Introduction
The purpose of a dashboard is to provide a quick view of important things.
Dashboards are compositions of components used to provide navigation and present data. With Quarto dashboards we can create create elegant and production-ready dashboards using a variety of components, including static graphics (ggplot2, Matplotlib, Seaborn, etc.), dynamic widgets (plotly, leaflet, htmlwidgets, etc.), tabular data, value boxes, text annotations, and more.
2 Dashboard structure
- Dashboards are composed of cards.
- Cards are arranged into rows and columns.
- Pages, tabsets, and sidebars allow for more advanced layouts.
2.1 Dashboard layout
Navigation
All dashboards include a top-level navigation bar that provide a title and (optionally) a logo and author. Dashboards with multiple pages also contain a link to each page on the navigation bar. The title and author are specified as they are with normal documents. You can also include a logo.
---
title: "Cake Club"
author: "NBIS"
format:
dashboard:
logo: ./Downloads/cake-emoji.png
---
Layout - rows and columns
Rows and columns are defined using markdown headings (with optional attributes to control height, width, etc.).
Every Level 2 header (##) introduces a new row.
Every code chunk introduces a new column.
This example shows simple layout with two rows, where the second row is split into two columns. Moreover, Level 2 markdown headings (e.g. ## Row {height=70%}) define the contents of rows as well as their relative height. The {r} code cells in turn automatically create cards that are laid out in columns within the row.
---
title: "Cake club"
format: dashboard
---
## Row {height=70%}
::: {.cell}
:::
## Row {height=30%}
::: {.cell}
:::
::: {.cell}
:::
The default orientation setting is by rows. You can set the orientiation to be by column in the YAML specifying the orientation: columns. If that is the case, then the Level 2 header would be a column and each code chunk a row in the column.
Quarto automatically divides the area into equally divided charts.
Pages
To introduce multiple pages, use Level 1 headings above the Level 2 headings used to define rows and columns. The text of the Level 1 headings will be used to link to the pages in the navigation bar.
For example, here is a dashboard that splits content across two pages.
---
title: "Cake club"
format: dashboard
---
# Cake 1
```{r}
```
# Cake 2
## Column
```{r}
```
```{r}
```
## Column
```{r}
```
Tabsets
Use tabsets to include multiple views of data or to include content of secondary importance without having it crowd the main display. Tabsets are created by adding the .tabset class to a row or column.
For example, this layout displays the bottom row as a set of two tabs.
---
title: "Cake club"
format: dashboard
---
## Row
```{r}
```
## Row {.tabset}
```{r}
#| title: Chart 2
```
```{r}
#| title: Chart 3
```
Cards
Cards are the fundamental unit of display within dashboards. They are created automatically for each code chunk or explicitly using the card option.
Here each of the r cells become card.
## Column {width=40%}
```{r}
```
```{r}
```Here .card option is used.
## Column {width=40%}
```{r}
```
::: {.card}
This text will be displayed within a card
:::
```{r}
```To provide a title for a markdown card use the title attribute.
For example:
::: {.card title="Mt Title"}
This text will be displayed within a card
:::2.2 Other features
Value boxes
Value boxes are a great way to prominently display simple values within a dashboard. For example, here is a dashboard row with three value boxes.
## Row
```{r}
#| content: valuebox
#| title: "Sunny days"
list(
icon = "brightness-high-fill",
color = "warning",
value = 14
)
```
```{r}
#| content: valuebox
#| title: "Snowy days"
list(
icon = "snow2",
color = "info",
value = 5
)
```
```{r}
#| content: valuebox
#| title: "Rainy days"
list(
icon = "cloud-rain-heavy",
color = "secondary",
value = 12
)
```The icon used in value boxes can be any of the 2,000 available bootstrap icons.
The color can be any CSS color value, however there are some color aliases that are tuned specifically for dashboards that you might consider using by default:
| Color Alias | Default Theme Color(s) |
|---|---|
primary |
Blue |
secondary |
Gray |
success |
Green |
info |
Bright Blue |
warning |
Yellow/Orange |
danger |
Red |
light |
Light Gray |
dark |
Black |
The value can be a variable created previously within the document, or randomly assigned value as here.
Sidebars
Sidebars are a great place to group inputs for dashboards. By adding a new Level 2 headline with a .sidebar class, you can really easily add a collapsible sidebar.
---
title: "Cake club"
format: dashboard
---
# Page 1
## {.sidebar}
```{r}
```
## Column
```{r}
```
```{r}
```
Dashboard theming
Quarto Dashboards use same Bootstrap 5 based theming system as regular HTML documents (so themes you have built for HTML websites can also be used with dashboards). Use the theme option to choose a theme. Themes options are available here.
format:
dashboard:
theme: solar3 Exercise
Your task is to build a dashboard using the provided cake data. Start by creating a simple dashboard with one row and one column. Use this dashboard as a foundation to understand the structure. Once comfortable, expand your dashboard by adding pages, tabsets, or additional rows and columns for a more advanced layout. Optionally, enhance your dashboard with dynamic components like plotly.
