Highcharts

O Web Framework possui integração com a biblioteca de gráficos Highcharts. Ela pode ser utilizada diretamente em processos e relatórios por meio da classe Highcharts.Chart ou em visualizações de consultas automatizadas utilizando o tipo ‘highcharts’.

Importante: o Web Framework também possui integração com a biblioteca de código aberto ECharts, uma alternativa ao Highcharts, sem custos de licenciamento.

Configuração

A biblioteca Highcharts requer a aquisição de uma licença para uso comercial e por esse motivo a integração com ela é desativada por padrão pelo Web Framework.

Após a aquisição da licença, o sistema pode ser configurado para utilizar a biblioteca diretamente da CDN oferecida pela Highcharts ou opcionalmente ela pode ser gravada na Virtual File System para permitir o seu uso sem exigir uma conexão com a Internet.

Seguem as instruções para cada cenário de uso. Os passos indicados devem ser preferencialmente realizados na base de desenvolvimento com o modo de customização ativo, permitindo que essa configuração possa ser enviada para as bases de homologação e produção por meio dos processos de atualização do sistema.

CDN (recomendado)

1. Crie o arquivo /Configurações/Web Framework/Highcharts/9900 Custom.config.
2. Adicione a configuração abaixo, indicando a versão licenciada:

   this.highchartsUrl = 'https://code.highcharts.com/<MAJOR>.<MINOR>/highcharts.js';
   this.moduleUrls = [
       'https://code.highcharts.com/<MAJOR>.<MINOR>/modules/exporting.js'    
   ];
   

3. Informe outros módulos da biblioteca caso eles sejam utilizados em gráficos específicos.

Veja https://code.highcharts.com/ para mais detalhes sobre as URLs disponíveis.

Virtual File System

1. Realize o download da biblioteca para um diretório local.

2. Crie o diretório /products/Custom/resources/highcharts.

3. Importe os arquivos contidos no diretório code do download do Highcharts para o diretório criado na Virtual File System. Para isso, pode ser utilizado o processo Desenvolvimento > Virtual File System > Importar arquivos.

4. Crie o arquivo /Configurações/Web Framework/Highcharts/9900 Custom.config.

5. Adicione a configuração abaixo, alterando as chaves da Virtual File System para os arquivos importados:

   this.highchartsUrl = _CHAVE_DO_ARQUIVO_HIGHCHARTS_JS_;
   this.moduleUrls = [
       _CHAVE_DO_ARQUIVO_MODULES_EXPORTING_JS_
   ];
   

Caso utilize o Highcharts 3 ou inferior, informe também a URL do adaptador para tornar o Highcharts independente do uso do jQuery.

```js
this.standaloneAdapterModuleUrl = _CHAVE_DO_ARQUIVO_STANDALONE_ADAPTER_JS_;
``` 

Utilização

Após a configuração ter sido realizada, as APIs Highcharts.Chart e HighchartsVisualization poderão ser utilizadas nos processos, relatórios e consultas automatizadas do sistema. Seguem exemplos de uso.

Processos e relatórios

this.interaction('chart', function () {
  const chart = new Highcharts.Chart({
    width: '500px',
    height: '300px',
    chart: {
      defaultSeriesType: 'bar'
    },
    title: {
      text: 'Requisitos por time'
    },
    xAxis: {
      categories: ['OUT', 'NOV', 'DEZ']
    },
    yAxis: {
      title: {
        text: 'Requisitos por sprint'
      }
    },
    series: [
      {
        name: 'Framework',
        data: [10, 20, 40]
      },
      {
        name: 'Engine',
        data: [10, 27, 30]
      }
    ]
  });
  this.write(chart);
});  

Consultas automatizadas

{
  type: 'highcharts',
  dataSourceQuery: {
    dataSource: -1891504224, // Usuários habilitados.ids
    filters: [
      {name: "xValidity_START"},
      {name: "xValidity_END"}
    ],
    columns: [
      {name: "U_iKey"},
      {name: "U_iStatus.iName"}
    ]
  },
  filters: [
    {name: "xValidity_START", label: "Data inicial", required: true},
    {name: "xValidity_END", label: "Data final", required: true}
  ],
  onGetOptions: function (dsv, ds) {
    const countByStatus = {};
    for (ds.first(); !ds.eof; ds.next()) {
      const status = ds.u_istatus_iname;
      const count = countByStatus[status] || 0;
      countByStatus[status] = count + 1;
    }
    const categories = [];
    const data = [];
    Object.keys(countByStatus).forEach(function (status) {
      categories.push(status);
      data.push(countByStatus[status]);
    });
    return {
      chart: {
        defaultSeriesType: 'column'
      },
      title: {
        text: dsv.title
      },
      xAxis: {
        title: 'Usuários por status',
        categories: categories
      },
      yAxis: {
        title: {
          text: 'Quantidade'
        }
      },
      series: [
        {
          name: 'Usuários',
          data: data
        }
      ]
    }
  }
}