Ag 8436/crosshair band

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,

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';

charts-enterprise-modules/ag-charts-enterprise/src/crosshair/crosshair.ts

@@ -3,13 +3,27 @@ import { CrosshairLabel, LabelMeta } from './crosshairLabel';
 
 type AgCrosshairLabelRendererResult = any;
 
-const { Group, Line, BBox } = _Scene;
-const { Validate, NUMBER, BOOLEAN, OPT_COLOR_STRING, OPT_LINE_DASH, Layers } = _ModuleSupport;
+const { Group, Range, BBox } = _Scene;
+const { Validate, predicateWithMessage, OPTIONAL, NUMBER, BOOLEAN, OPT_COLOR_STRING, OPT_LINE_DASH, Layers } =
+    _ModuleSupport;
+
+const OPT_CROSSHAIR_TYPE = predicateWithMessage(
+    (v: any, ctx) => OPTIONAL(v, ctx, (v: any) => v === 'band' || v === 'line'),
+    `expecting a crosshair type keyword such as 'band' or 'line'`
+);
+
+type CrosshairType = 'line' | 'band';
 
 export class Crosshair extends _ModuleSupport.BaseModuleInstance implements _ModuleSupport.ModuleInstance {
     @Validate(BOOLEAN)
     enabled = false;
 
+    @Validate(OPT_CROSSHAIR_TYPE)
+    type?: CrosshairType = 'line';
+
+    @Validate(OPT_COLOR_STRING)
+    fill?: string = `rgb(166,166,166, 0.2)`;
+
     @Validate(OPT_COLOR_STRING)
     stroke?: string = 'rgb(195, 195, 195)';
 
@@ -39,8 +53,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 +83,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 +116,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.isBand());
         crosshairGroup.translationX = Math.round(bounds.x);
         crosshairGroup.translationY = Math.round(
             axisPosition === 'top' || axisPosition === 'bottom' ? bounds.y + bounds.height : bounds.y
@@ -108,6 +131,10 @@ export class Crosshair extends _ModuleSupport.BaseModuleInstance implements _Mod
         this.labelFormatter = format ? this.axisCtx.scaleValueFormatter(format) : undefined;
     }
 
+    private isBand(): boolean {
+        return this.snap && this.type === 'band';
+    }
+
     private buildBounds(rect: _Scene.BBox, axisPosition: AgCartesianAxisPosition, padding: number): _Scene.BBox {
         const bounds = rect.clone();
         bounds.x += axisPosition === 'left' ? -padding : 0;
@@ -120,9 +147,10 @@ export class Crosshair extends _ModuleSupport.BaseModuleInstance implements _Mod
 
     private updateLine() {
         const {
-            lineNode: line,
+            crosshairNode: node,
             bounds,
             stroke,
+            fill,
             strokeWidth,
             strokeOpacity,
             lineDash,
@@ -134,15 +162,24 @@ 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();
+        const isBand = this.isBand();
+
+        node.stroke = stroke;
+        node.strokeWidth = strokeWidth;
+        node.strokeOpacity = strokeOpacity;
+        node.lineDash = lineDash;
+        node.lineDashOffset = lineDashOffset;
+        node.fill = fill;
+        node.y1 = 0 - (isBand ? bandwidth / 2 : 0);
+        node.y2 = 0 + (isBand ? bandwidth / 2 : 0);
+        node.x1 = 0;
+        node.x2 = axisCtx.direction === 'x' ? bounds.height : bounds.width;
+
+        node.isRange = isBand;
+        node.startLine = true;
+        node.endLine = isBand;
     }
 
     private formatValue(val: any): string {
@@ -265,6 +302,10 @@ export class Crosshair extends _ModuleSupport.BaseModuleInstance implements _Mod
         }
 
         const key = isYValue ? yKey : xKey;
+        if (this.isBand()) {
+            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 };

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 },