web-dev-qa-db-ja.com

光沢のあるダッシュボード-データの初期読み込みが完了するまで、専用の「読み込み中...」ページを表示します

DBからserver.Rにデータを最初にロードするのに数秒かかります。これが完了するまで、表示されるページは歪んでいます（選択ボックスのデータが間違っており、ボックスの配置がおかしいです。以下を参照してください）。 Distorted display

データが完全に読み込まれるまで、別のページ（または少なくとも最初に表示されたタブに別のコンテンツ）を表示したい。

専用のグローバル変数（initial_loading_done）に基づく条件を使用してconditionalPanelを実行することを考えましたが、どこにconditionalPanelを配置しようとしても機能しませんでした。

これは私の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
14
KeshetE

shinyjs パッケージを使用した非常に簡単な例を次に示します

ロードする「ページ」とコンテンツ「ページ」を異なるIDで作成し、最初にコンテンツページを非表示にし、アプリの準備ができたらshow()とhide()を使用するという考え方です

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)
23
DeanAttali

serverでは、setupComplete条件を格納するためにreactiveValues()を使用するのが好きです。次に、データがロードされると、setupCompleteがTRUEに設定されます。

uiでは、このsetupComplete条件をconditionalPanelで評価し、コンテンツのみを表示できます（この例では、3つのbox()ウィジェット）。

これが実際の例です

## 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)
6
SymbolixAU

コード

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

tabsetPanelでは機能しません。しかし、idをdivレベルに移動すると、美しく機能します。このヒントを提供してくれたshinyjsの作者であるDean Attaliに感謝します。 https://stackoverflow.com/users/4432127/keshete

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