Wireframing

Riprendiamo l'esempio precedente del dashboard per i risultati di analisi di un torneo di calcio. Negli esercizi precedenti hai già impostato l'header e la sidebar.

In particolare, un pulsante nella sidebar è definito con menuItem() ed è contenuto all'interno di sidebarMenu(). Avrai notato che, per ora, questi pulsanti non fanno nulla. Ora collegherai questi pulsanti della sidebar a pagine diverse nel body della UI. Siamo ancora nella fase di wireframing, in cui decidi la posizione di ogni elemento. Ogni pagina nel body è definita da tabItem() e deve essere contenuta all'interno di tabItems.

I pacchetti shiny e shinydashboard sono già stati caricati per te. Inoltre, l'header del dashboard è già stato salvato come header.

Questo esercizio fa parte del corso

Creare dashboard con shinydashboard

Visualizza corso

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

library(shiny)
library(shinydashboard)

header <- dashboardHeader(
  title = "Analysis results for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",
               messageItem("Colleage", "Hello world!")),
  dropdownMenu(type = "notifications",
               notificationItem("Have you rested today?"),
               taskItem("Dashboard completion", value = 20)))

sidebar <- dashboardSidebar(
  sidebarMenu(
    width = 400,
    id = "pages",
    menuItem("Match details", tabName = "matches", icon = icon("futbol"),
             badgeLabel = "New content!", badgeColor = "green"),
    menuItem("Overall results", tabName = "overall", 
             menuSubItem("Charts", tabName = "charts"),
             menuSubItem("Data table", tabName = "datatable", icon=icon("file-excel"))),
    menuItem("A slider",  sliderInput("slider", "Number of goals", min=0, max=10, value = 2))
  )
)

body <- dashboardBody(
  # Link "matches" to an empty page in the body
  ___(
    ___(___, "Match information goes here")
  )
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)

Modifica ed esegui il codice