Bootstrap e x planation BU IL D IN G DASH BOAR D S W ITH SH IN - PowerPoint PPT Presentation

Bootstrap e x planation BU IL D IN G DASH BOAR D S W ITH SH IN YDASH BOAR D L u c y D ' Agostino McGo w an Postdoctoral fello w in Biostatistics at Johns Hopkins Uni v ersit y

Bootstrap La y o u t box( width = 12, title = "This box takes up the whole row!", "A 12 column box." ) BUILDING DASHBOARDS WITH SHINYDASHBOARD

box( width = 6, title = "This box takes up half a row!", "A 6 column box." ), box( width = 6, title = "This box takes up half a row!", "A 6 column box." ) BUILDING DASHBOARDS WITH SHINYDASHBOARD

La y o u t T y pes Ro w- based la y o u t Col u mn - based la y o u t Mi x ed la y o u t BUILDING DASHBOARDS WITH SHINYDASHBOARD

Ro w- based la y o u t fluidRow( box( width = 6, title = "This box takes up half a row!", "A 6 column box." ), box( width = 6, title = "This box takes up half a row!", "A 6 column box." ) ) BUILDING DASHBOARDS WITH SHINYDASHBOARD

Col u mn - based la y o u t fluidRow( column(width = 6, box( width = NULL, title = "This box takes up half a row!", "A 6 column box." ) ), column(width = 6, box( width = NULL, title = "This box takes up half a row!", "A 6 column box." ) ) ) BUILDING DASHBOARDS WITH SHINYDASHBOARD

Mi x ed La y o u t fluidRow( box(width = 12, title = "This box takes up the whole row!", "A 12 column box.") ), fluidRow( column(width = 6, box(width = NULL, title = "This box takes up half a row!", "A 6 column box.") ), column(width = 6, box(width = NULL, title = "This box takes up half a row!", "A 6 column box.") ) ) BUILDING DASHBOARDS WITH SHINYDASHBOARD

Let ' s practice ! BU IL D IN G DASH BOAR D S W ITH SH IN YDASH BOAR D

C u stomi z ing the appearance BU IL D IN G DASH BOAR D S W ITH SH IN YDASH BOAR D L u c y D ' Agostino McGo w an Postdoctoral fello w in Biostatistics at Johns Hopkins Uni v ersit y

Dashboard skins bl u e ( defa u lt ) black p u rple green red y ello w BUILDING DASHBOARDS WITH SHINYDASHBOARD

Dashboard skins dashboardPage(skin = "green", header = header, sidebar = sidebar, body = body) BUILDING DASHBOARDS WITH SHINYDASHBOARD

CSS dashboardBody( tags$head( tags$link(rel = "stylesheet", type = "text/css", href = "my_style.css") ) ) BUILDING DASHBOARDS WITH SHINYDASHBOARD

CSS dashboardBody( tags$head( tags$style( HTML(' \\CSS here ') ) ) ) BUILDING DASHBOARDS WITH SHINYDASHBOARD

Let ' s practice ! BU IL D IN G DASH BOAR D S W ITH SH IN YDASH BOAR D

Icons , stat u ses , colors BU IL D IN G DASH BOAR D S W ITH SH IN YDASH BOAR D L u c y D ' Agotino McGo w an Postdoctoral fello w in Biostatistics at Johns Hopkins Uni v ersit y

Icons icon(name = "bicycle", lib = "font-awesome") BUILDING DASHBOARDS WITH SHINYDASHBOARD

Icons icon(name = "refresh", class = "fa-5x fa-spin") BUILDING DASHBOARDS WITH SHINYDASHBOARD

Icons h � p :// fonta w esome . io / icons / h � p :// fonta w esome . io / e x amples / h � ps :// getbootstrap . com / components / BUILDING DASHBOARDS WITH SHINYDASHBOARD

Stat u ses ?validStatuses primary Dark bl u e success Green info Light bl u e warning Orange danger Red BUILDING DASHBOARDS WITH SHINYDASHBOARD

Colors teal ?validColors olive red lime yellow orange aqua fuchsia blue purple light-blue maroon green black navy BUILDING DASHBOARDS WITH SHINYDASHBOARD

Let ' s add some flair to y o u r dashboard ! BU IL D IN G DASH BOAR D S W ITH SH IN YDASH BOAR D