diff --git a/projects/ui/src/lib/components/po-chart/enums/po-chart-label-format.enum.ts b/projects/ui/src/lib/components/po-chart/enums/po-chart-label-format.enum.ts new file mode 100644 index 0000000000..30b6eaf063 --- /dev/null +++ b/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' +} diff --git a/projects/ui/src/lib/components/po-chart/index.ts b/projects/ui/src/lib/components/po-chart/index.ts index f68ca4229e..3eaf1f884d 100644 --- a/projects/ui/src/lib/components/po-chart/index.ts +++ b/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'; diff --git a/projects/ui/src/lib/components/po-chart/interfaces/po-chart-axis-options.interface.ts b/projects/ui/src/lib/components/po-chart/interfaces/po-chart-axis-options.interface.ts index 6e5b6cb9f9..5c3686f9f0 100644 --- a/projects/ui/src/lib/components/po-chart/interfaces/po-chart-axis-options.interface.ts +++ b/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; } diff --git a/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis-label/po-chart-axis-label.component.spec.ts b/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis-label/po-chart-axis-label.component.spec.ts index 7413d1d48d..5f862d7a0d 100644 --- a/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis-label/po-chart-axis-label.component.spec.ts +++ b/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:', () => { diff --git a/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis-label/po-chart-axis-label.component.svg b/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis-label/po-chart-axis-label.component.svg index b4e9b53990..9d8e89811a 100644 --- a/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis-label/po-chart-axis-label.component.svg +++ b/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis-label/po-chart-axis-label.component.svg @@ -3,8 +3,8 @@ class="po-chart-axis-x-label" dominant-baseline="middle" [attr.x]="item.xCoordinate" - [attr.y]="item.yCoordinate"> - {{ item.label }} + [attr.y]="item.yCoordinate"> + {{ formatValueAxis(item.label, "x") }} @@ -14,6 +14,6 @@ [class.po-chart-centered-label]="!alignByTheCorners" [attr.x]="item.xCoordinate" [attr.y]="item.yCoordinate"> - {{ item.label }} + {{ formatValueAxis(item.label, "y") }} \ No newline at end of file diff --git a/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis-label/po-chart-axis-label.component.ts b/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis-label/po-chart-axis-label.component.ts index a6e6e5fc09..92aa3c0c8b 100644 --- a/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis-label/po-chart-axis-label.component.ts +++ b/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis-label/po-chart-axis-label.component.ts @@ -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]', @@ -16,9 +19,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; + } } diff --git a/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis.component.svg b/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis.component.svg index daec09d254..e899df27d1 100644 --- a/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis.component.svg +++ b/projects/ui/src/lib/components/po-chart/po-chart-container/po-chart-axis/po-chart-axis.component.svg @@ -5,5 +5,6 @@ [p-axis-x-label-coordinates]="axisXLabelCoordinates" [p-axis-y-label-coordinates]="axisYLabelCoordinates" [p-type]="type" + [p-options]="axisOptions" > \ No newline at end of file diff --git a/projects/ui/src/lib/components/po-chart/po-chart.module.ts b/projects/ui/src/lib/components/po-chart/po-chart.module.ts index 79dcea1cae..6f4391cd8f 100644 --- a/projects/ui/src/lib/components/po-chart/po-chart.module.ts +++ b/projects/ui/src/lib/components/po-chart/po-chart.module.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 {} diff --git a/projects/ui/src/lib/components/po-chart/samples/sample-po-chart-coffee-ranking/sample-po-chart-coffee-ranking.component.ts b/projects/ui/src/lib/components/po-chart/samples/sample-po-chart-coffee-ranking/sample-po-chart-coffee-ranking.component.ts index 34b42ef001..6971efc755 100644 --- a/projects/ui/src/lib/components/po-chart/samples/sample-po-chart-coffee-ranking/sample-po-chart-coffee-ranking.component.ts +++ b/projects/ui/src/lib/components/po-chart/samples/sample-po-chart-coffee-ranking/sample-po-chart-coffee-ranking.component.ts @@ -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', @@ -99,7 +99,8 @@ export class SamplePoChartCoffeeRankingComponent { consumptionPerCapitaOptions: PoChartOptions = { axis: { maxRange: 100, - gridLines: 2 + gridLines: 2, + labelType: PoChartLabelFormat.Number } }; @@ -114,7 +115,8 @@ export class SamplePoChartCoffeeRankingComponent { axis: { minRange: 0, maxRange: 40, - gridLines: 5 + gridLines: 5, + labelType: PoChartLabelFormat.Number } }; diff --git a/projects/ui/src/lib/components/po-chart/samples/sample-po-chart-labs/sample-po-chart-labs.component.html b/projects/ui/src/lib/components/po-chart/samples/sample-po-chart-labs/sample-po-chart-labs.component.html index f27f05c109..f35e735648 100644 --- a/projects/ui/src/lib/components/po-chart/samples/sample-po-chart-labs/sample-po-chart-labs.component.html +++ b/projects/ui/src/lib/components/po-chart/samples/sample-po-chart-labs/sample-po-chart-labs.component.html @@ -137,6 +137,16 @@ > + + + = [{ value: 'fixed', label: 'Fixed' }]; + readonly labelTypeOptions: Array = [ + { label: 'Number', value: PoChartLabelFormat.Number }, + { label: 'Currency', value: PoChartLabelFormat.Currency } + ]; + ngOnInit() { this.restore(); } @@ -114,7 +121,8 @@ export class SamplePoChartLabsComponent implements OnInit { axis: { minRange: undefined, maxRange: undefined, - gridLines: undefined + gridLines: undefined, + labelType: undefined } }; }