Boa tarde pessoal!
Estou tentando colocar um gráfico de barras dentro de uma reactable
, mas estou tendo dificuldade em colocar o gráfico nos totalizadores. Segue um exemplo:
library(reactable)
library(htmltools)
bar_chart <- function(label, width = "100%", height = "16px", fill = "#00bfc4", background = NULL) {
# https://glin.github.io/reactable/articles/cookbook/cookbook.html
bar <- div(style = list(background = fill, width = width, height = height))
chart <- div(style = list(flexGrow = 1, marginLeft = "8px", background = background), bar)
div(style = list(display = "flex", alignItems = "center"), label, chart)
}
formata_coluna <- colDef(aggregate = "sum",
footer = function(values) format(sum(values), big.mark = '.', decimal.mark = ','),
format = colFormat(separators = TRUE, digits = 0, locales = 'pt-BR'))
totais_perc <- JS("function(column, state) {
let total_total = 0
let total_ocupadas = 0
state.data.forEach(function(row) {
total_total += row[\'Total\']
total_ocupadas += row[\'Sold\']
})
return (total_ocupadas / total_total * 100).toFixed(2)
}")
grupos_perc <- JS("function(values, rows) {
let total_total = 0
let total_ocupadas = 0
rows.forEach(function(row) {
total_total += row[\'Total\']
total_ocupadas += row[\'Sold\']
})
return (total_ocupadas / total_total * 100).toFixed(2)
}")
expand.grid(Seller = LETTERS[1:3], Product = letters[1:3]) %>%
mutate(Sold = rpois(9, 50),
Total = Sold + rpois(9, 10),
Perc = Sold/Total) %>%
bind_rows(data.frame(Seller = 'D',
Product = 'd',
Sold = 0,
Total = 10,
Perc = 0)) %>%
reactable(groupBy = "Seller",
columns = list(
Seller = colDef(footer = "Total"),
Sold = formata_coluna,
Total = formata_coluna,
Perc = colDef(cell = function(value) {
width <- paste0(value * 100, "%")
bar_chart(sprintf('%.0f%%', round(value * 100, 0)), width = width, fill = "#fc5185", background = "#e1e1e1")
},footer = totais_perc,
aggregate = grupos_perc,
html = TRUE)),
pagination = F)
O código acima adiciona corretamente o gráfico nas linhas da tabela original, além dos percentuais corretos nos subtotais e total. Tentei alterar as funções totais_perc
e grupos_perc
para que retornasse algo parecido com a função bar_chart
(tags <div>
com os mesmos parâmetros), mas em todas tentativas da erro (ele não renderiza nada dentro das células).
Tentei retornando isso - acredito que o erro esteja aqui, mas como não entendo muito de HTML, não consegui identificar aonde:
<div style="display:flex alignItems:center">90%<div style="flexGrow:1 marginLeft:8px background:#e1e1e1"> <div style="background:#fc5185 width:90% height:16px"></div></div></div>
Neste site eu achei outro exemplo de gráfico usando <div>
e adaptei a função grupos_perc
, mas está dando problema quando o valor é 0 (está mostrando barra parcialmente preenchida).
grupos_perc <- JS('function(values, rows) {
let total_total = 0
let total_ocupadas = 0
rows.forEach(function(row) {
total_total += row[\'Total\']
total_ocupadas += row[\'Sold\']
})
return \'<div style="font: 16px sans-serif; text-align: right; color: white;"><div style="background: steelblue; padding: 16px; margin: 0px; width: \' + total_ocupadas / total_total * 100 + \'%;"></div></div>\'
}')