reactablefmtr
reactablefmtr copied to clipboard
kcuilla
issue getting centered pos-neg in data_bars
I'm having difficulty getting my charts to center on percentage data scaled between -1 and 1. The bars center desirably--that is, the 0 is in the center--when the percentage is negative, but not when positive. Here's some code for the an example with a column that's working and one that isn't; please keep in mind that the fault may be entirely mine. Thank you in advance for your attention and for this wonderful package!
Load libraries and create tabling function
` library(dplyr) library(scales) library(reactable) library(reactablefmtr)
pretty_table <- function(df){
reactable(data = df,
pagination = FALSE,
sortable = TRUE,
# filterable = TRUE,
columns = list(Allot_BTD = colDef(format = colFormat(prefix = "$", separators = TRUE, digits = 0)),
Actual_BTD = colDef(format = colFormat(prefix = "$", separators = TRUE, digits = 0)),
Allot_BN = colDef(format = colFormat(prefix = "$", separators = TRUE, digits = 0)),
Variance = colDef(cell = color_tiles(df,
color_ref = "BTD_colour",
# color_by = "%BTD_Allot",
# colors = c(warning_colour, "#ffffff", danger_colour),
number_fmt = scales::label_dollar())),
`%BTD_Allot` = colDef(cell = data_bars(df,
fill_color_ref = "BTD_colour",
# min_value = -1,
# max_value = 1,
# fill_color = c(warning_colour, "#ffffff", danger_colour),
background = "darkgrey",
fill_opacity = 1.0,
text_position = "none",
align_bars = "left",
number_fmt = scales::percent,
tooltip = TRUE)),
`%BN_Allot` = colDef(cell = data_bars(df,
fill_color_ref = "BN_colour",
# min_value = -1,
# max_value = 1,
# fill_color = c(warning_colour, "#ffffff", danger_colour),
background = "darkgrey",
fill_opacity = 1.0,
text_position = "none",
align_bars = "left",
number_fmt = scales::percent,
tooltip = TRUE)),
BTD_colour = colDef(show = FALSE),
BN_colour = colDef(show = FALSE)
))
}
`
Here's dput() output piped into the pretty_table() function. The first bar chart doesn't work (positive value); the second does work (negative value)
structure(list(x = list(tag = structure(list(name = "Reactable", attribs = list(data = structure("{\"Org_Name\":[\"Activity Total\"],\"Allot_BTD\":[1140001],\"Actual_BTD\":[1383699],\"Variance\":[-243698],\"%BTD_Allot\":[0.213769987921063],\"Allot_BN\":[2272001],\"%BN_Allot\":[-0.390977820872438],\"BTD_colour\":[\"#e34234\"],\"BN_colour\":[\"#77b5fe\"]}", class = "json"), columns = list(list(accessor = "Org_Name", name = "Org_Name", type = "character"), list(accessor = "Allot_BTD", name = "Allot_BTD", type = "numeric", format = list( cell = structure(list(prefix = "$", digits = 0L, separators = TRUE), class = "colFormat"), aggregated = structure(list( prefix = "$", digits = 0L, separators = TRUE), class = "colFormat"))), list(accessor = "Actual_BTD", name = "Actual_BTD", type = "numeric", format = list(cell = structure(list( prefix = "$", digits = 0L, separators = TRUE), class = "colFormat"), aggregated = structure(list(prefix = "$", digits = 0L, separators = TRUE), class = "colFormat"))), list(accessor = "Variance", name = "Variance", type = "numeric", cell = list(structure(list(name = "div", attribs = list( style = list(background = "#E34234FF", color = "white", display = "flex", flexDirection = "column", justifyContent = "center", alignItems = "center", borderRadius = "6px", boxShadow = NULL, fontWeight = "normal", fontSize = NULL, transition = "background 1s ease")), children = list("-$243,698")), class = "shiny.tag"))), list(accessor = "%BTD_Allot", name = "%BTD_Allot", type = "numeric", cell = list(structure(list( name = "div", attribs = structure(list(), names = character(0)), children = list(structure(list(name = "div", attribs = list(style = list(flexGrow = 1, borderTopLeftRadius = "0px", borderBottomLeftRadius = "0px", borderTopRightRadius = "0px", borderBottomRightRadius = "0px", background = "darkgrey")), children = list( structure(list(name = "div", attribs = list( style = list(display = "flex", alignItems = "center")), children = list(structure(list(name = "div", attribs = list(style = list(textAlign = "right", boxShadow = NULL, borderTopLeftRadius = "0px", borderBottomLeftRadius = "0px", borderTopRightRadius = "0px", borderBottomRightRadius = "0px", border = " ", background = "#E34234FF", backgroundImage = NULL, width = "100%", height = 18, transition = "width 1s ease", display = "flex", alignItems = "center", justifyContent = "flex-end", color = "transparent")), children = list(structure(list(name = "WidgetContainer", attribs = list(key = "78954066e6f6fc4ade54a31ee6dfd548"), children = list(structure(list(name = "Fragment", attribs = list(), children = list( structure(list(name = "span", attribs = list(id = "htmlwidget-e654187755fd7ad0bc5c", width = 960, height = 500, className = "tippy html-widget"), children = list()), class = "shiny.tag"), structure(list(name = "script", attribs = list(type = "application/json", data-for= "htmlwidget-e654187755fd7ad0bc5c"), children = list(structure("{\"x\":{\"opts\":{\"animateFill\":false,\"followCursor\":true,\"content\":\"<span style=\\\"font-size:1.5em\\\">21%<\\/span>\"},\"text\":\"21%\"},\"evals\":[],\"jsHooks\":[]}", html = TRUE, class = c("html", "character")))), class = "shiny.tag"))), class = c("reactR_component", "shiny.tag"), html_dependencies = list( structure(list(name = "htmlwidgets", version = "1.5.4", src = list( file = "www"), meta = NULL, script = "htmlwidgets.js", stylesheet = NULL, head = NULL, attachment = NULL, package = "htmlwidgets", all_files = TRUE), class = "html_dependency"), structure(list(name = "tippyjs", version = "3.2.0", src = list( file = "htmlwidgets/lib/tippy"), meta = NULL, script = "tippy.all.min.js", stylesheet = c("themes/google.css", "themes/light-border.css", "themes/light.css", "themes/translucent.css"), head = NULL, attachment = NULL, package = "tippy", all_files = TRUE), class = "html_dependency"), structure(list(name = "tippy-binding", version = "0.1.0", src = list( file = "htmlwidgets"), meta = NULL, script = "tippy.js", stylesheet = NULL, head = NULL, attachment = NULL, package = "tippy", all_files = FALSE), class = "html_dependency"))))), class = c("reactR_component", "shiny.tag")))), class = "shiny.tag"))), class = "shiny.tag"))), class = "shiny.tag"))), class = "shiny.tag"))), list(accessor = "Allot_BN", name = "Allot_BN", type = "numeric", format = list(cell = structure(list(prefix = "$", digits = 0L, separators = TRUE), class = "colFormat"), aggregated = structure(list(prefix = "$", digits = 0L, separators = TRUE), class = "colFormat"))), list(accessor = "%BN_Allot", name = "%BN_Allot", type = "numeric", cell = list(structure(list( name = "div", attribs = list(style = list(display = "flex")), children = list(structure(list(name = "div", attribs = list(style = list(flex = "1 1 0")), children = list(structure(list(name = "div", attribs = list(style = list(position = "relative", width = "1px", height = "1000%", top = "-50px", backgroundColor = "#666666", float = "right")), children = list()), class = "shiny.tag"), structure(list(name = "div", attribs = list( style = list(flexGrow = 1, background = "transparent")), children = list(structure(list(name = "div", attribs = list(style = list(display = "flex", alignItems = "center", justifyContent = "flex-end")), children = list(structure(list(name = "div", attribs = list(style = list(boxShadow = NULL, borderTopLeftRadius = "0px", borderBottomLeftRadius = "0px", borderTopRightRadius = "0px", borderBottomRightRadius = "0px", textAlign = "left", background = "#77B5FEFF", backgroundImage = NULL, border = " ", color = "transparent", fontWeight = "normal", fontSize = NULL, width = "100%", height = 18, transition = "width 1s ease", display = "flex", alignItems = "center")), children = list(structure(list(name = "WidgetContainer", attribs = list(key = "d3a0510150205a34c50547e0f8f90992"), children = list(structure(list( name = "Fragment", attribs = list(), children = list(structure(list( name = "span", attribs = list( id = "htmlwidget-9226ce6af62def766d0b", width = 960, height = 500, className = "tippy html-widget"), children = list()), class = "shiny.tag"), structure(list(name = "script", attribs = list(type = "application/json", data-for = "htmlwidget-9226ce6af62def766d0b"), children = list(structure("{\"x\":{\"opts\":{\"animateFill\":false,\"followCursor\":true,\"content\":\"<span style=\\\"font-size:1.5em\\\">-39%<\\/span>\"},\"text\":\"-39%\"},\"evals\":[],\"jsHooks\":[]}", html = TRUE, class = c("html", "character")))), class = "shiny.tag"))), class = c("reactR_component", "shiny.tag"), html_dependencies = list( structure(list(name = "htmlwidgets", version = "1.5.4", src = list( file = "www"), meta = NULL, script = "htmlwidgets.js", stylesheet = NULL, head = NULL, attachment = NULL, package = "htmlwidgets", all_files = TRUE), class = "html_dependency"), structure(list(name = "tippyjs", version = "3.2.0", src = list( file = "htmlwidgets/lib/tippy"), meta = NULL, script = "tippy.all.min.js", stylesheet = c("themes/google.css", "themes/light-border.css", "themes/light.css", "themes/translucent.css" ), head = NULL, attachment = NULL, package = "tippy", all_files = TRUE), class = "html_dependency"), structure(list(name = "tippy-binding", version = "0.1.0", src = list( file = "htmlwidgets"), meta = NULL, script = "tippy.js", stylesheet = NULL, head = NULL, attachment = NULL, package = "tippy", all_files = FALSE), class = "html_dependency"))))), class = c("reactR_component", "shiny.tag")))), class = "shiny.tag"))), class = "shiny.tag"))), class = "shiny.tag"))), class = "shiny.tag"), structure(list(name = "div", attribs = list( style = list(flex = "1 1 0")), children = list()), class = "shiny.tag"))), class = "shiny.tag"))), list(accessor = "BTD_colour", name = "BTD_colour", type = "character", show = FALSE), list(accessor = "BN_colour", name = "BN_colour", type = "character", show = FALSE)), pagination = FALSE, defaultPageSize = 10, paginationType = "numbers", showPageInfo = TRUE, minRows = 1, dataKey = "9cf68dbd4e15b762a2900e767a292f48"), children = list()), class = c("reactR_component", "shiny.tag" )), class = "reactR_markup"), width = "auto", height = "auto", sizingPolicy = list(defaultWidth = NULL, defaultHeight = NULL, padding = NULL, viewer = list(defaultWidth = NULL, defaultHeight = NULL, padding = NULL, fill = TRUE, suppress = FALSE, paneHeight = NULL), browser = list(defaultWidth = NULL, defaultHeight = NULL, padding = NULL, fill = FALSE, external = FALSE), knitr = list(defaultWidth = NULL, defaultHeight = NULL, figure = FALSE)), dependencies = list(structure(list( name = "htmlwidgets", version = "1.5.4", src = list(file = "C:/Users/dche490/AppData/Local/R/win-library/4.2/htmlwidgets/www"), meta = NULL, script = "htmlwidgets.js", stylesheet = NULL, head = NULL, attachment = NULL, all_files = TRUE), class = "html_dependency"), structure(list(name = "tippyjs", version = "3.2.0", src = list( file = "C:/Users/dche490/AppData/Local/R/win-library/4.2/tippy/htmlwidgets/lib/tippy"), meta = NULL, script = "tippy.all.min.js", stylesheet = c("themes/google.css", "themes/light-border.css", "themes/light.css", "themes/translucent.css" ), head = NULL, attachment = NULL, all_files = TRUE), class = "html_dependency"), structure(list(name = "tippy-binding", version = "0.1.0", src = list(file = "C:/Users/dche490/AppData/Local/R/win-library/4.2/tippy/htmlwidgets"), meta = NULL, script = "tippy.js", stylesheet = NULL, head = NULL, attachment = NULL, all_files = FALSE), class = "html_dependency")), elementId = NULL, preRenderHook = NULL, jsHooks = list()), class = c("reactable", "htmlwidget"), package = "reactable") %>% pretty_table()
`
Hi, thank you for using the package! By default, if there are no negative values detected in the column, the data bars will show the data starting from 0 with the 0 positioned to the left. If there are negative values in the column, it will position the 0 in the center of the column.
However, there are cases like the one you're describing where you still want to center at 0 even if the numbers in the column are all positive, so I'll look into adding a parameter that allows the user to specify whether or not the 0 should be centered regardless of the values within the column.
