Skip to content

Commit a362318

Browse files
aaron-steinfeldanandtiwarypalbizuPatricio Albizu
authored
feat: allow custom tooltip titles (#1047)
* feat: allow custom tooltip titles * feat: Adding ticks count (#1046) * feat: adding tick days distance parameter in cartesian-axis * feat: Adding d3-time * feat: removing implicit dependencies * feat: removing implicit dependencies * feat: adding tick count * feat: fixing lintern * feat: fixing comment Co-authored-by: Patricio Albizu <[email protected]> * chore: fixup Co-authored-by: Anand Tiwary <[email protected]> Co-authored-by: palbizu <[email protected]> Co-authored-by: Patricio Albizu <[email protected]>
1 parent faf8de6 commit a362318

File tree

5 files changed

+40
-28
lines changed

5 files changed

+40
-28
lines changed

‎projects/observability/src/shared/components/cartesian/cartesian-chart.component.ts‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -165,12 +165,8 @@ export class CartesianChartComponent<TData> implements OnChanges, OnDestroy {
165165
return undefined;
166166
}
167167

168-
const firstXValue = defaultXDataAccessor<unknown>(data[0].dataPoint);
169-
const xAsDate = this.dateCoercer.coerce(firstXValue);
170-
const title = xAsDate ? this.dateFormatter.format(xAsDate) : String(firstXValue);
171-
172168
return {
173-
title: title,
169+
title: this.resolveTooltipTitle(data[0]),
174170
labeledValues: data.map(singleValue => ({
175171
label: singleValue.context.name,
176172
value: defaultYDataAccessor<number | string>(singleValue.dataPoint),
@@ -179,4 +175,15 @@ export class CartesianChartComponent<TData> implements OnChanges, OnDestroy {
179175
}))
180176
};
181177
}
178+
179+
private resolveTooltipTitle(location: MouseLocationData<TData, Series<TData>>): string {
180+
const series = location.context;
181+
if (series.getTooltipTitle) {
182+
return series.getTooltipTitle(location.dataPoint);
183+
}
184+
const xValue = defaultXDataAccessor<unknown>(location.dataPoint);
185+
const xAsDate = this.dateCoercer.coerce(xValue);
186+
187+
return xAsDate ? this.dateFormatter.format(xAsDate) : String(xValue);
188+
}
182189
}

‎projects/observability/src/shared/components/cartesian/chart.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export interface Series<TInterval> {
3131
type: CartesianSeriesVisualizationType;
3232
stacking?: boolean;
3333
hide?: boolean;
34+
getTooltipTitle?(datum: TInterval): string;
3435
}
3536

3637
export interface Band<TInterval> {

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,10 @@ import { ExploreCartesianDataSourceModel, ExplorerData } from './explore-cartesi
2828

2929
describe('Explore cartesian data source model', () => {
3030
const testInterval = new TimeDuration(5, TimeUnit.Minute);
31-
const endTime = new Date('2021-05-11T00:35:00.000Z');
32-
const startTime = new Date(endTime.getTime() - 2 * testInterval.toMillis());
31+
const startTime = new Date('2021-05-11T00:20:00.000Z');
32+
const firstIntervalTime = new Date(startTime.getTime() + testInterval.toMillis());
33+
const secondIntervalTime = new Date(startTime.getTime() + 2 * testInterval.toMillis());
34+
const endTime = new Date(startTime.getTime() + 3 * testInterval.toMillis());
3335

3436
const modelFactory = createModelFactory({
3537
providers: [
@@ -108,7 +110,7 @@ describe('Explore cartesian data source model', () => {
108110
value: 15,
109111
type: AttributeMetadataType.Number
110112
},
111-
[GQL_EXPLORE_RESULT_INTERVAL_KEY]: endTime
113+
[GQL_EXPLORE_RESULT_INTERVAL_KEY]: secondIntervalTime
112114
}
113115
]
114116
},
@@ -127,11 +129,11 @@ describe('Explore cartesian data source model', () => {
127129
value: 10
128130
},
129131
{
130-
timestamp: new Date('2021-05-11T00:30:00.000Z'),
132+
timestamp: firstIntervalTime,
131133
value: 0
132134
},
133135
{
134-
timestamp: endTime,
136+
timestamp: secondIntervalTime,
135137
value: 15
136138
}
137139
]
@@ -247,7 +249,7 @@ describe('Explore cartesian data source model', () => {
247249
value: 'first',
248250
type: AttributeMetadataType.String
249251
},
250-
[GQL_EXPLORE_RESULT_INTERVAL_KEY]: endTime
252+
[GQL_EXPLORE_RESULT_INTERVAL_KEY]: secondIntervalTime
251253
},
252254
{
253255
'sum(foo)': {
@@ -269,7 +271,7 @@ describe('Explore cartesian data source model', () => {
269271
value: 'second',
270272
type: AttributeMetadataType.String
271273
},
272-
[GQL_EXPLORE_RESULT_INTERVAL_KEY]: endTime
274+
[GQL_EXPLORE_RESULT_INTERVAL_KEY]: secondIntervalTime
273275
}
274276
]
275277
},
@@ -288,11 +290,11 @@ describe('Explore cartesian data source model', () => {
288290
value: 10
289291
},
290292
{
291-
timestamp: new Date('2021-05-11T00:30:00.000Z'),
293+
timestamp: firstIntervalTime,
292294
value: 0
293295
},
294296
{
295-
timestamp: endTime,
297+
timestamp: secondIntervalTime,
296298
value: 15
297299
}
298300
]
@@ -307,11 +309,11 @@ describe('Explore cartesian data source model', () => {
307309
value: 20
308310
},
309311
{
310-
timestamp: new Date('2021-05-11T00:30:00.000Z'),
312+
timestamp: firstIntervalTime,
311313
value: 0
312314
},
313315
{
314-
timestamp: endTime,
316+
timestamp: secondIntervalTime,
315317
value: 25
316318
}
317319
]

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export class ExploreResult {
9090
const startTime = Math.floor(this.timeRange.from.valueOf() / intervalDuration) * intervalDuration;
9191
const endTime = Math.ceil(this.timeRange.to.valueOf() / intervalDuration) * intervalDuration;
9292

93-
for (let timestamp = startTime; timestamp <= endTime; timestamp = timestamp + intervalDuration) {
93+
for (let timestamp = startTime; timestamp < endTime; timestamp = timestamp + intervalDuration) {
9494
buckets.push(timestamp);
9595
}
9696

‎projects/observability/src/shared/dashboard/data/graphql/explorer-visualization/explorer-visualization-cartesian-data-source.model.test.ts‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,10 @@ import { ExplorerVisualizationCartesianDataSourceModel } from './explorer-visual
2626

2727
describe('Explorer Visualization cartesian data source model', () => {
2828
const testInterval = new TimeDuration(5, TimeUnit.Minute);
29-
const endTime = new Date('2021-05-11T00:35:00.000Z');
30-
const startTime = new Date(endTime.getTime() - 2 * testInterval.toMillis());
29+
const startTime = new Date('2021-05-11T00:20:00.000Z');
30+
const firstIntervalTime = new Date(startTime.getTime() + testInterval.toMillis());
31+
const secondIntervalTime = new Date(startTime.getTime() + 2 * testInterval.toMillis());
32+
const endTime = new Date(startTime.getTime() + 3 * testInterval.toMillis());
3133

3234
const modelFactory = createModelFactory({
3335
providers: [
@@ -127,7 +129,7 @@ describe('Explorer Visualization cartesian data source model', () => {
127129
value: 15,
128130
type: AttributeMetadataType.Number
129131
},
130-
[GQL_EXPLORE_RESULT_INTERVAL_KEY]: endTime
132+
[GQL_EXPLORE_RESULT_INTERVAL_KEY]: secondIntervalTime
131133
}
132134
]
133135
},
@@ -146,11 +148,11 @@ describe('Explorer Visualization cartesian data source model', () => {
146148
value: 10
147149
},
148150
{
149-
timestamp: new Date('2021-05-11T00:30:00.000Z'),
151+
timestamp: firstIntervalTime,
150152
value: 0
151153
},
152154
{
153-
timestamp: endTime,
155+
timestamp: secondIntervalTime,
154156
value: 15
155157
}
156158
]
@@ -269,7 +271,7 @@ describe('Explorer Visualization cartesian data source model', () => {
269271
value: 'first',
270272
type: AttributeMetadataType.String
271273
},
272-
[GQL_EXPLORE_RESULT_INTERVAL_KEY]: endTime
274+
[GQL_EXPLORE_RESULT_INTERVAL_KEY]: secondIntervalTime
273275
},
274276
{
275277
'sum(foo)': {
@@ -291,7 +293,7 @@ describe('Explorer Visualization cartesian data source model', () => {
291293
value: 'second',
292294
type: AttributeMetadataType.String
293295
},
294-
[GQL_EXPLORE_RESULT_INTERVAL_KEY]: endTime
296+
[GQL_EXPLORE_RESULT_INTERVAL_KEY]: secondIntervalTime
295297
}
296298
]
297299
},
@@ -310,11 +312,11 @@ describe('Explorer Visualization cartesian data source model', () => {
310312
value: 10
311313
},
312314
{
313-
timestamp: new Date('2021-05-11T00:30:00.000Z'),
315+
timestamp: firstIntervalTime,
314316
value: 0
315317
},
316318
{
317-
timestamp: endTime,
319+
timestamp: secondIntervalTime,
318320
value: 15
319321
}
320322
]
@@ -329,11 +331,11 @@ describe('Explorer Visualization cartesian data source model', () => {
329331
value: 20
330332
},
331333
{
332-
timestamp: new Date('2021-05-11T00:30:00.000Z'),
334+
timestamp: firstIntervalTime,
333335
value: 0
334336
},
335337
{
336-
timestamp: endTime,
338+
timestamp: secondIntervalTime,
337339
value: 25
338340
}
339341
]

0 commit comments

Comments
 (0)