Reactable：组中的条件样式

kx7yvsdv 于 2023-06-03 发布在 React

关注(0)|答案(1)|浏览(346)

我尝试在R中合并以下两个reactable特性：

条件样式
聚合/分组

我的目标是根据组总和值，用不同的橙子阴影突出显示聚合（总和）组标题。这样，更容易发现具有高/低值的组。
我只使用一个颜色范围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)
      }
    )
  )
)

导致：Screenshot expected vs actual

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

r

来源：https://stackoverflow.com/questions/68160698/reactable-conditional-styling-in-groups

1条答案

按热度按时间

dxxyhpgq1#

我找到了一个变通的方法来处理组中的条件样式。
通过在reactable的colDef(style=)中注入JS函数，可以计算每个单元格的颜色。
您可以找到完整的示例here。
对于每一列，你想要一个条件格式，你必须绕过一个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上的线程可以在这里找到。

赞(0）回复(0）举报 2023-06-03

我来回答

Reactable：组中的条件样式

1条答案

相关问题

热门标签

最新问答