feat(chart): adiciona possibilidade de formatação do eixo de valor

O componente po-chart não realiza a formatação do milhares eixo de valor
do gráfico, dificultando a visualização de grandes valores. Adiciona a
propriedade labelType, que indica o tipo de formatação que deve ser
aplicada ao eixo de valor do gráfico.

Fixes #2358

Author: leonardofrocio

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

@@ -0,0 +1,33 @@
+/**
+ * @usedBy PoChartComponent
+ *
+ * @description
+ *
+ * *Enum* `PoChartLabelFormat` para especificação dos tipos de formatação do eixo de valor no gráfico.
+ */
+export enum PoChartLabelFormat {
+  /**
+   * Os valores serão exibidos no formato numérico com duas casas decimais. Equivalente ao formato `'1.2-2'` da [DecimalPipe](https://angular.io/api/common/DecimalPipe).
+   */
+  Number = 'number',
+
+  /**
+   * Os valores serão exibidos com o símbolo monetário de acordo com a formatação padrão da aplicação, isto é, o valor do token [DEFAULT_CURRENCY_CODE](https://angular.dev/api/core/DEFAULT_CURRENCY_CODE). Para adequar ao padrão numérico brasileiro, é necessário configurar o [LOCALE_ID](https://angular.dev/api/core/LOCALE_ID) da aplicação. A configuração pode ser feita da seguinte forma:
+   * ```
+   * import { LOCALE_ID } from '@angular/core';
+   * import { registerLocaleData } from '@angular/common';
+   * import localePt from '@angular/common/locales/pt';
+   *
+   * registerLocaleData(localePt);
+   *
+   * @NgModule({
+   *   providers: [
+   *     { provide: LOCALE_ID, useValue: 'pt-BR' },
+   *     { provide: DEFAULT_CURRENCY_CODE, useValue: 'BRL' }
+   *   ]
+   * })
+   * export class AppModule { }
+   * ```
+   */
+  Currency = 'currency'
+}

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

@@ -1,6 +1,7 @@
 export * from './interfaces/po-chart-serie.interface';
 
 export * from './enums/po-chart-type.enum';
+export * from './enums/po-chart-label-format.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';

projects/ui/src/lib/components/po-chart/interfaces/po-chart-axis-options.interface.ts

@@ -1,3 +1,5 @@
+import { PoChartLabelFormat } from '../enums/po-chart-label-format.enum';
+
 /**
  * @usedBy PoChartComponent
  *
@@ -36,4 +38,13 @@ export interface PoChartAxisOptions {
    * > Esta definição não deve refletir na plotagem das séries. Os valores máximos e mínimos encontrados nas séries serão as bases para seus alcance.
    */
   minRange?: number;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Define o tipo do label e a formatação exibida no eixo de valor.
+   */
+  labelType?: PoChartLabelFormat;
 }

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

@@ -2,6 +2,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PoChartAxisLabelComponent } from './po-chart-axis-label.component';
 import { PoChartType } from '../../../enums/po-chart-type.enum';
+import { PoChartModule } from '../../../po-chart.module';
+import { PoChartLabelFormat } from '../../../enums/po-chart-label-format.enum';
+import { DEFAULT_CURRENCY_CODE } from '@angular/core';
 
 describe('PoChartAxisXLabelComponent', () => {
   let component: PoChartAxisLabelComponent;
@@ -10,7 +13,9 @@ describe('PoChartAxisXLabelComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [PoChartAxisLabelComponent]
+      imports: [PoChartModule],
+      declarations: [PoChartAxisLabelComponent],
+      providers: [{ provide: DEFAULT_CURRENCY_CODE, useValue: 'BRL' }]
     }).compileComponents();
   });
 
@@ -33,6 +38,51 @@ describe('PoChartAxisXLabelComponent', () => {
 
       expect(component.trackBy(index)).toBe(expectedValue);
     });
+
+    describe('formatValueAxis:', () => {
+      it('shouldn`t apply format to X axis if graphic type is bar', () => {
+        const value: string = '10000.00';
+
+        component.axisOptions = { labelType: PoChartLabelFormat.Number };
+        component.type = PoChartType.Bar;
+
+        expect(component.formatValueAxis(value, 'x')).toBe(value);
+      });
+
+      it('shouldn`t apply format to Y axis if graphic type is not bar', () => {
+        const value: string = '35000.00';
+
+        component.axisOptions = { labelType: PoChartLabelFormat.Number };
+        component.type = PoChartType.Column;
+
+        expect(component.formatValueAxis(value, 'y')).toBe(value);
+      });
+
+      it('should return original value', () => {
+        const value: string = '27000.00';
+        expect(component.formatValueAxis(value, 'x')).toBe(value);
+      });
+
+      it('should return formatted currency', () => {
+        const value = '10000.00';
+        const expectedValue: string = 'R$10,000.00';
+
+        component.axisOptions = { labelType: PoChartLabelFormat.Currency };
+        component.type = PoChartType.Column;
+
+        expect(component.formatValueAxis(value, 'x')).toBe(expectedValue);
+      });
+
+      it('should return formatted number', () => {
+        const value: string = '1291355450.00';
+        const expectedValue: string = '1,291,355,450.00';
+
+        component.axisOptions = { labelType: PoChartLabelFormat.Number };
+        component.type = PoChartType.Column;
+
+        expect(component.formatValueAxis(value, 'x')).toBe(expectedValue);
+      });
+    });
   });
 
   describe('Template:', () => {

projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis-label/po-chart-axis-label.component.svg

@@ -2,6 +2,9 @@ import { Component, Input } from '@angular/core';
 
 import { PoChartType } from '../../../enums/po-chart-type.enum';
 import { PoChartLabelCoordinates } from '../../../interfaces/po-chart-label-coordinates.interface';
+import { PoChartAxisOptions } from '../../../interfaces/po-chart-axis-options.interface';
+import { CurrencyPipe, DecimalPipe } from '@angular/common';
+import { PoChartLabelFormat } from '../../../enums/po-chart-label-format.enum';
 
 @Component({
   selector: '[po-chart-axis-label]',
@@ -17,9 +20,33 @@ export class PoChartAxisLabelComponent {
 
   @Input('p-type') type: PoChartType;
 
-  constructor() {}
+  @Input('p-options') axisOptions: PoChartAxisOptions;
+
+  constructor(
+    private decimalPipe: DecimalPipe,
+    private currencyPipe: CurrencyPipe
+  ) {}
 
   trackBy(index) {
     return index;
   }
+
+  formatValueAxis(label: string, axis: string): string {
+    const isCategoryAxisValue: boolean =
+      (this.type === PoChartType.Bar && axis === 'x') || (this.type !== PoChartType.Bar && axis === 'y');
+
+    if (isCategoryAxisValue) {
+      return label;
+    }
+
+    if (this.axisOptions?.labelType === PoChartLabelFormat.Currency) {
+      return this.currencyPipe.transform(label, null, 'symbol', '1.2-2');
+    }
+
+    if (this.axisOptions?.labelType === PoChartLabelFormat.Number) {
+      return this.decimalPipe.transform(label, '1.2-2');
+    }
+
+    return label;
+  }
 }

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

@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, CurrencyPipe, DecimalPipe } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { PoTooltipModule } from '../../directives/po-tooltip/po-tooltip.module';
@@ -51,6 +51,7 @@ import { PoResizeObserverDirective } from './directives/po-resize-observer.direc
     PoChartTooltipDirective,
     PoResizeObserverDirective
   ],
-  exports: [PoChartComponent]
+  exports: [PoChartComponent],
+  providers: [DecimalPipe, CurrencyPipe]
 })
 export class PoChartModule {}

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

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { PoChartType, PoChartOptions, PoChartSerie, PoDialogService } from '@po-ui/ng-components';
+import { PoChartType, PoChartOptions, PoChartSerie, PoDialogService, PoChartLabelFormat } from '@po-ui/ng-components';
 
 @Component({
   selector: 'sample-po-chart-coffee-ranking',
@@ -100,7 +100,8 @@ export class SamplePoChartCoffeeRankingComponent {
   consumptionPerCapitaOptions: PoChartOptions = {
     axis: {
       maxRange: 100,
-      gridLines: 2
+      gridLines: 2,
+      labelType: PoChartLabelFormat.Number
     }
   };
 
@@ -115,7 +116,8 @@ export class SamplePoChartCoffeeRankingComponent {
     axis: {
       minRange: 0,
       maxRange: 40,
-      gridLines: 5
+      gridLines: 5,
+      labelType: PoChartLabelFormat.Number
     }
   };
 

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

@@ -137,6 +137,16 @@
     >
     </po-number>
 
+    <po-select
+      class="po-md-4"
+      name="labelType"
+      [(ngModel)]="options.axis.labelType"
+      p-label="labelType"
+      [p-options]="labelTypeOptions"
+      (p-change)="addOptions()"
+    >
+    </po-select>
+
     <po-checkbox-group
       class="po-md-4"
       name="propertiesOptions"