Por: @hugoc
Publicado em: 2018-07-31

Gráficos Javascript

Com o avanço do desenvolvimento dos produtos da iTFLEX, identificamos a necessidade do desenvolvimento de relatórios e utilização de gráficos, para que com isso os mesmos se tornem mais explicativos.

Em cima da necessidade observada, foi realizada uma pesquisa nas bibliotecas disponíveis no mercado e em cima da escolhida foi desenvolvido um protótipo para melhor entendimento.

A Pesquisa

Nessa etapa foi estudado a possibilidade de uso de bibliotecas open sources disponíveis no mercado e foi levado em conta os seguintes pontos:

  • integração com o framework utilizado (VueJs);
  • facilidade de uso;
  • facilidade de customização;

A biblioteca escolhida para estudo aprofundado e criação do protótipo foi a vue-chartjs, que usa como base a chartjs aonde foram estudas as costumizações.

Como usar

Para o uso da biblioteca são passados dois parâmetros data (dados) e options (opções) sendo esse opcional. Ex.:

mounted () {
  this.renderChart(data, options)
}

O parâmetro de options (opções)

Você pode sobrescrever as options padrão do gráfico. Basta passar o objeto options como segundo parâmetro do método de renderização.

Para saber como customizar as options basta utilizar a documentação fornecida pelo chartjs. Ex.:

{
  scales: {
    xAxes: [
      {
        display: true,
        gridLines: {
          display: true,
        },
      },
    ],
    yAxes: [
      {
        display: true,
        gridLines: {
          display: true,
        },
      },
    ],
  },
  tooltips: {
    mode: 'index',
  },
  responsive: true,
  maintainAspectRatio: false,
}

O parâmetro de data (dados)

O objeto data é obrigatório, pois nele deve constar os valores, labels e cores utilizadas no gráfico, o mesmo é dividido entre a listagem das labels e dos datasets. Ex.:

{
  labels: []
  datasets: []
}

A lista de labels deve ser string. Ex.:

labels: ['Janeiro', 'fevereiro']

A lista de dataset deve conter os dados a serem utilizados e cores. O formato dos dados depende do gráfico utilizado

Gráfico em barras. Ex.:

  • cada objeto gera uma barra para cada labels passada, utilizando os valores passados no data, o numero de dados deve ser o mesmo de labels;
  • uma label para cada objeto do dataset, utilizada para identicar o conjunto de barras na legenda;
  • as opções de coreas mais utilizada:  backgroundColor: cor de fundo; borderColor: cor da borda;
dataset: [
  {
    label: 'Data 1',
    backgroundColor: 'rgba(121,22,179,0.1)',
    borderColor: '#673ab7',
    data: [40, 20],
  },
  {
    label: 'Data 2',
    backgroundColor: 'rgba(75,192,192,0.1)',
    borderColor: '#00c853',
    data: [20, 40],
  },
],

Gráfico em linha. Ex.:

  • cada objeto gera uma linha e para cada labels passada é adicionado um ponto, utilizando os valores passados no data, o numero de dados deve ser o mesmo de labels;
  • uma label para cada objeto do dataset, utilizada para identicar a linha na legenda;
  • as opções de coreas mais utilizada:  backgroundColor: cor de fundo abaixo da linha; borderColor: cor da linha; pointBackgroundColor: cor de fundo do ponto (opcional); pointBorderColor: cor da borda do fundo (opcional);
dataset: [
  {
    label: 'Data 1',
    backgroundColor: 'rgba(121,22,179,0.1)',
    pointBackgroundColor: '#FFFFFF',
    borderColor: '#673ab7',
    pointBorderColor: '#673ab7',
    data: [40, 20],
  },
  {
    label: 'Data 2',
    backgroundColor: 'rgba(75,192,192,0.1)',
    pointBackgroundColor: '#FFFFFF',
    borderColor: '#00c853',
    pointBorderColor: '#00c853',
    data: [20, 40],
  },
],

Gráfico em pizza. Ex.:

  • deve ser passado apenas um objeto gerando uma pizza e cada fatia e gerada proporcionalmente utilizando os valores passados no data, o numero de dados deve ser o mesmo de labels;
  • as labels passada são utilizada ao passar o mouse em cima de cada fatia;
  • as opções de cores mais utilizada:  cada uma das cores são utilizadas em apenas uma fatia da pizza utilizando o mesmo index do data backgroundColor: lista de cores de fundo, ; borderColor: lista de cores borda; hoverBorderColor: lista de cores borda ao passar mouse em cima (opcional); hoverBackgroundColor: lista de cores fundo ao passar mouse em cima (opcional);
dataset: [
  {
    data: [40, 20, 30],
    backgroundColor: [
      'rgba(121,22,179,0.6)',
      'rgba(75,192,192,0.6)',
      'rgba(215,44,44,0.6)',
    ],
    hoverBackgroundColor: ['#673ab7', '#00c853', '#FF0000'],
  },
],

Usando o vue-chartjs sem nenhuma customização das options. Uso de um gráfico de barras. Ex.:

import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: 'rgba(121,22,179,0.1)',
          borderColor: '#673ab7',
          data: [40, 20, 12]
        }
      ]
    })
  }
}

Para mais gráficos utilizar a documentação do vue-chartjs

Solução Proposta

Após ser feito um estudo em cima da biblioteca escolhida, foi entendido que além da aplicação da mesma, seria preciso serem criados componentes para facilitar o desenvolvimento Componentes que podem ser usados com tema padrão (pré definido na hora da criação) e podendo também passar temas personalizados

Parâmetros:

  • title: Título do card do gŕafico
  • data: dados e opções de cada gráfico
  • options: (opcional) opções de configuração geral do gŕafico
  • xlabel: título da linha horizontal (opcional, apenas para barras e linha)
  • ylabel: título da linha vertical (opcional, apenas para barras e linha)
  • width: largura do card (opcional)

Utilização do parâmetro data, deve conter:

  • labels: lista de títulos, um para cada grupo de dados  Obs.: para gráfico de pizza são usada ao passar mouse em cima  
  • datasets: lista de objets de configuração dentro de cada objeto deve conter:  data: lista de valores, um para cada grupo de dados label: título de cada configuração (opcional, apenas para barras e linha)  
  • configuração de cores  são as mesmas utilizadas no componente principal todas as opções de cores são opcionais, até cinco cores são geradas automaticamente dentro dos componentes seguindo uma sequência, são utilizadas em cima do index da lista de dados  

Uso dos componentes

Componente de gráfico em barras. Ex.:

imd-bar-chart-default(
  title="Gráfico barras",
  :data="barData",
  xlabel="Meses",
  ylabel="Valores"
)

computed: {
  barData() {
    return {
      labels: [
        'Janeiro',
        'Fevereiro',
      ],
      datasets: [
        {
          label: 'Data 1',
          backgroundColor: '#673ab7',
          data: [40, 20],
        },
        {
          label: 'Data 2',
          data: [20, 40],
        },
      ],
    }
  },
},

Componente de gráfico em linha. Ex.:

imd-line-chart-default(
  title="Gráfico linha",
  :data="lineData",
  xlabel="Meses",
  ylabel="Horas"
)

computed: {
  lineData() {
    return {
      labels: [
        'Janeiro',
        'Fevereiro',
      ],
      datasets: [
        {
          label: 'Data 1',
          backgroundColor: 'rgba(255, 0, 255, 0.1)',
          pointBackgroundColor: '#FFFFFF',
          borderColor: '#FF00FF',
          pointBorderColor: '#FF00FF',
          data: [40, 20],
        },
        {
          label: 'Data 2',
          data: [20, 40],
        },
      ],
    }
  },
},

Componente de gráfico em pizza. Ex.:

imd-pie-chart-default(
  title="Gráfico Pizza",
  :data="pieData",
  width="350"
)
  • Exemplo passando cores:
computed: {
  pieData() {
    return {
      labels: ['Janeiro', 'Fevereiro'],
      datasets: {
        data: [40, 20],
        backgroundColor: [
          'rgba(121,22,179,0.6)',
          'rgba(75,192,192,0.6)',
        ],
        hoverBackgroundColor: ['#673ab7', '#00c853'],
      },
    }
  },
},
  • Exemplo usando cores padrões:
computed: {
  pieData() {
    return {
      labels: ['Janeiro', 'Fevereiro'],
      datasets: {
        data: [40, 20],
      },
    }
  },
},

Copyright © iTFLEX Tecnologia Ltda 2019