feat(charts): implementa chart do tipo pie

CSimoesJr · CSimoesJr · commit e30f7cb2178b · 2025-05-06T13:13:44.000-03:00
diff --git a/projects/ui/src/lib/components/po-chart-new/po-chart-grid-utils.ts b/projects/ui/src/lib/components/po-chart-new/po-chart-grid-utils.ts
@@ -134,10 +134,48 @@ export class PoChartGridUtils {
         color: color
       };
       serie.emphasis = { focus: 'series' };
+      serie.blur = {
+        itemStyle: { opacity: 0.4 }
+      };
       this.component.boundaryGap = true;
     }
   }
 
+  setListTypePie() {
+    let radius = '85%';
+    let positionHorizontal;
+    if (this.component.options?.legend === false) {
+      radius = '95%';
+      positionHorizontal = '50%';
+    } else {
+      positionHorizontal = this.component.options?.legendVerticalPosition === 'top' ? '54%' : '46%';
+    }
+    this.component.listTypePie = [
+      {
+        type: 'pie',
+        center: ['50%', positionHorizontal],
+        radius: radius,
+        emphasis: { focus: 'self' },
+        data: [],
+        blur: { itemStyle: { opacity: 0.4 } }
+      }
+    ];
+  }
+
+  setSerieTypePie(serie: any, color: string) {
+    if (this.component.listTypePie?.length) {
+      const borderWidth = this.resolvePx('--border-width-sm');
+      const borderColor = this.component.getCSSVariable('--border-color', '.po-chart');
+      const seriePie = {
+        name: serie.name,
+        value: serie.data,
+        itemStyle: { borderWidth: borderWidth, borderColor: borderColor, color: color },
+        label: { show: false }
+      };
+      this.component.listTypePie[0].data.push(seriePie);
+    }
+  }
+
   resolvePx(size: string, selector?: string): number {
     const token = this.component.getCSSVariable(size, selector);
     if (token.endsWith('px')) {
diff --git a/projects/ui/src/lib/components/po-chart-new/po-chart-grid.utils.spec.ts b/projects/ui/src/lib/components/po-chart-new/po-chart-grid.utils.spec.ts
@@ -85,4 +85,57 @@ describe('PoChartGridUtils', () => {
       expect(option.xAxis['axisLabel'].overflow).toBe('break');
     });
   });
+
+  describe('setListPie', () => {
+    it('should set pie config with radius 95% and center 50% 50% when legend is false', () => {
+      utils['component'].options = { legend: false } as any;
+
+      utils.setListTypePie();
+
+      expect(utils['component'].listTypePie).toEqual([
+        {
+          type: 'pie',
+          center: ['50%', '50%'],
+          radius: '95%',
+          emphasis: { focus: 'self' },
+          data: [],
+          blur: { itemStyle: { opacity: 0.4 } }
+        }
+      ]);
+    });
+
+    it('should set pie config with center 50% 54% when legendVerticalPosition is top', () => {
+      utils['component'].options = { legend: true, legendVerticalPosition: 'top' } as any;
+
+      utils.setListTypePie();
+
+      expect(utils['component'].listTypePie).toEqual([
+        {
+          type: 'pie',
+          center: ['50%', '54%'],
+          radius: '85%',
+          emphasis: { focus: 'self' },
+          data: [],
+          blur: { itemStyle: { opacity: 0.4 } }
+        }
+      ]);
+    });
+
+    it('should set pie config with center 50% 46% when legendVerticalPosition is not top', () => {
+      utils['component'].options = { legend: true, legendVerticalPosition: 'bottom' } as any;
+
+      utils.setListTypePie();
+
+      expect(utils['component'].listTypePie).toEqual([
+        {
+          type: 'pie',
+          center: ['50%', '46%'],
+          radius: '85%',
+          emphasis: { focus: 'self' },
+          data: [],
+          blur: { itemStyle: { opacity: 0.4 } }
+        }
+      ]);
+    });
+  });
 });
diff --git a/projects/ui/src/lib/components/po-chart-new/po-chart-new.component.html b/projects/ui/src/lib/components/po-chart-new/po-chart-new.component.html
@@ -1,7 +1,11 @@
 <div *ngIf="series.length" [class.expanded]="isExpanded" id="chart-container">
   <div class="po-chart-header">
-    <div class="po-chart-header-title po-lg-9 po-md-8 po-sm-6" style="padding: 0">
-      <strong> {{ title }} </strong>
+    <div
+      class="po-chart-header-title po-lg-9 po-md-8 po-sm-6"
+      [p-tooltip]="tooltipTitle"
+      (mouseover)="showTooltipTitle($event)"
+    >
+      {{ title }}
     </div>
 
     <div class="po-chart-header-actions po-lg-3 po-md-4 po-sm-6">
diff --git a/projects/ui/src/lib/components/po-chart-new/po-chart-new.component.spec.ts b/projects/ui/src/lib/components/po-chart-new/po-chart-new.component.spec.ts
@@ -122,6 +122,29 @@ describe('PoChartNewComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should show tooltip only when content overflows', () => {
+    const event: any = {
+      target: document.createElement('div')
+    };
+
+    const element = event.target as HTMLElement;
+
+    // Simula overflow
+    Object.defineProperty(element, 'scrollWidth', { value: 150, configurable: true });
+    Object.defineProperty(element, 'offsetWidth', { value: 100, configurable: true });
+
+    component.title = 'Long Title';
+    component.showTooltipTitle(event);
+    expect(component['tooltipTitle']).toBe('Long Title');
+
+    // Simula conteúdo sem overflow
+    Object.defineProperty(element, 'scrollWidth', { value: 80 });
+    Object.defineProperty(element, 'offsetWidth', { value: 100 });
+
+    component.showTooltipTitle(event);
+    expect(component['tooltipTitle']).toBeUndefined();
+  });
+
   describe('Lifecycle hooks:', () => {
     it('ngAfterViewInit: should initialize echarts', () => {
       spyOn(component, <any>'initECharts');
@@ -399,6 +422,35 @@ describe('PoChartNewComponent', () => {
       expect(component.seriesHover.emit).not.toHaveBeenCalled();
     });
 
+    it('should emit seriesClick event when clicking on the chart if params.seriesName is undefined', () => {
+      component['chartInstance'] = {
+        on: jasmine.createSpy('on')
+      } as any;
+
+      spyOn(component.seriesClick, 'emit');
+      spyOn(component.seriesHover, 'emit');
+
+      component['initEChartsEvents']();
+
+      expect(component['chartInstance'].on).toHaveBeenCalledWith('click', jasmine.any(Function));
+
+      const clickCallback = component['chartInstance'].on.calls.argsFor(0)[1];
+
+      const mockParams = { value: 100, name: 'Name X' };
+      clickCallback(mockParams);
+
+      const mouseoverCallback = component['chartInstance'].on.calls.argsFor(1)[1];
+
+      const mockParamsMouse = {};
+      mouseoverCallback(mockParamsMouse);
+
+      expect(component.seriesClick.emit).toHaveBeenCalledWith({
+        label: 'Name X',
+        data: 100
+      });
+      expect(component.seriesHover.emit).not.toHaveBeenCalled();
+    });
+
     it('should emit seriesHover event when hovering over a series', () => {
       const tooltipElement = document.createElement('div');
       tooltipElement.id = 'custom-tooltip';
@@ -465,7 +517,7 @@ describe('PoChartNewComponent', () => {
         on: jasmine.createSpy('on')
       } as any;
 
-      spyOn(component.poTooltip, 'toggleTooltipVisibility');
+      spyOn(component.poTooltip.last, 'toggleTooltipVisibility');
 
       component['initEChartsEvents']();
 
@@ -475,7 +527,7 @@ describe('PoChartNewComponent', () => {
 
       mouseoutCallback();
 
-      expect(component.poTooltip.toggleTooltipVisibility).toHaveBeenCalledWith(false);
+      expect(component.poTooltip.last.toggleTooltipVisibility).toHaveBeenCalledWith(false);
     });
 
     it('should set tooltipText as "seriesName: value" when tooltip is not defined', () => {
@@ -524,7 +576,7 @@ describe('PoChartNewComponent', () => {
 
       mouseoverCallback(mockParamsNoSeriesName);
 
-      expect(component.tooltipText.replace(/\s/g, '')).toBe('CategoriaSemNome<b>99</b>'.replace(/\s/g, ''));
+      expect(component.tooltipText.replace(/\s/g, '')).toBe('CategoriaSemNome:<b>99</b>'.replace(/\s/g, ''));
     });
   });
 
@@ -735,9 +787,11 @@ describe('PoChartNewComponent', () => {
 
       const result = component['setSeries']();
 
-      expect(result.length).toBe(2);
+      expect(result.length).toBe(1);
       expect(result[0].type).toBe('pie');
-      expect(result[0].name).toBe('Serie 1');
+      expect(result[0].data[0].name).toBe('Serie 1');
+      expect(result[0].data[1].name).toBe('Serie 2');
+      expect(result[0].data.length).toBe(2);
     });
 
     it('should transform series correctly with default configurations', () => {
@@ -1013,6 +1067,33 @@ describe('PoChartNewComponent', () => {
 
       expect(component['setTableColumns']).not.toHaveBeenCalled();
     });
+
+    it('should set Series if type is Pie', () => {
+      component.type = PoChartType.Pie;
+      component.series = [
+        { data: 80, label: 'Pie Value 1' },
+        { data: 20, label: 'Pie Value 2' }
+      ];
+      component['chartInstance'] = {
+        getOption: jasmine.createSpy('getOption').and.returnValue({
+          series: [
+            {
+              name: 'Série A',
+              data: [
+                { name: 'Pie Value 1', value: 80 },
+                { name: 'Pie Value 2', value: 20 }
+              ]
+            }
+          ]
+        })
+      } as any;
+      spyOn(component as any, 'setTableColumns');
+
+      component['setTableProperties']();
+
+      expect(component['setTableColumns']).not.toHaveBeenCalled();
+      expect(component['itemsTable']).toEqual([{ 'Série': '-', 'Pie Value 1': 80, 'Pie Value 2': 20 }]);
+    });
   });
 
   describe('setTableColumns:', () => {
@@ -1055,6 +1136,7 @@ describe('PoChartNewComponent', () => {
         { serie: 'Série 1', valor1: 10, valor2: undefined },
         { serie: 'Série 2', valor1: 30 }
       ];
+      component['columnsTable'] = [{ property: 'serie' }, { property: 'valor1' }, { property: 'valor2' }];
       component.options = {} as any;
 
       component['downloadCsv']();
@@ -1192,47 +1274,6 @@ describe('PoChartNewComponent', () => {
       expect(component['setHeaderProperties']).not.toHaveBeenCalled();
     });
 
-    // it('should create and download a PNG image correctly', done => {
-    //   const chartElement = document.createElement('div');
-    //   chartElement.style.width = '800px';
-    //   chartElement.style.height = '600px';
-
-    //   const headerElement = document.createElement('div');
-    //   headerElement.style.height = '50px';
-
-    //   const mockImage = new Image();
-    //   const canvas = document.createElement('canvas');
-    //   const ctx = canvas.getContext('2d');
-    //   spyOn(canvas, 'getContext').and.returnValue(ctx);
-
-    //   const link = document.createElement('a');
-    //   spyOn(document, 'createElement').and.callFake((tag: string) => {
-    //     if (tag === 'canvas') return canvas;
-    //     if (tag === 'a') return link;
-    //     return document.createElement(tag);
-    //   });
-
-    //   spyOn(canvas, 'toDataURL').and.returnValue('data:image/png;base64,fakeImageData');
-    //   spyOn(link, 'click');
-
-    //   component['configureImageCanvas']('png', mockImage);
-
-    //   setTimeout(() => {
-    //     mockImage.onload?.(new Event('load'));
-    //   }, 100);
-
-    //   setTimeout(() => {
-    //     try {
-    //       expect(link.href).toBe('data:image/png;base64,fakeImageData');
-    //       expect(link.download).toBe('grafico-exportado.png');
-    //       expect(link.click).toHaveBeenCalled();
-    //       done();
-    //     } catch (error) {
-    //       done.fail(error);
-    //     }
-    //   }, 300);
-    // });
-
     it('should create and download a PNG image correctly', done => {
       const chartElement = document.createElement('div');
       chartElement.style.width = '800px';
diff --git a/projects/ui/src/lib/components/po-chart-new/po-chart-new.component.ts b/projects/ui/src/lib/components/po-chart-new/po-chart-new.component.ts
