feat(chart): inclusão propriedade p-data-label para chart tipo line

Implementação da propriedade 'p-data-label', onde é possível passar a propriedade `fixed`.
Com essa propriedade (fixed=tue), irar alterar o grafico do tipo line.
- O valor da series ficar sendo exibido fixado com uma background transparente.
- Não será mostrado o tooltip ao hover do bullet.
- Será adicionado uma opacidade a todas outras series quando selecionado uma delas.
- O hover da serie ficará ate selecionar outra ou sair do gráfico.

fixes DTHFUI-10134

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

@@ -3,6 +3,7 @@ export * from './interfaces/po-chart-serie.interface';
 export * from './enums/po-chart-type.enum';
 export * from './interfaces/po-chart-axis-options.interface';
 export * from './interfaces/po-chart-options.interface';
+export * from './interfaces/po-chart-serie-data-label.interface';
 
 export * from './po-chart.component';
 

projects/ui/src/lib/components/po-chart/interfaces/po-chart-path-coordinates.interface.ts

@@ -25,4 +25,10 @@ export interface PoChartPathCoordinates {
 
   /** O texto de exibição no tooltip. */
   tooltipLabel?: string;
+
+  /** Indica se é elemento não está em foco. */
+  isBlur?: boolean;
+
+  /** Indica se o valor da série está mostrando fixado na tela. */
+  isFixed?: boolean;
 }

projects/ui/src/lib/components/po-chart/interfaces/po-chart-points-coordinates.interface.ts

@@ -31,4 +31,7 @@ export interface PoChartPointsCoordinates {
 
   /** Coordenada vertical. */
   yCoordinate: number;
+
+  /** Indica se o valor da série está mostrando fixado na tela. */
+  isFixed?: boolean;
 }

projects/ui/src/lib/components/po-chart/interfaces/po-chart-serie-data-label.interface.ts

@@ -0,0 +1,23 @@
+import { PoChartType } from '../enums/po-chart-type.enum';
+
+/**
+ * @usedBy PoChartSerie
+ *
+ * @description
+ *
+ * Interface das propriedade da serie do `po-chart`.
+ * > Funciona somente para gráfico do tipo `line`.
+ */
+export interface PoChartDataLabel {
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define se o texto que será exibido deverá estar exibindo fixo na série do *chart*.
+   *
+   * > Caso seja informado, o *tooltip* não será exibido, e ao hover na série as outras séries ficaram com opacidade
+   * > Funciona somente para o type *PoChartType.Line*
+   */
+  fixed?: boolean;
+}

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

@@ -7,6 +7,7 @@ import { PoChartType } from './enums/po-chart-type.enum';
 import { PoChartOptions } from './interfaces/po-chart-options.interface';
 import { PoChartSerie } from './interfaces/po-chart-serie.interface';
 import { PoColorService } from '../../services/po-color/po-color.service';
+import { PoChartDataLabel } from './interfaces/po-chart-serie-data-label.interface';
 
 const poChartDefaultHeight = 400;
 const poChartMinHeight = 200;
@@ -210,6 +211,27 @@ export abstract class PoChartBaseComponent implements OnChanges {
     return this._options;
   }
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define as propiedades para a label.
+   *
+   * É possível, definir a configuração de exibição dos valores das series, mostrando fixado.
+   * Ao passar o fixed, o valor ficará visivel e não irar mostrar o tooltip, além da mudança
+   * visual dos bullets e a adição da opacidade à outras series diferentes no hover.
+   *
+   * > Funcionalidade funciona somente para o gráfico do tipo `line`
+   *
+   * ```
+   *  dataLabel: PoChartDataLabel = {
+   *    fixed: true,
+   *  };
+   * ```
+   */
+  @Input('p-data-label') dataLabel?: PoChartDataLabel;
+
   constructor(protected colorService: PoColorService) {}
 
   get isTypeCircular() {

projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-container.component.html

@@ -5,6 +5,8 @@
   [attr.viewBox]="viewBox"
   [attr.width]="containerSize.svgWidth"
   [attr.height]="containerSize.svgHeight"
+  (mouseenter)="onChartMouseEnter()"
+  (mouseleave)="onChartMouseLeave()"
 >
   <!-- axis -->
   <svg:g
@@ -55,6 +57,8 @@
     [p-range]="range"
     [p-series]="seriesByType['line']"
     [p-container-size]="containerSize"
+    [p-data-label]="dataLabel"
+    [p-insideChart]="insideChart"
     (p-point-hover)="onSerieHover($event)"
     (p-point-click)="onSerieClick($event)"
   ></svg:g>

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

@@ -274,6 +274,48 @@ describe('PoChartContainerComponent', () => {
 
       expect(fnError).not.toThrow();
     });
+
+    it('onChartMouseEnter: should set `insideChart` to true', () => {
+      component.insideChart = false;
+      component.onChartMouseEnter();
+
+      expect(component.insideChart).toBeTrue();
+    });
+
+    it('onChartMouseLeave: should set `insideChart` to false', () => {
+      component.insideChart = true;
+      component.onChartMouseLeave();
+
+      expect(component.insideChart).toBeFalse();
+    });
+
+    it('onChartMouseEnter and onChartMouseLeave: should toggle `insideChart` between true and false', () => {
+      component.insideChart = false;
+
+      component.onChartMouseEnter();
+      expect(component.insideChart).toBeTrue();
+
+      component.onChartMouseLeave();
+      expect(component.insideChart).toBeFalse();
+    });
+
+    it('Template: should call `onChartMouseEnter` and `onChartMouseLeave` on mouse enter and leave', () => {
+      const svgElement = nativeElement.querySelector('svg');
+      const spyOnChartMouseEnter = spyOn(component, 'onChartMouseEnter').and.callThrough();
+      const spyOnChartMouseLeave = spyOn(component, 'onChartMouseLeave').and.callThrough();
+
+      svgElement.dispatchEvent(new Event('mouseenter'));
+      fixture.detectChanges();
+
+      expect(spyOnChartMouseEnter).toHaveBeenCalled();
+      expect(component.insideChart).toBeTrue();
+
+      svgElement.dispatchEvent(new Event('mouseleave'));
+      fixture.detectChanges();
+
+      expect(spyOnChartMouseLeave).toHaveBeenCalled();
+      expect(component.insideChart).toBeFalse();
+    });
   });
 
   describe('Properties: ', () => {

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

@@ -7,6 +7,7 @@ import { PoChartAxisOptions } from '../interfaces/po-chart-axis-options.interfac
 import { PoChartMathsService } from '../services/po-chart-maths.service';
 import { PoChartMinMaxValues } from '../interfaces/po-chart-min-max-values.interface';
 import { PoChartSerie } from '../interfaces/po-chart-serie.interface';
+import { PoChartDataLabel } from '../interfaces/po-chart-serie-data-label.interface';
 
 @Component({
   selector: 'po-chart-container',
@@ -19,6 +20,8 @@ export class PoChartContainerComponent implements OnChanges {
 
   @Input('p-container-size') containerSize: PoChartContainerSize;
 
+  @Input('p-data-label') dataLabel?: PoChartDataLabel;
+
   @Output('p-serie-click') serieClick = new EventEmitter<any>();
 
   @Output('p-serie-hover') serieHover = new EventEmitter<any>();
@@ -32,6 +35,7 @@ export class PoChartContainerComponent implements OnChanges {
   seriesByType;
   svgSpace;
   viewBox: string;
+  insideChart: boolean;
 
   private _options: PoChartOptions;
   private _series: Array<PoChartSerie> = [];
@@ -147,4 +151,12 @@ export class PoChartContainerComponent implements OnChanges {
       };
     }
   }
+
+  onChartMouseEnter() {
+    this.insideChart = true;
+  }
+
+  onChartMouseLeave() {
+    this.insideChart = false;
+  }
 }

projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-line/po-chart-line-base.component.spec.ts

@@ -103,8 +103,8 @@ describe('PoChartLineBaseComponent', () => {
         component['seriePathPointsDefinition'](component.containerSize, component.series, range);
 
         const expectedResult = [
-          { coordinates: ' M93 27 L136 26 L178 26', color: '#0C6C94', isActive: true },
-          { coordinates: ' M93 21 L136 14 L178 8', color: '#29B6C5', isActive: true }
+          { coordinates: ' M93 27 L136 26 L178 26', color: '#0C6C94', isActive: true, isFixed: undefined },
+          { coordinates: ' M93 21 L136 14 L178 8', color: '#29B6C5', isActive: true, isFixed: undefined }
         ];
 
         expect(component.seriesPathsCoordinates).toEqual(expectedResult);
@@ -113,6 +113,7 @@ describe('PoChartLineBaseComponent', () => {
 
       it('should apply apply value to `seriesPointsCoordinates`', () => {
         component.series = [{ label: 'Vancouver', data: [5, 10], type: PoChartType.Line, color: 'blue' }];
+        component.dataLabel = { fixed: true };
 
         component['seriePathPointsDefinition'](component.containerSize, component.series, range);
 
@@ -126,7 +127,8 @@ describe('PoChartLineBaseComponent', () => {
               data: 5,
               xCoordinate: 104,
               yCoordinate: 24,
-              isActive: true
+              isActive: true,
+              isFixed: true
             },
             {
               category: undefined,
@@ -136,7 +138,8 @@ describe('PoChartLineBaseComponent', () => {
               data: 10,
               xCoordinate: 168,
               yCoordinate: 21,
-              isActive: true
+              isActive: true,
+              isFixed: true
             }
           ]
         ];
@@ -149,6 +152,7 @@ describe('PoChartLineBaseComponent', () => {
       it('should apply apply only data to tooltipLabel if label is undefined', () => {
         const minMaxSeriesValues = { minValue: 5, maxValue: 10 };
         component.series = [{ label: undefined, data: [5, 10], type: PoChartType.Line, color: 'blue' }];
+        component.dataLabel = { fixed: true }; // Definir `dataLabel` para incluir `fixed`
 
         component['seriePathPointsDefinition'](component.containerSize, component.series, minMaxSeriesValues);
 
@@ -162,7 +166,8 @@ describe('PoChartLineBaseComponent', () => {
               data: 5,
               xCoordinate: 104,
               yCoordinate: 28,
-              isActive: true
+              isActive: true,
+              isFixed: true // Adicione a propriedade esperada
             },
             {
               category: undefined,
@@ -172,7 +177,8 @@ describe('PoChartLineBaseComponent', () => {
               data: 10,
               xCoordinate: 168,
               yCoordinate: 8,
-              isActive: true
+              isActive: true,
+              isFixed: true // Adicione a propriedade esperada
             }
           ]
         ];
@@ -186,8 +192,7 @@ describe('PoChartLineBaseComponent', () => {
         const minMaxSeriesValues = { minValue: 5, maxValue: 10 };
         component.series = [{ label: 'Vancouver', data: [5, 10], type: PoChartType.Line, color: 'blue' }];
         component.categories = ['janeiro', 'fevereiro'];
-
-        component['seriePathPointsDefinition'](component.containerSize, component.series, minMaxSeriesValues);
+        component.dataLabel = { fixed: true }; // Configurar o dataLabel
 
         const expectedResult = [
           [
@@ -199,7 +204,8 @@ describe('PoChartLineBaseComponent', () => {
               data: 5,
               xCoordinate: 104,
               yCoordinate: 28,
-              isActive: true
+              isActive: true,
+              isFixed: true // Adicionar isFixed
             },
             {
               category: 'fevereiro',
@@ -209,11 +215,14 @@ describe('PoChartLineBaseComponent', () => {
               data: 10,
               xCoordinate: 168,
               yCoordinate: 8,
-              isActive: true
+              isActive: true,
+              isFixed: true // Adicionar isFixed
             }
           ]
         ];
 
+        component['seriePathPointsDefinition'](component.containerSize, component.series, minMaxSeriesValues);
+
         expect(component.seriesPointsCoordinates).toEqual(expectedResult);
         expect(component.seriesPointsCoordinates.length).toBe(1);
         expect(component.seriesPointsCoordinates[0].length).toBe(2);
@@ -234,7 +243,8 @@ describe('PoChartLineBaseComponent', () => {
               data: 10,
               xCoordinate: 93,
               yCoordinate: 8,
-              isActive: true
+              isActive: true,
+              isFixed: undefined
             },
             {
               category: 'março',
@@ -244,7 +254,8 @@ describe('PoChartLineBaseComponent', () => {
               data: 12,
               xCoordinate: 178,
               yCoordinate: 0,
-              isActive: true
+              isActive: true,
+              isFixed: undefined
             }
           ]
         ];
@@ -253,7 +264,7 @@ describe('PoChartLineBaseComponent', () => {
 
         expect(component.seriesPointsCoordinates).toEqual(expectedPointsResult);
         expect(component.seriesPathsCoordinates).toEqual([
-          { coordinates: ' M93 8 L178 0', color: '#29B6C5', isActive: true }
+          { coordinates: ' M93 8 L178 0', color: '#29B6C5', isActive: true, isFixed: undefined }
         ]);
       });
 
@@ -274,7 +285,7 @@ describe('PoChartLineBaseComponent', () => {
 
         component['seriePathPointsDefinition'](component.containerSize, component.series, minMaxSeriesValues);
 
-        const expectedResult = [{ coordinates: ' M136 28', color: '#29B6C5', isActive: true }];
+        const expectedResult = [{ coordinates: ' M136 28', color: '#29B6C5', isActive: true, isFixed: undefined }];
 
         expect(component.seriesPathsCoordinates).toEqual(expectedResult);
         expect(component.seriesPathsCoordinates.length).toBe(1);
@@ -418,5 +429,19 @@ describe('PoChartLineBaseComponent', () => {
 
       expect(spyseriePathPointsDefinition).not.toHaveBeenCalled();
     });
+
+    describe('isFixed:', () => {
+      it('should include `isFixed` property in `pointCoordinates` when `dataLabel?.fixed` is true', () => {
+        component.dataLabel = { fixed: true };
+
+        component.series = [{ label: 'Test', data: [10], type: PoChartType.Line, color: 'blue' }];
+
+        component['seriePathPointsDefinition'](component.containerSize, component.series, range);
+
+        const point = component.seriesPointsCoordinates[0][0];
+
+        expect(point.isFixed).toBeTrue();
+      });
+    });
   });
 });