feat(chart): implementa compatibilidade com variáveis css

Na interface PoChartSerie foi implementada a compatibilidade com variáveis css, possibilitando o desenvolvedor final tratar as cores dinamicamente.

FIXES DTHFUI-11683

Author: fabiana-monteiro

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

@@ -12,9 +12,10 @@ export interface PoChartSerie {
    * @description
    *
    * Determina a cor da série. As maneiras de customizar o *preset* padrão de cores são:
-   * * Hexadeximal, por exemplo `#c64840`;
-   * * RGB, como `rgb(0, 0, 165)`
+   * * Hexadecimal, por exemplo `#c64840`;
+   * * RGB, por exemplo `rgb(0, 0, 165)`
    * * O nome da cor, por exemplo `blue`;
+   * * Variáveis CSS, por exemplo `var(--color-01)`;
    * * Usando uma das cores do tema do PO:
    *   Valores válidos:
    *     - <span class="dot po-color-01"></span> `color-01`

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

@@ -59,6 +59,23 @@ describe('PoChartGridUtils', () => {
 
       expect(serie.areaStyle.opacity).toBe(0.5);
     });
+
+    it('should set areaStyle.color using computedStyle when serie.color is var(...)', () => {
+      const spyGetComputed = spyOn(globalThis, 'getComputedStyle').and.returnValue({
+        getPropertyValue: () => '#445566'
+      } as unknown as CSSStyleDeclaration);
+
+      const serie: any = {
+        isTypeArea: true,
+        color: 'var(--color-test)',
+        overlayColor: 'rgba(255,255,255,0.5)'
+      };
+
+      utils.setSerieTypeArea(serie, 1);
+
+      expect(spyGetComputed).toHaveBeenCalledWith(document.documentElement);
+      expect(serie.areaStyle.color).toBe('#445566');
+    });
   });
 
   describe('setSerieTypeBarColumn', () => {

projects/ui/src/lib/components/po-chart/po-chart-grid-utils.ts

@@ -140,10 +140,20 @@ export class PoChartGridUtils {
 
   setSerieTypeArea(serie: any, index: number) {
     if (serie.isTypeArea) {
+      let colorVariable: string;
+
+      if (serie.color?.startsWith('var(--')) {
+        colorVariable = getComputedStyle(document.documentElement)
+          .getPropertyValue(serie.color.replace(/^var\((--[^)]+)\)$/, '$1'))
+          .trim();
+      } else if (serie.color?.includes('color')) {
+        colorVariable = this.component.getCSSVariable(`--${serie.color.replace('po-', '')}`);
+      } else {
+        colorVariable = serie.color ?? serie.overlayColor;
+      }
+
       serie.areaStyle = {
-        color: serie.color?.includes('color')
-          ? this.component.getCSSVariable(`--${serie.color.replace('po-', '')}`)
-          : serie.overlayColor
+        color: colorVariable
       };
 
       if (index > 7 || serie.isNotTokenColor) {

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

@@ -1350,6 +1350,24 @@ describe('PoChartComponent', () => {
       expect(result[0].name).toBe('Serie 1');
     });
 
+    it('should call getComputedStyle with document.documentElement and use its value for var(...) color', () => {
+      const spyGetComputed = spyOn(window, 'getComputedStyle').and.returnValue({
+        getPropertyValue: (prop: string) => '#112233'
+      } as unknown as CSSStyleDeclaration);
+
+      component.series = [{ label: 'Serie Var2', data: [1, 2], color: 'var(--color-test)' }];
+      component.type = PoChartType.Column;
+      component.options = {};
+
+      const result = component['setSeries']();
+
+      expect(spyGetComputed).toHaveBeenCalledWith(document.documentElement);
+
+      const resolvedColor = result[0]?.emphasis?.itemStyle?.color || result[0]?.itemStyle?.color;
+      expect(resolvedColor).toBe('#112233');
+      expect(result[0]?.name).toBe('Serie Var2');
+    });
+
     it('should transform series correctly with default configurations if not set type and data is not Array', () => {
       component.series = [
         { label: 'Serie 1', data: 90, color: 'po-color-01' },

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

@@ -597,9 +597,18 @@ export class PoChartComponent extends PoChartBaseComponent implements OnInit, Af
       serie.name = serie.name || (serie.label && typeof serie.label === 'string') ? (serie.name ?? serie.label) : ' ';
       !serie.type ? this.setTypeSerie(serie, this.type || typeDefault) : this.setTypeSerie(serie, serie.type);
 
-      const colorVariable: string = serie.color?.includes('color')
-        ? this.getCSSVariable(`--${serie.color.replace('po-', '')}`)
-        : serie.color;
+      let colorVariable: string;
+
+      if (serie.color?.startsWith('var(--')) {
+        colorVariable = getComputedStyle(document.documentElement)
+          .getPropertyValue(serie.color.replace(/^var\((--[^)]+)\)$/, '$1'))
+          .trim();
+      } else if (serie.color?.includes('color')) {
+        colorVariable = this.getCSSVariable(`--${serie.color.replace('po-', '')}`);
+      } else {
+        colorVariable = serie.color;
+      }
+
       this.chartGridUtils.setSerieTypeDonutPie(serie, colorVariable);
       this.chartGaugeUtils.setSerieTypeGauge(serie, colorVariable);
       this.setSerieEmphasis(serie, colorVariable, tokenBorderWidthMd);