RinteRface / shinydashboardPlus

extensions for shinydashboard
https://shinydashboardplus.rinterface.com
Other
449 stars 78 forks source link

flipbox deactivate click and hover trigger #156

Open eikeschott opened 2 years ago

eikeschott commented 2 years ago

Hey everyone,

I love the concept of using a flipBox to display an interactive plot on the front side and some explanations and further information regarding the plot on the back side.

The obvious problem is that interacting with the plot (e.g. zooming, selecting data points etc.) causes the box to flip and makes interacting with the plot pretty difficult.

I would love to have an extra option for the trigger argument of flipBox saying none (or something similar) so that a flip is only triggered when using the updateFlipBox function. That way interacting with the plot would be possible while retaining the benefits of using the extra space on the backside of the box.

Is there currently a way to disable the trigger, and flip the box only when using updateFlipBox?

Here is an example of a flipBox with an interactive plot using plotly:

shiny::shinyApp(
  ui = shinydashboardPlus::dashboardPage(
    header = shinydashboardPlus::dashboardHeader(),
    sidebar = shinydashboardPlus::dashboardSidebar(collapsed = TRUE),
    body = shinydashboard::dashboardBody(
      shiny::actionButton(inputId = "togglebox", label = "Flip Box"),
      shinydashboardPlus::flipBox(id = "flipbox",
                                  trigger = NULL, 
                                  width = 6,
                                  front = shiny::div(
                                    class = "text-center",
                                    shiny::h3("My interactive plot"),
                                    shiny::hr(),
                                    plotly::plotlyOutput(outputId = "plot")
                                  ),
                                  back = shiny::div(
                                    class = "text-center",
                                    shiny::h3("Plot details")
                                  )
      )
    )
  ),
  server = function(input, output, session) {

    shiny::observeEvent(input$togglebox, {
      shinydashboardPlus::updateFlipBox("flipbox")
      message("To back")
    })

    output$plot <- plotly::renderPlotly({
      plotly::plot_ly(data = data.frame(x = 1:20, y = 1:20), x = ~x, y = ~y, type = 'scatter', mode = 'markers')
    })

  }
)