Sizing problems of sund2b output in shiny window or browser with fluidPage

[evodevosys]

I'd like to have a few sund2b charts arranged in a shiny window - either in a row as below or in a grid (for my actual application it would probably be 4 charts in a 2x2 grid). I am laying out the shiny UI using fluidPage. However, the sund2b charts show up at odd sizes, and when I resize the window (either in the RStudio shiny popup or in a web browser), the individual charts don't resize together - one gets smaller or bigger and the others stay the same. A reproducible example is below along with some screenshots.

Update: I just realized that in both the shiny popup and the web browser, the charts rescale to be the same size once a reactive event happens (changing the number in the example below). But before that, they are odd. Of course, since Shiny apps are interactive, perhaps this behavior isn't really a problem practically.

Thanks for any advice and for making a really nice tool.

library(shiny)
library(sunburstR)
library(d3r)


ui <- fluidPage(
  
  # App title ----
  titlePanel("Reproducible example of sund2b display problems"),
  
  # Sidebar layout with input and output definitions ----
  fluidRow(
    column(width=4,
           sund2bOutput('sunburst1')
           
    ),
    column(width=4,
           sund2bOutput('sunburst2')
           
    ),
    column(width=4,
           sund2bOutput('sunburst3')
           
    )
  ),
  fluidRow(
    column(12,
           numericInput('entry',label=h3('Enter number here'),value=5)
    )
  )
  
  
)

server <- function(input, output) {
  

  output$sunburst1<-renderSund2b({
    sund2b(
      d3_nest(
        data.frame(list(level1=c('a','a','a','b','b','b'),
                        level2=c('a1','a1','a2','b1','b11','b2'),
                        level3=c('a11','a12','a21','b11',NA,'b21'),
                        vSize=c(5,input$entry,6,3,4,1))) ,
        value_cols = 'vSize'
      ),
      valueField = "vSize"
    )
  })
  output$sunburst2<-renderSund2b({
    sund2b(
      d3_nest(
        data.frame(list(level1=c('a','a','a','b','b','b'),
                        level2=c('a1','a1','a2','b1','b11','b2'),
                        level3=c('a11','a12','a21','b11',NA,'b21'),
                        vSize=c(5,4,6,input$entry,4,1))),
        value_cols = 'vSize'
      ),
      valueField = "vSize"
    )
  })
  output$sunburst3<-renderSund2b({
    sund2b(
      d3_nest(
        data.frame(list(level1=c('a','a','a','b','b','b'),
                        level2=c('a1','a1','a2','b1','b11','b2'),
                        level3=c('a11','a12','a21','b11',NA,'b21'),
                        vSize=c(5,4,6,3,input$entry,1))),
        value_cols = 'vSize'
      ),
      valueField = "vSize"
    )
  })
  
}
# Run the application 
shinyApp(ui = ui, server = server)

Initial display in Shiny Popup

---

Shiny Popup after expanding to the right

---

Shiny popup after expanding to the right and down

---

Initial display in web browser (firefox) - this looks pretty good

---

Web browser after shrinking from the right

[timelyportfolio]

@evodevosys thanks for the issue. I will try to respond over the weekend.

[timelyportfolio]

@evodevosys thanks so much for the easily reproducible example allowing me to focus on the issue. I'll explain what I found.

1. The primary problem is that I had a bug in the resize function which explains the very strange behavior that I have addressed with a recent push to Github. If possible, please `remotes::install_github("timelyportfolio/sunburstR") and see if this fixes the issue.
2. Also, you'll need to specify a width = "100% for HTMLWidgets to pick up the resize event. Using a fixed width means no change in width on resize and no resize event trigger.
3. Now that it is working (hopefully) you might notice that anything under 400px becomes unworkable. I would recommend using a sm or md breakpoint on your col or setting a min-width with CSS.

Please try the below. If you have any more trouble, please let me know. I will try to get this prepped and ready for CRAN over the next couple of days.

slightly amended example using min-width

library(shiny)
library(sunburstR)
library(d3r)

ui <- fluidPage(
  
  # App title ----
  titlePanel("Reproducible example of sund2b display problems"),
  
  # Sidebar layout with input and output definitions ----
  fluidRow(
    column(width=4, style = "min-width: 400px;",
           sund2bOutput('sunburst1')
           
    ),
    column(width=4, style = "min-width: 400px;",
           sund2bOutput('sunburst2')
           
    ),
    column(width=4, style = "min-width: 400px;",
           sund2bOutput('sunburst3')
           
    )
  ),
  fluidRow(
    column(12,
           numericInput('entry',label=h3('Enter number here'),value=5)
    )
  )
  
  
)

server <- function(input, output) {
  

  output$sunburst1<-renderSund2b({
    sund2b(
      d3_nest(
        data.frame(list(level1=c('a','a','a','b','b','b'),
                        level2=c('a1','a1','a2','b1','b11','b2'),
                        level3=c('a11','a12','a21','b11',NA,'b21'),
                        vSize=c(5,input$entry,6,3,4,1))) ,
        value_cols = 'vSize'
      ),
      valueField = "vSize",
      width = "100%"
    )
  })
  output$sunburst2<-renderSund2b({
    sund2b(
      d3_nest(
        data.frame(list(level1=c('a','a','a','b','b','b'),
                        level2=c('a1','a1','a2','b1','b11','b2'),
                        level3=c('a11','a12','a21','b11',NA,'b21'),
                        vSize=c(5,4,6,input$entry,4,1))),
        value_cols = 'vSize'
      ),
      valueField = "vSize",
      width = "100%"
    )
  })
  output$sunburst3<-renderSund2b({
    sund2b(
      d3_nest(
        data.frame(list(level1=c('a','a','a','b','b','b'),
                        level2=c('a1','a1','a2','b1','b11','b2'),
                        level3=c('a11','a12','a21','b11',NA,'b21'),
                        vSize=c(5,4,6,3,input$entry,1))),
        value_cols = 'vSize'
      ),
      valueField = "vSize",
      width = "100%"
    )
  })
  
}
# Run the application 
shinyApp(ui = ui, server = server)

slightly amended example with md breakpoint (bootstrap grid docs - col just uses md-*)

library(shiny)
library(sunburstR)
library(d3r)

ui <- fluidPage(
  
  # App title ----
  titlePanel("Reproducible example of sund2b display problems"),
  
  # Sidebar layout with input and output definitions ----
  fluidRow(
    div(class = "col-lg-4 col-md-6",
           sund2bOutput('sunburst1')
           
    ),
    div(class = "col-lg-4 col-md-6",
           sund2bOutput('sunburst2')
           
    ),
    div(class = "col-lg-4 col-md-6",
           sund2bOutput('sunburst3')
           
    )
  ),
  fluidRow(
    column(12,
           numericInput('entry',label=h3('Enter number here'),value=5)
    )
  )
  
  
)

server <- function(input, output) {
  

  output$sunburst1<-renderSund2b({
    sund2b(
      d3_nest(
        data.frame(list(level1=c('a','a','a','b','b','b'),
                        level2=c('a1','a1','a2','b1','b11','b2'),
                        level3=c('a11','a12','a21','b11',NA,'b21'),
                        vSize=c(5,input$entry,6,3,4,1))) ,
        value_cols = 'vSize'
      ),
      valueField = "vSize",
      width = "100%"
    )
  })
  output$sunburst2<-renderSund2b({
    sund2b(
      d3_nest(
        data.frame(list(level1=c('a','a','a','b','b','b'),
                        level2=c('a1','a1','a2','b1','b11','b2'),
                        level3=c('a11','a12','a21','b11',NA,'b21'),
                        vSize=c(5,4,6,input$entry,4,1))),
        value_cols = 'vSize'
      ),
      valueField = "vSize",
      width = "100%"
    )
  })
  output$sunburst3<-renderSund2b({
    sund2b(
      d3_nest(
        data.frame(list(level1=c('a','a','a','b','b','b'),
                        level2=c('a1','a1','a2','b1','b11','b2'),
                        level3=c('a11','a12','a21','b11',NA,'b21'),
                        vSize=c(5,4,6,3,input$entry,1))),
        value_cols = 'vSize'
      ),
      valueField = "vSize",
      width = "100%"
    )
  })
  
}
# Run the application 
shinyApp(ui = ui, server = server)