miércoles, noviembre 16, 2011

Dashboard con CDE y eGluFilterTwoList

Hola Gente,

luego de un tiempo sin postear, justamente por la falta de tiempo, he decidido sacar un poco el polvo al blog y comentarles algo (aunque sea poco) de todo lo que estuve aprendiendo, viendo o haciendo en este último tiempo.
Comenzaré con un post de como crear un tablero en CDF utilizado un componente que he desarrollado para Pentaho CDF y como utilizarlo desde CDE. CDF y CDE son algunas de las CTools que han desarrollado Pedro Alves y otros.
Este componente nos permite crear un filtro que puede ser utilizado para diversas tareas como: filtrar un reporte, un gráfico, una consulta MDX para un pivot, etc. Lo que tiene de particular este filtro, es que puede manipular grandes cantidades de información en forma de páginas, permite realizar búsquedas globales y por página, como así también definir el formato de salida esperado. Permite customizar muchos parámetros como: items por página, alto de página, etc. Se puede descargar una solución que contiene el componente, una demo utilizando CDF y la documentación desde este link (o desde github).

Comenzaremos por decir que el desarrollo lo hago con Pentaho 3.9 sobre Ubuntu 11.04 y las versiones de las CTools al día 16/Nov/2011.

Lo primero es iniciar sesión en PUC y crear un datasource llamado "dw", este datasource apunta a la base de datos "practico" de MySQL, base de datos que utilizamos en eGluBI para crear muchos de nuestros posts, desde este link (o desde github) pueden descargar el backup de la BD, entre otras cosas. Luego crear una carpeta de solución llamada eGluFTL, y dentro de la carpeta un nuevo dashboard CDE llamado "DemoFTLeGlu", se pueden ver los pasos en la siguiente imagen.


Una vez creado y guardado el archivo, podemos comprobar si todo está bien, deberíamos refrescar el repositorio, seleccionar la carpeta creada anteriormente y luego chequear que el tablero esté.


Luego desde la perspectiva Layout vamos a crear dos filas, la primera con dos columnas y la segunda con una, separar las dos filas con un Space.

Columna 1 de la primera fila:
Name: contenedorFTL
Span size: 14

Columna 2 de la primera fila:
Name: contenedorGrafico
Span size: 10
Text align: Center

Columna de la 2da fila:
Name: contenedorBotonFiltrar
Span size:14
Text align: Center



Luego deberemos copiar el archivo "FilterTwoListComponent.js" a la carpeta de solución recién creada. Este archivo contiene la implementación del componente CDF. La copia deberá hacerse desde el sistema operativo.
Una vez copiado el archivo y refrescado el repositorio (esto último es muy importante, ya que de lo contrario no se podrá ver el recurso) y desde la perspectiva Layout, agregamos un nuevo recurso de tipo javascript externo, a esto lo hacemos presionando el icono con el signo más (+). Los valores deben ser:

Name: FTLeGlu
Resource file: ${res:FilterTwoListComponent.js}


A continuación, desde la perspectiva Components, debemos crear un Generic/Simple parameter con los siguientes datos:

Name: idsClientes
Property value: -



Luego debemos crear un Datasource, desde la perspectiva "Data Sources" con los siguientes datos:

SQLQueries/sql over sqlJndi 
 
Name: totalPorAnioClientesDS
jndi: dw
Parameters:

Query:
 SELECT CAST(anio AS char(4)) AS anio,
                    SUM(cantidad*importe) AS importe
     FROM dw_ventasfact v INNER JOIN dw_tiemposlookup t
                 ON t.fecha=v.fecha
     WHERE idCliente IN (${idsClientes})
     GROUP BY t.anio ORDER BY t.anio DESC

A continuación creamos otro Datasource con los siguientes datos:

Name: clientesDS
jndi: dw
Query:
  SELECT idCliente,cliente
    FROM dw_clienteslookup
    ORDER BY idCliente


Regresamos a la perspectiva Components y desde allí agregamos un Others/Freeform Component que nos servirá como Wrapper para poder ejecutar el componente FilterTwoList, con los siguientes datos:

Name: FTLClientesWrapper
Datasource: clientesDS
HtmlObject: contenedorFTL
Custom Script:
function f(){
    render_FTLClientes = {
        name: "render_FTLClientes",
        type: "FilterTwoList",  //Define el tipo de componente
        queryDefinition: this.queryDefinition, //Usa el datasource ya definido
        htmlObject : this.htmlObject, //Usa el htmlObject ya definido
        pageLength : 7,  //Items por página
        executeAtStart: this.executeAtStart,
        size : 7, //Alto de página
        keepDestSorted : true,
        sortDestByKey : true,
        parameter: 'idsClientes', //Es es parámetro al cual se dará valor!
        initParameterString: '["',
        endParameterString: '"]',
        joinParameterString: '","',
        fillParameterWithId: true,
        valueAsId: false,
        minLengthForSearchAll: 2
    }; 
    //Agregamos este componente al tablero actual
    Dashboards.addComponents([render_FTLClientes]); 
    //Lo ejecutamos
    Dashboards.update(render_FTLClientes);
}

Ya podemos salvar nuestro tablero y probar si el componente está funcionando. Luego de guardar el tablero hay que presionar Preview y deberíamos tener una salida como la siguiente:


Luego desde la perspectiva Components, agregamos un Others/Button Component con los siguientes datos:
Name: btnFiltrar
Label: Aplicar Filtro
HtmlObject: contenedorBotonFiltrar
Expression:
   function f() {
     // eval(idsClientes) lo transforma en un objeto Array
     Dashboards.fireChange('idsClientes',eval(idsClientes));
   }

Posiblemente en futuras versiones del componente, exista un botón filtrar.

Por último agregaremos un componente Charts/CCC Bar Chart con los siguientes datos:
Name:                  totalPorAnioClientes
Width:                  600
Height:                 200
Datasource:         totalPorAnioClientesDS
Series in rows:     True
Parameters:         [["idsClientes"],["idsClientes"]]
HtmlObject:         contenedorGrafico
Listeners:             ['idsClientes']
Execute at start:  False
Extension points: 
     Arg: yAxisLabel_text
     Value: function(d){ return sprintf("%d", d/1000000)+" M"; }

Ejecutamos nuevamente la vista previa, seleccionamos algunos clientes y presionamos el botón "Aplicar Filtro" y boila!


Espero les sea de utilidad.
Pueden descargar el ejemplo completo desde aquí (o desde github).

6 comentarios:

Anónimo dijo...

Exelecte Gracias por compartirlo

Saludos
vgv

Primogenito dijo...

Hola buen dia, muy buen post, pero los links, estan rotos, me gustaria crear mis propios componentes, o mis propios Js, por donde puedo empezar, tengo conocimientos en JS, pero necesito ver un ejemplo para ver como interactuar con el biserver, estoy perdido por ese lado..

Primogenito dijo...

gracias

Unknown dijo...

Hola,
tienes razón, el problema es que estamos mudando el site, igualmente estoy subiendo el material a github, puedes acceder a este link: https://github.com/magm3333/material-osbi

Primogenito dijo...

Muchas gracias Mariano, saludos desde Mexico...

Unknown dijo...

Por nada, ya están los nuevos links en el post

Etiquetas

pentaho (45) java (35) eclipse (23) jdbc (14) curso (13) tomcat (13) primefaces (12) db2 (11) mondrian (10) review (10) jsf (9) openI (9) pdi (9) prd (9) libro (8) plugin (8) musql (7) struts (7) javascript (6) spring (6) cdf (5) ctools (5) instalar (5) linux (5) mysql (5) data studio (4) hibernate (4) ireport (4) jasper (4) meteor (4) videocurso (4) eglu (3) eglubi (3) elearning (3) graphite (3) grupo eglu (3) jboos tools (3) mexico (3) openbits (3) packt (3) python (3) undec (3) websphere (3) applet (2) cde (2) dao (2) db2university (2) exelearning (2) flexigrid (2) hadoop (2) iua (2) kettle (2) moodle (2) node (2) olap (2) osbi (2) pivot4j (2) scorm (2) sql (2) stpivot (2) actionscript (1) amazon (1) autenticacion (1) avanzado (1) base de datos (1) big data (1) bigdata (1) bodoc (1) cambiar (1) ccc (1) cdc (1) chat (1) cloud (1) coffeescript (1) control de acceso (1) corti (1) csv (1) cuba (1) curso meteor undec (1) dashboard (1) datamart (1) dataptix.tv (1) datasource (1) datatable (1) db2 ExpressC (1) demonio (1) distancia (1) driver (1) driver jdbc (1) eglufiltertwolist (1) encapsulamiento (1) especialización (1) etl (1) excepciones (1) export (1) faces (1) federación (1) filas afectadas (1) filtertwolist (1) filtrado (1) flegrid (1) flex (1) google (1) google viz (1) hostname (1) html (1) i18n (1) ibm (1) identidad (1) indignación (1) instancias (1) inteligencia de negocios (1) jee (1) jpivot (1) l10n (1) la azada (1) la zaga de los confines (1) layout (1) liberado (1) libre (1) libro promoción (1) lob (1) marktplace (1) menu (1) meteor node javascript google oauth autenticacion (1) mobile (1) mongoDB (1) node.js (1) oauth (1) olap4j (1) open source (1) orm (1) persistencia (1) personalizada (1) prd5 (1) psw (1) publicidad (1) rad6 (1) recursividad (1) reporting (1) rock (1) saiku (1) script (1) servicio (1) sessiontimeout (1) sourceforge (1) spinneta (1) sqlserver (1) ssl (1) taller (1) troyanx (1) ubuntu (1) ucc (1) ui (1) web (1) web console (1) xampp (1) xml (1) xpath (1)

Seguidores