diff --git a/packages/ag-charts-community/src/chart/chart.ts b/packages/ag-charts-community/src/chart/chart.ts index 07057f795b..7f9fc1c79b 100644 --- a/packages/ag-charts-community/src/chart/chart.ts +++ b/packages/ag-charts-community/src/chart/chart.ts @@ -65,6 +65,7 @@ import { ChartOverlays } from './overlay/chartOverlays'; import { getLoadingSpinner } from './overlay/loadingSpinner'; import { type PickFocusOutputs, type Series, SeriesGroupingChangedEvent, SeriesNodePickMode } from './series/series'; import { SeriesLayerManager } from './series/seriesLayerManager'; +import type { SeriesProperties } from './series/seriesProperties'; import type { SeriesGrouping } from './series/seriesStateManager'; import type { ISeries, SeriesNodeDatum } from './series/seriesTypes'; import { @@ -1047,18 +1048,22 @@ export abstract class Chart extends Observable { protected animationRect?: BBox; // x/y are local canvas coordinates in CSS pixels, not actual pixels - private pickSeriesNode(point: Point, exactMatchOnly: boolean, maxDistance?: number): PickedNode | undefined { + private pickNode( + point: Point, + collection: { + series: Series>; + pickModes?: SeriesNodePickMode[]; + maxDistance?: number; + }[] + ): PickedNode | undefined { const start = performance.now(); - // Disable 'nearest match' options if looking for exact matches only - const pickModes = exactMatchOnly ? [SeriesNodePickMode.EXACT_SHAPE_MATCH] : undefined; - // Iterate through series in reverse, as later declared series appears on top of earlier // declared series. - const reverseSeries = [...this.series].reverse(); + const reverseSeries = [...collection].reverse(); let result: { series: Series; datum: SeriesNodeDatum; distance: number } | undefined; - for (const series of reverseSeries) { + for (const { series, pickModes, maxDistance } of reverseSeries) { if (!series.visible || !series.rootGroup.visible) { continue; } @@ -1081,6 +1086,35 @@ export abstract class Chart extends Observable { return result; } + private pickSeriesNode(point: Point, exactMatchOnly: boolean, maxDistance?: number): PickedNode | undefined { + // Disable 'nearest match' options if looking for exact matches only + const pickModes = exactMatchOnly ? [SeriesNodePickMode.EXACT_SHAPE_MATCH] : undefined; + return this.pickNode( + point, + this.series.map((series) => { + return { series, pickModes, maxDistance }; + }) + ); + } + + private pickTooltip(point: Point): PickedNode | undefined { + return this.pickNode( + point, + this.series.map((series) => { + const tooltipRange = series.properties.tooltip.range; + let pickModes: SeriesNodePickMode[] | undefined; + if (tooltipRange === 'exact') { + pickModes = [SeriesNodePickMode.EXACT_SHAPE_MATCH]; + } else { + pickModes = undefined; + } + + const maxDistance = typeof tooltipRange === 'number' ? tooltipRange : undefined; + return { series, pickModes, maxDistance }; + }) + ); + } + private lastPick?: SeriesNodeDatum; protected onMouseMove(event: PointerInteractionEvent<'hover'>): void { @@ -1286,15 +1320,9 @@ export abstract class Chart extends Observable { event: TooltipPointerEvent<'hover'>, disablePointer: (highlightOnly?: boolean) => void ) { - const { lastPick, tooltip } = this; - const { range } = tooltip; + const { lastPick } = this; const { offsetX, offsetY, targetElement } = event; - let pixelRange; - if (isFiniteNumber(range)) { - pixelRange = range; - } - if ( targetElement && this.tooltip.interactive && @@ -1304,7 +1332,7 @@ export abstract class Chart extends Observable { return; } - const pick = this.pickSeriesNode({ x: offsetX, y: offsetY }, range === 'exact', pixelRange); + const pick = this.pickTooltip({ x: offsetX, y: offsetY }); if (!pick) { this.ctx.tooltipManager.removeTooltip(this.id); if (this.highlight.range === 'tooltip') { @@ -1324,11 +1352,8 @@ export abstract class Chart extends Observable { } } - const isPixelRange = pixelRange != null; const tooltipEnabled = this.tooltip.enabled && pick.series.tooltipEnabled; - const exactlyMatched = range === 'exact' && pick.distance === 0; - const rangeMatched = range === 'nearest' || isPixelRange || exactlyMatched; - const shouldUpdateTooltip = tooltipEnabled && rangeMatched && (!isNewDatum || html !== undefined); + const shouldUpdateTooltip = tooltipEnabled && (!isNewDatum || html !== undefined); const meta = TooltipManager.makeTooltipMeta(event, pick.datum); @@ -1923,6 +1948,7 @@ export abstract class Chart extends Observable { } target.properties.set(seriesOptions); + this.applySeriesTooltipDefaults(target); if ('data' in options) { target.setOptionsData(data); @@ -1941,6 +1967,17 @@ export abstract class Chart extends Observable { } } + // The `chart.series[].tooltip.range` option is a bit different for legacy reason. This use to be + // global option (`chart.tooltip.range`) that could overriden the theme. But now, the tooltip range + // option is series-specific. + // + // To preserve backward compatiblity, the `chart.tooltip.range` theme default has been changed from + // 'nearest' to undefined. + private applySeriesTooltipDefaults(target: Series>) { + target.properties.tooltip.range ??= this.tooltip.range; + target.properties.tooltip.range ??= target.defaultTooltipRange; + } + private createAxis(options: AgBaseAxisOptions[], skip: string[]): ChartAxis[] { const newAxes: ChartAxis[] = []; const moduleContext = this.getModuleContext(); diff --git a/packages/ag-charts-community/src/chart/series/cartesian/areaSeries.ts b/packages/ag-charts-community/src/chart/series/cartesian/areaSeries.ts index 40ac86673e..2572f36883 100644 --- a/packages/ag-charts-community/src/chart/series/cartesian/areaSeries.ts +++ b/packages/ag-charts-community/src/chart/series/cartesian/areaSeries.ts @@ -85,6 +85,7 @@ export class AreaSeries extends CartesianSeries< pathsPerSeries: 2, pathsZIndexSubOrderOffset: [0, 1000], hasMarkers: true, + defaultTooltipRange: 'nearest', markerSelectionGarbageCollection: false, pickModes: [SeriesNodePickMode.NEAREST_BY_MAIN_AXIS_FIRST, SeriesNodePickMode.EXACT_SHAPE_MATCH], animationResetFns: { diff --git a/packages/ag-charts-community/src/chart/series/cartesian/barSeries.ts b/packages/ag-charts-community/src/chart/series/cartesian/barSeries.ts index 1c40271f04..d4bd1dc1fc 100644 --- a/packages/ag-charts-community/src/chart/series/cartesian/barSeries.ts +++ b/packages/ag-charts-community/src/chart/series/cartesian/barSeries.ts @@ -109,6 +109,7 @@ export class BarSeries extends AbstractBarSeries AnimationValue & Partial; label?: (node: Text, datum: TDatum) => AnimationValue & Partial; @@ -112,6 +115,7 @@ export abstract class PolarSeries< [ChartAxisDirection.Y]: ['radiusName'], }, canHaveAxes, + defaultTooltipRange, }); this.showFocusBox = false; diff --git a/packages/ag-charts-community/src/chart/series/series.ts b/packages/ag-charts-community/src/chart/series/series.ts index 44a9e048d0..380fe54351 100644 --- a/packages/ag-charts-community/src/chart/series/series.ts +++ b/packages/ag-charts-community/src/chart/series/series.ts @@ -1,7 +1,7 @@ import type { ModuleContext, SeriesContext } from '../../module/moduleContext'; import { ModuleMap } from '../../module/moduleMap'; import type { SeriesOptionInstance, SeriesOptionModule, SeriesType } from '../../module/optionsModuleTypes'; -import type { AgChartLabelFormatterParams, AgChartLabelOptions } from '../../options/agChartOptions'; +import type { AgChartLabelFormatterParams, AgChartLabelOptions, InteractionRange } from '../../options/agChartOptions'; import type { AgSeriesMarkerFormatterParams, AgSeriesMarkerStyle, @@ -265,6 +265,7 @@ export type SeriesConstructorOpts> = { directionKeys?: SeriesDirectionKeysMapping; directionNames?: SeriesDirectionKeysMapping; canHaveAxes?: boolean; + defaultTooltipRange: InteractionRange; }; export abstract class Series< @@ -300,6 +301,9 @@ export abstract class Series< readonly canHaveAxes: boolean; + // This property is used to keep backward compatibility with the old global `tooltip.range` option. + readonly defaultTooltipRange: InteractionRange; + get type(): SeriesType { return (this.constructor as any).type ?? ''; } @@ -415,12 +419,14 @@ export abstract class Series< directionNames = {}, contentGroupVirtual = true, canHaveAxes = false, + defaultTooltipRange, } = seriesOpts; this.ctx = moduleCtx; this.directionKeys = directionKeys; this.directionNames = directionNames; this.canHaveAxes = canHaveAxes; + this.defaultTooltipRange = defaultTooltipRange; this.contentGroup = this.rootGroup.appendChild( new Group({ diff --git a/packages/ag-charts-community/src/chart/series/seriesTooltip.ts b/packages/ag-charts-community/src/chart/series/seriesTooltip.ts index 71a0e599ad..4fdab0b3be 100644 --- a/packages/ag-charts-community/src/chart/series/seriesTooltip.ts +++ b/packages/ag-charts-community/src/chart/series/seriesTooltip.ts @@ -1,7 +1,8 @@ +import type { InteractionRange } from '../../options/agChartOptions'; import type { AgSeriesTooltipRendererParams, AgTooltipRendererResult } from '../../options/chart/tooltipOptions'; import { BaseProperties } from '../../util/properties'; import type { RequireOptional } from '../../util/types'; -import { BOOLEAN, FUNCTION, OBJECT, Validate } from '../../util/validation'; +import { BOOLEAN, FUNCTION, INTERACTION_RANGE, OBJECT, Validate } from '../../util/validation'; import { TooltipPosition, toTooltipHtml } from '../tooltip/tooltip'; type TooltipRenderer

= (params: P) => string | AgTooltipRendererResult; @@ -27,6 +28,9 @@ export class SeriesTooltip

extends Base @Validate(OBJECT) readonly position = new TooltipPosition(); + @Validate(INTERACTION_RANGE, { optional: true }) + range?: InteractionRange = undefined; + toTooltipHtml(defaults: AgTooltipRendererResult, params: RequireOptional

) { if (this.renderer) { return toTooltipHtml(this.renderer(params as P), defaults); diff --git a/packages/ag-charts-community/src/chart/themes/chartTheme.ts b/packages/ag-charts-community/src/chart/themes/chartTheme.ts index 2418b7a6df..936e34f2f1 100644 --- a/packages/ag-charts-community/src/chart/themes/chartTheme.ts +++ b/packages/ag-charts-community/src/chart/themes/chartTheme.ts @@ -4,7 +4,6 @@ import type { AgChartThemeOverrides, AgChartThemePalette, AgCommonThemeableChartOptions, - InteractionRange, } from '../../options/agChartOptions'; import { deepClone, jsonWalk } from '../../util/json'; import { mergeDefaults } from '../../util/object'; @@ -195,7 +194,7 @@ export class ChartTheme { tooltip: { enabled: true, darkTheme: IS_DARK_THEME, - range: 'nearest' as InteractionRange, + range: undefined, delay: 0, }, overlays: { diff --git a/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-prefer-series-tooltip-range-over-chart-tooltip-range-1-snap.png b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-prefer-series-tooltip-range-over-chart-tooltip-range-1-snap.png new file mode 100644 index 0000000000..447f9017f0 Binary files /dev/null and b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-prefer-series-tooltip-range-over-chart-tooltip-range-1-snap.png differ diff --git a/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-prefer-series-tooltip-range-over-chart-tooltip-range-2-snap.png b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-prefer-series-tooltip-range-over-chart-tooltip-range-2-snap.png new file mode 100644 index 0000000000..bfeaf415ff Binary files /dev/null and b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-prefer-series-tooltip-range-over-chart-tooltip-range-2-snap.png differ diff --git a/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-chart-tooltip-range-as-default-1-snap.png b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-chart-tooltip-range-as-default-1-snap.png new file mode 100644 index 0000000000..447f9017f0 Binary files /dev/null and b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-chart-tooltip-range-as-default-1-snap.png differ diff --git a/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-chart-tooltip-range-as-default-2-snap.png b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-chart-tooltip-range-as-default-2-snap.png new file mode 100644 index 0000000000..bfeaf415ff Binary files /dev/null and b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-chart-tooltip-range-as-default-2-snap.png differ diff --git a/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-series-tooltip-range-as-default-1-snap.png b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-series-tooltip-range-as-default-1-snap.png new file mode 100644 index 0000000000..7df6833177 Binary files /dev/null and b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-series-tooltip-range-as-default-1-snap.png differ diff --git a/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-series-tooltip-range-as-default-2-snap.png b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-series-tooltip-range-as-default-2-snap.png new file mode 100644 index 0000000000..8ceb1fe762 Binary files /dev/null and b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-series-tooltip-range-as-default-2-snap.png differ diff --git a/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-the-same-default-behaviour-as-v-9-1-snap.png b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-the-same-default-behaviour-as-v-9-1-snap.png new file mode 100644 index 0000000000..fe5e84ddbc Binary files /dev/null and b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-the-same-default-behaviour-as-v-9-1-snap.png differ diff --git a/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-the-same-default-behaviour-as-v-9-2-snap.png b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-the-same-default-behaviour-as-v-9-2-snap.png new file mode 100644 index 0000000000..0501fb2728 Binary files /dev/null and b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-the-same-default-behaviour-as-v-9-2-snap.png differ diff --git a/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-the-same-default-behaviour-as-v-9-3-snap.png b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-the-same-default-behaviour-as-v-9-3-snap.png new file mode 100644 index 0000000000..310f8363c6 Binary files /dev/null and b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-the-same-default-behaviour-as-v-9-3-snap.png differ diff --git a/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-the-same-default-behaviour-as-v-9-4-snap.png b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-the-same-default-behaviour-as-v-9-4-snap.png new file mode 100644 index 0000000000..a949dd4423 Binary files /dev/null and b/packages/ag-charts-community/src/chart/tooltip/__image_snapshots__/tooltip-test-ts-tooltip-ag-11591-range-should-use-the-same-default-behaviour-as-v-9-4-snap.png differ diff --git a/packages/ag-charts-community/src/chart/tooltip/tooltip.test.ts b/packages/ag-charts-community/src/chart/tooltip/tooltip.test.ts index 2fbd2d94ef..0cb268ecea 100644 --- a/packages/ag-charts-community/src/chart/tooltip/tooltip.test.ts +++ b/packages/ag-charts-community/src/chart/tooltip/tooltip.test.ts @@ -1,20 +1,36 @@ import { describe, expect, it } from '@jest/globals'; import { AgCharts } from '../../api/agCharts'; -import type { AgChartOptions } from '../../options/agChartOptions'; +import { type AgChartOptions } from '../../options/agChartOptions'; import { getDocument } from '../../util/dom'; import { AgChartProxy, + Chart, + IMAGE_SNAPSHOT_DEFAULTS, createChart, expectWarningsCalls, + extractImageData, hoverAction, prepareTestOptions, + setupMockCanvas, setupMockConsole, waitForChartStability, } from '../test/utils'; describe('Tooltip', () => { setupMockConsole(); + let ctx: ReturnType; + let chart: AgChartProxy | Chart; + + afterEach(() => { + chart?.destroy(); + }); + + const compare = async () => { + await waitForChartStability(chart); + const imageData = extractImageData(ctx); + expect(imageData).toMatchImageSnapshot(IMAGE_SNAPSHOT_DEFAULTS); + }; describe('Validation', () => { it('should show 1 warning for invalid tooltip value', async () => { @@ -63,11 +79,6 @@ describe('Tooltip', () => { }); describe('Realtime', () => { - let chart: AgChartProxy; - afterEach(() => { - chart?.destroy(); - }); - it('should update tooltip correctly', async () => { // See AG-10409: The tooltip should update when the mouse stays in place but the data is updated. const opts: AgChartOptions = prepareTestOptions({}); @@ -91,7 +102,7 @@ describe('Tooltip', () => { const nextValue = async (time: number, voltage: number) => { opts.data!.shift(); opts.data!.push({ time, voltage }); - await chart.update(opts); + await (chart as AgChartProxy).update(opts); await waitForChartStability(chart); }; @@ -117,4 +128,68 @@ describe('Tooltip', () => { expect(element.map((e) => e.textContent).join('')).toEqual('9.0: 1.17'); }); }); + + describe('AG-11591 Range', () => { + ctx = setupMockCanvas(); + + const testHover = async (x: number, y: number) => { + await hoverAction(x, y)(chart); + await compare(); + }; + + it('should use the same default behaviour as v9', async () => { + chart = await createChart({ + data: [ + { x: 'Q1', a: 22, b: 25, L: 3.4 }, + { x: 'Q2', a: 18, b: 13, L: 4.0 }, + ], + series: [ + { type: 'bar', xKey: 'x', yKey: 'a' }, + { type: 'bar', xKey: 'x', yKey: 'b' }, + { type: 'line', xKey: 'x', yKey: 'L' }, + ], + axes: [ + { type: 'category', position: 'bottom' }, + { type: 'number', position: 'left', keys: ['b', 'a'] }, + { type: 'number', position: 'right', keys: ['L'] }, + ], + }); + await testHover(221, 256); // highlight datum Q1 series L + await testHover(666, 251); // highlight datum Q2 series L + await testHover(152, 217); // highlight datum Q1 series a + await testHover(659, 327); // highlight datum Q2 series b + }); + + it('should use chart tooltip.range as default', async () => { + chart = await createChart({ + tooltip: { range: 20 }, + data: [{ x: 'Q1', a: 22 }], + series: [{ type: 'bar', xKey: 'x', yKey: 'a' }], + }); + await testHover(58, 28); // highlight nothing + await testHover(137, 137); // highlight datum Q1 series b + }); + + it('should use series tooltip.range as default', async () => { + chart = await createChart({ + data: [{ x: 'Q1', a: 22, b: 25 }], + series: [ + { type: 'bar', xKey: 'x', yKey: 'a' }, + { type: 'bar', xKey: 'x', yKey: 'b', tooltip: { range: 'nearest' } }, + ], + }); + await testHover(250, 250); // exact match on series a + await testHover(100, 300); // nearest match on series b (even though series a is nearest) + }); + + it('should prefer series tooltip.range over chart tooltip.range', async () => { + chart = await createChart({ + tooltip: { range: 'nearest' }, + data: [{ x: 'Q1', a: 22 }], + series: [{ type: 'bar', xKey: 'x', yKey: 'a', tooltip: { range: 20 } }], + }); + await testHover(58, 28); // no highlight match + await testHover(137, 137); // match within range <= 20 + }); + }); }); diff --git a/packages/ag-charts-community/src/chart/tooltip/tooltip.ts b/packages/ag-charts-community/src/chart/tooltip/tooltip.ts index 8cc24e866d..a76a095aad 100644 --- a/packages/ag-charts-community/src/chart/tooltip/tooltip.ts +++ b/packages/ag-charts-community/src/chart/tooltip/tooltip.ts @@ -154,8 +154,8 @@ export class Tooltip extends BaseProperties { @Validate(POSITIVE_NUMBER) delay: number = 0; - @Validate(INTERACTION_RANGE) - range: InteractionRange = 'nearest'; + @Validate(INTERACTION_RANGE, { optional: true }) + range?: InteractionRange = undefined; @Validate(TEXT_WRAP) wrapping: TextWrap = 'hyphenate'; diff --git a/packages/ag-charts-community/src/module/__snapshots__/optionsModule.test.ts.snap b/packages/ag-charts-community/src/module/__snapshots__/optionsModule.test.ts.snap index b76da43bd0..b072520b5e 100644 --- a/packages/ag-charts-community/src/module/__snapshots__/optionsModule.test.ts.snap +++ b/packages/ag-charts-community/src/module/__snapshots__/optionsModule.test.ts.snap @@ -470,7 +470,7 @@ exports[`ChartOptions #prepareOptions for ADV_CHART_CUSTOMISATION it should prep "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -984,7 +984,7 @@ exports[`ChartOptions #prepareOptions for ADV_COMBINATION_SERIES_CHART_EXAMPLE i "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -1616,7 +1616,7 @@ exports[`ChartOptions #prepareOptions for ADV_CUSTOM_MARKER_SHAPES_EXAMPLE it sh "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -2278,7 +2278,7 @@ exports[`ChartOptions #prepareOptions for ADV_CUSTOM_TOOLTIPS_EXAMPLE it should "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -2642,7 +2642,7 @@ exports[`ChartOptions #prepareOptions for ADV_PER_MARKER_CUSTOMISATION_EXAMPLE i "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -3131,7 +3131,7 @@ exports[`ChartOptions #prepareOptions for ADV_TIME_AXIS_WITH_IRREGULAR_INTERVALS "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -3735,7 +3735,7 @@ exports[`ChartOptions #prepareOptions for AREA_GRAPH_WITH_NEGATIVE_VALUES_EXAMPL "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -4109,7 +4109,7 @@ by Occupation", "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -4480,7 +4480,7 @@ exports[`ChartOptions #prepareOptions for BAR_CHART_WITH_LABELS_EXAMPLE it shoul "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -4843,7 +4843,7 @@ exports[`ChartOptions #prepareOptions for BUBBLE_GRAPH_WITH_CATEGORIES_EXAMPLE i "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -5208,7 +5208,7 @@ exports[`ChartOptions #prepareOptions for BUBBLE_GRAPH_WITH_NEGATIVE_VALUES_EXAM "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -5643,7 +5643,7 @@ exports[`ChartOptions #prepareOptions for COLUMN_CHART_WITH_NEGATIVE_VALUES_EXAM "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -6082,7 +6082,7 @@ exports[`ChartOptions #prepareOptions for GROUPED_BAR_CHART_EXAMPLE it should pr "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -6744,7 +6744,7 @@ exports[`ChartOptions #prepareOptions for GROUPED_COLUMN_EXAMPLE it should prepa "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -7755,7 +7755,7 @@ exports[`ChartOptions #prepareOptions for LINE_GRAPH_WITH_GAPS_EXAMPLE it should "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -8114,7 +8114,7 @@ exports[`ChartOptions #prepareOptions for LOG_AXIS_EXAMPLE it should prepare opt "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -8849,7 +8849,7 @@ exports[`ChartOptions #prepareOptions for ONE_HUNDRED_PERCENT_STACKED_AREA_GRAPH "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -9338,7 +9338,7 @@ exports[`ChartOptions #prepareOptions for ONE_HUNDRED_PERCENT_STACKED_BAR_EXAMPL "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -9957,7 +9957,7 @@ exports[`ChartOptions #prepareOptions for ONE_HUNDRED_PERCENT_STACKED_COLUMNS_EX "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -10477,7 +10477,7 @@ exports[`ChartOptions #prepareOptions for SIMPLE_AREA_GRAPH_EXAMPLE it should pr "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -10846,7 +10846,7 @@ exports[`ChartOptions #prepareOptions for SIMPLE_COLUMN_CHART_EXAMPLE it should "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -11076,7 +11076,7 @@ exports[`ChartOptions #prepareOptions for SIMPLE_DONUT_CHART_EXAMPLE it should p "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -11499,7 +11499,7 @@ exports[`ChartOptions #prepareOptions for SIMPLE_LINE_CHART_EXAMPLE it should pr "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -11707,7 +11707,7 @@ exports[`ChartOptions #prepareOptions for SIMPLE_PIE_CHART_EXAMPLE it should pre "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -12058,7 +12058,7 @@ exports[`ChartOptions #prepareOptions for SIMPLE_SCATTER_CHART_EXAMPLE it should "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -12759,7 +12759,7 @@ exports[`ChartOptions #prepareOptions for STACKED_AREA_GRAPH_EXAMPLE it should p "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -13273,7 +13273,7 @@ exports[`ChartOptions #prepareOptions for STACKED_BAR_CHART_EXAMPLE it should pr "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; @@ -13863,7 +13863,7 @@ exports[`ChartOptions #prepareOptions for STACKED_COLUMN_GRAPH_EXAMPLE it should "darkTheme": false, "delay": 0, "enabled": true, - "range": "nearest", + "range": undefined, }, } `; diff --git a/packages/ag-charts-community/src/options/chart/tooltipOptions.ts b/packages/ag-charts-community/src/options/chart/tooltipOptions.ts index 9ec0a88be3..424a078d8c 100644 --- a/packages/ag-charts-community/src/options/chart/tooltipOptions.ts +++ b/packages/ag-charts-community/src/options/chart/tooltipOptions.ts @@ -8,7 +8,7 @@ export interface AgChartTooltipOptions { showArrow?: boolean; /** A class name to be added to the tooltip element of the chart. */ class?: string; - /** Range from a point that triggers the tooltip to show. */ + /** Range from a point that triggers the tooltip to show. This is the default value that will be used unless overriden by the series. */ range?: InteractionRange; /** The position of the tooltip. */ position?: AgTooltipPositionOptions; @@ -76,6 +76,8 @@ export interface AgSeriesTooltip interaction?: AgSeriesTooltipInteraction; /** Function used to create the content for tooltips. */ renderer?: (params: TParams) => string | AgTooltipRendererResult; + /** Range from a point that triggers the tooltip to show. Each series type uses its own default; typically this is `'nearest'` for marker-based series and `'exact'` for shape-based series. */ + range?: InteractionRange; } export interface AgSeriesTooltipInteraction { diff --git a/packages/ag-charts-enterprise/src/series/box-plot/boxPlotSeries.ts b/packages/ag-charts-enterprise/src/series/box-plot/boxPlotSeries.ts index 5679c0d61e..1ce732605d 100644 --- a/packages/ag-charts-enterprise/src/series/box-plot/boxPlotSeries.ts +++ b/packages/ag-charts-enterprise/src/series/box-plot/boxPlotSeries.ts @@ -68,6 +68,7 @@ export class BoxPlotSeries extends _ModuleSupport.AbstractBarSeries< x: ['xName'], y: ['medianName', 'q1Name', 'q3Name', 'minName', 'maxName'], }, + defaultTooltipRange: 'exact', pathsPerSeries: 1, hasHighlightedLabels: true, }); diff --git a/packages/ag-charts-enterprise/src/series/bullet/bulletSeries.ts b/packages/ag-charts-enterprise/src/series/bullet/bulletSeries.ts index 70e0f0c3bd..20cd89b9e7 100644 --- a/packages/ag-charts-enterprise/src/series/bullet/bulletSeries.ts +++ b/packages/ag-charts-enterprise/src/series/bullet/bulletSeries.ts @@ -75,6 +75,7 @@ export class BulletSeries extends _ModuleSupport.AbstractBarSeries< _ModuleSupport.SeriesNodePickMode.NEAREST_NODE, _ModuleSupport.SeriesNodePickMode.EXACT_SHAPE_MATCH, ], + defaultTooltipRange: 'exact', hasHighlightedLabels: true, animationResetFns: { datum: resetBarSelectionsFn, diff --git a/packages/ag-charts-enterprise/src/series/candlestick/candlestickSeriesBase.ts b/packages/ag-charts-enterprise/src/series/candlestick/candlestickSeriesBase.ts index 9104f32df5..4454c59565 100644 --- a/packages/ag-charts-enterprise/src/series/candlestick/candlestickSeriesBase.ts +++ b/packages/ag-charts-enterprise/src/series/candlestick/candlestickSeriesBase.ts @@ -94,6 +94,7 @@ export abstract class CandlestickSeriesBase< x: ['xName'], y: ['lowName', 'highName', 'openName', 'closeName'], }, + defaultTooltipRange: 'nearest', pathsPerSeries: 1, datumSelectionGarbageCollection: false, animationAlwaysUpdateSelections: true, diff --git a/packages/ag-charts-enterprise/src/series/chord/chordSeries.ts b/packages/ag-charts-enterprise/src/series/chord/chordSeries.ts index 823093cce4..bcd0484ff0 100644 --- a/packages/ag-charts-enterprise/src/series/chord/chordSeries.ts +++ b/packages/ag-charts-enterprise/src/series/chord/chordSeries.ts @@ -70,6 +70,7 @@ export class ChordSeries extends FlowProportionSeries< moduleCtx, contentGroupVirtual: false, pickModes: [SeriesNodePickMode.NEAREST_NODE, SeriesNodePickMode.EXACT_SHAPE_MATCH], + defaultTooltipRange: 'exact', }); } diff --git a/packages/ag-charts-enterprise/src/series/heatmap/heatmapSeries.ts b/packages/ag-charts-enterprise/src/series/heatmap/heatmapSeries.ts index 0e56af73ce..8af1126cff 100644 --- a/packages/ag-charts-enterprise/src/series/heatmap/heatmapSeries.ts +++ b/packages/ag-charts-enterprise/src/series/heatmap/heatmapSeries.ts @@ -85,6 +85,7 @@ export class HeatmapSeries extends _ModuleSupport.CartesianSeries< directionKeys: DEFAULT_CARTESIAN_DIRECTION_KEYS, directionNames: DEFAULT_CARTESIAN_DIRECTION_NAMES, pickModes: [SeriesNodePickMode.NEAREST_NODE, SeriesNodePickMode.EXACT_SHAPE_MATCH], + defaultTooltipRange: 'exact', pathsPerSeries: 0, hasMarkers: false, hasHighlightedLabels: true, diff --git a/packages/ag-charts-enterprise/src/series/map-line-background/mapLineBackgroundSeries.ts b/packages/ag-charts-enterprise/src/series/map-line-background/mapLineBackgroundSeries.ts index f782ccb47a..68d0ba1130 100644 --- a/packages/ag-charts-enterprise/src/series/map-line-background/mapLineBackgroundSeries.ts +++ b/packages/ag-charts-enterprise/src/series/map-line-background/mapLineBackgroundSeries.ts @@ -70,6 +70,7 @@ export class MapLineBackgroundSeries contentGroupVirtual: false, useLabelLayer: true, pickModes: [SeriesNodePickMode.EXACT_SHAPE_MATCH], + defaultTooltipRange: 'exact', }); } diff --git a/packages/ag-charts-enterprise/src/series/map-line/mapLineSeries.ts b/packages/ag-charts-enterprise/src/series/map-line/mapLineSeries.ts index 04ce753db2..8cbe05a87f 100644 --- a/packages/ag-charts-enterprise/src/series/map-line/mapLineSeries.ts +++ b/packages/ag-charts-enterprise/src/series/map-line/mapLineSeries.ts @@ -73,6 +73,7 @@ export class MapLineSeries contentGroupVirtual: false, useLabelLayer: true, pickModes: [SeriesNodePickMode.EXACT_SHAPE_MATCH, SeriesNodePickMode.NEAREST_NODE], + defaultTooltipRange: 'exact', }); } diff --git a/packages/ag-charts-enterprise/src/series/map-marker/mapMarkerSeries.ts b/packages/ag-charts-enterprise/src/series/map-marker/mapMarkerSeries.ts index 9f1085ad09..fdd253ccca 100644 --- a/packages/ag-charts-enterprise/src/series/map-marker/mapMarkerSeries.ts +++ b/packages/ag-charts-enterprise/src/series/map-marker/mapMarkerSeries.ts @@ -114,6 +114,7 @@ export class MapMarkerSeries contentGroupVirtual: true, useLabelLayer: true, pickModes: [SeriesNodePickMode.EXACT_SHAPE_MATCH, SeriesNodePickMode.NEAREST_NODE], + defaultTooltipRange: 'exact', }); this.animationState = new StateMachine( diff --git a/packages/ag-charts-enterprise/src/series/map-shape-background/mapShapeBackgroundSeries.ts b/packages/ag-charts-enterprise/src/series/map-shape-background/mapShapeBackgroundSeries.ts index cb3bbd14f9..30b539dec0 100644 --- a/packages/ag-charts-enterprise/src/series/map-shape-background/mapShapeBackgroundSeries.ts +++ b/packages/ag-charts-enterprise/src/series/map-shape-background/mapShapeBackgroundSeries.ts @@ -67,6 +67,7 @@ export class MapShapeBackgroundSeries contentGroupVirtual: false, useLabelLayer: true, pickModes: [SeriesNodePickMode.EXACT_SHAPE_MATCH], + defaultTooltipRange: 'exact', }); } diff --git a/packages/ag-charts-enterprise/src/series/map-shape/mapShapeSeries.ts b/packages/ag-charts-enterprise/src/series/map-shape/mapShapeSeries.ts index d97458b252..c197b30f7b 100644 --- a/packages/ag-charts-enterprise/src/series/map-shape/mapShapeSeries.ts +++ b/packages/ag-charts-enterprise/src/series/map-shape/mapShapeSeries.ts @@ -98,6 +98,7 @@ export class MapShapeSeries contentGroupVirtual: false, useLabelLayer: true, pickModes: [SeriesNodePickMode.EXACT_SHAPE_MATCH, SeriesNodePickMode.NEAREST_NODE], + defaultTooltipRange: 'exact', }); this.itemLabelGroup.pointerEvents = PointerEvents.None; diff --git a/packages/ag-charts-enterprise/src/series/radar/radarSeries.ts b/packages/ag-charts-enterprise/src/series/radar/radarSeries.ts index 0f898af2fd..4c9de9cf35 100644 --- a/packages/ag-charts-enterprise/src/series/radar/radarSeries.ts +++ b/packages/ag-charts-enterprise/src/series/radar/radarSeries.ts @@ -62,6 +62,7 @@ export abstract class RadarSeries extends _ModuleSupport.PolarSeries< useLabelLayer: true, pickModes: [SeriesNodePickMode.NEAREST_NODE, SeriesNodePickMode.EXACT_SHAPE_MATCH], canHaveAxes: true, + defaultTooltipRange: 'nearest', animationResetFns: { item: resetMarkerFn, }, diff --git a/packages/ag-charts-enterprise/src/series/radial-bar/radialBarSeries.ts b/packages/ag-charts-enterprise/src/series/radial-bar/radialBarSeries.ts index 3b858f7a60..374a600802 100644 --- a/packages/ag-charts-enterprise/src/series/radial-bar/radialBarSeries.ts +++ b/packages/ag-charts-enterprise/src/series/radial-bar/radialBarSeries.ts @@ -79,6 +79,7 @@ export class RadialBarSeries extends _ModuleSupport.PolarSeries< moduleCtx, useLabelLayer: true, canHaveAxes: true, + defaultTooltipRange: 'exact', animationResetFns: { item: resetRadialBarSelectionsFn, label: resetLabelFn, diff --git a/packages/ag-charts-enterprise/src/series/radial-column/radialColumnSeriesBase.ts b/packages/ag-charts-enterprise/src/series/radial-column/radialColumnSeriesBase.ts index 4055b06e12..4858a9156c 100644 --- a/packages/ag-charts-enterprise/src/series/radial-column/radialColumnSeriesBase.ts +++ b/packages/ag-charts-enterprise/src/series/radial-column/radialColumnSeriesBase.ts @@ -89,6 +89,7 @@ export abstract class RadialColumnSeriesBase< useLabelLayer: true, canHaveAxes: true, pickModes: [SeriesNodePickMode.NEAREST_NODE, SeriesNodePickMode.EXACT_SHAPE_MATCH], + defaultTooltipRange: 'exact', animationResetFns: { ...animationResetFns, label: resetLabelFn, diff --git a/packages/ag-charts-enterprise/src/series/range-area/rangeArea.ts b/packages/ag-charts-enterprise/src/series/range-area/rangeArea.ts index 4e5070da83..b152e29fb6 100644 --- a/packages/ag-charts-enterprise/src/series/range-area/rangeArea.ts +++ b/packages/ag-charts-enterprise/src/series/range-area/rangeArea.ts @@ -82,6 +82,7 @@ export class RangeAreaSeries extends _ModuleSupport.CartesianSeries< super({ moduleCtx, hasMarkers: true, + defaultTooltipRange: 'nearest', pathsPerSeries: 2, directionKeys: { [ChartAxisDirection.X]: ['xKey'], diff --git a/packages/ag-charts-enterprise/src/series/range-bar/rangeBar.ts b/packages/ag-charts-enterprise/src/series/range-bar/rangeBar.ts index 2899f73e0d..b8a8ac0ece 100644 --- a/packages/ag-charts-enterprise/src/series/range-bar/rangeBar.ts +++ b/packages/ag-charts-enterprise/src/series/range-bar/rangeBar.ts @@ -115,6 +115,7 @@ export class RangeBarSeries extends _ModuleSupport.AbstractBarSeries< x: ['xName'], y: ['yLowName', 'yHighName', 'yName'], }, + defaultTooltipRange: 'exact', datumSelectionGarbageCollection: false, animationResetFns: { datum: resetBarSelectionsFn, diff --git a/packages/ag-charts-enterprise/src/series/sankey/sankeySeries.ts b/packages/ag-charts-enterprise/src/series/sankey/sankeySeries.ts index f78bb2f8d1..aca21e1b04 100644 --- a/packages/ag-charts-enterprise/src/series/sankey/sankeySeries.ts +++ b/packages/ag-charts-enterprise/src/series/sankey/sankeySeries.ts @@ -43,6 +43,7 @@ export class SankeySeries extends FlowProportionSeries< moduleCtx, contentGroupVirtual: false, pickModes: [SeriesNodePickMode.NEAREST_NODE, SeriesNodePickMode.EXACT_SHAPE_MATCH], + defaultTooltipRange: 'exact', }); } diff --git a/packages/ag-charts-enterprise/src/series/waterfall/waterfallSeries.ts b/packages/ag-charts-enterprise/src/series/waterfall/waterfallSeries.ts index 632780760c..250bcf4e97 100644 --- a/packages/ag-charts-enterprise/src/series/waterfall/waterfallSeries.ts +++ b/packages/ag-charts-enterprise/src/series/waterfall/waterfallSeries.ts @@ -86,6 +86,7 @@ export class WaterfallSeries extends _ModuleSupport.AbstractBarSeries< directionKeys: DEFAULT_CARTESIAN_DIRECTION_KEYS, directionNames: DEFAULT_CARTESIAN_DIRECTION_NAMES, pickModes: [SeriesNodePickMode.NEAREST_NODE, SeriesNodePickMode.EXACT_SHAPE_MATCH], + defaultTooltipRange: 'exact', pathsPerSeries: 1, hasHighlightedLabels: true, pathsZIndexSubOrderOffset: [-1, -1],