Probando Pentaho IV: sparkline, dataBar y paleta de colores.

miércoles, 23 de octubre de 2013


 Con este tablero de control queremos mostrar cómo probamos algunos componentes de Pentaho y CTools.
 El gráfico muestra la variación de las ventas de Internet durante un período, por país. 
Permite comparar el porcentaje de ventas por año y muestra tendencias por medio de sparklines. 
 La base de datos es AdventureWorksDW, de Microsoft SQL Server Database Product Samples

Internet Sales

Es una línea de tiempo en años con el total de ventas por país.
Componente usado: CCC Line Chart.


Propiedades relevantes del componente: 
  • Data Source:  ventas por territorio y por año.
 
SELECT   T.CalendarYear,st.SalesTerritorycountry ,SUM(S.SalesAmount) TotalSalesAmount 
FROM dbo.FactInternetSales S
INNER JOIN DimTime T ON S.OrderDateKey = T.TimeKey
INNER JOIN DimSalesTerritory st on S.SalesTerritoryKey = st.SalesTerritoryKey
GROUP BY T.CalendarYear,st.SalesTerritoryCountry
ORDER BY T.CalendarYear


  • CrossTabMode = FALSE.
  • SeriesInRows = TRUE.
  • PostFetch: definimos algunos extensionPoints y el formato de las marcas de cantidades.
 
function f(cdaData) {
    var newLine = this.chartDefinition;
    newLine.extensionPoints= [
        ["dot_fillStyle","#ffffff"],
        ["dot_shapeRadius","3"],
        ["dot_lineWidth","2"],
        ["line_lineWidth","2"],
   
        ["legendLabel_font","10px sans-serif"], 
        ["legend_font","12px sans-serif"],
        ["xAxisLabel_font","12px sans-serif"],
        ["yAxisLabel_font","10px sans-serif"],
        ["xAxisLabel_text",function(g){return (g.vars.tick)}]];
    newLine.yAxisTickFormatter= function(value){
            return (value / 1000).toFixed() + " K"; };
    newLine.showYScale= true;
    newLine.yAxisPosition= "left";
    newLine.colors=colorFill;
    newLine.xAxisFullGrid= true 
    newLine.yAxisFullGrid= true 
    newLine.xAxisEndLine= true 
    newLine.yAxisEndLine= true  
 this.chartDefinition= newLine;
}

Year Percentage

Es  una tabla con las ventas por región y por año, con porcentaje correspondiente sobre el total para poder comparar la proporción de aumento en las ventas de un año a otro. El componente de Ctools usado es una tabla, con una columna de tipo 'dataBar'.

Propiedades relevantes del componente: 
  • DataSource: busca el total de ventas por año y calcula el porcentaje que representa cada año respecto al periodo en estudio.

 
WITH TotalSales ( SumTotal)
AS(
SELECT  SUM(S.SalesAmount)
FROM dbo.FactInternetSales S
)
SELECT T.CalendarYear,SUM(S.SalesAmount) SalesAmount,
100 * SUM(S.SalesAmount)/ MAX(TotalSales.SumTotal)  SalesAmountPercentage,
100 * SUM(S.SalesAmount)/ MAX(TotalSales.SumTotal)  SalesAmountPercentage2
FROM dbo.FactInternetSales S
INNER JOIN DimTime T ON S.OrderDateKey = T.TimeKey
CROSS JOIN TotalSales
GROUP BY T.CalendarYear
ORDER BY T.CalendarYear

  • ColumnTypes: dataBar para SalesAmountPercentage

Country Trend

Esta tabla muestra la tendencia de variación de las ventas en un periodo de 4 años, usando sparklines.

A sparkline is a small intense, simple, word-sized graphic with typographic resolution. Sparklines mean that graphics are no longer cartoonish special occasions with captions and boxes, but rather sparkline graphic can be everywhere a word or number can be: embedded in a sentence, table, headline, map, spreadsheet, graphic
La columna correspondiente al sparkline debe ser una cadena separada por comas con los valores que formarán la tendencia.

  • DataSource: ventas por territorio y por año, totales por año en columnas y columna resumen de totales para conformar el sparkline.

 
 SELECT  SalesTerritoryCountry as Country ,
    CAST([2001]/1000 as CHAR(10)) + ','+CAST([2002]/1000 as CHAR(10))+ ','+CAST([2003]/1000 as CHAR(10))+ ','+CAST([2004]/1000 as CHAR(10)) as Trend
,[2001] , [2002]  ,[2003] ,[2004] 
FROM 
(SELECT st.SalesTerritoryCountry, CalendarYear,cast(S.SalesAmount  as int) as salesamount
FROM dbo.FactInternetSales S
INNER JOIN DimTime T ON S.OrderDateKey = T.TimeKey
INNER JOIN DimSalesTerritory st on S.SalesTerritoryKey = st.SalesTerritoryKey) p
PIVOT
(
sum(SalesAmount)   
    for CalendarYear in 
([2001] , [2002]  ,[2003] ,[2004]     )) as pvt order by SalesTerritoryCountry
  


Los Colores

Se intenta unificar e integrar los colores de los componentes, procurando usar un mismo color por país para los tres casos.
Fue necesario definir una paleta de colores: una lista de códigos rgb preseleccionados.
Buscamos en Protovis, que provee varias paletas de colores Colores Protovis.
En  un 'resource' de tipo javascript asociado al dashboard se definieron las listas con colores ( para aplicar en los componentes y tablas) y un color general (para los encabezados y marcos de tablas).  
rgbPasaHex se encarga de la conversión a RGB.

 
colorFill=pv.Colors.category19();
colores= colorFill.range();
var colorBase=rgbPasaHex(colores[9].color);


 Colores en tabla Year Percentaje
En la propiedad PreExecution de la tabla, seteamos 'AddInOptions' para configurar el color del DataBar usando 'colorBase'

   this.setAddInOptions("colType","dataBar", function(val)  
    {
            return { startColor: colorBase, endColor: colorBase}
       
    });


Colores en la CCC Line Chart  
Asignamos la paleta de colores en la propiedad  postFetch  de CCC Line Chart ( que mostramos previamente)
 
   
    newLine.colors=colorFill;
    this.chartDefinition= newLine;
   

Colores en la tabla Country Trend: 


el nombre de cada país, tiene el mismo color que el sparkline y que la linea de tiempo correspondiente.  
Para modificar los labels, se define un span con el color correspondiente en hexa.
Para los sparklines, se define el 'strokeStyle' a medida que se construye la tabla.

 
   function f() {
    var idx=-2;
  
    this.setAddInOptions("colType","formattedText",   
         {textFormat: function(v, st) { 
                 idx = idx+1;
          var colorHexa = rgbPasaHex(colorFill(idx).color);     
             return ""+v.toUpperCase()+" }
      });

   var idj = -2;
     this.setAddInOptions("colType","pvSparkline",function(val) {
        idj=idj+1;
        return {lineWidth:2,strokeStyle:colorFill(idj).color}});

   }



Colores en los encabezados y en los bordes de las tablas
Para manipular los colores de las tablas y los distintos elementos del documento, se usaron variables. En este caso, la variable global 'colorBase'. La asignación de color debe estar en el  postExecution de cada una de las tablas.



 
function p(){
    var color=colorBase.toString();
    $("th").css( 'color' ,  color );
    $("td").css( 'border' ,  '1px dotted '+color );
    $(".tit").css("color",color); // definida una clase tit para los encabezados
  
}




Artículos relacionados:

Probando Pentaho I (Instalación de Pentaho Community)
Probando Pentaho II (Dashboard de ejemplo)
Probando Pentaho III (Introducción a Pentaho CTools)


 









Leer más...