feat: support for overriding color for a data point using a method

projects/observability/src/shared/components/cartesian/cartesian-chart.component.test.ts

@@ -190,7 +190,7 @@ describe('Cartesian Chart component', () => {
     expect(columnElements.length).toBe(1);
     const rectElement = (columnElements[0] as SVGElement).querySelector('.column');
     expect(rectElement).not.toBeNull();
-    expect(rectElement!.getAttribute('fill')).toEqual('blue');
+    expect(rectElement!.getAttribute('style')).toEqual('fill: blue;');
   }));
 
   test('should render stacked column chart', fakeAsync(() => {
@@ -223,12 +223,12 @@ describe('Cartesian Chart component', () => {
     const rectElement1 = dataSeriesElements[0].querySelector('.columns-data-series > .column');
     expect(rectElement1).not.toBeNull();
 
-    expect(rectElement1!.getAttribute('fill')).toEqual('blue');
+    expect(rectElement1!.getAttribute('style')).toEqual('fill: blue;');
 
     const rectElement2 = dataSeriesElements[1].querySelector('.columns-data-series > .column');
     expect(rectElement2).not.toBeNull();
 
-    expect(rectElement2!.getAttribute('fill')).toEqual('red');
+    expect(rectElement2!.getAttribute('style')).toEqual('fill: red;');
   }));
 
   test('should render column chart with band scale', fakeAsync(() => {
@@ -263,7 +263,43 @@ describe('Cartesian Chart component', () => {
     expect(columnElements.length).toBe(1);
     const rectElement = (columnElements[0] as SVGElement).querySelector('.column');
     expect(rectElement).not.toBeNull();
-    expect(rectElement!.getAttribute('fill')).toEqual('blue');
+    expect(rectElement!.getAttribute('style')).toEqual('fill: blue;');
+  }));
+
+  test('should render column chart with linear scale correctly with overridden color', fakeAsync(() => {
+    const chart = createHost(
+      `<ht-cartesian-chart [series]="series" [xAxisOption]="xAxisOption"></ht-cartesian-chart>`,
+      {
+        hostProps: {
+          xAxisOption: {
+            type: AxisType.X,
+            location: AxisLocation.Bottom,
+            scale: ScaleType.Linear
+          },
+          yAxisOption: {
+            type: AxisType.Y,
+            location: AxisLocation.Left,
+            scale: ScaleType.Linear
+          },
+          series: [
+            {
+              data: [['Category 1', 2]],
+              name: 'test series',
+              color: 'blue',
+              getColor: () => 'overridden-blue',
+              type: CartesianSeriesVisualizationType.Column
+            }
+          ]
+        }
+      }
+    );
+    tick();
+    const columnElements = chart.queryAll('.data-series > .columns-data-series', { root: true });
+
+    expect(columnElements.length).toBe(1);
+    const rectElement = (columnElements[0] as SVGElement).querySelector('.column');
+    expect(rectElement).not.toBeNull();
+    expect(rectElement!.getAttribute('style')).toEqual('fill: overridden-blue;');
   }));
 });
 

projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts

@@ -175,7 +175,7 @@ export class CartesianChartComponent<TData> implements OnChanges, OnDestroy {
         label: singleValue.context.name,
         value: defaultYDataAccessor<number | string>(singleValue.dataPoint),
         units: singleValue.context.units,
-        color: singleValue.context.color
+        color: singleValue.context.getColor?.(singleValue.dataPoint) ?? singleValue.context.color
       }))
     };
   }

projects/observability/src/shared/components/cartesian/chart.ts

@@ -23,6 +23,8 @@ export interface Series<TInterval> {
   units?: string;
   summary?: Summary;
   color: string;
+  // Override the default color string using a method that takes data point as input
+  getColor?(datum?: TInterval): string;
   name: string;
   symbol?: SeriesSymbol;
   type: CartesianSeriesVisualizationType;

projects/observability/src/shared/components/cartesian/d3/data/series/cartesian-column.ts

@@ -34,14 +34,18 @@ export class CartesianColumn<TData> extends CartesianSeries<TData> {
       );
 
       context.closePath();
-      context.strokeStyle = this.series.color;
-      context.fillStyle = this.series.color;
+      context.strokeStyle = this.getColorForDatum(datum);
+      context.fillStyle = this.getColorForDatum(datum);
       context.fill();
       context.stroke();
       context.resetTransform();
     });
   }
 
+  private getColorForDatum(datum: TData): string {
+    return this.series.getColor?.(datum) ?? this.series.color;
+  }
+
   protected buildMultiAxisDataLookupStrategy(): MouseDataLookupStrategy<TData, Series<TData>> {
     return new SingleAxisDataLookupStrategy(this.series, this.series.data, this.xScale, this.yScale);
   }
@@ -58,7 +62,7 @@ export class CartesianColumn<TData> extends CartesianSeries<TData> {
       .append('path')
       .classed('column', true)
       .attr('d', datum => this.generateColumnPathString(columnWidth, this.getDatumHeight(datum)))
-      .attr('fill', this.series.color)
+      .style('fill', datum => this.getColorForDatum(datum))
       .attr(
         'transform',
         datum => `translate(${this.getBarOriginX(datum, columnXAdjustment)}, ${this.getBarOriginY(datum)})`