Merge pull request #16 from hypertrace/color-palettes

refactor: change color palette registration

Author: aaron-steinfeld

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

@@ -1,14 +1,28 @@
 import { createServiceFactory } from '@ngneat/spectator/jest';
 import { ColorPalette } from './color-palette';
-import { BLUE_COLOR_PALETTE, ColorService, RED_COLOR_PALETTE } from './color.service';
+import { ALTERNATE_COLOR_PALETTES, ColorService, DEFAULT_COLOR_PALETTE } from './color.service';
 
 describe('Color service', () => {
   const defaultColors = ['rgb(0, 0, 0)', 'rgb(255, 255, 255)'];
+  const alternateColors = ['rgb(5, 5, 5)', 'rgb(250, 250, 250)'];
   const createService = createServiceFactory({
     service: ColorService,
     providers: [
-      { provide: BLUE_COLOR_PALETTE, useValue: defaultColors },
-      { provide: RED_COLOR_PALETTE, useValue: defaultColors }
+      {
+        provide: DEFAULT_COLOR_PALETTE,
+        useValue: {
+          key: 'default',
+          colors: defaultColors
+        }
+      },
+      {
+        provide: ALTERNATE_COLOR_PALETTES,
+        multi: true,
+        useValue: {
+          key: 'alternate',
+          colors: alternateColors
+        }
+      }
     ]
   });
   test('should support a default palette if no palette is requested', () => {
@@ -21,6 +35,11 @@ describe('Color service', () => {
     expect(spectator.service.getColorPalette('foo')).toEqual(new ColorPalette(defaultColors));
   });
 
+  test('should support fetching alternate palette', () => {
+    const spectator = createService();
+    expect(spectator.service.getColorPalette('alternate')).toEqual(new ColorPalette(alternateColors));
+  });
+
   test('should support registering and using a color palette', () => {
     const spectator = createService();
     const paletteColors = ['rgb(20, 20, 20)', 'rgb(50, 50, 50)'];

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

@@ -1,25 +1,30 @@
-import { Inject, Injectable, InjectionToken } from '@angular/core';
+import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
 import { rgb } from 'd3-color';
 import { ColorPalette } from './color-palette';
-import { ColorPaletteType } from './color-palette-type';
 
-export const BLUE_COLOR_PALETTE: InjectionToken<string[]> = new InjectionToken(ColorPaletteType.Blue);
-export const RED_COLOR_PALETTE: InjectionToken<string[]> = new InjectionToken(ColorPaletteType.Red);
+export const DEFAULT_COLOR_PALETTE: InjectionToken<ColorPaletteDefinition> = new InjectionToken(
+  'Default Color Palette'
+);
+export const ALTERNATE_COLOR_PALETTES: InjectionToken<ColorPaletteDefinition[]> = new InjectionToken(
+  'Alternate Color Palettes'
+);
 
 export type ColorPaletteKey = string | symbol;
 
 @Injectable({ providedIn: 'root' })
 export class ColorService {
-  private static readonly DEFAULT_PALETTE_KEY: string = ColorPaletteType.Blue;
+  private static readonly DEFAULT_PALETTE_KEY: unique symbol = Symbol('Default Palette Key');
 
   private readonly registeredPalettes: Map<ColorPaletteKey, string[]> = new Map();
 
   public constructor(
-    @Inject(BLUE_COLOR_PALETTE) blueColorPalette: string[],
-    @Inject(RED_COLOR_PALETTE) redColorPalette: string[]
+    @Inject(DEFAULT_COLOR_PALETTE) defaultPalette: ColorPaletteDefinition,
+    @Optional() @Inject(ALTERNATE_COLOR_PALETTES) alternatePalettes: ColorPaletteDefinition[] | null
   ) {
-    this.registerColorPalette(ColorPaletteType.Blue, blueColorPalette);
-    this.registerColorPalette(ColorPaletteType.Red, redColorPalette);
+    this.registerColorPalette(ColorService.DEFAULT_PALETTE_KEY, defaultPalette.colors);
+    [defaultPalette, ...(alternatePalettes ?? [])].forEach(palette =>
+      this.registerColorPalette(palette.key, palette.colors)
+    );
   }
 
   public getColorPalette(colorPalette: ColorPaletteKey | string[] = ColorService.DEFAULT_PALETTE_KEY): ColorPalette {
@@ -44,3 +49,8 @@ export class ColorService {
     return this.registeredPalettes.get(key) || this.registeredPalettes.get(ColorService.DEFAULT_PALETTE_KEY)!;
   }
 }
+
+export interface ColorPaletteDefinition {
+  key: ColorPaletteKey;
+  colors: string[];
+}

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

@@ -4,7 +4,6 @@
 
 // Color
 export * from './color/color.service';
-export * from './color/color-palette-type';
 // Constants
 export * from './constants/application-constants';
 // External

projects/common/src/public-api.ts

@@ -1,13 +1,11 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, tick } from '@angular/core/testing';
-import { BLUE_COLOR_PALETTE, NavigationService, RED_COLOR_PALETTE } from '@hypertrace/common';
-import { byText, createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
-
-import { RENDERER_API } from '@hypertrace/hyperdash-angular';
-
 import { IconLibraryTestingModule } from '@hypertrace/assets-library';
+import { DEFAULT_COLOR_PALETTE, NavigationService } from '@hypertrace/common';
 import { GraphQlRequestService } from '@hypertrace/graphql-client';
+import { RENDERER_API } from '@hypertrace/hyperdash-angular';
 import { getMockFlexLayoutProviders } from '@hypertrace/test-utils';
+import { byText, createComponentFactory, mockProvider } from '@ngneat/spectator/jest';
 import { EMPTY, of } from 'rxjs';
 import { AttributeMetadataType } from '../../../graphql/model/metadata/attribute-metadata';
 import { SpanType } from '../../../graphql/model/schema/span';
@@ -76,12 +74,11 @@ describe('Waterfall widget renderer component', () => {
         }
       },
       {
-        provide: BLUE_COLOR_PALETTE,
-        useValue: ['black', 'white']
-      },
-      {
-        provide: RED_COLOR_PALETTE,
-        useValue: ['black', 'white']
+        provide: DEFAULT_COLOR_PALETTE,
+        useValue: {
+          name: 'default',
+          colors: []
+        }
       },
       mockProvider(GraphQlRequestService, {
         queryImmediately: () => EMPTY

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

@@ -1,9 +1,8 @@
 import { fakeAsync } from '@angular/core/testing';
-import { BLUE_COLOR_PALETTE, NavigationService, RED_COLOR_PALETTE } from '@hypertrace/common';
-import { createHostFactory } from '@ngneat/spectator/jest';
-
 import { IconLibraryTestingModule } from '@hypertrace/assets-library';
+import { DEFAULT_COLOR_PALETTE, NavigationService } from '@hypertrace/common';
 import { getMockFlexLayoutProviders } from '@hypertrace/test-utils';
+import { createHostFactory } from '@ngneat/spectator/jest';
 import { SpanType } from '../../../../graphql/model/schema/span';
 import { WaterfallData } from './waterfall-chart';
 import { WaterfallChartComponent } from './waterfall-chart.component';
@@ -77,12 +76,11 @@ describe('Waterfall Chart component', () => {
     component: WaterfallChartComponent,
     providers: [
       {
-        provide: BLUE_COLOR_PALETTE,
-        useValue: ['black', 'white']
-      },
-      {
-        provide: RED_COLOR_PALETTE,
-        useValue: ['black', 'white']
+        provide: DEFAULT_COLOR_PALETTE,
+        useValue: {
+          name: 'default',
+          colors: []
+        }
       },
       ...getMockFlexLayoutProviders()
     ],

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

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { BLUE_COLOR_PALETTE, GLOBAL_HEADER_HEIGHT, RED_COLOR_PALETTE } from '@hypertrace/common';
+import { DEFAULT_COLOR_PALETTE, GLOBAL_HEADER_HEIGHT } from '@hypertrace/common';
 import { GRAPHQL_URI } from '@hypertrace/graphql-client';
 import { environment } from '../environments/environment';
 import { FeatureResolverModule } from './shared/feature-resolver/feature-resolver.module';
@@ -16,12 +16,11 @@ import { FeatureResolverModule } from './shared/feature-resolver/feature-resolve
       useValue: '56px'
     },
     {
-      provide: BLUE_COLOR_PALETTE,
-      useValue: ['#001429', '#003149', '#005163', '#007374', '#30947B', '#70B47C', '#B4D17E', '#FFEA8A']
-    },
-    {
-      provide: RED_COLOR_PALETTE,
-      useValue: ['#EEC200', '#F7902D', '#E8654B', '#C44660', '#923768', '#5B2F60', '#27244A', '#001429']
+      provide: DEFAULT_COLOR_PALETTE,
+      useValue: {
+        key: 'default',
+        colors: ['#001429', '#003149', '#005163', '#007374', '#30947B', '#70B47C', '#B4D17E', '#FFEA8A']
+      }
     }
   ]
 })

src/app/config.module.ts

@@ -5,7 +5,7 @@
 
 export const environment = {
   production: false,
-  graphqlUri: 'http://35.247.26.128/graphql'
+  graphqlUri: 'http://localhost:9000/graphql'
 };
 
 /*