rshinyr-markdownflexdashboard

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


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 ? enter image description here

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))

Solution

  • 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)
    

    result