Dashboard sidebar help

Hi guys!

I have a sidebar on dashboard with many Inputs.
I want do separate the inputs on my sidebar to click and drop them.

Each "hr()" in my code is a drop menu that I want to create.

library(shiny)
library(shinydashboard)
library(plotly)
library(qcc)
library(ggplot2)
library(SixSigma)
#library(ROracle)


#Declaracao da Matriz Transporta para o QCC
histograma <- c(600, 615, 620, 622, 603, 607, 627, 605, 641, 613, 613, 625, 635, 646, 636, 631, 620, 621, 635, 608, 629, 607, 608, 615, 632, 643)
histograma = matrix(histograma, nrow = 1, ncol = 26, byrow = TRUE)
a = histograma

mtcars

dashboardPage(
  
  dashboardHeader (title= "Limite de Escoamento e Capabilidade"),
  

    dashboardSidebar(width = 300,
      
      # Range de Selecao de Data
      dateRangeInput("dates", 
                     label = ("Periodo"),
                     start = Sys.Date() - 90, end = Sys.Date() - 1,
                     format = "dd/mm/yyyy",
                     language = "pt-BR",
                     separator = "ate"
                     
                     ),
      hr(),
      
      
      #Entrada de Descricao do Aco. VERIFICAR QUE NEM TODAS SAO APENAS NUMERICAS
      numericInput(inputId= "diametro", label= "Diametro do Aco:", value= 0),
      
      numericInput(inputId= "parede", label= "Parede:", value= 0),
      
      numericInput(inputId= "grau", label= "Grau:", value= 0),
      
      numericInput(inputId= "aqa", label= "AQA:", value= 0),
      
      hr(),
      
      
      #Paradas
      numericInput(inputId= "hf1", label= "Tempo Excessivo:", value= 0),
      
      numericInput(inputId= "tf1", label= "TF1:", value= 0),
      
      numericInput(inputId= "tf2", label= "TF2:", value= 0),
      
      hr(),
      
      
      #Entrada Manual dos Limites Inferior e Superior
      numericInput(inputId= "lininf", label= "Limite Inferior (YS):", value= 0),
      
      numericInput(inputId= "linsup", label= "Limite Superior (YS):", value= 0),
      
      hr(),
      
      
      
      #Escolha do Componente Quimico por selecao. OS VALORES MINIMO E MAXIMOS
      #SERAO BUSCADOS PELO NUMERO DE CADA COMPONENTE NO BANCO. OU SEJA, ELE VAI VARIAR
      sliderInput("valmolibidenio", "Valor de Molibidenio:",
                  min = 1, max = 1000,
                  value = c(200,500)),
      
      sliderInput("valtitanio", "Valor de Titanio:",
                  min = 1, max = 1000,
                  value = c(200,500)),
      
      sliderInput("valnitrogenio", "Valor de Nitrogenio:",
                  min = 1, max = 1000,
                  value = c(200,500)),
      
      sliderInput("valcromo", "Valor de Cromo:",
                  min = 1, max = 1000,
                  value = c(200,500)),
      
      sliderInput("valcarbonoequivalente", "Valor de Carbono Equivalente:",
                  min = 1, max = 1000,
                  value = c(200,500)),
      
      hr(),
      
      
      #Texto que ajuda e especifica os codigos
      helpText("Os campos nao precisam necessariamente estar todos preenchidos para",
               "realizar a busca.")
      
      
    
    ),
    
    dashboardBody( 
      tabsetPanel(type= "tabs",
      
        tabPanel("Grafico",
                 plotOutput("histograma"),
                 textOutput("diametro"),
                 textOutput("parede"),
                 textOutput("grau"),
                 textOutput("aqa")
                 ),
                  
        tabPanel("Dados do Banco",img(src = "vsbimg.png", height = 250, width = 450, align = "center"),
      br(),
      
        h4("Dados de Saida", align = "center")),
      
      

        tabPanel("Texto",
                 textOutput("dates")
                 )
      
      
      
      
)
      
      
      
      
    )
    
    
    
    
  )



Actually, the layout is this

How can I click and drop the field "Date"... click and drop the fields "Diametro, Parede, Grau, AQA"...

Really thx!

You can use sidebarMenu() and menuItem() to accomplish what you want. Here's a single app that shows how to use it:

library(shiny)
library(shinydashboard)
library(plotly)
library(qcc)
library(ggplot2)
library(SixSigma)
#library(ROracle)


#Declaracao da Matriz Transporta para o QCC
histograma <- c(600, 615, 620, 622, 603, 607, 627, 605, 641, 613, 613, 625, 635, 646, 636, 631, 620, 621, 635, 608, 629, 607, 608, 615, 632, 643)

histograma = matrix(histograma,
                    nrow = 1,
                    ncol = 26,
                    byrow = TRUE)

a = histograma

ui <- dashboardPage(
    dashboardHeader (title = "Limite de Escoamento e Capabilidade"),
    
    dashboardSidebar(width = 300,
                     sidebarMenu( # Create a sidebar menu
                         menuItem( # Add a menu item
                             text = "Periodo",
                             tabName = "periodo",
 # Insert your inputs within the menuItem
                             # Range de Selecao de Data
                             dateRangeInput(
                                 "dates",
                                 label = ("Periodo"),
                                 start = Sys.Date() - 90,
                                 end = Sys.Date() - 1,
                                 format = "dd/mm/yyyy",
                                 language = "pt-BR",
                                 separator = "ate"
                                 
                             ) # /dateRangeInput
                         ) # /menuItem 
                     ) # /sidebarMenu
                ), # dashboardSidebar
    
    dashboardBody(tabsetPanel(
        type = "tabs",
        
        tabPanel(
            "Grafico",
            plotOutput("histograma"),
            textOutput("diametro"),
            textOutput("parede"),
            textOutput("grau"),
            textOutput("aqa")
        ),
        
        tabPanel(
            "Dados do Banco",
            img(
                src = "vsbimg.png",
                height = 250,
                width = 450,
                align = "center"
            ),
            br(),
            
            h4("Dados de Saida", align = "center")
        ),
        
        
        
        tabPanel("Texto",
                 textOutput("dates"))
        
    ))
    
)

server <- function(input, output, session) {
}

shinyApp(ui = ui, server = server)

I would also recommend reading the documentation so you can learn how to use icons and tabs.

1 Like

It works! Thanks!
I did the same for the other tabs.

1 Like