From 578ef277bcd338a19686d2cfe58307357623d289 Mon Sep 17 00:00:00 2001 From: Mana Date: Wed, 10 May 2023 12:07:01 +0330 Subject: [PATCH] AG-8436 - Render range node for band scale crosshairs --- .../ag-charts-community/src/chart/layers.ts | 3 +- .../src/integrated-charts-scene.ts | 1 + .../src/crosshair/crosshair.ts | 49 ++++++++++++++----- .../doc-pages/charts-api/interfaces.AUTO.json | 5 +- 4 files changed, 42 insertions(+), 16 deletions(-) diff --git a/charts-community-modules/ag-charts-community/src/chart/layers.ts b/charts-community-modules/ag-charts-community/src/chart/layers.ts index 321e6380f0f..26ee3a660b2 100644 --- a/charts-community-modules/ag-charts-community/src/chart/layers.ts +++ b/charts-community-modules/ag-charts-community/src/chart/layers.ts @@ -6,8 +6,9 @@ export enum Layers { AXIS_GRID_ZINDEX = 0, AXIS_ZINDEX = 20, SERIES_CROSSLINE_RANGE_ZINDEX = 30, + SERIES_CROSSHAIR_BAND_ZINDEX = 100, SERIES_LAYER_ZINDEX = 500, - SERIES_CROSSHAIR_ZINDEX = 1000, + SERIES_CROSSHAIR_LINE_ZINDEX = 1000, SERIES_LABEL_ZINDEX = 1500, SERIES_CROSSLINE_LINE_ZINDEX = 2500, LEGEND_ZINDEX = 3000, diff --git a/charts-community-modules/ag-charts-community/src/integrated-charts-scene.ts b/charts-community-modules/ag-charts-community/src/integrated-charts-scene.ts index 0e9a474b425..167a028a481 100644 --- a/charts-community-modules/ag-charts-community/src/integrated-charts-scene.ts +++ b/charts-community-modules/ag-charts-community/src/integrated-charts-scene.ts @@ -6,6 +6,7 @@ export { Node, PointerEvents, RenderContext, RedrawType } from './scene/node'; export { Selection } from './scene/selection'; export { Arc } from './scene/shape/arc'; export { Line } from './scene/shape/line'; +export { Range } from './scene/shape/range'; export { Path } from './scene/shape/path'; export { Rect } from './scene/shape/rect'; export { Sector } from './scene/shape/sector'; diff --git a/charts-enterprise-modules/ag-charts-enterprise/src/crosshair/crosshair.ts b/charts-enterprise-modules/ag-charts-enterprise/src/crosshair/crosshair.ts index 6319c37f614..9acada1b22b 100644 --- a/charts-enterprise-modules/ag-charts-enterprise/src/crosshair/crosshair.ts +++ b/charts-enterprise-modules/ag-charts-enterprise/src/crosshair/crosshair.ts @@ -3,7 +3,7 @@ import { CrosshairLabel, LabelMeta } from './crosshairLabel'; type AgCrosshairLabelRendererResult = any; -const { Group, Line, BBox } = _Scene; +const { Group, Range, BBox } = _Scene; const { Validate, NUMBER, BOOLEAN, OPT_COLOR_STRING, OPT_LINE_DASH, Layers } = _ModuleSupport; export class Crosshair extends _ModuleSupport.BaseModuleInstance implements _ModuleSupport.ModuleInstance { @@ -39,8 +39,8 @@ export class Crosshair extends _ModuleSupport.BaseModuleInstance implements _Mod }; private labelFormatter?: (value: any) => string; - private crosshairGroup: _Scene.Group = new Group({ layer: true, zIndex: Layers.SERIES_CROSSHAIR_ZINDEX }); - private lineNode: _Scene.Line = this.crosshairGroup.appendChild(new Line()); + private crosshairGroup: _Scene.Group = new Group({ layer: true }); + private crosshairNode: _Scene.Range = this.crosshairGroup.appendChild(new Range()); private activeHighlight?: _ModuleSupport.HighlightChangeEvent['currentHighlight'] = undefined; constructor(ctx: _ModuleSupport.ModuleContextWithParent<_ModuleSupport.AxisContext>) { @@ -69,6 +69,14 @@ export class Crosshair extends _ModuleSupport.BaseModuleInstance implements _Mod this.destroyFns.push(() => this.label.destroy()); } + private getZIndex(isBand: boolean = false): number { + if (isBand) { + return Layers.SERIES_CROSSHAIR_BAND_ZINDEX; + } + + return Layers.SERIES_CROSSHAIR_LINE_ZINDEX; + } + private layout({ series: { rect, hoverRect, visible }, axes }: _ModuleSupport.LayoutCompleteEvent) { this.hideCrosshair(); @@ -94,6 +102,7 @@ export class Crosshair extends _ModuleSupport.BaseModuleInstance implements _Mod this.bounds = this.buildBounds(rect, axisPosition, padding); const { crosshairGroup, bounds } = this; + crosshairGroup.zIndex = this.getZIndex(this.axisCtx.scaleBandwidth() > 0); crosshairGroup.translationX = Math.round(bounds.x); crosshairGroup.translationY = Math.round( axisPosition === 'top' || axisPosition === 'bottom' ? bounds.y + bounds.height : bounds.y @@ -120,7 +129,7 @@ export class Crosshair extends _ModuleSupport.BaseModuleInstance implements _Mod private updateLine() { const { - lineNode: line, + crosshairNode: node, bounds, stroke, strokeWidth, @@ -134,15 +143,25 @@ export class Crosshair extends _ModuleSupport.BaseModuleInstance implements _Mod if (!axisLayout) { return; } - line.stroke = stroke; - line.strokeWidth = strokeWidth; - line.strokeOpacity = strokeOpacity; - line.lineDash = lineDash; - line.lineDashOffset = lineDashOffset; - - line.y1 = line.y2 = 0; - line.x1 = 0; - line.x2 = axisCtx.direction === 'x' ? bounds.height : bounds.width; + + const bandwidth = axisCtx.scaleBandwidth(); + + node.stroke = stroke; + node.strokeWidth = strokeWidth; + node.strokeOpacity = strokeOpacity; + node.lineDash = lineDash; + node.lineDashOffset = lineDashOffset; + node.fill = `rgb(166,166,166, 0.2)`; + node.y1 = 0 - bandwidth / 2; + node.y2 = 0 + bandwidth / 2; + node.x1 = 0; + node.x2 = axisCtx.direction === 'x' ? bounds.height : bounds.width; + + const isBand = bandwidth > 0; + + node.isRange = isBand; + node.startLine = true; + node.endLine = isBand; } private formatValue(val: any): string { @@ -265,6 +284,10 @@ export class Crosshair extends _ModuleSupport.BaseModuleInstance implements _Mod } const key = isYValue ? yKey : xKey; + if (axisCtx.scaleBandwidth() > 0) { + return { value: datum[key], position: axisCtx.scaleConvert(datum[key]) + halfBandwidth }; + } + const position = (axisCtx.direction === 'x' ? nodeMidPoint?.x : nodeMidPoint?.y) ?? 0; const value = axisCtx.continuous ? axisCtx.scaleInvert(position) : datum[key]; return { value, position }; diff --git a/grid-packages/ag-grid-docs/documentation/doc-pages/charts-api/interfaces.AUTO.json b/grid-packages/ag-grid-docs/documentation/doc-pages/charts-api/interfaces.AUTO.json index 8fd0145c3cf..19cc4e386e3 100644 --- a/grid-packages/ag-grid-docs/documentation/doc-pages/charts-api/interfaces.AUTO.json +++ b/grid-packages/ag-grid-docs/documentation/doc-pages/charts-api/interfaces.AUTO.json @@ -3878,13 +3878,14 @@ "AXIS_GRID_ZINDEX = 0", "AXIS_ZINDEX = 20", "SERIES_CROSSLINE_RANGE_ZINDEX = 30", + "SERIES_CROSSHAIR_BAND_ZINDEX = 100", "SERIES_LAYER_ZINDEX = 500", - "SERIES_CROSSHAIR_ZINDEX = 1000", + "SERIES_CROSSHAIR_LINE_ZINDEX = 1000", "SERIES_LABEL_ZINDEX = 1500", "SERIES_CROSSLINE_LINE_ZINDEX = 2500", "LEGEND_ZINDEX = 3000" ], - "docs": [null, null, null, null, null, null, null, null, null] + "docs": [null, null, null, null, null, null, null, null, null, null] }, "LayoutStage": { "meta": { "isTypeAlias": true },