Brödtexten

Bygga dashboards med shinydashboard

Png Kee Seng

Researcher

En översikt

Huvuddelen av shinydashboard-gränssnittet
Hit placeras vanligtvis indata och utdata
- Ungefär som rätter och beställningar på en restaurang
- Servern sköter kommunikationen
Brödtexten definieras av dashboardBody() och lagras vanligtvis som body

body <- dashboardBody(...)

Trådramsskissning

Skissa upp en trådram
- Bygg upp strukturen innan du lägger till innehållet
I en shinydashboard – bestäm objektens placering först

Trådram av ett zeppelinskepp.

¹ Brett Jordan, Flickr

Lägga till rader och boxar: tomma boxar

Lägg till rader med fluidRow()
Och lägg till boxar med box()

Dashboard med två rader, vardera med två tomma boxar.

body <- dashboardBody(

  fluidRow(

           box("Row 1, box 1"), 
           box("Row 1, box 2")

           ),
  fluidRow(

           box("Row 2, box 1"), 
           box("Row 2, box 2")

           )

)

Lägga till rader och boxar: innehåll i boxar

Brödtext med fyra boxar och innehåll i vissa boxar.

body <- dashboardBody(
  fluidRow(box("Row 1, box 1", 

               plotOutput('plot')),

           box("Row 1, box 2")),
  fluidRow(box("Row 2, box 1"), 
           box("Row 2, box 2", 

               selectInput("select", 
                           "Select team number:", 
                           choices = c(1,2))))

)

Förhindra att boxar flödar över

Varje box upptar som standard 6 av 12 enheter av det totala horisontella utrymmet
Ange width för att undvika att innehåll flödar över
- I exemplet sätter vi bredden till 3, 5 och 4
Det rekommenderas starkt att använda box()

Fler boxar i brödtexten

body <- dashboardBody(
  fluidRow(box("Row 1, box 1"), 
           box("Row 1, box 2"),
           box("Row 1, box 3")),
  fluidRow(box("Row 2, box 1"), 
           box("Row 2, box 2"))
)

body <- dashboardBody(
  fluidRow(box("Row 1, box 1", width = 3), 
           box("Row 1, box 2", width = 5),
           box("Row 1, box 3", width = 4)),
  fluidRow(box("Row 2, box 1"), 
           box("Row 2, box 2"))
)

valueBox och infoBox

Det finns även boxar som visar små mängder information
- valueBox()
- infoBox()

valueBox och infoBox i brödtexten.

body <- dashboardBody(
  fluidRow(valueBox(value = 3, 
                    subtitle = "Total no. of red cards awarded", 
                    icon = icon("user"),
                    color = "red"),

           infoBox(value = 158, 
                   title = "Total no. of goals scored", 
                   icon = icon("futbol"))
           ))

valueBoxOutput och infoBoxOutput

Varianter av valueBox() och infoBox(): valueBoxOutput() och infoBoxOutput()
Dessa är utdatafunktioner
Det finns även renderValueBox() och renderInfoBox()
valueBox() och infoBox() krävs inuti dessa

valueBoxOutput och infoBoxOutput i brödtexten. Den renderade shinydashboarden är identisk med den föregående.

body <- dashboardBody(
  fluidRow(valueBoxOutput(outputId = "valuebox1"),
           infoBoxOutput(outputId = "infobox1")
           ))

server <- function(input, output){
  output$valuebox1 <- renderValueBox(
    valueBox(3, "Total no. of red cards awarded",
                icon = icon("user"), color = "red"))
  output$infobox1 <- renderInfoBox(
    infoBox(158, 
                   title = "Total no. of goals scored", 
                   icon = icon("futbol")))
}

Analogin mellan valueBoxOutput och plotOutput

plotOutput():
- Placeras i gränssnittet (UI)
- Bestämmer positionen i shinydashboarden
renderPlot():
- Placeras i server()
- Innehåller ett ggplot()-objekt

valueBoxOutput():
- Placeras i gränssnittet (UI)
- Bestämmer positionen i shinydashboarden
renderValueBox():
- Placeras i server()
- Innehåller ett valueBox()-objekt

Länka sidopanelen och brödtexten

Minns sidopanelen med två knappar: "charts" och "statistics"
För att länka dessa till brödtexten behövs tabItems()
- Varje sida definieras av en tabItem()
- Etiketterna i varje menuItem()-tabItem()-par måste stämma överens

Brödtexten och sidopanelen är nu länkade

sidebar <- dashboardSidebar(
  sidebarMenu(
    id = "pages",

    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", badgeColor = "green"),

    menuItem("Statistics", icon = icon("file-excel"), 
             tabName = "statistics", 
             badgeLabel = "urgent", badgeColor = "red")
 ))

body <- dashboardBody(
  tabItems(

    tabItem("charts",
      "Charts go here."
    ),
    tabItem("statistics",
      "Statistics go here."
)))

Flikar i brödtexten

I en shinyApp kan flikar även definieras med tabsetPanel()
- Varje flik definieras av tabPanel()
Blanda inte ihop med tabItems() och tabItem()

Lägga till flikuppsättningar i brödtexten

body <- dashboardBody(tabsetPanel(

    tabPanel("Distributions", 
             box(plotOutput("dist"))),
    tabPanel("Statistics", 
             dateInput("matchdate", 
                       "Enter the match date:", 
                       value = "2022-11-20"),
             valueBoxOutput("red"), 
             valueBoxOutput("yellow")),
    tabPanel("Data", "Data goes here.", 
             tableOutput("data"))

))

server <- function(input, output){
  output$red <- renderValueBox(valueBox(0, "Red cards"))
  output$yellow <- renderValueBox(valueBox(6, "Yellow cards"))
}

Nu kör vi en övning!

Bygga dashboards med shinydashboard