shinybulma and ShinyDashboard

[simon-tarr]

Sorry for the basic question but I need a little help integrating shinybulma::bulmaTimeline() into a shinydashboard() app that I'm currently developing. Below is an MRE:

library(shiny)
library(shinydashboard)
library(shinybulma)

header<-dashboardHeader()

# Define Sidebar Links
sidebar <- dashboardSidebar(

  sidebarMenu(

    shinydashboard::menuItem("Test", tabName = "Test", icon = icon("clipboard-check"))
  )

) # End of sidebar code

body<-dashboardBody(

  tabItems(

    tabItem("Test",

            bulmaPage(
              bulmaContainer(
                # centered timeline
                bulmaTimeline(
                  centered = FALSE, rtl = FALSE,
                  bulmaTimelineHeader(text = "Start", size = "medium", color = "primary"),
                  bulmaTimelineItem(
                    color = "primary", marker_color = "primary",
                    marker_image = FALSE, marker_icon = FALSE,
                    content_header = "January 2016",
                    content_body = "Timeline content - Can include any HTML element"
                  ),
                  bulmaTimelineItem(
                    color = "warning", marker_color = "warning",
                    marker_image = TRUE, marker_image_size = "32x32", marker_icon = FALSE,
                    content_header = "February 2016",
                    content_body = "Timeline content - Can include any HTML element",
                    tags$img(src = "http://bulma.io/images/placeholders/32x32.png")
                  ),
                  bulmaTimelineHeader(text = "2017", size = NULL, color = "primary"),
                  bulmaTimelineItem(
                    color = "danger", marker_color = "danger",
                    marker_image = FALSE, marker_icon = TRUE,
                    content_header = "March 2016",
                    content_body = "Timeline content - Can include any HTML element",
                    tags$i(class = "fa fa-flag")
                  ),
                  bulmaTimelineHeader(text = "End", size = "medium", color = "primary")
                )
              )
            )

    )

  )

)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) { 

}

shinyApp(ui, server)

Why, when including a bulmaTimeline() into the above does a grey horizontal bar appear on the timeline? Also, all icons in the sidebar menu are rendered as small rectangles, instead of the assigned menuItem icon. Any help would be appreciated!

[DivadNojnarg]

Hi Simon, actually, this is not a recommended way to use bulma. shinydashboard has its own CSS, so is bulma. This is bad luck since shinydashboard has hidden timeline CSS class (more here). What happens is that there is a conflict between bulma timelines CSS and that of shinydashboard.

A way to solve the issue would be to rewrite the bulmaTimeline and bulmaTimelineItem functions so that classes are unique to bulma and not shinydashboard. Then change the bulma timeline CSS to match your new classes.

For instance, let's look at the bulmaTimeline:

bulmaTimeline <- function (..., centered = FALSE, rtl = FALSE) {
    cl <- "timeline"
    if (centered == TRUE) 
        cl <- paste0(cl, " is-centered")
    if (rtl == TRUE) 
        cl <- paste0(cl, " is-rtl")
    shiny::tags$div(class = cl, ...)
}

You would have to replace the cl <- "timeline" by something else (like bulma-timeline) since it is the same name in shinydashboard CSS. On the CSS side (https://github.com/Wikiki/bulma-timeline/tree/7fafb404652d640776cc9a871580c13326c0635c), you would have to rewrite the sass file for the bulma timeline changing the class name and recompile it to have css. The sass package from Rstudio is good for that (https://github.com/rstudio/sass).

[simon-tarr]

Hi David, thanks for the speedy reply. I've really opened a can of worms here, haven't I! Having digested your response and thought more about the app that I'm developing, I think I can break out the part of the app I need the timeline functionality for into a new app which just uses shinybulma() (which I guess is the preferred way of doing things).

[simon-tarr]

Hi David,

Sorry to bombard you with questions but I've just moved the shinybulma code over to the default shiny 'dashboard' template, while including a month picker from the shinyWidgets package:

library(shiny)
library(shinydashboard)
library(shinyWidgets)

# Define UI for app that draws a histogram ----
ui <- fluidPage(

  # App title ----
  titlePanel("My Dashboard"),

  # Sidebar layout with input and output definitions ----
  sidebarLayout(

    # Sidebar panel for inputs ----
    sidebarPanel(

      airMonthpickerInput(inputId = "select_month", label = "Select Month", value = Sys.Date()),

      h4("Comments"),
      p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
      actionButton("issue", "Report an issue", icon("paper-plane"), 
                   style="color: #fff; background-color: #337ab7; border-color: #2e6da4")
    ), # End of sidebarPanel() code

    mainPanel(

      x<-shinybulma::bulmaPage(

        shinybulma::bulmaContainer(

          # centered timeline
          shinybulma::bulmaTimeline(
            centered = FALSE, rtl = FALSE,
            shinybulma::bulmaTimelineHeader(text = "Start", size = "large", color = "primary"),
            shinybulma::bulmaTimelineItem(
              color = "primary", marker_color = "primary",
              marker_image = FALSE, marker_icon = FALSE,
              content_header = "January 2016",
              content_body = "Timeline content - Can include any HTML element"
            ),

            shinybulma::bulmaTimelineItem(
              color = "warning", marker_color = "warning",
              marker_image = TRUE, marker_image_size = "32x32", marker_icon = FALSE,
              content_header = "February 2016",
              content_body = "Timeline content - Can include any HTML element",
              tags$img(src = "http://bulma.io/images/placeholders/32x32.png")
            ),

            shinybulma::bulmaTimelineHeader(text = "2017", size = NULL, color = "primary"),

            shinybulma::bulmaTimelineItem(
              color = "danger", marker_color = "danger",
              marker_image = FALSE, marker_icon = TRUE,
              content_header = "March 2016",
              content_body = "Timeline content - Can include any HTML element",
              tags$i(class = "fa fa-flag")
            ),

            shinybulma::bulmaTimelineHeader(text = "End", size = "large", color = "primary")
          )
        )
      ) # End of bulmaPage()

    ) # End of mainPanel() code
  )
) # End of UI code

# Define server logic required to draw a histogram ----
server <- function(input, output) {

}

shinyApp(ui, server)

As you can see, the timeline is now displaying correctly but the CSS in the date picker is messed up (it returns to correct behaviour if you delete the timeline code). Do you know why? Is it another CSS conflict?

I have browsed the shinybulma repo looking for some dashboard templates but I can't seem to find any. The demo shows a series of boxes/tiles, but nothing that looks, to me at least, like a dashboard. I was wondering how I can utilise the power of the shinybulma code within a regular-looking dashboard template?

Many thanks, Simon

[DivadNojnarg]

In case you missed it: shinydashboardPlus has a timeline widget ;) There exists a sort of bulma dashboard template in the wild but nothing fancy.

[simon-tarr]

Thanks, will check this out :)