Problem with positioning of c3 gauge in reactable when resizing window

66 views Asked by At

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.

0

There are 0 answers