Intro

Dans le post précédent sur Shiny ( ici), nous nous sommes concentrés sur les principales fonctions pour démarrer et construire une application complète.

Dans ce post, nous allons nous concentrer uniquement sur l’interface utilisateur (UI) et examiner plus de possibilités.

Rappelons-nous que :

• Nous avons construit l’interface utilisateur dans une fonction fluidPage()
• Nous avons utilisé un type de mise en page pour afficher une barre latérale sur la gauche et un panneau principal
• Nous avons utilisé différents types d’entrées (input) et de sorties (output).

Nous allons :

• Comprendre la mise en page fluidPage pour construire une mise en page plus personnalisée
• Passer en revue plus d’entrées
• Personnaliser l’apparence avec de nouveaux thèmes

Disposition de la barre latérale (sidebar layout)

L’une des présentations les plus courantes est la sidebar Layout, qui a une fonction dédiée sidebarLayout(), avec deux paramètres, le sidebarPanel() qui contient les entrées et le mainPanel() qui contient les sorties.

library(shiny)

ui <- fluidPage(
  titlePanel("My application"),
  sidebarLayout(
    sidebarPanel("My sidebar"),
    mainPanel("My content")
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

utiliser une barre latérale

Par défaut, la barre latérale représente 1/3 de l’écran et le panneau principal 2/3. Il peut être modifié en utilisant l’argument ‘width’. Notez que la largeur totale est de 12, donc pour obtenir 1/2, changez la largeur à 6.

ui <- fluidPage(
  titlePanel("My application"),
  sidebarLayout(
    sidebarPanel("My sidebar", width = 6),
    mainPanel("My content", width = 6)
  )
)


shinyApp(ui, server)

barre latérale avec une largeur différente

sidebarLayout() est une mise en page prête à l’emploi dans Shiny, qui est utilisée dans une mise en page de type fluidePage.

Mais vous pouvez aller plus loin dans la manière dont vous souhaitez présenter votre application en créant votre propre mise en page avec fluidePage et des panneaux, menus et onglets.

Mise en page fluidePage

Une mise en page fluidePage est composée de lignes, chacune d’elles pouvant être divisée par des colonnes.

Pour créer des lignes, nous utilisons la fonction fluidRow() comme ceci :

ui <- fluidPage(

  titlePanel("My application"),
  
  fluidRow(
    "My first row"
  ),
  fluidRow(
    "My second row"
  )
  
)

shinyApp(ui, server)

utilisation de fluidrow

Pour créer une colonne, nous utilisons la fonction column() dans un fluidRow() (ou un fixedRow()).

La largeur d’une colonne ne peut pas dépasser 12, comme la somme de toute la largeur de la colonne. Ainsi par exemple, si nous ajoutons une colonne de largeur 4, et une colonne de largeur 3, il y aura un espace vide de 5 à droite.

La fonction de colonne a également un paramètre offset pour décaler les colonnes sur la droite.

Regardons un exemple :

ui <- fluidPage(
  titlePanel("My application"),
  fluidRow(
    column(4,
      textInput("text1", "Enter something")     
    ),
    column(3,
      textInput("text2", "Enter something else")     
    )
  ),
  fluidRow(
    column(3,
      textInput("text3", "Enter another thing"),
      offset = 9
    )
  )
)

shinyApp(ui, server)

fluidrow avec des colonnes pour une mise en page plus avancée

Pour rappel, une fluidePage est un système de grille, où les éléments peuvent être placés sur l’axe vertical par ligne, et sur l’axe horizontal par colonne sur une plage de 12 unités de largeur.

comprendre les mises en page en shiny

Panneaux

Les panneaux sont utilisés pour regrouper des éléments, soit pour une question d’aspect, soit parce qu’il existe une logique fonctionnelle.

wellPanel

La fonction wellPanel() regroupe les éléments inclus à l’intérieur du panneau et les affiche avec une bordure et un arrière-plan.

ui <- fluidPage(
  
  titlePanel("My application"),
  
    fluidRow(
      column(5,
        wellPanel(
            textInput("text1", "Enter something"),     
            textInput("text2", "Enter something else")     
        ) #wellPanel
      ),
      column(3,
        textInput("text3", "Enter another thing")
      )
   )
  
)

shinyApp(ui, server)

regroupement d’entrées avec des wellPanels

Onglets (tabPanel)

Nous avons vu un exemple d’utilisation de différents onglets pour afficher le résultat dans le post précédent.

Cela se fait facilement en utilisant la fonction tabsetPanel() pour envelopper tout le code des panneaux, et tabPanel() pour chaque onglet.

tabPanel() a deux paramètres :

• le nom de l’onglet à afficher
• le code pour la sortie (output)

library(palmerpenguins)

ui <- fluidPage(
  
  sliderInput(inputId = "bill_length", label = "Select the range of bill length?", value = c(40,50), min = 32, max = 60),
  
    tabsetPanel(
      tabPanel(title = "Plot",
               plotOutput("penguin_plot")
               ),
      tabPanel(title = "Table",
               tableOutput("penguin_table")
               )
    )


)

server <- function(input, output){
  
  data <- reactive({
      subset(penguins, bill_length_mm > input$bill_length[1] & bill_length_mm < input$bill_length[2])
  })
  
  output$penguin_plot <- renderPlot({
    plot(data()$bill_depth_mm, data()$bill_length_mm, col = data()$species)
  })
  
  output$penguin_table <- renderTable({
    data()
  })
}

shinyApp(ui, server)

en utilisant différents onglets

Menu - Liste de navigation

Nous pourrions vouloir afficher la sélection de l’onglet sous forme de menu sur la barre latérale plutôt que sur le dessus. Cela peut être fait avec navlistPanel() au lieu de tabsetPanel().

Avec navlistPanel, vous pouvez également ajouter un en-tête pour regrouper le panneau sous différentes catégories comme le montre l’exemple suivant :

ui <- fluidPage(
  
      sliderInput(inputId = "bill_length", label = "Select the range of bill length?", value = c(40,50), min = 32, max = 60),
    
      navlistPanel(
        "Penguins",
        tabPanel(title = "Plot",
                 plotOutput("penguin_plot")
                 ),
        tabPanel(title = "Table",
                 tableOutput("penguin_table")
                 ),
        "History",
          tabPanel(title = "Penguin's life",
                 textOutput("penguin_text")
                 )
      )

)


server <- function(input, output){
  
  data <- reactive({
      subset(penguins, bill_length_mm > input$bill_length[1] & bill_length_mm < input$bill_length[2])
  })
  
  output$penguin_plot <- renderPlot({
    plot(data()$bill_depth_mm, data()$bill_length_mm, col = data()$species)
  })
  
  output$penguin_table <- renderTable({
    data()
  })
  
  output$penguin_text <- renderText({
    "Let me introduce you to the life of the Palmer's Penguins"
  })
    
}

shinyApp(ui, server)

menus pour la sélection des onglets

fluidPage vs fixedPage

Jusqu’à présent, nous avons utilisé uniquement fluidPage() (avec fluidRow() ) pour créer l’interface utilisateur. Il est possible d’utiliser fixedPage() à la place. La différence entre les deux est qu’avec fluidPage, le contenu s’adapte à un changement de taille sans aucune limite, alors que la fixedPage a une taille limite.

L’image animée ci-dessous illustre ce comportement :

différence entre page fixe et page fluide

Un cas d’utilisation de fixedPage() au lieu de fluidPage() est lorsque vous voulez vous assurer que les utilisateurs verront la même mise en page même si leur écran a des dimensions différentes.

Notez que vous ne pouvez pas utiliser une mise en page prédéfinie telle que sidebarLayout() lorsque vous travaillez avec une page fixe.

Lors de l’utilisation de fixedPage(), vous devez utiliser fixedRow() au lieu de fluidRow()

Exemple d’interface utilisateur avec FixedPage :

ui <- fixedPage(
  
  sliderInput(inputId = "bill_length", label = "Select the range of bill length?", value = c(40,50), min = 32, max = 60),

  navlistPanel(
    "Penguins",
    tabPanel(title = "Plot",
             plotOutput("penguin_plot")
             ),
    tabPanel(title = "Table",
             tableOutput("penguin_table")
             ),
    "History",
      tabPanel(title = "Penguin's life",
             textOutput("penguin_text")
             )
  )

)

Barre de navigation

Nous pouvons créer une barre de navigation en haut de l’écran avec la fonction navbarPage(). La syntaxe est similaire aux onglets ou au panneau de navigation, et nous utilisons tabPanel() pour créer les différents options de navbarPage(). Nous pouvons également créer un menu complet en utilisant la fonction navbarMenu() et regrouper le tabPanel() sous différentes options de menu.

library(palmerpenguins)

ui <- fluidPage(
  
      navbarPage(
        "My navigation bar",
        tabPanel("Input",
                 sliderInput(inputId = "bill_length", label = "Select the range of bill length?", value = c(40,50), min = 32, max = 60),
                 ),
        navbarMenu("Analysis",
          tabPanel("Plot",
                   plotOutput("penguin_plot")
                   ),
          tabPanel("Table",
                   tableOutput("penguin_table")
                   )
        )

      )

)


server <- function(input, output){
  
  data <- reactive({
      subset(penguins, bill_length_mm > input$bill_length[1] & bill_length_mm < input$bill_length[2])
  })
  
  output$penguin_plot <- renderPlot({
    plot(data()$bill_depth_mm, data()$bill_length_mm, col = data()$species)
  })
  
  output$penguin_table <- renderTable({
    data()
  })
  
  output$penguin_text <- renderText({
    "Let me introduce you to the life of the Palmer's Penguins"
  })
    
}

shinyApp(ui, server)

menu de navigation en utilisant navbarPage

Thèmes

Shinythemes

Jusqu’à présent, nous n’avons utilisé que le thème par défaut (from bootstrap). Nous pouvons utiliser d’autres thèmes pour donner une apparence différente à notre application.

Le moyen le plus simple pour commencer et d’utiliser le package shinythemes. Installez-le avec :

install.packages("shinythemes")

Chargez ensuite le package et dans l’interface utilisateur, ajoutez le thème à l’aide de la fonction shinytheme("theme_name") comme indiqué ci-dessous :

library(shinythemes)

ui <- fluidPage(theme = shinytheme("superhero"),
  
  ...
  
)

ui <- fluidPage( shinythemes::themeSelector(),
  
      navbarPage(
        "My navigation bar",
        tabPanel("Input",
                 sliderInput(inputId = "bill_length", label = "Select the range of bill length?", value = c(40,50), min = 32, max = 60),
                 ),
        navbarMenu("Analysis",
          tabPanel("Plot",
                   plotOutput("penguin_plot")
                   ),
          tabPanel("Table",
                   tableOutput("penguin_table")
                   )
        )

      )

)

navigation bar panels

La liste de tous les thèmes disponibles se trouve sur le site Bootswatch

Vous pouvez également ajouter un sélecteur de thème directement à l’application, qui vous aidera à naviguer et à choisir le thème que vous souhaitez, ou laisser l’utilisateur choisir l’apparence de l’application. Pour ce faire, ajoutez simplement l’appel à la fonction themeSelector() dans l’interface utilisateur.

library(shinythemes)

ui <- fluidPage(
  
  shinythemes::themeSelector(),
  ...
  
)

navigation bar panels

Thème personnalisé

Si vous utilisez un thème qui ne fait pas partie de shinythemes ou si vous créez le vôtre, vous devez créer un sous-répertoire “www” dans votre répertoire d’application, placer le fichier css de votre thème, et ajouter la ligne suivante dans votre ui :

ui <- fluidPage(theme = "theme.css",
                
  ...

)

Mettre le fichier css dans un sous-répertoire appelé “www” de votre application est très important! C’est la raison numéro 1 si cela ne fonctionne pas.