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

▶

Nov 16, 2022 212 likes •435 views

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

SLIDE 1

Bootstrap explanation

BU IL D IN G DASH BOAR D S W ITH SH IN YDASH BOAR D

Lucy D'Agostino McGowan

Postdoctoral fellow in Biostatistics at Johns Hopkins University

SLIDE 2

BUILDING DASHBOARDS WITH SHINYDASHBOARD

Bootstrap Layout

box( width = 12, title = "This box takes up the whole row!", "A 12 column box." )

SLIDE 3

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." )

SLIDE 4

BUILDING DASHBOARDS WITH SHINYDASHBOARD

Layout Types

Row-based layout Column-based layout Mixed layout

SLIDE 5

BUILDING DASHBOARDS WITH SHINYDASHBOARD

Row-based layout

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." ) )

SLIDE 6

BUILDING DASHBOARDS WITH SHINYDASHBOARD

Column-based layout

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." ) ) )

SLIDE 7

BUILDING DASHBOARDS WITH SHINYDASHBOARD

Mixed Layout

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.") ) )

SLIDE 8

Let's practice!

BU IL D IN G DASH BOAR D S W ITH SH IN YDASH BOAR D

SLIDE 9

Customizing the appearance

BU IL D IN G DASH BOAR D S W ITH SH IN YDASH BOAR D

Lucy D'Agostino McGowan

Postdoctoral fellow in Biostatistics at Johns Hopkins University

SLIDE 10

BUILDING DASHBOARDS WITH SHINYDASHBOARD

Dashboard skins

blue (default) black purple green red yellow

SLIDE 11

BUILDING DASHBOARDS WITH SHINYDASHBOARD

Dashboard skins

dashboardPage(skin = "green", header = header, sidebar = sidebar, body = body)

SLIDE 12

BUILDING DASHBOARDS WITH SHINYDASHBOARD

CSS

dashboardBody( tags$head( tags$link(rel = "stylesheet", type = "text/css", href = "my_style.css") ) )

SLIDE 13

BUILDING DASHBOARDS WITH SHINYDASHBOARD

CSS

dashboardBody( tags$head( tags$style( HTML(' \\CSS here ') ) ) )

SLIDE 14

Let's practice!

BU IL D IN G DASH BOAR D S W ITH SH IN YDASH BOAR D

SLIDE 15

Icons, statuses, colors

BU IL D IN G DASH BOAR D S W ITH SH IN YDASH BOAR D

Lucy D'Agotino McGowan

Postdoctoral fellow in Biostatistics at Johns Hopkins University

SLIDE 16

BUILDING DASHBOARDS WITH SHINYDASHBOARD

Icons

icon(name = "bicycle", lib = "font-awesome")

SLIDE 17

BUILDING DASHBOARDS WITH SHINYDASHBOARD

Icons

icon(name = "refresh", class = "fa-5x fa-spin")

SLIDE 18

BUILDING DASHBOARDS WITH SHINYDASHBOARD

Icons

hp://fontawesome.io/icons/ hp://fontawesome.io/examples/ hps://getbootstrap.com/components/

SLIDE 19

BUILDING DASHBOARDS WITH SHINYDASHBOARD

Statuses

?validStatuses primary Dark blue success Green info Light blue warning Orange danger Red

SLIDE 20

BUILDING DASHBOARDS WITH SHINYDASHBOARD

Colors

?validColors red yellow aqua blue light-blue green navy teal

live

lime

range

fuchsia purple maroon black

SLIDE 21

Let's add some flair to your dashboard!

BU IL D IN G DASH BOAR D S W ITH SH IN YDASH BOAR D