Pokaż komunikat "ładowanie wykresu" w sprytnie

Question

Chcę pokazać komunikat podobny do "ładowanie wykresu" podczas drukowania.

Jak to osiągnąć?

wyjście z oczekiwaniami:

Answer 1

ja wymyśliliśmy sposób, aby to zrobić zaczynając https://codepen.io/doeg/pen/RWGoLR.

1. Skopiuj zawartość CSS do zewnętrznego pliku css umieszczonego w podkatalogu o nazwie www.
2. Odsyłam do tego pliku w twoim błyszczącym skrypcie.
3. Wprowadź odpowiednie instrukcje div w swoim skrypcie, aby owinąć kod, który chcesz wczytać.
4. Zmodyfikuj swój CSS tak, aby indeks Z animacji był niższy niż indeks Z na wykresie, tak aby po wyświetleniu wykresu był renderowany na wierzchu animacji.

Na przykład, www/custom.css:

.plotly.html-widget.html-widget-output.shiny-bound-output.js-plotly-plot { 
    z-index: 22; 
    position: relative; 
} 

.plotlybars { 
    padding: 0 10px; 
    vertical-align: bottom; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
    box-sizing: border-box; 
} 

.plotlybars-wrapper { 
    width: 165px; 
    height: 100px; 
    margin: 0 auto; 
    left: 0; 
    right: 0; 
    position: absolute; 
    z-index: 1; 
} 

.plotlybars-text { 
    color: #447adb; 
    font-family: 'Open Sans', verdana, arial, sans-serif; 
    font-size: 80%; 
    text-align: center; 
    margin-top: 5px; 
} 

.plotlybars-bar { 
    background-color: #447adb; 
    height: 100%; 
    width: 13.3%; 
    position: absolute; 

    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 

    animation-duration: 2s; 
    animation-iteration-count: infinite; 
    animation-direction: normal; 
    animation-timing-function: linear; 

    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: normal; 
    -webkit-animation-timing-function: linear; 
} 

.b1 { left: 0%; top: 88%; animation-name: b1; -webkit-animation-name: b1; } 
.b2 { left: 14.3%; top: 76%; animation-name: b2; -webkit-animation-name: b2; } 
.b3 { left: 28.6%; top: 16%; animation-name: b3; -webkit-animation-name: b3; } 
.b4 { left: 42.9%; top: 40%; animation-name: b4; -webkit-animation-name: b4; } 
.b5 { left: 57.2%; top: 26%; animation-name: b5; -webkit-animation-name: b5; } 
.b6 { left: 71.5%; top: 67%; animation-name: b6; -webkit-animation-name: b6; } 
.b7 { left: 85.8%; top: 89%; animation-name: b7; -webkit-animation-name: b7; } 

@keyframes b1 { 0% { top: 88%; } 44% { top: 0%; } 94% { top: 100%; } 100% { top: 88%; } } 
@-webkit-keyframes b1 { 0% { top: 88%; } 44% { top: 0%; } 94% { top: 100%; } 100% { top: 88%; } } 

@keyframes b2 { 0% { top: 76%; } 38% { top: 0%; } 88% { top: 100%; } 100% { top: 76%; } } 
@-webkit-keyframes b2 { 0% { top: 76%; } 38% { top: 0%; } 88% { top: 100%; } 100% { top: 76%; } } 

@keyframes b3 { 0% { top: 16%; } 8% { top: 0%; } 58% { top: 100%; } 100% { top: 16%; } } 
@-webkit-keyframes b3 { 0% { top: 16%; } 8% { top: 0%; } 58% { top: 100%; } 100% { top: 16%; } } 

@keyframes b4 { 0% { top: 40%; } 20% { top: 0%; } 70% { top: 100%; } 100% { top: 40%; } } 
@-webkit-keyframes b4 { 0% { top: 40%; } 20% { top: 0%; } 70% { top: 100%; } 100% { top: 40%; } } 

@keyframes b5 { 0% { top: 26%; } 13% { top: 0%; } 63% { top: 100%; } 100% { top: 26%; } } 
@-webkit-keyframes b5 { 0% { top: 26%; } 13% { top: 0%; } 63% { top: 100%; } 100% { top: 26%; } } 

@keyframes b6 { 0% { top: 67%; } 33.5% { top: 0%; } 83% { top: 100%; } 100% { top: 67%; } } 
@-webkit-keyframes b6 { 0% { top: 67%; } 33.5% { top: 0%; } 83% { top: 100%; } 100% { top: 67%; } } 

@keyframes b7 { 0% { top: 89%; } 44.5% { top: 0%; } 94.5% { top: 100%; } 100% { top: 89%; } } 
@-webkit-keyframes b7 { 0% { top: 89%; } 44.5% { top: 0%; } 94.5% { top: 100%; } 100% { top: 89%; } } 

a następnie w app.R:

library(shiny) 
library(shinydashboard) 
library(plotly) 

ui <- dashboardPage(
title = "Loading animation test" 
    , dashboardHeader(title = "Animated Test") 
    , dashboardSidebar() 
    ,dashboardBody(
     tags$head(
     tags$link(rel = "stylesheet", type = "text/css", href = "custom.css") 
    ) 
    , h1("Plotly Bars (Animated CSS)") 
    , div(id = "plot-container" 
      , div(class = "plotlybars-wrapper" 
      , div(class="plotlybars" 
       , div(class="plotlybars-bar b1") 
       , div(class="plotlybars-bar b2") 
       , div(class="plotlybars-bar b3") 
       , div(class="plotlybars-bar b4") 
       , div(class="plotlybars-bar b5") 
       , div(class="plotlybars-bar b6") 
       , div(class="plotlybars-bar b7") 
      ) 
      , div(class="plotlybars-text" 
       , p("loading") 
      ) 
     ) 
      , plotlyOutput("plot") 
    ) 
    ) 
) 

server <- function(input, output) { 
    Sys.sleep(10) # just for demo so you can enjoy the animation 
    output$plot <- renderPlotly({ 
    plot_ly(
     x = 2, y = 3, type = "scatter", mode = "markers" 
    ) 
    }) 
} 

shinyApp(ui = ui, server = server) 

Answer 2

Na podstawie powyższego kodu, mam utworzyć moduł, który automatycznie Shiny wyświetla/ukrywa animację ładowania w zależności od tego, czy rysowany jest czysty wykres (na przykład, jeśli wykres powinien być pokazywany tylko po kliknięciu przycisku akcji, należy się upewnić, że animacja ładowania nie zostanie wyświetlona do tego czasu).

Moduł jest dostępny na github pod numerem https://github.com/andrewsali/plotlyBars i po zainstalowaniu można również uruchomić przykład bezpośrednio z tego miejsca.

Ładowanie tej mini-biblioteki bardzo ułatwia tworzenie animowanych błyszczących wykresów, wystarczy wymienić działkowoOutput/renderPlotly z plotlyBarsUI i wywołanie modułu plotlyBars. Zobacz przykładową aplikację na stronie github, aby uzyskać więcej informacji na temat korzystania z modułu Błyszczący.

Efektywnie to, co robi kod, to pokazuje animację, gdy reaktywne tworzenie wykresu zostanie rozpoczęte i ukrywa je w przypadku, gdy reaktywne nie powiedzie się po cichu (np. Ponowne uruchomienie lub zatwierdzenie przerywa przetwarzanie).