Messages

Para que el usuario del dashboard haga una recomendación sobre las cosas que puedes consultar para aclarar los conocimientos que aprenderás. El siguiente código solo contiene lo que debe de modificarse en el header para que aparezca de lado izquierdo los mensajes que desees.

header <- dashboardHeader(
  #Con esta fucnión agregamos al menú un tipo de cosa en el header
  dropdownMenu(
    #Con este parámetro especificamos el tipo de cosa
    type = "messages",
    #Estta función permíte agregar los mensajes corresponientes
    messageItem(
      #Quién escribe el mensaje
        from = "Lucy",
      #Cuáles es el mensjae (o recomendación)
        message = "You can view the International Space Station!",
      #En dónde puedes encontrar la información necesaria.
        href = "https://spotthestation.nasa.gov/sightings/"
        ),
    #Como este mensaje aparece después, entonces aparecerá en segundo lugar.
    messageItem(
        from = "Carlos",
        message = "Learn more about the International Space Station", 
        href = "https://spotthestation.nasa.gov/faq.cfm"
        )
    )
)

Si le das click al mensaje, se abrirá la referencia que pusiste en el código.

Notifications

Las notifiaciones tienen diversas fucnionalidades para poder añadir las cosas a la app.

Análogo a lo que sucede en mensajes, se puede hacer un tipo de COSA pero para notificar algo, por ejemplo:

header <- dashboardHeader(
  dropdownMenu(
    type = "notifications",
    notificationItem(
      #La diferencia está en que el parámetro donde se
      #escribe la notificación, se llama "text" y no "mesage"
      text = "The International Space Station is overhead!"
      )
  )
)

Nota que aquí cambia también la figura del ícono

Bar of progress

Te dice cuál es el progreso de lo que va del curso.

Para finalizar (el entendimiento de las posibilidades para el header). veamos el siguiente código que nos devuelve una barra de progreso y un texto.

header <- dashboardHeader(
  dropdownMenu(
    type = "tasks",
#Recuerda que es importante cambiar la función del Item a realizar según el
#tipo de cosa en el encabezado.
    taskItem(
    #El texto que indica sobre qué se mide el progreso.
    text = "Mission Learn Shiny Dashboard",
    #El valor del progreso (qué porcentaje se ha avanzado en esa cosa.)
    value = 10
    )
  )
)

Aquí podemos ver la barra de progreso

Las tres juntas (MNT)

header <- dashboardHeader(
#Para los mensajes:
  dropdownMenu(
    type = "messages",
    messageItem(
        from = "Lucy",
        message = "You can view the International Space Station!",
        href = "https://spotthestation.nasa.gov/sightings/"
        ),
    messageItem(
        from = "Carlos",
        message = "Learn more about the International Space Station", 
        href = "https://spotthestation.nasa.gov/faq.cfm"
        )
  ),
  
#Para la notificación:
 dropdownMenu(
       type = "notifications",
       notificationItem(
       text = "The International Space Station is overhead!"
       )
  ),

#Para el task:
  dropdownMenu(
      type = "tasks",
      taskItem(
      text = "Mission Learn Shiny Dashboard",
      value = 10
      )
  )
)

Comentarios: optimizar las líneas de código.

Posiblemente quieras agregar muchos mensjaes, notificaciones, o barras de progreso, tienes una lista predefinida con los mensjaes que quieres mostrar, pero hacerlo en el header como quedamos es mucho problema.

¿Qué pasaría si podemos meter una lista y se generen sin mucho lío de escritura los mensajes? El siguiente código es una forma conveniente donde podemos agregar mensajes al encabezado sin escribirlos todos.

#Como el manejo de información lo tiene que hacer el servidor 
# (y no el ui donde se ecuentra el header), lo modificamos para tener un 
# menú de avances sin tanto problema:

server <- function(input, output) {
  #Creamos una salida que se llame "task_menu" haciendo referencia a que el
  #menú que obtendremos será de pustos tasks (barras de progreso).
 
  output$task_menu <- renderMenu({ # <- Nos sirve para que se nos devuelva
                                   # una salida renderizada tipo Menú
                                   # el cual se crea a continuación.
    
  #Para lo anterior creamos una lista que nos permita tener los mensajes
  #ordentados. Esta lista se llamará "tasks"
                
            #La función apply agarra una lista y le aplica una función
            # a cada uno de sus objetos.
    
  tasks <- apply(task_data, 1, # <- "task_data" es la lista a la que  
                 function(row) { # se le aplicará la función acá definida
                 taskItem(text = row[["text"]],
                          value = row[["value"]])
                } #Que de manera práctica genera todos los items de la lista
            )
  
  #Con lo anterior facilmente hacemos una lista de "tasks" y las ponemos
  #(como siempre) en el dropdownMenu. 
  dropdownMenu(type = "tasks", .list = tasks)
  })
}

#En vez de hacer todo en el header, podemos simplemente mandar a llamar al menú y ponerlo en nuestro encabezado.

header <- dashboardHeader(dropdownMenuOutput("task_menu"))

Sintáxis Sidebar

#Modificamos la fucnión "dashboardSidebar"
sidebar <- dashboardSidebar(
#Pues añadimos un menú de opciones
  sidebarMenu(
#Con diferentes items
    menuItem(
    #Que tienen el texto que aparecerá en la barra
      text = "Dashboard",
    #Y el identificador (Para conectar con el body)
      tabName = "dashboard"
    ),
    menuItem(
      text = "Inputs",
      tabName = "inputs"
    )
  )
)

Podemos notar que no hay nada en el body porque no hay “conexión” entre sidebar y body.

Sintáxis Body

body <- dashboardBody(
#Creamos la conexión con la Sidebar
  tabItems(
  #Conectamos con el menú que tiene un identificador llamado "dashboard"
    tabItem("dashboard"),
  #Conectamos el body con "inputs"
    tabItem("inputs")
  )
)

#NOTA: aun no hemos puesto nada en el cuero (del ítem correspondiente), simplemente hicimos la conexión.

Ahora sí añadiremos un poco de más contenido al body. esto se hace dentro de los tabItems correspondientes, en este caso sólo añadiremos al item dashboard, contenido (que a su vez tendrá dos submenus).

body <- dashboardBody(
  tabItems(
    tabItem(
      tabName = "dashboard",
    #Con esta función "tabBox" podemos crear el contenido del body en el 
    #item que se llama "dashboard".
      tabBox(
      #Al contenido le ponemos un título
        title = "International Space Station Fun Facts",
      #Con páneles (el primer argumento es el nombre del panel)
        tabPanel("Fun Fact 1", "Content for the first tab"),
      #que tienen por segundo argumento el contenido, ES DECIR,
      #LO REALMENTE IMPORTANTE EN UNA APP
        tabPanel("Fun Fact 2", "Content for the second tab")
      )
    ),
    #Esta otra tab aún NO TIENE CONTENIDO
    tabItem(tabName = "inputs")
  )
)

Ya que tenemos el body conectado con la sidebar, podemos tener una app que se vea así:

Notemos que por el código quer escribimos, la pestaña de “Input” no tiene apun contenido

Por renglones

Podemos hacer que en el body del dashboard, existan diversas filas que contengas información.

#Dentro del body de la shiny dashboard
body <- dashboardBody(

#Creamos un renglón
  fluidRow(
  # Qué contenga una "caja"
    box(
      # que abarque las 12 columans posibles
      width = 12,
      #Y que lleve un cierto título
      title = "Regular Box, Row 1",
      "Star Wars"
      )
  ),
  
  #Adempas creamos otro renglón
  fluidRow(
    #Con otra caja
    box(
      #que igual ocupe las 12 columnas 
      width = 12,
      title = "Regular Box, Row 2",
      "Nothing but Star Wars"
      )
  )
)

Por columnas

body <- dashboardBody(
  fluidRow(
#Aquí no es necesario poner dos "fluidRow" dado que ya sabemos que existe
#una sola columna para todas las filas
      #Especificamos el ancho de la columna (que consta de 6 columanas)
      column(width = 6,
      infoBox(
        #La caja del contenido no tiene un ancho especídico porque ese ya 
        #se había especificado anteirormente. 
        width = NULL,
        title = "Regular Box, Column 1",
        subtitle = "Gimme those Star Wars"
      )
    ),
# Esta es la otra columna
    column(width = 6,
      infoBox(
      width = NULL,
      title = "Regular Box, Column 2",
      subtitle = "Don't let them end"
      )
    )
  )
)

Por renglones y columnas

body <- dashboardBody(
  fluidRow(
# Un relón "entero"
  box(
    width = 12,
    title = "Regular Box, Row 1",
    "Star Wars, nothing but Star Wars"
    )
  ),

#Otro renglón que se divide
  fluidRow(
  #Esta es la primera columna de ese rebglón
  column(width = 6,
    infoBox(
      width = NULL,
      title = "Regular Box, Row 2, Column 1",
      subtitle = "Gimme those Star Wars"
      )
    ),
  #Esta es la segunda columna de ese rebglón
  column(width = 6,
    infoBox(
      width = NULL,
      title = "Regular Box, Row 2, Column 2",
      subtitle = "Don't let them end"
      )
    )
  )
)

Colores

Para cabiar colores solo es necesario usar la función skin dentro de la función dashboardPage() donde se ponen el header, sidebar y output.

Los colores disponibles son:

• blue (por defecto)

• black

• purple

• green

• red

• yellow

ui <- dashboardPage(
#Este es el parámetro que cambia el color
  skin = "purple",
  header = dashboardHeader(),
  sidebar = dashboardSidebar(),
  body = body)

CSS. Íconos.

Podemos además de cambiar el color, la letra, el fodo, añadir muchas cosas que harán ver nuestra imagen increible.

La manera formal es sabiendo un poco sobre esta sintáxis que es “todo un mundo”. Sin embargo, aquí veremos cómo podemos hacer ciertas cosas con este estilo de formato añadido a la shiny dashboard.

body <- dashboardBody(
#Iniciamos la escritura en CSS
      tags$head( # <- cambiamos el título
        tags$style( # <- con un estilo de HTML 
            HTML('  
           h3 {
                font-weight: bold;
              }
            ') #Para que la letra (en el título) sea "negrita"
        )
    ),
  fluidRow(
    box(
      width = 12,
      title = "Regular Box, Row 1",
      "Star Wars, nothing but Star Wars"
    )
  ),
  fluidRow(
    column(width = 6,
      infoBox(
        width = NULL,
        title = "Regular Box, Row 2, Column 1",
        subtitle = "Gimme those Star Wars"
    )
   ),
    column(width = 6,
      infoBox(
        width = NULL,
        title = "Regular Box, Row 2, Column 2",
        subtitle = "Don't let them end"
    )
  )
 )
)

Para poner íconos primero puedes conocer los que hay para posteriormente utilizarlos donde creas conveniente, por ejemplo en el header o algún otro lugar.

header <- dashboardHeader(
  dropdownMenu(
    type = "notifications",
    notificationItem(
      text = "The International Space Station is overhead!",
#Aquí simplemente añadimos el ícono de "nave espacial" en la notificación
      icon = icon("rocket")
    )
  )
)

Podemos también cambiar el color de las cajas que creamos dentro de nuestro dashboard. Esto se hace a través de los destintos estados status que corresponden a lo siguiente:

Veamos el ejemplo siguiente:

body <- dashboardBody(
  tags$head(
    tags$style(
      HTML('
      h3 {
        font-weight: bold;
      }
      ')
    )
  ),
  fluidRow(
    box(
      width = 12,
      title = "Regular Box, Row 1",
      "Star Wars, nothing but Star Wars",
#Aquí hacemos que la primer caja sea roja.
      status = "danger"
    )
  ),
  fluidRow(
    column(width = 6,
      infoBox(
        width = NULL,
        title = "Regular Box, Row 2, Column 1",
        subtitle = "Gimme those Star Wars",
#Podemos añadir al título una estrella
        icon = icon("star")
    )
   ),
    column(width = 6,
      infoBox(
        width = NULL,
        title = "Regular Box, Row 2, Column 2",
        subtitle = "Don't let them end",
#O incluso puedes pintar el fondo de la caja.
        color = "yellow"
    )
  )
 )
)