refactor: fix test and address review comments

Author: anandtiwary

projects/observability/src/public-api.ts

@@ -57,10 +57,6 @@ export {
 export * from './pages/explorer/explorer-dashboard-builder';
 export * from './pages/explorer/explorer.component';
 
-// Gauge
-export * from './shared/components/gauge/gauge.component';
-export * from './shared/components/gauge/gauge.module';
-
 // Legend
 export { LegendPosition } from './shared/components/legend/legend.component';
 
@@ -215,8 +211,7 @@ export * from './shared/dashboard/data/graphql/specifiers/entity-specification.m
 // Explorer service
 export * from './pages/explorer/explorer-service';
 
-
 // Gauge
 export * from './shared/components/gauge/gauge.component';
 export * from './shared/components/gauge/gauge.module';
-export * from './shared/dashboard/widgets/gauge/gauge-widget'
+export * from './shared/dashboard/widgets/gauge/gauge-widget';

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

@@ -1,18 +1,17 @@
-import { FormattingModule } from '@hypertrace/common';
+import { Color, FormattingModule } from '@hypertrace/common';
 import { LoadAsyncModule, TitledContentComponent } from '@hypertrace/components';
 import { RENDERER_API } from '@hypertrace/hyperdash-angular';
 import { createComponentFactory } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { EMPTY, of } from 'rxjs';
-import { DonutComponent } from '../../../components/donut/donut.component';
-import { LegendPosition } from '../../../components/legend/legend.component';
-import { DonutWidgetRendererComponent } from './gauge-widget-renderer.component';
-import { DonutWidgetModel } from './gauge-widget.model';
+import { GaugeComponent } from './../../../components/gauge/gauge.component';
+import { GaugeWidgetRendererComponent } from './gauge-widget-renderer.component';
+import { GaugeWidgetModel } from './gauge-widget.model';
 
-describe('Donut widget renderer component', () => {
-  let mockModel: Partial<DonutWidgetModel> = {};
+describe('Gauge widget renderer component', () => {
+  let mockModel: Partial<GaugeWidgetModel> = {};
   const componentFactory = createComponentFactory({
-    component: DonutWidgetRendererComponent,
+    component: GaugeWidgetRendererComponent,
     shallow: true,
     imports: [FormattingModule, LoadAsyncModule],
     providers: [
@@ -27,53 +26,42 @@ describe('Donut widget renderer component', () => {
         })
       }
     ],
-    declarations: [MockComponent(DonutComponent), MockComponent(TitledContentComponent)]
+    declarations: [MockComponent(GaugeComponent), MockComponent(TitledContentComponent)]
   });
-  test('should render provided data with title and legend', () => {
+
+  test('should render provided data with title', () => {
     mockModel = {
-      header: {
-        title: 'Test title'
-      },
-      legendPosition: LegendPosition.Right,
+      title: 'Test title',
       getData: jest.fn(() =>
         of({
-          series: [
-            {
-              name: 'first',
-              value: 3
-            },
+          value: 5,
+          maxValue: 10,
+          thresholds: [
             {
-              name: 'second',
-              value: 5
+              start: 0,
+              end: 6,
+              label: 'Medium',
+              color: Color.Brown1
             }
-          ],
-          center: {
-            title: 'total',
-            value: 2
-          }
+          ]
         })
-      ),
-      displayLegendCounts: false
+      )
     };
 
     const spectator = componentFactory();
     expect(spectator.query(TitledContentComponent)!.title).toBe('TEST TITLE');
 
-    expect(spectator.query(DonutComponent)!.series).toEqual([
-      {
-        name: 'first',
-        value: 3
-      },
+    const gaugeComponent = spectator.query(GaugeComponent);
+    expect(gaugeComponent).toExist();
+    expect(gaugeComponent!.value).toEqual(5);
+    expect(gaugeComponent!.maxValue).toEqual(10);
+    expect(gaugeComponent!.thresholds).toEqual([
       {
-        name: 'second',
-        value: 5
+        start: 0,
+        end: 6,
+        label: 'Medium',
+        color: Color.Brown1
       }
     ]);
-    expect(spectator.query(DonutComponent)!.center).toEqual({
-      title: 'total',
-      value: 2
-    });
-    expect(spectator.query(DonutComponent)!.legendPosition).toEqual(LegendPosition.Right);
-    expect(spectator.query(DonutComponent)!.displayLegendCounts).toEqual(false);
   });
 });

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

@@ -2,8 +2,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { WidgetRenderer } from '@hypertrace/dashboards';
 import { Renderer } from '@hypertrace/hyperdash';
 import { Observable } from 'rxjs';
-import { GaugeWidgetModel } from './gauge-widget.model';
 import { GaugeWidgetData } from './gauge-widget';
+import { GaugeWidgetModel } from './gauge-widget.model';
 
 @Renderer({ modelClass: GaugeWidgetModel })
 @Component({

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

@@ -1,63 +1,54 @@
-import { DEFAULT_COLOR_PALETTE } from '@hypertrace/common';
+import { Color } from '@hypertrace/common';
 import { createModelFactory } from '@hypertrace/dashboards/testing';
 import { MODEL_PROPERTY_TYPES } from '@hypertrace/hyperdash-angular';
-import { DonutSeriesResults } from '@hypertrace/observability';
 import { runFakeRxjs } from '@hypertrace/test-utils';
 import { of } from 'rxjs';
-import { DonutWidgetModel } from './gauge-widget.model';
+import { GaugeWidgetData } from './gauge-widget';
+import { GaugeWidgetModel } from './gauge-widget.model';
 
-describe('Donut widget model', () => {
+describe('Gauge widget model', () => {
   test('uses colors from color map', () => {
     const modelFactory = createModelFactory();
 
-    const series: DonutSeriesResults = {
-      series: [
+    const data: GaugeWidgetData = {
+      value: 5,
+      maxValue: 10,
+      thresholds: [
         {
-          name: 'first',
-          value: 10
-        },
-        {
-          name: 'second',
-          value: 20
+          start: 0,
+          end: 6,
+          label: 'Medium',
+          color: Color.Brown1
         }
-      ],
-      total: 2
+      ]
     };
 
-    const spectator = modelFactory(DonutWidgetModel, {
+    const spectator = modelFactory(GaugeWidgetModel, {
       api: {
-        getData: () => of(series)
+        getData: () => of(data)
       },
       providers: [
-        {
-          provide: DEFAULT_COLOR_PALETTE,
-          useValue: {
-            name: 'default',
-            colors: []
-          }
-        },
         {
           provide: MODEL_PROPERTY_TYPES,
           useValue: []
         }
-      ]
+      ],
+      properties: {
+        title: 'Test Title'
+      }
     });
 
-    spectator.model.colorPalette = ['red', 'blue'];
-
     runFakeRxjs(({ expectObservable }) => {
       expectObservable(spectator.model.getData()).toBe('(x|)', {
         x: {
-          series: [
-            {
-              color: 'rgb(255, 0, 0)',
-              name: 'first',
-              value: 10
-            },
+          value: 5,
+          maxValue: 10,
+          thresholds: [
             {
-              color: 'rgb(0, 0, 255)',
-              name: 'second',
-              value: 20
+              start: 0,
+              end: 6,
+              label: 'Medium',
+              color: Color.Brown1
             }
           ]
         }

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

@@ -1,12 +1,7 @@
-import {
-  Model,
-  ModelApi,
-  ModelProperty,
-  STRING_PROPERTY
-} from '@hypertrace/hyperdash';
+import { Model, ModelApi, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
+import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular';
 import { Observable } from 'rxjs';
 import { GaugeWidgetData } from './gauge-widget';
-import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular';
 
 @Model({
   type: 'gauge-widget'

projects/observability/src/shared/dashboard/widgets/observability-dashboard-widgets.module.ts

@@ -3,11 +3,11 @@ import { ObservabilityTableCellRendererModule } from '../../components/table/obs
 import { CardListWidgetModule } from './card-list/card-list-widget.module';
 import { CartesianWidgetModule } from './charts/cartesian-widget/cartesian-widget.module';
 import { DonutWidgetModule } from './donut/donut-widget.module';
+import { GaugeWidgetModule } from './gauge/gauge-widget.module';
 import { MetricDisplayWidgetModule } from './metric-display/metric-display-widget.module';
 import { RadarWidgetModule } from './radar/radar-widget.module';
 import { TopNWidgetModule } from './top-n/top-n-widget.module';
 import { TopologyWidgetModule } from './topology/topology-widget.module';
-import { GaugeWidgetModule } from './gauge/gauge-widget.module';
 
 @NgModule({
   imports: [