refactor: adding value and thresholds to widget model

Author: anandtiwary

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

@@ -120,7 +120,7 @@ export class GaugeComponent implements OnChanges {
   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
+        threshold => this.value! >= threshold.start && this.value! <= threshold.end
       );
 
       if (currentThreshold) {
@@ -138,7 +138,7 @@ export interface GaugeThreshold {
   label: string;
   start: number;
   end: number;
-  color: Color;
+  color: Color | string;
 }
 
 interface GaugeSvgRendererData {

projects/observability/src/shared/dashboard/widgets/gauge/gauge-widget.model.test.ts

@@ -3,29 +3,17 @@ import { createModelFactory } from '@hypertrace/dashboards/testing';
 import { MODEL_PROPERTY_TYPES } from '@hypertrace/hyperdash-angular';
 import { runFakeRxjs } from '@hypertrace/test-utils';
 import { of } from 'rxjs';
-import { GaugeWidgetData } from './gauge-widget';
 import { GaugeWidgetModel } from './gauge-widget.model';
 
 describe('Gauge widget model', () => {
   test('uses colors from color map', () => {
     const modelFactory = createModelFactory();
 
-    const data: GaugeWidgetData = {
-      value: 5,
-      maxValue: 10,
-      thresholds: [
-        {
-          start: 0,
-          end: 6,
-          label: 'Medium',
-          color: Color.Brown1
-        }
-      ]
-    };
+    const value = 5;
 
     const spectator = modelFactory(GaugeWidgetModel, {
       api: {
-        getData: () => of(data)
+        getData: () => of(value)
       },
       providers: [
         {
@@ -34,7 +22,16 @@ describe('Gauge widget model', () => {
         }
       ],
       properties: {
-        title: 'Test Title'
+        title: 'Test Title',
+        maxValue: 10,
+        thresholds: [
+          {
+            start: 0,
+            end: 6,
+            label: 'Medium',
+            color: Color.Brown1
+          }
+        ]
       }
     });
 

projects/observability/src/shared/dashboard/widgets/gauge/gauge-widget.model.ts

@@ -1,8 +1,16 @@
-import { Model, ModelApi, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
+import {
+  ARRAY_PROPERTY,
+  Model,
+  ModelApi,
+  ModelProperty,
+  NUMBER_PROPERTY,
+  STRING_PROPERTY
+} from '@hypertrace/hyperdash';
 import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular';
 import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { GaugeWidgetData } from './gauge-widget';
-
+import { GaugeThresholdModel } from './thresholds/gauge-threshold.model';
 @Model({
   type: 'gauge-widget'
 })
@@ -13,10 +21,30 @@ export class GaugeWidgetModel {
   })
   public title?: string;
 
+  @ModelProperty({
+    key: 'max-value',
+    type: NUMBER_PROPERTY.type,
+    required: true
+  })
+  public maxValue!: number;
+
+  @ModelProperty({
+    key: 'thresholds',
+    type: ARRAY_PROPERTY.type,
+    required: true
+  })
+  public thresholds!: GaugeThresholdModel[];
+
   @ModelInject(MODEL_API)
   private readonly api!: ModelApi;
 
   public getData(): Observable<GaugeWidgetData> {
-    return this.api.getData<GaugeWidgetData>();
+    return this.api.getData<number>().pipe(
+      map(value => ({
+        value: value,
+        maxValue: this.maxValue,
+        thresholds: this.thresholds
+      }))
+    );
   }
 }

projects/observability/src/shared/dashboard/widgets/gauge/thresholds/gauge-threshold.model.ts

@@ -0,0 +1,34 @@
+import { Model, ModelProperty, NUMBER_PROPERTY, STRING_PROPERTY, UNKNOWN_PROPERTY } from '@hypertrace/hyperdash';
+
+@Model({
+  type: 'gauge-threshold'
+})
+export class GaugeThresholdModel {
+  @ModelProperty({
+    key: 'start',
+    type: NUMBER_PROPERTY.type,
+    required: true
+  })
+  public start!: number;
+
+  @ModelProperty({
+    key: 'end',
+    type: NUMBER_PROPERTY.type,
+    required: true
+  })
+  public end!: number;
+
+  @ModelProperty({
+    key: 'label',
+    type: STRING_PROPERTY.type,
+    required: true
+  })
+  public label!: string;
+
+  @ModelProperty({
+    key: 'color',
+    type: UNKNOWN_PROPERTY.type,
+    required: true
+  })
+  public color!: string;
+}