feat(chart): adiciona feature toogle

Adiciona feature toogle;
Corrige bug sonar

Author: arthur-polidorio

projects/ui/src/lib/components/index.ts

@@ -8,7 +8,7 @@ export * from './po-button-group/index';
 export * from './po-button/index';
 export * from './po-calendar/index';
 export * from './po-chart/index';
-export * from './po-chart-new/index'; /*Deletar esta referência quando não for mais necessário.*/
+export * from './po-chart-new/index'; /* @ToDo - Deletar esta referência quando não for mais necessário.*/
 export * from './po-container/index';
 export * from './po-disclaimer-group/index';
 export * from './po-disclaimer/index';

projects/ui/src/lib/components/po-chart-new/index.ts

@@ -2,5 +2,5 @@ export * from './po-chart-new.component';
 
 export * from './po-chart-new.module';
 
-/* Ao apagar esse arquivo, lembre também de remover a linha "export * from './po-chart-new/index'" no arquivo index.css, que fica em:
+/* @ToDo - Ao apagar esse arquivo, lembre também de remover a linha "export * from './po-chart-new/index'" no arquivo index.css, que fica em:
 po-angular\projects\ui\src\lib\components. */

projects/ui/src/lib/components/po-chart-new/po-chart-grid-utils.ts

@@ -1,4 +1,3 @@
-import { EChartsOption } from 'echarts/dist/echarts.esm';
 import { PoChartNewComponent } from './po-chart-new.component';
 import { PoChartSerie } from '../po-chart/interfaces/po-chart-serie.interface';
 import { PoChartType } from '../po-chart/enums/po-chart-type.enum';
@@ -21,7 +20,7 @@ export class PoChartGridUtils {
   private isTypeDonut = false;
   constructor(private readonly component: PoChartNewComponent) {}
 
-  setGridOption(options: EChartsOption) {
+  setGridOption(options) {
     const tokenBorderWidthSm = this.resolvePx('--border-width-sm');
     const paddingBottom = this.getPaddingBottomGrid();
     const paddingTop = this.getPaddingTopGrid();
@@ -35,7 +34,7 @@ export class PoChartGridUtils {
     };
   }
 
-  setOptionsAxis(options: EChartsOption) {
+  setOptionsAxis(options) {
     const tokenFontSizeGrid = this.resolvePx('--font-size-grid', '.po-chart');
     const tokenBorderWidthSm = this.resolvePx('--border-width-sm');
 
@@ -87,7 +86,7 @@ export class PoChartGridUtils {
     }
   }
 
-  setOptionDataZoom(options: EChartsOption) {
+  setOptionDataZoom(options) {
     options.dataZoom = [
       {
         show: true,
@@ -105,7 +104,7 @@ export class PoChartGridUtils {
     ];
   }
 
-  setShowAxisDetails(options: EChartsOption) {
+  setShowAxisDetails(options) {
     if (this.component.options?.axis?.showAxisDetails) {
       options.tooltip = {
         trigger: 'none',

projects/ui/src/lib/components/po-chart-new/po-chart-grid.utils.spec.ts

@@ -1,7 +1,6 @@
 import { PoChartType } from '../po-chart/enums/po-chart-type.enum';
 import { PoChartOptions } from '../po-chart/interfaces/po-chart-options.interface';
 import { PoChartGridUtils } from './po-chart-grid-utils';
-import { EChartsOption } from 'echarts';
 
 describe('PoChartGridUtils', () => {
   let utils: PoChartGridUtils;
@@ -77,7 +76,7 @@ describe('PoChartGridUtils', () => {
 
   describe('setOptionsAxis', () => {
     it('should define xAxis and yAxis correctly', () => {
-      const option: EChartsOption = {};
+      const option: any = {};
 
       utils.setOptionsAxis(option);
 

projects/ui/src/lib/components/po-chart-new/po-chart-new.component.ts

@@ -5,6 +5,7 @@ import {
   ElementRef,
   HostListener,
   OnChanges,
+  OnDestroy,
   OnInit,
   QueryList,
   SimpleChanges,
@@ -23,42 +24,53 @@ import { PoPopupAction } from '../po-popup';
 import { PoTableColumn } from '../po-table';
 import { PoChartNewBaseComponent } from './po-chart-new-base.component';
 
-import * as echarts from 'echarts/dist/echarts.esm';
-import { EChartsOption } from 'echarts/dist/echarts.esm';
 import { PoChartType } from '../po-chart/enums/po-chart-type.enum';
 import { PoChartGridUtils } from './po-chart-grid-utils';
 
+import * as echarts from 'echarts/core';
+import { BarChart, CustomChart, GaugeChart, LineChart, PieChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+import {
+  BrushComponent,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  MarkLineComponent,
+  ToolboxComponent,
+  TooltipComponent
+} from 'echarts/components';
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
+use([
+  BarChart,
+  CustomChart,
+  GaugeChart,
+  LineChart,
+  PieChart,
+  BrushComponent,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  MarkLineComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  CanvasRenderer,
+  SVGRenderer
+]);
+
 /**
  * @docsExtends PoChartBaseComponent
- *
- * @example
- *
- * <example name="po-chart-basic" title="PO Chart Basic">
- *  <file name="sample-po-chart-basic/sample-po-chart-basic.component.html"> </file>
- *  <file name="sample-po-chart-basic/sample-po-chart-basic.component.ts"> </file>
- * </example>
- *
- * <example name="po-chart-labs" title="PO Chart Labs">
- *  <file name="sample-po-chart-labs/sample-po-chart-labs.component.html"> </file>
- *  <file name="sample-po-chart-labs/sample-po-chart-labs.component.ts"> </file>
- * </example>
- *
- * <example name="po-chart-coffee-ranking" title="PO Chart - Coffee Ranking">
- *  <file name="sample-po-chart-coffee-ranking/sample-po-chart-coffee-ranking.component.html"> </file>
- *  <file name="sample-po-chart-coffee-ranking/sample-po-chart-coffee-ranking.component.ts"> </file>
- * </example>
- *
- * <example name="po-chart-world-exports" title="PO Chart - World Exports">
- *  <file name="sample-po-chart-world-exports/sample-po-chart-world-exports.component.html"> </file>
- *  <file name="sample-po-chart-world-exports/sample-po-chart-world-exports.component.ts"> </file>
- * </example>
  */
+
+/* @ToDo - Foi retirado o exemplo do sample pois causava problema no build:package da pipe */
 @Component({
   selector: 'po-chart-new',
   templateUrl: './po-chart-new.component.html',
   standalone: false
 })
-export class PoChartNewComponent extends PoChartNewBaseComponent implements OnInit, AfterViewInit, OnChanges {
+export class PoChartNewComponent
+  extends PoChartNewBaseComponent
+  implements OnInit, AfterViewInit, OnChanges, OnDestroy
+{
   @ViewChildren(PoTooltipDirective) poTooltip: QueryList<PoTooltipDirective>;
   @ViewChild('targetPopup', { read: ElementRef, static: false }) targetRef: ElementRef;
   @ViewChild('modalComponent') modal: PoModalComponent;
@@ -105,6 +117,8 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements OnIn
   ];
   private chartInstance!: echarts.ECharts;
   private currentRenderer: 'svg' | 'canvas';
+  private intersectionObserver: IntersectionObserver;
+  private hideDomEchartsDiv = false;
 
   constructor(
     private el: ElementRef,
@@ -161,6 +175,11 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements OnIn
 
   ngAfterViewInit() {
     this.initECharts();
+    this.checkShowCEcharts();
+  }
+
+  ngOnDestroy(): void {
+    this.intersectionObserver?.disconnect();
   }
 
   showTooltipTitle(e: MouseEvent) {
@@ -205,10 +224,30 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements OnIn
     });
   }
 
+  private checkShowCEcharts() {
+    const chartElement = this.el.nativeElement.querySelector('#chart-id');
+    if (!chartElement || !this.hideDomEchartsDiv) return;
+
+    this.intersectionObserver = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            this.initECharts();
+            this.intersectionObserver.disconnect();
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    this.intersectionObserver.observe(chartElement);
+  }
+
   private initECharts() {
     this.cdr.detectChanges();
     const echartsDiv = this.el.nativeElement.querySelector('#chart-id');
-    if (!echartsDiv) {
+    if (!echartsDiv?.clientWidth) {
+      this.hideDomEchartsDiv = true;
       return;
     }
 
@@ -276,15 +315,15 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements OnIn
   }
 
   private setChartsProperties() {
-    let option: EChartsOption = {};
+    let option = {};
     option = this.setOptions();
     this.chartInstance.setOption(option);
   }
 
   private setOptions() {
     const newSeries = this.setSeries();
 
-    const options: EChartsOption = {
+    const options = {
       backgroundColor: this.getCSSVariable('--background-color-grid', '.po-chart'),
       series: newSeries as any
     };
@@ -305,7 +344,7 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements OnIn
     return options;
   }
 
-  private formatLabelOption(options: EChartsOption) {
+  private formatLabelOption(options) {
     if (this.options?.axis && Object.keys(this.options.axis).length) {
       options.yAxis['splitNumber'] = this.options.axis.gridLines || 5;
       options.yAxis['min'] = this.options.axis.minRange;
@@ -319,7 +358,7 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements OnIn
     }
   }
 
-  private setOptionLegend(options: EChartsOption) {
+  private setOptionLegend(options) {
     options.legend = {
       show: true,
       orient: 'horizontal',

projects/ui/src/lib/components/po-chart/index.ts

@@ -9,3 +9,5 @@ export * from './interfaces/po-chart-serie-data-label.interface';
 export * from './po-chart.component';
 
 export * from './po-chart.module';
+
+export * from './po-chart-switch.component'; /* @ToDo - Deletar esta referência quando não for mais necessário.*/

projects/ui/src/lib/components/po-chart/po-chart-switch.component.ts

@@ -0,0 +1,116 @@
+/* istanbul ignore file */
+import {
+  ChangeDetectorRef,
+  Component,
+  ComponentRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
+
+import { PoChartComponent } from '.';
+import { PoChartNewComponent } from '../po-chart-new/po-chart-new.component';
+
+@Component({
+  selector: 'po-chart',
+  template: `<ng-template #container></ng-template>`,
+  standalone: false
+})
+export class PoChartSwitchComponent implements OnInit, OnChanges {
+  @ViewChild('container', { read: ViewContainerRef, static: true }) container!: ViewContainerRef;
+
+  @Input('p-title') title: any;
+  @Input('p-options') options: any;
+  @Input('p-type') type: any;
+  @Input('p-series') series: any;
+  @Input('p-categories') categories: any;
+  @Input('p-height') height: any;
+  @Input('p-data-label') dataLabel: any;
+  @Output('p-series-hover') seriesHover = new EventEmitter<any>();
+  @Output('p-series-click') seriesClick = new EventEmitter<any>();
+
+  componentRef: ComponentRef<any>;
+
+  constructor(private readonly changeDetector: ChangeDetectorRef) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['series']?.firstChange) {
+      return;
+    }
+
+    this.componentRef.instance.title = this.title;
+    this.componentRef.instance.options = this.options;
+    this.componentRef.instance.categories = this.categories;
+    this.componentRef.instance.series = this.series;
+    this.componentRef.instance.type = this.type;
+    this.componentRef.instance.height = this.height;
+    this.componentRef.instance.dataLabel = this.dataLabel;
+
+    this.componentRef.instance.ngOnChanges(changes);
+  }
+
+  ngOnInit() {
+    const componentesMap = {
+      old: PoChartComponent,
+      new: PoChartNewComponent
+    };
+
+    const newChart = localStorage.getItem('newChart') || null;
+    const tipo = newChart ? 'new' : 'old';
+    const componente = componentesMap[tipo];
+    this.componentRef = this.container.createComponent(componente as any);
+
+    this.componentRef.instance.title = this.title;
+    this.componentRef.instance.options = this.options;
+    this.componentRef.instance.categories = this.categories;
+    this.componentRef.instance.series = this.series;
+    this.componentRef.instance.type = this.type;
+    this.componentRef.instance.height = this.height;
+    this.componentRef.instance.dataLabel = this.dataLabel;
+
+    this.componentRef.instance.seriesHover.subscribe((event: any) => {
+      this.seriesHover.emit(event);
+    });
+
+    this.componentRef.instance.seriesClick.subscribe((event: any) => {
+      this.seriesClick.emit(event);
+    });
+
+    const change = {
+      title: {
+        currentValue: this.title,
+        firstChange: true
+      },
+      options: {
+        currentValue: this.options,
+        firstChange: true
+      },
+      categories: {
+        currentValue: this.categories,
+        firstChange: true
+      },
+      series: {
+        currentValue: this.series,
+        firstChange: true
+      },
+      type: {
+        currentValue: this.type,
+        firstChange: true
+      },
+      height: {
+        currentValue: this.height,
+        firstChange: true
+      },
+      dataLabel: {
+        currentValue: this.dataLabel,
+        firstChange: true
+      }
+    };
+    this.componentRef.instance.ngOnChanges(change);
+  }
+}

projects/ui/src/lib/components/po-chart/po-chart.component.ts

@@ -52,7 +52,7 @@ import { PoChartMathsService } from './services/po-chart-maths.service';
  * </example>
  */
 @Component({
-  selector: 'po-chart',
+  selector: 'po-chart-old',
   templateUrl: './po-chart.component.html',
   standalone: false
 })