This is my first question on SO so please advise if more information is needed.
I am trying to render a gauge in each row of a reactable that represents the progress of each Program. Each Program has a different goal, which would be used to set the maximum value for each gauge. I tried using gauge_chart (from reactablefmtr); however, I discovered that the max_value parameter of gauge_chart only allows a single numeric value and cannot be assigned using a variable (i.e., I was trying to use a function to define cell in reactable).
So I have moved on to trying c3 to render the gauges. I have successfully created the table with correct goals assigned to each gauge on the first rendering. however, when I resize the window, the gauge position moves to outside the assigned cell (to the right)(see two images below: before and after resizing window). I suspect the c3 chart size/position is somehow resetting itself, but I do not know JS so I have no idea where to begin to solve this.
Here is the repex:
library(shiny)
library(shinydashboard)
library(reactable)
library(reactablefmtr)
library(c3)
#make data
df=data.frame(Program=c('Prog1','Prog2','Prog3','Prog4','Prog5'),
Total=c(355,1125,388,21,50),
Goal=c(500,2000,400,1200,100),
Source=c('Source1','Source2','Source3','Source4','Source5'),
A=c(5,10,15,20,25),
B=c(1,2,3,4,5),
C=c(50,100,150,200,250),
D=c(2,4,6,8,10))
#UI====
ui <- dashboardPage(
dashboardHeader(title = 'In-season dashboard'),
dashboardSidebar(
collapsed = TRUE,
sidebarMenu(
menuItem("Current Data", tabName = "curdat", icon = icon("table"))
)
),
dashboardBody(
tabItems(
tabItem(
tabName = "curdat",
fluidRow(
box(width=6, title = "Summary", status = "primary", solidHeader = TRUE,
reactableOutput(outputId = "sumtable"), style= "overflow-x: scroll"),
box(width=6,title = "Detail", reactableOutput(outputId = "detailtable"))
)
)
)
)
)
#Server====
server <- function(session, input, output) {
rv=reactiveValues()
observe({rv$df=df})
output$sumtable <- renderReactable({
reactable(rv$df,
theme = reactableTheme(cellPadding = "3px 3px",
borderColor = "#dfe2e5",
borderWidth = "0.5px",
groupHeaderStyle = list(borderColor = "#555")),
compact = TRUE,
showSortIcon = TRUE,
searchable = FALSE,
columns = list(
Program = colDef(maxWidth = 100),
Total = colDef(align = "left", cell = function(value, index) {
gl=rv$df$Goal[index]
data.frame(as.numeric(value)) %>%
c3() %>%
c3_gauge(value, min=0, max=gl, height=100) %>%
legend(hide=TRUE) %>%
c3_chart_size(left = 0, right = 0, top = 0,bottom = 0, height=100, width = 100)
}, maxWidth = 100),
Goal = colDef(show=FALSE),
Source = colDef(maxWidth = 250),
A = colDef(name = "A", maxWidth = 35, style=list(background="#fce5ee", borderRight = "0.5px solid rgba(0, 0, 0, 0.1)")),
B = colDef(name = "B", maxWidth = 35, style=list(background="#fce5ee", borderRight = "0.5px solid rgba(0, 0, 0, 0.1)")),
C = colDef(name = "C", maxWidth = 35, style=list(background="#fce5ee", borderRight = "0.5px solid rgba(0, 0, 0, 0.1)")),
D = colDef(name = "D", maxWidth = 35, style=list(background="#ddefff", borderRight = "0.5px solid rgba(0, 0, 0, 0.1)"))
),
columnGroups = list(
colGroup(name = "Grp1", columns = c("A", "B")),
colGroup(name = "Grp2", columns = c("C", "D"))
),
outlined = TRUE, defaultPageSize=20
)
})
}
#run app====
shinyApp(ui=ui, server=server)
This is correct table on first rendering
This is table after resizing the window:
I'm guessing the c3_chart_size paramter is not persisting?
I appreciate any help on a solution using the c3 gauge or if there is a way to do this using reactablefmtr that I have not discovered.