feat(charts): implementa chart do tipo donut

Author: CSimoesJr

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

@@ -1,5 +1,7 @@
 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';
 
 const gridPaddingValues = {
   paddingBottomWithTopLegend: 48,
@@ -16,6 +18,7 @@ const gridPaddingValues = {
 } as const;
 
 export class PoChartGridUtils {
+  private isTypeDonut = false;
   constructor(private readonly component: PoChartNewComponent) {}
 
   setGridOption(options: EChartsOption) {
@@ -157,39 +160,87 @@ export class PoChartGridUtils {
     }
   }
 
-  setListTypePie() {
-    let radius = '85%';
+  setSerieTypeDonutPie(serie: any, color: string) {
+    if (this.component.listTypePieDonut?.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,
+          borderRadius: this.component.options?.borderRadius
+        },
+        label: { show: this.isTypeDonut && this.component.options?.textCenterGraph }
+      };
+      this.component.listTypePieDonut[0].data.push(seriePie);
+    }
+  }
+
+  setListTypeDonutPie(type: PoChartType) {
+    if (type === PoChartType.Donut) {
+      this.isTypeDonut = true;
+      this.component.itemsTypeDonut = this.normalizeToPercentage(this.component.series);
+    }
+    let radiusHorizontal = '85%';
+    let radiusVertical = '55%';
     let positionHorizontal;
     if (this.component.options?.legend === false) {
-      radius = '95%';
+      radiusHorizontal = '95%';
+      radiusVertical = '65%';
       positionHorizontal = '50%';
     } else {
       positionHorizontal = this.component.options?.legendVerticalPosition === 'top' ? '54%' : '46%';
     }
-    this.component.listTypePie = [
+
+    if (this.component.options?.innerRadius) {
+      radiusVertical = this.getAdjustedRadius(radiusVertical, this.component.options.innerRadius);
+    }
+    const radius = this.isTypeDonut ? [radiusVertical, radiusHorizontal] : radiusHorizontal;
+    this.component.listTypePieDonut = [
       {
         type: 'pie',
         center: ['50%', positionHorizontal],
         radius: radius,
+        label: {
+          show: !!(this.isTypeDonut && this.component.options?.textCenterGraph),
+          position: 'center',
+          formatter: this.component.options?.textCenterGraph,
+          fontFamily: this.component.getCSSVariable('--font-family-hightlight-value', '.po-chart'),
+          fontSize: this.resolvePx('--font-size-hightlight-value', '.po-chart'),
+          color: this.component.getCSSVariable('--color-hightlight-value', '.po-chart'),
+          fontWeight: Number(this.component.getCSSVariable('--font-weight-hightlight-value', '.po-chart'))
+        },
         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);
+  private getAdjustedRadius(radius: string, innerRadius: number): string {
+    const radiusValue = parseFloat(radius);
+    if (innerRadius >= 100) {
+      return radius;
     }
+    const adjusted = radiusValue * (innerRadius / 100);
+    return `${adjusted}%`;
+  }
+
+  private normalizeToPercentage(series: Array<PoChartSerie>) {
+    const total =
+      series
+        .map(item => item.data)
+        .filter((value): value is number => typeof value === 'number')
+        .reduce((sum, value) => sum + value, 0) || 1;
+
+    return series.map(item => ({
+      label: item.label,
+      data: item.data,
+      valuePercentage: +(((item.data as number) / total) * 100).toFixed(2)
+    }));
   }
 
   resolvePx(size: string, selector?: string): number {

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

@@ -1,3 +1,5 @@
+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';
 
@@ -87,18 +89,29 @@ describe('PoChartGridUtils', () => {
   });
 
   describe('setListPie', () => {
+    const labelProperties = {
+      show: false,
+      position: 'center',
+      formatter: undefined,
+      fontFamily: '',
+      fontSize: undefined,
+      color: '',
+      fontWeight: 0
+    };
+
     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();
+      utils.setListTypeDonutPie(PoChartType.Pie);
 
-      expect(utils['component'].listTypePie).toEqual([
+      expect(utils['component'].listTypePieDonut).toEqual([
         {
           type: 'pie',
           center: ['50%', '50%'],
           radius: '95%',
           emphasis: { focus: 'self' },
           data: [],
+          label: labelProperties,
           blur: { itemStyle: { opacity: 0.4 } }
         }
       ]);
@@ -107,15 +120,16 @@ describe('PoChartGridUtils', () => {
     it('should set pie config with center 50% 54% when legendVerticalPosition is top', () => {
       utils['component'].options = { legend: true, legendVerticalPosition: 'top' } as any;
 
-      utils.setListTypePie();
+      utils.setListTypeDonutPie(PoChartType.Pie);
 
-      expect(utils['component'].listTypePie).toEqual([
+      expect(utils['component'].listTypePieDonut).toEqual([
         {
           type: 'pie',
           center: ['50%', '54%'],
           radius: '85%',
           emphasis: { focus: 'self' },
           data: [],
+          label: labelProperties,
           blur: { itemStyle: { opacity: 0.4 } }
         }
       ]);
@@ -124,15 +138,72 @@ describe('PoChartGridUtils', () => {
     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();
+      utils.setListTypeDonutPie(PoChartType.Pie);
 
-      expect(utils['component'].listTypePie).toEqual([
+      expect(utils['component'].listTypePieDonut).toEqual([
         {
           type: 'pie',
           center: ['50%', '46%'],
           radius: '85%',
           emphasis: { focus: 'self' },
           data: [],
+          label: labelProperties,
+          blur: { itemStyle: { opacity: 0.4 } }
+        }
+      ]);
+    });
+  });
+
+  describe('setListDonut', () => {
+    const labelProperties = {
+      show: true,
+      position: 'center',
+      formatter: 'test',
+      fontFamily: '',
+      fontSize: undefined,
+      color: '',
+      fontWeight: 0
+    };
+
+    it('should set donut config if innerRadius is 100', () => {
+      utils['component'].options = { innerRadius: 100, textCenterGraph: 'test' } as PoChartOptions;
+      utils['component'].series = [
+        { label: 'Serie 1', data: 10 },
+        { label: 'Serie 2', data: 30 }
+      ];
+
+      utils.setListTypeDonutPie(PoChartType.Donut);
+
+      expect(utils['component'].listTypePieDonut).toEqual([
+        {
+          type: 'pie',
+          center: ['50%', '46%'],
+          radius: ['55%', '85%'],
+          emphasis: { focus: 'self' },
+          data: [],
+          label: labelProperties,
+          blur: { itemStyle: { opacity: 0.4 } }
+        }
+      ]);
+    });
+
+    it('should set donut config if innerRadius is 80', () => {
+      utils['component'].options = { innerRadius: 80, textCenterGraph: 'test' } as PoChartOptions;
+      utils['component'].series = [
+        { label: 'Serie 1', data: 10 },
+        { label: 'Serie 2', data: 30 }
+      ];
+
+      utils.setListTypeDonutPie(PoChartType.Donut);
+
+      expect(utils['component'].listTypePieDonut).toEqual([
+        {
+          type: 'pie',
+          center: ['50%', '46%'],
+          radius: ['44%', '85%'],
+          emphasis: { focus: 'self' },
+          data: [],
+          label: labelProperties,
           blur: { itemStyle: { opacity: 0.4 } }
         }
       ]);

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

@@ -512,6 +512,57 @@ describe('PoChartNewComponent', () => {
       expect(component.seriesClick.emit).not.toHaveBeenCalled();
     });
 
+    it('should emit seriesHover event when clicking on the chart if type is Donut', () => {
+      const tooltipElement = document.createElement('div');
+      tooltipElement.id = 'custom-tooltip';
+      document.body.appendChild(tooltipElement);
+      const chartElement = document.createElement('div');
+      chartElement.id = 'chart-id';
+      document.body.appendChild(chartElement);
+      component['el'] = {
+        nativeElement: document
+      };
+
+      component['chartInstance'] = {
+        on: jasmine.createSpy('on')
+      } as any;
+
+      spyOn(component.seriesHover, 'emit');
+      spyOn(component.seriesClick, 'emit');
+
+      component.series = [{ label: 'Colombia', data: 300, color: 'color-10' }];
+      component.itemsTypeDonut = [{ label: 'Colombia', data: 300, valuePercentage: '80%' }];
+
+      component['initEChartsEvents']();
+
+      expect(component['chartInstance'].on).toHaveBeenCalledWith('mouseover', jasmine.any(Function));
+
+      const mouseoverCallback = component['chartInstance'].on.calls.argsFor(1)[1];
+
+      const mockParams = {
+        value: 300,
+        name: 'Colombia',
+        seriesType: 'pie',
+        seriesIndex: 0,
+        event: { offsetX: 10, offsetY: 20 }
+      };
+      mouseoverCallback(mockParams);
+
+      expect(component['positionTooltip']).toBe('top');
+
+      const clickCallback = component['chartInstance'].on.calls.argsFor(0)[1];
+
+      const mockParamsClick = {};
+      clickCallback(mockParamsClick);
+
+      expect(component.tooltipText).toBe(`Colombia: <b>80%%</b>`);
+      expect(component.seriesHover.emit).toHaveBeenCalledWith({
+        label: 'Colombia',
+        data: 300
+      });
+      expect(component.seriesClick.emit).not.toHaveBeenCalled();
+    });
+
     it('should hide the tooltip when leaving the chart (mouseout)', () => {
       component['chartInstance'] = {
         on: jasmine.createSpy('on')
@@ -845,12 +896,23 @@ describe('PoChartNewComponent', () => {
       expect(result[1].type).toBe('bar');
     });
 
-    it('should return type Donut', () => {
+    it('should return type Donut if data is not valid', () => {
       component.type = PoChartType.Donut;
       component.series = [{ label: 'Serie 1', data: [7, 8, 9] }];
 
       const result = component['setSeries']();
-      expect(result[0].type).toBe('donut');
+      expect(result[0].type).toBe('pie');
+    });
+
+    it('should return type Donut', () => {
+      component.type = PoChartType.Donut;
+      component.series = [
+        { label: 'Serie 1', data: 10 },
+        { label: 'Serie 2', data: 30 }
+      ];
+
+      const result = component['setSeries']();
+      expect(result[0].type).toBe('pie');
     });
 
     it('should return type Pie', () => {
@@ -1201,7 +1263,7 @@ describe('PoChartNewComponent', () => {
       expect(mockChartInstance.getDataURL).toHaveBeenCalledWith({
         type: 'jpeg',
         pixelRatio: 2,
-        backgroundColor: 'white'
+        backgroundColor: '#ffffff'
       });
       expect(component['configureImageCanvas']).toHaveBeenCalledWith('jpeg', mockImage);
     });