Black Lives Matter. Please consider donating to Black Girls Code today.

Custom ALT-key event on barcharts

I would like to implement a function that allows the user to select a range in a barchart by clicking the start and end bar, holding the ALT or CTRL-key, since SHIFT is used for persistent selection.

I changed the plotly_click event in plotly.js to:

  graphDiv.on('plotly_click', function(d) {
  
    Shiny.setInputValue(
      ".clientValue-plotly_click-" + x.source,
      JSON.stringify(eventDataWithKey(d))
    );  
    
    if (d.event.altKey) {
    // Alt Clicks
      var dAlt = graphDiv._shiny_plotly_click || {points: []};
      if (dAlt.points.length == 1) {
        console.log("FROM: curveNumber " + dAlt.points[0].curveNumber +  " pointNumber " + dAlt.points[0].pointNumber);
        console.log("TO: curveNumber " + d.points[0].curveNumber +  " pointNumber " + d.points[0].pointNumber);

        // TO-DO
        // How to get the points in between? -----------------------------------------------------
        var pts = [].concat(dAlt.points, d.points);

        var d = {points: pts, event: d.event};
      }
      graphDiv._shiny_plotly_click = d;
    } else if (x.highlight.persistentShift) {
  	// Shift Click
      var dShift = graphDiv._shiny_plotly_click || {points: []};
      var pts = [].concat(dShift.points, d.points);
      var d = {points: pts, event: d.event};
      graphDiv._shiny_plotly_click = d;
    } else {
      graphDiv._shiny_plotly_click = undefined;
    }
    
    Shiny.setInputValue(
      ".clientValue-plotly_alt_click-" + x.source,
      JSON.stringify(eventDataWithKey(d))
    );
    Shiny.setInputValue(
      ".clientValue-plotly_click_persist_on_shift-" + x.source,
      JSON.stringify(eventDataWithKey(d))
    );
  });

This gives me the curve- and pointNumber of the Start & End Bars, but I dont know how to get the bars in between those, which then have to be assigned to the variable pts. Can anyone show me how to do that or how to get there?

Here is a small Shiny-App, which prints out the plotly_alt_click data:

## Libs##########
library(shiny)
library(ggplot2)
library(plotly)
library(data.table)

## Data ############
dfN <- data.table(
  time_stamp = seq.Date(as.Date("2018-04-01"), as.Date("2018-07-30"), 1),
  val = runif(121, 100,1000),
  qual = 8,
  col = "green", stringsAsFactors = F
)
setkey(dfN, time_stamp)
Rnd <- sample(1:nrow(dfN), size = 10, replace = F)
dfN[Rnd,"col"] <- "red"
dfN[Rnd, "qual"] <- 3

## Ui ##########
ui <- fluidPage(
  plotlyOutput("plot"),
  verbatimTextOutput("alt_click")
)

## Server ##########
server <- function(input, output, session) {
  output$plot <- renderPlotly({
    key <- highlight_key(dfN)
    p <- ggplot() +
      geom_col(data = key, aes(x = plotly:::to_milliseconds(time_stamp), y = val, fill=I(col)))
    
    ggplotly(p, source = "Src") %>% 
      layout(xaxis = list(type = "date")) %>% 
      highlight(off = "plotly_doubleclick", on = "plotly_click")
  })

  output$alt_click <- renderPrint({
    d <- event_data("plotly_alt_click", source = "Src")
    req(d)
    d
  })
}

shinyApp(ui, server)