Histórico da Página

...

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 estamos liberando 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. Aqui Abaixo estão as informações para cada propriedade.

...

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

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

...

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

• 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 de uso::

$('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` `polar`, `pie` e `doughnut` sofreram uma modificação em sua estrutura de datasets. O motivo foi para equalizar a estrutura de todos os chartsgrá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 dataset datasets dos charts gráficos mudaram. As propriedades `fillColor`, `strokeColor`, `highlightFill` e `highlightStroke` `fillColor`, `strokeColor`, `highlightFill` e `highlightStroke` foram removidas. Agora deve ser usado as propriedades `backgroundColor`, `borderColor`, `hoverBackgroundColor` e `hoverBorderColor`. Exemplo:

...

`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 já criado, é 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

• scaleShowGridLines: Removida. Para controlar as linhas de grade, agora você deve usar as configurações dentro de scales.
• scaleGridLineColor: Removida. Use as configurações dentro de scales.
• scaleGridLineWidth: Removida. Use as configurações dentro de scales.
• bezierCurve: Ainda Suportada. Por padrão, o gráfico de linha ainda usa curvas de Bezier. Se você deseja desativar, defina como false.
• bezierCurveTension: Ainda Suportada. Controla a tensão das curvas de Bezier. Mantenha, mas ajuste conforme necessário.
• pointDot: Removida. Use point dentro de elements em dataset para controlar os pontos.
• pointDotRadius: Removida. Use radius dentro de point em elements no nível do conjunto de dados.
• pointDotStrokeWidth: Removida. Use borderWidth dentro de point em elements no nível do conjunto de dados.
• pointHitDetectionRadius: Removida. Use hitRadius dentro de point em elements no nível do conjunto de dados.
• datasetStroke: Removida. Use borderColor dentro de datasets.
• datasetStrokeWidth: Removida. Use borderWidth dentro de datasets.
• datasetFill: Removida. Use fill dentro de datasets.
• legendTemplate: Removida. Não existe mais uma a propriedade legendTemplate. A lógica para personalizar a legenda pode ter mudadoagora deve ser feita na propriedade legend. Consulte a documentação para mais detalhes.

Gráfico do tipo Bar ou Horizontal Bar

• scaleBeginAtZero: Ainda Suportada. Pode ser configurada dentro de scales no eixo y, usando a propriedade beginAtZero.
• scaleShowGridLines: Removida. Use as configurações dentro de scales para controlar as linhas de grade.
• scaleGridLineColor: Removida. Use as configurações dentro de scales para definir a cor das linhas de grade.
• scaleGridLineWidth: Removida. Use as configurações dentro de scales para definir a largura das linhas de grade.
• barShowStroke: Removida. Use borderColor dentro de datasets para controlar se as barras têm uma borda.
• barStrokeWidth: Removida. Use borderWidth dentro de datasets para controlar a largura da borda das barras.
• barValueSpacing: Ainda Suportada. Pode ser configurada dentro de scales no eixo x, usando a propriedade barPercentage.
• barDatasetSpacing: Removida. A versão 2.9.4 usa barPercentage e categoryPercentage dentro de scales para controlar o espaçamento entre barras e conjuntos de dados.
• legendTemplate: Removida. Não existe mais uma a propriedade legendTemplate. A lógica para personalizar a legenda pode ter mudadoagora deve ser feita na propriedade legend. Consulte a documentação para mais detalhes.

Gráfico do tipo Radar

• scaleShowLine: Removida. Use as configurações dentro de scales para controlar a exibição das linhas do eixo.
• angleShowLineOut: Removida. Não está mais disponível na versão 2.9.4. Considere usar outras propriedades em scales ou gridLines para obter o efeito desejado.
• scaleShowLabels: Removida. Use as configurações dentro de scales para controlar a exibição de rótulos.
• scaleBeginAtZero: Ainda Suportada. Pode ser configurada dentro de scales no eixo y, usando a propriedade beginAtZero.
• angleLineColor: Removida. Use as configurações dentro de gridLines em scales para definir a cor das linhas de grade radiais.
• angleLineWidth: Removida. Use as configurações dentro de gridLines em scales para definir a largura das linhas de grade radiais.
• pointLabelFontFamily: Removida. Use as configurações dentro de ticks em scales para configurar a família da fonte.
• pointLabelFontStyle: Removida. Use as configurações dentro de ticks em scales para configurar o estilo da fonte.
• pointLabelFontSize: Removida. Use as configurações dentro de ticks em scales para configurar o tamanho da fonte.
• pointLabelFontColor: Removida. Use as configurações dentro de ticks em scales para configurar a cor da fonte.
• pointDot: Removida. Use point dentro de elements em dataset para controlar a exibição de pontos.
• pointDotRadius: Removida. Use radius dentro de point em elements no nível do conjunto de dados.
• pointDotStrokeWidth: Removida. Use borderWidth dentro de point em elements no nível do conjunto de dados.
• pointHitDetectionRadius: Removida. Use hitRadius dentro de point em elements no nível do conjunto de dados.
• datasetStroke: Removida. Use borderColor dentro de datasets.
• datasetStrokeWidth: Removida. Use borderWidth dentro de datasets.
• datasetFill: Removida. Use fill dentro de datasets.
• legendTemplate: Removida. Não existe mais essa a propriedade legendTemplate. A lógica para personalizar a legenda pode ter mudadoagora deve ser feita na propriedade legend. Consulte a documentação para mais detalhes.

Gráfico do tipo Polar

• scaleShowLabelBackdrop: Removida. O recurso de fundo para rótulos de escala foi removido.
• scaleBackdropColor: Removida. O fundo para rótulos de escala agora é controlado por backgroundColor em ticks dentro de scales.
• scaleBeginAtZero: Ainda Suportada. Pode ser configurada dentro de scales no eixo y, usando a propriedade beginAtZero.
• scaleBackdropPaddingY: Removida. O preenchimento vertical para o fundo dos rótulos de escala agora é configurado por padding em ticks dentro de scales.
• scaleBackdropPaddingX: Removida. O preenchimento horizontal para o fundo dos rótulos de escala agora é configurado por padding em ticks dentro de scales.
• scaleShowLine: Removida. Use as configurações dentro de scales para controlar a exibição das linhas do eixo.
• segmentShowStroke: Removida. A propriedade de controle de traçado de segmento foi removida. O controle de borda agora é feito usando borderColor dentro de datasets.
• segmentborderColor: Removida. Use borderColor dentro de datasets para controlar a cor da borda do segmento.
• segmentStrokeWidth: Removida. Use borderWidth dentro de datasets para controlar a largura da borda do segmento.
• animationSteps: Removida. A animação agora é controlada por animation em options.
• animationEasing: Removida. Use animation em options para controlar a função de easing.
• animateRotate: Removida. Use animate em options para controlar a animação de rotação.
• animateScale: Removida. Use animate em options para controlar a animação de escala.
• legendTemplate: Removida. Não existe mais uma a propriedade legendTemplate. A lógica para personalizar a legenda pode ter mudadoagora deve ser feita na propriedade legend. Consulte a documentação para mais detalhes.

Gráfico do tipo Pie e Doughnut

• segmentShowStroke: Removida. A propriedade de controle de traçado de segmento foi removida. O controle de borda agora é feito usando borderColor dentro de datasets.
• segmentborderColor: Removida. Use borderColor dentro de datasets para controlar a cor da borda do segmento.
• segmentStrokeWidth: Removida. Use borderWidth dentro de datasets para controlar a largura da borda do segmento.
• percentageInnerCutout: Ainda Suportada. Pode ser configurada dentro de options no conjunto de dados, usando a propriedade cutoutPercentage.
• animationSteps: Removida. A animação agora é controlada por animation em options.
• animationEasing: Removida. Use animation em options para controlar a função de easing.
• animateRotate: Removida. Use animate em options para controlar a animação de rotação.
• animateScale: Removida. Use animate em options para controlar a animação de escala.
• legendTemplate: Removida. Não existe mais uma a propriedade legendTemplate. A lógica para personalizar a legenda pode ter mudadoagora deve ser feita na propriedade legend. Consulte a documentação para mais detalhes.