ECharts

O Web Framework permite a construção de gráficos por meio de uma integração com a biblioteca de gráficos ECharts. Gráficos podem ser criados em processos e relatórios por meio da classe ECharts ou em consultas automatizadas utilizando o tipo de visualização 'echarts'.

Como a API do Web Framework realiza apenas uma integração com a biblioteca ECharts, deve-se utilizar a documentação oficial do ECharts em https://www.echartsjs.com/en/index.html para ver os tipos e opções dos gráficos disponibilizados por essa biblioteca.

Atualmente é utilizada a versão 5.5.1 da biblioteca ECharts e periodicamente ela é atualizada em conjunto com as demais dependências do sistema. É importante ressaltar que versões futuras da biblioteca podem exigir que os gráficos criados tenham que ser revistos para se adequarem às alterações da API do ECharts. Por esse motivo, as atualizações desse componente são destacadas nas notas de liberação e deve-se ter uma atenção especial às atualizações do número principal da versão desse componente, como uma mudança da versão 4 para a 5.

Exemplos de utilização

Processos e relatórios

var ECharts = require('@nginstack/web-framework/lib/chart/ECharts');

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

Consultas automatizadas

{
  type: 'echarts',
  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.str('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 {
      title: {
        text: 'Usuários habilitados por status'
      },
      tooltip : {
        trigger: 'axis',
        axisPointer : {
          type : 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        title: 'Usuários por status',
        type: 'category',
        data: categories,
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {
        type: 'value',
        name: 'Quantidade',
        boundaryGap: ['0%', '5%']
      },
      series: [
        {
          name: 'Usuários',
          type: 'bar',
          data: data
        }
      ]
    };
  }
}