Facilita a criação de um JSON que representa um monitor gráfico no formato de velocímetro. Seu uso não é obrigatório, porém recomendado.

Métodos

Construtor

Método chamado durante a instanciação da classe. Sempre será o primeiro método invocado.

Parâmetros

Nome	Direção	Tipo	Descrição
ttVisaoMonitor	INPUT	Temp-Table	Temp-Table contendo as informações do monitor na visão em que está sendo carregado.

Exemplo de chamada

USING cdp.services.gestaoavista.*. //Definir no topo do programa

DEFINE VARIABLE GaugeBuilder AS GaugeBuilder NO-UNDO.    

GaugeBuilder = NEW  GaugeBuilder (INPUT TABLE ttVisaoMonitor).

setSize

Determina o tamanho que o componente assumirá em tela. Por padrão o tamanho é 305 pixels.

Parâmetros

Nome	Direção	Tipo	Descrição
Size	INPUT	DECIMAL	Tamanho que o componente deverá assumir

Exemplo de chamada

 GaugeBuilder:setSize(450).

setType

Determina qual tipo de velocímetro será renderizado, podendo ser:

Parâmetros

Nome

Direção

Tipo

Descrição

Type

INPUT

CHARACTER

Tipo de velocímetro. Opções:

full
semi
arch

Exemplo de chamada

GaugeBuilder:setType("arch").

setTickness

Altera a espessura do arco do velocímetro.

Parâmetros

Nome	Direção	Tipo	Descrição
ttSeries	INPUT	Temp-Table	Temp-Table contendo os registros das séries que irão compor o gráfico.

Exemplo de chamada

GaugeBuilder:setTickness(25).

setValue

Determina o valor que será exibido no meio do velocímetro e que servirá de base para o preenchimento do arco.

Parâmetros

Nome	Direção	Tipo	Descrição
value	INPUT	DECIMAL	Valor principal do velocímetro.

Exemplo de chamada

GaugeBuilder:setValue(85).

setMinValue

Determina o menor valor possível para o velocímetro, que será considerado o ponto de partida do arco.

Parâmetros

Nome	Direção	Tipo	Descrição
minValue	INPUT	DECIMAL	Menor valor do velocímetro. Se não for informado, será considerado 0.

Exemplo de chamada

GaugeBuilder:setMinValue(0).

setMaxValue

Determina o valor máximo para o velocímetro, que será considerado o ponto final do arco.

Parâmetros

Nome	Direção	Tipo	Descrição
maxValue	INPUT	DECIMAL	Valor final do arco.

Exemplo de chamada

GaugeBuilder:setMaxValue(200).

setLabel

Determina o texto que aparecerá logo abaixo do valor central do velocímetro.

Parâmetros

Nome	Direção	Tipo	Descrição
label	INPUT	CHARACTER	Valor do texto.

Exemplo de chamada

GaugeBuilder:setLabel("Label Exemplo").

setPrepend

Determina o texto que aparecerá na esquerda do label principal. Por exemplo, um $ para representar valores monetários.

Parâmetros

Nome	Direção	Tipo	Descrição
prepend	INPUT	CHARACTER	Valor do pré-texto.

Exemplo de chamada

GaugeBuilder:setPrepend("R$").

setAppend

Determina o texto que aparecerá na direita do label principal. Por exemplo, um sinal de %, km, kg etc.

Parâmetros

Nome	Direção	Tipo	Descrição
append	INPUT	CHARACTER	Valor do pós-texto.

Exemplo de chamada

GaugeBuilder:setAppend("KG").

setMargin

Atribui uma margem para o velocímetro, para afastá-lo das laterais do monitor.

Parâmetros

Nome	Direção	Tipo	Descrição
margin	INPUT	INTEGER	Valor da margem

Exemplo de chamada

GaugeBuilder:setMargin(10).

setValueStyle

Permite estilizar a aparência do valor principal do velocímetro. Aceita os estilos existentes no HTML. Recebe a temp-table ttEstilos, onde cada registro equivale a uma propriedade:

Parâmetros

Nome	Direção	Tipo	Descrição
ttEstilos	INPUT	TEMP-TABLE	Temp-table contendo as propriedades e seus respectivos valores.

ttEstilos

Campo	Tipo	Descrição
propriedade	CHARACTER	Nome da propriedade HTML
valor	CHARACTER	Valor (conteúdo) que a propriedade irá assumir

Exemplo de chamada

CREATE ttEstilos.
ASSIGN ttEstilos.propriedade = "color"
       ttEstilos.valor       = "#28ba62". //Troca a cor do label do velocímetro para um verde claro.

CREATE ttEstilos.
ASSIGN ttEstilos.propriedade = "font-weight"
       ttEstilos.valor       = "bold". //Faz com que o label fique em negrito.


GaugeBuilder:setValueStyle(INPUT TABLE ttEstilos).

setPrependStyle

Permite estilizar a aparência do pré-texto que aparece do lado esquerdo do label principal. Aceita os estilos existentes no HTML. Também recebe a temp-table ttEstilos, de forma semelhante ao método setValueStyle.

Exemplo de chamada

CREATE ttEstilos.
ASSIGN ttEstilos.propriedade = "color"
       ttEstilos.valor       = "#eb445a". //Troca a cor do prepend do velocímetro para vermelho.

CREATE ttEstilos.
ASSIGN ttEstilos.propriedade = "font-style"
       ttEstilos.valor       = "italic". //Faz com que o prepend fique em itálico.


GaugeBuilder:setPrependStyle(INPUT TABLE ttEstilos).

setLabelStyle

Permite estilizar a aparência do texto que aparece abaixo do valor principal. Aceita os estilos existentes no HTML. Também recebe a temp-table ttEstilos, de forma semelhante ao método setValueStyle.

Exemplo de chamada

CREATE ttEstilos.
ASSIGN ttEstilos.propriedade = "color"
       ttEstilos.valor       = "#eda900". //Troca a cor do label para amarelo.

CREATE ttEstilos.
ASSIGN ttEstilos.propriedade = "font-style"
       ttEstilos.valor       = "italic". //Faz com que o label fique em itálico.


GaugeBuilder:setLabelStyle(INPUT TABLE ttEstilos).

setThresholds

Define as sessões ou segmentos que irão dividir o velocímetro. Recebe a TEMP-TABLE ttEstagios, definida abaixo:

Parâmetros

Nome	Direção	Tipo	Descrição
ttEstagios	INPUT	TEMP-TABLE	Temp-table contendo os registros de cada estágio/sessão/segmento do velocímetro.

ttEstagios

Campo	Tipo	Descrição
valor-inicio	DECIMAL	Valor que define em qual ponto do velocímetro esse segmento irá começar.
cor	CHARACTER	Nome ou código HEX da cor que o segmento irá assumir.
opacidade	DECIMAL	Valor da opacidade do segmento, que pode variar entre 0 e 1. Quanto mais próxima de 1, mais sólida será a cor. Quanto mais próxima de 0, mais transparente.

Exemplo de chamada

CREATE ttEstagios.
ASSIGN ttEstagios.valor-inicio = 0
       ttEstagios.cor          = "#eb445a"
       ttEstagios.opacidade    = 0.2.              
    
CREATE ttEstagios.
ASSIGN ttEstagios.valor-inicio = 70
       ttEstagios.cor          = "#eda900"
       ttEstagios.opacidade    = 0.2.               

CREATE ttEstagios.
ASSIGN ttEstagios.valor-inicio = 85
       ttEstagios.cor          = "#28ba62"
       ttEstagios.opacidade    = 0.2.         

GaugeBuilder:setThresholds(INPUT TABLE ttEstagios).

setMarkers

Recebe as definições de marcadores através da TEMP-TABLE ttMarcadores, que são pequenas setas indicadoras plotadas acima do velocímetro e que podem conter um texto adicional.

Parâmetros

Nome	Direção	Tipo	Descrição
ttMarcadores	INPUT	TEMP-TABLE	Temp-table contendo os registros de marcador.

ttMarcadores

Campo	Tipo	Descrição
valor	DECIMAL	Define em qual valor do velocímetro o marcador será anexado.
cor	CHARACTER	Nome ou código HEX da cor que o marcador irá assumir.
tamanho	DECIMAL	Tamanho em pixels do marcador.
tipo	CHARACTER	Tipo do marcador, podendo ser: line: Formato de linha/pequeno risco; triangle: Formato de triângulo.
texto	CHARACTER	Texto que aparecerá acima do marcador.

Exemplo de chamada

{utp/ut-liter.i Baixo * }
CREATE ttMarcadores.
ASSIGN ttMarcadores.valor   = 0
       ttMarcadores.cor     = "#eb445a"
       ttMarcadores.tamanho = 5
       ttMarcadores.tipo    = "triangle"
       ttMarcadores.texto   = RETURN-VALUE + " (" + STRING(0) + ")". 
            
{utp/ut-liter.i Médio * }
CREATE ttMarcadores.
ASSIGN ttMarcadores.valor    = 60
       ttMarcadores.cor     = "#eda900"
       ttMarcadores.tamanho = 5
       ttMarcadores.tipo    = "triangle"
       ttMarcadores.texto   = RETURN-VALUE + " (" + STRING(60) + ")".

{utp/ut-liter.i Alto * }
CREATE ttMarcadores.
ASSIGN ttMarcadores.valor   = 85
       ttMarcadores.cor     = "#28ba62"
       ttMarcadores.tamanho = 5
       ttMarcadores.tipo    = "triangle"
       ttMarcadores.texto   = RETURN-VALUE + " (" + STRING(85) + ")".   

GaugeBuilder:setMarkers(INPUT TABLE ttMarcadores).

Exemplos de velocímetros utilizando marcadores do tipo linha e triângulo, juntamente com estágios diferentes:

createGauge

Método que transforma todos os dados das temp-tables e demais propriedades em um objeto JSON, já formatado seguindo o padrão utilizado pelo painel do Gestão à Vista. Esse JSON deverá ser retornado pela API de negócio para ser processado e apresentado ao usuário final. Só deve ser invocado depois que os dados do gráfico tenham sido carregados através dos métodos setValue, setLabel etc.

Parâmetros

Nome	Direção	Tipo	Descrição
oChartOutput	OUTPUT	JsonObject	Objeto JSON representando o gráfico que será apresentado ao usuário

Exemplo de chamada

PROCEDURE pi-get-monitor-data-chart:
    DEFINE INPUT  PARAMETER TABLE FOR ttVisaoMonitor.
    DEFINE OUTPUT PARAMETER oOutput AS JsonObject.   
    DEFINE OUTPUT PARAMETER TABLE FOR RowErrors.    

    <...Criação das temp-tables, chamada dos métodos de set...>

    oOutput = GaugeBuilder:createGauge(). 

END PROCEDURE.

Árvore de páginas

Classe Utilitária GaugeBuilder

Métodos

Construtor

setSize

setType

setTickness

setValue

setMinValue

setMaxValue

setLabel

setPrepend

setAppend

setMargin

setValueStyle

ttEstilos

setPrependStyle

setLabelStyle

setThresholds

ttEstagios

setMarkers

ttMarcadores

Exemplos de velocímetros utilizando marcadores do tipo linha e triângulo, juntamente com estágios diferentes:

createGauge