Histórico da Página
...
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. |
Bloco de código | ||||
---|---|---|---|---|
| ||||
{
"altura": number,
"categorias": [
"string"
],
"series": [
{
"color": "string",
"data": number,
"label": "string",
"tooltip": "string",
"type": "PoChartType (line, pie, bar, column, donut)"
}
],
"tags": [
{
"colorTexto": "string",
"icone": "string",
"texto": "string",
"colorTag": "string"
}
]
} |
Categorias
O objeto JSON será construído através da classe utilitária ChartBuilder, que utiliza as seguintes temp-tables:
ttTags(opcional)
Temp-table com as definições das PO-TAGS que serão exibidas abaixo do título do monitor.
Propriedade na temp-table | Descrição | SERIALIZE-NAME (JSON) |
---|---|---|
valor | Texto a ser exibido na tag | texto |
cor-texto (opcional) | Cor do texto da tag. Aceita os padrões do PO-UI, como “color-01”, o nome da cor (blue, red) ou o código hexadecimal. | colorTexto |
cor-tag (opcional) | Cor da tag. Aceita os padrões do PO-UI, como “color-01”, o nome da cor (blue, red) ou o código hexadecimal. | colorTag |
icone (opcional) | Aceita os ícones conforme https://po-ui.io/guides/icons. | icone |
ttCategorias
Define os nomes das categorias que serão plotadas no eixo X do gráfico caso seja do tipo colunas, ou então nos eixos Y do grid de gráficos dos tipos barras e linhasArray de strings que conterá as categorias do gráfico. Para maiores informações, consulte a documentação da propriedade categories do PO-CHART.
Series
Propriedade na temp-table | Descrição |
---|---|
Nome | Nome da categoria. |
ttSeries
São Array com os objetos de série do gráfico, que representam as colunas/fatias/linhas, conforme o tipo de gráfico. Possui as mesmas propriedades do objeto Series do PO-CHART.
...
Propriedade | Descrição |
---|---|
color (opcional) | Cor da série do gráfico, podendo ser o nome da cor ou código hexadecimal. |
data | Valor da série. Para gráficos do tipo pie ou donut, deve ser um valor decimal. Para os gráficos bar, column ou line, será um Array de decimais. |
labeltitulo | Nome da série. |
texto-tooltip (opcional) | Texto que aparecerá ao passar o mouse sobre a série. |
type tipo (opcional) | Tipo da série. |
Altura (opicional)
Altura que o gráfico terá dentro do widget.
Tags (opcional)
Array contendo objetos que se tornarão PO-TAGS, que pode ser usado para exibir dados importantes e concisos de forma compacta. As tags ficarão abaixo dos headers, se existirem.
...
, podendo ser: pie (pizza), donut (rosca), bar (barras), column (colunas), line (linha). |
Altura (opcional)
Altura que o gráfico terá dentro do widget. Para atribuir a altura, utilize o método setHeight() do ChartBuilder.
Depois de criar as temp-tables necessárias na aplicação, utilizamos a classe ChartBuilder para gerar o gráficoPara auxiliar na criação do JSON de retorno, pode ser utilizada a classe ChartBuilder, conforme abaixo:
Bloco de código | ||
---|---|---|
| ||
USING cdp.services.gestaoavista.*. //A classe ChartBuilder está definida aqui.
DEFINE VARIABLE ChartBuilder AS ChartBuilder NO-UNDO.
// Instanciar a classe passando como parâmetro a ttVisaoMonitor, que contém as informações do monitor e visão que estão sendo processados nesse instante
ChartBuilder = NEW ChartBuilder(INPUT TABLE ttVisaoMonitor).
/* Depois que todas as entidades estão criadas, basta setá-las no objeto ChartBuilder */
ChartBuilder:setTags(INPUT TABLE ttTags).
ChartBuilder:setSeries(INPUT TABLE ttSeries).
ChartBuilder:setCategories(INPUT TABLE ttCategorias).
ChartBuilder:setHeight(290).
/* Chama o método para criar e devolver o gráfico completo e guarda o resultado na variável oOutput */
oOutput = ChartBuilder:createChart().
DELETE OBJECT ChartBuilder. |
...