Histórico da Página
Índice
Índice | ||||||
---|---|---|---|---|---|---|
|
Objetivo
O objetivo deste guia é apresentar ao desenvolvedor informações sobre a visualização de gráficos na plataforma Fluig.
Visualizador de gráficos
O Visualizador de Gráficos gráficos tem como objetivo principal permitir que outras aplicações possam exibir gráficos customizados dentro do da plataforma Fluig. Para isto, basta a aplicação registrar seu serviço de gráfico no Fluig e disponibilizar dois métodos rest. Um REST: um que informará os parâmetros de configuração do gráfico e outro que disponibilizará os dados.
O Visualizador de Gráficos permite exibição em formato, nos formatos de tabela, gráfico de coluna e gráfico de pizza.
Passos necessários
1. Registrar o serviço de dados no TOTVS Fluig Plataforma.
Para registrar o serviço de dados do gráfico basta enviar uma mensagem assíncrona para o Fluig.
...
O objeto ChartServiceVO, disponível no pacote com.totvs.technology.wcm.common.chart, é composto dos seguintes elementos:
- String id: código do serviço de gráfico
- String description: descrição do serviço de gráfico
- String ParametersRest: URL do serviço
...
- REST que retornará os parâmetros
- String dataRest: URL do serviço
...
- REST que retornará os dados do gráfico
O Visualizador de Gráficos tem como objetivo principal permitir a outras aplicações, exibirem gráficos customizados de forma simples dentro do Fluig. Para isto, basta a aplicação registrar seu serviço de gráfico no Fluig e disponibilizar dois métodos rest. Um que informará os parâmetros de configuração do gráfico e outro que disponibilizará os dados.
O Visualizador de Gráficos permite exibição em formato, tabela, gráfico de coluna e gráfico de pizza.
1. Registrar o serviço de dados no Fluig.
Para isto, basta enviar uma mensagem assíncrona pro fluig, com o evento “REGISTER_CHART_SERVICE” , passando um ChartServiceVO com os dados do seu serviço.
O ChartServiceVO (pacote com.totvs.technology.wcm.common.chart) é composto dos seguintes elementos,
String id - > código do serviço de Gráfico
String description -> Descrição do serviço de Gráfico
String ParametersRest -> URL do serviço rest que retornará os parâmetros;
String dataRest -> URL do serviço rest que retornará os dados do gráfico;
Exemplo:
...
Exemplo:
Bloco de código | ||||
---|---|---|---|---|
| ||||
ChartServiceVO ecm1 = new ChartServiceVO("ECM1", "ECM - Volumes: Espaço Utilizado (Por Volume em %)"); |
...
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 precisa ser executado cada vez que aplicação é deployada, ou seja, cada vez que
...
a plataforma Fluig subir. Para isto sugerimos que seja criado um servlet
...
em sua aplicação com a opção
...
loadOnStartup = 1, que se encarregará de realizar esta tarefa.
...
2.
...
Serviços de
...
Parâmetros
Este serviço rest REST deverá retornar uma lista de ChartParameterVO, que conterá os parâmetros que seu serviço de dados precisará para fornecer os dados do gráficos. Com base neste serviço o a plataforma Fluig construirá a tela de configuração.
O ChartParameterVO (pacote com.totvs.technology.wcm.common.chart) é composto dos seguintes elementos,:
- int code id
...
- : código numérico sequencial que será usado para busca dos dados posteriormente
- String title
...
- : nome do campo como aparecerá na tela
- String type
...
- : tipo de campo (ChartParameterVO.TYPE_STRING, ChartParameterVO.TYPE_NUMBER, ChartParameterVO.TYPE_DATA ou ChartParameterVO.TYPE_BOOLEAN)
- String AllowedList
...
- : se o campo for tipo string,
...
- podem ser
...
- informadas as opções para o usuário selecionar em uma lista.
...
- Estas opções devem ser separadas por “;”
...
- boolean multipleSelection
...
- : true/false, caso permita ou não seleção múltipla se o AllowedList esteja em uso
...
- String value
...
- : Valor inicial se existir
...
Exemplo:
Bloco de código | ||||
---|---|---|---|---|
| ||||
List<ChartParameterVO> params = new ArrayList<>(); |
...
ChartParameterVO param1 = new ChartParameterVO(); |
...
param1.setCode(1); |
...
param1.setTitle("Código do Item"); |
...
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("Exibir somente itens ativos"); |
...
param2.setType(ChartParameterVO.TYPE_BOOLEAN); |
...
params.add(param2); |
...
return params; |
...
3.
...
Serviço de
...
Dados
Este O serviço rest REST deverá retornar uma ChartVOum ChartVO, com os dados para exibição do gráfico.
O ChartVO (pacote com.totvs.technology.wcm.common.chart) é composto dos seguintes elementos,:
- String title
...
- : título que será exibido no gráfico
- String description
...
- : descrição do gráfico
- String type
...
- : tipo do gráfico (ChartTypes.column.getName(), ChartTypes.pie.getName(), ChartTypes.table.getName()
- Map<String, Object>[] source
...
- : dados do gráfico
...
- ChartCategoryVO category
...
- : categorias
- ChartSerieGroupVO[] seriesGroups
...
- : grupos de séries
Deck of Cards | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|
...
|