@unovis/ts 1.6.0-bigip.1 → 1.6.0-bigip.2

package/components/area/index.js

@@ -101,7 +101,8 @@ class Area extends XYComponentCore {
     getYDataExtent(scaleByVisibleData) {
         const { config, datamodel } = this;
         const yAccessors = (isArray(config.y) ? config.y : [config.y]);
-        const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain(), config.x) : datamodel.data;
+        const xDomain = this.xScale.domain();
+        const data = scaleByVisibleData ? filterDataByRange(datamodel.data, xDomain, config.x, true) : datamodel.data;
         return getStackedExtent(data, config.baseline, ...yAccessors);
     }
     _emptyPath() {

package/components/area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/area/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { area, Area as AreaInterface } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, isArray, isNumber, getStackedExtent, getStackedData, filterDataByRange } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Curve, CurveType } from 'types/curve'\nimport { NumericAccessor } from 'types/accessor'\n\n// Local Types\nimport { AreaDatum } from './types'\n\n// Config\nimport { AreaDefaultConfig, AreaConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = AreaDefaultConfig as AreaConfigInterface<Datum>\n  public config: AreaConfigInterface<Datum> = this._defaultConfig\n  public stacked = true\n  private _areaGen: AreaInterface<AreaDatum>\n  private _prevNegative: boolean[] | undefined // To help guessing the stack direction when an accessor was set to null or 0\n\n  events = {\n    [Area.selectors.area]: {},\n  }\n\n  constructor (config?: AreaConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n\n    // Determine if the provided chart should be stacked\n    this.stacked = Array.isArray(this.config.y)\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config, datamodel: { data } } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._areaGen = area<AreaDatum>()\n      .x(d => d.x)\n      .y0(d => d.y0)\n      .y1(d => d.y1)\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n\n    const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative)\n    this._prevNegative = stacked.map(s => !!s.isMostlyNegative)\n    const minHeightCumulativeArray: number[] = []\n    const stackedData: AreaDatum[][] = stacked.map(\n      arr => arr.map(\n        (d, j) => {\n          const x = areaDataX[j]\n          const y0 = this.yScale(d[0])\n          const y1 = this.yScale(d[1])\n          const isNegativeArea = y1 > y0\n\n          // Get cumulative adjustment and apply in the correct direction\n          const cumulative = minHeightCumulativeArray[j] || 0\n          const adjustedY0 = isNegativeArea ? y0 + cumulative : y0 - cumulative\n          const adjustedY1 = isNegativeArea ? y1 + cumulative : y1 - cumulative\n\n          // Calculate height adjustment if needed\n          let heightAdjustment = 0\n          if ((config.minHeight || config.minHeight1Px) &&\n              Math.abs(adjustedY1 - adjustedY0) < (config.minHeight ?? 1)) {\n            heightAdjustment = (config.minHeight ?? 1) - Math.abs(adjustedY1 - adjustedY0)\n            minHeightCumulativeArray[j] = cumulative + heightAdjustment\n          }\n\n          return {\n            x,\n            y0: adjustedY0,\n            y1: isNegativeArea ? adjustedY1 + heightAdjustment : adjustedY1 - heightAdjustment,\n          }\n        }\n      )\n    )\n\n    // We reverse the data in order to have the first areas to be displayed on top\n    //   for better visibility when they're close to zero\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = stackedData.reverse()\n    const areas = this.g\n      .selectAll<SVGPathElement, AreaDatum>(`.${s.area}`)\n      .data(stackedDataReversed)\n\n    const areasEnter = areas.enter().append('path')\n      .attr('class', s.area)\n      .attr('d', d => this._areaGen(d) || this._emptyPath())\n      .style('opacity', 0)\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n\n    const areasMerged = smartTransition(areasEnter.merge(areas), duration)\n      .style('opacity', (d, i) => {\n        const isDefined = d.some(p => (p.y0 - p.y1) !== 0)\n        return isDefined ? getNumber(data, config.opacity, areaMaxIdx - i) : 0\n      })\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n      .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n\n    if (duration) {\n      const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      transition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d')\n        const next = this._areaGen(d) || this._emptyPath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      areasMerged.attr('d', d => this._areaGen(d) || this._emptyPath())\n    }\n\n    smartTransition(areas.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n  }\n\n  getYDataExtent (scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain() as [number, number], config.x) : datamodel.data\n    return getStackedExtent(data, config.baseline, ...yAccessors)\n  }\n\n  _emptyPath (): string {\n    const xRange = this.xScale.range()\n    const yDomain = this.yScale.domain() as number[]\n\n    const y0 = this.yScale((yDomain[0] + yDomain[1]) / 2)\n    const y1 = y0\n\n    return this._areaGen([\n      { y0, y1, x: xRange[0] },\n      { y0, y1, x: xRange[1] },\n    ])\n  }\n}\n"],"names":["s.area","s"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/area/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { area, Area as AreaInterface } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, isArray, isNumber, getStackedExtent, getStackedData, filterDataByRange } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Curve, CurveType } from 'types/curve'\nimport { NumericAccessor } from 'types/accessor'\n\n// Local Types\nimport { AreaDatum } from './types'\n\n// Config\nimport { AreaDefaultConfig, AreaConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = AreaDefaultConfig as AreaConfigInterface<Datum>\n  public config: AreaConfigInterface<Datum> = this._defaultConfig\n  public stacked = true\n  private _areaGen: AreaInterface<AreaDatum>\n  private _prevNegative: boolean[] | undefined // To help guessing the stack direction when an accessor was set to null or 0\n\n  events = {\n    [Area.selectors.area]: {},\n  }\n\n  constructor (config?: AreaConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n\n    // Determine if the provided chart should be stacked\n    this.stacked = Array.isArray(this.config.y)\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config, datamodel: { data } } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._areaGen = area<AreaDatum>()\n      .x(d => d.x)\n      .y0(d => d.y0)\n      .y1(d => d.y1)\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n\n    const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative)\n    this._prevNegative = stacked.map(s => !!s.isMostlyNegative)\n    const minHeightCumulativeArray: number[] = []\n    const stackedData: AreaDatum[][] = stacked.map(\n      arr => arr.map(\n        (d, j) => {\n          const x = areaDataX[j]\n          const y0 = this.yScale(d[0])\n          const y1 = this.yScale(d[1])\n          const isNegativeArea = y1 > y0\n\n          // Get cumulative adjustment and apply in the correct direction\n          const cumulative = minHeightCumulativeArray[j] || 0\n          const adjustedY0 = isNegativeArea ? y0 + cumulative : y0 - cumulative\n          const adjustedY1 = isNegativeArea ? y1 + cumulative : y1 - cumulative\n\n          // Calculate height adjustment if needed\n          let heightAdjustment = 0\n          if ((config.minHeight || config.minHeight1Px) &&\n              Math.abs(adjustedY1 - adjustedY0) < (config.minHeight ?? 1)) {\n            heightAdjustment = (config.minHeight ?? 1) - Math.abs(adjustedY1 - adjustedY0)\n            minHeightCumulativeArray[j] = cumulative + heightAdjustment\n          }\n\n          return {\n            x,\n            y0: adjustedY0,\n            y1: isNegativeArea ? adjustedY1 + heightAdjustment : adjustedY1 - heightAdjustment,\n          }\n        }\n      )\n    )\n\n    // We reverse the data in order to have the first areas to be displayed on top\n    //   for better visibility when they're close to zero\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = stackedData.reverse()\n    const areas = this.g\n      .selectAll<SVGPathElement, AreaDatum>(`.${s.area}`)\n      .data(stackedDataReversed)\n\n    const areasEnter = areas.enter().append('path')\n      .attr('class', s.area)\n      .attr('d', d => this._areaGen(d) || this._emptyPath())\n      .style('opacity', 0)\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n\n    const areasMerged = smartTransition(areasEnter.merge(areas), duration)\n      .style('opacity', (d, i) => {\n        const isDefined = d.some(p => (p.y0 - p.y1) !== 0)\n        return isDefined ? getNumber(data, config.opacity, areaMaxIdx - i) : 0\n      })\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n      .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n\n    if (duration) {\n      const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      transition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d')\n        const next = this._areaGen(d) || this._emptyPath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      areasMerged.attr('d', d => this._areaGen(d) || this._emptyPath())\n    }\n\n    smartTransition(areas.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n  }\n\n  getYDataExtent (scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n    const xDomain = this.xScale.domain() as [number, number]\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, xDomain, config.x, true) : datamodel.data\n    return getStackedExtent(data, config.baseline, ...yAccessors)\n  }\n\n  _emptyPath (): string {\n    const xRange = this.xScale.range()\n    const yDomain = this.yScale.domain() as number[]\n\n    const y0 = this.yScale((yDomain[0] + yDomain[1]) / 2)\n    const y1 = y0\n\n    return this._areaGen([\n      { y0, y1, x: xRange[0] },\n      { y0, y1, x: xRange[1] },\n    ])\n  }\n}\n"],"names":["s.area","s"],"mappings":"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"}

package/components/crosshair/config.d.ts

@@ -21,9 +21,11 @@ export interface CrosshairConfigInterface<Datum> extends WithOptional<XYComponen
     baseline?: NumericAccessor<Datum>;
     /** An instance of the Tooltip component to be used with Crosshair. Default: `undefined` */
     tooltip?: Tooltip | undefined;
-    /** Tooltip template accessor. The function is supposed to return either a valid HTML string or an HTMLElement. Default: `d => ''` */
-    template?: (data: Datum, x: number | Date) => string | HTMLElement;
-    /** Hide Crosshair when the corresponding element is far from mouse pointer. Default: `true` */
+    /** Tooltip template accessor. The function is supposed to return either a valid HTML string or an HTMLElement.
+     * When snapToData is false, datum will be undefined but nearestDatumIndex and data will be provided.
+     * Default: `d => ''` */
+    template?: (datum: Datum, x: number | Date, nearestDatumIndex?: number, data?: Datum[]) => string | HTMLElement;
+    /** Hide Crosshair when the corresponding datum element is far from mouse pointer. Default: `true` */
     hideWhenFarFromPointer?: boolean;
     /** Distance in pixels to check in the hideWhenFarFromPointer condition. Default: `100` */
     hideWhenFarFromPointerDistance?: number;
@@ -34,17 +36,15 @@ export interface CrosshairConfigInterface<Datum> extends WithOptional<XYComponen
     */
     snapToData?: boolean;
     /** Custom function for setting up the crosshair circles, usually needed when `snapToData` is set to `false`.
-     * The function receives the horizontal position of the crosshair (in the data space, not in pixels), the data array
-     * and the `yScale` instance to help you calculate the correct vertical position of the circles.
+     * The function receives the horizontal position of the crosshair (in the data space, not in pixels), the data array,
+     * the `yScale` instance to help you calculate the correct vertical position of the circles, and the nearest datum index.
      * It has to return an array of the CrosshairCircle objects: `{ y: number; color: string; opacity?: number }[]`.
      * Default: `undefined`
     */
-    getCircles?: (x: number | Date | Date, data: Datum[], yScale: ContinuousScale) => CrosshairCircle[];
-    /** X position in data space (not pixels) for synchronized crosshair. Default: `undefined` */
-    xPosition?: number | Date;
-    /** Force show the crosshair even when mouse is not over the chart. Default: `false` */
-    forceShow?: boolean;
-    /** Callback function called when crosshair position changes. Receives x position in data space. Default: `undefined` */
-    onCrosshairMove?: (x: number | Date | undefined) => void;
+    getCircles?: (x: number | Date, data: Datum[], yScale: ContinuousScale, nearestDatumIndex?: number) => CrosshairCircle[];
+    /** Callback function that is called when the crosshair is moved. Default: `undefined` */
+    onCrosshairMove?: (x: number | Date, datum: Datum | undefined, datumIndex: number | undefined) => void;
+    /** Force the crosshair to show at a specific position. Default: `undefined` */
+    forceShowAt?: number | Date;
 }
 export declare const CrosshairDefaultConfig: CrosshairConfigInterface<unknown>;

package/components/crosshair/config.js

@@ -1,6 +1,6 @@
 import { XYComponentDefaultConfig } from '../../core/xy-component/config.js';
 
-const CrosshairDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { yStacked: undefined, baseline: null, duration: 100, tooltip: undefined, template: (d, x) => '', hideWhenFarFromPointer: true, hideWhenFarFromPointerDistance: 100, snapToData: true, getCircles: undefined, color: undefined, strokeColor: undefined, strokeWidth: undefined, xPosition: undefined, forceShow: false, onCrosshairMove: undefined });
+const CrosshairDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { yStacked: undefined, baseline: null, duration: 100, tooltip: undefined, template: (d, x, nearestDatumIndex, data) => '', hideWhenFarFromPointer: true, hideWhenFarFromPointerDistance: 100, snapToData: true, getCircles: undefined, color: undefined, strokeColor: undefined, strokeWidth: undefined, onCrosshairMove: undefined, forceShowAt: undefined });
 
 export { CrosshairDefaultConfig };
 //# sourceMappingURL=config.js.map

package/components/crosshair/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/crosshair/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\nimport { Tooltip } from 'components/tooltip'\n\n// Types\nimport { NumericAccessor, ColorAccessor } from 'types/accessor'\nimport { ContinuousScale } from 'types/scale'\nimport { WithOptional } from 'types/misc'\nimport { CrosshairCircle } from './types'\n\n// We extend partial XY config interface because x and y properties are optional for Crosshair\nexport interface CrosshairConfigInterface<Datum> extends WithOptional<XYComponentConfigInterface<Datum>, 'x' | 'y'> {\n  /** Optional accessor function for getting the values along the X axis. Default: `undefined` */\n  x?: NumericAccessor<Datum>;\n  /** Optional single of multiple accessor functions for getting the values along the Y axis. Default: `undefined` */\n  y?: NumericAccessor<Datum> | NumericAccessor<Datum>[];\n  /** Optional color array or color accessor function for crosshair circles. Default: `d => d.color` */\n  color?: ColorAccessor<Datum>;\n  /** Optional stroke color accessor function for crosshair circles. Default: `undefined` */\n  strokeColor?: ColorAccessor<Datum>;\n  /** Optional stroke width for crosshair circles. Default: `undefined` */\n  strokeWidth?: NumericAccessor<Datum>;\n  /** Separate array of accessors for stacked components (eg StackedBar, Area). Default: `undefined` */\n  yStacked?: NumericAccessor<Datum>[];\n  /** Baseline accessor function for stacked values, useful with stacked areas. Default: `null` */\n  baseline?: NumericAccessor<Datum>;\n  /** An instance of the Tooltip component to be used with Crosshair. Default: `undefined` */\n  tooltip?: Tooltip | undefined;\n  /** Tooltip template accessor. The function is supposed to return either a valid HTML string or an HTMLElement. Default: `d => ''` */\n  template?: (data: Datum, x: number | Date) => string | HTMLElement;\n  /** Hide Crosshair when the corresponding element is far from mouse pointer. Default: `true` */\n  hideWhenFarFromPointer?: boolean;\n  /** Distance in pixels to check in the hideWhenFarFromPointer condition. Default: `100` */\n  hideWhenFarFromPointerDistance?: number;\n  /** Snap to the nearest data point.\n   * If disabled, the tooltip template will receive only the horizontal position of the crosshair and you'll be responsible\n   * for getting the underlying data records and crosshair circles (see the `getCircles` configuration option).\n   * Default: `true`\n  */\n  snapToData?: boolean;\n  /** Custom function for setting up the crosshair circles, usually needed when `snapToData` is set to `false`.\n   * The function receives the horizontal position of the crosshair (in the data space, not in pixels), the data array\n   * and the `yScale` instance to help you calculate the correct vertical position of the circles.\n   * It has to return an array of the CrosshairCircle objects: `{ y: number; color: string; opacity?: number }[]`.\n   * Default: `undefined`\n  */\n  getCircles?: (x: number | Date | Date, data: Datum[], yScale: ContinuousScale) => CrosshairCircle[];\n  /** X position in data space (not pixels) for synchronized crosshair. Default: `undefined` */\n  xPosition?: number | Date;\n  /** Force show the crosshair even when mouse is not over the chart. Default: `false` */\n  forceShow?: boolean;\n  /** Callback function called when crosshair position changes. Receives x position in data space. Default: `undefined` */\n  onCrosshairMove?: (x: number | Date | undefined) => void;\n}\n\nexport const CrosshairDefaultConfig: CrosshairConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  yStacked: undefined,\n  baseline: null,\n  duration: 100,\n  tooltip: undefined,\n  template: <Datum>(d: Datum, x: number | Date): string => '',\n  hideWhenFarFromPointer: true,\n  hideWhenFarFromPointerDistance: 100,\n  snapToData: true,\n  getCircles: undefined,\n  color: undefined,\n  strokeColor: undefined,\n  strokeWidth: undefined,\n  xPosition: undefined,\n  forceShow: false,\n  onCrosshairMove: undefined,\n}\n\n"],"names":[],"mappings":";;AAsDO,MAAM,sBAAsB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC9B,wBAAwB,CAC3B,EAAA,EAAA,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,GAAG,EACb,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,CAAQ,CAAQ,EAAE,CAAgB,KAAa,EAAE,EAC3D,sBAAsB,EAAE,IAAI,EAC5B,8BAA8B,EAAE,GAAG,EACnC,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,SAAS,EACrB,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,SAAS,EACtB,WAAW,EAAE,SAAS,EACtB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,KAAK,EAChB,eAAe,EAAE,SAAS;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/crosshair/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\nimport { Tooltip } from 'components/tooltip'\n\n// Types\nimport { NumericAccessor, ColorAccessor } from 'types/accessor'\nimport { ContinuousScale } from 'types/scale'\nimport { WithOptional } from 'types/misc'\nimport { CrosshairCircle } from './types'\n\n// We extend partial XY config interface because x and y properties are optional for Crosshair\nexport interface CrosshairConfigInterface<Datum> extends WithOptional<XYComponentConfigInterface<Datum>, 'x' | 'y'> {\n  /** Optional accessor function for getting the values along the X axis. Default: `undefined` */\n  x?: NumericAccessor<Datum>;\n  /** Optional single of multiple accessor functions for getting the values along the Y axis. Default: `undefined` */\n  y?: NumericAccessor<Datum> | NumericAccessor<Datum>[];\n  /** Optional color array or color accessor function for crosshair circles. Default: `d => d.color` */\n  color?: ColorAccessor<Datum>;\n  /** Optional stroke color accessor function for crosshair circles. Default: `undefined` */\n  strokeColor?: ColorAccessor<Datum>;\n  /** Optional stroke width for crosshair circles. Default: `undefined` */\n  strokeWidth?: NumericAccessor<Datum>;\n  /** Separate array of accessors for stacked components (eg StackedBar, Area). Default: `undefined` */\n  yStacked?: NumericAccessor<Datum>[];\n  /** Baseline accessor function for stacked values, useful with stacked areas. Default: `null` */\n  baseline?: NumericAccessor<Datum>;\n  /** An instance of the Tooltip component to be used with Crosshair. Default: `undefined` */\n  tooltip?: Tooltip | undefined;\n  /** Tooltip template accessor. The function is supposed to return either a valid HTML string or an HTMLElement.\n   * When snapToData is false, datum will be undefined but nearestDatumIndex and data will be provided.\n   * Default: `d => ''` */\n  template?: (datum: Datum, x: number | Date, nearestDatumIndex?: number, data?: Datum[]) => string | HTMLElement;\n  /** Hide Crosshair when the corresponding datum element is far from mouse pointer. Default: `true` */\n  hideWhenFarFromPointer?: boolean;\n  /** Distance in pixels to check in the hideWhenFarFromPointer condition. Default: `100` */\n  hideWhenFarFromPointerDistance?: number;\n  /** Snap to the nearest data point.\n   * If disabled, the tooltip template will receive only the horizontal position of the crosshair and you'll be responsible\n   * for getting the underlying data records and crosshair circles (see the `getCircles` configuration option).\n   * Default: `true`\n  */\n  snapToData?: boolean;\n  /** Custom function for setting up the crosshair circles, usually needed when `snapToData` is set to `false`.\n   * The function receives the horizontal position of the crosshair (in the data space, not in pixels), the data array,\n   * the `yScale` instance to help you calculate the correct vertical position of the circles, and the nearest datum index.\n   * It has to return an array of the CrosshairCircle objects: `{ y: number; color: string; opacity?: number }[]`.\n   * Default: `undefined`\n  */\n  getCircles?: (x: number | Date, data: Datum[], yScale: ContinuousScale, nearestDatumIndex?: number) => CrosshairCircle[];\n  /** Callback function that is called when the crosshair is moved. Default: `undefined` */\n  onCrosshairMove?: (x: number | Date, datum: Datum | undefined, datumIndex: number | undefined) => void;\n  /** Force the crosshair to show at a specific position. Default: `undefined` */\n  forceShowAt?: number | Date;\n}\n\nexport const CrosshairDefaultConfig: CrosshairConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  yStacked: undefined,\n  baseline: null,\n  duration: 100,\n  tooltip: undefined,\n  template: <Datum>(d: Datum | undefined, x: number | Date, nearestDatumIndex?: number, data?: Datum[]): string => '',\n  hideWhenFarFromPointer: true,\n  hideWhenFarFromPointerDistance: 100,\n  snapToData: true,\n  getCircles: undefined,\n  color: undefined,\n  strokeColor: undefined,\n  strokeWidth: undefined,\n  onCrosshairMove: undefined,\n  forceShowAt: undefined,\n}\n\n"],"names":[],"mappings":";;AAsDO,MAAM,sBAAsB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC9B,wBAAwB,CAC3B,EAAA,EAAA,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,GAAG,EACb,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,CAAQ,CAAoB,EAAE,CAAgB,EAAE,iBAA0B,EAAE,IAAc,KAAa,EAAE,EACnH,sBAAsB,EAAE,IAAI,EAC5B,8BAA8B,EAAE,GAAG,EACnC,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,SAAS,EACrB,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,SAAS,EACtB,WAAW,EAAE,SAAS,EACtB,eAAe,EAAE,SAAS,EAC1B,WAAW,EAAE,SAAS;;;;"}

package/components/crosshair/index.d.ts

@@ -11,13 +11,10 @@ export declare class Crosshair<Datum> extends XYComponentCore<Datum, CrosshairCo
     config: CrosshairConfigInterface<Datum>;
     container: Selection<SVGSVGElement, any, SVGSVGElement, any>;
     line: Selection<SVGLineElement, any, SVGElement, any>;
-    x: number;
-    datum: Datum;
-    datumIndex: number;
-    show: boolean;
+    private _xPx;
+    private _yPx;
+    private _mouseEvent;
     private _animFrameId;
-    private _dataX;
-    private _isMouseOver;
     /** Tooltip component to be used by Crosshair if not provided by the config.
      * This property is supposed to be set externally by a container component like XYContainer. */
     tooltip: Tooltip;
@@ -27,17 +24,12 @@ export declare class Crosshair<Datum> extends XYComponentCore<Datum, CrosshairCo
     get accessors(): CrosshairAccessors<Datum>;
     constructor(config?: CrosshairConfigInterface<Datum>);
     setContainer(containerSvg: Selection<SVGSVGElement, unknown, SVGSVGElement, unknown>): void;
-    setConfig(config: CrosshairConfigInterface<Datum>): void;
     _render(customDuration?: number): void;
     hide(): void;
-    destroy(): void;
     _onMouseMove(event: MouseEvent): void;
-    private _processMouseMove;
     _onMouseOut(): void;
-    _showTooltip(event: MouseEvent): void;
+    _showTooltip(datum: Datum, xValue: number, pos: [number, number], nearestDatumIndex?: number): void;
     _hideTooltip(): void;
     getYDataExtent(): number[];
     private getCircleData;
-    _updateFromSync(xData: number | Date | undefined): void;
-    private _getSyncState;
 }

package/components/crosshair/index.js

@@ -1,10 +1,11 @@
 import { pointer } from 'd3-selection';
 import { easeLinear } from 'd3-ease';
 import { XYComponentCore } from '../../core/xy-component/index.js';
-import { isArray, isNumber, getNearest, getNumber, clamp, isFunction, getStackedValues } from '../../utils/data.js';
+import { isArray, isNumber, getNearest, clamp, getNumber, isFunction, getStackedValues } from '../../utils/data.js';
 import { smartTransition } from '../../utils/d3.js';
 import { getColor } from '../../utils/color.js';
 import { Position } from '../../types/position.js';
+import { FindNearestDirection } from '../../types/data.js';
 import { CrosshairDefaultConfig } from './config.js';
 import * as style from './style.js';
 import { line, circle } from './style.js';
@@ -15,11 +16,10 @@ class Crosshair extends XYComponentCore {
         this.clippable = true; // Don't apply clipping path to this component. See XYContainer
         this._defaultConfig = CrosshairDefaultConfig;
         this.config = this._defaultConfig;
-        this.x = 0;
-        this.show = false;
+        this._xPx = undefined;
+        this._yPx = undefined;
+        this._mouseEvent = undefined;
         this._animFrameId = null;
-        this._dataX = undefined;
-        this._isMouseOver = false;
         /** Accessors passed externally (e.g. from XYContainer) */
         this._accessors = {
             x: undefined,
@@ -28,8 +28,8 @@ class Crosshair extends XYComponentCore {
             baseline: undefined,
         };
         if (config)
-            this.config = Object.assign(Object.assign({}, this.config), config);
-        this.g.style('opacity', this.show ? 1 : 0);
+            this.setConfig(config);
+        this.g.style('opacity', 0);
         this.line = this.g.append('line')
             .attr('class', line);
     }
@@ -37,44 +37,100 @@ class Crosshair extends XYComponentCore {
     get accessors() {
         var _a;
         const { config } = this;
-        // If x or y are explicitly set in config, use those; otherwise use container accessors
-        const x = config.x || this._accessors.x;
-        const yAcc = config.y || this._accessors.y;
+        const hasConfig = !!(config.x || config.y || config.yStacked);
+        const x = hasConfig ? config.x : this._accessors.x;
+        const yAcc = hasConfig ? config.y : this._accessors.y;
         const y = yAcc ? (isArray(yAcc) ? yAcc : [yAcc]) : undefined;
-        const yStacked = config.yStacked || this._accessors.yStacked;
+        const yStacked = hasConfig ? config.yStacked : this._accessors.yStacked;
         const baseline = (_a = config.baseline) !== null && _a !== void 0 ? _a : this._accessors.baseline;
         return { x, y, yStacked, baseline };
     }
     setContainer(containerSvg) {
+        // Set up mousemove event for Crosshair
         this.container = containerSvg;
         this.container.on('mousemove.crosshair', this._onMouseMove.bind(this));
         this.container.on('mouseout.crosshair', this._onMouseOut.bind(this));
-        this._render();
-    }
-    setConfig(config) {
-        super.setConfig(config);
-        // For synchronized charts, update from sync when config changes
-        const { isActive, enableSync } = this._getSyncState();
-        if (enableSync && !isActive && (isNumber(config.xPosition) || config.xPosition instanceof Date)) {
-            this._updateFromSync(config.xPosition);
-        }
     }
     _render(customDuration) {
-        const { config } = this;
+        var _a, _b, _c, _d;
+        const { config, datamodel } = this;
         const duration = isNumber(customDuration) ? customDuration : config.duration;
-        const { isActive, enableSync } = this._getSyncState();
-        // Handle synchronized charts with xPosition prop
-        if (enableSync && !isActive && (isNumber(config.xPosition) || config.xPosition instanceof Date)) {
-            this._updateFromSync(config.xPosition);
+        const isForceShowAtDefined = config.forceShowAt !== undefined;
+        const xPx = isForceShowAtDefined ? this.xScale(config.forceShowAt) : this._xPx;
+        const xValue = this.xScale.invert(xPx);
+        let datum;
+        let datumIndex;
+        let nearestDatumIndex;
+        // Always calculate the nearest datum index for template and getCircles functions
+        if (((_a = datamodel.data) === null || _a === void 0 ? void 0 : _a.length) && this.accessors.x) {
+            const nearestDatum = getNearest(datamodel.data, xValue, this.accessors.x, FindNearestDirection.Left);
+            nearestDatumIndex = datamodel.data.indexOf(nearestDatum);
+        }
+        if (config.snapToData) {
+            if (!this.accessors.y && !this.accessors.yStacked && ((_b = datamodel.data) === null || _b === void 0 ? void 0 : _b.length)) {
+                console.warn('Unovis | Crosshair: Y accessors have not been configured. Please check if they\'re present in the configuration object');
+            }
+            datum = getNearest(datamodel.data, xValue, this.accessors.x);
+            datumIndex = datamodel.data.indexOf(datum);
+            if (!datum)
+                return;
+        }
+        const xRange = this.xScale.range();
+        const yRange = this.yScale.range();
+        const xClamped = config.snapToData
+            ? clamp(Math.round(this.xScale(getNumber(datum, this.accessors.x, datumIndex))), 0, this._width)
+            : clamp(xPx, xRange[0], xRange[1]);
+        const isCrosshairWithinXRange = (xPx >= xRange[0]) && (xPx <= xRange[1]);
+        const isCrosshairWithinYRange = (this._yPx >= yRange[1]) && (this._yPx <= yRange[0]);
+        let shouldShow = this._xPx ? isCrosshairWithinXRange && isCrosshairWithinYRange : isCrosshairWithinXRange;
+        // If the crosshair is far from the mouse pointer (usually when `snapToData` is `true` and data resolution is low), hide it
+        if (config.hideWhenFarFromPointer && ((Math.abs(xClamped - (+xPx)) >= config.hideWhenFarFromPointerDistance))) {
+            shouldShow = false;
+        }
+        const tooltip = (_c = config.tooltip) !== null && _c !== void 0 ? _c : this.tooltip;
+        if (shouldShow && tooltip) {
+            const container = tooltip.getContainer() || this.container.node();
+            const isContainerBody = tooltip.isContainerBody();
+            if (isForceShowAtDefined) {
+                // Convert SVG coordinates to screen coordinates
+                const containerRect = this.container.node().getBoundingClientRect();
+                // Use the actual left margin from the container
+                const screenX = (isContainerBody ? xPx + containerRect.left : xPx) + this._containerMargin.left;
+                const screenY = this._height / 2 + (isContainerBody ? containerRect.top : 0);
+                const pos = [screenX, screenY];
+                this._showTooltip(datum, xValue, pos, nearestDatumIndex);
+            }
+            else if (this._mouseEvent) {
+                const pos = (isContainerBody ? [this._mouseEvent.clientX, this._mouseEvent.clientY] : pointer(this._mouseEvent, container));
+                this._showTooltip(datum, xValue, pos, nearestDatumIndex);
+            }
         }
-        smartTransition(this.g, duration).style('opacity', this.show ? 1 : 0);
+        else
+            this._hideTooltip();
+        // Trigger `onCrosshairMove` if the render was triggered by a mouse move event
+        if (this._mouseEvent) {
+            (_d = config.onCrosshairMove) === null || _d === void 0 ? void 0 : _d.call(config, shouldShow ? this.xScale.invert(this._xPx) : undefined, datum, datumIndex);
+            this._mouseEvent = undefined;
+        }
+        // When `config.forceShowAt` becomes undefined, the component will "jump" to `this._xPx` which is set to the last mouse position.
+        // This looks off, so we set `this._xPx` to `xPx` to make it look like the crosshair is rendered at the forced position
+        if (isForceShowAtDefined) {
+            this._xPx = undefined;
+        }
+        smartTransition(this.g, duration)
+            .style('opacity', shouldShow ? 1 : 0);
         this.line
             .attr('y1', 0)
-            .attr('y2', this._height);
+            .attr('y1', this._height);
+        // Don't render the crosshair if the xPx is not finite
+        if (!isFinite(xClamped))
+            return;
         smartTransition(this.line, duration, easeLinear)
-            .attr('x1', this.x)
-            .attr('x2', this.x);
-        const circleData = this.getCircleData();
+            .attr('x1', xClamped)
+            .attr('x2', xClamped);
+        const circleData = isFunction(config.getCircles)
+            ? config.getCircles(xValue, datamodel.data, this.yScale, nearestDatumIndex)
+            : this.getCircleData(datum, datumIndex);
         const circles = this.g
             .selectAll('circle')
             .data(circleData, (d, i) => { var _a; return (_a = d.id) !== null && _a !== void 0 ? _a : i; });
@@ -82,13 +138,13 @@ class Crosshair extends XYComponentCore {
             .append('circle')
             .attr('class', circle)
             .attr('r', 0)
-            .attr('cx', this.x)
+            .attr('cx', xClamped)
             .attr('cy', d => d.y)
             .style('fill', d => d.color)
             .style('stroke', d => d.strokeColor)
             .style('stroke-width', d => d.strokeWidth);
         smartTransition(circlesEnter.merge(circles), duration, easeLinear)
-            .attr('cx', this.x)
+            .attr('cx', xClamped)
             .attr('cy', d => d.y)
             .attr('r', 4)
             .style('opacity', d => d.opacity)
@@ -100,108 +156,36 @@ class Crosshair extends XYComponentCore {
     hide() {
         this._onMouseOut();
     }
-    destroy() {
-        if (this._animFrameId) {
-            window.cancelAnimationFrame(this._animFrameId);
-            this._animFrameId = null;
-        }
-        this._hideTooltip();
-    }
     _onMouseMove(event) {
-        // Throttle the entire mouse move processing
-        if (this._animFrameId)
-            return;
-        this._animFrameId = window.requestAnimationFrame(() => {
-            this._processMouseMove(event);
-            this._animFrameId = null;
-        });
-    }
-    _processMouseMove(event) {
-        var _a, _b;
-        this._isMouseOver = true;
-        const { config, datamodel, element } = this;
-        const { isActive, enableSync } = this._getSyncState();
-        // Early return for synchronized non-active charts, but allow tooltip display
-        if (enableSync && !isActive) {
-            if (this.show && this.datum) {
-                this._showTooltip(event);
-            }
-            else if (this.show && this._dataX !== undefined && isNumber(this._dataX)) {
-                // For synchronized charts, find the datum if it doesn't exist
-                this.datum = getNearest(this.datamodel.data, this._dataX, this.accessors.x);
-                if (this.datum) {
-                    this._showTooltip(event);
-                }
-            }
-            return;
-        }
-        // Check if we have the necessary accessors
+        var _a;
+        const { datamodel, element } = this;
         if (!this.accessors.x && ((_a = datamodel.data) === null || _a === void 0 ? void 0 : _a.length)) {
             console.warn('Unovis | Crosshair: X accessor function has not been configured. Please check if it\'s present in the configuration object');
-            return;
-        }
-        const [x] = pointer(event, element);
-        const xRange = this.xScale.range();
-        if (config.snapToData) {
-            if (!this.accessors.y && !this.accessors.yStacked && ((_b = datamodel.data) === null || _b === void 0 ? void 0 : _b.length)) {
-                console.warn('Unovis | Crosshair: Y accessors have not been configured. Please check if they\'re present in the configuration object');
-                return;
-            }
-            const scaleX = this.xScale;
-            const valueX = scaleX.invert(x);
-            this.datum = getNearest(datamodel.data, valueX, this.accessors.x);
-            this.datumIndex = datamodel.data.indexOf(this.datum);
-            if (!this.datum)
-                return;
-            const dataX = getNumber(this.datum, this.accessors.x, this.datumIndex);
-            this.x = clamp(Math.round(scaleX(dataX)), 0, this._width);
-            this._dataX = dataX;
-            // Show the crosshair only if it's in the chart range and not far from mouse pointer (if configured)
-            this.show = (this.x >= 0) && (this.x <= this._width) && (!config.hideWhenFarFromPointer || (Math.abs(this.x - x) < config.hideWhenFarFromPointerDistance));
-        }
-        else {
-            const tolerance = 2; // Show the crosshair when it is at least 2 pixels close to the chart area
-            this.x = clamp(x, xRange[0], xRange[1]);
-            this._dataX = this.xScale.invert(this.x);
-            this.show = (x >= (xRange[0] - tolerance)) && (x <= (xRange[1] + tolerance));
-        }
-        // Call onCrosshairMove callback if provided
-        if (this.show && config.onCrosshairMove && this._dataX !== undefined) {
-            config.onCrosshairMove(this._dataX);
         }
-        // Render immediately since we're already in a throttled context
-        this._render();
-        if (this.show)
-            this._showTooltip(event);
-        else
-            this._hideTooltip();
+        const [x, y] = pointer(event, element);
+        this._xPx = x;
+        this._yPx = y;
+        this._mouseEvent = event;
+        window.cancelAnimationFrame(this._animFrameId);
+        this._animFrameId = window.requestAnimationFrame(() => {
+            this._render();
+        });
     }
     _onMouseOut() {
-        this._isMouseOver = false;
-        const { config } = this;
-        // Always hide on mouse out
-        this.show = false;
-        this._hideTooltip();
-        // Throttle rendering using requestAnimationFrame
-        if (this._animFrameId)
-            return;
+        window.cancelAnimationFrame(this._animFrameId);
         this._animFrameId = window.requestAnimationFrame(() => {
             this._render();
-            this._animFrameId = null;
         });
-        // If this is the active chart, notify parent to clear sync state
-        if (config.onCrosshairMove) {
-            config.onCrosshairMove(undefined);
-        }
     }
-    _showTooltip(event) {
+    _showTooltip(datum, xValue, pos, nearestDatumIndex) {
         var _a;
-        const tooltip = (_a = this.config.tooltip) !== null && _a !== void 0 ? _a : this.tooltip;
-        if (!tooltip || !this.datum)
+        const { config, datamodel } = this;
+        const tooltip = (_a = config.tooltip) !== null && _a !== void 0 ? _a : this.tooltip;
+        if (!tooltip || !pos)
             return;
-        const container = tooltip.getContainer() || this.container.node();
-        const [x, y] = tooltip.isContainerBody() ? [event.clientX, event.clientY] : pointer(event, container);
-        const content = this.config.template(this.datum, this._dataX || this.xScale.invert(this.x));
+        const [x, y] = pos;
+        const content = config.template(datum, xValue, nearestDatumIndex, datamodel.data);
+        // Force set `followCursor` to `true` because we don't want Crosshair's tooltip to be hoverable
         tooltip.config.followCursor = true;
         // Set tooltip placement based on Crosshair's position (left / right)
         if (!tooltip.config.horizontalPlacement || tooltip.config.horizontalPlacement === Position.Auto) {
@@ -213,133 +197,44 @@ class Crosshair extends XYComponentCore {
     }
     _hideTooltip() {
         var _a;
-        const tooltip = (_a = this.config.tooltip) !== null && _a !== void 0 ? _a : this.tooltip;
+        const { config } = this;
+        const tooltip = (_a = config.tooltip) !== null && _a !== void 0 ? _a : this.tooltip;
         tooltip === null || tooltip === void 0 ? void 0 : tooltip.hide();
     }
-    // We don't want Crosshair to be taken into account in domain calculations
+    // We don't want Crosshair to be be taken in to account in domain calculations
     getYDataExtent() {
         return [undefined, undefined];
     }
-    getCircleData() {
+    getCircleData(datum, datumIndex) {
         var _a, _b;
-        const { datamodel: { data } } = this;
-        const { isActive, enableSync } = this._getSyncState();
-        if (isFunction(this.config.getCircles)) {
-            return this.config.getCircles(this._dataX || this.xScale.invert(this.x), data, this.yScale);
-        }
-        // Get the datum - either from active mode or from synchronized mode
-        let datum = this.datum;
-        let datumIndex = this.datumIndex;
-        if (!datum && enableSync && !isActive && this._dataX !== undefined) {
-            if (isNumber(this._dataX)) {
-                datum = getNearest(this.datamodel.data, this._dataX, this.accessors.x);
-                datumIndex = this.datamodel.data.indexOf(datum);
-            }
-        }
-        if (this.config.snapToData && datum) {
+        const { config } = this;
+        if (config.snapToData && datum) {
             const yAccessors = (_a = this.accessors.y) !== null && _a !== void 0 ? _a : [];
             const yStackedAccessors = (_b = this.accessors.yStacked) !== null && _b !== void 0 ? _b : [];
             const baselineValue = getNumber(datum, this.accessors.baseline, datumIndex) || 0;
             const stackedValues = getStackedValues(datum, datumIndex, ...yStackedAccessors)
-                .map((value, index) => {
-                const yValue = value + baselineValue;
-                const yPixel = this.yScale(yValue);
-                return {
-                    y: yPixel,
-                    opacity: isNumber(getNumber(datum, yStackedAccessors[index])) ? 1 : 1,
-                    color: getColor(datum, this.config.color, index),
-                    strokeColor: this.config.strokeColor ? getColor(datum, this.config.strokeColor, index) : undefined,
-                    strokeWidth: this.config.strokeWidth ? getNumber(datum, this.config.strokeWidth, index) : undefined,
-                };
-            });
+                .map((value, index) => ({
+                y: this.yScale(value + baselineValue),
+                opacity: isNumber(getNumber(datum, yStackedAccessors[index], index)) ? 1 : 0,
+                color: getColor(datum, config.color, index),
+                strokeColor: config.strokeColor ? getColor(datum, config.strokeColor, index) : undefined,
+                strokeWidth: config.strokeWidth ? getNumber(datum, config.strokeWidth, index) : undefined,
+            }));
             const regularValues = yAccessors
                 .map((a, index) => {
-                const value = getNumber(datum, a);
-                const yPixel = isNumber(value) ? this.yScale(value) : 0;
+                const value = getNumber(datum, a, datumIndex);
                 return {
-                    y: yPixel,
+                    y: this.yScale(value),
                     opacity: isNumber(value) ? 1 : 0,
-                    color: getColor(datum, this.config.color, stackedValues.length + index),
-                    strokeColor: this.config.strokeColor ? getColor(datum, this.config.strokeColor, index) : undefined,
-                    strokeWidth: this.config.strokeWidth ? getNumber(datum, this.config.strokeWidth, index) : undefined,
+                    color: getColor(datum, config.color, stackedValues.length + index),
+                    strokeColor: config.strokeColor ? getColor(datum, config.strokeColor, index) : undefined,
+                    strokeWidth: config.strokeWidth ? getNumber(datum, config.strokeWidth, index) : undefined,
                 };
             });
             return stackedValues.concat(regularValues);
         }
-        // Return empty array if no data or no datum - crosshair line will still show
         return [];
     }
-    _updateFromSync(xData) {
-        var _a;
-        const { isActive, enableSync } = this._getSyncState();
-        if (!enableSync || isActive)
-            return;
-        // Handle mouse out signal
-        if (xData === undefined) {
-            this.show = false;
-            this._hideTooltip();
-            return;
-        }
-        if (!this.accessors.x || !((_a = this.datamodel.data) === null || _a === void 0 ? void 0 : _a.length))
-            return;
-        // Check if xPosition is within the chart's x domain
-        const xDomain = this.xScale.domain();
-        let xValue;
-        if (typeof xData === 'number') {
-            xValue = xData;
-        }
-        else if (xData instanceof Date) {
-            xValue = xData.getTime();
-        }
-        else {
-            this.show = false;
-            this._hideTooltip();
-            return;
-        }
-        // If xPosition is outside the chart's domain, hide the crosshair
-        const domainMin = typeof xDomain[0] === 'number' ? xDomain[0] : (xDomain[0] instanceof Date ? xDomain[0].getTime() : 0);
-        const domainMax = typeof xDomain[1] === 'number' ? xDomain[1] : (xDomain[1] instanceof Date ? xDomain[1].getTime() : 0);
-        if (xValue < domainMin || xValue > domainMax) {
-            this.show = false;
-            this._hideTooltip();
-            return;
-        }
-        // Find the datum at this x position
-        if (typeof xData === 'number') {
-            this.datum = getNearest(this.datamodel.data, xData, this.accessors.x);
-        }
-        else if (xData instanceof Date) {
-            this.datum = getNearest(this.datamodel.data, xData.getTime(), this.accessors.x);
-        }
-        else {
-            this.datum = undefined;
-        }
-        this.datumIndex = this.datamodel.data.indexOf(this.datum);
-        // If no datum found, hide the crosshair
-        if (!this.datum) {
-            this.show = false;
-            this._hideTooltip();
-            return;
-        }
-        const dataX = getNumber(this.datum, this.accessors.x, this.datumIndex);
-        this.x = clamp(Math.round(this.xScale(dataX)), 0, this._width);
-        this._dataX = dataX;
-        // Show the crosshair
-        this.show = true;
-        // Show tooltip for synchronized chart using the same logic as active charts
-        const syntheticEvent = {
-            clientX: this.container.node().getBoundingClientRect().left + this.x,
-            clientY: this.container.node().getBoundingClientRect().top + this._height / 2,
-        };
-        this._showTooltip(syntheticEvent);
-    }
-    _getSyncState() {
-        // A chart is active if it's being hovered and doesn't have external sync props
-        const isActive = this._isMouseOver && !isNumber(this.config.xPosition) && !this.config.forceShow;
-        // A chart is in sync mode if it has external sync props (regardless of mouse state)
-        const enableSync = isNumber(this.config.xPosition) || !!this.config.forceShow;
-        return { isActive, enableSync };
-    }
 }
 Crosshair.selectors = style;