web-dev-qa-db-fra.com

Shiny Dashboard - affiche une page "chargement .." dédiée jusqu'au chargement initial des données

J'ai le chargement initial des données de la base de données dans le server.R qui prend quelques secondes. Tant que cela n’est pas fait, la page affichée est déformée (données erronées dans la zone de sélection et placement étrange des zones, voir ci-dessous).  Distorted display

Je souhaite afficher une page différente (ou au moins un contenu différent dans le premier onglet affiché) jusqu'à ce que les données soient complètement chargées.

Je pensais faire une sorte de conditionalPanel en utilisant une condition basée sur une variable globale dédiée (initial_loading_done), mais là où j'essayais de placer la conditionalPanel cela ne fonctionnait pas.

Voici la structure de mon UI.R:

shinyUI(

  dashboardPage(
    dashboardHeader(title = "Title"),
    dashboardSidebar(
       sidebarMenu(
           menuItem("Tab1", tabName = "Tab1",icon = icon("dashboard")),
           menuItem("Tab2", tabName = "Tab2",  icon = icon("bar-chart-o"))
       )
    ),
    dashboardBody(
       includeCSS("custom_css.css"),
       tabItems(
           tabItem(tabName = "Tab1", 
                   fluidRow(<content>),
                   mainPanel(
                      fluidRow(<content>)
                   )
           ),
           tabItem(tabName = "Tab2",
                  fluidRow(<content>),
                  mainPanel(
                      dataTableOutput('my_data_table')  
                  )
           )
       )
    )
 )
)
rshinyshinydashboardshinyjs
12
KeshetE

Voici un exemple très simple utilisant shinyjs package

L'idée est de créer la "page" de chargement et la "page" de contenu sous différents ID, de masquer initialement la page de contenu et d'utiliser les fonctions show() et hide() une fois l'application prête. 

library(shiny)
library(shinyjs)

load_data <- function() {
  Sys.sleep(2)
  hide("loading_page")
  show("main_content")
}

ui <- fluidPage(
  useShinyjs(),
  div(
    id = "loading_page",
    h1("Loading...")
  ),
  hidden(
    div(
      id = "main_content",
      "Data loaded, content goes here"
    )
  )
)

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

shinyApp(ui = ui, server = server)
21
DeanAttali

Dans server, j'aime bien utiliser reactiveValues() pour stocker une condition setupComplete. Ensuite, lorsque les données sont chargées, ma setupComplete est définie sur TRUE.

Dans ui, nous pouvons alors évaluer cette condition setupComplete dans une conditionalPanel et afficher uniquement le contenu (dans mon exemple, les trois widgets box()).

Voici un exemple de travail

## app.R ##
library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
        actionButton(inputId = "btn_data", label = "Download"),
        conditionalPanel(condition = "output.setupComplete",
            box( title = "box1" ),
            box( title = "box2" ),
            box( title = "boc3" )
        ),
        conditionalPanel(condition = "!output.setupComplete",
                         box( title = "loading"))
    )
)

server <- function(input, output) { 

    rv <- reactiveValues()
    rv$setupComplete <- FALSE

    ## simulate data load
    observe({

        if(input$btn_data){

            df <- data.frame(id = seq(1,200),
                             val = rnorm(200, 0, 1))

            ## Simulate the data load
            Sys.sleep(5)
            ## set my condition to TRUE
            rv$setupComplete <- TRUE
        }

        ## the conditional panel reads this output
        output$setupComplete <- reactive({
            return(rv$setupComplete)
        })
        outputOptions(output, 'setupComplete', suspendWhenHidden=FALSE)

    })
}

shinyApp(ui, server)
5
SymbolixAU

Le code

hidden(
    div(
      id = "main_content",
      "Data loaded, content goes here"
    )

ne fonctionne pas avec tabsetPanel. Mais si vous déplacez l'id au niveau div, cela fonctionne à merveille. Merci à Dean Attali, auteur de shinyjs, pour ce conseil. https://stackoverflow.com/users/4432127/keshete

  hidden(
        div(id = "mainTabsetPanel",
          tabsetPanel(
....
0
JerryN