El cuerpo

Creación de paneles con shinydashboard

Png Kee Seng

Researcher

Visión general

  • Gran parte de la UI de shinydashboard
  • Normalmente aquí van entradas y salidas
    • Son como platos y pedidos en un restaurante
    • El servidor gestiona la comunicación
  • El cuerpo se define con dashboardBody() y suele guardarse como body
body <- dashboardBody(...)
Creación de paneles con shinydashboard

Wireframing

  • Haz un wireframe
    • Define la estructura antes del contenido
  • En shinydashboard, primero decide la posición de los objetos

El wireframe de un zepelín.

1 Brett Jordan, Flickr
Creación de paneles con shinydashboard

Añadir filas y cajas: cajas vacías

  • Añade filas con fluidRow()
  • Y añade cajas con box()

Panel con dos filas, cada una con dos cajas vacías.

body <- dashboardBody(

  fluidRow(

           box("Fila 1, caja 1"), 
           box("Fila 1, caja 2")

           ),
  fluidRow(

           box("Fila 2, caja 1"), 
           box("Fila 2, caja 2")

           )

)
Creación de paneles con shinydashboard

Añadir filas y cajas: contenido en cajas

Cuerpo con cuatro recuadros y contenido en algunos.

body <- dashboardBody(
  fluidRow(box("Fila 1, caja 1", 

               plotOutput('plot')),

           box("Fila 1, caja 2")),
  fluidRow(box("Fila 2, caja 1"), 
           box("Fila 2, caja 2", 

               selectInput("select", 
                           "Selecciona número de equipo:", 
                           choices = c(1,2))))

)
Creación de paneles con shinydashboard

Evitar desbordes en cajas

  • Cada caja ocupa 6 de 12 unidades del ancho total por defecto
  • Para evitar desbordes, ajusta width
    • En el ejemplo: 3, 5 y 4
  • Es muy recomendable añadir box()

Más cajas en el cuerpo

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

body <- dashboardBody(
  fluidRow(box("Fila 1, caja 1", width = 3), 
           box("Fila 1, caja 2", width = 5),
           box("Fila 1, caja 3", width = 4)),
  fluidRow(box("Fila 2, caja 1"), 
           box("Fila 2, caja 2"))
)
Creación de paneles con shinydashboard

valueBox e infoBox

  • Hay cajas para mostrar poca información
    • valueBox()
    • infoBox()

valueBox e infoBox en el cuerpo.

body <- dashboardBody(
  fluidRow(valueBox(value = 3, 
                    subtitle = "N.º total de tarjetas rojas", 
                    icon = icon("user"),
                    color = "red"),

           infoBox(value = 158, 
                   title = "N.º total de goles", 
                   icon = icon("futbol"))
           ))
Creación de paneles con shinydashboard

valueBoxOutput e infoBoxOutput

  • Variantes de valueBox() e infoBox(): valueBoxOutput() e infoBoxOutput()
  • Son funciones de salida
  • También existen renderValueBox() y renderInfoBox()
  • Se necesita valueBox() e infoBox()

valueBoxOutput e infoBoxOutput en el cuerpo. El dashboard renderizado es idéntico al anterior.

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

server <- function(input, output){
  output$valuebox1 <- renderValueBox(
    valueBox(3, "N.º total de tarjetas rojas",
                icon = icon("user"), color = "red"))
  output$infobox1 <- renderInfoBox(
    infoBox(158, 
                   title = "N.º total de goles", 
                   icon = icon("futbol")))
}
Creación de paneles con shinydashboard

Analogía entre valueBoxOutput y plotOutput

  • plotOutput():
    • Va en la UI
    • Define su posición en el dashboard
  • renderPlot():
    • Va en server()
    • Contiene un objeto ggplot()
  • valueBoxOutput():
    • Va en la UI
    • Define su posición en el dashboard
  • renderValueBox():
    • Va en server()
    • Contiene un objeto valueBox()
Creación de paneles con shinydashboard

Enlazar barra lateral y cuerpo

  • Recuerda cuando teníamos una barra lateral con dos botones: "charts" y "statistics"
  • Para enlazarlos con el cuerpo, hay que añadir tabItems()
    • Cada página la define un tabItem()
    • Las etiquetas de cada pareja menuItem()-tabItem() deben coincidir

El cuerpo y la barra lateral ahora están enlazados

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",
      "Aquí van los gráficos."
    ),
    tabItem("statistics",
      "Aquí van las estadísticas."
)))
Creación de paneles con shinydashboard

Pestañas en el cuerpo

  • En una shinyApp, también puedes definir pestañas con tabsetPanel()
    • Cada pestaña se define con tabPanel()
  • No lo confundas con tabItems() y tabItem()

Añadir conjuntos de pestañas dentro del cuerpo

body <- dashboardBody(tabsetPanel(

    tabPanel("Distributions", 
             box(plotOutput("dist"))),
    tabPanel("Statistics", 
             dateInput("matchdate", 
                       "Introduce la fecha del partido:", 
                       value = "2022-11-20"),
             valueBoxOutput("red"), 
             valueBoxOutput("yellow")),
    tabPanel("Data", "Aquí van los datos.", 
             tableOutput("data"))

))

server <- function(input, output){
  output$red <- renderValueBox(valueBox(0, "Tarjetas rojas"))
  output$yellow <- renderValueBox(valueBox(6, "Tarjetas amarillas"))
}
Creación de paneles con shinydashboard

¡Vamos a practicar!

Creación de paneles con shinydashboard

Preparing Video For Download...