From 01888d0bde3bc955ca12376175f154109c2da762 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Tue, 18 May 2021 08:43:37 +0530 Subject: [PATCH 1/6] feat: add more color constants --- projects/common/src/color/color.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/projects/common/src/color/color.ts b/projects/common/src/color/color.ts index 1760fa152..22031c7d6 100644 --- a/projects/common/src/color/color.ts +++ b/projects/common/src/color/color.ts @@ -20,11 +20,13 @@ export const enum Color { Purple3 = '#E295E9', Purple4 = '#CB41D8', Purple5 = '#94209f', + Purple6 = '#791B82', Red1 = '#fff3f1', Red2 = '#fecac2', Red3 = '#FEA395', Red5 = '#FD5138', Red6 = '#F72202', Brown1 = '#9e4c41', - White = '#FFFFFF' + White = '#FFFFFF', + Yellow4 = '#FFE566' } From 3bb6bda8f3cceea797919e7e4465079108919e73 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Wed, 19 May 2021 16:03:38 +0530 Subject: [PATCH 2/6] fix: add support for color per data point. --- .../src/shared/components/cartesian/chart.ts | 1 + .../cartesian/d3/data/series/cartesian-column.ts | 10 +++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/projects/observability/src/shared/components/cartesian/chart.ts b/projects/observability/src/shared/components/cartesian/chart.ts index 95ca64798..bc9b079e3 100644 --- a/projects/observability/src/shared/components/cartesian/chart.ts +++ b/projects/observability/src/shared/components/cartesian/chart.ts @@ -23,6 +23,7 @@ export interface Series { units?: string; summary?: Summary; color: string; + getColor?(datum?: TInterval): string; name: string; symbol?: SeriesSymbol; type: CartesianSeriesVisualizationType; diff --git a/projects/observability/src/shared/components/cartesian/d3/data/series/cartesian-column.ts b/projects/observability/src/shared/components/cartesian/d3/data/series/cartesian-column.ts index 5ba02bfc7..e5d851cac 100644 --- a/projects/observability/src/shared/components/cartesian/d3/data/series/cartesian-column.ts +++ b/projects/observability/src/shared/components/cartesian/d3/data/series/cartesian-column.ts @@ -34,14 +34,18 @@ export class CartesianColumn extends CartesianSeries { ); 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 ? this.series.getColor(datum) : this.series.color; + } + protected buildMultiAxisDataLookupStrategy(): MouseDataLookupStrategy> { return new SingleAxisDataLookupStrategy(this.series, this.series.data, this.xScale, this.yScale); } @@ -58,7 +62,7 @@ export class CartesianColumn extends CartesianSeries { .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)})` From df40b69e44b029f76c3445365358acb7ee275efc Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Wed, 19 May 2021 17:12:21 +0530 Subject: [PATCH 3/6] fix: fix test --- .../cartesian-chart.component.test.ts | 44 +++++++++++++++++-- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/projects/observability/src/shared/components/cartesian/cartesian-chart.component.test.ts b/projects/observability/src/shared/components/cartesian/cartesian-chart.component.test.ts index 587b8b833..92c0c91ab 100644 --- a/projects/observability/src/shared/components/cartesian/cartesian-chart.component.test.ts +++ b/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( + ``, + { + 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;'); })); }); From 701d89bafba8ced9bb9f018b61f900a5fe9ebc92 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Fri, 4 Jun 2021 12:09:19 +0530 Subject: [PATCH 4/6] fix: support color customization per data point --- .../shared/components/cartesian/cartesian-chart.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts b/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts index d6fcf0ed8..78393eedb 100644 --- a/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts +++ b/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts @@ -175,7 +175,10 @@ export class CartesianChartComponent implements OnChanges, OnDestroy { label: singleValue.context.name, value: defaultYDataAccessor(singleValue.dataPoint), units: singleValue.context.units, - color: singleValue.context.color + color: + singleValue.context.getColor !== undefined + ? singleValue.context.getColor(singleValue.dataPoint) + : singleValue.context.color })) }; } From b6e3a6c39a96e7f08253b04e396187c44fad5cbd Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Fri, 4 Jun 2021 12:12:06 +0530 Subject: [PATCH 5/6] fix: add comment --- projects/observability/src/shared/components/cartesian/chart.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/observability/src/shared/components/cartesian/chart.ts b/projects/observability/src/shared/components/cartesian/chart.ts index bc9b079e3..c666e4cbf 100644 --- a/projects/observability/src/shared/components/cartesian/chart.ts +++ b/projects/observability/src/shared/components/cartesian/chart.ts @@ -23,6 +23,7 @@ export interface Series { 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; From 53e5fe1bf9c17d18cb84670e6080f2b73bca3834 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Fri, 4 Jun 2021 18:42:40 +0530 Subject: [PATCH 6/6] fix: address comments --- .../shared/components/cartesian/cartesian-chart.component.ts | 5 +---- .../components/cartesian/d3/data/series/cartesian-column.ts | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts b/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts index 78393eedb..51f2ee888 100644 --- a/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts +++ b/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts @@ -175,10 +175,7 @@ export class CartesianChartComponent implements OnChanges, OnDestroy { label: singleValue.context.name, value: defaultYDataAccessor(singleValue.dataPoint), units: singleValue.context.units, - color: - singleValue.context.getColor !== undefined - ? singleValue.context.getColor(singleValue.dataPoint) - : singleValue.context.color + color: singleValue.context.getColor?.(singleValue.dataPoint) ?? singleValue.context.color })) }; } diff --git a/projects/observability/src/shared/components/cartesian/d3/data/series/cartesian-column.ts b/projects/observability/src/shared/components/cartesian/d3/data/series/cartesian-column.ts index e5d851cac..09ee3a524 100644 --- a/projects/observability/src/shared/components/cartesian/d3/data/series/cartesian-column.ts +++ b/projects/observability/src/shared/components/cartesian/d3/data/series/cartesian-column.ts @@ -43,7 +43,7 @@ export class CartesianColumn extends CartesianSeries { } private getColorForDatum(datum: TData): string { - return this.series.getColor ? this.series.getColor(datum) : this.series.color; + return this.series.getColor?.(datum) ?? this.series.color; } protected buildMultiAxisDataLookupStrategy(): MouseDataLookupStrategy> {