close
close

first Drop

Com TW NOw News 2024

Quarto Dashboard Creation and Automation
news

Quarto Dashboard Creation and Automation

(This article was first published on %>% dreamsand kindly contributed to R-bloggers). (You can report problems with the content of this page here)


Want to share your content on R-bloggers? Click here if you have a blog, or here if you don’t.

A young woman pins something red to her green dress.A young woman pins something red to her green dress.

John White Alexander, Study in Black and Green

I had the opportunity to present an automated Quarto dashboard on Posit’s Monthly End-to-End Workflow with Posit Team, followed by a Q&A. The project involved a script that fetches Consumer Price Index (CPI) data from the Bureau of Labor Statistics (BLS) API, processes and cleans the data, and saves it as a pin using the {pins} package to Posit Connect1. A .qmd The file then reads the pinned data and generates a Quarto dashboard, which is deployed to Posit Connect. Both the script and the .qmd file are run monthly on Posit Connect so that the pin and dashboard always reflect the latest data from the BLS. You can view the recording here:


The workflow is implemented in Python and one of the most common questions I got was: “Can I do this in R?” The answer is: absolutely! A major advantage of the tools used in this workflow is their multilingualism, or the availability of equivalent tools in both R and Python.

  • The {pins} package is available in both R and Python.
  • Quarto is independent of the computing environment and can be run with a knitr engine (for R) or a Jupyter engine (for Python).
  • Posit Connect supports hosting data products created in both R and Python.

This blog post will walk you through the equivalent workflow in R, which you can find in this repository . If you are interested in the Python version, you can explore it in this repository .

This post covers Posit Connect in depth, but there are other tools available. For example, I wrote a blog post on creating an automated dashboard using {flexdashboard} and GitHub Actions, which you can check out here.

Before we start… Quarto dashboards?!

That’s right! With version 1.4, Quarto now supports dashboards — a new output format for easily creating dashboards from notebooks in R, Python, or Julia. You can include charts, tables, value boxes, and text, and deploy your dashboards as static web pages (no special server needed). For enhanced interactivity, you can integrate a Shiny backend server. You can also customize the look and feel by adding a Bootstrap theme or custom Sass elements.

Want to learn more about creating dashboards? Check out the Quarto documentation or watch my R-Ladies Rome Quarto Dashboards talk.

Consumer Price Index (CPI) data

This dashboard uses Consumer Price Index (CPI) data from the Bureau of Labor Statistics (BLS). The CPI tracks changes in the prices of a basket of goods over time, covering a range of categories, and is updated monthly. The dashboard automatically refreshes each month when the latest BLS data are released.

Set up

To open the project in RStudio, navigate to File > New Project > Version Control and paste the following URL: https://github.com/posit-marketing/inflation-explorer.git.

The files in the project include:

├── images
│   └── logo.png            # Logo image to use in the dashboard
├── .gitignore              # Files and folders to ignore when pushing up changes
├── README.md               # Project overview and setup instructions
├── _publish.yml            # File for specifying the publishing destination
├── _quarto.yml             # Quarto project configuration file
├── all_data_report.json    # JSON version of the downloaded BLS data
├── custom.scss             # Custom Sass file
├── index.qmd               # Quarto dashboard document
└── script.R                # Python script version of the ETL script

Virtual environments

In the Python version of this demo, I created a virtual environment. Virtual environments are often used to manage dependencies and isolate project-specific packages. In R, the use of virtual environments is less common. R installs packages either system-wide or in user-specific library paths. If you’re an RStudio Projects user, project-specific settings manage your dependencies. And in general, R’s package management system is more flexible in handling packages. However, the {renv} package provides similar functionality to Python’s virtual environments by managing project-specific dependencies and package versions.

Environmental variables

Environment variables are variables that are needed by code, but should not be shared publicly. This project has three:

  1. BLS_KEY: A BLS API access token, obtained from https://www.bls.gov/developers/home.htm.
  2. CONNECT_SERVER: The URL for the Connect server.
  3. CONNECT_API_KEY: The access key for the Connect server.

To store these variables in your R environment (.Renviron), you can use Sys.setenv() in your Terminal:

Sys.setenv("connect api key here")

Or you can your .Renviron file using the {usethis} package. Execute usethis::edit_r_environ() to open the .Renviron file and add the variables manually.

Creating a Quarto Dashboard

Now we can actually create a Quarto dashboard!

---
title: "Inflation explorer: showing the change in price for various goods and services"
format:
1  dashboard:
2    logo: images/logo.png
    nav-buttons:
    - icon: github
      href: "https://github.com/ivelasq/inflation-explorer"
    theme:
    - pulse
    - custom.scss
3resource_files:
- custom.scss
- images/logo.png
---

4```{r}
#| label: setup
#| include: false
library(pins)
library(lubridate)
library(dplyr)
library(tidyr)
library(ggplot2)
library(RColorBrewer)
library(gt)
library(plotly)

5board 
  mutate(year_month = as.Date(year_month, format = "%Y-%m-%d"))

# Value for last updated date
last_updated_date 
  summarise(last_updated_date = max(year_month)) |>
  pull(last_updated_date)

# Value for the percentage change from the previous month
cpi_df  
  filter(seriesID == "CUUR0000SA0")

latest_cpi_value 
  summarise(latest_value = last(value)) |>
  pull(latest_value)

latest_cpi_percent_change 
  filter(year_month == last_updated_date) |>
  pull(jan_2018_pct_change)

# Data for table
pivot_df  
  select(category_label, year_month, percent_change_from_previous_month) |>
  pivot_wider(names_from = year_month, 
              values_from = percent_change_from_previous_month) %>%
  select(category_label, tail(names(.), 5)) |> 
  arrange(desc(category_label))
```

## Row {height=20%}

```{r} 
#| label: valuebox1
#| content: valuebox
#| title: "Last updated"
#| color: #fff
6last_updated_date
```

```{r} 
#| label: valuebox2
#| content: valuebox
#| title: "Consumer Price Index (CPI)"
#| icon: basket
7list(
  value = round(latest_cpi_value, 2),
  icon = "basket",
  color = "primary"
)
```

```{r}
#| label: valuebox3
#| content: valuebox
#| title: "Increase from previous month"
#| icon: percent
#| color: primary
value = round(latest_cpi_percent_change, 2)
```

## Row {height=80%}

### Column {width=20%}

The **Consumer Price Index (CPI)** is a measure of the average change over time in the prices paid by urban consumers for a market basket of consumer goods and services. 

Indexes are available for the U.S. and various geographic areas. Average price data for select utility, automotive fuel, and food items are also available.

**Source: Bureau of Labor Statistics**

### Column {.tabset width=80%}

```{r}
#| label: pct-change-jan-2018-code
#| include: false
8df %
  arrange(desc(category_label), desc(year_month))

p1 %
  filter(year_month == max(year_month)) %>%
  arrange(desc(percent_change_from_previous_month))

top_six_categories %
  slice_head(n = 6)

p2 % 
9  gt() %>%
  tab_header(
    title = "Monthly Percent Change by Category",
    subtitle = "Last four months"
  ) %>%
  fmt_number(
    columns = 2:5,
    decimals = 2,
  ) %>%
  tab_style(
    style = cell_text(weight = "bold", align = "center"),
    locations = cells_column_labels(everything())
  ) |> 
  data_color(
    method = "numeric",
    palette = "BuPu"
  )

pivot_gt
```
1
Set the size to dashboard to create a Quarto dashboard.
2
Add additional files, such as a custom Sass file for themes and a logo.
3
Add resources for Posit Connect integration.
4
Use the Quarto chunk options as shown in this setup chunk.
5
Connect to Posit Connect and retrieve the recently created pin.
6
Add value boxes to highlight important text or numbers.
7
Use thelist() format as needed.
8
Integrate static or interactive charts to enrich your dashboard with text and images.
9
Also add tables.

Publishing scripts and dashboards

There are several ways to publish Quarto dashboards, as described in the publishing section of the Quarto website. In the webinar, I focused on Posit Connect. If you are using RStudio, there are multiple deployment options for Connect, including push-button publishing, Git-backed publishing, and command-line publishing. Posit Connect also allows you to schedule document and script refreshes via an easy-to-use configuration dialog.