Histórico da Página

...

Objetivo

...

Este guia tem por objetivo auxiliar os usuários a seguir o passo a passo necessário para identificação dos pontos onde é necessária a revisão e atualização do código, por conta da atualização de libs bibliotecas que tivemos, . Mais uma medida para reforçar ainda mais a segurança do Fluig.

Identificação do que precisa ser ajustado

...

Na versão 1.8.2 do Fluig <VALIDAR>, por conta de uma vulnerabilidade, liberamos no Style Guide uma atualização dos plugins base do componente FLUIGC.chart, que são o Chart.js e o Gauge.js.

Na versão 2.9.4 do Chart.js, algumas dessas propriedades foram alteradas ou removidas, enquanto outras ainda são suportadas com pequenas modificações. Abaixo estão as informações para cada propriedade.

Legenda de alterações

Breaking Change: Alteração significativa que pode impactar o código existente, geralmente modificando a interface da API. Pode causar problemas em casos específicos.

Feature (Recurso): Adição à API que normalmente não afeta o código existente. Introduz novas funcionalidades, mas há a possibilidade de interações negativas com o código existente.

Deprecated (Descontinuado): Recurso ou API ainda presente, mas seu uso é desencorajado. Pode ser removido em futuras atualizações de versões principais.

Breaking changes

...

Breaking Change: Gráfico LineBar removido. Agora utilize o gráfico Mixed.

O gráfico `chart.lineBar(data, options)` foi removido. Agora o gráfico `chart.mixed(data, options)` deve ser usado em seu lugar. Exemplo:

var chart = FLUIGC.chart('#MY_SELECTOR');
// call the mixed function
var mixedChart = chart.mixed(data, options);

Breaking Change: Somente um evento para todos os gráficos.

Agora, quando você clica em alguma sessão do gráfico, todos eles emitem um mesmo evento, chamado `fluig.chart.click`. Os eventos abaixo foram removidos:

• line: 'fluig.chart.line.click'
• bar: 'fluig.chart.vertical.click'
• radar: 'fluig.chart.radar.click'
• polarArea: 'fluig.chart.polar.click'
• pie: 'fluig.chart.pie.click'
• doughnut: 'fluig.chart.doughnut.click'
• gauge: 'fluig.chart.gauge.click'
• donut: 'fluig.chart.donut.click'
• lineBar: 'fluig.chart.lineBar.click'
• horizontalBar: 'fluig.chart.horizontal.click'

Exemplo:

$('YOUR_SELECTOR').on('fluig.chart.click', function(ev) {
  // Para saber qual é o chart, pegar pelo ev.chart.config.type
  console.log(ev.chart.config.type);
});

Breaking change: Nova estrutura de datasets para alguns gráficos

Os gráficos `polar`, `pie` e `doughnut` sofreram uma modificação em sua estrutura de datasets. O motivo foi para equalizar a estrutura de todos os gráficos. Exemplo:

// Estrutura antiga
var dataPolarOld = [{
  value: 300,
  label: 'bpm'
}, {
  value: 50,
  label: 'ecm'
}, {
  value: 100,
  label: 'social'
}];

// Estrutura nova
var dataPolarNew = {
  labels: ['bpm', 'ecm', 'social'],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100]
  }]
};

Breaking change: Propriedades removidas na estrutura do dataset.

A estrutura geral de datasets dos gráficos mudaram. As propriedades `fillColor`, `strokeColor`, `highlightFill` e `highlightStroke` foram removidas. Agora deve ser usado as propriedades `backgroundColor`, `borderColor`, `hoverBackgroundColor` e `hoverBorderColor`. Exemplo:

var dataPie = {
  labels: ['bpm', 'ecm', 'social'],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: ['#4CAF50', '#8BC34A', '#CDDC39'],
    hoverBackgroundColor: ['#45A049', '#7CB342', '#C0CA33'],
    borderColor: ['#4CAF50', '#8BC34A', '#CDDC39'],
    hoverBorderColor: ['#45A049', '#7CB342', '#C0CA33'],
  }]
};

Breaking change: Mudança para adicionar, remover ou atualizar dados nos gráficos.

Agora, para realizar qualquer alteração em um dado no gráfico, é necessário utilizar o código a seguir:

// Adiciona novos dados no gráfico
$('#btn-chart-line-add').on('click', function (e) {
  e.preventDefault();
  line.addData([40, 60], "August");
});

// Adiciona atualiza os dados no gráfico
$('#btn-chart-line-update').on('click', function (e) {
  e.preventDefault();
  line.data.datasets[0].data[2] = 50;
  line.update();
});

// Remove o último dado no gráfico
$('#btn-chart-line-remove').on('click', function (e) {
  e.preventDefault();
  line.removeData();
});

Alterações por gráfico:

Gráfico do tipo Line

Gráfico do tipo Bar ou Horizontal Bar

Gráfico do tipo Radar

Gráfico do tipo Polar

Gráfico do tipo Pie e Doughnut