Creating a Quarto Dashboard

To create a dashboard you need to use format: dashboard in the YAML:

dashboard.qmd
--- 
title: "Palmer Penguins"
author: "Cobblepot Analytics"
format: dashboard
---

We can add further details to the dashboard:

dashboard.qmd
--- 
title: "Palmer Penguins"
author: "Cobblepot Analytics"
format: 
  dashboard:
    logo: images/penguins.png
    nav-buttons: [linkedin, twitter, github]
---

Quarto Dashboard Components


  1. Navigation Bar — Icon, title, author, links to sub-pages
  1. Pages, Rows, Columns, and Tabsets
  1. Cards, Sidebars, and Toolbars

Static Dashboards

Default Layout (in Rows)

---
title: "Palmer Penguins"
author: "Allison Theobold"
format: dashboard
---
    
## Row {height=70%}

```{r}
```

## Row {height=30%}

```{r}
```

```{r}
```

A schematic of a page layout showing Chart 1 at the top using the full page width, then Chart 2 and Chart 3 side by side in a row below it.

Changing Orientation (to Columns)

---
title: "Palmer Penguins"
author: "Allison Theobold"
format: 
  dashboard:
    orientation: columns
---
    
## Column {width=60%}

```{r}
```

## Column {width=40%}

```{r}
```

```{r}
```

A schematic of a page layout showing Chart 1 on the left using the full page height, and on the right Chart 2 and Chart 3 are one above the other.

What if you have “card” content that isn’t included in a code chunk?

---
title: "Palmer Penguins"
author: "Allison Theobold"
format: 
  dashboard:
    orientation: columns
---
    
## Column {width=60%}

```{r}
```

## Column {width=40%}

::: {.card}
This text will be displayed within a card
:::

```{r}
```

Adding More Pages

---
title: "Palmer Penguins"
author: "Allison Theobold"
format: dashboard
---
    
# Bills 

```{r}
```

# Flippers {orientation="columns"}

## Column

```{r}
```

```{r}
```

## Column 

```{r}
```

What orientation will the Bills page use?

Fun Stuff!

Tabsets

are created by adding the .tabset class to a row or column.

---
title: "Palmer Penguins"
format: dashboard
---
    
## Row

```{r}
```

## Row {.tabset}

```{r}
#| title: Chart 2
```

```{r}
#| title: Chart 3
```

Schematic of a dashboard layout showing Chart 1 at the top using the full page width. Below Chart 1, a panel with two tabs is shown: the Chart 2 tab is selected and occupies the full page width; the Chart 3 tab is unselected.

Deeply Nested Tabsets

---
title: "Palmer Penguins"
format: dashboard
---
    
## Row {height=70%}

```{r}
```

## Row {height=30%}

### Column {.tabset}

```{r}
#| title: Chart 2
```

```{r}
#| title: Chart 3
```

### Column

```{r}
```

Schematic of a dashboard layout showing Chart 1 at the top using the full page width. The row below Chart 1 is split into two columns. In the left column is a panel with two tabs: Chart 2 and Chart 3. In the right column is Chart 4.

Value Boxes

## Column - Medals by country {width=35%}

### Row - Value boxes {height=30%}

```{r}
#| label: summer-calculate-most-medals

summer_most_golds <- summer_olympics |>
  filter(medal == "Gold") |>
  count(team, sort = TRUE) |>
  slice_head(n = 1)

summer_most_silvers <- summer_olympics |>
  filter(medal == "Silver") |>
  count(team, sort = TRUE) |>
  slice_head(n = 1)

summer_most_bronzes <- summer_olympics |>
  filter(medal == "Bronze") |>
  count(team, sort = TRUE) |>
  slice_head(n = 1)
```

::: {.valuebox icon="award-fill" color="#d4af37"}
Most golds:

`{{r}} summer_most_golds$n`

`{{r}} summer_most_golds$team`
:::

::: {.valuebox icon="award-fill" color="#c0c0c0"}
Most silvers:

`{{r}} summer_most_silvers$n`

`{{r}} summer_most_silvers$team`
:::

::: {.valuebox icon="award-fill" color="#cd7f32"}
Most bronzes:

`{{r}} summer_most_bronzes$n`

`{{r}} summer_most_bronzes$team`

The Middle Child (Part Static, Part Dynamic)

Dynamic Dashboard

Creating a Shiny Dashboard

dashboard.qmd
--- 
title: "Palmer Penguins"
author: "Cobblepot Analytics"
format: dashboard
server: shiny
---

Interactive Dashboard Components

The format of interactive dashboards are similar to a “standard” dashboard. The difference lies in how the outputs (e.g., plots, tables) are created.

  1. The user is given a set of controls that influence the output that is seen.

  2. There are code chunks that “react” to these user inputs.

  3. The outputs displayed depend on these user inputs.

There are three main #| context: values that code chunks can have: data, setup, and server.

#| context: setup

dashboard.qmd
---
title: "Diamonds Explorer"
author: "Barkamian Analytics"
format: dashboard
server: shiny
---

```{r}
#| context: setup

library(ggplot2)
dataset <- diamonds
```

This could have been broken apart into two code chunks, one with a setup context and one with a data context. Using the data context is helpful because any R objects created in that chunk will be saved to an .RData file, which will then be loaded during Shiny server startup.

.sidebar Content

dashboard.qmd
---
title: "Diamonds Explorer"
author: "Barkamian Analytics"
format: dashboard
server: shiny
---

```{r}
#| context: setup

library(ggplot2)
dataset <- diamonds
```


# {.sidebar}

```{r}
sliderInput('sampleSize', 'Sample Size', 
            min = 1, max = nrow(dataset),
            value = min(1000, nrow(dataset)), 
            step = 500, round = 0)
br()
checkboxInput('jitter', 'Jitter')
checkboxInput('smooth', 'Smooth')
```

```{r}
selectInput('x', 'X', names(dataset)) 
selectInput('y', 'Y', names(dataset), names(dataset)[[2]])
selectInput('color', 'Color', c('None', names(dataset)))
```

```{r}
selectInput('facet_row', 'Facet Row',
  c(None = '.', names(diamonds[sapply(diamonds, is.factor)])))
selectInput('facet_col', 'Facet Column',
  c(None = '.', names(diamonds[sapply(diamonds, is.factor)])))
```

What’s with the formatting?

sliderInput('sampleSize', 'Sample Size', min = 1, max = nrow(dataset),
            value = min(1000, nrow(dataset)), step = 500, round = 0)
  • 'sampleSize': the name of the object that stores the value (to be used later in other code chunks)
  • 'Sample Size': the title (for the slider) that is displayed on the dashboard
  • min = 1: the starting value of the slider
  • max = nrow(dataset): the ending value of the slider
  • value = min(1000, nrow(dataset)): sets the initial (default) value of the slider
  • step = 500: how big of increments should be displayed
  • round = 0: specifies there should be 0 decimals places used

Why do these say dataset instead of diamonds? This makes the app usable for any dataset!

How are these inputs used?

dashboard.qmd
---
title: "Diamonds Explorer"
author: "Barkamian Analytics"
format: dashboard
server: shiny
---

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

# {.sidebar}

```{r}
sliderInput('sampleSize', 'Sample Size', 
            min=1, max=nrow(dataset),
            value=min(1000, nrow(dataset)), 
            step=500, round=0)
br()
checkboxInput('jitter', 'Jitter')
checkboxInput('smooth', 'Smooth')
```

```{r}
selectInput('x', 'X', names(dataset)) 
selectInput('y', 'Y', names(dataset), names(dataset)[[2]])
selectInput('color', 'Color', c('None', names(dataset)))
```

```{r}
selectInput('facet_row', 'Facet Row',
  c(None='.', names(diamonds[sapply(diamonds, is.factor)])))
selectInput('facet_col', 'Facet Column',
  c(None='.', names(diamonds[sapply(diamonds, is.factor)])))
```

# Plot

```{r}
plotOutput('plot')
```

# Data

```{r}
tableOutput('data')
```

Where are 'plot' and 'data' coming from?

dashboard.qmd
```{r}
#| context: server

dataset <- reactive({
  diamonds[sample(nrow(diamonds), input$sampleSize),]
})
 
output$plot <- renderPlot({
  
  p <- ggplot(
    dataset(), 
    aes_string(x=input$x, y=input$y)) + geom_point()
  
  if (input$color != 'None')
    p <- p + aes_string(color=input$color)
  
  facets <- paste(input$facet_row, '~', input$facet_col)
  if (facets != '. ~ .')
    p <- p + facet_grid(facets)
  
  if (input$jitter)
    p <- p + geom_jitter()
  if (input$smooth)
    p <- p + geom_smooth()
  
  p
  
})

output$data <- renderTable({
  dataset()
})
```

How are all of these pieces connected?

plotOutput('plot') is an empty picture frame in your user interface

renderPlot() is the painting you generate in your server

output$plot places the painting in the frame