Skip to content
This repository was archived by the owner on Sep 4, 2020. It is now read-only.

Commit 0da8980

Browse files
aaron-steinfeldaaron-steinfeld
authored
Merge pull request #16 from hypertrace/color-palettes
refactor: change color palette registration
2 parents 438cfa4 + b8d466a commit 0da8980

8 files changed

Lines changed: 63 additions & 45 deletions

File tree

‎projects/common/src/color/color-palette-type.ts‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎projects/common/src/color/color.service.test.ts‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,28 @@
11
import { createServiceFactory } from '@ngneat/spectator/jest';
22
import { ColorPalette } from './color-palette';
3-
import { BLUE_COLOR_PALETTE, ColorService, RED_COLOR_PALETTE } from './color.service';
3+
import { ALTERNATE_COLOR_PALETTES, ColorService, DEFAULT_COLOR_PALETTE } from './color.service';
44

55
describe('Color service', () => {
66
const defaultColors = ['rgb(0, 0, 0)', 'rgb(255, 255, 255)'];
7+
const alternateColors = ['rgb(5, 5, 5)', 'rgb(250, 250, 250)'];
78
const createService = createServiceFactory({
89
service: ColorService,
910
providers: [
10-
{ provide: BLUE_COLOR_PALETTE, useValue: defaultColors },
11-
{ provide: RED_COLOR_PALETTE, useValue: defaultColors }
11+
{
12+
provide: DEFAULT_COLOR_PALETTE,
13+
useValue: {
14+
key: 'default',
15+
colors: defaultColors
16+
}
17+
},
18+
{
19+
provide: ALTERNATE_COLOR_PALETTES,
20+
multi: true,
21+
useValue: {
22+
key: 'alternate',
23+
colors: alternateColors
24+
}
25+
}
1226
]
1327
});
1428
test('should support a default palette if no palette is requested', () => {
@@ -21,6 +35,11 @@ describe('Color service', () => {
2135
expect(spectator.service.getColorPalette('foo')).toEqual(new ColorPalette(defaultColors));
2236
});
2337

38+
test('should support fetching alternate palette', () => {
39+
const spectator = createService();
40+
expect(spectator.service.getColorPalette('alternate')).toEqual(new ColorPalette(alternateColors));
41+
});
42+
2443
test('should support registering and using a color palette', () => {
2544
const spectator = createService();
2645
const paletteColors = ['rgb(20, 20, 20)', 'rgb(50, 50, 50)'];

‎projects/common/src/color/color.service.ts‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
1-
import { Inject, Injectable, InjectionToken } from '@angular/core';
1+
import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
22
import { rgb } from 'd3-color';
33
import { ColorPalette } from './color-palette';
4-
import { ColorPaletteType } from './color-palette-type';
54

6-
export const BLUE_COLOR_PALETTE: InjectionToken<string[]> = new InjectionToken(ColorPaletteType.Blue);
7-
export const RED_COLOR_PALETTE: InjectionToken<string[]> = new InjectionToken(ColorPaletteType.Red);
5+
export const DEFAULT_COLOR_PALETTE: InjectionToken<ColorPaletteDefinition> = new InjectionToken(
6+
'Default Color Palette'
7+
);
8+
export const ALTERNATE_COLOR_PALETTES: InjectionToken<ColorPaletteDefinition[]> = new InjectionToken(
9+
'Alternate Color Palettes'
10+
);
811

912
export type ColorPaletteKey = string | symbol;
1013

1114
@Injectable({ providedIn: 'root' })
1215
export class ColorService {
13-
private static readonly DEFAULT_PALETTE_KEY: string = ColorPaletteType.Blue;
16+
private static readonly DEFAULT_PALETTE_KEY: unique symbol = Symbol('Default Palette Key');
1417

1518
private readonly registeredPalettes: Map<ColorPaletteKey, string[]> = new Map();
1619

1720
public constructor(
18-
@Inject(BLUE_COLOR_PALETTE) blueColorPalette: string[],
19-
@Inject(RED_COLOR_PALETTE) redColorPalette: string[]
21+
@Inject(DEFAULT_COLOR_PALETTE) defaultPalette: ColorPaletteDefinition,
22+
@Optional() @Inject(ALTERNATE_COLOR_PALETTES) alternatePalettes: ColorPaletteDefinition[] | null
2023
) {
21-
this.registerColorPalette(ColorPaletteType.Blue, blueColorPalette);
22-
this.registerColorPalette(ColorPaletteType.Red, redColorPalette);
24+
this.registerColorPalette(ColorService.DEFAULT_PALETTE_KEY, defaultPalette.colors);
25+
[defaultPalette, ...(alternatePalettes ?? [])].forEach(palette =>
26+
this.registerColorPalette(palette.key, palette.colors)
27+
);
2328
}
2429

2530
public getColorPalette(colorPalette: ColorPaletteKey | string[] = ColorService.DEFAULT_PALETTE_KEY): ColorPalette {
@@ -44,3 +49,8 @@ export class ColorService {
4449
return this.registeredPalettes.get(key) || this.registeredPalettes.get(ColorService.DEFAULT_PALETTE_KEY)!;
4550
}
4651
}
52+
53+
export interface ColorPaletteDefinition {
54+
key: ColorPaletteKey;
55+
colors: string[];
56+
}

‎projects/common/src/public-api.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
// Color
66
export * from './color/color.service';
7-
export * from './color/color-palette-type';
87
// Constants
98
export * from './constants/application-constants';
109
// External

‎projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall-widget-renderer.component.test.ts‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { HttpClientTestingModule } from '@angular/common/http/testing';
22
import { fakeAsync, tick } from '@angular/core/testing';
3-
import { BLUE_COLOR_PALETTE, NavigationService, RED_COLOR_PALETTE } from '@hypertrace/common';
4-
import { byText, createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
5-
6-
import { RENDERER_API } from '@hypertrace/hyperdash-angular';
7-
83
import { IconLibraryTestingModule } from '@hypertrace/assets-library';
4+
import { DEFAULT_COLOR_PALETTE, NavigationService } from '@hypertrace/common';
95
import { GraphQlRequestService } from '@hypertrace/graphql-client';
6+
import { RENDERER_API } from '@hypertrace/hyperdash-angular';
107
import { getMockFlexLayoutProviders } from '@hypertrace/test-utils';
8+
import { byText, createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
119
import { EMPTY, of } from 'rxjs';
1210
import { AttributeMetadataType } from '../../../graphql/model/metadata/attribute-metadata';
1311
import { SpanType } from '../../../graphql/model/schema/span';
@@ -76,12 +74,11 @@ describe('Waterfall widget renderer component', () => {
7674
}
7775
},
7876
{
79-
provide: BLUE_COLOR_PALETTE,
80-
useValue: ['black', 'white']
81-
},
82-
{
83-
provide: RED_COLOR_PALETTE,
84-
useValue: ['black', 'white']
77+
provide: DEFAULT_COLOR_PALETTE,
78+
useValue: {
79+
name: 'default',
80+
colors: []
81+
}
8582
},
8683
mockProvider(GraphQlRequestService, {
8784
queryImmediately: () => EMPTY

‎projects/distributed-tracing/src/shared/dashboard/widgets/waterfall/waterfall/waterfall-chart.component.test.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { fakeAsync } from '@angular/core/testing';
2-
import { BLUE_COLOR_PALETTE, NavigationService, RED_COLOR_PALETTE } from '@hypertrace/common';
3-
import { createHostFactory } from '@ngneat/spectator/jest';
4-
52
import { IconLibraryTestingModule } from '@hypertrace/assets-library';
3+
import { DEFAULT_COLOR_PALETTE, NavigationService } from '@hypertrace/common';
64
import { getMockFlexLayoutProviders } from '@hypertrace/test-utils';
5+
import { createHostFactory } from '@ngneat/spectator/jest';
76
import { SpanType } from '../../../../graphql/model/schema/span';
87
import { WaterfallData } from './waterfall-chart';
98
import { WaterfallChartComponent } from './waterfall-chart.component';
@@ -77,12 +76,11 @@ describe('Waterfall Chart component', () => {
7776
component: WaterfallChartComponent,
7877
providers: [
7978
{
80-
provide: BLUE_COLOR_PALETTE,
81-
useValue: ['black', 'white']
82-
},
83-
{
84-
provide: RED_COLOR_PALETTE,
85-
useValue: ['black', 'white']
79+
provide: DEFAULT_COLOR_PALETTE,
80+
useValue: {
81+
name: 'default',
82+
colors: []
83+
}
8684
},
8785
...getMockFlexLayoutProviders()
8886
],

‎src/app/config.module.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { NgModule } from '@angular/core';
2-
import { BLUE_COLOR_PALETTE, GLOBAL_HEADER_HEIGHT, RED_COLOR_PALETTE } from '@hypertrace/common';
2+
import { DEFAULT_COLOR_PALETTE, GLOBAL_HEADER_HEIGHT } from '@hypertrace/common';
33
import { GRAPHQL_URI } from '@hypertrace/graphql-client';
44
import { environment } from '../environments/environment';
55
import { FeatureResolverModule } from './shared/feature-resolver/feature-resolver.module';
@@ -16,12 +16,11 @@ import { FeatureResolverModule } from './shared/feature-resolver/feature-resolve
1616
useValue: '56px'
1717
},
1818
{
19-
provide: BLUE_COLOR_PALETTE,
20-
useValue: ['#001429', '#003149', '#005163', '#007374', '#30947B', '#70B47C', '#B4D17E', '#FFEA8A']
21-
},
22-
{
23-
provide: RED_COLOR_PALETTE,
24-
useValue: ['#EEC200', '#F7902D', '#E8654B', '#C44660', '#923768', '#5B2F60', '#27244A', '#001429']
19+
provide: DEFAULT_COLOR_PALETTE,
20+
useValue: {
21+
key: 'default',
22+
colors: ['#001429', '#003149', '#005163', '#007374', '#30947B', '#70B47C', '#B4D17E', '#FFEA8A']
23+
}
2524
}
2625
]
2726
})

‎src/environments/environment.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
export const environment = {
77
production: false,
8-
graphqlUri: 'http://35.247.26.128/graphql'
8+
graphqlUri: 'http://localhost:9000/graphql'
99
};
1010

1111
/*

0 commit comments

Comments
 (0)