Sparatorie di massa: mostra guida

È sempre utile fornire a chi usa la tua app un po' di contesto in più. Un modo per farlo è aggiungere un pulsante About all’app e mostrare il contesto come finestra modale.

È esattamente quello che faremo in questo esercizio. La tua app assomiglierà all’immagine in questo screenshot quando l’utente clicca sul pulsante "About".

An app displaying red circles for each mass shooting incident with details appearing on clicking the circle

Ricorda che puoi mostrare il testo 'About' in una finestra modale usando il frammento:

showModal(modalDialog("About"))

Questo esercizio fa parte del corso

Creare applicazioni web con Shiny in R

Visualizza corso

Istruzioni dell'esercizio

UI: Aggiungi un pulsante azione chiamato show_about.
Server: Usa observeEvent per attivare la visualizzazione di una finestra modale con showModal(modalDialog(text_about, title = 'About')).

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

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)

Modifica ed esegui il codice