LoslegenKostenlos starten

UFO-Sichtungen: Tab-Layout

So wie die App jetzt ist, wirkt sie etwas unübersichtlich, weil der Graph über der Tabelle liegt. Da es sich um ein Dashboard handelt, wäre es schön, die beiden Ausgaben zu trennen.

Der letzte Schritt beim Erstellen deines Dashboards ist, die von dir erstellten plotOutput()- und tableOutput()-Elemente zu nehmen und ein Tab-Layout hinzuzufügen.

Diese Übung ist Teil des Kurses

<Kurs>Webanwendungen mit Shiny in R entwickeln</Kurs>
Kurs ansehen

Übungsanweisungen

  • Füge das Tab-Panel-Layout und zwei Tabs hinzu. Der erste sollte den Plot enthalten, der zweite die Tabelle. Benenne sie gern so, wie es für dich am meisten Sinn ergibt!

Interaktive praktische Übung

Versuche dich an dieser Übung, indem du diesen Beispielcode vervollständigst.

ui <- fluidPage(
  titlePanel("UFO Sightings"),
  sidebarPanel(
    selectInput("state", "Choose a U.S. state:", choices = unique(usa_ufo_sightings$state)),
    dateRangeInput("dates", "Choose a date range:",
      start = "1920-01-01",
      end = "1950-01-01"
    )
  ),
  # MODIFY CODE BELOW: Create a tab layout for the dashboard
  mainPanel(
    plotOutput("shapes"),
    tableOutput("duration_table")
  )
)

server <- function(input, output) {
  output$shapes <- renderPlot({
    usa_ufo_sightings %>%
      filter(
        state == input$state,
        date_sighted >= input$dates[1],
        date_sighted <= input$dates[2]
      ) %>%
      ggplot(aes(shape)) +
      geom_bar() +
      labs(
        x = "Shape",
        y = "# Sighted"
      )
  })

  output$duration_table <- renderTable({
    usa_ufo_sightings %>%
      filter(
        state == input$state,
        date_sighted >= input$dates[1],
        date_sighted <= input$dates[2]
      ) %>%
      group_by(shape) %>%
      summarize(
        nb_sighted = n(),
        avg_duration_min = mean(duration_sec) / 60,
        median_duration_min = median(duration_sec) / 60,
        min_duration_min = min(duration_sec) / 60,
        max_duration_min = max(duration_sec) / 60
      )
  })
}

shinyApp(ui, server)
Code bearbeiten und ausführen