How to Create the Basic Dashboard with Quarto

Author
Affiliation

Somsak Chanaim

international College of Digital Innovation, CMU

Published

September 13, 2024

Modified

September 13, 2024

Set up YAML Header in quarto

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
---

If we render this code in Rstudio, we can get the banner

The dashboard layout

For the basic dashboard with quarto, we can display plots, tables, video from youtube, value box, and text.

Example of Dashboard layout

Example 1

Example 2

Example 3

Example 4

The example of plot, table, video.

Plot code in chuck

#| title: The scatter plot of cars data
plot(x = cars$speed, y = cars$dist)

#| title: The data frame of cars
library(DT)
datatable(cars)

Video from youtube

Insert this code without chuck 
{{< video https://www.youtube.com/watch?v=_VGJIPRGTy4 >}}

Dashboard based on rows

Code for example 1

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
---
```{r}
#| title: The scatter plot of cars data
plot(x = cars$speed, y = cars$dist)
```

```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Result
size of graph

you increase or reduce graph size by set up chuck code.

```{r}
#| title: The scatter plot of cars data
#| fig-width: 30
#| fig-height: 20  
plot(x = cars$speed, y = cars$dist)
```

If you want to parition the area of you dashboard, from example 1, we need area for plot 70% and the area for table is 30% we can do it by

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
---

## Row {height=70%}
```{r}
#| title: The scatter plot of cars data
#| fig-width: 30
#| fig-height: 20 
plot(x= cars$speed, y = cars$dist)
```

## Row {height=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Result

If you need to do the dashboard look like example 2, we can add another code for plot, table or video before ## Row {height=30%}. If we insert video from youtube.

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
---

## Row {height=70%}
```{r}
#| title: The scatter plot of cars data
#| fig-width: 30
#| fig-height: 20 
plot(x= cars$speed, y = cars$dist)
```

{{< video https://www.youtube.com/watch?v=_VGJIPRGTy4 >}}


## Row {height=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Result

Add the value box

You can write the code

```{r}
#| content: valuebox
#| title: "your title"
list(
  icon = "car-front",
  color = "success",
  value = "text or number"
)
```

You can search icon name from bootstrap icons

bootstrap icons

The color of value box

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

Example

From the previous code, If we add 4 value boxes with area 20%, plot 50%, and table 30%.

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
---

## Row {height=20%}

```{r}
#| content: valuebox
#| title: "valuebox 1"
list(
  icon = "car-front",
  color = "primary",
  value = "good"
)
```

```{r}
#| content: valuebox
#| title: "valuebox 2"
list(
  icon = "box",
  color = "secondary",
  value = 2000
)
```

```{r}
#| content: valuebox
#| title: "valuebox 3"
list(
  icon = "bar-chart-fill",
  color = "info",
  value = "2,000$"
)
```

```{r}
#| content: valuebox
#| title: "valuebox 4"
list(
  icon = "diagram-2-fill",
  color = "success",
  value = cars$speed[1]
)
```

## Row {height=50%}
```{r}
#| title: The scatter plot of cars data
#| fig-width: 30
#| fig-height: 20 
plot(x= cars$speed, y = cars$dist)
```

## Row {height=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Result

Dashboard based on columns

We set YAML with orientation: columns

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
orientation: columns 
---
```{r}
#| title: The scatter plot of cars data
plot(x = cars$speed, y = cars$dist)
```

```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Result

Similar with the dashboard based on rows, if I need the area for the plot 70% and the area for the table is 30%.

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
orientation: columns 
---

## Column {width=70%}
```{r}
#| title: The scatter plot of cars data
plot(x = cars$speed, y = cars$dist)
```

## Column {width=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Result

If in the first column, I need to add the video from youtube.

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
orientation: columns 
---

## Column {width=70%}
```{r}
#| title: The scatter plot of cars data
plot(x = cars$speed, y = cars$dist)
```

{{< video https://www.youtube.com/watch?v=_VGJIPRGTy4 >}}

## Column {width=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Result

if you add 4 value boxes with with area 20% for the first column, the second column is 50%, and the third column is 30%.

---
title: "My Dashboard"
author: "Your Name"
format: dashboard
logo: https://www.icdi.cmu.ac.th/Images/Icon/logo-01-01.png
theme: yeti
nav-buttons: 
   - icon: facebook
     href: https://www.facebook.com/
   - icon: youtube
     href: https://www.youtube.com/
orientation: columns 
---
## Column {width=20%}
```{r}
#| content: valuebox
#| title: "valuebox 1"
list(
  icon = "car-front",
  color = "primary",
  value = "good"
)
```

```{r}
#| content: valuebox
#| title: "valuebox 2"
list(
  icon = "box",
  color = "secondary",
  value = 2000
)
```

```{r}
#| content: valuebox
#| title: "valuebox 3"
list(
  icon = "bar-chart-fill",
  color = "info",
  value = "2,000$"
)
```

```{r}
#| content: valuebox
#| title: "valuebox 4"
list(
  icon = "diagram-2-fill",
  color = "success",
  value = cars$speed[1]
)
```

## Column {width=50%}
```{r}
#| title: The scatter plot of cars data
plot(x = cars$speed, y = cars$dist)
```

{{< video https://www.youtube.com/watch?v=_VGJIPRGTy4 >}}

## Column {width=30%}
```{r}
#| title: The data frame of cars
library(DT)
datatable(cars)
```

Result