feat(charts): implementa chart do tipo column

CSimoesJr · CSimoesJr · commit 68344717603f · 2025-04-22T10:44:54.000-03:00
diff --git a/projects/ui/src/lib/components/po-chart-new/po-chart-new-base.component.ts b/projects/ui/src/lib/components/po-chart-new/po-chart-new-base.component.ts
@@ -29,6 +29,31 @@ const poChartDefaultHeight = 400;
  *
  * > Veja nosso [guia de uso para gráficos](/guides/guide-charts) para auxiliar na construção do seu gráfico,
  * informando em qual caso utilizar, o que devemos evitar e boas práticas relacionada a cores.
+ *
+ * #### Tokens customizáveis
+ *
+ * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
+ *
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
+ *
+ * | Propriedade                              | Descrição                                             | Valor Padrão                                      |
+ * |------------------------------------------|-------------------------------------------------------|---------------------------------------------------|
+ * | **Header (.po-chart-header )**           |                                                       |                                                   |
+ * | `--background-color`                     | Cor de background do cabeçalho                        | `var(--color-neutral-light-00)`                   |
+ * | `--color`                                | Cor da fonte do cabeçalho                             | `var(--color-neutral-dark-70)`                    |
+ * | `--font-family`                          | Família tipográfica usada                             | `var(--font-family-theme)`                        |
+ * | `--font-size-title`                      | Tamanho da fonte                                      | `var(--font-size-default)`                        |
+ * | `--font-size-icons`                      | Tamanho dos ícones                                    | `var(--font-size-md)`                             |
+ * | `--font-weight`                          | Peso da fonte                                         | `var(--font-weight-bold)`                         |
+ * | **Chart (.po-chart)**                    |                                                       |                                                   |
+ * | `--background-color-grid`                | Cor de background                                     | `var(--color-neutral-light-00)`                   |
+ * | `--color-grid`                           | Cor da fonte                                          | `var(--color-neutral-light-20)`                   |
+ * | `--font-family-grid`                     | Família tipográfica usada                             | `var(--font-family-theme)`                        |
+ * | `--font-size-grid`                       | Tamanho da fonte                                      | `var(--font-size-xs)`                             |
+ * | `--font-weight-grid`                     | Peso da fonte                                         | `var(--font-weight-normal)`                       |
+ * | `--color-legend`                         | Cor da fonte da legenda                               | `var(--color-neutral-dark-70)`                    |
+ * | `--border-radius-bar`                    | Contém o valor do raio dos cantos do elemento         | `var(--border-radius-none)`                       |
+ * | `--color-grid-hover`                     | Cor no estado hover                                   | `var(--color-neutral-mid-60)`                     |
  */
 @Directive()
 export abstract class PoChartNewBaseComponent {
diff --git a/projects/ui/src/lib/components/po-chart-new/po-chart-new.component.html b/projects/ui/src/lib/components/po-chart-new/po-chart-new.component.html
@@ -33,7 +33,14 @@
     class="po-chart"
     [ngStyle]="headerHeight ? { height: height - headerHeight + 'px', 'margin-top': chartMarginTop } : null"
   ></div>
-  <div #tooltipElement id="custom-tooltip" [p-tooltip]="tooltipText" style="position: absolute"></div>
+  <div
+    #tooltipElement
+    id="custom-tooltip"
+    [p-tooltip]="tooltipText"
+    [p-hide-arrow]="true"
+    [p-inner-html]="true"
+    [p-tooltip-position]="positionTooltip"
+  ></div>
   <po-popup #popup [p-actions]="popupActions" p-position="bottom" [p-target]="targetRef"> </po-popup>
 </div>
 
diff --git a/projects/ui/src/lib/components/po-chart-new/po-chart-new.component.spec.ts b/projects/ui/src/lib/components/po-chart-new/po-chart-new.component.spec.ts
@@ -434,6 +434,19 @@ describe('PoChartNewComponent', () => {
         event: { offsetX: 10, offsetY: 20 }
       };
       mouseoverCallback(mockParams);
+
+      const mockParamsBar = {
+        seriesName: 'Exemplo',
+        value: 100,
+        name: 'Categoria X',
+        seriesType: 'bar',
+        seriesIndex: 0,
+        event: { offsetX: 10, offsetY: 20 }
+      };
+      mouseoverCallback(mockParamsBar);
+
+      expect(component['positionTooltip']).toBe('top');
+
       const clickCallback = component['chartInstance'].on.calls.argsFor(0)[1];
 
       const mockParamsClick = {};
@@ -497,7 +510,21 @@ describe('PoChartNewComponent', () => {
 
       mouseoverCallback(mockParams);
 
-      expect(component.tooltipText).toBe('Exemplo: 150');
+      expect(component.tooltipText.replace(/\s/g, '')).toBe(
+        '<b>Categoria Y</b><br>Exemplo:<b>150</b>'.replace(/\s/g, '')
+      );
+
+      const mockParamsNoSeriesName = {
+        value: 99,
+        name: 'Categoria Sem Nome',
+        seriesIndex: 0,
+        seriesType: 'line',
+        event: { offsetX: 5, offsetY: 10 }
+      };
+
+      mouseoverCallback(mockParamsNoSeriesName);
+
+      expect(component.tooltipText.replace(/\s/g, '')).toBe('CategoriaSemNome<b>99</b>'.replace(/\s/g, ''));
     });
   });
 
@@ -640,7 +667,8 @@ describe('PoChartNewComponent', () => {
       mockSeriesWithColor = [
         { label: 'Serie 1', data: [1, 2, 3], type: PoChartType.Column, color: 'po-color-01' },
         { label: 'Serie 2', data: [4, 5, 6], type: PoChartType.Line, color: 'po-color-02' },
-        { label: 'Serie 3', data: [7, 8, 9], color: '#123456' }
+        { label: 'Serie 3', data: [7, 8, 9], color: '#123456' },
+        { data: [10, 11, 12], color: '#abcdef' }
       ];
 
       spyOn(colorService, 'getColors').and.callFake((series: Array<any>) => series);
@@ -666,12 +694,13 @@ describe('PoChartNewComponent', () => {
 
       const result = component['setSeries']();
 
-      expect(result.length).toBe(3);
+      expect(result.length).toBe(4);
       expect(result[0].type).toBe('bar');
       expect(result[0].name).toBe('Serie 1');
       expect(result[0].itemStyle.color).toBe('#0000ff');
       expect(result[1].type).toBe('line');
       expect(result[2].type).toBe('bar');
+      expect(result[3].name).toBe('');
     });
 
     it('should return all types charts', () => {
@@ -725,22 +754,6 @@ describe('PoChartNewComponent', () => {
       expect(result[0].type).toBe('pie');
     });
 
-    it('should handle color variables and direct color values correctly', () => {
-      component.series = mockSeriesWithColor;
-
-      const result = component['setSeries']();
-      expect(result[0].itemStyle.color).toBe('#0000ff');
-      expect(result[2].itemStyle.color).toBe('#123456');
-    });
-
-    it('should set emphasis styles correctly', () => {
-      component.series = mockSeriesWithColor;
-
-      const result = component['setSeries']();
-      expect(result[0].emphasis.itemStyle.color).toBe('#0000ff');
-      expect(result[0].emphasis.itemStyle.borderWidth).toBe(2);
-    });
-
     it('should handle dataLabel.fixed configuration', () => {
       component.series = mockSeriesWithColor;
       component.dataLabel = { fixed: true };
diff --git a/projects/ui/src/lib/components/po-chart-new/po-chart-new.component.ts b/projects/ui/src/lib/components/po-chart-new/po-chart-new.component.ts
@@ -72,6 +72,7 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements Afte
   protected isExpanded = false;
   protected legendData: Array<{ name: string; color: string }> = [];
   protected headerHeight: number;
+  protected positionTooltip = 'bottom';
   protected popupActions: Array<PoPopupAction> = [
     {
       label: this.literals.exportCSV,
@@ -94,6 +95,7 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements Afte
   ];
   private chartInstance!: echarts.ECharts;
   private currentRenderer: 'svg' | 'canvas';
+  private boundaryGap = false;
 
   constructor(
     private el: ElementRef,
@@ -201,13 +203,20 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements Afte
 
     this.chartInstance.on('mouseover', (params: any) => {
       if (!params.value) return;
-      if (params.seriesType === 'line') {
+      if (params.seriesType) {
         const divTooltipElement = this.el.nativeElement.querySelector('#custom-tooltip');
         if (divTooltipElement) {
           const chartElement = this.el.nativeElement.querySelector('#chart-id');
+          if (params.seriesType === 'bar') {
+            this.positionTooltip = 'top';
+          }
+          const customTooltipText = params.seriesName
+            ? `<b>${params.name}</b><br>
+            ${params.seriesName}: <b>${params.value}</b>`
+            : `${params.name}<b>${params.value}</b>`;
           this.tooltipText = this.series[params.seriesIndex].tooltip
             ? this.series[params.seriesIndex].tooltip
-            : `${params.seriesName}: ${params.value}`;
+            : customTooltipText;
           divTooltipElement.style.left = `${params.event.offsetX + chartElement.offsetLeft + 3}px`;
           divTooltipElement.style.top = `${chartElement.offsetTop + params.event.offsetY + 3}px`;
           this.poTooltip.toggleTooltipVisibility(true);
@@ -243,12 +252,12 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements Afte
       grid: {
         top: paddingTop,
         left: this.options?.axis?.paddingLeft || 48,
-        right: 16,
+        right: this.options?.axis?.paddingRight || 32,
         borderWidth: tokenBorderWidthSm
       },
       xAxis: {
         type: 'category',
-        boundaryGap: false,
+        boundaryGap: this.boundaryGap,
         data: this.categories,
         axisLabel: {
           fontFamily: this.getCSSVariable('--font-family-grid', '.po-chart'),
@@ -313,7 +322,7 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements Afte
         realtime: true,
         bottom: 'calc(100%)',
         height: 20,
-        right: 16,
+        right: this.options?.axis?.paddingRight || 32,
         xAxisIndex: [0]
       },
       {
@@ -387,11 +396,10 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements Afte
     const hasArea = this.type === 'area' || this.series.some(serie => serie.type === 'area');
     const newSeries: Array<any> = [...this.colorService.getColors<PoChartSerie>(this.series, true, hasArea)];
     const tokenBorderWidthMd = this.resolvePx('--border-width-md');
+    const widthTypeColumn = this.resolvePx('--spacing-sm', '.po-chart');
 
     return newSeries.map((serie, index) => {
-      if (serie.label && typeof serie.label === 'string') {
-        serie.name = serie.label;
-      }
+      serie.name = serie.label && typeof serie.label === 'string' ? serie.label : '';
 
       if (!serie.type || serie.type === 'area' || serie.type === 'column') {
         !serie.type ? this.setTypeSerie(serie, this.type) : this.setTypeSerie(serie, serie.type);
@@ -402,22 +410,25 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements Afte
         : serie.color;
 
       this.setSerieEmphasis(serie, colorVariable, tokenBorderWidthMd);
+      this.setSerieTypeLine(serie, tokenBorderWidthMd, colorVariable);
       this.setSerieTypeArea(serie, index);
+      this.setSerieTypeColumn(serie, widthTypeColumn, colorVariable);
 
-      const isTypeLine = this.type === 'line' || serie.type === 'line';
-      if (isTypeLine) {
-        serie.symbolSize = 8;
-        serie.symbol = 'circle';
-      }
+      return serie;
+    });
+  }
+
+  private setSerieTypeLine(serie, tokenBorderWidthMd: number, color: string) {
+    if (serie.type === 'line') {
+      serie.symbolSize = 8;
+      serie.symbol = 'circle';
       serie.itemStyle = {
-        color:
-          isTypeLine && !this.options?.fillPoints ? this.getCSSVariable('--color-neutral-light-00') : colorVariable,
-        borderColor: colorVariable,
+        color: !this.options?.fillPoints ? this.getCSSVariable('--color-neutral-light-00') : color,
+        borderColor: color,
         borderWidth: tokenBorderWidthMd
       };
-      serie.lineStyle = { color: colorVariable, width: tokenBorderWidthMd };
-      return serie;
-    });
+      serie.lineStyle = { color: color, width: tokenBorderWidthMd };
+    }
   }
 
   private setSerieTypeArea(serie, index: number) {
@@ -434,6 +445,20 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements Afte
     }
   }
 
+  private setSerieTypeColumn(serie, width: number, color: string) {
+    if (serie.isTypeColumn) {
+      serie.barWidth = width;
+      serie.itemStyle = {
+        borderRadius: this.resolvePx('--border-radius-bar', '.po-chart'),
+        color: color
+      };
+      serie.emphasis = {
+        focus: 'series'
+      };
+      this.boundaryGap = true;
+    }
+  }
+
   private setSerieEmphasis(serie, color: string, tokenBorder: number) {
     serie.emphasis = {
       itemStyle: {
@@ -469,6 +494,7 @@ export class PoChartNewComponent extends PoChartNewBaseComponent implements Afte
         serie.type = 'bar';
         break;
       case PoChartType.Column:
+        serie.isTypeColumn = true;
         serie.type = 'bar';
         break;
       case PoChartType.Donut:
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
@@ -59,6 +59,17 @@ export interface PoChartAxisOptions {
    */
   paddingLeft?: number;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Permite aumentar ou diminuir o espaço o espaço direito do gráfico
+   *
+   * @default `32`
+   */
+  paddingRight?: number;
+
   /**
    * @optional
    *
diff --git a/projects/ui/src/lib/directives/po-tooltip/po-tooltip-base.directive.ts b/projects/ui/src/lib/directives/po-tooltip/po-tooltip-base.directive.ts
@@ -47,6 +47,37 @@ export abstract class PoTooltipBaseDirective {
    */
   @Input({ alias: 'p-append-in-body', transform: convertToBoolean }) appendInBody: boolean = false;
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Controla a exibição da seta de indicação da tooltip.
+   *
+   * Quando `true`, a seta que aponta para o elemento alvo será ocultada.
+   * Quando `false`, a seta será exibida normalmente.
+   *
+   * Essa propriedade é útil em cenários onde a seta não é necessária ou pode interferir no layout da aplicação.
+   *
+   * @default `false`
+   */
+  @Input({ alias: 'p-hide-arrow', transform: convertToBoolean }) hideArrow: boolean = false;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Permite a renderização de conteúdo HTML dentro da tooltip.
+   *
+   * Quando `true`, o valor da propriedade `tooltip` será interpretado como HTML,
+   * possibilitando a utilização de tags e elementos HTML dentro da tooltip.
+   * Caso `false`, o conteúdo será tratado como texto puro.
+   *
+   * @default `false`
+   */
+  @Input({ alias: 'p-inner-html', transform: convertToBoolean }) innerHtml: boolean = false;
+
   protected _tooltipPosition?: string = 'bottom';
   protected tooltipContent;
 
diff --git a/projects/ui/src/lib/directives/po-tooltip/po-tooltip.directive.spec.ts b/projects/ui/src/lib/directives/po-tooltip/po-tooltip.directive.spec.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2 } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
@@ -187,6 +187,33 @@ describe('PoTooltipDirective', () => {
     expect(directiveElement.nativeElement.querySelector('.po-tooltip-content')).toBeTruthy();
   });
 
+  it('should create tooltip with proper configurations', () => {
+    const renderer = fixture.debugElement.injector.get(Renderer2);
+    spyOn(renderer, 'setStyle').and.callThrough();
+    spyOn(renderer, 'setProperty').and.callThrough();
+
+    directive.hideArrow = true;
+    directive.innerHtml = true;
+    directive.tooltip = '<b>HTML</b>';
+    directive.createTooltip();
+
+    expect(renderer.setStyle).toHaveBeenCalledWith(jasmine.any(Object), 'display', 'none');
+
+    expect(renderer.setProperty).toHaveBeenCalledWith(jasmine.any(Object), 'innerHTML', '<b>HTML</b>');
+
+    (renderer.setStyle as jasmine.Spy).calls.reset();
+    (renderer.setProperty as jasmine.Spy).calls.reset();
+
+    directive.hideArrow = false;
+    directive.innerHtml = false;
+    directive.tooltip = 'Plain text';
+    directive.createTooltip();
+
+    expect(renderer.setStyle).not.toHaveBeenCalledWith(jasmine.any(Object), 'display', 'none');
+
+    expect(renderer.setProperty).not.toHaveBeenCalledWith(jasmine.any(Object), 'innerHTML', jasmine.any(String));
+  });
+
   it('onMouseEnter: should create tooltip ', fakeAsync(() => {
     directive.tooltip = 'TEXT';
     directive.tooltipContent = false;
@@ -377,13 +404,13 @@ describe('PoTooltipDirective', () => {
     expect(directive.tooltipContent).toBe(undefined);
   }));
 
-  it('should call update Text', () => {
+  it('should call update Text and set innerHTML when innerHtml is true', () => {
     directive.lastTooltipText = 'abc';
-    directive.tooltip = 'def';
-
+    directive.tooltip = '<b>def</b>';
+    directive.innerHtml = true;
     directive.updateTextContent();
 
-    expect(directive.divContent.outerHTML.indexOf('def') > -1).toBeTruthy();
+    expect(directive.divContent.innerHTML).toBe('<b>def</b>');
   });
 
   it('should keep text without changes', () => {
diff --git a/projects/ui/src/lib/directives/po-tooltip/po-tooltip.directive.ts b/projects/ui/src/lib/directives/po-tooltip/po-tooltip.directive.ts
