R how to use formatStyle and styleValue to format a column based on multiple other columns

Question

I am trying to add a color bar to a datatable column where:

1. The size of the color bar is determined by the value in the column and
2. The color is determined on the color value stored in a different column.

I'm using a custom color bar function (styleColorBarAlt) because I can't get the text alignment that I need using the built-in styleColorBar.

data table where valCol1 formatting is not working but valCol2 formatting is successful because I've used the string "#A9A9A9" for the color value

I have part 1 working but am stuck on part 2. If I just use a string for the color, it works fine (see valCol2), but I need each color bar to be colored based on the value in the color column.

    data <- data.frame(category=c("cat1","cat2","cat3","cat4"),
                   valCol1=c(.1, .2, .3, .4), 
                   valCol2=c(.5, .6, .7, .8),
                   color=c("#007094","#FDE333","#4B0055","#00BE7D"))

#vAlternate style color bar function
styleColorBarAlt <- function (value1, value2)
{
  JS(sprintf("isNaN(parseFloat(value)) || value == 1 ? 'linear-gradient(0deg, %s, %s 50%%, %s 50%% 100%%)': 'linear-gradient(0deg, transparent, transparent ' + (50-50*value) + '%%, %s ' + (50-50*value) + '%% ' + (50+50*value) + '%%, transparent ' + (50+50*value) + '%%)'",
             value2, value2, value2, value2))
}



datatable(data) %>%
  formatStyle(c(2),
              valueColumns = c(2,4),
              background = styleColorBarAlt(value1 = styleValue()[1], 
value2 = styleValue()[2]), # Pretty sure this is incorrect
              backgroundSize = '100% 100%',
              backgroundPosition = 'center center') %>%
  formatStyle(c(3),
              valueColumns = 3,
              background = styleColorBarAlt(value1 = data[,3], 
value2 = "#A9A9A9"), # Works fine if I use a string
              backgroundSize = '100% 100%',
              backgroundPosition = 'center center')

Answer 1

With the columnwise option render you can use the data of a whole row. I don't understand your linear gradient (partly because your function does not depend on value1), so I show you an example with the font size and the color. You will have to adapt it to your colorbar.

library(DT)

dat <- data.frame(
  category = c("cat1", "cat2", "cat3", "cat4"),
  valCol1 = c(13, 16, 19, 22),
  valCol2 = c(.5, .6, .7, .8),
  color = c("#007094", "#FDE333", "#4B0055", "#00BE7D")
)

render <- c(
  "function(data, type, row){",
  "  if(type === 'display'){",
  "    var fontSize = data + 'px';",
  "    var color = row[4];",
  "    data = '<span style=\"color: ' + color + '; font-size: ' + fontSize + ';\">' + data + '</span>';",
  "  }",
  "  return data;",
  "}"
)

datatable(
  dat, 
  options = list(
    columnDefs = list(
      list(targets = 2, render = JS(render)),
      list(targets = "_all", className = "dt-center")
    )
  )
)

---

Here is another technique. Create a list column which groups your two columns. I call it hidden because we will use it but hide it. Then the JavaScript value for this column is an array with two elements, and you can access them with value[0] and value[1].

library(DT)

dat <- data.frame(
  category = c("cat1", "cat2", "cat3", "cat4"),
  valCol1 = c(13, 16, 19, 22),
  valCol2 = c(.5, .6, .7, .8),
  color = c("#007094", "#FDE333", "#4B0055", "#00BE7D")
)

hidden <- purrr::transpose(list(dat$valCol1, dat$color))
dat$hidden <- I(hidden)

datatable(
  dat, 
  options = list(
    columnDefs = list(
      list(targets = 5, visible = FALSE),
      list(targets = "_all", className = "dt-center")
    )
  )
) %>%
  formatStyle(
    2, valueColumns = 5, 
    color = JS("value[1]"), fontSize = JS("value[0]") 
  )