Plataforma | Visualizador de gráficos

El visualizador de gráficos tiene como principal objetivo permitir que otras aplicaciones puedan mostrar gráficos personalizados dentro de Fluig. Para ello, basta sólo con registrar el servicio de gráfico en Fluig y proporcionar dos métodos rest. Uno que informará los parámetros de configuración del gráfico y otro que pondrá a disposición los datos.

El Visualizador de Gráficos permite exhibir en formato tabla, gráfico de columna y gráfico de torta.

1. Registrar el servicio de datos en Fluig.

Para registrar el servicio de datos del gráfico basta con enviar un mensaje asincrónico a Fluig.

El desarrollador deberá utilizar el evento "REGISTER_CHART_SERVICE". Será necesario pasar un objeto de tipo ChartServiceVO con los datos del servicio de datos en cuestión.

El objeto ChartServiceVO, disponible en el paquete com.totvs.technology.wcm.common.chart, está compuesto por los siguientes elementos:
String id: código del servicio de gráfico
String description: descripción del servicio de gráfico
String ParametersRest: URL del servicio rest que devolverá los parámetros
String dataRest: URL del servicio rest que devolverá los datos del gráfico

Ejemplo:

ChartServiceVO ecm1 = new ChartServiceVO("ECM1", "ECM - Volumes: Espacio utilizado (por volumen en %) ");
ecm1.setDataRest(“http://localhost:8080/portal/ecm/api/rest/ecm/volume/chartDataByVolume");
ecm1.setParametersRest(“http://localhost:8080/portal/ecm/api/rest/ecm/volume/chartParametersByVolume");
IntegrationUtil.sendAsyncMessage(WCMAsyncEvents.REGISTER_CHART_SERVICE.getEvent(), ecm1);

Este registro se debe ejecutar cada vez que se deploya la aplicación, es decir, cada vez que sube el fluig. Para ello, sugerimos crear un servlet en su aplicación con la opción loadOnStartup = 1, que se encargará de cumplir esta tarea.

2. Servicios de Parámetros 

Este servicio rest deberá devolver una lista de ChartParameterVO, que contendrá los parámetros que su servicio de datos necesitará para proporcionar los datos del gráfico. En base a este servicio el Fluig construirá la pantalla de configuración.

El ChartParameterVO (pacote com.totvs.technology.wcm.common.chart) esta compueto por los siguientes elementos:
int código id: código numérico secuencial que se utilizará para la búsqueda de los datos posteriormente.
String title: nombre del campo como aparecerá en la pantalla
String type: tipo de campo (ChartParameterVO.TYPE_STRING, ChartParameterVO.TYPE_NUMBER, ChartParameterVO.TYPE_DATA ou ChartParameterVO.TYPE_BOOLEAN)
String AllowedList: si el campo es tipo string, pueden desplegarse una lista con opciones para que el usuario seleccione. Estas opciones están separadas por “;”
boolean multipleSelection - > true/false, en caso de que permita o no la selección múltiple si el AllowedList está en uso.
String value - > Valor inicial si existe

Exemplo:
List<ChartParameterVO> params = new ArrayList<>();
ChartParameterVO param1 = new ChartParameterVO();
param1.setCode(1);
param1.setTitle("Código del Ítem");
param1.setType(ChartParameterVO.TYPE_STRING);
param1.setAllowedList(“Item 1;Item 2;Item 3”);
param1.setMultipleSelection(ChartParameterVO.SELECTION_UNIQUE);
params.add(param1);

ChartParameterVO param2 = new ChartParameterVO();
param2.setCode(2);
param2.setTitle("Exhibir solamente ítems activos");
param2.setType(ChartParameterVO.TYPE_BOOLEAN);
params.add(param2);
return params;


3. Servicio de Datos

El servicio REST deberá devolver una ChartVO, con los datos para exhibir el gráfico.
O ChartVO (paquete com.totvs.technology.wcm.common.chart) está compuesto por los siguientes elementos:
String title: título que se exhibirá en el gráfico
String description: descripción del gráfico
String type: tipo do gráfico (ChartTypes.column.getName(), ChartTypes.pie.getName(), ChartTypes.table.getName()
Map<String, Object>[] source: datos del gráfico
ChartCategoryVO category: categorías
ChartSerieGroupVO[] seriesGroups: grupos de series

Ejemplo para un Gráfico de torta:

ChartVO result = new ChartVO("Espacio utilizado", "Volumen" + codVolFisic,ChartTypes.pie.getName());
Map<String, Object>[] source = new Map[2];
Map<String, Object> data0 = new HashMap<String, Object>();
data0.put("label","Utilizado");
data0.put("size",80);
source[0] = data0;

Map<String, Object> data1 = new HashMap<String, Object>();
data1.put("label","Livre");
data1.put("size",20);
source[1] = data1;
result.setSource(source);

ChartSerieGroupVO[] seriesGroups = new ChartSerieGroupVO[1];
ChartSerieGroupVO serieGroup = new ChartSerieGroupVO(ChartTypes.pie.getName(),"label");
ChartSerieVO[] series = new ChartSerieVO[1];
ChartSerieVO serie = new ChartSerieVO("size","label");
series[0] = serie;
serieGroup.setSeries(series);
seriesGroups[0] = serieGroup;

result.setSeriesGroups(seriesGroups);
return result;

Ejemplo para un Gráfico de columnas:
ChartVO result = new ChartVO("Espacio utilizado","Todos los volúmenes",ChartTypes.column.getName());

Map<String, Object>[] source = new Map[2]; 

Map<String, Object> data0 = new HashMap<String, Object>();
data0.put("label",”Item 1”);
data0.put("total",100);
data0.put("used",40);
data0.put("free",60);
source[0] = data0;

Map<String, Object> data0 = new HashMap<String, Object>();
data0.put("label",”Ítem 2”););
data0.put("total",120);
data0.put("used",60);
data0.put("free",60);
source[1] = data0;

result.setSource(source);

ChartCategoryVO category = new ChartCategoryVO("label");
result.setCategory(category);

ChartSerieGroupVO[] seriesGroups = new ChartSerieGroupVO[1];
ChartSerieGroupVO serieGroup = new ChartSerieGroupVO(ChartTypes.column.getName(),"Espaço(Mb)");

ChartAxiVO axis = new ChartAxiVO(20,true,"Espaço(Mb)");
serieGroup.setValueAxis(axis);

ChartSerieVO[] series = new ChartSerieVO[3];

ChartSerieVO total = new ChartSerieVO("total","Espaço Total");
series[0] = total;

ChartSerieVO used = new ChartSerieVO("used","Espacio Utilizado");
series[1] = used;

ChartSerieVO free = new ChartSerieVO("free","Espacio Libre");
series[i] = free;

serieGroup.setSeries(series);
seriesGroups[0] = serieGroup;

result.setSeriesGroups(seriesGroups);

return this.buildResponse(result);

Ejemplo para un Gráfico de tablas:

ChartVO result = new ChartVO("Espacio utilizado","Todos los volúmenes",ChartTypes.table.getName());

Map<String, Object>[] source = new Map[2];

Map<String, Object> data0 = new HashMap<String, Object>();
data0.put("label",”Item 1”);
data0.put("total",100);
data0.put("used",40);
data0.put("free",60);
source[0] = data0;

Map<String, Object> data0 = new HashMap<String, Object>();
data0.put("label",”Ítem 2”););
data0.put("total",120);
data0.put("used",60);
data0.put("free",60);
source[1] = data0;

result.setSource(source);

ChartSerieGroupVO[] seriesGroups = new ChartSerieGroupVO[1];

ChartSerieGroupVO serieGroup = new ChartSerieGroupVO(ChartTypes.table.getName(),"Espacio(Mb)");      

ChartAxiVO axis = new ChartAxiVO(20,true,"Espaço(Mb)");

serieGroup.setValueAxis(ejes);

ChartSerieVO[] series = new ChartSerieVO[4];

ChartSerieVO label = new ChartSerieVO("label","Item");
series[0] = label;

ChartSerieVO total = new ChartSerieVO("total","Espaço Total");
series[1] = total;

ChartSerieVO used = new ChartSerieVO("used","Espacio Utilizado");
series[2] = used;

ChartSerieVO free = new ChartSerieVO("free","Espacio Libre");
series[3] = free;

serieGroup.setSeries(series);
seriesGroups[0] = serieGroup;

result.setSeriesGroups(seriesGroups);

return this.buildResponse(result);