Add a value box to tab panels already containing a plot using the flexdashboard package

Question

I’m beginning to learn how to create dashboards using the flexdashboard package. However, I have encountered an issue to add a value box using the valueBox function. In particular, how can I add a value box above the plot in Panel 1 and Panel 2 ?

Here is my code:

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    theme:
      version: 4
      bootswatch: minty
    orientation: columns
    source_code: embed
runtime: shiny
---

```{r global, include = FALSE}
rm(list=ls(all=TRUE))
library(ggplot2)
library(plotly)
library(flexdashboard)
library(shinydashboard)
library(shiny)
library(rmarkdown)

year <- seq(2006, 2023, 1)
value <- runif(length(year), min = 0, max = 25) 


```

Sidebar {.sidebar}
=====================================

**Sidebar 1**
```{r}

```

**Sidebar 2**
```{r}

```

Page 1
=======================================================================

Column {data-width=700}
-----------------------------------------------------------------------

### **Title 1**

```{r, fig.width = 5, fig.height= 10}
```

### **Title 2**

```{r, fig.width = 5, fig.height= 10}
```

Column {data-width=600}
-----------------------------------------------------------------------

### **Title 3**

```{r, fig.width = 24, fig.height= 6}

b <- flexdashboard::valueBox(1000, icon = "fa-line-chart",col="orange")

## Retrieve the plot
p <- plot(year, value)
rp <- renderPlot({p}, height = 400, width = 600, res = 50)

tabsetPanel(tabPanel("Panel 1", rp), tabPanel("Panel 2", rp))
```

I have tried the following code but it doesn’t work:

tabsetPanel(tabPanel("Panel 1", b, rp), tabPanel("Panel 2", b, rp))

Answer 1

As a workaround (see above comments - there is no official support for tabPanels in {flexdashboard}) here is how to create a similar layout using library(bslib), which provides us with modern UI components based on Bootstrap:

library(shiny)
library(bslib)
library(bsicons)
library(thematic)
library(datasets)

ui <- page_navbar(
  theme = bs_theme(version = 5, bootswatch = "darkly"),
  nav_spacer(),
  nav_panel(
    title = "Home",
    icon = bs_icon("house"),
    layout_sidebar(
      sidebar = sidebar("Sidebar"),
      layout_column_wrap(
        layout_column_wrap(
          width = "100%",
          card(
            card_header("A header"),
            markdown("Some text with a [link](https://github.com).")
          ),
          card(
            card_header("A header"),
            markdown("Some text with a [link](https://github.com).")
          )
        ),
        card(
          card_header("A header"),
          navset_tab(
            nav_panel(
              title = "One",
              p("First tab content."),
              layout_column_wrap(
                value_box(
                  title = "1st value",
                  value = "123",
                  showcase = bs_icon("bar-chart"),
                  theme = "purple",
                  p("The 1st detail")
                ),
                value_box(
                  title = "2nd value",
                  value = "456",
                  showcase = bs_icon("graph-up"),
                  theme = "teal",
                  p("The 2nd detail"),
                  p("The 3rd detail")
                ),
                value_box(
                  title = "3rd value",
                  value = "789",
                  showcase = bs_icon("pie-chart"),
                  theme = "pink",
                  p("The 4th detail"),
                  p("The 5th detail"),
                  p("The 6th detail")
                )
              ),
              plotOutput("plot")
            ),
            nav_panel(title = "Two", p("Second tab content.")),
            nav_panel(title = "Three", p("Third tab content"))
          )
        )
      )
    )
  ),
  nav_panel(
    title = "Empty page",
    icon = bs_icon("database"),
    tags$p('Empty page')
  ),
  title = "My App"
)

server <- function(input, output, session) {
  cat(paste("bootswatch_themes:", paste0(bootswatch_themes(), collapse = ", ")))
  thematic_shiny()
  output$plot <- renderPlot({
    ggplot(mtcars, aes(wt, mpg)) + geom_point() + ggtitle("My Plot") +
      theme(plot.title = element_text(hjust = 0.5))
  }, res = 96L)
}

shinyApp(ui = ui, server = server)