Create vignette to show sparklines with other htmlwidgets

[timelyportfolio]

Add a vignette to demonstrate using sparkline in other htmlwidgets and tags.

[jkaupp]

Many (including myself) use this in conjunction with DT. The recent changes in the code base altered the use very slightly by having to size the canvas within the jquery options using width and height. These options didn't have to be set with the previous DT and sparkline versions and can cause some issues for people adopting the new version.

[timelyportfolio]

Thanks for the report. Could you please provide some code and a screenshot if possible? Height and width arguments with defaults have not changed, so I am wondering if the changes to the underlying JavaScript to work with hi-dpi devices might be the culprit.

[jkaupp]

I'll create a reproducible example with context and output tomorrow.

[timelyportfolio]

@jkaupp, that would be really helpful. I thought it might be helpful to demonstrate some code for combining DT with sparkline.

library(DT)
library(sparkline)
library(dplyr)

ChickWeight %>%
  group_by(Diet, Time) %>%
  summarise(
    weight = spk_chr(
      weight, type = "box",
      chartRangeMin=0, chartRangeMax=max(.$weight)
    )
  ) %>%
  datatable(
    escape = FALSE,
    options = list(
      fnDrawCallback = htmlwidgets::JS(
'
// not the best way but works fairly well
function(){
  HTMLWidgets.staticRender();
}
'
      )
    )
  ) %>%
  spk_add_deps()

[timelyportfolio]

@jkaupp, here is the commit https://github.com/htmlwidgets/sparkline/commit/9d823b7b9261e70500d7eb57fdd9316657c44692 that shows no change was made to the default height = 20 and width = 60 arguments.

[jkaupp]

Thanks for the updated dplyr friendly code. I couldn't figure out how to do what I wanted to do using the piped method, so I used my old methods instead. I'm using DT and sparkline to display an interactive histogram. I've duplicated my approach using the ChickWeight dataset.

You can see the problem more clearly in this notebook, sessionInfo is at the bottom of the doc. The dplyr 0.4.3 is intentional as 0.5.0 doesn't play well with RSQLServer.

[timelyportfolio]

Thanks so much for the additional detail, but I am confused. Is the first using the old sparkline and the second using the new sparkline? How has your code changed from old to new? You might notice that the sparklines now appear with a much higher resolution (I think a very worthwhile improvement) if you are on a hi-dpi device. If you are on a non-hidpi device, I believe there will be no change. I am trying to get a sense for cost/benefit.

This is trick since the JavaScript library jquery.sparkline died quite a while ago.

[jkaupp]

Sorry for the confusion. By old methods I meant using a non-piped approach and constructing the columnDefs and fnDrawCallback without the new helper functions. Both of these tables use the current sparkline, installed from this repo.

The first table is constructed setting width and height explicitly in the JS for the fnDrawCallback. The second does not set height and width explicitly which results in a very condensed sparkline.

I have noticed the resolution, which is a great feature.

[timelyportfolio]

Makes sense now. The new hi-dpi means the old JavaScript defaults should probably be adjusted for the new size. These JavaScript defaults are not changed since your code does not use the sparkline creator function. Here is how I would replicate your code using the new helper functions. Then no need for so much JavaScript.

library(DT)
library(sparkline)
library(dplyr)
library(tidyr)
library(htmlwidgets)

ChickWeight %>% 
  mutate(cut_weight = as.numeric(cut(weight, c(0, 50, 100, 150, 200, 300) , labels = c(1:5)))) %>% 
  group_by(Chick, cut_weight) %>% 
  tally %>% 
  complete(cut_weight = c(1:5), fill = list(n = 0)) %>% 
  summarize(
    cut_weight = spk_chr(
      cut_weight,
      type = "bar",
      barWidth = 20,
      barSpacing = 5,
      highlightColor = 'orange',
      tooltipFormat = '{{offset:levels}} : {{value}}',
      tooltipValueLookups = list(
        levels = list( 
          '0' = '0-50',
          '1' = '51-100',
          '2' = '101-150',
          '3' = '151-200',
          '4' = '201-300'
        )
      )
    )
  ) %>%
  datatable(
    escape = FALSE,
    ,
    options = list(
      fnDrawCallback = htmlwidgets::JS(
'
// not the best way but works fairly well
function(){
  HTMLWidgets.staticRender();
}
'
      )
    )
  ) %>%
  spk_add_deps()