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))
As a workaround (see above comments - there is no official support for tabPanel
s 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)