CDF (Community Dashboard Framework) es un conjunto de tecnologías Open Source que permite a los desarrolladores BI construir cuadros de mando dinámicos y tableros (Dashboards) para la plataforma BI de Pentaho. Los dashboards CDF son paginas web que utilizan la tecnología Ajax para combinar informes, graficos, tablas Olap y mapas.
Pentaho no esta directamente involucrado en el desarrollo de este proyecto, pero incluye el plugin correspondiente tanto en la versión Community como en la Enterprise. Igualmente, desarrolladores de Pentaho son contribuyentes activos al proyecto.
El proyecto fue iniciado por Ingo Klose en 2007 y posteriormente potenciado por el trabajo de Pedro Alves, que además colabora en otros proyectos dentro del ambito de Pentaho, como CDA (Community Data Access), CBF (Community Build Framework) o CDE (Community Dashboard Editor).
Ejemplo CDF
Podeís acceder a la documentación existente sobre CDF en el portal de Pentaho.
Arquitectura de CDF.
Los dashboards CDF son paginas web que contienen areas llamadas componentes, donde se visualiza contenido BI (informes, gráficos, tablas Olap,etc). Cuando ejecutamos un dashboard en la plataforma BI, se produce la siguiente secuencias de acciones para ejecutarlo en el servidor:
- El usuario utiliza el navegador en la plataforma BI para abrir un tablero. Esto genera una request HTTP que es enviada al servidor BI de Pentaho.
- El servidor reconoce una petición de Dashboard e intenta localizar el fichero .xcdf asociado.
- El fichero .xcdf determina el template o plantilla del dashboard. Es un fichero HTML parcial que contiene los huecos para los componentes y las instrucciones Javascript para llenar estos componentes. El dashboard template se combina con la plantilla del documento (outer template) para generar una página web (documento HTML). Este segundo template se especifica igualmente en el fichero .xcdf.
Arquitectura CDF
4. La página es recibida por el navegador para ser visualizada al usuario. Como parte de este proceso, se inicializa el Dashboard y se ejecutan las instrucciones Javascript del documento, generandose el contenido de los componentes.
5. Despues de la inicialización, se lanza la actualización de los componentes para realizar su llenado. Esto se realiza a través de las correspondientes requests contra el servidor.
6. El servidor Pentaho recibe las solicitudes recibidas por los componentes, que normalmente corresponden a la ejecución de secuencias de acciones (action sequence).
7. El servidor ejecuta la secuencia de acciones.
8. El contenido generado por la secuencia de acciones es enviado como resultado, y es procesado para ser incluido en la pagina web. El resultado llena el correspondiente componente, lo que permite que el resultado sea visible en la página.
Además, en la configuración del plugin se determinan unos templates generales que determinan el marco en el que se visualizan los dashboards y que son totalmente personalizables.
Ejemplo práctico de CDF.
Para entender mejor los diferentes elementos que intervienen en la construcción de un dashboard CDF, vamos a ver un ejemplo práctico sencillo detallando todos los componentes que forman el tablero. Partiendo de uno de los ejemplos que se proporcionan en el portal de Pentaho, que tiene el siguiente aspecto:
CDF - Ejemplo gráfico interactivo
Es un tablero interactivo, de forma que podemos pulsar en cada una de las áreas del gráfico de la izquierda. Al pulsar cada sección, se actualiza de forma automática el gráfico de barras de la derecha, con los resultados de la región seleccionada. Para construir un tablero como el del ejemplo, en primer lugar construiremos el fichero .xcdf, donde estableceremos las propiedades generales, así como el nombre del fichero que contiene el outer template. Este será el fichero pentaho_sample.xcdf del tablero de la imagen:
<?xml version="1.0" encoding="UTF-8"?>
<cdf>
<title>Pentaho Sample</title>
<author>Webdetails</author>
<description>Pentaho Sample</description>
<icon></icon>
<template>template.html</template>
</cdf>
En segundo lugar, construiremos el fichero template. html, que incluye la parte html y la parte Javascript que va a determinar como se llenan los diferentes componentes del tablero y como es el comportamiento dinámico de este al pulsar sobre las secciones del gráfico de tarta para ver el desglose de cada una de las zonas.
<SCRIPT LANGUAGE="JavaScript">
// This is a custom function that is fired when a user selects a productLine and then want to select a territory
// Its purpose is to reset the productLine variable back to null and pass the territory that has been selected
// The function is executed from the url-template tag in the territorySales.xaction
function clickOnRegion(value) {
department = "null";
Dashboards.fireChange('region',value);
}
</SCRIPT>
## PARTE HTML DONDE DEFINIMOS LAS SECCIONES Y LAS ETIQUETAS HTML QUE LUEGO SERAN SUSTITUIDAS POR LOS COMPONENTES CDF ##
<!-- The page_title_object -->
<h1><span id=page_title_object></span></h1>
<!-- The dashboard layout table -->
<table align="center" cellpadding="3">
<tr>
<td align="center"><div id="RegionsPieChartObject"></div></td>
<td align="center"><div id="RegionVarianceBarChartObject"></div></td>
</tr>
<tr>
<td align="center"><div id="DepartmentDialChartObject"></div></td>
<td align="center"><div id="EmbeddedReportObject"></div></td>
</tr>
</table>
<script language="javascript" type="text/javascript">
// Define script variables before script execution
var region = "null";
var department = "null";
## DEFINICION DE LOS DIFERENTES COMPONENTES, CON SUS PROPIEDADES y FUNCIONES A EJECUTAR ANTES Y DESPUES DE LA EJECUCION DE CADA UNO
// pageTitleString component generates the page title with any other parameters is may need to construct the string
pageTitleString =
{
name: "pageTitleString",
type: "text",
listeners:["region", "department"],
htmlObject: "page_title_object",
executeAtStart: true,
expression: function(){return "title"},
preExecution:function(){
if(region == "null" && department == "null") {
title="Select a region";
}
else if (region != "null" && department == "null") {
title="This is headcount spending for " + region;
}
else if (region != "null" && department != "null") {
title = "This is headcount spending for " + region + ", " + department;
}
},
postExecution:function(){}
}
// RegionsPieChart component generates the
RegionsPieChart =
{
name: "RegionsPieChart",
type: "xaction",
solution: "bi-developers",
path: "cdf-samples/20-samples/pentaho_sample",
action: "RegionsPieChart.xaction",
listeners:[],
parameters: [],
htmlObject: "RegionsPieChartObject",
executeAtStart: true
}
// RegionVarianceBarChart component generates the
RegionVarianceBarChart =
{
name: "RegionVarianceBarChart",
type: "xaction",
solution: "bi-developers",
path: "cdf-samples/20-samples/pentaho_sample",
action: "RegionVarianceBarChart.xaction",
listeners:["region"],
parameters: [["REGION","region"]],
htmlObject: "RegionVarianceBarChartObject",
executeAtStart: false,
preExecution:function(){document.getElementById('DepartmentDialChartObject').innerHTML="";document.getElementById('EmbeddedReportObject').innerHTML="";}
}
// DepartmentDialChart component generates the
DepartmentDialChart =
{
name: "DepartmentDialChart",
type: "xaction",
solution: "bi-developers",
path: "cdf-samples/20-samples/pentaho_sample",
action: "DepartmentDialChart.xaction",
listeners:["department"],
parameters: [["DEPARTMENT","department"],["REGION","region"]],
htmlObject: "DepartmentDialChartObject",
executeAtStart: false
}
// EmbeddedReport component generates the
EmbeddedReport =
{
name: "EmbeddedReport",
type: "xaction",
solution: "bi-developers",
path: "cdf-samples/20-samples/pentaho_sample",
action: "embedded_report.xaction",
listeners:["department"],
parameters: [["DEPARTMENT","department"],["REGION","region"]],
htmlObject: "EmbeddedReportObject",
executeAtStart: false
}
## DEFINICION DE LOS COMPONENTES A SER CARGADOS EN EL DASHBOARD Y LA FUNCION PRINCIPAL DE CARGA DEL TABLERO
// These are the components to be loaded into the dashboard withing the [] seperated by ,
var components = [pageTitleString, RegionsPieChart, RegionVarianceBarChart, DepartmentDialChart, EmbeddedReport];
</script>
<script language="javascript" type="text/javascript">
// The intial dashboard load function definition
function load(){
Dashboards.init(components);
}
// The intial dashboard load function execution
load();
</script>
Como vemos, todo es programación y somos nosotros los que hemos de indicar el comportamiento de los diferentes elementos, compaginandolos con elementos de diseño HTML. En la documentación de CDF se enumeran las propiedades que se pueden definir y los componentes que podemos utilizar dentro de los tableros. Por ejemplo, podremos configurar los siguientes tipos de componentes:
check: crea una lista de casillas de seleccion etiquetadas con los resultados de una determinada secuencia de acciones (leyendo, por ejemplo, de la base de datos).
dateInput: crear un control de calendario para introducción de fechas.
radio: crea una lista de radiobuttons etiquetados con los resultados de una determinada secuencia de acciones.
select: crear una lista de selección simple, que esta llena con los valores recuperados por una determinada secuencia de acciones.
selectMulti: igual que el anterior, pero la lista permite selección multiple.
text: permite actualizar el texto de una cadena HTML.
textInput: crea un campo de entrada de texto.
xaction: ejecuta una secuencia de acciones y visualiza los resultados en una determinada etiqueta HTML.
jpivot: ejecuta una secuencia de acciones jpivot y visualiza los resultados en un frame donde la tabla jpivot es embebida.
map: componente para integrar mapas.
mapBubble: componente para integrar gráficos.
Con el componente jpivot podremos embeber una tabla de análisis dentro del tablero. Con xaction podremos definir una secuencia de acciones (como ejecutar un informe, por ejemplo). Aunque no la hemos analizado, Pentaho proporciona la herramienta llamada Design Studio (PDS), basada en el entorno Eclipse, que nos permite crear secuencias de acciones para integrar en el servidor BI. Por ejemplo, podremos crear secuencias de acciones para ejecutar informes o sentencias SQL, para enviar correos electrónicos, obtener datos desde Kettle, realizar acciones sobre el scheduler de la plataforma BI, etc. Podeís ver un resumen de las acciones mas usuales en este link. Los ficheros de secuencia de acciones tiene la extensión .xaction. Un ejemplo de fichero de este tipo para ejecutar un report de PRD es el siguiente:
<?xml version="1.0" encoding="UTF-8"?>
<action-sequence>
<title>JFreeReport HTML Example</title>
<version>1</version>
<logging-level>debug</logging-level>
<documentation>
<author>James Dixon</author>
<description><![CDATA[
This is an example of an HTML report produced by JFreeReport.
<p/>It shows the actual headcount cost, budgeted headcount
cost, and variance for every position in the specified
department and region
]]></description>
<icon>/style/icons/jfree1.png</icon>
<help/>
<result-type>none</result-type>
</documentation>
<inputs>
<REGION type="string">
<sources>
<request>REGION</request>
</sources>
<default-value><![CDATA[Southern]]></default-value>
</REGION>
<DEPARTMENT type="string">
<sources>
<request>DEPARTMENT</request>
</sources>
<default-value><![CDATA[Sales]]></default-value>
</DEPARTMENT>
</inputs>
<outputs>
<report type="content">
<destinations>
<response>content</response>
</destinations>
</report>
</outputs>
<resources>
<report-definition>
<solution-file>
<location>embedded_report.xml</location>
<mime-type>text/xml</mime-type>
</solution-file>
</report-definition>
</resources>
<actions>
<action-definition>
<component-name>SQLLookupRule</component-name>
<action-type>Query For Report Data</action-type>
<action-inputs>
<REGION type="string"/>
<DEPARTMENT type="string"/>
</action-inputs>
<action-outputs>
<query-result type="result-set" mapping="reportData"/>
</action-outputs>
<component-definition>
<jndi>SampleData</jndi>
<query><![CDATA[select QUADRANT_ACTUALS.REGION,
QUADRANT_ACTUALS.DEPARTMENT,
QUADRANT_ACTUALS.POSITIONTITLE,
QUADRANT_ACTUALS.ACTUAL,
QUADRANT_ACTUALS.BUDGET,
QUADRANT_ACTUALS.VARIANCE
from QUADRANT_ACTUALS
where QUADRANT_ACTUALS.REGION in ( {PREPARE:REGION} )
and QUADRANT_ACTUALS.DEPARTMENT in ( {PREPARE:DEPARTMENT} )
order by QUADRANT_ACTUALS.REGION, QUADRANT_ACTUALS.DEPARTMENT]]></query>
</component-definition>
</action-definition>
<action-definition>
<component-name>JFreeReportComponent</component-name>
<action-type>Pentaho Report</action-type>
<action-inputs>
<data type="result-set" mapping="reportData"/>
</action-inputs>
<action-resources>
<report-definition type="resource"/>
</action-resources>
<action-outputs>
<report-output type="content" mapping="report"/>
</action-outputs>
<component-definition>
<output-type>html</output-type>
</component-definition>
</action-definition>
</actions>
</action-sequence>
En la imagen podeis ver la interfaz de PDS, y un ejemplo de una secuencia de acciones, que se compone básicamente de inputs, acciones (como las que enumeramos anteriormente) y outputs. Los ficheros xaction son publicados en el portal para integrar las acciones descritas en él. Nos puede ser muy útil para automatizar procesos o para distribuir resultados de la ejecución de informes y graficos.
Pentaho Design Studio
Como os podeís imaginar, el diseño de los tableros con CDF es todo un reto donde hemos de tener conocimientos profundos en diseño Web, Javascript y además conocer de forma completa el funcionamiento del portal BI y la forma de diseñar secuencias de acciones con Pentaho Design Studio. Podremos construir casi todo lo que queramos, pero con un elevado componente de programación que exige un skill técnico muy elevado, en el que seguramente será necesaria la intervención de varias personas, además del conocimiento del negocio propio de un sistema BI.
El Rincon del BI 