0

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.

B Mull
  • 1
  • 1

0 Answers0