flexdashboard ::renderValueBox does not work in a Shiny app

Question

I'm trying to use flexdashboard::renderValueBox function in shinydashboard environment. However, the same works, but the boxes are not created. See:

I cannot use the shiny::box function:

box(valueBoxOutput(outputId = "box1", width = 3), title = "boxs"))

Why do I need the values ​​(like background color, icons and captions) to change according to the reactive object pred_1(). I also need to use hex colors (#color), which shinydashboard's valueBox function doesn't support.

My code:

library(shiny)
library(flexdashboard)
library(shinydashboard)
library(conflicted)
library(scales)
library(tibble)

conflict_prefer(name = "box", winner = "shinydashboard")
conflict_prefer(name = "valueBox", winner = "flexdashboard")
conflict_prefer(name = "valueBoxOutput", winner = "flexdashboard")
conflict_prefer(name = "renderValueBox", winner = "flexdashboard")

header <- dashboardHeader()

sidebar <- dashboardSidebar(
  sidebarMenu(

  id = "tabs", width = 300,
  
  menuItem("Analysis", tabName = "dashboard", icon = icon("list-ol"))
  
  )
)

body <- dashboardBody(

tabItems(
  
  tabItem(tabName = "dashboard", titlePanel("Analysis"), 
          
          fluidPage(
            
            column(2, 

                   box(title = "Analysis", width = 75, 
                       sliderInput(
                         inputId = 'aa', label = 'AA', 
                         value = 0.5 * 100, 
                         min = 0 * 100, 
                         max = 1 * 100, 
                         step = 1
                       ), 
                       
                       sliderInput(
                         inputId = 'bb', label = 'BB', 
                         value = 0.5 * 100, 
                         min = 0 * 100, 
                         max = 1 * 100, 
                         step = 1
                       ), 
                       
                       sliderInput(
                         inputId = 'cc', label = 'CC', 
                         value = 2.5, min = 1, max = 5, step = .15
                       ), 
                       
                       sliderInput(
                         inputId = 'dd', label = 'DD', 
                         value = 2.5, min = 1, max = 5, step = .15
                       )
                   )
            ), 
            
            column(8, 
                   valueBoxOutput(outputId = "box1", width = 3), title = "boxs")
             )
          )
       )
    )

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output, session) {
  
  ac <- function(aa, bb, cc, dd) {
    (aa + cc) + (bb ^ dd)
  }
  
  reac_1 <- reactive({
    tibble(
      aa = input$aa, 
      bb = input$bb, 
      cc = input$cc, 
      dd = input$dd
    )
  })
  
  pred_1 <- reactive({
    temp <- reac_1()
    ac(
      aa = input$aa, 
      bb = input$bb, 
      cc = input$cc, 
      dd = input$dd
    )
  })
  
  output$box1 <- renderValueBox(
    expr = valueBox(
      value = scales::number(x = pred_1() / 100, accuracy = 0.01), 
      caption = ifelse(test = pred_1() / 100 <= 2.33, yes = 'AAAAAAAAAA', 
                       ifelse(test = pred_1() / 100 <= 3.67, yes = 'BBBBBBBBB', 
                              no = 'CCCCCCCCCC')), 
      color = ifelse(test = pred_1() / 100 <= 2.33, yes = '#020202', 
                     ifelse(test = pred_1() / 100 <= 3.67, yes = '#000000', 
                            no = '#006cba')), 
      icon = ifelse(test = pred_1() / 100 <= 2.33, yes = 'fa-times-circle', 
                    ifelse(test = pred_1() / 100 <= 3.67, yes = 'fa-exclamation-circle', 
                           no = 'fa-check-circle'))
    )
  )
}

shinyApp(ui, server)

Answer 1

I can make it to work with shinydashboard::valueBox

library(shiny)
library(flexdashboard)
library(shinydashboard)
library(scales)
library(tibble)

header <- dashboardHeader()

sidebar <- dashboardSidebar(
  sidebarMenu(
    
    id = "tabs", width = 300,
    
    menuItem("Analysis", tabName = "dashboard", icon = icon("list-ol"))
    
  )
)

body <- dashboardBody(
  
  tabItems(
    
    tabItem(tabName = "dashboard", titlePanel("Analysis"), 
            
            fluidPage(
              
              column(2, 
                     
                     box(title = "Analysis", width = 75, 
                         sliderInput(
                           inputId = 'aa', label = 'AA', 
                           value = 0.5 * 100, 
                           min = 0 * 100, 
                           max = 1 * 100, 
                           step = 1
                         ), 
                         
                         sliderInput(
                           inputId = 'bb', label = 'BB', 
                           value = 0.5 * 100, 
                           min = 0 * 100, 
                           max = 1 * 100, 
                           step = 1
                         ), 
                         
                         sliderInput(
                           inputId = 'cc', label = 'CC', 
                           value = 2.5, min = 1, max = 5, step = .15
                         ), 
                         
                         sliderInput(
                           inputId = 'dd', label = 'DD', 
                           value = 2.5, min = 1, max = 5, step = .15
                         )
                     )
              ), 
              
              column(8, 
                     shinydashboard::valueBoxOutput(outputId = "box1", width = 3), title = "boxs")
            )
    )
  )
)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output, session) {
  
  ac <- function(aa, bb, cc, dd) {
    (aa + cc) + (bb ^ dd)
  }
  
  reac_1 <- reactive({
    tibble(
      aa = input$aa, 
      bb = input$bb, 
      cc = input$cc, 
      dd = input$dd
    )
  })
  
  pred_1 <- reactive({
    temp <- reac_1()
    ac(
      aa = input$aa, 
      bb = input$bb, 
      cc = input$cc, 
      dd = input$dd
    )
  })
  
  output$box1 <- shinydashboard::renderValueBox(
    shinydashboard::valueBox(
      value = scales::number(x = pred_1() / 100, accuracy = 0.01), 
      subtitle =ifelse(test = pred_1() / 100 <= 2.33, yes = 'AAAAAAAAAA', 
                       ifelse(test = pred_1() / 100 <= 3.67, yes = 'BBBBBBBBB', 
                              no = 'CCCCCCCCCC')), 
      color = ifelse(test = pred_1() / 100 <= 2.33, yes = 'red', 
                     ifelse(test = pred_1() / 100 <= 3.67, yes = 'green', 
                            no = 'blue')), 
      icon = icon(ifelse(test = pred_1() / 100 <= 2.33, yes = 'fa-times-circle', 
                    ifelse(test = pred_1() / 100 <= 3.67, yes = 'fa-exclamation-circle', 
                           no = 'fa-check-circle')))
    )
  )
}

shinyApp(ui, server)