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, graphicLa 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.
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}});
}
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)
Twittear Seguir a @3p_ar
