feat: adding a new gauge widget

package.json

@@ -35,11 +35,11 @@
     "@angular/platform-browser": "^10.0.4",
     "@angular/platform-browser-dynamic": "^10.0.4",
     "@angular/router": "^10.0.4",
+    "@apollo/client": "^3.2.5",
     "@hypertrace/hyperdash": "^1.1.2",
     "@hypertrace/hyperdash-angular": "^2.1.0",
     "@types/d3-hierarchy": "^2.0.0",
     "@types/d3-transition": "1.1.5",
-    "@apollo/client": "^3.2.5",
     "apollo-angular": "^2.0.4",
     "core-js": "^3.5.0",
     "d3-array": "^2.8.0",

projects/components/package.json

@@ -26,7 +26,8 @@
     "d3-array": "^2.2.0",
     "d3-axis": "^1.0.12",
     "d3-scale": "^3.0.0",
-    "d3-selection": "^1.4.0"
+    "d3-selection": "^1.4.0",
+    "d3-shape": "^1.3.5"
   },
   "devDependencies": {
     "@hypertrace/test-utils": "^0.0.0"

projects/components/src/gauge/gauge.component.scss

@@ -0,0 +1,37 @@
+@import 'font';
+@import 'color-palette';
+
+.gauge-container {
+  width: 100%;
+  height: 100%;
+}
+
+.gauge {
+  width: 100%;
+  height: 100%;
+
+  .gauge-ring {
+    fill: $gray-2;
+  }
+
+  .input-data {
+    cursor: default;
+  }
+
+  .value-ring {
+    transition: transform 0.2s ease-out;
+  }
+
+  .value-display {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 56px;
+    text-anchor: middle;
+  }
+
+  .label-display {
+    @include body-1-semibold($gray-7);
+    font-family: $font-family;
+    text-anchor: middle;
+  }
+}

projects/components/src/gauge/gauge.component.test.ts

@@ -0,0 +1,54 @@
+import { Color } from '@hypertrace/common';
+import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
+import { GaugeComponent } from './gauge.component';
+
+describe('Gauge component', () => {
+  let spectator: Spectator<GaugeComponent>;
+
+  const createHost = createHostFactory({
+    component: GaugeComponent,
+    shallow: true
+  });
+
+  test('render all data', () => {
+    spectator = createHost(`<ht-gauge [value]="value" [maxValue]="maxValue" [thresholds]="thresholds"></ht-gauge>`, {
+      hostProps: {
+        value: 80,
+        maxValue: 100,
+        thresholds: [
+          {
+            label: 'Medium',
+            start: 60,
+            end: 90,
+            color: Color.Brown1
+          },
+          {
+            label: 'High',
+            start: 90,
+            end: 100,
+            color: Color.Red5
+          }
+        ]
+      }
+    });
+    spectator.component.onLayoutChange();
+    expect(spectator.component.rendererData).toEqual({
+      backgroundArc: 'M0,0Z',
+      origin: {
+        x: 0,
+        y: -30
+      },
+      data: {
+        value: 80,
+        maxValue: 100,
+        valueArc: 'M0,0Z',
+        threshold: {
+          color: '#9e4c41',
+          end: 90,
+          label: 'Medium',
+          start: 60
+        }
+      }
+    });
+  });
+});

projects/components/src/gauge/gauge.component.ts

@@ -0,0 +1,164 @@
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges } from '@angular/core';
+import { Color, Point } from '@hypertrace/common';
+import { Arc, arc, DefaultArcObject } from 'd3-shape';
+
+@Component({
+  selector: 'ht-gauge',
+  template: `
+    <div class="gauge-container" (htLayoutChange)="this.onLayoutChange()">
+      <svg class="gauge" *ngIf="this.rendererData">
+        <g attr.transform="translate({{ rendererData.origin.x }}, {{ rendererData.origin.y }})">
+          <path class="gauge-ring" [attr.d]="rendererData.backgroundArc" />
+          <g
+            class="input-data"
+            *ngIf="rendererData.data"
+            htTooltip="{{ rendererData.data.value }} of {{ rendererData.data.maxValue }}"
+          >
+            <path
+              class="value-ring"
+              [attr.d]="rendererData.data.valueArc"
+              [attr.fill]="rendererData.data.threshold.color"
+            />
+            <text x="0" y="0" class="value-display" [attr.fill]="rendererData.data.threshold.color">
+              {{ rendererData.data.value }}
+            </text>
+            <text x="0" y="24" class="label-display">{{ rendererData.data.threshold.label }}</text>
+          </g>
+        </g>
+      </svg>
+    </div>
+  `,
+  styleUrls: ['./gauge.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GaugeComponent implements OnChanges {
+  private static readonly GAUGE_RING_WIDTH: number = 20;
+  private static readonly GAUGE_ARC_CORNER_RADIUS: number = 10;
+  private static readonly GAUGE_AXIS_PADDING: number = 30;
+
+  @Input()
+  public value?: number;
+
+  @Input()
+  public maxValue?: number;
+
+  @Input()
+  public thresholds: GaugeThreshold[] = [];
+
+  public rendererData?: GaugeSvgRendererData;
+
+  public constructor(public readonly elementRef: ElementRef) {}
+
+  public ngOnChanges(): void {
+    this.rendererData = this.buildRendererData();
+  }
+
+  public onLayoutChange(): void {
+    this.rendererData = this.buildRendererData();
+  }
+
+  private buildRendererData(): GaugeSvgRendererData | undefined {
+    const inputData = this.calculateInputData();
+    if (!inputData) {
+      return undefined;
+    }
+
+    const boundingBox = this.elementRef.nativeElement.getBoundingClientRect();
+    const radius = this.buildRadius(boundingBox);
+
+    return {
+      origin: this.buildOrigin(boundingBox, radius),
+      backgroundArc: this.buildBackgroundArc(radius),
+      data: this.buildGaugeData(radius, inputData)
+    };
+  }
+
+  private buildBackgroundArc(radius: number): string {
+    return this.buildArcGenerator()({
+      innerRadius: radius - GaugeComponent.GAUGE_RING_WIDTH,
+      outerRadius: radius,
+      startAngle: -Math.PI / 2,
+      endAngle: Math.PI / 2
+    })!;
+  }
+
+  private buildGaugeData(radius: number, inputData?: GaugeInputData): GaugeData | undefined {
+    if (inputData === undefined) {
+      return undefined;
+    }
+
+    return {
+      valueArc: this.buildValueArc(radius, inputData),
+      ...inputData
+    };
+  }
+
+  private buildValueArc(radius: number, inputData: GaugeInputData): string {
+    return this.buildArcGenerator()({
+      innerRadius: radius - GaugeComponent.GAUGE_RING_WIDTH,
+      outerRadius: radius,
+      startAngle: -Math.PI / 2,
+      endAngle: -Math.PI / 2 + (inputData.value / inputData.maxValue) * Math.PI
+    })!;
+  }
+
+  private buildArcGenerator(): Arc<unknown, DefaultArcObject> {
+    return arc().cornerRadius(GaugeComponent.GAUGE_ARC_CORNER_RADIUS);
+  }
+
+  private buildRadius(boundingBox: ClientRect): number {
+    return Math.min(
+      boundingBox.height - GaugeComponent.GAUGE_AXIS_PADDING,
+      boundingBox.height / 2 + Math.min(boundingBox.height, boundingBox.width) / 2
+    );
+  }
+
+  private buildOrigin(boundingBox: ClientRect, radius: number): Point {
+    return {
+      x: boundingBox.width / 2,
+      y: radius
+    };
+  }
+
+  private calculateInputData(): GaugeInputData | undefined {
+    if (this.value !== undefined && this.maxValue !== undefined && this.maxValue > 0 && this.thresholds.length > 0) {
+      const currentThreshold = this.thresholds.find(
+        threshold => this.value! >= threshold.start && this.value! < threshold.end
+      );
+
+      if (currentThreshold) {
+        return {
+          value: this.value,
+          maxValue: this.maxValue,
+          threshold: currentThreshold
+        };
+      }
+    }
+  }
+}
+
+export interface GaugeThreshold {
+  label: string;
+  start: number;
+  end: number;
+  color: Color;
+}
+
+interface GaugeSvgRendererData {
+  origin: Point;
+  backgroundArc: string;
+  data?: GaugeData;
+}
+
+interface GaugeData {
+  valueArc: string;
+  value: number;
+  maxValue: number;
+  threshold: GaugeThreshold;
+}
+
+interface GaugeInputData {
+  value: number;
+  maxValue: number;
+  threshold: GaugeThreshold;
+}

projects/components/src/gauge/gauge.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormattingModule } from '@hypertrace/common';
+import { LayoutChangeModule } from '../layout/layout-change.module';
+import { TooltipModule } from './../tooltip/tooltip.module';
+import { GaugeComponent } from './gauge.component';
+
+@NgModule({
+  declarations: [GaugeComponent],
+  exports: [GaugeComponent],
+  imports: [CommonModule, FormattingModule, TooltipModule, LayoutChangeModule]
+})
+export class GaugeModule {}

projects/components/src/public-api.ts

@@ -81,6 +81,10 @@ export * from './filtering/filter-modal/in-filter-modal.component';
 // Filter Parser
 export * from './filtering/filter/parser/filter-parser-lookup.service';
 
+// Gauge
+export * from './gauge/gauge.component';
+export * from './gauge/gauge.module';
+
 // Header
 export * from './header/application/application-header.component';
 export * from './header/application/application-header.module';