--- 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 **, 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. |