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

O gráfico do tipo Donut possui um formato de rosca
que exibe os valores proporcionalmente ao valor total do gráfico.

Fixes DTHFUI-1736

Author: jhonyeduardo

projects/ui/karma.conf.js

@@ -32,6 +32,12 @@ module.exports = function (config) {
           lines: 80,
           functions: 80,
           overrides: {
+            'src/lib/components/po-chart/po-chart-types/po-chart-donut/po-chart-donut.component.ts': {
+              branches: 50
+            },
+            'src/lib/components/po-chart/po-chart-types/po-chart-pie/po-chart-pie.component.ts': {
+              branches: 50
+            },
             'src/lib/components/po-chart/po-chart-types/po-chart-dynamic-type.component.ts': {
               branches: 50
             },

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

@@ -3,12 +3,17 @@
  *
  * @description
  *
- * *Enum* `PoChartType` para os tipos de gráficos.
+ * *Enum* `PoChartType` para especificação dos tipos de gráficos.
  */
 export enum PoChartType {
 
   /**
-   * **Gráfico pizza:** utilizado para exibir proporções de valores a partir de um todo.
+   * Exibe os dados em formato de rosca, dividindo em partes proporcionais.
+   */
+  Donut = 'donut',
+
+  /**
+   * Exibe os dados em formato circular, dividindo proporcionalmente em fatias.
    */
   Pie = 'pie'
 

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

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

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

@@ -3,6 +3,7 @@ import { EventEmitter } from '@angular/core';
 import { expectPropertiesValues } from './../../util-test/util-expect.spec';
 
 import { PoChartBaseComponent } from './po-chart-base.component';
+import { PoChartType } from './enums/po-chart-type.enum';
 
 class PoCharComponent extends PoChartBaseComponent {
 
@@ -54,18 +55,17 @@ describe('PoChartBaseComponent:', () => {
       expect(component.rebuildComponent).toHaveBeenCalled();
     });
 
-    // TODO quando aceitar types
-    // it('p-type: should update property with valid values.', () => {
-    //   const validValues = (<any>Object).values(PoChartType);
+    it('p-type: should update property with valid values.', () => {
+      const validValues = (<any>Object).values(PoChartType);
 
-    //   expectPropertiesValues(poChartBase, 'type', validValues, validValues);
-    // });
+      expectPropertiesValues(component, 'type', validValues, validValues);
+    });
 
-    // it('p-type: should update property with `PoChartType.Pie` if contains invalid values', () => {
-    //   const invalidValues = [undefined, null, '', true, false, 0, 1, 'aa', [], {}];
+    it('p-type: should update property with `PoChartType.Pie` if contains invalid values', () => {
+      const invalidValues = [undefined, null, '', true, false, 0, 1, 'aa', [], {}];
 
-    //   expectPropertiesValues(poChartBase, 'type', invalidValues, PoChartType.Pie);
-    // });
+      expectPropertiesValues(component, 'type', invalidValues, PoChartType.Pie);
+    });
 
   });
 

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

@@ -3,20 +3,24 @@ import { EventEmitter, Input, Output } from '@angular/core';
 import { convertToInt, isTypeof } from '../../utils/util';
 
 import { PoChartType } from './enums/po-chart-type.enum';
-import { PoPieChartSeries } from './interfaces/po-chart-series.interface';
+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';
 
 const poChartDefaultHeight = 400;
-const poChartTypeDefault = PoChartType.Pie;
 const poChartMinHeight = 200;
+const poChartTypeDefault = PoChartType.Pie;
 
 /**
  * @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 do gráfico; série(s) que irão compor o gráfico;
- * título do gráfico; e tipo de gráfico.
+ * Este componente também possibilita a definição das seguintes propriedades:
+ *  - altura
+ *  - series
+ *  - tipo
+ *  - 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
  * e outra que será executada ao passar o *mouse* sobre o elemento.
@@ -64,29 +68,35 @@ export abstract class PoChartBaseComponent {
   }
 
   /**
-   * Coleção de objetos que implementam a interface `PoPieChartSeries`, para definição dos elementos do gráfico que serão criados
-   * dinâmicamente.
+   * @description
+   *
+   * Define os elementos do gráfico que serão criados dinamicamente.
+   *
+   * > A coleção de objetos deve implementar alguma das interfaces abaixo:
+   * - `PoDonutChartSeries`
+   * - `PoPieChartSeries`
    */
-  @Input('p-series') series: Array<PoPieChartSeries>;
+  @Input('p-series') series: Array<PoDonutChartSeries | PoPieChartSeries>;
 
   /** Define o título do gráfico. */
   @Input('p-title') title?: string;
 
-  // TODO quando houver a necessidade de informar um type.
-  // /**
-  //  * @optional
-  //  *
-  //  * @description
-  //  *
-  //  * Define o tipo de gráfico.
-  //  *
-  //  * > Veja os valores válidos no *enum* `PoChartType`.
-  //  *
-  //  * @default `PoChartType.Pie`
-  //  */
-  // @Input('p-type') set type(value: PoChartType) {
-  //   this._type = (<any>Object).values(PoChartType).includes(value) ? value : poChartTypeDefault;
-  // }
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define o tipo de gráfico.
+   *
+   * > Veja os valores válidos no *enum* `PoChartType`.
+   *
+   * @default `PoChartType.Pie`
+   */
+  @Input('p-type') set type(value: PoChartType) {
+    this._type = (<any>Object).values(PoChartType).includes(value) ? value : poChartTypeDefault;
+
+    this.rebuildComponent();
+  }
 
   get type(): PoChartType {
     return this._type;

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

@@ -13,3 +13,6 @@ export const PoChartColors = [
   ['#0C6C94', '#00BAD5', '#00A7C7', '#0197B8', '#0088AC', '#23789F', '#2B6992', '#315C87', '#364E7C', '#36436F', '#32285C'],
   ['#0C6C94', '#00BAD5', '#00A7C7', '#0197B8', '#0088AC', '#23789F', '#2B6992', '#315C87', '#364E7C', '#36436F', '#333565', '#32285C'],
 ];
+
+// Cores que será utilizado texto preto
+export const PoSeriesTextBlack = [ '#94DAE2', '#C9ECF0' ];

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

@@ -0,0 +1,9 @@
+export interface PoCircularChartSeries {
+
+  /** Define o valor da categoria do objeto. */
+  category: string;
+
+  /** Define o valor do objeto. */
+  value: number;
+
+}