Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

Exemplo de chamada

Bloco de código
ChartBuilder GaugeBuilder:setSize(450).

setType

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

...

Exemplo de chamada

Bloco de código
ChartBuilderGaugeBuilder:setValue(85).

setMinValue

...

Exemplo de chamada

Bloco de código
ChartBuilderGaugeBuilder:setMinValue(0).

setMaxValue

...

Exemplo de chamada

Bloco de código
ChartBuilderGaugeBuilder:setMaxValue(200).

setLabel

...

Exemplo de chamada

Bloco de código
ChartBuilderGaugeBuilder:setLabel("Label Exemplo").

setPrepend

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


Parâmetros

NomeDireçãoTipo Descrição
prependINPUTCHARACTERValor do pré-texto.

Exemplo de chamada

Bloco de código
GaugeBuilder:setPrepend("R$").

setAppend

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


Parâmetros

NomeDireçãoTipo Descrição
appendINPUTCHARACTERValor do pós-texto.

Exemplo de chamada

Bloco de código
GaugeBuilder:setAppend("KG").

setMargin

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


Parâmetros

NomeDireçãoTipo Descrição
marginINPUTINTEGERValor da margem

Exemplo de chamada

Bloco de código
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

NomeDireçãoTipo Descrição
ttEstilosINPUTTEMP-TABLETemp-table contendo as propriedades e seus respectivos valores.

ttEstilos

CampoTipoDescrição
propriedadeCHARACTERNome da propriedade HTML
valorCHARACTERValor (conteúdo) que a propriedade irá assumir


Exemplo de chamada

Bloco de código
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

Bloco de código
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

Bloco de código
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

NomeDireçãoTipo Descrição
ttEstagiosINPUTTEMP-TABLETemp-table contendo os registros de cada estágio/sessão/segmento do velocímetro.

ttEstagios

CampoTipoDescrição
valor-inicioDECIMALValor que define em qual ponto do velocímetro esse segmento irá começar.
corCHARACTERNome ou código HEX da cor que o segmento irá assumir.
opacidadeDECIMALValor 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

Bloco de código
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

NomeDireçãoTipo Descrição
ttMarcadoresINPUTTEMP-TABLETemp-table contendo os registros de marcador.

ttMarcadores

CampoTipoDescrição
valorDECIMALDefine em qual valor do velocímetro o marcador será anexado.
corCHARACTERNome ou código HEX da cor que o marcador irá assumir.
tamanhoDECIMALTamanho em pixels do marcador.
tipoCHARACTER

Tipo do marcador, podendo ser:

  • line: Formato de linha/pequeno risco;
  • triangle: Formato de triângulo.
textoCHARACTER

Texto que aparecerá acima do marcador.

Exemplo de chamada

Bloco de código
{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:

Image AddedImage Added

createGauge

Método que transforma todos os dados das temp-tables ttSeries, ttCategorias e ttTags 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 setSeriessetValue, setCategories setLabel etc.


Parâmetros

NomeDireçãoTipo Descrição

oChartOutput

OUTPUTJsonObjectObjeto JSON representando o gráfico que será apresentado ao usuário

...

Bloco de código
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 = ChartBuilderGaugeBuilder:createChartcreateGauge(). 

END PROCEDURE.