d5 dashboards in pentaho

Construyendo Tableros de Control con Pentaho

Agenda

Audiencia y Requisitos Previos

Objetivos de Aprendizaje

Proceso de Clase

Audiencia y Requisitos Previos

Audiencia del Curso

Para diseñadores y presentadores de información de forma gráfica

Requisitos del CursoConocimiento base de JavaScript y HTML

Conocimientos en base de datos relacionales

Conocimiento y comprensión de modelos OLAP, Metadata y SQL


Al final del curso, los participantes estarán en la capacidad de:

Comprender los conceptos básicos de los Tableros de Controles

Crear Tableros de Controles (Dashboards) rápidamente usando

Pentaho Dashboard Designer

Crear Tableros avanzados usando Pentaho Community Dashboard

Framework

Comprender la arquitectura del CDE (Community Dashboard Editor)


¿Cuáles son tus objetivos?

¿Cuáles son tus expectativas?

Evolución del Curso

Horario8:00 am – 5:00 pm

1 hora de Almuerzo ~ mediodía

Descansos cuando sean necesarios

El curso es una combinación de presentaciones, demostraciones y laboratorios

Tipos de laboratoriosSeguir con el instructor

Por cuenta propia

¡Pueden hacer todas las preguntas y sugerencias que quieran!

● Conceptos básicos de los Tableros de Controles● Pentaho Dashboard Builder

● Como usar Pentaho Dashboard Builder● Agregando Elementos● Laboratorios

● Pentaho Community Dashboard Framework (CDF)● Arquitectura● Componentes● Laboratorios

Agenda Curso

Conceptos Básicos

Conceptos Básicos

● El concepto de cuadro de mando deriva del concepto denominado Tableau de bord en Francés, que traducido de manera literal, vendría a significar algo así como tablero de mandos, o cuadro de instrumentos, como en el tablero del carro.

● La gestión de las empresas requiere un sistema de indicadores que nos faciliten la toma de decisiones y el control. Se requiere un sistema completo de análisis financiero.

● El sistema de indicadores debe organizarse en un cuadro de mando. El cuadro de mando recoge los principales indicadores y los presenta de un modo claro y útil. El cuadro de mando es un sistema que nos informa de la evolución de los parámetros fundamentales del negocio.

Conceptos Básicos

● Existe infinidad de posibles indicadores que podemos utilizar. Algunos ratios o indicadores son de uso muy general. Los más habituales son, por ejemplo, los indicadores de ventas, margen, rotación del inventario y rentabilidad.

● Otros indicadores deberán ser elaborados expresamente para analizar una empresa concreta.

● Los cuadros de mando han de presentar sólo aquella información que sean imprescindible, de una forma sencilla y por supuesto, sinóptica y resumida.

Conceptos Básicos

● El mostrar datos precisos en un formato «bonito» no es suficiente● Una tabla de control ejecutivo ayudará a los gerentes a:

● Responder preguntas fundamentales acerca de su negocio ● Alertar sobre problemas que están ocurriendo● Proveer información para tomar decisiones que impacten al negocio

● Si decimos «las ventas actuales han sido de $1.500.000,00» ¿es eso bueno o malo?




Agenda del Curso

Pentaho Dashboard Builder

Como usar Pentaho Dashboard Builder

Selección de la distribución de los paneles.


Selección de colores de los paneles.


Selección de titulo del dashboard.

Intervalo de refrescamiento



Agregar o modificar contenido

Agregar gráfica

Tabla de datos

Direcciones Web (URL)

Archivos de pentahoReportesAnalisisxActions




Agenda del Curso

Seleccionar incluir gráfica

Selección fuente de datos (MetaData)

Como Incluir gráficos

Click to edit Master text stylesSecond levelThird level

Fourth level

Fifth level

Seleccionar datos para la gráfica



Fourth level

Fifth level

Aplicar filtros de parámetro usando {parámetro}



Fourth level

Fifth level

Seleccionar tipo de gráfica y uso de datos



Fourth level

Fifth level

Pentaho Analyzer

Definición de Parámetros…

Seleccionar Filtros

Activar opción para ver los Filtros en la parte superior

Añadir nuevo Filtro

Como Incluir Parámetros


Fourth level

Fifth level

Seleccionar fuente de datos y nombre del parámetro



Fourth level

Fifth level

Resultado de incluir un parámetro


Seleccionar el panel y vincular con los parámetros

Como conectar los elementos a los parametros

Pentaho AnalyzerUso de parámetros via URL …

EDITOR: http://serverName:8080/pentaho/content/analyzer/editorcommand=open

solution=steel-wheels

path=/analysis

action=actionName.xanalyzer

showFieldList=true

VISUALIZADOR: http://serverName:8080/pentaho/content/analyzer/viewersolution=steel-wheels

path=/analysis

action=actionName.xanalyzer

parameterName=value

Ejemplo: http://localhost:8080/pentaho/content/analyzer/viewer?solution=steel-wheels&path=/analysis&action=actionName.xanalyzer&country_name=Brazil




Agenda del Curso

Laboratorio: Crear su propio tablero de control

Objetivo: Crear un Dashboard con una gráfica y una vista de un modelo que cambien dependiendo de un parámetro.

Requisitos: • Instalación del BI Server

Laboratorio: Resultado esperado

Laboratorio: ActividadesPara el grafico seleccionar el Datasource Orders, y colocar los siguientes datos:

CountrySUM - Quantity Ordered

Column: TerritoryComparison: exactly matchesValue: {territory}Default: EMEA

Country - ASC

Laboratorio: ActividadesPara la configuración del gráfico:

Type: Pie Chart

Theme: Default

Series Column: Country

Values Column: Quantity

Ordered

Chart Title: Cantidad

OrdenadaGuarde el dashboard

Laboratorio: ActividadesSeleccione en la barra de menú Archivo -> Nuevo -> Analyzer ReportSeleccione el cubo SteelWheels: SteelWheelsSalesColocar Line y Sales en la vista de análisis, además agregar Territory al área de filtro

- Marcar el check- Colocar el nombre del parámetro igual al parámetro del Dashboard

- Colocar el valor por defecto

Laboratorio: ActividadesCambiar la vista a gráfico, seleccione Bar:

Guardar la vista

Laboratorio: ActividadesAgregar la vista de análisis en el otro recuadro del Dashboard:

Guardar la vista

Laboratorio: Actividades• Agregue el filtro en la sección Prompts• Click en el botón

• Configurar el filtro como la imagen a continuación:

Query:select distinct(territory) from offices

Laboratorio: Actividades• Marcar cada uno de los recuadros y configurar en la pestaña de

Parameters, el filtro “Territorio” que el objeto va a escuchar para actualizarse

Guardar la vista Quitar el modo de edición y previsualizar el dashboard

Fin del Lab




Agenda del Curso

Community Dashboard Framework

Community Dashboard Framework (CDF)Características:

Un framework integrado a Pentaho para desarrollar dashboards

Disponible en la versión Community y Enterprise

Provee componentes para mostrar elementos gráficos, tomar parámetos de entrada, etc.

El desarrollo de los dashboards se realiza a través de javascript.

CDF: Arquitectura

Plantilla de Pie y Cabecera

Plantilla de Layout

Componentes

Javascript

FormularioHTML

xactions

xdcf(índice

)

xcdf expone el dashboard y provee un punto de entrada al mismo

xactions alimentan los componentes del dashboard

Formulario html indica la disposición de los elementos visuales mediante etiquetas html (<div>)

CDF: Plantilla de Cabecera y Pie de Página

Permite definir cabeceras y pie de páginas comunes para los

dashboards de una solución.

Útil para «branding» empresarial

Provee una plantilla por defecto

Se denominan:

template-dasboard.html

template-dasboard-mantle.html

Se encuentra en /pentaho-solutions/system-

pentaho-cdf

Ejemplos de otras plantillas disponibles

CDF: Plantilla de Layout

Permite definir la forma en la cual se disponen los elementos

visuales del dashboard

Es un archivo html

Aloja los elementos visuales que se deben mostrar (código

javascript)




Proceso de Curso

CDF: ComponentesLos componentes permiten la creación de contenido para mostrarse en

el dashboard.

Se definen y configuran utilizando javascript

Los objetos de javascript debe ir en la plantilla de layout

Algunos componentes que se han implementado:

check

dateInput

Radio

select

selectMulti

text

textInput

xaction

jpivot

map

mapBubble

check

CDF: Creación de Elementos Visuales

Se configuran los parámetros, datos de entrada y comportamiento del objeto (respuestas a eventos)

Pueden ser gráficos, reportes y también elementos de interacción como botones, selectores de fecha, etc.

Pueden alimentarse de un xaction (datos de entrada o contenido)Se puede crear dependencias entre componentes

CDF: Propiedades de Componentes

Los componentes de CDF tienen un conjunto de propiedades que

definen su comportamiento y apariencia

Las propiedades más comunes son:name: Nombre del componentetype: Tipo de componentelisteners: Cambios en estas variables hacen refrescar el componenteparameter: La variable del dashboard que este componente cambiahtmlObject: El id de la etiqueta que muestra este componente (generalmente <div>)executeAtStart: Si se debe ejecutar o no este componente al iniciar el dashboard

CDF: Propiedades de Componentes (Cont)

Otras propiedades:solution: solución del xactionpath: ruta al xaction en la soluciónaction: Nombre del xaction a ejecutarparameters: Parámetros para ejecutar el xactionpreExecution: Función javascript que se ejecuta antes de ejecutar el componentepostExecution: Función javascript que se ejecuta después de ejecutar el componentepreChange: Función javascript que se ejecuta antes de refrescar el objeto debido a un cambiopostChange: Función javascript que se ejecuta después de refrescar el objeto debido a un cambio

Solo se usan cuando el componente xaction

CDF: Componentes – Ejecutar xaction

Eventos:Listeners: «está atento» por si cambia el valor de la línea de

producto y el territorioParameters: toma los dos valores como parámetros al momento

que detecta un cambio en ellos y vuelve a refrescarse

CDF: Componentes – Selector de Fecha

Este objeto no toma datos de un xaction

postChange: Luego de refrescarse mostrará la fecha seleccionada al

usuario en un diálogo

CDF: Componentes – Selector

Especificar:Los datos de entrada se configuraron dentro del objeto, pero pueden venir de un xactionvalueAsId: Se puede especificar si lo que recibe la variable «region» es el nombre o el identificador numérico en el valuesArraySi valueAsId es true, entonces no se tiene que especificar el identificador numérico

CDF: Componentes – Texto

Sirve para mostrar texto en el dashboard

Se le puede pasar parámetros o variables definidas en javascript

CDF: Creando un Dashboard

Índice (Expone el Dashboard en la Cónsola de Usuario)Plantilla de LayoutElementos visuales, fuentes de datos para componentes

Plantilla de cabecera y pieComponentes visualesAcepta múltiples fuentes de datosSe pueden crear nuevos componentes visuales a partir de la biblioteca del CDF




Agenda del Curso

Laboratorio: Crear un elemento visual

Objetivo: Crear y mostrar elementos visuales usando componentes de CDF.

Requisitos: • Instalación del BI Server• Pentaho Design Studio

Prelaboratorio: ¿Las conexiones están configuradas?

• La conexión SampleData debe estar definida dentro del Enterprise Console

• Si no está creada, crearla ahora

Laboratorio 1: Exponer un nuevo dashboard a Pentaho

• Se creará una carpeta en la cónsola llamada «Dashboard Curso CDF»

• En ella alojaremos todos los ejercicios• En la primera parte crearemos un dashboard de

prueba.

Dashboard de Prueba

El dashboard de prueba tendrá un título y un gráfico de barras alimentado por un xaction.

Paso 1: Crear la carpeta

Abrir Pentaho Design Studio y crear una carpeta llamada curso_cdf en pentaho-solutions

Paso 2: Hacer la carpeta visible

• Crear los archivos index.xml e index.properties. Se pueden copiar de archivos existentes para luego modificarlos.

Paso 3: Modificar index.xml

• Este archivo da visibilidad a la carpeta desde la Consola de Usuario• Las variables %name y %description toman sus valores del archivo

index.properties

Paso 4: Modificar index.properties

• «name» le dará el nombre a la carpeta que se mostrará en la Consola de Usuario

Paso 5: Exponer un nuevo dashboard

• De /pentaho-solutions/bi-developers/cdf-samples/10-cdf copiar los archivos information_dashboard.xcdf y template.html y pegar al directorio creado

• Renombrar a prueba.xcdf y prueba.html. Esto permitirá al usuario acceder al dashboard desde la cónsola de usuario

Paso 6: prueba.xcdf

• Editar prueba.xcdf como se muestra• Le dará el nombre y un punto de entrada al dashboard desde la

Consola de Usuario

Paso 7: prueba.html• Editar prueba.html

como se muestra• Se determina el

layout del título y del gráfico que se mostrará

Paso 8: Gráfico• Agregar este código

a la parte inferior del archivo prueba.html

• Refrescar y probar en la consola de usuario. ¿Funcionó?

Laboratorio 2: Configurar la Plantilla de Cabecera y Pie de Página

Objetivo: Crear cabeceras y pies personalizados.


Laboratorio 2: Configurar la Plantilla de Cabecera y Pie de Página

Queremos cambiar la cabecera y eliminar el pie que el CDF provee por defecto

Paso 1: Eliminar Pie

Eliminar este código de /pentaho-solutions/system/pentaho-cdf/template-dashboard-mantle.html

Paso 2: Modificar Cabecera• Modificaremos la

cabecera que se muestra en la cónsola de usuario.

• Es una etiqueta «div id=header»

Paso 2: Modificar Cabecera• La nueva cabecera

mostrará el logo de Pentaho.

• El logo es una imagen alojada en el servidor de Pentaho, solo hay que referenciarla.

Paso 2: Modificar Cabecera

Comentar esta línea al comienzo del archivo

• Cambiar en la sección del div «header» como se indica• Refrescar la solución, actualizar las configuraciones del sistema (system settings) y

probar en la cónsola. ¿Funcionó?

Paso 2: Modificar CabeceraResultado

Laboratorio 3: Dashboard CDF

Objetivo: Desarrollar un dashboard usando CDF que obtenga datos de Steel Wheels y muestre un elemento gráfico.


Laboratorio 3: Gráfico

Primero se expondrá un nuevo dashboard a Pentaho y luego se configurarán las plantillas y componentes respectivos

Paso 1: Exponer en nuevo dashboard

• Copiar los archivos prueba.html y prueba.xcdf, pegar al mismo directorio• Renombrar a grafico_barra.xcdf y grafico_barra.html

Paso 2: Asignar nuevo Nombre

Editar el archivo .xcdf como se muestra

Paso 3: Configuración HTML

Editar el archivo .html como se muestra

Paso 4: Crear Objeto de Barra

Agregar esto al archivo a la plantilla de layoutLa definición del gráfico se hace en un objeto separado, alimenta al objeto que muestra el gráfico

Un objeto javascript que provee las opciones de configuración del gráfico y en el cual se define el modelo multidimensional y la consulta sobre dicho modelo para traer los datos

Objeto que define el gráfico

Paso 5: Verificar que funcione

• Refrescar el repositorio de soluciones, buscar la carpeta y el archivo en Pentaho User Console

• ¿Funcionó?

Laboratorio 4: Dashboard Interactivo

Objetivo: Agregar interactividad al Dashboard que se ha diseñado.


Gráfico Parametrizado

Queremos que el usuario pueda seleccionar las ventas por línea de producto

Paso 1: Crear Nuevos Archivos de Trabajo

• Copiar los archivos .xcdf y .html del dashboard anterior, renombrar y pegar en la misma carpeta como grafico_barra_parametrizado.html y grafico_barra_parametrizado.xcdf

• La estructura de archivos debería verse como en la figura

Paso 2: Renombrar el índice

Cambiar el nombre del archivo .html respectivo

Paso 3: Crear Objeto Selector

Agregar esto al archivo .html nuevo, antes del objeto del gráfico de barras

Paso 4: Modificar el layout

Incluir el <div> para el selector

Paso 5: Asegurar que se carguen los componentes

• Actualizar la lista de componentes que se deben inicializar• Refrescar el repositorio y probar• ¿Funcionó?

Paso 6: Actualizar LISTENERS y Parámetros del gráfico

Paso 7: Refrescar y revisar• Refrescar el

repositorio y probar

• ¿Funcionó?

Laboratorio 5: Gráficos

Objetivo: Agregar otro gráfico interactivo.


Dos Gráficos

También queremos que se vean las ventas de los últimos 12 meses para esa línea de productos.

Paso 1: Crear Nuevos Archivos de Trabajo

• Copiar los archivos .xcdf y .html del dashboard anterior, renombrar y pegar en la misma carpeta como dos_graficos.html y dos_graficos.xcdf

• La estructura de archivos debería verse como en la figura

Paso 2: Renombrar el índice

Cambiar el nombre del archivo .html respectivo

Paso 3: Crear Segundo Gráfico

Se separa en dos objetos como el gráfico anterior

Paso 4: Modificar el Layout

Asegurarse que concuerdan los nombres de los div con los parámetros de los objetos

Paso 5: Cargar el objeto nuevo

• Asegurarse que cargue el segundo gráfico• Refrescar el repositorio y probar• ¿Funcionó?

Dashboard interactivo con dos gráficas

Laboratorio Opcional: Interaccion Avanzada

Objetivo: revisar el dashboard Avanzado.html.


Resultado Avanzado

CDF: Documentación

Ejemplos y documentación disponibles en la cónsola de usuario en la solución “BI Developer Examples”

http://wiki.pentaho.com/display/COM/Community+Dashboard+Framework

http://wiki.pentaho.com/display/COM/Community+Dashboard+Framework

Community Dashboard Editor(CDE)

CDE – Community Dashboard Editor

Es una herramienta gráfica para crear, editar y previsualizar Dashboards, esta se integra con Pentaho, se utiliza desde la Consola de Usuario.

Ayudante para generar dashboard, permite establecer el cuerpo a través de filas y columnas, generando el código html, además ofrece algunas plantillas que pueden utilizarse para crear la estructura del dashboard.

CDE – Diseño de Plantilla (Layout)

El diseño del Dashboard puede ser creado a través de la combinación de filas y columnas, también puede ser establecido por bloques HTML y puede incluir imágenes.

1. Sección Layout2. Permiten agregar

filas, columnas y codigo

HTML

CDE – Conexión de Datos (Datasources)El contenido del dashboard puede provenir de diferentes fuentes, tales como:

- Bases de Datos - Cubos Mondrian - Pentaho Metadata

- Archivos XML - Transformaciones ETL

1. Sección Data Sources

2. Seleccionar la Categoría

de acuerdo a la conexión que desee

crear

CDE – Componentes(Component)1. Componentes visuales: corresponde por ejemplo a tablas, cajas de texto,

gráficos, reportes, vistas Olap, etc.2. Parámetros: representan los valores que son compartidos por los

componentes, le aportan interacción al dashboard.3. Scripts: código JavaScript que permite personalizar la apariencia y

comportamiento de otros componentes.

1. Sección Componentes

2. Seleccionar el tipo de

componente que desea agregar

CDE – Componentes(Component)

En general la mayoría de los componentes comparten las siguientes propiedades:

executeAtStart: para indicar si el componente se carga al ejecutar el dashboard.

HtmlObject: donde se mostrará el objeto dentro dentro del dashboard.Datasource property: para indicar que datasource será utilizado por el componente.

preExecution: función que prepara los datos antes de cargar el componente.

postExecution: función que es ejecutada después de cargar el componente.

Listeners: lista de variables que actualizarán el componente.

Laboratorio 6: CDE

Objetivo: Instalar el CDE en el Pentaho para quedar integrado en el Consola de Usuario.

Requisitos: • Descomprimir el archivo CDE-bundle-1.0-RC3.tar.bz2.• Copiar las carpetas de acuerdo a las instrucciones.

Laboratorio 6: Copiar Carpetas• Instrucciones:1. Copiar las subcarpetas en las carpetas correspondientes en el pentaho

solutions, recordando eliminarlas si ya existen en el Pentaho.•. Las carpetas a eliminar son:

a) /pentaho-solutions/bi-developers/cdf-samplesb) /pentaho-solutions/cdfc) /pentaho-solutions/system/pentaho-cdf

2. Reiniciar el servidor de Pentaho.3. Refrescar el repositorio.

Laboratorio 6: Copiar Carpetas• El CDE se crea como un plugin de Pentaho dentro de la Consola de Usuario.

CDE - Componentes

CDE – Componentes(Component)• Generic:

Permiten establecer los parámetros que son utilizados en los filtros y por ende en los datasources.

CDE – Componentes(Component)• Scripts:

Permite crear código Javascript, para modificar el comportamiento de los componentes en el dashboard.

CDE – Componentes(Component)• Others:

Ofrece una serie de componentes para agregar objetos externos al dashboard, como: reportes, vistas de análisis, menús, botones, etc.

CDE – Componentes(Component)• Charts:

El CDE utiliza el Componente CCC (Community Charting Components) para generar diversos gráficos como: torta, Bar, Linea, etc.

CDE – Componentes(Component)• Selects:

Ofrece diferentes componentes que en su mayoría se utiliza en los filtros, estos son: Lista desplegable, radio button, calendario, casilla de texto, etc.

CDE – Componentes(Component)• Custom:

Contiene el Raphael Component, Raphael es un framework JavaScript que permite crear gráficos vectoriales en el explorador, ver figuras:

Laboratorio 7: CDE – Crear Dashboard

Objetivo: Crear un dashboard estático utilizando las funcionalidades que ofrece el CDE.

Laboratorio 7: CDE – Crear DashboardPresionar el icono o el botón New CDE Dashboard, para abrir el ayudante.

Laboratorio 7: CDE – Crear Dashboard• Presionar en el menú superior “New”, el CDE le dará la opción de

guardar de una vez el dashboard, siempre que vaya a crear uno nuevo.

Laboratorio 7: CDE – Crear Dashboard• Vamos a la sección de Layout, para crear la plantilla del Dashboard,

agregando filas y columnas de acuerdo a la forma que se le quiera dar.

2. Para agregar la fila

1. Presione para ingresar a Layout

Laboratorio 7: CDE – Crear Dashboard• Coloque una columna(Column) en la primera fila(Row) creada, para

ubicar el titulo del Dashboard allí.

2. Atributos para personalizar la columna

1. Presionar para agregar columna

Laboratorio 7: CDE – Crear Dashboard• Agregue otra fila con 2 columnas para colocar allí los objetos del Dashboard,

recuerde configurar el Span Size en las columnas para asignarle el tamaño.

2. Colocar en la propiedad Name, el nombre html correspondiente para esa sección.

1. Dos columnas:- Grafico- Tabla de Datos

Laboratorio 7: CDE – Crear Dashboard• Agregue 2 datasource (conexión a los datos) para crear un query para

la gráfica y uno para la tabla.

2. Coloque aquí el nombre de la conexión a la BD1. Agregue 2

componentes de SQL Queries

3. Presione para escribir el query en esta sección.

Laboratorio 7: CDE – Crear Dashboard• Escribir los queries en cada objeto.

1. Una vez finalizado presione OK.

Query 1

Query 2

Laboratorio 7: CDE – Crear Dashboard• Vaya a la sección de Componentes para agregar el objeto para el

título.

1. Presione para ingresara Componentes

2. Agregamos un Componente de Texto

3. Expression: lo que se va a mostrar en código html.HtmlObject: coloque el nombre de la columna donde queremos que aparezca dicho objeto

Laboratorio 7: CDE – Crear Dashboard• Agregamos un Table Component para la tabla de datos que hará

referencia al segundo query.

1. Agregamos un Componente de Texto

2. En HtmlObject colocamos el nombre de la columna donde quiere que aparezca el objeto

3. Nombre del datasource correspondiente

Laboratorio 7: CDE – Crear Dashboard• Marcar la propiedad Column Headers (Cabecera de Columnas) para

agregar el nombre a las columnas, colocar tantos Arg como columnas desee.

Colocar tantos Arg como columnas sean necesarias Para agregar

mas columnas a la tabla

Presione OK para finalizar

Laboratorio 7: CDE – Crear Dashboard• Agregamos el grafico, en el menú izquierdo en la sección de Charts ->

CCC Pie Chart

Name: grafica01

Name: grafica01Title: Presupuesto por DepartamentoDatasource: presupuesto_bdWidth: 200Height: 200HtmlObject: grafica01

Laboratorio 7: CDE – Crear Dashboard• Presione Preview para previsualizar el Dashboard.

Presione “Preview”

Laboratorio 7: CDE – Crear Dashboard• Previsualice el Dashboard, cualquier cambio que necesite en cuanto a

forma, regrese a la sección de layout para personalizar.

Resumen del curso

¡¡¡Felicitaciones!!!!

FIN

d5 dashboards in pentaho

Documents