One # is for tab
Two ## is for columns, when set orientation: columns
three ### is for rows
sidebar #{.sidebar} for overall
sidebar ##{.sidebar} is under each tab
after ###, you could add{width="20%"} to control width and height
```
---
title: "Navigation buttons"
format:
dashboard:
logo: images/beetle.png
nav-buttons:
- icon: github
href: https://github.com/quarto-dev/quarto-cli
aria-label: GitHub
- icon: linkedin
href: https://www.linkedin.com/company/posit-software/
aria-label: LinkedIn
- icon: youtube
href: https://youtube.com/
aria-label: YouTube
---
```{r}
library(ggplot2)
```
```{r}
# Scatter
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
```
```{r}
# Bar
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
geom_bar()
```
## Fill and flow
Each row in a dashboard that is not given an explicit height will determine its size by either filling available space or by flowing to its natural height
filling layout is generally the default, however for certain types of content (e.g., markdown text) flow layout is the default.
If the default behavior is not what you want, you can explicitly specify filling or flowing behavior using the .fill and .flow classes applied to a row.
```
## Row {.fill}
## Row {.flow}
```
## scrolling
`{orientation="columns" scrolling="true"}`
## tabset
Each card within a row/column or each row/column within another becomes a tab:
`{.tabset}`
## cards
::: {.card}
This text will be displayed within a card
:::
## multiple output layout
```
---
title: "Multiple output layout"
format:
dashboard:
logo: images/beetle.png
---
```{r}
library(ggplot2)
```
```{r}
#| title: One cell = one card
#| layout-ncol: 2
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
ggplot(mpg, aes(x = drv)) +
geom_bar()
```
## value boxes
```
---
title: "Valueboxes"
format: dashboard
---
```
```{r}
library(ggplot2)
library(dplyr)
```
```
## Value boxes {height="25%"}
```
```{r}
#| label: calculate-values
lowest_mileage_cty <- mpg |>
filter(cty == min(cty)) |>
distinct(cty) |>
pull(cty)
highest_mileage_cty <- mpg |>
filter(cty == max(cty)) |>
distinct(cty) |>
pull(cty)
rounded_mean_city_mileage <- mpg |>
summarize(round(mean(cty), 2)) |>
pull()
```
```{r}
#| content: valuebox
#| title: "Least efficient"
#| icon: fuel-pump-fill
#| color: danger
list(
value = paste(lowest_mileage_cty, "mpg")
)
```
```{r}
#| content: valuebox
#| title: "Most efficient"
list(
icon = "fuel-pump",
color = "success",
value = paste(highest_mileage_cty, "mpg")
)
```
```
::: {.valuebox icon="fuel-pump" color="secondary"}
Average city mileage
`{r} rounded_mean_city_mileage` mpg
:::
```
`## Plots {height="75%"}`
```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
geom_point()
```
```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
geom_bar()
```
# theming and styling
```
---
title: "Bootswatch themes"
format:
dashboard:
theme: quartz
---
```
https://bootswatch.com
```
---
title: "Light and dark"
format:
dashboard:
theme:
light: flatly
dark: darkly
---
```
# customize theme
```
format:
theme:
- cosmo
- custom.scss
```
```
/*-- scss:defaults --*/
// fonts
@import 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap';
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@700&display=swap');
$font-family-sans-serif: "Atkinson Hyperlegible";
// colors
$navbar-bg: #0e2635;
$navbar-fg: #F0F0F0;
/*-- scss:rules --*/
.card-header {
background-color: #ae8b2d;
color: #F0F0F0;
}
```
```
---
title: "Sandstone + Custom light theme"
format:
dashboard:
theme:
- sandstone
- style/custom-light.scss
---
```
# Dashboard deployment
# parameters
```
---
title: "Parameters"
format:
dashboard:
logo: images/beetle.png
params:
class: "compact"
---
```
rendering with parameters
`quarto render dashboard-r.qmd -P class:"suv"`
Sign in with Wallet
Connect another wallet