bupaverse / processanimateR

Token replay animation for process maps created with processmapR by using SVG animations (SMIL) and the htmlwidget package.
https://bupaverse.github.io/processanimateR/
Other
66 stars 11 forks source link

Modifying the timeline length #39

Open fsalemi opened 2 years ago

fsalemi commented 2 years ago

Hello Felix, I have an animate process app with shinyDashboard. The tabs need to be maximized for better presentation (as you can see in the following code).
This works perfectly. However, when I maximize the tab and try to render the graph by changing the animation speed in the dropdown menu, the length of the timeline will shrink to 6 and not 12 (full screen). Is there anyway to modify or specify the size of timeline? Thanks in advance,

## app.R ##
library(shiny)
library(shinyWidgets)
library(bs4Dash)
library(shinycssloaders)
library(processmapR)
library(processanimateR)
library(eventdataR)
library(tidyverse)

ui <- dashboardPage(
  dashboardHeader(
  ),
  dashboardSidebar(
    width = 0
  ),
  dashboardBody(
    tags$head(
      tags$script(
        "$(function() {
              $('[data-card-widget=\"maximize\"]').on('click', function() {
                setTimeout(function() {
                  var isMaximized = $('html').hasClass('maximized-card');
                  if (isMaximized) {
                    $('#process').css('height', '100%');
                  } else {
                    $('#process').css('height', '100%');
                  }
                }, 300);
                $('#process').trigger('resize');
              });
            });
            "
      )
    ),

    fluidRow(
      tabBox(
        id = "Box one",
        height = "79.0vh",
        maximizable = T,
        title = p("", div(style = "position: absolute; right: 35px; top: 3px;",
                          dropdownButton(
                            icon = icon("cog"),
                            size = "default",
                            circle = F,
                            tooltip = F,
                            label = "",
                            right = T,
                            width = "250px",
                            radioButtons("duration",
                                         "Animation Speed",
                                         c("Slow" = 600,
                                           "Medium" = 300,
                                           "Fast" = 90
                                         ),
                                         selected = 300)))),
        tabPanel(
          title = "Tab one",
          align  = "center",
          withSpinner(
            processanimaterOutput("process", height = "76.5vh"), type=6)
        ),
        tabPanel(
          title = "Tab two",
        )
      ),
      tabBox(
        id = "Box two",
        height = "79.0vh",
        maximizable = T,
        tabPanel(
          title = "Tab three",
        )
      )
    )
  )
)

myMap <- process_map(patients, render = F)
server <- function(input, output) {
    output$process <- renderProcessanimater({
      animate_process(patients, myMap, duration = as.numeric(input$duration), initial_state = "paused")
  })
}

shinyApp(ui, server)

giphy11 image