I'm struggling to get my dashboard layout to be formatted in a way that looks good.

I have a box that is not the full width of my dashboard and the plot that is inside of it is actually wider and sticks out of it. (although I do believe once I make a plotly graph it will work fine).

I'm using fillRow but it does not fill the entire row and only half of the page.

Here is my code.

library(shiny)
library(shinydashboard)


ui <- dashboardPage(
  dashboardHeader(),
  ## Sidebar content
  dashboardSidebar(
    sidebarMenu(
      menuItem("Overview",tabName = "Overview", icon = icon("tachometer-alt")),
      menuItem("Assessments",tabName = "Assessments", icon = icon("list"))
    )
  ),
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "Overview",
              # Boxes need to be put in a row (or column)
              fluidRow(
                valueBoxOutput("rate"),
                valueBoxOutput("count"),
                valueBoxOutput("users"),
              ),
              fluidRow(  
                box(title = "Title",
                    status = "primary",
                ),
                
                box(align = "center",
                    title = "Select Inputs",status = "warning", solidHeader = F,
                    selectInput("dropdown1", "Select Drilldown:", c(50,100,200)))
              ),
              fillRow(width = "100%",
                       box(
                         title = "Graph 1", status = "primary", solidHeader = TRUE, 
                         plotOutput("plot1", height = "50vh", width = "100vh")))
      ),
      tabItem(tabName = "Assessments",
              h2("Assessmnents tab content")
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$dropdown1)]
    hist(data)
  })
  
  output$instructions <- renderText("Company Name")
  
  output$rate <- renderValueBox({
    valueBox(
      value = 130,
      subtitle = "Overview 1",
      icon = icon("area-chart"),
      color =  "aqua"
    )
  })
  
  output$count <- renderValueBox({
    valueBox(
      value = 120,
      subtitle = "Overview 2",
      icon = icon("download"),
      color = "red"
    )
  })
  
  output$users <- renderValueBox({
    valueBox(
      value = 85,
      subtitle = "Overview 3",
      icon = icon("users"),
      color = "purple"
    )
  })
  
}

shinyApp(ui, server)

And a screen shot

My desired goal would be something like this

Is there any reccomended resources I can read to get better at shiny dashboard layouts and controlling the view?

CodePudding user response：

You need to use width = 12 in the box function. Additionally, to make sure the plot is always using the entire width of the box use width = "100%" in plotOutput.

fillRow(
  box(
    width = 12, 
    title = "Graph 1", 
    status = "primary", 
    solidHeader = TRUE, 
    plotOutput(
      "plot1", 
      height = "50vh", 
      width = "100%")
  )
)

The

For more clearer example, in the image above, i highlighted the fluidrow() in red and blue for column().