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:
|
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:
|
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.