Éléments interactifs dans un shinydashboard

Créer des tableaux de bord avec shinydashboard

Png Kee Seng

Researcher

Scénario

Nous travaillons pour une agence de voyages à Londres.
Les touristes ont besoin d'un logement.
Que pouvons-nous faire pour les aider ?

Un graphique de Londres

Nombre d'annonces dans une fourchette de prix
La proportion de chambres privées
Prix moyens
Quelques graphiques
Un tableau de données
Une carte de Londres

¹ Image par Freepik

Croquis du tableau de bord

Un croquis du tableau de bord.

Construire le tableau de bord : créer l'ossature

Réaliser un wireframe en créant un shinydashboard vide avec un titre et des boutons de barre latérale.

header <- dashboardHeader(
  title = "Home rental listings")
sidebar <- dashboardSidebar()
body <- dashboardBody()
ui <- dashboardPage(header, 
                    sidebar, 
                    body)

server <- function(input, output) {}

shinyApp(ui, server)

Construire le tableau de bord : ajouter des ValueBox

Ajout de valueBoxes pour le wireframe.

Dans body :

fluidRow(
    valueBoxOutput(outputId = "count"),
    valueBoxOutput(outputId = "prop"),
    valueBoxOutput(outputId = "avg"))

Dans server :

output$count <- renderValueBox({
    valueBox(..., icon = ...)})
output$prop <- renderValueBox(...)
...

Construire le tableau de bord : ajouter des contrôles

Ajout d'entrées — commandes pour les utilisateurs.

Dans body :

box(
    side = "right", ...,
    sliderInput(inputId = "range",
        label = "Select price range:",
        min = 0,
        max = 25000,
        value = c(0,25000))
        ))

Mettre à jour server, en utilisant input$range[1] et input$range[2]

Construire le tableau de bord : ajouter des graphiques interactifs

Ajout de graphiques interactifs avec plotly.

Dans body :

plotlyOutput("plots", 
    height = 500, 
    width = 600)

Dans server :

output$plots <- renderPlotly({
      ...
  })

Construire le tableau de bord : ajouter un autre graphique

Ajout d'un deuxième graphique sur la même page, accessible via un menu déroulant.

Dans body :

selectInput(inputId = "select", 
    label = "Select group:", 
    choices = c("Neighbourhood", 
            "Room Type"))

Dans server :

output$plots <- renderPlotly({
    if (input$select == ...){plot1}
    else if(input$select == ...){plot2}
  })

Construire le tableau de bord : ajouter une description et des onglets

Ajout d'un texte explicatif pour ce tableau de bord.

Dans body :

box(side = "right", ...,
    title = "Welcome to London!", 
    "...")

Mise à jour dans body :

tabBox(id = "tabset", ...,
    tabPanel("Charts", ...),
    tabPanel("Data table", ...)

Construire le tableau de bord : ajouter des tableaux interactifs

Ajout de tableaux interactifs avec les fonctions dataTable.

Nous pouvons utiliser des fonctions shiny.

Dans body :

dataTableOutput("table")

Dans server :

output$table <- 
    renderDataTable(listings)

Construire le tableau de bord : ajouter une carte interactive

Ajout d'une carte leaflet dans le tableau de bord.

Dans sidebar :

sidebarMenu(
    menuItem("Charts", ...),
    menuItem("Map", ...))

Dans body :

leafletOutput("map",...)

Dans server :

output$map <- renderLeaflet(map)

Passons à la pratique !

Créer des tableaux de bord avec shinydashboard