Etiqueta : cde

Desarrollo de un componente CDE

Por David González
Project Manager en OpenSistemas

Una de las partes más importantes de un sistemas de BI son los dashboard en los que se representan los principales KPIs que requieren de atención por parte del área de negocio de la empresa.

Para la realización de los dashboard Pentaho en su versión Open Source utiliza Community Dashboard Editor (CDE), el cual ya incorpora D3js mediante instalación desde el Market Place de Pentaho.

Lo que veremos a continuación, se puede extrapolar a cualquier componente, pero en este caso desarrollaremos un componente cuya labor será generar un gráfico de D3js. D3js es un framework para generar librerías gráficas, cuya ventaja es que no tiene limitaciones. CDE cuenta con componentes de CCC que ofrecen gran cantidad de opciones, incluso permiten extender algunas propiedades, pero no llegan al nivel de D3js (por el contrario la realización del gráfico es mucho más sencilla).

Partiremos del componente “d3Component” (podemos encontrarlo una vez instalado el paquete de D3js en:

biserver-ce/pentaho-solutions/system/d3ComponentLibrary/resources/components/d3Component)

Lo copiamos en la misma ruta con el nombre que queramos, en nuestro caso, como vamos a hacer un gráfico simple de un circulo, lo llamaremos “d3SimpleRadial”.

Una vez dentro veremos dos archivos, component.xml y otro *.js.

El primero es el más importante, y es donde se definirá la localización del componente en el menú de CDE, sus parámetros y donde se encuentra el desarrollo del mismo. El segundo, es el que referenciamos desde el componente y puede haber tantos ficheros como necesitemos en función de la dificultad del componente.

    <Name>d3 Simple Radial</Name>
    <IName>d3SR</IName>
    <Description>D3 Simple Radial</Description>
    <Category>D3COMPONENTS</Category>
    <CatDescription>D3 Components</CatDescription>
    <Type>PalleteEntry</Type>
    <Version>1.0</Version>

Name, es el nombre que aparecerá en el menú de CDE.
IName, es el nombre interno que deberá coincidir con el objeto creado en alguno de los archivos del componente.
Category, es para decidir en que grupo se va a incluir nuestro componente.

A continuación aparecen las properties, que son las opciones de parametrización que va a tener el componente:

<Property>dataFixed</Property>

Si no son propiedades existentes en CDE además habrá que definirlas:


        <DesignerProperty>
          <Header>
            <Name>dataFixed</Name>
            <Parent>BaseProperty</Parent>
            <DefaultValue></DefaultValue>
            <Description>Data Fixed</Description>
            <Tooltip>Data Fixed</Tooltip>
            <InputType>String</InputType>
            <OutputType>String</OutputType>
            <Order>51</Order>
            <Version>1.0</Version>
          </Header>
        </DesignerProperty>

Así definiremos que tipo de datos espera, si aparecerá en las opciones normales o sólo en las avanzadas, etc.

Nos hemos dejado la parte más importante, dentro de implementation, la parte que dice donde esta el desarrollo del componente (y las dependencias)

<Code src="d3SR.js"/>
      <!--Styles>
        <Style version="1.0" src="d3Component.css">d3Component</Style>
      </Styles-->
      <Dependencies>
        <Dependency src="../commons/lib/d3.js" version="343">d3js</Dependency>
        <Dependency src="../commons/d3ComponentBase.js" version="1">d3ComponentBase</Dependency>

En nuestro ejemplo, el core estará definido en d3SR.js (en este caso lo más cómodo renombrar el fichero js que teníamos), pero, ¿que estructura debe tener este archivo? Muy sencillo, debe devolver un objeto que se llame como el IName, y en su interior tener los métodos que va a utilizar CDE (update, render, etc).

En nuestro caso extendemos de D3ComponentBase, si fuera un componente normal extenderíamos de BaseComponent.

Mi recomendación, es comenzar con un fichero que sólo devuelve el objeto vacío:


/*
 * d3 component, using the d3ComponentBase
 */

 var d3SR =  D3ComponentBase.extend({});

Si reiniciamos el servidor, aparecerá nuestro componente. Cualquier modificación en el xml requiere reiniciar del servidor. Por otro lado, Pentaho mimifica y compacta todos los desarrollos, por lo que cualquier cambio en los ficheros de js no serán visibles hasta que reinciemos el servidor. Esto no es viable a la hora de desarrollar, pero no os preocupéis, os dejo algo que os permitirá ver los cambios utilizando los ficheros originales en lugar de los mimificados, pudiendo además depurar cualquier componente.

Añadir a la url de visualización del dashboard el parámetro debug=true. Con esto podremos desarrollar en nuestro IDE habitual, y los cambios se verán reflejados en nuestro dashboard de test.

A partir de este momento, podemos empezar a editar nuestro objeto e ir viendo nuestros avances. Esta es mi recomendación para asegurarnos de que el componente es correcto y no ocasiona problemas en la carga de CDE.

¿Como creamos el core del componente?, muy sencillo, una vez que tenemos el código JavaScript que genera el gráfico de D3js, lo meteremos en la función “render” dentro del objeto. Hay varias opciones, viendo el resto de componentes podéis ver las que hay, desconozco si existe una documentación de las posibles opciones.

Una vez que tenemos el código ahí metido, tenemos que parametrizarlo, para que tome los valores que mete el usuario desde el back de CDE. Como accedemos a los parámetros, muy sencillo, utilizamos el ejemplo anterior dataFixed, para obtener el valor en nuestro d3SR utilizaremos this.dataFixed.

Por último, os dejo el código de la primera versión en GitHub, que aunque no sea definitiva es funcional (probada con Pentaho 5.2), para que podáis ver todo el código.

https://github.com/dgalcalde/d3SipleRadial