rodolpho
233 lines
13 KiB
Markdown
233 lines
13 KiB
Markdown
---
|
||
title: Atualização para a nova versão do FLUIG.chart
|
||
source: https://tdn.totvs.com/pages/viewpage.action?pageId=808476695
|
||
path: \Plataforma Documentação técnica\Recurso de Páginas e Widgets (WCM)\Atualização para a nova versão do FLUIG.chart.md
|
||
---
|
||
|
||
# Índice
|
||
|
||
- 1 [Objetivo](#AtualizaçãoparaanovaversãodoFLUIG.chart-Objetivo)
|
||
- 2 [Identificação do que precisa ser ajustado](#AtualizaçãoparaanovaversãodoFLUIG.chart-Identificaçãodoqueprecisaserajustado)
|
||
- 3 [Breaking changes](#AtualizaçãoparaanovaversãodoFLUIG.chart-Breakingchanges)
|
||
- 3.1 [Breaking Change: Gráfico LineBar removido. Agora utilize o gráfico Mixed.](#AtualizaçãoparaanovaversãodoFLUIG.chart-BreakingChange:GráficoLineBarremovido.AgorautilizeográficoMixed.)
|
||
- 3.2 [Breaking Change: Somente um evento para todos os gráficos.](#AtualizaçãoparaanovaversãodoFLUIG.chart-BreakingChange:Somenteumeventoparatodososgráficos.)
|
||
- 3.3 [Breaking change: Nova estrutura de datasets para alguns gráficos](#AtualizaçãoparaanovaversãodoFLUIG.chart-Breakingchange:Novaestruturadedatasetsparaalgunsgráficos)
|
||
- 3.4 [Breaking change: Propriedades removidas na estrutura do dataset.](#AtualizaçãoparaanovaversãodoFLUIG.chart-Breakingchange:Propriedadesremovidasnaestruturadodataset.)
|
||
- 3.5 [Breaking change: Mudança para adicionar, remover ou atualizar dados nos gráficos.](#AtualizaçãoparaanovaversãodoFLUIG.chart-Breakingchange:Mudançaparaadicionar,removerouatualizardadosnosgráficos.)
|
||
- 3.6 [Alterações por gráfico:](#AtualizaçãoparaanovaversãodoFLUIG.chart-Alteraçõesporgráfico:)
|
||
- 3.6.1 [Gráfico do tipo Line](#AtualizaçãoparaanovaversãodoFLUIG.chart-GráficodotipoLine)
|
||
- 3.6.2 [Gráfico do tipo Bar ou Horizontal Bar](#AtualizaçãoparaanovaversãodoFLUIG.chart-GráficodotipoBarouHorizontalBar)
|
||
- 3.6.3 [Gráfico do tipo Radar](#AtualizaçãoparaanovaversãodoFLUIG.chart-GráficodotipoRadar)
|
||
- 3.6.4 [Gráfico do tipo Polar](#AtualizaçãoparaanovaversãodoFLUIG.chart-GráficodotipoPolar)
|
||
- 3.6.5 [Gráfico do tipo Pie e Doughnut](#AtualizaçãoparaanovaversãodoFLUIG.chart-GráficodotipoPieeDoughnut)
|
||
|
||
## 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 <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**
|
||
|
||
| Propriedade | Situação | Orientação |
|
||
| --- | --- | --- |
|
||
| 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. |
|
||
| 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. |
|
||
| datasetFill | Removida | Use fill dentro de datasets. |
|
||
| legendTemplate | Removida | Não existe mais 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 | 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. |
|
||
| 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 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 | 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. |
|
||
| angleLineColor | Removida | Use as configurações dentro de gridLines em scales para definir a cor 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 estilo 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 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 | 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. |
|
||
| 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 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 | 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 a propriedade legendTemplate. A lógica para personalizar a legenda agora deve ser feita na propriedade legend. Consulte a documentação para mais detalhes. | |