Render HTML in Shiny tabpanel

#1

The HTML output is created by summarytool::dfSummary function.

summarytools

When the HTML gets rendered on the tabpanel, the whole UI changes. Is there a way to render the HTML on the tabpanel without changing the UI?

library(summarytools)

ui <- fluidPage(
  titlePanel("dfSummary"),
  sidebarLayout(
    sidebarPanel(
      uiOutput("dfSummaryButton")
    ),
    mainPanel(
        tabsetPanel(
          tabPanel("dfSummary Output",
          htmlOutput("profileSummary")))
    )
  )
)
server <- function(input, output, session) {
#Read in data file
recVal <- reactiveValues()
dfdata <- iris

#Create dfSummary Button
output$dfSummaryButton <- renderUI({
      actionButton("dfsummarybutton", "Create dfSummary")
    })

#Apply dfSummary Buttom
observeEvent(input$dfsummarybutton, {
  recVal$dfdata <- dfdata
})

#dfSummary data
output$profileSummary <- renderUI({
       req(recVal$dfdata)
       SumProfile <- print(dfSummary(recVal$dfdata), omit.headings = TRUE, method = 'render')
       SumProfile
})
}
shinyApp(ui, server)
#2

Just wondering if you figured out a solution to this. I just started testing out incorporating summarytools into shiny and I noticed a similar issue. When you load the dfsummary, the entire UI changes, as if it is inserting CSS or something when it renders.

#3

@dthomas - So I think I mostly figured this out. It seems like the problem is that the dfSummary() has it's own CSS which overrides the default CSS in shiny when it is called. To prevent this from happening I examined the object returned by dfSummary(), manually pulled out the "important" CSS and then returned only the HTML from that object. For example:

out <- print(dfSummary(mtcars), omit.headings = TRUE, method = 'render')
out[[3]][[2]][[1]]

returns the necessary HTML that can be rendered in shiny.

out <- print(dfSummary(mtcars), omit.headings = TRUE, method = 'render')
out[[3]][[1]][[3]][[3]]

returns the CSS.

If you copy that CSS and put it into a separate file (e.g. dfSummary.css) in a www/ directory you can then load it into your application.

From a high level this would look like:

ui <- fluidPage(theme = "dfSummary.css",
                fluidRow(
                  uiOutput("summaryTable")
                )
)


server <- function(input, output, session) {
  output$summaryTable <- renderUI({
    
    out <- print(dfSummary(mtcars), omit.headings = TRUE, method = 'render')
    out[[3]][[2]][[1]]
  })
}

shinyApp(ui, server)

where dfSummary.css is the CSS copied from above.

Let me know if this helps.

Matt

#4

@kentm sorry for late reply, was out of town this weekend. Looks like you found what is interacting with the UI. Taking out the css makes the alignment hard to follow in some of the columns. I did make contact with Dominic, the developer of summarytools, earlier about the issue and I'll let him know what you found. Thanks for your help!

#5

Hi there Kent and D, and thanks for your interest in summarytools!

As Kent pointed out, the CSS comes in two parts, the first being Bootstrap CSS, the second being specific to summarytools. A quick work-around to avoid including the Bootstrap CSS (the culprit for affecting the whole layout) would be to remove it from the object directly:

out <- print(dfSummary(mtcars), omit.headings = TRUE, method = 'render')
out[[3]][[1]][[3]][[2]] <- NULL
return(out)

That way, you wouldn't need the extra work of putting the desirable css in an extra file, and I think results should be the same.

There are still issues to be resolved, but I'll try to make this seemless in the future. In the meantime, please don't hesistate to share with me what you find works best.

Best wishes

#6

Good news! summarytools 0.8.3 (in development but available on github, see below) will allow doing this in a much cleaner way. A bootstrap.css logical parameter is being added to the print method. Setting it to FALSE will avoid interaction with shiny's CSS.

Additionnaly, a graph.magnif (magnification factor) is being added to the dfSummary() function, so that graphs can show up with the proper size. Using 0.8 on my system was ideal.

out <- print(dfSummary(someData, 
                       graph.magnif = 0.8),
             method = 'render',
             omit.headings = TRUE,
             bootstrap.css = FALSE)

To install version 0.8.3, which is still in development as of now, use

install.packages("devtools")
library(devtools)
install_github('dcomtois/summarytools', ref='dev-current')

Best wishes

#7

This is great! Thanks for the update.