Add improved tooltip to dataui with reactable?

[ixodid198]

Here is a tooltip that is easy to read because of its placement and white background.

library("dataui")

dui_sparkline(
  data = runif(30, 0, 20),
  width = 500,
  height = 100,
  margin = list( top= 24, right= 72, bottom= 24, left= 8 ),
  ariaLabel = "sparkline misc example",
  renderTooltip = htmlwidgets::JS("({ datum }) => datum.y.toFixed(2)"),
  components = c(
    lapply(
      1:30 - 1,
      function(i) {
        dui_sparkverticalrefline(
          key = i,
          reference = i,
          stroke = "#8ce99a",
          strokeWidth = 1,
          strokeLinecap = "square",
          strokeDasharray = "2,2"
        )
      }
    ),
    list(
      dui_sparklineseries(
        stroke = "#40c057"
      ),
      dui_sparkpointseries(
        points = list('all'),
        fill = "#8ce99a"
      ),
      dui_tooltip(
        components = list(
          dui_sparkhorizontalrefline(
            key = "ref-hline",
            strokeWidth = 1,
            stroke = "#c2255c",
            strokeDasharray = "4,4"
          ),
          dui_sparkverticalrefline(
            key = "ref-vline",
            strokeWidth = 1,
            stroke = "#c2255c",
            strokeDasharray = "4,4"
          ),
          dui_sparkpointseries(
            key = "ref-point",
            fill = "#c2255c"
          )
        )
      )
    )
  )
)

How do I add this type of tooltip to this example that uses Reactable?

library("tidyverse")
library("dataui")
library("reactable")

df <- tibble(
  Company = c("A", "B"),
  Line = list(list(c(1, 2, 1)), list(c(2, 2, 1)))
)

colpal <- c("#00DA07", "#BB0337")

rt1 <- reactable(df,
        compact = TRUE,
        fullWidth = FALSE,

        columns = list(
          Line = colDef(
            cell = function(value, index) {
              dui_sparkline(
                data = value[[1]], 
                height = 80,
                margin = list(top = 20, right = 20, bottom = 20, left = 20),

                components = list(
                  dui_sparklineseries(
                    curve = "linear",
                    showArea = TRUE,
                    fill = "url(#area_pattern2)",
                    stroke = colpal[index]),

                  dui_tooltip(components = list(
                    dui_sparkverticalrefline(
                      #styling
                      strokeDasharray = "4,4",
                      stroke = gray.colors(10)[3]
                    ),
                    dui_sparkpointseries(
                      #styling
                      stroke = colpal[index],
                      fill = "#fff",
                      #litle extra interactivity for demostration purposes
                      renderLabel = htmlwidgets::JS("(d) => d.toFixed(2)")
                    )
                  ))
                )
              )
            }
          )
        )
)
rt1