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);
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas