feat: supporting aggregation queries in visualization

projects/observability/src/pages/explorer/explorer-dashboard-builder.test.ts

@@ -3,7 +3,7 @@ import { Dashboard } from '@hypertrace/hyperdash';
 import { recordObservable, runFakeRxjs } from '@hypertrace/test-utils';
 import { MockService } from 'ng-mocks';
 import { EMPTY, of } from 'rxjs';
-import { CartesianSeriesVisualizationType } from '../../shared/components/cartesian/chart';
+import { CartesianSeriesVisualizationType, ScaleType } from '../../shared/components/cartesian/chart';
 import { ExploreVisualizationRequest } from '../../shared/components/explore-query-editor/explore-visualization-builder';
 import { LegendPosition } from '../../shared/components/legend/legend.component';
 import { ExplorerVisualizationCartesianDataSourceModel } from '../../shared/dashboard/data/graphql/explorer-visualization/explorer-visualization-cartesian-data-source.model';
@@ -45,6 +45,11 @@ describe('Explorer dashboard builder', () => {
             'selection-handler': {
               type: 'cartesian-explorer-selection-handler',
               'show-context-menu': false
+            },
+            'x-axis': {
+              type: 'cartesian-axis',
+              'scale-type': ScaleType.Band,
+              'show-tick-labels': false
             }
           },
           onReady: expect.any(Function)

projects/observability/src/pages/explorer/explorer-dashboard-builder.ts

@@ -71,14 +71,7 @@
           type: 'cartesian-explorer-selection-handler',
           'show-context-menu': false
         },
-        ...(!isEmpty(request.groupBy) && isEmpty(request.interval)
-          ? {
-              'x-axis': {
-                type: 'cartesian-axis',
-                'scale-type': ScaleType.Band
-              }
-            }
-          : {})
+        ...this.buildXAxis(request)
       },
       onReady: dashboard => {
         dashboard.createAndSetRootDataFromModelClass(ExplorerVisualizationCartesianDataSourceModel);
@@ -168,6 +161,29 @@
     };
   }
 
+  private buildXAxis(request: ExploreVisualizationRequest): object {
+    if (isEmpty(request.interval)) {
+      if (isEmpty(request.groupBy)) {
+        return {
+          'x-axis': {
+            type: 'cartesian-axis',
+            'scale-type': ScaleType.Band,
+            'show-tick-labels': false
+          }
+        };
+      } else {
+        return {
+          'x-axis': {
+            type: 'cartesian-axis',
+            'scale-type': ScaleType.Band
+          }
+        };
+      }
+    }
+
+    return {};
+  }
+
   private getRendererForType(type: AttributeMetadataType): string {
     switch (type) {
       case AttributeMetadataType.Long:

projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts

@@ -58,7 +58,7 @@ import {
         </div>
         <div class="filters-row">
           <ht-explore-query-order-by-editor
-            *ngIf="!currentVisualization.interval"
+            *ngIf="!currentVisualization.interval && currentVisualization.groupBy"
             class="order-by"
             [orderByExpression]="currentVisualization.orderBy"
             [context]="currentVisualization.context"

projects/observability/src/shared/dashboard/data/graphql/explore/explore-cartesian-data-source.model.ts

@@ -123,7 +123,7 @@
       return aggregatableSpecs.map(spec => this.buildGroupedTimeseriesData(spec, groupByExpressions, result)).flat();
     }
 
-    return [];
+    return aggregatableSpecs.map(spec => this.buildMetricAggregationSeriesData(spec, result));
   }
 
   private buildSeries(request: ExploreRequestState, result: SeriesData, color: string): Observable<ExplorerSeries> {
@@ -174,6 +174,15 @@
     };
   }
 
+  public buildMetricAggregationSeriesData(spec: AggregatableSpec, result: ExploreResult): SeriesData {
+    const metricAggregationData = result.getMetricAggregationSeriesData(spec.name, spec.aggregation);
+
+    return {
+      data: metricAggregationData?.value ? [['', metricAggregationData.value]] : [],
+      spec: spec
+    };
+  }
+
   public buildGroupedTimeseriesData(
     spec: AggregatableSpec,
     groupByExpressions: AttributeExpression[],

projects/observability/src/shared/dashboard/data/graphql/explore/explore-result.ts

@@ -39,6 +39,10 @@
     );
   }
 
+  public getMetricAggregationSeriesData(metricKey: string, aggregation: MetricAggregationType): MetricAggregationData {
+    return this.extractMetricAggregationForSpec(this.specBuilder.exploreSpecificationForKey(metricKey, aggregation));
+  }
+
   public getGroupedTimeSeriesData(
     groupExpressions: AttributeExpression[],
     metricKey: string,
@@ -64,10 +68,24 @@
     return this.resultsContainingSpec(spec).map(result => this.resultToGroupData(result, groupBySpecs, spec));
   }
 
+  private extractMetricAggregationForSpec(spec: ExploreSpecification): MetricAggregationData {
+    return this.resultToMetricAggregationDataData(this.resultsContainingSpec(spec)?.[0], spec);
+  }
+
   private extractTimeseriesForSpec(spec: ExploreSpecification): MetricTimeseriesInterval[] {
     return this.resultsToTimeseriesIntervals(this.resultsContainingSpec(spec), spec);
   }
 
+  private resultToMetricAggregationDataData(
+    result: GraphQlExploreResult | undefined,
+    spec: ExploreSpecification
+  ): MetricAggregationData {
+    return {
+      key: spec.name,
+      value: result?.[spec.resultAlias()].value as number
+    };
+  }
+
   private resultToGroupData(
     result: GraphQlExploreResult,
     groupBySpecs: ExploreSpecification[],
@@ -143,3 +161,8 @@
   keys: string[];
   value: number;
 }
+
+interface MetricAggregationData {
+  key: string;
+  value: number | undefined;
+}

projects/observability/src/shared/dashboard/widgets/charts/cartesian-widget/axis/cartesian-axis.model.ts

@@ -37,11 +37,20 @@ export class CartesianAxisModel {
   })
   public minUpperLimit?: number;
 
+  @ModelProperty({
+    key: 'show-tick-labels',
+    required: false,
+    displayName: 'Show Tick Labels',
+    type: BOOLEAN_PROPERTY.type
+  })
+  public showTickLabels?: boolean;
+
   public getAxisOption(): Partial<Axis> {
     return {
       scale: this.scale,
       gridLines: this.showGridLines,
-      max: this.minUpperLimit
+      max: this.minUpperLimit,
+      tickLabels: this.showTickLabels
     };
   }
 }