How to add flexdashboard style valueBox in Quarto?

Question

I have a Quarto qmd file with the below code to display a valueBox.

---
title: "My Dashboard"
output: 
  flexdashboard::flex_dashboard:
  orientation: rows
---

```{r setup, include=FALSE}
library(dygraphs)
library(flexdashboard)
```

### Data

```{r}
valueBox("42", color = "yellow", icon = "fa-calendar", caption = "cases of soda")
```

---

The code is rendered as below without the valueBox being created.

---

Any thoughts on how to render the valueBox like it does below in rmd files?

Manysided

According to quarto.org/docs/faq/rmarkdown.html support for flexdashboard is planned for quarto but not implemented yet. – Kipton

Yes I've seen that. I was looking for a workaround to achieve the same. – Manysided

Check out valuebox from the package bslib, this renders valueboxes in colors and with sparklines etc if so desired: rstudio.github.io/bslib/articles/value-boxes.html – Dysentery

Or see here. – Warfare

Answer 1

valuebox is available as of Quarto 1.4.451. Within a row include a second code chunks for a second column. Implementation offers access to bootstrap icons.

Add to a quarto document as follows:

---
title: "My Dashboard"
format: dashboard
---

Figure Sizes

```{r}
#| component: valuebox
#| title: "cases of soda"

list(
  icon = "calendar",
  color = "yellow",
  value = 42
)

```

```{r}
#| component: valuebox
#| title: "cases of soda"
list(
  icon = "calendar",
  color = "yellow",
  value = 42
)
```

Dogy

Can the value be rendered dynamically based on UI input? – Cunning

Answer 2

#| valuebox cannot be rendered dynamically. At least I couldn't find a way. My solution based on described here.

---
title: "Count N"
format: dashboard
server: shiny
---

```{r}
#| context: setup

library(shiny)
library(tidyverse)
library(bslib)
library(bsicons)

dataset <- diamonds

```



#  {.sidebar width="20%"}


```{r}

sliderInput("myValue", label = h4("Data Selecter"),  value=1, min = 1,  max = 10,  step = 1)


```



```{r}
#| context: server

caratFilter <- reactive({
  dataset |> slice(input$myValue) |> select(carat) |> unlist() |> first()

})

output$caratValue <- renderText({ caratFilter() })


```


# Page 1


### Row

```{r}

value_box(
  
  title = "Carat",
  value = textOutput("caratValue"),
  showcase =bs_icon("bank2"),
  theme = "teal"
)


```

Silkaline