feat(chart): adiciona customização da tooltip via innerHtml

Adiciona customização da tooltip via innerHtml;
Adiciona tratamento para formatação customizada;

Fixes: DTHFUI-11702

Author: arthur-polidorio

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

@@ -54,13 +54,44 @@ export interface PoChartSerie {
    *
    * @description
    *
-   * Define o texto que será exibido ao passar o mouse por cima das séries do *chart*.
+   * Define o texto que será exibido na tooltip ao passar o mouse por cima das séries do *chart*.
+   *
+   * Formatos aceitos:
+   *
+   * - **string**: pode conter marcadores dinâmicos e HTML simples.
+   *  - Marcadores disponíveis:
+   *   - `{name}` → Nome do item/categoria.
+   *   - `{seriesName}` → Nome da série.
+   *   - `{value}` → Valor correspondente.
+   *
+   * - **function**: função que recebe o objeto `params` e deve retornar uma *string* com o conteúdo da tooltip.
+   *
+   * > É possível utilizar marcação HTML simples (`<b>`, `<i>`, `<br>`, `<hr>`, etc.) que será interpretada via `innerHTML`.
+   *
+   * > Formatação customizada (será convertido internamente para HTML):
+   * - `\n` → quebra de linha (`<br>`).
+   * - `**texto**` → negrito (`<b>`).
+   * - `__texto__` → itálico (`<i>`).
    *
    * > Caso não seja informado um valor para o *tooltip*, será exibido da seguinte forma:
    * - `donut`: `label`: valor proporcional ao total em porcentagem.
    * - `area`, `bar`, `column`, `line` e `pie`: `label`: `data`.
+   *
+   * ### Exemplos:
+   *
+   * **Usando string com placeholders:**
+   * ```ts
+   * tooltip: 'Ano: {name}<br>Série: {seriesName}<br>Valor: <b>{value}</b>'
+   * ```
+   *
+   * **Usando função de callback:**
+   * ```ts
+   * tooltip = (params) => {
+   *   return `Ano: ${params.name}<br><i>Valor:</i> ${params.value}`;
+   * }
+   * ```
    */
-  tooltip?: string;
+  tooltip?: string | ((params: any) => string);
 
   /**
    * @optional

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

@@ -934,6 +934,61 @@ describe('PoChartComponent', () => {
     });
   });
 
+  describe('parseTooltipText', () => {
+    it('should return the same value when text is undefined', () => {
+      const result = (component as any).parseTooltipText(undefined);
+      expect(result).toBeUndefined();
+    });
+
+    it('should return the same value when text is null', () => {
+      const result = (component as any).parseTooltipText(null);
+      expect(result).toBeNull();
+    });
+
+    it('should return the same value when text is empty string', () => {
+      const result = (component as any).parseTooltipText('');
+      expect(result).toBe('');
+    });
+
+    it('should parse \\n into <br>', () => {
+      const result = (component as any).parseTooltipText('linha1\nlinha2');
+      expect(result).toBe('linha1<br>linha2');
+    });
+
+    it('should parse ** into <b>', () => {
+      const result = (component as any).parseTooltipText('valor **negrito** aqui');
+      expect(result).toBe('valor <b>negrito</b> aqui');
+    });
+
+    it('should parse __ into <i>', () => {
+      const result = (component as any).parseTooltipText('um __itálico__ aqui');
+      expect(result).toBe('um <i>itálico</i> aqui');
+    });
+  });
+
+  describe('resolveCustomTooltip', () => {
+    it('should call tooltip function when serie.tooltip is a function', () => {
+      const params = {
+        name: 'Jan',
+        seriesName: 'Serie 1',
+        value: 100,
+        seriesIndex: 0,
+        dataIndex: 0,
+        seriesType: 'line'
+      };
+
+      const tooltipFn = jasmine.createSpy().and.returnValue('Custom **tooltip**\nValue: __100__');
+
+      component.series = [{ label: 'Serie 1', data: [100], tooltip: tooltipFn }];
+
+      const result = (component as any).resolveCustomTooltip(params, params.name, params.seriesName, params.value);
+
+      expect(tooltipFn).toHaveBeenCalledWith(params);
+
+      expect(result).toBe('Custom <b>tooltip</b><br>Value: <i>100</i>');
+    });
+  });
+
   describe('setTooltipProperties', () => {
     const divTooltipElement = document.createElement('div');
 
@@ -953,7 +1008,7 @@ describe('PoChartComponent', () => {
       };
 
       component['setTooltipProperties'](divTooltipElement, params);
-      expect(component['tooltipText']).toBe('<b>Jan</b><br>\n        Serie 1: <b>20%</b>');
+      expect(component['tooltipText']).toBe('<b>Jan</b><br>Serie 1: <b>20%</b>');
 
       component.series[0].tooltip = 'Custom tooltip';
       component['itemsTypeDonut'] = undefined;

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

@@ -290,6 +290,13 @@ export class PoChartComponent extends PoChartBaseComponent implements OnInit, Af
     });
   }
 
+  private applyStringFormatter(template: string, context: { name: string; seriesName: string; value: any }): string {
+    return template
+      .replace('{name}', context.name)
+      .replace('{seriesName}', context.seriesName)
+      .replace('{value}', context.value);
+  }
+
   private observeContainerResize(): void {
     if (!this.series?.length) return;
 
@@ -425,6 +432,38 @@ export class PoChartComponent extends PoChartBaseComponent implements OnInit, Af
     });
   }
 
+  private parseTooltipText(text: string): string {
+    if (!text) return text;
+
+    return text
+      .replace(/\n/g, '<br>')
+      .replace(/\*\*(.*?)\*\*/g, '<b>$1</b>')
+      .replace(/__(.*?)__/g, '<i>$1</i>');
+  }
+
+  private resolveCustomTooltip(params: any, name: string, seriesName: string, valueLabel: string): string {
+    let text: string | undefined;
+
+    const serie = params.seriesType === 'pie' ? this.series[params.dataIndex] : this.series[params.seriesIndex];
+
+    if (serie?.tooltip) {
+      if (typeof serie.tooltip === 'function') {
+        text = serie.tooltip(params);
+      } else {
+        text = this.applyStringFormatter(serie.tooltip, { name, seriesName, value: valueLabel });
+      }
+    }
+
+    if (!text) {
+      text =
+        seriesName && !seriesName.includes('\u00000')
+          ? `<b>${name}</b><br>${seriesName}: <b>${valueLabel}</b>`
+          : `${name}: <b>${valueLabel}</b>`;
+    }
+
+    return this.parseTooltipText(text);
+  }
+
   private setTooltipProperties(divTooltipElement, params) {
     const chartElement = this.el.nativeElement.querySelector('#chart-id');
     let valueLabel = params.value;
@@ -436,22 +475,9 @@ export class PoChartComponent extends PoChartBaseComponent implements OnInit, Af
     }
     const name = params.name === ' ' ? this.literals.item : params.name;
     const seriesName = params.seriesName === ' ' ? this.literals.item : params.seriesName;
-    const customTooltipText =
-      seriesName && !seriesName.includes('\u00000')
-        ? `<b>${name}</b><br>
-        ${seriesName}: <b>${valueLabel}</b>`
-        : `${name}: <b>${valueLabel}</b>`;
-
-    const isPie = params.seriesType === 'pie';
-    if (isPie) {
-      this.tooltipText = this.series[params.dataIndex].tooltip
-        ? this.series[params.dataIndex].tooltip
-        : customTooltipText;
-    } else {
-      this.tooltipText = this.series[params.seriesIndex].tooltip
-        ? this.series[params.seriesIndex].tooltip
-        : customTooltipText;
-    }
+
+    this.tooltipText = this.resolveCustomTooltip(params, name, seriesName, valueLabel);
+
     divTooltipElement.style.left = `${params.event.offsetX + chartElement.offsetLeft + 3}px`;
     divTooltipElement.style.top = `${chartElement.offsetTop + params.event.offsetY - 2}px`;
     this.poTooltip.last.toggleTooltipVisibility(true);

projects/ui/src/lib/components/po-chart/samples/sample-po-chart-coffee-ranking/sample-po-chart-coffee-ranking.component.ts

@@ -62,9 +62,23 @@ export class SamplePoChartCoffeeRankingComponent {
   ];
 
   participationByCountryInWorldExports: Array<PoChartSerie> = [
-    { label: 'Brazil', data: [35, 32, 25, 29, 33, 33], color: 'color-10' },
-    { label: 'Vietnam', data: [15, 17, 23, 19, 22, 18] },
-    { label: 'Colombia', data: [8, 7, 6, 9, 10, 11] },
+    {
+      label: 'Brazil',
+      data: [35, 32, 25, 29, 33, 33],
+      color: 'color-10',
+      tooltip: params =>
+        `País: ${params.seriesName}<br><b>Ano:</b> ${params.name}<br><b>Exportações:</b> ${params.value}%`
+    },
+    {
+      label: 'Vietnam',
+      data: [15, 17, 23, 19, 22, 18],
+      tooltip: 'Exportações de <b>{seriesName}</b><br><i>Ano:</i> {name}<br>Participação: {value}%'
+    },
+    {
+      label: 'Colombia',
+      data: [8, 7, 6, 9, 10, 11],
+      tooltip: 'País: {seriesName}\nAno: {name}\nParticipação: {value}%'
+    },
     { label: 'India', data: [5, 6, 5, 4, 5, 5] },
     { label: 'Indonesia', data: [7, 6, 10, 10, 4, 6] }
   ];

projects/ui/src/lib/directives/po-tooltip/po-tooltip.directive.spec.ts

@@ -214,6 +214,17 @@ describe('PoTooltipDirective', () => {
     expect(renderer.setProperty).not.toHaveBeenCalledWith(jasmine.any(Object), 'innerHTML', jasmine.any(String));
   });
 
+  it('should sanitize tooltip and fallback to empty string when sanitize returns null', () => {
+    directive.tooltip = '<b>test</b>';
+    directive.innerHtml = true;
+
+    spyOn(directive['sanitizer'], 'sanitize').and.returnValue(null as any);
+
+    directive['createTooltip']();
+
+    expect(directive.divContent.innerHTML).toBe('');
+  });
+
   it('onMouseEnter: should create tooltip ', fakeAsync(() => {
     directive.tooltip = 'TEXT';
     directive.tooltipContent = false;
@@ -404,13 +415,16 @@ describe('PoTooltipDirective', () => {
     expect(directive.tooltipContent).toBe(undefined);
   }));
 
-  it('should call update Text and set innerHTML when innerHtml is true', () => {
+  it('should call update Text and set innerHTML as empty string when sanitizer returns null', () => {
     directive.lastTooltipText = 'abc';
-    directive.tooltip = '<b>def</b>';
+    directive.tooltip = '<b>ghi</b>';
     directive.innerHtml = true;
+
+    spyOn(directive['sanitizer'], 'sanitize').and.returnValue(null);
+
     directive.updateTextContent();
 
-    expect(directive.divContent.innerHTML).toBe('<b>def</b>');
+    expect(directive.divContent.innerHTML).toBe('');
   });
 
   it('should keep text without changes', () => {

projects/ui/src/lib/directives/po-tooltip/po-tooltip.directive.ts

@@ -1,7 +1,8 @@
-import { Directive, ElementRef, HostListener, OnInit, Renderer2, OnDestroy } from '@angular/core';
+import { Directive, ElementRef, HostListener, OnInit, Renderer2, OnDestroy, SecurityContext } from '@angular/core';
 
 import { PoTooltipBaseDirective } from './po-tooltip-base.directive';
 import { PoTooltipControlPositionService } from './po-tooltip-control-position.service';
+import { DomSanitizer } from '@angular/platform-browser';
 
 const nativeElements = ['input', 'button'];
 
@@ -45,7 +46,8 @@ export class PoTooltipDirective extends PoTooltipBaseDirective implements OnInit
   constructor(
     private elementRef: ElementRef,
     private renderer: Renderer2,
-    private poControlPosition: PoTooltipControlPositionService
+    private poControlPosition: PoTooltipControlPositionService,
+    private readonly sanitizer: DomSanitizer
   ) {
     super();
   }
@@ -162,7 +164,8 @@ export class PoTooltipDirective extends PoTooltipBaseDirective implements OnInit
 
     if (this.innerHtml) {
       this.textContent = this.renderer.createText('');
-      this.renderer.setProperty(this.divContent, 'innerHTML', this.tooltip);
+      const securityContent = this.sanitizer.sanitize(SecurityContext.HTML, this.tooltip) || '';
+      this.renderer.setProperty(this.divContent, 'innerHTML', securityContent);
     }
     this.renderer.appendChild(this.divContent, this.textContent);
     this.renderer.appendChild(this.tooltipContent, this.divArrow);
@@ -224,7 +227,9 @@ export class PoTooltipDirective extends PoTooltipBaseDirective implements OnInit
       this.textContent = this.renderer.createText(this.tooltip);
       this.renderer.appendChild(this.divContent, this.textContent);
       if (this.innerHtml) {
-        this.renderer.setProperty(this.divContent, 'innerHTML', this.tooltip);
+        this.textContent = this.renderer.createText('');
+        const securityContent = this.sanitizer.sanitize(SecurityContext.HTML, this.tooltip) || '';
+        this.renderer.setProperty(this.divContent, 'innerHTML', securityContent);
       }
     }
   }