r-Reactable:组中的条件样式

Question

我正在尝试将R中的以下两个可反应特性结合起来：

• 条件样式
• 聚合/分组

我的目标是根据组和值，用不同深浅的橙色突出显示聚合(和(组标题。这样，可以更容易地发现具有高/低值的组。

对于单元格值和组标题，我只使用一个颜色范围c("#ffe4cc", "#ffb54d")，例如100作为单元格值，100作为组标题，结果是相同的颜色。

---

到目前为止我所尝试的(这是一个简化的例子，我的现实世界问题需要在多个列/组上突出显示(：

library(datasets)
library(reactable)
data('CO2')
get_orange <- function(x) rgb(colorRamp(c("#ffe4cc", "#ffb54d"))(x), maxColorValue = 255)
reactable(
CO2,
groupBy = c('Plant', 'Type', 'Treatment'),
columns = list(
conc = colDef(
aggregate = 'mean'
),
uptake = colDef(
aggregate = 'sum',
style = function(value) {
normalized <- (value - min(CO2$uptake)) / (max(CO2$uptake) - min(CO2$uptake))
color <- get_orange(normalized)
list(background = color)
}
)
)
)

结果是：预期屏幕截图与实际

---

> packageVersion('reactable')
[1] ‘0.2.3’

Answer 1

我找到了一个解决组中条件样式的方法。

通过在reactable的colDef(style=(中注入JS函数，可以计算每个单元格的颜色。

你可以在这里找到完整的例子。

对于需要条件格式的每一列，都必须绕过JS()函数，如下所示：

for (column in dynamic_cols){
script = paste("
// source: https://glin.github.io/reactable/articles/examples.html#grouped-cell-rendering-1
function(rowInfo) {
// source: https://stackoverflow.com/a/44134328/4856719
function hslToHex(h, s, l) {
l /= 100;
const a = s * Math.min(l, 1 - l) / 100;
const f = n => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color).toString(16).padStart(2, '0');
};
return `#${f(0)}${f(8)}${f(4)}`;
}
var value = rowInfo.row['", column, "']
var max = ", q, "
var min = 0
// pct_value = (value - min) * 100 / (max - min)
pct_value = (Math.min(value, max) - min) * 100 / (max - min)
// If value equals 0, set font color grey.
if (value == 0) {
var color = '#adafaa'
var bg = '#fff'
} else {
var color = '#000000'
var bg = hslToHex(40, pct_value, 95 - pct_value / 2)
}
return { color: color, backgroundColor: bg}
}", sep="")
dynamic_col_def[column] <- list(colDef(
aggregate = 'sum', style = JS(script)
))
}

注入的JS函数确实使用rowInfo作为输入参数，并返回一个命名列表。在这种情况下，我们返回文本颜色color和单元格背景颜色backgroundColor。

使用此解决方法，可以为表中的每一列设置自定义颜色范围，也可以将多列组合为一个颜色范围。

github/glin/reactable上的线程可以在这里找到。