¿Cómo crear un dashboard paso a paso?

ES | EN

Acceder a una instancia de Plataforma

Primero accederé al Control Panel del Entorno CloudLab: https://lab.onesaitplatform.com/controlpanel/login

si no tengo usuario con rol Developer crearé uno: 

Iré aVISUALIZATION -> a My Dashboards.

Nos aparecerá un listado de los dashboards disponibles y una serie de información asociada que explicaremos a continuación.

En la columna Options, puedo ver diferentes opciones, estas opciones varían en función del rol del usuario y los permisos sobre los distintos dashboards :

1. Nos permite acceder al dashboard para trabajar con él, en modo presentación.
2. Accedemos al dashboard en modo edición.
3. Configuración del dashboard, cambiar imagen, permisos
4. Nos permite clonar el dashboard
5. Nos da la URL para acceder al dashboard en modo presentación
6. Exporta una imagen del dashboard
7. Exporta un pdf del dashboard
8. Si pulsamos y confirmamos eliminaríamos el dashboard.

Crear un nuevo Dashboard:

Asignaremos un identificador único (1) y una breve descripción (2) para poder diferenciarlo del resto de dashboards que se creen. Tenemos la opción de hacer el dashboard publico marcando (3) o podemos dejarlo como privado y asignar permisos más específicos. Se puede seleccionar un estilo inicial (4), dejar la imagen por defecto que se mostrará para los usuarios con rol DataViewer, o seleccionar una para que sea más claro diferenciar nuestro dashboard del resto (5), a su ve se le puede asignar una Categoría (6) y una subcategoría (7).

Se pueden crear Scripts, añadir librerias o estilos al dashboard en el editor html (8). Adicionalemente se pueden asignar permisos a otros usuarios (9), para lo cual elegiremos el usuario, el tipo de acceso y pulsaremos en insert authorization, se pasará el permiso al listado de la derecha, donde podremos modificarlo o eliminarlo.

Lo tipos de permisos disponibles son :

• EDIT, permite edición y vista .
• VIEW, solo permite al usuario la visualización.

Pulsaríamos en NEW y ya tendríamos creado nuestro dashboard.

Edición del Dashboard

Tras la creación accedemos a la pantalla de edición donde podremos diseñar nuestro dashboard, dándole los estilos que se adecuen a nuestras necesidades y creando o añadiendo los gadgets que nos mostrarán la información que se precise.
Botones de la cabecera del dashboard:

1. Move Toolbar Buttons
2. Add Element, este botón nos permite añadir gadgets al dashboard
3. DataLink, nos da la opción para configurar los filtros y Drill-down entre gadgets
4. URL Parameters
5. Nos abre un desplegable con las opciones Pages, Configure Dashboard y Dashboard Style
6. Save Dashboard
7. Delete Dashboard
8. Close Dashboard Editor

Comenzaremos añadiendo gadgets, pulsaremos en el icono (2)y nos aparecerá unos sheets bottom con los distintos tipos de gadgets que podemos pasar al dashboard.
Actualmente tenemos los siguientes tipos:

• Line Chart, gráfico de líneas
• Bar Chart, gráfico de barras
• Mixed Chart, gráfico mixto
• Pie Chart, gráfico de tarta
• Wordcloud, nube de palabras
• Map, mapa para usarlo es preciso que la ontología contenga coordenadas
• Radar, gráfico tipo radartambién se conoce como gráfico de web, gráfico de araña , tabla de estrellas
• Template, nos permite crear gadgets escribiendo directamente el código html
• Filter, permite limpiar los filtros
• HTML5, permite crear un gadgets editando en html5
• Table, tabla con datos

Arrastraremos los iconos del fondo al dashboard donde los soltaremos y nos aparecerá una ventana modal con las siguientes opciones

ADD GADGET: si seleccionamos un gadget creado previamente y pulsamos este botón se cargará en el dashboard.

NEW GADGET: Aún no existe el gadget que necesitamos así que lo crearemos, pulsamos el botón y nos aparece esta venta modal.

Asignamos un nombre y Seleccionamos un DataSource existente o trabajamos apartir de la ontología de la que queramos mostrar su información. En este caso Seleccionamos la Ontología Restaurants.

Aparece un wizard para ayudarnos a montar la consulta con la que nos traeremos los datos. Para el ejemplo con un simple select * from Restaurants nos es suficiente para el ejemplo.

Si pulsamos en Execute Query nos aparecen los resultados de la query, y validamos que es lo que necesitamos, cuando se adecue a nuestros requisitos pulsamos continue.

En este caso estamos creando un gadget tipo Line Chartpor lo que tendremos que rellenar y elegir los siguientes valores al menos X Axis e Y Axis que son los valores de los distintos ejes del gráfico (para este ejemplo se ha elegido como eje X el tipo de cocina y como eje Y la valoración), elegimos un Color para la línea y pulsamos en NEW. Podemos crear más de una línea añadiendo más measures o más de un eje con ADD AXIS y rellendando los valores para otro eje.

Podemos ver en tiempo real como se va representando nuestro grafo con los valores que marcamos, cuando este como deseamos pulsaremos NEW y el gadget se pasará a la pagina del dashboard. Este sería nuestro primer gadget, crearemos dos más para ver las funciones de Drill-down y filtros.

Crearemos un gadget Tipo Pie o tarta, para este tras elegir la fuente de datos, tan solo tenemos que elegir los valores para los ejes X e Y.

Por último crearemos un gadget Tipo Tabla, para ver al detalle la información de cada restaurante. Para esto igual que en los dos casos anteriores seleccionamos una fuente de datos y rellenamos los campos que necesitemos.

Vemos una sección Table config, con la configuración de la tabla, Mostrar u ocultar el header, filas seleccionables, número de elementos por página …, yo aquí solo he hecho seleccionables las filas y cambiado los colores del header y del footer a blanco. Luego he añadido las medidas y los nombres que se verán en la cabecera, y les he dado un orden.

Pulsamos NEW y ya tenemos nuestro tercer gadget.

Colocamos los gadgets de la manera que nos permita ver mejor la información y le damos a guardar para no perder los cambios

DATA LINK

Seleccionamos la opción (3) de la cabecera de edición para establecer relaciones o conexiones entre los gadgets, nos aparece esta ventana modal donde podemos ir añadiendo las relaciones, seleccionamos primero el source gadget y source field que es el gadget sobre el que pulsaremos para crear filtrar los datos del target gadget por su target field, Resumiendo al pulsar un dato del gadget origen filtra los datos del gadget destino.

La primera relaciónla establecemos del GADGET PIE con el GADGET LINE,

La segunda Relaciónla establecemos Del GADGET TABLE con el GADGET PIE.
Vemos que si pulsamos una fila de la tabla se actualizan los datos del GADGET PIE con el filtro cuisine = American y que si pulsamos en el GADGET PIE en Manhattan, el GADGET LINE hereda los filtros borough = Manhattan y cuisine = American

La opción (5) de la cabecera de edición  tiene tres opciones

PAGES

Nos permite gestionar las páginas del dashboard, pudiendo tener una o crear más,
Tan solo tenemos que darle un nombre, seleccionar un icono, y si queremos podemos ponerle una imagen de fondo o un color.

Para establecer el orden de las paginas tan solo tenemos que pasar pulsar en las flechas de la derecha, la que está más arriba es la primera y así sucesivamente.

Configurar Dashboard

Nos permite configurar el header del dashboard, sus estilos, colores y añadir un logo.

También nos permite configurar la visibilidad y estilo del grid, como número de líneas, columnas…

Dashboard Style
Nos permite configurar los estilos de los gadgets a nivel global, como son la altura de los headers, el color, estilo de los títulos y del body


Además, si pulsamos sobre el icono de los menús

tenemos la opción de configurar los estilos de cada gadget de manera individual, ocultar el header, añadir un titulo un icono, colores,…