feat(chart): adiciona gráfico do tipo gauge

O gráfico do tipo gauge permite a visualização de uma
única série com um alcance entre 0 e 100%.

Fixes DTHFUI-1738

Author: samir-ayoub

projects/ui/src/lib/components/po-chart/enums/po-chart-type.enum.ts

@@ -12,6 +12,12 @@ export enum PoChartType {
    */
   Donut = 'donut',
 
+  /**
+   * O gráfico de *gauge* fornece como opção uma melhor relação de intensidade de dados que nos gráficos de pizza padrão ou rosca, uma vez
+   * que o centro em branco pode ser usado para exibir dados adicionais relacionados.
+   */
+  Gauge = 'gauge',
+
   /**
    * Exibe os dados em formato circular, dividindo proporcionalmente em fatias.
    */

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

@@ -1,5 +1,6 @@
 export * from './enums/po-chart-type.enum';
 export * from './po-chart-types/po-chart-donut/po-chart-donut-series.interface';
+export * from './po-chart-types/po-chart-gauge/po-chart-gauge-series.interface';
 export * from './po-chart-types/po-chart-pie/po-chart-pie-series.interface';
 export * from './po-chart.component';
 

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

@@ -45,6 +45,15 @@ describe('PoChartBaseComponent:', () => {
       expect(component.rebuildComponent).toHaveBeenCalled();
     });
 
+    it('p-height: should call `setDefaultHeight` if height isn`t defined`', () => {
+      spyOn(component, <any>'setDefaultHeight').and.callThrough();
+
+      const expectedHeight = component.height;
+
+      expect(component.height).toBe(expectedHeight);
+      expect(component['setDefaultHeight']).toHaveBeenCalled();
+    });
+
     it('p-height: should update property with 400 if invalid values.', () => {
       const invalidValues = [null, undefined, '', 'string', {}, [], false, true];
 
@@ -67,6 +76,26 @@ describe('PoChartBaseComponent:', () => {
       expectPropertiesValues(component, 'type', invalidValues, PoChartType.Pie);
     });
 
+    it('p-series: should update property with valid values', () => {
+      const validValues = [[{ value: 1, category: 'value' }], [], { value: 1, description: 'value' }];
+
+      expectPropertiesValues(component, 'series', validValues, validValues);
+    });
+
+    it('p-series: should update property if invalid values', () => {
+      const invalidValues = [undefined, null, '', false, 0];
+
+      expectPropertiesValues(component, 'series', invalidValues, []);
+    });
+
+    it('p-series: should call `transformObjectToArrayObject` if series is an object', () => {
+      spyOn(component, <any>'transformObjectToArrayObject');
+
+      component.series = { value: 1, description: 'value' };
+
+      expect(component['transformObjectToArrayObject']).toHaveBeenCalledWith(component.series);
+    });
+
   });
 
   describe('Methods:', () => {
@@ -93,6 +122,36 @@ describe('PoChartBaseComponent:', () => {
       expect(component.seriesHover.emit).toHaveBeenCalledWith(eventMock);
     });
 
+    it('setDefaultHeight: should return `200` if type is `Gauge`', () => {
+      component.type = PoChartType.Gauge;
+
+      const expectedResult = component['setDefaultHeight']();
+
+      expect(expectedResult).toBe(200);
+    });
+
+    it('setDefaultHeight: should return `400` if type is different from `Gauge`', () => {
+      component.type = PoChartType.Pie;
+
+      const expectedResult = component['setDefaultHeight']();
+
+      expect(expectedResult).toBe(400);
+    });
+
+    it('transformObjectToArrayObject: should return an array containing the serie`s object', () => {
+      const serie = {value: 1, description: 'description'};
+      const expectedResult = component['transformObjectToArrayObject'](serie);
+
+      expect(expectedResult).toEqual([serie]);
+    });
+
+    it('transformObjectToArrayObject: should return an empty array if the serie is an object without length', () => {
+      const serie = <any>{};
+      const expectedResult = component['transformObjectToArrayObject'](serie);
+
+      expect(expectedResult).toEqual([]);
+    });
+
   });
 
 });

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

@@ -2,6 +2,7 @@ import { EventEmitter, Input, Output } from '@angular/core';
 
 import { convertToInt, isTypeof } from '../../utils/util';
 
+import { PoChartGaugeSerie } from './po-chart-types/po-chart-gauge/po-chart-gauge-series.interface';
 import { PoChartType } from './enums/po-chart-type.enum';
 import { PoDonutChartSeries } from './po-chart-types/po-chart-donut/po-chart-donut-series.interface';
 import { PoPieChartSeries } from './po-chart-types/po-chart-pie/po-chart-pie-series.interface';
@@ -10,31 +11,33 @@ const poChartDefaultHeight = 400;
 const poChartMinHeight = 200;
 const poChartTypeDefault = PoChartType.Pie;
 
+export type PoChartSeries = Array<PoDonutChartSeries | PoPieChartSeries | PoChartGaugeSerie>;
+
 /**
  * @description
  *
  * O `po-chart` é um componente para renderização de dados através de gráficos, com isso facilitando a compreensão e tornando a
  * visualização destes dados mais agradável.
  *
- * Este componente também possibilita a definição das seguintes propriedades:
- *  - altura
- *  - series
- *  - tipo
- *  - título
+ * Através de suas principais propriedades é possível definir o tipo de gráfico, uma altura e um título.
  *
- * Além das definições de propriedades, também é possível definir uma ação que será executada ao clicar em determinado elemento do gráfico
+ * Além disso, também é possível definir uma ação que será executada ao clicar em determinado elemento do gráfico
  * e outra que será executada ao passar o *mouse* sobre o elemento.
  *
  * #### Boas práticas
  *
  * - Para que o gráfico não fique ilegível e incompreensível, evite uma quantia excessiva de séries.
- *
+ * - Para exibir a intensidade de um único dado dê preferência ao tipo `gauge`.
  */
 export abstract class PoChartBaseComponent {
 
-  private _height?: number = poChartDefaultHeight;
+  private _height: number;
+  private _series: Array<PoDonutChartSeries | PoPieChartSeries> | PoChartGaugeSerie;
   private _type: PoChartType = poChartTypeDefault;
 
+  // manipulação das séries tratadas internamente para preservar 'p-series';
+  protected chartSeries: PoChartSeries;
+
   public readonly poChartType = PoChartType;
 
   /**
@@ -44,7 +47,11 @@ export abstract class PoChartBaseComponent {
    *
    * Define a altura do gráfico.
    *
-   * > O valor mínimo que pode ser informado é 200.
+   * O valor padrão dos gráficos são:
+   * - para o tipo *gauge*: `200px`;
+   * - para os demais tipos: `400px`.
+   *
+   * > O valor mínimo aceito nesta propriedade é 200.
    *
    * @default `400px`
    */
@@ -55,7 +62,7 @@ export abstract class PoChartBaseComponent {
     if (isTypeof(value, 'number')) {
       height = intValue <= poChartMinHeight ? poChartMinHeight : intValue;
     } else {
-      height = poChartDefaultHeight;
+      height = this.setDefaultHeight();
     }
 
     this._height = height;
@@ -64,7 +71,7 @@ export abstract class PoChartBaseComponent {
   }
 
   get height(): number {
-    return this._height;
+    return this._height || this.setDefaultHeight();
   }
 
   /**
@@ -75,8 +82,17 @@ export abstract class PoChartBaseComponent {
    * > A coleção de objetos deve implementar alguma das interfaces abaixo:
    * - `PoDonutChartSeries`
    * - `PoPieChartSeries`
+   * - `PoChartGaugeSerie`
    */
-  @Input('p-series') series: Array<PoDonutChartSeries | PoPieChartSeries>;
+  @Input('p-series') set series(value: PoChartGaugeSerie | Array<PoDonutChartSeries | PoPieChartSeries>) {
+    this._series = value || [];
+
+    this.chartSeries = Array.isArray(this._series) ? [...this._series] : this.transformObjectToArrayObject(this._series);
+  }
+
+  get series() {
+    return this._series;
+  }
 
   /** Define o título do gráfico. */
   @Input('p-title') title?: string;
@@ -103,20 +119,28 @@ export abstract class PoChartBaseComponent {
   }
 
   /**
+   * @optional
+   *
+   * @description
+   *
    * Evento executado quando o usuário clicar sobre um elemento do gráfico.
    *
    * > Será passado por parâmetro um objeto contendo a categoria e valor da série.
    */
   @Output('p-series-click')
-  seriesClick?: EventEmitter<any> = new EventEmitter<any>();
+  seriesClick = new EventEmitter<PoDonutChartSeries | PoPieChartSeries | PoChartGaugeSerie>();
 
   /**
+   * @optional
+   *
+   * @description
+   *
    * Evento executado quando o usuário passar o *mouse* sobre um elemento do gráfico.
    *
    * > Será passado por parâmetro um objeto contendo a categoria e valor da série.
    */
   @Output('p-series-hover')
-  seriesHover?: EventEmitter<any> = new EventEmitter<any>();
+  seriesHover = new EventEmitter<PoDonutChartSeries | PoPieChartSeries | PoChartGaugeSerie>();
 
   onSeriesClick(event: any): void {
     this.seriesClick.emit(event);
@@ -126,6 +150,14 @@ export abstract class PoChartBaseComponent {
     this.seriesHover.emit(event);
   }
 
+  private setDefaultHeight() {
+    return this.type === PoChartType.Gauge ? poChartMinHeight : poChartDefaultHeight;
+  }
+
+  private transformObjectToArrayObject(serie: PoChartGaugeSerie) {
+    return typeof serie === 'object' && Object.keys(serie).length ? [{...serie}] : [];
+  }
+
   abstract rebuildComponent(): void;
 
 }

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

@@ -0,0 +1,8 @@
+<div class="po-chart-legend">
+  <div class="po-chart-legend-container">
+    <div class="po-chart-legend-item" *ngFor="let serie of series; let i = index">
+      <div class="po-chart-legend-square" [style.background]="colors[i]"></div>
+      <span class="po-chart-legend-text">{{ serie.category }}</span>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,45 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PoChartLegendComponent } from './po-chart-legend.component';
+
+describe('PoChartLegendComponent:', () => {
+
+  let component: PoChartLegendComponent;
+  let fixture: ComponentFixture<PoChartLegendComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [PoChartLegendComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoChartLegendComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should be created', () => {
+    expect(component instanceof PoChartLegendComponent).toBeTruthy();
+  });
+
+  describe('Templates:', () => {
+
+    it('should apply valid text and color values', () => {
+      component.series = <any>[{value: 10, category: '1'}, {value: 20, category: '2'}];
+      component.colors = ['red', 'green'];
+
+      fixture.detectChanges();
+
+      const legendSquare = fixture.debugElement.nativeElement.querySelectorAll('.po-chart-legend-square');
+      const legendText = fixture.debugElement.nativeElement.querySelectorAll('.po-chart-legend-text');
+
+      expect(legendSquare[0].getAttribute('style')).toBe('background: red;');
+      expect(legendText[0].textContent.trim()).toBe(component.series[0].category);
+      expect(legendSquare[1].getAttribute('style')).toBe('background: green;');
+      expect(legendText[1].textContent.trim()).toBe(component.series[1].category);
+    });
+
+  });
+
+});

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

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { PoCircularChartSeries } from '../po-chart-types/po-chart-circular/po-chart-circular-series.interface';
+
+@Component({
+  selector: 'po-chart-legend',
+  templateUrl: './po-chart-legend.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PoChartLegendComponent {
+
+  @Input('p-colors') colors: Array<string>;
+
+  @Input('p-series') series: PoCircularChartSeries;
+
+}

projects/ui/src/lib/components/po-chart/po-chart-types/po-chart-circular/po-chart-circular.constant.ts

@@ -2,5 +2,12 @@ const poChartAnimationDurationTime = 1500;
 
 export const poChartAngleStepInterval = Math.PI * 2 / Math.floor( poChartAnimationDurationTime / 60 );
 export const poChartCompleteCircle = 0.0001;
+export const poChartGaugeStartAngle = -Math.PI;
 export const poChartPadding: number = 24;
 export const poChartStartAngle = -Math.PI / 2;
+
+// tamanho da largura da serie proporcional ao grafico do tipo Donut, o valor 0.27 fica proximo de 32px
+export const poChartDonutSerieWidth = 0.27;
+
+// tamanho da largura da serie proporcional ao grafico do tipo Gauge, o valor 0.04 fica proximo de 8px
+export const poChartGaugeSerieWidth = 0.06;