Appsilon / shiny.fluent

Microsoft's Fluent UI for Shiny apps
https://appsilon.github.io/shiny.fluent
276 stars 33 forks source link

valueBox and infoBox behavior #134

Closed RealCoChenchao closed 2 years ago

RealCoChenchao commented 2 years ago

Tried to implement the valueBox and infoBox under current fluidPage, but they behaved very weirdly.

Example application or steps to reproduce the problem

if (interactive()) {
  library(shiny)
  library(semantic.dashboard)
  library(shiny.fluent)

  ui <- fluidPage(
    dashboardHeader(title = "Dynamic boxes"),
    dashboardSidebar(),
    dashboardBody(
      fluidRow(
        box(width = 2, actionButton("count", "Count")),
        infoBoxOutput("ibox"),
        valueBoxOutput("vbox")
      )
    )
  )

  server <- function(input, output) {
    output$ibox <- renderInfoBox({
      infoBox(
        "Title",
        input$count,
        icon = icon("credit-card")
      )
    })
    output$vbox <- renderValueBox({
      valueBox(
        "Title",
        input$count,
        icon = icon("credit-card")
      )
    })
  }

  shinyApp(ui, server)
}
jakubsob commented 2 years ago

Hi @RealCoChenchao,

What is this weird behavior? It's easier to answer questions if we know where to look for. I assume it's that components are not rendered properly. This is due to the fact that you're using semantic.dashboard components which require to be inside of dashboard_page which attaches all dependencies.

library(shiny)
library(semantic.dashboard)
library(shiny.fluent)

ui <- dashboard_page(
  dashboardHeader(title = "Dynamic boxes"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      box(width = 2, actionButton("count", "Count")),
      infoBoxOutput("ibox"),
      valueBoxOutput("vbox")
    )
  )
)

server <- function(input, output) {
  output$ibox <- renderInfoBox({
    infoBox(
      "Title",
      input$count,
      icon = icon("credit-card")
    )
  })
  output$vbox <- renderValueBox({
    valueBox(
      "Title",
      input$count,
      icon = icon("credit-card")
    )
  })
}

shinyApp(ui, server)

Does this example work as expected for you?

I don't see anything related to shiny.fluent in your example. If there's more to this question I'll transfer the issue to semantic.dashboard repository.

RealCoChenchao commented 2 years ago

@jakubsob Thanks for your quick response. Sorry about the impulsive post here. I think the issue was infoBox or valueBox from either shinydashboard or semantic.dashboard does not work under fluidPage.