...
| Índice |
|---|
| maxLevel | 4 |
|---|
| outline | true |
|---|
| exclude | .*ndice |
|---|
| style | none |
|---|
|
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 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.
...
Deprecated (Descontinuado): Recurso ou API ainda presente, mas seu uso é desencorajado. Pode ser removido em futuras atualizações de versões principais.Alterações gerais
Breaking changes
...
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:
| Bloco de código |
|---|
| language | js |
|---|
| theme | RDark |
|---|
| firstline | 1 |
|---|
| linenumbers | true |
|---|
|
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`fluig.chart.click`click`. Os eventos abaixo foram depreciadosremovidos:
- 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:
| Bloco de código |
|---|
| language | js |
|---|
| theme | RDark |
|---|
| firstline | 1 |
|---|
| linenumbers | true |
|---|
|
$('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:
| Bloco de código |
|---|
| language | js |
|---|
| theme | RDark |
|---|
| firstline | 1 |
|---|
| linenumbers | true |
|---|
|
// Estrutura antiga |
...
...
...
...
...
...
...
...
...
...
...
...
...
labels: ['bpm', 'ecm', 'social'], |
...
...
label: 'My First Dataset', |
...
...
...
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``backgroundColor`, `borderColor`, `hoverBackgroundColor` e `hoverBorderColor`. Exemplo:
| Bloco de código |
|---|
| language | js |
|---|
| theme | RDark |
|---|
| firstline | 1 |
|---|
| linenumbers | true |
|---|
|
var dataPie = { |
...
labels: ['bpm', 'ecm', 'social'], |
...
...
label: 'My First Dataset', |
...
...
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:
| Bloco de código |
|---|
| language | js |
|---|
| theme | RDark |
|---|
| firstline | 1 |
|---|
| linenumbers | true |
|---|
|
// Adiciona novos dados no gráfico |
...
$('#btn-chart-line-add').on('click', function (e) { |
...
...
line.addData([40, 60], "August"); |
...
...
// Adiciona atualiza os dados no gráfico |
...
$('#btn-chart-line-update').on('click', function (e) { |
...
...
line.data.datasets[0].data[2] = 50; |
...
...
...
// Remove o último dado no gráfico |
...
$('#btn-chart-line-remove').on('click', function (e) { |
...
...
...
Alterações por gráfico:
Gráfico do tipo Line
| Propriedade | Situação | Orientação |
|---|
| scaleShowGridLines |
...
...
| Para controlar as linhas de grade, agora você deve usar as configurações dentro de scales. |
| scaleGridLineColor |
...
...
| Use as configurações dentro de scales. |
| scaleGridLineWidth |
...
...
| Use as configurações dentro de scales. |
...
| pointDot | Removida | Use point dentro de elements em dataset para controlar os pontos. |
| pointDotRadius |
...
...
| Use radius dentro de point em elements no nível do conjunto de dados. |
| pointDotStrokeWidth |
...
...
| Use borderWidth dentro de point em elements no nível do conjunto de dados. |
| pointHitDetectionRadius |
...
...
| Use hitRadius dentro de point em elements no nível do conjunto de dados. |
| datasetStroke |
...
...
| Use borderColor dentro de datasets. |
...
| Use fill dentro de datasets. |
| legendTemplate |
...
...
...
| a propriedade legendTemplate. A lógica para personalizar a legenda |
...
| agora deve ser feita na propriedade legend. Consulte a documentação para mais detalhes. |
Gráfico do tipo Bar ou Horizontal Bar
...
| Propriedade | Situação | Orientação |
|---|
| scaleShowGridLines | Removida | Use as configurações dentro de scales para controlar as linhas de grade. |
| scaleGridLineColor |
...
...
| Use as configurações dentro de scales para definir a cor das linhas de grade. |
| scaleGridLineWidth |
...
...
| Use as configurações dentro de scales para definir a largura das linhas de grade. |
| barShowStroke |
...
...
| Use borderColor dentro de datasets para controlar se as barras têm uma borda. |
| barStrokeWidth |
...
...
| Use borderWidth dentro de datasets para controlar a largura da borda das barras. |
...
| 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 |
...
...
...
| a propriedade legendTemplate. A lógica para personalizar a legenda |
...
| agora deve ser feita na propriedade legend. Consulte a documentação para mais detalhes. |
Gráfico do tipo Radar
| Propriedade | Situação | Orientação |
|---|
| scaleShowLine |
...
...
| Use as configurações dentro de scales para controlar a exibição das linhas do eixo. |
| angleShowLineOut |
...
...
| 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 |
...
...
| Use as configurações dentro de scales para controlar a exibição de rótulos. |
...
| angleLineColor | Removida | Use as configurações dentro de gridLines em scales para definir a cor das linhas de grade radiais. |
| pointLabelFontFamily |
...
...
...
| Use as configurações dentro de ticks em scales para configurar a família da fonte. |
| pointLabelFontStyle |
...
...
| Use as configurações dentro de ticks em scales para configurar o estilo da fonte. |
| pointLabelFontSize |
...
...
| Use as configurações dentro de ticks em scales para configurar o |
...
| estilo da fonte. |
| pointLabelFontColor |
...
...
| Use as configurações dentro de ticks em scales para configurar a cor da fonte. |
| pointDot |
...
...
| Use point dentro de elements em dataset para controlar a exibição de pontos. |
| pointDotRadius |
...
...
| Use radius dentro de point em elements no nível do conjunto de dados. |
| pointDotStrokeWidth |
...
...
| Use borderWidth dentro de point em elements no nível do conjunto de dados. |
| pointHitDetectionRadius |
...
...
| Use hitRadius dentro de point em elements no nível do conjunto de dados. |
| datasetStroke |
...
...
| Use borderColor dentro de datasets. |
| datasetStrokeWidth |
...
...
| Use borderWidth dentro de datasets. |
| datasetFill |
...
...
| Use fill dentro de datasets. |
| legendTemplate |
...
...
...
| a propriedade legendTemplate. A lógica para personalizar a legenda |
...
| agora deve ser feita na propriedade legend. Consulte a documentação para mais detalhes. |
Gráfico do tipo Polar
| Propriedade | Situação | Orientação |
|---|
| scaleShowLabelBackdrop |
...
...
| O recurso de fundo para rótulos de escala foi removido. |
| scaleBackdropColor |
...
...
| O fundo para rótulos de escala agora é controlado por backgroundColor em ticks dentro de scales. |
...
| scaleBackdropPaddingY | Removida | O preenchimento vertical para o fundo dos rótulos de escala agora é configurado por padding em ticks dentro de scales. |
| scaleBackdropPaddingX |
...
...
| O preenchimento horizontal para o fundo dos rótulos de escala agora é configurado por padding em ticks dentro de scales. |
| scaleShowLine |
...
...
| Use as configurações dentro de scales para controlar a exibição das linhas do eixo. |
| segmentShowStroke |
...
...
| A propriedade de controle de traçado de segmento foi removida. O controle de borda agora é feito usando borderColor dentro de datasets. |
| segmentborderColor |
...
...
| Use borderColor dentro de datasets para controlar a cor da borda do segmento. |
| segmentStrokeWidth |
...
...
| Use borderWidth dentro de datasets para controlar a largura da borda do segmento. |
| animationSteps |
...
...
| A animação agora é controlada por animation em options. |
| animationEasing |
...
...
| Use animation em options para controlar a função de easing. |
| animateRotate |
...
...
| Use animate em options para controlar a animação de rotação. |
| animateScale |
...
...
| Use animate em options para controlar a animação de escala. |
| legendTemplate |
...
...
...
| a propriedade legendTemplate. A lógica para personalizar a legenda |
...
| agora deve ser feita na propriedade legend. Consulte a documentação para mais detalhes. |
Gráfico do tipo Pie e Doughnut
| Propriedade | Situação | Orientação |
|---|
| segmentShowStroke |
...
...
| A propriedade de controle de traçado de segmento foi removida. O controle de borda agora é feito usando borderColor dentro de datasets. |
| segmentborderColor |
...
...
| Use borderColor dentro de datasets para controlar a cor da borda do segmento. |
| segmentStrokeWidth |
...
...
| 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 |
...
...
| Use animation em options para controlar a função de easing. |
| animateRotate |
...
...
| Use animate em options para controlar a animação de rotação. |
| animateScale |
...
...
| Use animate em options para controlar a animação de escala. |
| legendTemplate |
...
...
...
| a propriedade legendTemplate. A lógica para personalizar a legenda |
...
| agora deve ser feita na propriedade legend. Consulte a documentação para mais detalhes. |