Tata letak dan tema

Membangun Aplikasi Web dengan Shiny di R

Kaelen Medeiros

Data Scientist

Tata letak default aplikasi Shiny

ui <- fluidPage(
  titlePanel("Histogram"),
  sliderInput('nb_bins', '# Bins', 5, 10, 5),
  plotOutput('hist')
)
server <- function(input, output, session){
  output$hist <- renderPlot({
    hist(faithful$waiting, 
         breaks = input$nb_bins, 
         col = 'steelblue')
  })
}
shinyApp(ui = ui, server = server)

Aplikasi menampilkan histogram waktu tunggu beserta slider untuk mengatur jumlah bin

Tata letak sidebar

ui <- fluidPage(
  titlePanel("Histogram"),
  sidebarLayout(
    sidebarPanel(sliderInput('nb_bins', 
                             '# Bins', 5, 10, 5)),
    mainPanel(plotOutput('hist'))
  )
)
server <- function(input, output, session){
  output$hist <- renderPlot({
    hist(faithful$waiting, breaks = input$nb_bins, 
         col = 'steelblue')
  })
}
shinyApp(ui = ui, server = server)

Aplikasi menampilkan histogram waktu tunggu di kanan serta slider untuk mengatur jumlah bin di kiri

Tata letak tab

Aplikasi menampilkan histogram waktu tunggu di kanan serta slider untuk mengatur jumlah bin di kiri

Aplikasi menampilkan histogram waktu tunggu di kanan serta slider untuk mengatur jumlah bin di kiri, dengan dua tab

Tata letak tab

ui <- fluidPage(
  titlePanel("Histogram"),
  sidebarLayout(
    sidebarPanel(sliderInput('nb_bins', '# Bins', 
                             5, 10, 5)),
    mainPanel(

      tabsetPanel(
        tabPanel('Waiting', 
                 plotOutput('hist_waiting')),
        tabPanel('Eruptions',
                 plotOutput('hist_eruptions'))
      )

    )
  )
)

server <- function(input, output, session){
  output$hist_waiting <- renderPlot({
    hist(faithful$waiting, 
         breaks = input$nb_bins, 
         col = 'steelblue')
  })
  output$hist_eruptions <- renderPlot({
    hist(faithful$eruptions, 
         breaks = input$nb_bins, 
         col = 'steelblue')
  })
}
shinyApp(ui = ui, server = server)

Pemilih tema

ui <- fluidPage(
  titlePanel("Histogram"),

  shinythemes::themeSelector(),

  sidebarLayout(
    sidebarPanel(sliderInput('nb_bins', '# Bins', 
                             5, 10, 5)),
    mainPanel(plotOutput('hist'))
  )
)
server <- function(input, output, session){
  output$hist <- renderPlot({
    hist(faithful$waiting, breaks = input$nb_bins, 
         col = 'steelblue')
  })
}
shinyApp(ui = ui, server = server)

Aplikasi menampilkan histogram waktu tunggu di kanan serta slider untuk mengatur jumlah bin, dan pemilih tema mengambang

Menambahkan tema

ui <- fluidPage(
  titlePanel("Histogram"),

  theme = shinythemes::shinytheme('superhero'),

  sidebarLayout(
    sidebarPanel(sliderInput('nb_bins', '# Bins', 
                             5, 10, 5)),
    mainPanel(plotOutput('hist'))
  )
)
server <- function(input, output, session){
  output$hist <- renderPlot({
    hist(faithful$waiting, breaks = input$nb_bins, 
         col = 'steelblue')
  })
}
shinyApp(ui = ui, server = server)

Aplikasi menampilkan histogram waktu tunggu di kanan serta slider untuk mengatur jumlah bin di kiri

Ayo berlatih!

Membangun Aplikasi Web dengan Shiny di R