---
# System prepended metadata

title: shiny dashboard

---

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

![image](https://hackmd.io/_uploads/ryseV7Ub1e.png)

```
---
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
![image](https://hackmd.io/_uploads/rywG-VUbke.png)


# parameters
```
---
title: "Parameters"
format: 
  dashboard:
    logo: images/beetle.png
params:
  class: "compact"
---
```

rendering with parameters
`quarto render dashboard-r.qmd -P class:"suv"`