Aprende a crear Dashboards en R

En este post nos limitaremos a programar únicamente algunos elementos estáticos de los dashboards en R y el User Interface.

En anteriores posts, os introducíamos la solución que proporciona R para crear aplicaciones web: shiny.

Las funciones que proporciona esta librería utilizan una sintaxis muy amigable integrando en su código fuente todo el código de los lenguajes HTML, CSS o JavaScript sin necesidad de sumergirnos en ellos. Por ello, una de las ventajas más destacables de esta librería es la sencillez para montar una aplicación web. En concreto, veremos a lo largo del post cómo crear cuadros de mando con shinydashboard.

Paso 1

Desde R, se deberá crear el script que contendrá los dos objetos ui y server. Se deberá hacer referencia a estos dos objetos dentro del script siguiendo exactamente dicha nomenclatura.

  • ui definirá la interfaz gráfica de la aplicación. Este objeto consistirá de las tres partes que conforman el cuadro de mando: el encabezado, el menú lateral y el cuerpo o Body Document, donde se plasmarán los diferentes KPIs. Las funciones que definirán estos tres entornos son:
dashboardHeader()
dashboardSidebar()
dashboardBody()
dashboards en r

Esquema general del UI de shinydashboard. Iconos extraídos de Flaticon.com

 

  • server jugará el papel del servidor de la aplicación. Es decir, todos los análisis, operaciones y gráficos que se muestren en el body document se deberán programar en este objeto.

Prueba a copiar y pegar el siguiente fragmento de código en un script de R, y compílalo.

library(shiny)
library(shinydashboard)
ui = dashboardPage(
dashboardHeader(title="Dashboard Example"),
dashboardSidebar(),
dashboardBody()
)
server = function(input, output) {}
shinyApp(ui, server)

Automáticamente se abrirá en el navegador una nueva pestaña http://localhost:XXXX/ y se iniciará la APP. La plantilla CSS que utiliza shinydashboard por defecto es la que mostramos a continuación:

shiny dashboard

Plantilla shinydashboard por defecto

Paso 2

El siguiente paso es agregar contenido al User Interface del dashboard. Añadimos el logo de Metriplica en el encabezado,  diferentes pestañas o secciones en el panel lateral izquierdo, seguido de un par de selectores. Shiny tiene programadas una serie de funciones de sintaxis muy sencilla para diseñar estos widgets.

Widgets o selectores que proporciona la libreria Shiny

  1. Insertaremos el icono de Metriplica en el encabezado agregando el objeto tags a nuestro script tras el dashboardBody(). Esta imagen debe estar en una subcarpeta llamada www dentro de la carpeta donde tenemos guardado el script de R.
    tags$head(
    tags$img(src='metriplica.png',height='80',width='230'))
  2. Agregamos dos pestañas o secciones y un selector en el menú lateral izquierdo dentro de dashboardSidebar(). Para agregar estas pestañas se utilizará la función menuItem().
    sidebarMenu(
    menuItem("Seccion 1", tabName = "p1", icon=icon("dashboard")),
    menuItem("Seccion 2", tabName = "p2", icon=icon("users")),
    fileInput(inputId='archivo',
    label="Importa tu archivo:")
    )

Alcanzado este nivel, la APP tendría la siguiente apariencia:

Montaje de la APP con shiny sin modificar el CSS

Paso 3

Inspeccionando el código fuente de la página web, identificamos la clase de los elementos del encabezado y del menú lateral izquierdo con el fin de hacer modificaciones en el CSS del dashboard para agregar otros colores al fondo. Tras estas modificaciones, cuyo código lo incluiremos al final de este post, el User Interface queda del siguiente modo:

 

Montaje de la APP tras añadir modificaciones al CSS

Paso 4

Finalmente, mostramos el código que deberéis de copiar en un script de R. ¡No olvidad instalar las librerías citadas antes de cargarlas!

library(shiny)
library(shinydashboard)
ui = dashboardPage(
dashboardHeader(title="Dashboard Example"),
dashboardSidebar(
sidebarMenu(
menuItem("Seccion 1", tabName = "p1", icon=icon("dashboard")),
menuItem("Seccion 2", tabName = "p2", icon=icon("users")),
fileInput(inputId='archivo',
label="Importa tu archivo:")
)
),
dashboardBody(),
tags$head(
tags$img(src='metriplica.png',height='80',width='230'),
tags$style(HTML('
.skin-blue .main-header .logo{
background-color: #fff;
color: #201545;
}
.skin-blue .main-header .navbar {
background-color: #201545;
}
.skin-blue .main-sidebar{
background-color: #201545;
}
.skin-blue .sidebar-menu>li.active>a{
background: #201545;
}
'))
)
)
server = function(input, output) {
}
shinyApp(ui, server)

Dejamos para próximos posts el insertar información reactiva en el Body Document en función de los selectores que se hayan seleccionado. Incluso podríamos hacer un cuadro de mando interactivo con los datos de Google Analytics en R. Mientras tanto, y para adelantar faena, se puede consultar el siguiente enlace.

Si tienes alguna duda o comentario sobre la creación de dashboards en R, te animamos a que la compartas con nosotros!

Autor:

Digital Analytics Consultant at Metriplica. Mathematician // M.Sc. Data Analysis and Statistics

Leave Comment

Your email address will not be published. Required fields are marked *