diff --git a/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts b/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts index 51f2ee888..69c6c57dd 100644 --- a/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts +++ b/projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts @@ -165,12 +165,8 @@ export class CartesianChartComponent implements OnChanges, OnDestroy { return undefined; } - const firstXValue = defaultXDataAccessor(data[0].dataPoint); - const xAsDate = this.dateCoercer.coerce(firstXValue); - const title = xAsDate ? this.dateFormatter.format(xAsDate) : String(firstXValue); - return { - title: title, + title: this.resolveTooltipTitle(data[0]), labeledValues: data.map(singleValue => ({ label: singleValue.context.name, value: defaultYDataAccessor(singleValue.dataPoint), @@ -179,4 +175,15 @@ export class CartesianChartComponent implements OnChanges, OnDestroy { })) }; } + + private resolveTooltipTitle(location: MouseLocationData>): string { + const series = location.context; + if (series.getTooltipTitle) { + return series.getTooltipTitle(location.dataPoint); + } + const xValue = defaultXDataAccessor(location.dataPoint); + const xAsDate = this.dateCoercer.coerce(xValue); + + return xAsDate ? this.dateFormatter.format(xAsDate) : String(xValue); + } } diff --git a/projects/observability/src/shared/components/cartesian/chart.ts b/projects/observability/src/shared/components/cartesian/chart.ts index b0ec073a4..aea7fc114 100644 --- a/projects/observability/src/shared/components/cartesian/chart.ts +++ b/projects/observability/src/shared/components/cartesian/chart.ts @@ -31,6 +31,7 @@ export interface Series { type: CartesianSeriesVisualizationType; stacking?: boolean; hide?: boolean; + getTooltipTitle?(datum: TInterval): string; } export interface Band { diff --git a/projects/observability/src/shared/dashboard/data/graphql/explore/explore-cartesian-data-source.model.test.ts b/projects/observability/src/shared/dashboard/data/graphql/explore/explore-cartesian-data-source.model.test.ts index 4183890d3..a34eeb8c8 100644 --- a/projects/observability/src/shared/dashboard/data/graphql/explore/explore-cartesian-data-source.model.test.ts +++ b/projects/observability/src/shared/dashboard/data/graphql/explore/explore-cartesian-data-source.model.test.ts @@ -28,8 +28,10 @@ import { ExploreCartesianDataSourceModel, ExplorerData } from './explore-cartesi describe('Explore cartesian data source model', () => { const testInterval = new TimeDuration(5, TimeUnit.Minute); - const endTime = new Date('2021-05-11T00:35:00.000Z'); - const startTime = new Date(endTime.getTime() - 2 * testInterval.toMillis()); + const startTime = new Date('2021-05-11T00:20:00.000Z'); + const firstIntervalTime = new Date(startTime.getTime() + testInterval.toMillis()); + const secondIntervalTime = new Date(startTime.getTime() + 2 * testInterval.toMillis()); + const endTime = new Date(startTime.getTime() + 3 * testInterval.toMillis()); const modelFactory = createModelFactory({ providers: [ @@ -108,7 +110,7 @@ describe('Explore cartesian data source model', () => { value: 15, type: AttributeMetadataType.Number }, - [GQL_EXPLORE_RESULT_INTERVAL_KEY]: endTime + [GQL_EXPLORE_RESULT_INTERVAL_KEY]: secondIntervalTime } ] }, @@ -127,11 +129,11 @@ describe('Explore cartesian data source model', () => { value: 10 }, { - timestamp: new Date('2021-05-11T00:30:00.000Z'), + timestamp: firstIntervalTime, value: 0 }, { - timestamp: endTime, + timestamp: secondIntervalTime, value: 15 } ] @@ -247,7 +249,7 @@ describe('Explore cartesian data source model', () => { value: 'first', type: AttributeMetadataType.String }, - [GQL_EXPLORE_RESULT_INTERVAL_KEY]: endTime + [GQL_EXPLORE_RESULT_INTERVAL_KEY]: secondIntervalTime }, { 'sum(foo)': { @@ -269,7 +271,7 @@ describe('Explore cartesian data source model', () => { value: 'second', type: AttributeMetadataType.String }, - [GQL_EXPLORE_RESULT_INTERVAL_KEY]: endTime + [GQL_EXPLORE_RESULT_INTERVAL_KEY]: secondIntervalTime } ] }, @@ -288,11 +290,11 @@ describe('Explore cartesian data source model', () => { value: 10 }, { - timestamp: new Date('2021-05-11T00:30:00.000Z'), + timestamp: firstIntervalTime, value: 0 }, { - timestamp: endTime, + timestamp: secondIntervalTime, value: 15 } ] @@ -307,11 +309,11 @@ describe('Explore cartesian data source model', () => { value: 20 }, { - timestamp: new Date('2021-05-11T00:30:00.000Z'), + timestamp: firstIntervalTime, value: 0 }, { - timestamp: endTime, + timestamp: secondIntervalTime, value: 25 } ] 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 afb063b51..52cdedfb2 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 @@ -90,7 +90,7 @@ export class ExploreResult { const startTime = Math.floor(this.timeRange.from.valueOf() / intervalDuration) * intervalDuration; const endTime = Math.ceil(this.timeRange.to.valueOf() / intervalDuration) * intervalDuration; - for (let timestamp = startTime; timestamp <= endTime; timestamp = timestamp + intervalDuration) { + for (let timestamp = startTime; timestamp < endTime; timestamp = timestamp + intervalDuration) { buckets.push(timestamp); } diff --git a/projects/observability/src/shared/dashboard/data/graphql/explorer-visualization/explorer-visualization-cartesian-data-source.model.test.ts b/projects/observability/src/shared/dashboard/data/graphql/explorer-visualization/explorer-visualization-cartesian-data-source.model.test.ts index 3ee0b4e5a..62860f475 100644 --- a/projects/observability/src/shared/dashboard/data/graphql/explorer-visualization/explorer-visualization-cartesian-data-source.model.test.ts +++ b/projects/observability/src/shared/dashboard/data/graphql/explorer-visualization/explorer-visualization-cartesian-data-source.model.test.ts @@ -26,8 +26,10 @@ import { ExplorerVisualizationCartesianDataSourceModel } from './explorer-visual describe('Explorer Visualization cartesian data source model', () => { const testInterval = new TimeDuration(5, TimeUnit.Minute); - const endTime = new Date('2021-05-11T00:35:00.000Z'); - const startTime = new Date(endTime.getTime() - 2 * testInterval.toMillis()); + const startTime = new Date('2021-05-11T00:20:00.000Z'); + const firstIntervalTime = new Date(startTime.getTime() + testInterval.toMillis()); + const secondIntervalTime = new Date(startTime.getTime() + 2 * testInterval.toMillis()); + const endTime = new Date(startTime.getTime() + 3 * testInterval.toMillis()); const modelFactory = createModelFactory({ providers: [ @@ -127,7 +129,7 @@ describe('Explorer Visualization cartesian data source model', () => { value: 15, type: AttributeMetadataType.Number }, - [GQL_EXPLORE_RESULT_INTERVAL_KEY]: endTime + [GQL_EXPLORE_RESULT_INTERVAL_KEY]: secondIntervalTime } ] }, @@ -146,11 +148,11 @@ describe('Explorer Visualization cartesian data source model', () => { value: 10 }, { - timestamp: new Date('2021-05-11T00:30:00.000Z'), + timestamp: firstIntervalTime, value: 0 }, { - timestamp: endTime, + timestamp: secondIntervalTime, value: 15 } ] @@ -269,7 +271,7 @@ describe('Explorer Visualization cartesian data source model', () => { value: 'first', type: AttributeMetadataType.String }, - [GQL_EXPLORE_RESULT_INTERVAL_KEY]: endTime + [GQL_EXPLORE_RESULT_INTERVAL_KEY]: secondIntervalTime }, { 'sum(foo)': { @@ -291,7 +293,7 @@ describe('Explorer Visualization cartesian data source model', () => { value: 'second', type: AttributeMetadataType.String }, - [GQL_EXPLORE_RESULT_INTERVAL_KEY]: endTime + [GQL_EXPLORE_RESULT_INTERVAL_KEY]: secondIntervalTime } ] }, @@ -310,11 +312,11 @@ describe('Explorer Visualization cartesian data source model', () => { value: 10 }, { - timestamp: new Date('2021-05-11T00:30:00.000Z'), + timestamp: firstIntervalTime, value: 0 }, { - timestamp: endTime, + timestamp: secondIntervalTime, value: 15 } ] @@ -329,11 +331,11 @@ describe('Explorer Visualization cartesian data source model', () => { value: 20 }, { - timestamp: new Date('2021-05-11T00:30:00.000Z'), + timestamp: firstIntervalTime, value: 0 }, { - timestamp: endTime, + timestamp: secondIntervalTime, value: 25 } ]