mages / googleVis

Interface between R and the Google Chart Tools
https://mages.github.io/googleVis/
360 stars 155 forks source link

Allow custom HTML tooltips in gvisGeoCharts #94

Closed dureyingenieria closed 3 years ago

dureyingenieria commented 3 years ago

We cannot currently override gvisGeoChart default tooltips with custom HTML ones. It works in the rest of the chart types thanks to the naming of the columns (as you know, the library assumes that a column named "whatever.tooltip" is a custom HTML tooltip). But it doesn't work with gvisGeoCharts, since that type of chart is currently discarding most of the columns of the data.frames passed as data to the function call. It keeps the specific columns it needs (colour to show, areas to paint, default tooltip headers, etc.), but it discards the rest. It makes no difference, then, trying to add a "whatever.tooltip" column to the data.frame, as it is automatically ignored.

Since a GeoChart can only have one single tooltip column, this change I propose works like this:

As soon as the filtering of 'unknown' columns finishes for a gvisGeoChart, it looks if there is 1 and only 1 column in the original data named 'whatever.tooltip', and it restores it.

It is a minor change and it gives full control over GeoChart tooltips.

dureyingenieria commented 3 years ago

Some examples. Take into consideration the GeoChart example of your demo:

  output$view <- renderGvis({
    gvisGeoChart(
      Exports, 
      locationvar = "Country", 
      colorvar = "Profit"
    )
  })

It automatically constructs tooltips, using the values in the "Country" column as the header in bold, and the values of the "Profit" column as the body (with a hedious design).

If we want to modify the tooltip, we could set something different than the "Country" column for the default tooltip header:

  output$view <- renderGvis({
    Exports$Tooltip <- paste("<b>Test</b>", Exports$Profit)
    gvisGeoChart(
      Exports, 
      locationvar = "Country", 
      hovervar = "Tooltip",
      colorvar = "Profit",
      options = list(tooltip = "{isHtml: true}")
    )
  })

It works, but it doesn't render the HTML and we still don't have control over the body of the tooltip (just over the header).

Let's try to do it as in the rest of the charts of the googleVis library:

  output$view <- renderGvis({
    Exports$Profit.tooltip <- paste("<b>Test</b>", Exports$Profit)
    gvisGeoChart(
      Exports, 
      locationvar = "Country", 
      colorvar = "Profit",
      options = list(tooltip = "{isHtml: true}")
    )
  })

or (even worse, since this second approach even crashes)

  output$view <- renderGvis({
    Exports$Profit.tooltip <- paste("<b>Test</b>", Exports$Profit)
    gvisGeoChart(
      Exports, 
      locationvar = "Country", 
      hovervar = "Profit.tooltip",
      colorvar = "Profit",
      options = list(tooltip = "{isHtml: true}")
    )
  })

Why it is not working? The library silently ignores the new "Profit.tooltip" column. But after this pull request, it will start working (the first approach), rendering the custom HTML in the tooltip. Although it doesn't override the default header of the tooltips.

However, after merging this pull request, we could take the whole control of the tooltips doing something like this (removing the default tooltip headers and setting custom HTML content):

  output$view <- renderGvis({
    Exports$Profit.tooltip <- paste("<b>Test</b>", Exports$Profit)
    Exports$Tooltip.header <- ""
    gvisGeoChart(
      Exports, 
      locationvar = "Country", 
      colorvar = "Profit",
      hovervar = "Tooltip.header",
      options = list(tooltip = "{isHtml: true}")
    )
  })
mages commented 3 years ago

Thanks for you contribution. I have accepted your code and added your example to the 'Roles' demo and section of the 'Introduction to googleVis' vignette. Can you please review?

dureyingenieria commented 3 years ago

Thank YOU for this awesome library! (everything perfect, great!)