Strzelaniny masowe: wyświetlanie pomocy

Warto zawsze zapewnić użytkownikom dodatkowy kontekst dotyczący aplikacji. Jednym ze sposobów jest dodanie przycisku About i wyświetlenie tych informacji w oknie dialogowym modalnym.

Właśnie to zrobimy w tym ćwiczeniu. Po kliknięciu przycisku „About" twoja aplikacja będzie wyglądać jak na poniższym zrzucie ekranu.

Aplikacja wyświetlająca czerwone kółka dla każdego incydentu strzelaniny masowej z detalami pojawiającymi się po kliknięciu kółka

Przypomnij sobie, że tekst „About" w oknie dialogowym modalnym możesz wyświetlić za pomocą poniższego fragmentu kodu:

showModal(modalDialog("About"))

To ćwiczenie jest częścią kursu

Tworzenie aplikacji internetowych z Shiny w R

Zobacz kurs

Instrukcje do ćwiczenia

UI: Dodaj przycisk akcji o nazwie show_about.
Server: Użyj observeEvent, aby wywołać wyświetlenie okna dialogowego modalnego za pomocą showModal(modalDialog(text_about, title = 'About')).

Interaktywne ćwiczenie praktyczne

Spróbuj tego ćwiczenia, uzupełniając ten przykładowy kod.

ui <- bootstrapPage(
  theme = shinythemes::shinytheme('simplex'),
  leaflet::leafletOutput('map', width = '100%', height = '100%'),
  absolutePanel(top = 10, right = 10, id = 'controls',
    sliderInput('nb_fatalities', 'Minimum Fatalities', 1, 40, 10),
    dateRangeInput(
      'date_range', 'Select Date', "2010-01-01", "2019-12-01"
    ),
    # CODE BELOW: Add an action button named show_about
    
  ),
  tags$style(type = "text/css", "
    html, body {width:100%;height:100%}     
    #controls{background-color:white;padding:20px;}
  ")
)

server <- function(input, output, session) {
  # CODE BELOW: Use observeEvent to display a modal dialog
  # with the help text stored in text_about.

  
  
  output$map <- leaflet::renderLeaflet({
    mass_shootings %>% 
      filter(
        date >= input$date_range[1],
        date <= input$date_range[2],
        fatalities >= input$nb_fatalities
      ) %>% 
      leaflet() %>% 
      setView( -98.58, 39.82, zoom = 5) %>% 
      addTiles() %>% 
      addCircleMarkers(
        popup = ~ summary, radius = ~ sqrt(fatalities)*3,
        fillColor = 'red', color = 'red', weight = 1
      )
  })
}

shinyApp(ui, server)

Edytuj i uruchom kod