echarts4r icon indicating copy to clipboard operation
echarts4r copied to clipboard

proxy not working with flipped coords (e_bar / e_flip_coords / shiny)

Open RCura opened this issue 3 years ago • 3 comments

Hello,

I have a problem updating a bar-chart (adding a serie) once it's been flipped.

Here's a minimal app reproducing the problem.

library(shiny)
library(tidyverse)
library(echarts4r)

base_df <- tibble(ValX = c("A", "B", "C"), ValY = 1:3)
ui <- fluidPage(
    column(2, actionButton("addserie", label = "Add serie")),
    column(5, echarts4rOutput("barplot_classic")),
    column(5, echarts4rOutput("barplot_flipped"))
)

server <- function(input, output) {
    output$barplot_classic <- renderEcharts4r({
            e_charts(data = base_df, x = ValX) %>%
            e_bar(serie = ValY, name = "Base")
    })
    
    output$barplot_flipped <- renderEcharts4r({
            e_charts(data = base_df, x = ValX) %>%
            e_bar(serie = ValY, name = "Base") %>%
            e_flip_coords()
    })
    
    observeEvent(input$addserie,{
        new_serie <- base_df %>%
            mutate(ValY = runif(n = 3, min = 0, max = 5))
        rndname <- sample(LETTERS, size = 5) %>% paste0(collapse = "")
        
        echarts4rProxy("barplot_classic", data = new_serie, x = ValX) %>%
            e_bar(ValY, name = rndname) %>%
            e_execute()
        
        echarts4rProxy("barplot_flipped", data = new_serie, x = ValX) %>%
            e_bar(ValY, name = rndname) %>%
            e_execute()
    })
}

shinyApp(ui = ui, server = server)

And here's the state of the app once the add series button has been clicked (twice here): image

I tried calling e_flip_coords inside the proxy call, or playing with the x_index and y_index, but no luck so far. This is running echarts4r version 0.4.0 (tried with 0.3.3 too, same bug) and shiny version 1.6 (also tried with 1.5, same).

Any idea ?

RCura avatar Mar 26 '21 19:03 RCura

Ah, something I had not considered, yet again.

The thing is e_flip_coords is really just a hack that actually switches x and y values. Echarts.js does not have a "flip coord" feature, simply because you can just use X values where you'd normally use Y values.

So do that, flip and X and Y in the proxy and it work.

    observeEvent(input$addserie,{
        new_serie <- base_df %>%
            mutate(ValY = runif(n = 3, min = 0, max = 5))
        rndname <- sample(LETTERS, size = 5) %>% paste0(collapse = "")
        
        echarts4rProxy("barplot_classic", data = new_serie, x = ValX) %>%
            e_bar(ValY, name = rndname) %>%
            e_execute()
        
        # flip valY and valX
        echarts4rProxy("barplot_flipped", data = new_serie, x = ValY) %>%
            e_bar(ValX, name = rndname) %>%
            e_execute()
    })

JohnCoene avatar Mar 27 '21 09:03 JohnCoene

Thanks a lot for your answer @JohnCoene !

This way, I thought it was fixed (despite the "Undefined" item popping on top, but that's not really a problem though), until I tried to add brush-selections.

Here's the code I'm using, and the result in a gif :

library(shiny)
library(tidyverse)
library(echarts4r)

base_df <- tibble(ValX = c("A", "B", "C"), ValY = 1:3)
ui <- fluidPage(
  column(2, actionButton("addserie", label = "Add serie")),
  column(5, echarts4rOutput("barplot_classic")),
  column(5, echarts4rOutput("barplot_flipped"))
)

server <- function(input, output) {
  output$barplot_classic <- renderEcharts4r({
    e_charts(data = base_df, x = ValX) %>%
      e_bar(serie = ValY, name = "Base") %>%
      e_toolbox() %>%
      e_toolbox_feature(feature = "brush", type = list("lineX", "clear")) %>%
      e_brush()
  })
  
  output$barplot_flipped <- renderEcharts4r({
    e_charts(data = base_df, x = ValX) %>%
      e_bar(serie = ValY, name = "Base") %>%
      e_flip_coords() %>%
      e_toolbox() %>%
      e_toolbox_feature(feature = "brush", type = list("lineY", "clear")) %>%
      e_brush()
  })
  
  observeEvent(input$addserie,{
    new_serie <- base_df %>%
      mutate(ValY = runif(n = 3, min = 0, max = 5))
    rndname <- sample(LETTERS, size = 5) %>% paste0(collapse = "")
    
    echarts4rProxy("barplot_classic", data = new_serie, x = ValX) %>%
      e_bar(ValY, name = rndname) %>%
      e_execute()
    
    echarts4rProxy("barplot_flipped", data = new_serie, x = ValY) %>%
      e_bar(ValX, name = rndname) %>%
      e_execute()
  })
}

shinyApp(ui = ui, server = server)

Peek 31-03-2021 14-11

As you can see on the gif, when doing a brush on the flipped plot, it "colors" random bars (the result of the selection through the plotId_brush is good though) as if they were selected, and with multiple series, it becomes kind of a blinking christmas tree :thinking:. On the non-flipped plot (see gif), this works perfectly, as expected.

Thanks (merci !) for you concerns once again !

RCura avatar Mar 31 '21 12:03 RCura

Found a way to resolve my bugs :

  1. The undefined item popping up when flipping the coords and adding a serie is due to the way the axis are re-built when adding a serie. I didnt't treat the cause, but only the effect by removing undefined element(s) (different than "undefined", so, shouldn't be a problem when people use an "undefined" category). I don't know how to do a PR since the previous commits are already being Pull-requested (#302)), but the corresponding commit to fix this is here : https://github.com/RCura/echarts4r/commit/0e27c74e46dcd511b53d4d185f5ae541a73089d3

  2. The wrong graphical correspondance of brushed items is due to the re-ordering of the dataset ( echarts4r.R#305-307 if (!is.null(xmap)) {data <- .arrange_data_x(data, xmap) }). This sorts the serie according to it's X-values instead of Y-Values when the barchart is flipped, resulting in a sorting by value instead of by label. No proper echarts4r-fix for this (would require some rewrite of the flipping function, for example passing an argument when the chart has been flipped, so as to change the behavior of the series adding when this argument is there). On the other hand, an easy user-fix is to switch the proxy reorder argument to FALSE. The side-effect being that each new serie must be absolutely sorted in the same order as the original chart-creation serie. Which is a problem (I guess) when adding series with new labels. But for me, this works ^^

RCura avatar Apr 07 '21 10:04 RCura