Índice

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 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, no Style Guide estamos liberando uma atualização dos plugins base do componente FLUIGC.chart.

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 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:

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 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:

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 charts. Exemplo

Breaking change: Propriedades removidas na estrutura do dataset.

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

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

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

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 propriedade legendTemplate. A lógica para personalizar a legenda pode ter mudado.

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 propriedade legendTemplate. A lógica para personalizar a legenda pode ter mudado.

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 propriedade legendTemplate. A lógica para personalizar a legenda pode ter mudado.

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 propriedade legendTemplate. A lógica para personalizar a legenda pode ter mudado.

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 propriedade legendTemplate. A lógica para personalizar a legenda pode ter mudado.