Research on improving numeric range input using plotly

[donyunardi]

continuation from #226

Summary:

User would like the ability to drag numeric ranges and manually enter the range input.

Plotly

Plotly is recommended as one of the solution.

Example from @nikolas-burkoff

          > I would have loved @nikolas-burkoff's proposal if the red brackets are draggable

Using plotly this is possible:

The black lines here are draggable (sadly they are draggable vertically as well but I would hope that could be configured?)

(code below)

Separately the example here (after "After @ firmo23's edit:") is really nice

library(shiny)
library(plotly)

data <- data.frame(x = runif(1000))

ui <- fluidPage(
  plotlyOutput("plot"),
  verbatimTextOutput("result")
)

server <- function(input, output, session) {
  output$plot <- renderPlotly(
    plot_ly(data, x = ~x,type="histogram") %>%
      layout(shapes = list(
        list(type = "line", x0 = 0.4, x1 = 0.4, 
             y0 = 0, y1 = 1, yref = "paper"),
        list(type = "line", x0 = 0.8, x1 = 0.8, 
             y0 = 0, y1 = 1, yref = "paper"))) |>
      # allow to edit plot by dragging lines
      config(edits = list(shapePosition = TRUE))  
  )
  
  selected_range_rv <- reactiveVal(c(0.4, 0.8))
  
  observeEvent(plotly::event_data("plotly_relayout"), {
    x <- plotly::event_data("plotly_relayout")
    if ("shapes[0].x0" %in% names(x)){
      selected_range_rv(c(x[["shapes[0].x0"]], selected_range_rv()[2]))  
    }
    if ("shapes[1].x0" %in% names(x)){
      selected_range_rv(c(selected_range_rv()[1], x[["shapes[1].x1"]]))  
    }
  })

  output$result <- renderText({
    sprintf("The selected range is from %f to %f", min(selected_range_rv()), max(selected_range_rv()))
  })
    
}

shinyApp(ui, server)

Originally posted by @nikolas-burkoff in #226 (comment)

Example from @chlebowa

I would have loved @nikolas-burkoff's proposal if the red brackets are draggable

Using plotly this is possible:

Oh, I assumed plotly is off the table, but If not - this is excellent, especially the built-in slider shown in the SO example:

library(plotly)

x <- c(1:100)
random_y <- rnorm(100, mean = 0)
data <- data.frame(x, random_y)

fig <- plot_ly(data, x = ~x, y = ~random_y, type = 'scatter', mode = 'lines') %>%
  layout(xaxis = list(rangeslider = list()))

fig

Definition of Done:

• This is a research task to explore plotly for numeric range input in the filter panel
• Present a rough implementation prototype using the provided example code

[chlebowa]

closed by #289