---
title: "Quarto Template"
author: "David Gerbing"
format: html
---

## Display a Dashboard

### Setup

A dashboard displays multiple figures and headers simultaneously. Probably the most common item in a dashboard is a figure generated by an analysis, such as an R analysis from an embedded R code chunk. Other possible items include what are called value boxes to highlight a specific value, free-form text, and tables of data.

Accomplish R dashboards via Quarto. The Quarto website displays a [gallery](https://quarto.org/docs/dashboards/examples/) of possibilities. The website also provides more detailed [instructions](https://quarto.org/docs/dashboards/). Here, we cover the basics.

To create a dashboard, begin your document (the `YAML` code) specifying the `format` as `dashboard`.

``` r
---
title: "Distribution of Salary"
author: "Me, Myself, and I"
format: dashboard
---
```

To use `lessR` to generate your visualizations, include the following three lines in the first chunk of R code.

``` r
library(lessR) 
style(suggest=FALSE, quiet=TRUE)   # turn off suggestions and text output 
style(lab_cex=1.6, axis_cex=1.3)   # enlarge axis labels and value labels
```

::: {.callout-tip title="Accessing the dashboard templates"}
You can construct dashboards by implementing the following steps in `Visual` mode. Or, open up the `.qmd` templates in RStudio, then go to `Source` mode and copy and paste into a new document or just duplicate the original `.qmd` document.
:::

### Basic Dashboard

Template: `R_dashboard.qmd`

This dashboard consists of four figures, each generated as a data visualization from a corresponding chunk of R code.

![Standard R dashboard.](images/DashBoard.png){#fig-dash alt="Standard R dashboard." width="450"}

By default, construct your dashboard row-by-row. To create a row in your Quarto document, enter the word `Row` as a second-level header with the specified height of the row. Then, follow the following four steps to create a row of information in your dashboard.

1.  Enter the word: Row

2.  Go to the Paragraph Style menu on the menu bar, right before the bullet point menu, usually with the word `Normal` displayed. Select `Header 2`. (Markdown code indicates a second-level header by two `#` signs preceding it.)

3.  Go to the `Format` menu and select `Edit Attributes...` at the bottom.

4.  Under the entry for `Other`, add `height=50%` or whatever percentage of the overall height of the window you wish for this row of the dashboard to occupy.

::: {.callout-tip title="Add content to the dashboard"}
Now that the row is declared, populate the row under the `Row` header by specifying one or more items to display on your dashboard.
:::

For example, if you place two items, such as R code chunks for data visualizations, under the row header you created, then that `Row` will contain two displays. If you have two rows, and two items under each row, then the dashboard will contain four separate displays as in @fig-dash.

### MarkDown Box Dashboard

Template: `R_MarkDownBox.qmd`

This dashboard consists of two data visualizations from the corresponding R code chunks and two free-form text boxes called MarkDown boxes.

![R dark themed dashboard with Mark Down Boxes.](images/MarkDownBox.png){#fig-mdb alt="R dark themed dashboard with Mark Down Boxes." width="450"}

To create a free-form markdown box, follow these steps.

1.  From the insert menu, select `Div…`.

2.  In the `Classes` field, enter `.card`.

3.  As an option, in the `Other` field, add a title with `title=xxx` where *xxx* is your title.

4.  In the gray box that appears, enter the content you wish to display, one or more sentences.

Place as many markdown boxes as you wish in the row, or interspersed with other content as well. The height of the markdown boxes and other content is determined by the height of the row set in the `Row` header. As always, move to `Source` mode to view the created markdown directly.

### Value Box Dashboard

Template: `R_ValueBox.qmd`

The value box prominently displays simple values within a dashboard, such as the bin width of histograms in @fig-valuebox. This dashboard consists of two value boxes and two data visualizations from R code.

![R dashboard with Value Boxes.](images/ValueBox.png){#fig-valuebox alt="R dashboard with Value Boxes." width="450"}

To create a value box, follow these steps.

1.  Enter your descriptive content within the desired `Row` for the value box and then select this content.

2.  From the insert menu, select `Div…`.

3.  In the `Classes` field, enter `.valuebox`.

4.  In the `Other` field, enter `icon=xxx` where *xxx* is your chosen icon, such as `caret-right-fill`.

5.  In the `Other` field, on a new line, enter `color=yyy` where *yyy* is your chosen color name.

6.  Below your content in the new gray box, enter the value to display as `` ` ``{`r} zzz` `` ` ``, where *zzz* is the value, which could be a constant or a variable. Enclose the expression in the backward single quote, <code>\`</code>, as shown.

The `title` is your choice, as are the `icon`, `color`, and the `value` to be displayed. Choose from more than 2000 [icons](https://icons.getbootstrap.com). Below are the recommended color names for the value box.
```

| Name  | <code>\|</code> | primary | secondary | success | info        | warning       | danger | light      |
|--------|--------|--------|--------|--------|--------|--------|--------|--------|
| Color | <code>\|</code> | Blue    | Gray      | Green   | Bright Blue | Yellow Orange | Red    | Light Gray |

: Recommended value box colors.
