Merge branch 'main' into cartesian_drilldown

Author: jaywalker21

package-lock.json

@@ -36,14 +36,14 @@
     "@angular/platform-browser": "^12.2.1",
     "@angular/platform-browser-dynamic": "^12.2.1",
     "@angular/router": "^12.2.1",
-    "@apollo/client": "^3.5.5",
-    "@fullstory/browser": "^1.4.9",
+    "@apollo/client": "^3.5.6",
+    "@fullstory/browser": "^1.4.10",
     "@hypertrace/hyperdash": "^1.2.1",
     "@hypertrace/hyperdash-angular": "^2.6.0",
     "@types/d3-hierarchy": "^2.0.2",
     "@types/d3-transition": "1.1.5",
     "apollo-angular": "^2.6.0",
-    "core-js": "^3.19.3",
+    "core-js": "^3.20.2",
     "d3-array": "^2.12.0",
     "d3-axis": "^2.1.0",
     "d3-brush": "^1.1.6",
@@ -59,11 +59,12 @@
     "d3-shape": "^1.3.5",
     "d3-transition": "^1.2.0",
     "d3-zoom": "^1.8.3",
-    "graphql": "^15.7.2",
+    "graphql": "^15.8.0",
     "graphql-tag": "^2.12.6",
     "iso8601-duration": "^1.3.0",
     "lodash-es": "^4.17.21",
-    "mixpanel-browser": "^2.42.0",
+    "mixpanel-browser": "^2.43.0",
+    "ngx-color": "7.0.0",
     "rxjs": "~6.6.7",
     "tslib": "^2.3.1",
     "uuid": "^8.3.2",
@@ -75,41 +76,41 @@
     "@angular/cli": "12.2.1",
     "@angular/compiler-cli": "~12.2.1",
     "@angular/language-service": "~12.2.1",
-    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^15.0.0",
-    "@compodoc/compodoc": "^1.1.15",
-    "@ngneat/spectator": "^8.3.1",
+    "@commitlint/cli": "^16.0.1",
+    "@commitlint/config-conventional": "^16.0.0",
+    "@compodoc/compodoc": "^1.1.18",
+    "@ngneat/spectator": "^8.3.2",
     "@types/d3-array": "^2.9.0",
     "@types/d3-axis": "^2.0.0",
     "@types/d3-brush": "^2.1.0",
     "@types/d3-drag": "^1.2.3",
     "@types/d3-force": "^2.1.0",
     "@types/d3-path": "^2.0.0",
     "@types/d3-quadtree": "^1.0.7",
-    "@types/d3-scale": "^2.1.1",
+    "@types/d3-scale": "^2.2.6",
     "@types/d3-selection": "^1.4.2",
     "@types/d3-shape": "^2.1.0",
     "@types/d3-zoom": "^1.7.5",
-    "@types/jest": "^26.0.24",
+    "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.5",
-    "@types/mixpanel-browser": "^2.35.7",
-    "@types/node": "^16.11.10",
-    "@types/uuid": "^8.3.1",
+    "@types/mixpanel-browser": "^2.36.0",
+    "@types/node": "^17.0.5",
+    "@types/uuid": "^8.3.4",
     "@types/webpack-env": "^1.16.3",
     "codelyzer": "^6.0.2",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
-    "jest-config": "^27.4.3",
-    "jest-html-reporter": "^3.4.1",
+    "jest-config": "^27.4.7",
+    "jest-html-reporter": "^3.4.2",
     "jest-junit": "^13.0.0",
     "jest-preset-angular": "^8.4.0",
     "lodash": "^4.17.21",
-    "ng-mocks": "^12.5.0",
+    "ng-mocks": "^12.5.1",
     "ng-packagr": "^12.2.5",
     "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.1",
+    "pretty-quick": "^3.1.3",
     "ts-node": "~10.4.0",
     "tslint": "~6.1.3",
     "tslint-config-prettier": "^1.18.0",

package.json

@@ -2,6 +2,7 @@ export const enum Color {
   Blue2 = '#b8d3ff',
   Blue3 = '#70a7ff',
   Blue4 = '#2478ff',
+  Blue6 = '#0043ad',
   Blue5 = '#0053d7',
   Blue7 = '#003385',
   BlueGray1 = '#70a7ff',

projects/common/src/color/color.ts

@@ -0,0 +1,22 @@
+import { Time } from './time';
+
+describe('Time', () => {
+  const mockedTime = new Time(8, 30);
+
+  test('can get label', () => {
+    expect(mockedTime.label).toBe('8:30 AM');
+  });
+
+  test('can get date', () => {
+    expect(mockedTime.date).toEqual(new Date(`${new Date().toDateString()} 08:30Z`));
+  });
+
+  test('can get ISO String from time', () => {
+    expect(mockedTime.toISOString()).toBe('08:30:00.000Z');
+  });
+
+  test('can compare two times', () => {
+    expect(mockedTime.equals(new Time(8, 30))).toBeTruthy();
+    expect(mockedTime.equals(new Time(9, 30))).toBeFalsy();
+  });
+});

projects/common/src/time/time.test.ts

@@ -31,4 +31,12 @@ export class Time {
   public get date(): Date {
     return this._date;
   }
+
+  public toISOString(): string {
+    return this.date.toISOString().substring(11);
+  }
+
+  public equals(other?: Time): boolean {
+    return this.toISOString() === other?.toISOString();
+  }
 }

projects/common/src/time/time.ts

@@ -7,6 +7,8 @@ export type DistributiveOmit<T, K extends UnionKeys<T>> = T extends any ? Omit<T
 
 export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 export type RequireBy<T, K extends keyof T> = T & Required<Pick<T, K>>;
+export type KeysWithType<T, V> = { [K in keyof T]-?: T[K] extends V ? K : never }[keyof T];
+
 export interface Dictionary<T> {
   [key: string]: T;
 }

projects/common/src/utilities/types/types.ts

@@ -27,7 +27,8 @@
     "d3-axis": "^2.1.0",
     "d3-scale": "^3.3.0",
     "d3-selection": "^1.4.2",
-    "d3-shape": "^1.3.5"
+    "d3-shape": "^1.3.5",
+    "ngx-color": "7.0.0"
   },
   "devDependencies": {
     "@hypertrace/test-utils": "^0.0.0"

projects/components/package.json

@@ -0,0 +1,35 @@
+@import 'color-palette';
+@import 'mixins';
+
+.color-picker {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+
+  .color {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    margin-right: 6px;
+    cursor: pointer;
+
+    &.selected {
+      border: 2px solid $blue-4;
+    }
+  }
+
+  .add-icon {
+    cursor: pointer;
+  }
+}
+
+.container {
+  width: 200px;
+  height: 200px;
+  cursor: pointer;
+}
+
+.color-sketch {
+  width: 200px;
+  height: 200px;
+}

projects/components/src/color-picker/color-picker.component.scss

@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common';
+import { fakeAsync } from '@angular/core/testing';
+import { IconType } from '@hypertrace/assets-library';
+import { Color, NavigationService } from '@hypertrace/common';
+import { IconComponent } from '@hypertrace/components';
+import { createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { SketchComponent } from 'ngx-color/sketch';
+import { NEVER, Observable } from 'rxjs';
+import { NotificationService } from '../notification/notification.service';
+import { PopoverModule } from '../popover/popover.module';
+import { ColorPickerComponent } from './color-picker.component';
+
+describe('Color Picker component', () => {
+  let spectator: Spectator<ColorPickerComponent>;
+
+  const createHost = createHostFactory({
+    component: ColorPickerComponent,
+    imports: [CommonModule, PopoverModule],
+    providers: [
+      mockProvider(NotificationService, { withNotification: (x: Observable<unknown>) => x }),
+      mockProvider(NavigationService, {
+        navigation$: NEVER
+      })
+    ],
+    declarations: [MockComponent(SketchComponent), MockComponent(IconComponent)]
+  });
+
+  test('should render color picker with default colors', fakeAsync(() => {
+    const onSelectionChangeSpy = jest.fn();
+    spectator = createHost(
+      `<ht-color-picker (selectedChange)="onSelectionChange($event)">
+      </ht-color-picker>`,
+      {
+        hostProps: {
+          onSelectionChange: onSelectionChangeSpy
+        }
+      }
+    );
+
+    const colors = spectator.queryAll('.color-picker .color');
+    expect(colors.length).toBe(7);
+    expect(spectator.query(IconComponent)?.icon).toBe(IconType.Add);
+
+    spectator.click(colors[1]);
+    expect(spectator.component.selected).toEqual(Color.Blue3);
+    expect(onSelectionChangeSpy).toHaveBeenCalledWith(Color.Blue3);
+
+    spectator.click('.add-icon');
+    spectator.tick();
+
+    expect(spectator.query('.color-sketch', { root: true })).toExist();
+  }));
+});

projects/components/src/color-picker/color-picker.component.test.ts

@@ -0,0 +1,89 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { IconType } from '@hypertrace/assets-library';
+import { Color } from '@hypertrace/common';
+import { IconSize } from '../icon/icon-size';
+
+@Component({
+  selector: 'ht-color-picker',
+  styleUrls: ['./color-picker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: ColorPickerComponent
+    }
+  ],
+  template: `
+    <div class="color-picker">
+      <div
+        class="color"
+        *ngFor="let color of this.paletteColors"
+        [ngClass]="{ selected: color === this.selected }"
+        [style.backgroundColor]="color"
+        (click)="this.selectColor(color)"
+      ></div>
+      <ht-popover>
+        <ht-popover-trigger>
+          <ht-icon class="add-icon" icon="${IconType.Add}" size="${IconSize.Small}"></ht-icon>
+        </ht-popover-trigger>
+        <ht-popover-content>
+          <div class="container">
+            <color-sketch class="color-sketch" (onChange)="this.onAddColorToPalette($event.color.hex)"></color-sketch>
+          </div>
+        </ht-popover-content>
+      </ht-popover>
+    </div>
+  `
+})
+export class ColorPickerComponent implements ControlValueAccessor {
+  @Input()
+  public selected?: string;
+
+  @Output()
+  private readonly selectedChange: EventEmitter<string> = new EventEmitter<string>();
+
+  private readonly paletteSet: Set<string> = new Set<string>([
+    Color.Brown1,
+    Color.Blue3,
+    Color.Green3,
+    Color.Orange3,
+    Color.Purple3,
+    Color.Red3,
+    Color.Yellow3
+  ]);
+  public paletteColors: string[] = Array.from(this.paletteSet);
+
+  private propagateControlValueChange?: (value: string | undefined) => void;
+  private propagateControlValueChangeOnTouch?: (value: string | undefined) => void;
+
+  public onAddColorToPalette(color: string): void {
+    this.paletteSet.add(color);
+    this.paletteColors = Array.from(this.paletteSet);
+    this.selectColor(color);
+  }
+
+  public selectColor(color: string): void {
+    this.selected = color;
+    this.selectedChange.emit(color);
+    this.propagateValueChangeToFormControl(color);
+  }
+
+  private propagateValueChangeToFormControl(value?: string): void {
+    this.propagateControlValueChange?.(value);
+    this.propagateControlValueChangeOnTouch?.(value);
+  }
+
+  public writeValue(color?: string): void {
+    this.selected = color;
+  }
+
+  public registerOnChange(onChange: (value?: string) => void): void {
+    this.propagateControlValueChange = onChange;
+  }
+
+  public registerOnTouched(onTouch: (value?: string) => void): void {
+    this.propagateControlValueChangeOnTouch = onTouch;
+  }
+}