Shiny Dashboard formatting issue

Question

   library(needs)
needs(
    shiny,
    ggplot2,
    tidyverse,
    shinydashboard,
    DT
)
source("~/functions.R",local = T)

# Define UI for application that draws a histogram
header = dashboardHeader(
    # tags$li(class = "dropdown",
    #         tags$style(".main-header {max-height: 80px}"),
    #         tags$style(".main-header .logo {height: 80px}")),
    #title = tags$img(src='logo.png',height='100',width='200')
    
)

sidebar = dashboardSidebar(
    menuItem("Full data",tabName="Data",icon=icon("table"),startExpanded = F,
             fileInput("file","Upload CSV files",multiple=TRUE,accept=("text/comma"))),
    menuItem(text = 'Simulate',tabName = 'simulate',icon=icon('chart-line'),
             helpText('Simulation Parameters'),
             radioButtons('type',"Please choose the type of analysis:",choices = list("Gender" = 1,"US Minority Status" = 2),selected = 1),
             sliderInput("numSims","Number of simulations:",min = 1, max = 10000,step = 1000,value = 10000),
             sliderInput("numYears","Number of years to simulate:",min = 1,max = 5,value = 3,step = 1),
             numericInput('turnover','Total Turnover', value = 10),
             sliderInput('promoRate','Set Promo rate', value = 25, min = 1, max = 100, step = 5),
             sliderInput('growthRate','Set growth rate',value = 0,min=0,max=100,step = 1),
             helpText('0% Growth Rate assumes a flat, constant headcount'),
             actionButton('go',label  = "Update"),width = 4)
)
body <- dashboardBody(
    tabItems(
        tabItem(
            tabName = 'data',
                fluidRow(wellPanel(
                    fileInput(
                        inputId = 'file',
                        label = "File Upload:",
                        accept = c("csv", ".csv")))),
                    wellPanel(DT::dataTableOutput('table'))),
        tabItem(
            tabName = 'simulate',
                fluidRow(
                    wellPanel(
                        DT:::dataTableOutput('simDataTable')
                ))
        )
        
        ))



ui = shinydashboard::dashboardPage(header,sidebar,body,skin='red')

server = server <- function(input, output) {
    options(shiny.maxRequestSize = 30 * 1024 ^ 2)
    
    

    dataset <- reactive({
        req(input$file)
        read.csv(input$file$datapath)  
        
    })
    
    output$table = renderDataTable(dataset(), filter = 'top',options = list(scrollX = TRUE))
    
    simulate = eventReactive(input$go,{
        req(input$numSims,input$type)
        x = dataset()
        temp = dataSim(x,type=input$type,
                       numSims = input$numSims)
    })
    
    simulateAvg = reactive({
        x = simulate()
        y = x %>% group_by(Role) %>% summarise(mean(freq))
    })
    
    output$simDataTable = renderDataTable(simulateAvg())
    
}



shinyApp(ui,server)

I'm having some trouble with two issues.

1.) The formatting of the shiny dashboard is odd. The text on the side bar seems very compacted and not what other shiny dashboards look like. I'm not sure what the issue is.

2.) After upload, a table is suppose to appear on the dashboard body but it doesn't

3.) Once a table appears and I head to the simulate tab, will the dashboard body change accordingly and display the simulateAvgData set that I populated?

The dataSim function is from the source file on top. I don't receive any errors when I run anything so looking for guidance and inputs to whether or not this shiny dashboard work as intended. I'm newer to the dashboard packages from shiny.

YBS YBS · Accepted Answer · 2020-11-09T22:16:30

You have a couple of issues here. You do not need a fileInput statement inside dashboardBody. Next, within dashboardSidebar, you can define fileInput at the top level of menuItem (option 1 in the code below), or a sub-level of the first menuItem (option 2 below). In either case, you need to have a menuItem with a tabName where you want to display the file that was read in. Once you read the input file, you need to select the appropriate tab to see the displayed data. Try this code

header <- dashboardHeader()

### option 1:  fileInput at the first menuItem level
# sidebar <- dashboardSidebar(width=320,
#                             menuItem("Full data",tabName="Data",icon=icon("table"),startExpanded = F),
#                             fileInput("file","Upload CSV files",multiple=FALSE,accept=c("csv", ".csv"))
# )
### option 2 - fileInput as a subitem
sidebar <- dashboardSidebar(width=320,
                            menuItem("Full data",tabName="noData",icon=icon("table"),startExpanded = F,  ##  data not displayed for this tabName
                              menuItem("Full_data",tabName="Data", icon=icon("table")),
                              fileInput("file","Upload CSV files",multiple=FALSE,accept=c("csv", ".csv")))

)

body <- dashboardBody(
  tabItems(
    tabItem(
      tabName = 'Data',
      fluidRow(DTOutput('table')))
  ))

ui <- shinydashboard::dashboardPage(header,sidebar,body,skin='red')
server <- function(input, output, session) {

  data1 <- reactive({
    req(input$file)
    data <- read.csv(input$file$datapath,sep = ",", header = TRUE)
  })
  
  output$table <- renderDT(data1())
  
}

shinyApp(ui,server)

Shiny Dashboard formatting issue

1 Answers