diff --git a/projects/observability/src/pages/explorer/explorer-dashboard-builder.test.ts b/projects/observability/src/pages/explorer/explorer-dashboard-builder.test.ts index 6d21fc713..0af467ad6 100644 --- a/projects/observability/src/pages/explorer/explorer-dashboard-builder.test.ts +++ b/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) diff --git a/projects/observability/src/pages/explorer/explorer-dashboard-builder.ts b/projects/observability/src/pages/explorer/explorer-dashboard-builder.ts index aea7d175a..b6ef693e7 100644 --- a/projects/observability/src/pages/explorer/explorer-dashboard-builder.ts +++ b/projects/observability/src/pages/explorer/explorer-dashboard-builder.ts @@ -71,14 +71,7 @@ export class ExplorerDashboardBuilder { 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 @@ export class ExplorerDashboardBuilder { }; } + 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: diff --git a/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts b/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts index 8d518d08e..f4148a3c4 100644 --- a/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts +++ b/projects/observability/src/shared/components/explore-query-editor/explore-query-editor.component.ts @@ -58,7 +58,7 @@ import {
this.buildGroupedTimeseriesData(spec, groupByExpressions, result)).flat(); } - return []; + return aggregatableSpecs.map(spec => this.buildMetricAggregationSeriesData(spec, result)); } private buildSeries(request: ExploreRequestState, result: SeriesData, color: string): Observable { @@ -174,6 +174,15 @@ export abstract class ExploreCartesianDataSourceModel extends GraphQlDataSourceM }; } + 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[], diff --git a/projects/observability/src/shared/dashboard/data/graphql/explore/explore-result.ts b/projects/observability/src/shared/dashboard/data/graphql/explore/explore-result.ts index 732df3187..e529b54ee 100644 --- a/projects/observability/src/shared/dashboard/data/graphql/explore/explore-result.ts +++ b/projects/observability/src/shared/dashboard/data/graphql/explore/explore-result.ts @@ -39,6 +39,10 @@ export class ExploreResult { ); } + 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 @@ export class ExploreResult { 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 @@ interface GroupData { keys: string[]; value: number; } + +interface MetricAggregationData { + key: string; + value: number | undefined; +} diff --git a/projects/observability/src/shared/dashboard/widgets/charts/cartesian-widget/axis/cartesian-axis.model.ts b/projects/observability/src/shared/dashboard/widgets/charts/cartesian-widget/axis/cartesian-axis.model.ts index a0b3f2f26..1b6d074e6 100644 --- a/projects/observability/src/shared/dashboard/widgets/charts/cartesian-widget/axis/cartesian-axis.model.ts +++ b/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 { return { scale: this.scale, gridLines: this.showGridLines, - max: this.minUpperLimit + max: this.minUpperLimit, + tickLabels: this.showTickLabels }; } }