Possible bug / conflict with line ranges

[camille-s]

Hi, I appreciate this package. I'm trying to make a line range similar to the ones in the bb_linechart examples, but I've run into an issue when I try to set the color of the line and its shaded area. I looked at the HTML the code creates and did these experiments based on the doc example. dat is the same as the data created in the bb_linechart examples:

1. Basic line range, comes out as expected

billboarder(data = dat) %>% 
  bb_linechart(
    mapping = bbaes(x = date, y = y1, ymin = ymin1, ymax = ymax1),
    type = "area-line-range"
  )

2. Setting color with bb_colors_manual—the decreased opacity for the area is now lost

billboarder(data = dat) %>% 
  bb_linechart(
    mapping = bbaes(x = date, y = y1, ymin = ymin1, ymax = ymax1),
    type = "area-line-range"
  ) %>%
  bb_colors_manual(y1 = "#9b6fa7")

3. Successful workaround with bb_color palette

billboarder(data = dat) %>% 
  bb_linechart(
    mapping = bbaes(x = date, y = y1, ymin = ymin1, ymax = ymax1),
    type = "area-line-range"
  ) %>%
  bb_color(palette = "#9b6fa7")

4. Unsuccessful workaround with bb_line and CSS

CSS block:

.area-not-opaque {
  opacity: 0.2;
}

billboarder(data = dat) %>% 
  bb_linechart(
    mapping = bbaes(x = date, y = y1, ymin = ymin1, ymax = ymax1),
    type = "area-line-range"
  ) %>%
  bb_colors_manual(y1 = "#9b6fa7") %>%
  bb_line(classes = c("area-not-opaque"))

In that last example, the custom class doesn't seem to be applied to the line range, but looking in my browser's inspector and the package source, I can't tell where it gets lost. In example 2, I noticed that the lower opacity of the area is overridden with

#htmlwidget-22d6afe4e20b7504cb71 .bb-area {
    opacity: 1 !important;
}

Again, that's something that I'm not sure where it comes from. Another workaround I found is setting the opacity in bb_colors_manual by using e.g. "#9b6fa744", but that makes the line itself also have reduced opacity. For now, the workarounds are fine, I just wanted to point it out as a possible bug or point that could be clarified in the docs. Thanks!

[pvictor]

Hello,

Thanks for the detailed issue :)

bb_colors_manual set the opacity to 1 by default (that's the CSS rule you've found). You can use another value with:

bb_colors_manual(y1 = "#9b6fa7", opacity = 0.3)

Does it solve your problem ?

Victor

[camille-s]

Thank you, that does work. It's not totally clear to me why the opacity setting of .bb-area would/should be overridden by setting the color manually. Why doesn't bb_color have that same default of adding opacity: 1 !important;? Maybe I'm the only one who's run into this, but if you wanted to add either some differentiation between bb_color and bb_colors_manual to the docs, or about the behavior of opacity being overridden, I'd be happy to contribute some examples.

And then with my example 4, the classes argument doesn't seem to be passed on to the line the way I expected bb_line to pass options to line based on that part of the billboard.js docs. It seemed like that should work, following the example in the bb_line docs.

The line also doesn't seem to be inheriting other options set there. For example, if I add to the example used for bb_line, the connectNull option is kept but the point option is lost:

billboarder() %>% 
  bb_linechart(data = c(1, 2, NA, 4, 5)) %>%  
  bb_line(connectNull = TRUE, point = TRUE)

[pvictor]

Hello,

Here some answers, hope it'll help !

Colors

bb_color is an equivalent to the color option from billboard.js (https://naver.github.io/billboard.js/release/latest/doc/Options.html#.color)

bb_colors_manual is wrapper for data.color option I've implemented for easier use (so I thought), the opacity argument is something special I've added, that does not exist in billboard.js. For example, these 2 instructions are equivalent (except for opacity that is only set in bb_colors_manual) :

bb_colors_manual(y1 = "firebrick", y2 = "steelblue")
# equivalent to
bb_data(
  colors = list(
    y2 = "steelblue",
    y1 = "firebrick"    
  )
)

Maybe I should let argument opacity being optional by default ?

I you want to contribute to some examples/documentation or in any other you're very welcome, don't hesitate to open issue/pull request to open discussions.

Lines classes

For your example 4: bb_linechart generate custom class names itself, if you want to overide them, you have to first set classes to NULL, e.g. :

billboarder(data = dat) %>% 
  bb_linechart(
    mapping = bbaes(x = date, y = y1)
  ) %>%
  bb_colors_manual(y1 = "#9b6fa7") %>%
  bb_line(classes = NULL) %>%
  bb_line(classes = list("area-not-opaque"))

Points

And finally, the point option is working, but points are hidden by bb_linechart, you have to explicitly set show = TRUE in bb_point to display them, e.g. :

billboarder() %>% 
  bb_linechart(data = c(1, 2, NA, 4, 5)) %>%  
  bb_line(connectNull = TRUE, point = TRUE) %>% 
  bb_point(show = TRUE)

Or use show_point argument in bb_linechart:

billboarder() %>% 
  bb_linechart(data = c(1, 2, NA, 4, 5), show_point = TRUE) %>%  
  bb_line(connectNull = TRUE)

bb_linechart is a wrapper for several billboard.js methods/options.

Victor

[camille-s]

Okay thank you, this explanation is very helpful. It does seem like it would be useful for folks to know how to assign a custom class to a line like that, and it wasn't clear otherwise how to do so. I could definitely draft up an example to go into maybe the line options vignette and file a pull request soon.

Thanks again!