@unovis/ts 1.6.0-pre.1 → 1.6.0

package/components/brush/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/brush/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\n\n// Types\nimport { Arrangement } from 'types/position'\n\n// We extend partial XY config interface because x and y properties are optional for Brush\nexport interface BrushConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {\n  /** Callback function to be called on any Brush event.\n   * Default: `(selection: [number, number], event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`\n  */\n  onBrush?: ((selection: [number, number] | undefined, event: D3BrushEvent<Datum>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush start event.\n   * Default: `(selection: [number, number], event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`\n  */\n  onBrushStart?: ((selection: [number, number] | undefined, event: D3BrushEvent<Datum>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush move event.\n   * Default: `(selection: [number, number], event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`\n  */\n  onBrushMove?: ((selection: [number, number] | undefined, event: D3BrushEvent<Datum>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush end event.\n   * Default: `(selection: [number, number], event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`\n  */\n  onBrushEnd?: ((selection: [number, number] | undefined, event: D3BrushEvent<Datum>, userDriven: boolean) => void);\n  /** Width of the Brush handle. Default: `1` */\n  handleWidth?: number;\n  /** Brush selection in the data space coordinates, can be used to control the selection. Default: `undefined` */\n  selection?: [number, number] | null;\n  /** Allow dragging the selected area as a whole in order to change the selected range. Default: `false` */\n  draggable?: boolean;\n  /** Position of the handle: `Arrangement.Inside` or `Arrangement.Outside`. Default: `Arrangement.Inside` */\n  handlePosition?: Arrangement | string;\n  /** Constraint Brush selection to a minimal length in data units. Default: `undefined` */\n  selectionMinLength?: number;\n}\n\nexport const BrushDefaultConfig: BrushConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrush: <Datum>(s: [number, number] | undefined, e: D3BrushEvent<Datum>, userDriven: boolean): void => {},\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushStart: <Datum>(s: [number, number] | undefined, e: D3BrushEvent<Datum>, userDriven: boolean): void => {},\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushMove: <Datum>(s: [number, number] | undefined, e: D3BrushEvent<Datum>, userDriven: boolean): void => {},\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushEnd: <Datum>(s: [number, number] | undefined, e: D3BrushEvent<Datum>, userDriven: boolean): void => {},\n  handleWidth: 9,\n  selection: null,\n  draggable: false,\n  handlePosition: Arrangement.Inside,\n  selectionMinLength: undefined,\n}\n"],"names":[],"mappings":";;;AAoCO,MAAM,kBAAkB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC1B,wBAAwB,CAAA,EAAA;;IAE3B,OAAO,EAAE,CAAQ,CAA+B,EAAE,CAAsB,EAAE,UAAmB,KAAU,GAAG;;IAE1G,YAAY,EAAE,CAAQ,CAA+B,EAAE,CAAsB,EAAE,UAAmB,KAAU,GAAG;;IAE/G,WAAW,EAAE,CAAQ,CAA+B,EAAE,CAAsB,EAAE,UAAmB,KAAU,GAAG;;AAE9G,IAAA,UAAU,EAAE,CAAQ,CAA+B,EAAE,CAAsB,EAAE,UAAmB,QAAa,EAC7G,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,IAAI,EACf,SAAS,EAAE,KAAK,EAChB,cAAc,EAAE,WAAW,CAAC,MAAM,EAClC,kBAAkB,EAAE,SAAS;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/brush/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\n\n// Types\nimport { Arrangement } from 'types/position'\n\n// We extend partial XY config interface because x and y properties are optional for Brush\nexport interface BrushConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {\n  /** Callback function to be called on any Brush event.\n   * Default: `(selection: [number, number], event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`\n  */\n  onBrush?: ((selection: [number, number] | undefined, event: D3BrushEvent<Datum>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush start event.\n   * Default: `(selection: [number, number], event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`\n  */\n  onBrushStart?: ((selection: [number, number] | undefined, event: D3BrushEvent<Datum>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush move event.\n   * Default: `(selection: [number, number], event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`\n  */\n  onBrushMove?: ((selection: [number, number] | undefined, event: D3BrushEvent<Datum>, userDriven: boolean) => void);\n  /** Callback function to be called on the Brush end event.\n   * Default: `(selection: [number, number], event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`\n  */\n  onBrushEnd?: ((selection: [number, number] | undefined, event: D3BrushEvent<Datum>, userDriven: boolean) => void);\n  /** Width of the Brush handle. Default: `1` */\n  handleWidth?: number;\n  /** Brush selection in the data space coordinates, can be used to control the selection. Default: `undefined` */\n  selection?: [number, number] | null;\n  /** Allow dragging the selected area as a whole in order to change the selected range. Default: `false` */\n  draggable?: boolean;\n  /** Position of the handle: `Arrangement.Inside` or `Arrangement.Outside`. Default: `Arrangement.Inside` */\n  handlePosition?: Arrangement.Inside | Arrangement.Outside | string;\n  /** Constraint Brush selection to a minimal length in data units. Default: `undefined` */\n  selectionMinLength?: number;\n}\n\nexport const BrushDefaultConfig: BrushConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrush: <Datum>(s: [number, number] | undefined, e: D3BrushEvent<Datum>, userDriven: boolean): void => {},\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushStart: <Datum>(s: [number, number] | undefined, e: D3BrushEvent<Datum>, userDriven: boolean): void => {},\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushMove: <Datum>(s: [number, number] | undefined, e: D3BrushEvent<Datum>, userDriven: boolean): void => {},\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */\n  onBrushEnd: <Datum>(s: [number, number] | undefined, e: D3BrushEvent<Datum>, userDriven: boolean): void => {},\n  handleWidth: 9,\n  selection: null,\n  draggable: false,\n  handlePosition: Arrangement.Inside,\n  selectionMinLength: undefined,\n}\n"],"names":[],"mappings":";;;AAoCO,MAAM,kBAAkB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC1B,wBAAwB,CAAA,EAAA;;IAE3B,OAAO,EAAE,CAAQ,CAA+B,EAAE,CAAsB,EAAE,UAAmB,KAAU,GAAG;;IAE1G,YAAY,EAAE,CAAQ,CAA+B,EAAE,CAAsB,EAAE,UAAmB,KAAU,GAAG;;IAE/G,WAAW,EAAE,CAAQ,CAA+B,EAAE,CAAsB,EAAE,UAAmB,KAAU,GAAG;;AAE9G,IAAA,UAAU,EAAE,CAAQ,CAA+B,EAAE,CAAsB,EAAE,UAAmB,QAAa,EAC7G,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,IAAI,EACf,SAAS,EAAE,KAAK,EAChB,cAAc,EAAE,WAAW,CAAC,MAAM,EAClC,kBAAkB,EAAE,SAAS;;;;"}

package/components/bullet-legend/config.d.ts

@@ -24,6 +24,8 @@ export interface BulletLegendConfigInterface {
     labelMaxWidth?: string | null;
     /** Bullet shape size, mapped to the width and height CSS properties. Default: `null` */
     bulletSize?: string | null;
+    /** Spacing between multiple bullet symbols in pixels. Default: `4` */
+    bulletSpacing?: number;
     /** Bullet shape enum value or accessor function. Default: `d => d.shape ?? BulletShape.Circle */
     bulletShape?: GenericAccessor<BulletShape, BulletLegendItemInterface>;
     /** Legend orientation. When set to `BulletLegendOrientation.Vertical`, each legend item will

package/components/bullet-legend/config.js

@@ -7,6 +7,7 @@ const BulletLegendDefaultConfig = {
     labelFontSize: null,
     labelMaxWidth: null,
     bulletSize: null,
+    bulletSpacing: 4,
     bulletShape: d => { var _a; return (_a = d.shape) !== null && _a !== void 0 ? _a : BulletShape.Circle; },
     orientation: BulletLegendOrientation.Horizontal,
     renderIntoProvidedDomNode: false,

package/components/bullet-legend/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/bullet-legend/config.ts"],"sourcesContent":["// Local Types\nimport { GenericAccessor } from 'types/accessor'\nimport { BulletLegendItemInterface, BulletShape, BulletLegendOrientation } from './types'\n\nexport interface BulletLegendConfigInterface {\n  /** Legend items. Array of `BulletLegendItemInterface`:\n   * ```\n   * {\n   *   name: string | number;\n   *   color?: string;\n   *   shape?: BulletShape;\n   *   inactive?: boolean;\n   *   hidden?: boolean;\n   *   pointer?: boolean;\n   * }\n   * ```\n  * Default: `[]` */\n  items: BulletLegendItemInterface[];\n  /** Apply a specific class to the labels. Default: `''` */\n  labelClassName?: string;\n  /** Callback function for the legend item click. Default: `undefined` */\n  onLegendItemClick?: ((d: BulletLegendItemInterface, i: number) => void);\n  /** Label text (<span> element) font-size CSS. Default: `null` */\n  labelFontSize?: string | null;\n  /** Label text (<span> element) max-width CSS property. Default: `null` */\n  labelMaxWidth?: string | null;\n  /** Bullet shape size, mapped to the width and height CSS properties. Default: `null` */\n  bulletSize?: string | null;\n  /** Bullet shape enum value or accessor function. Default: `d => d.shape ?? BulletShape.Circle */\n  bulletShape?: GenericAccessor<BulletShape, BulletLegendItemInterface>;\n  /** Legend orientation. When set to `BulletLegendOrientation.Vertical`, each legend item will\n   * start on a new line. Default: `BulletLegendOrientation.Horizontal` */\n  orientation?: BulletLegendOrientation | string;\n  /** If set to true, the legend will be rendered directly into the HTML element provided to the constructor\n   * without creating additional `div` element. Default: `false` */\n  renderIntoProvidedDomNode?: boolean;\n}\n\nexport const BulletLegendDefaultConfig: BulletLegendConfigInterface = {\n  items: [],\n  labelClassName: '',\n  onLegendItemClick: undefined,\n  labelFontSize: null,\n  labelMaxWidth: null,\n  bulletSize: null,\n  bulletShape: d => d.shape ?? BulletShape.Circle,\n  orientation: BulletLegendOrientation.Horizontal,\n  renderIntoProvidedDomNode: false,\n}\n"],"names":[],"mappings":";;AAsCa,MAAA,yBAAyB,GAAgC;AACpE,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,cAAc,EAAE,EAAE;AAClB,IAAA,iBAAiB,EAAE,SAAS;AAC5B,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,WAAW,EAAE,CAAC,cAAI,OAAA,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,WAAW,CAAC,MAAM,CAAA,EAAA;IAC/C,WAAW,EAAE,uBAAuB,CAAC,UAAU;AAC/C,IAAA,yBAAyB,EAAE,KAAK;;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/bullet-legend/config.ts"],"sourcesContent":["// Local Types\nimport { GenericAccessor } from 'types/accessor'\nimport { BulletLegendItemInterface, BulletShape, BulletLegendOrientation } from './types'\n\nexport interface BulletLegendConfigInterface {\n  /** Legend items. Array of `BulletLegendItemInterface`:\n   * ```\n   * {\n   *   name: string | number;\n   *   color?: string;\n   *   shape?: BulletShape;\n   *   inactive?: boolean;\n   *   hidden?: boolean;\n   *   pointer?: boolean;\n   * }\n   * ```\n  * Default: `[]` */\n  items: BulletLegendItemInterface[];\n  /** Apply a specific class to the labels. Default: `''` */\n  labelClassName?: string;\n  /** Callback function for the legend item click. Default: `undefined` */\n  onLegendItemClick?: ((d: BulletLegendItemInterface, i: number) => void);\n  /** Label text (<span> element) font-size CSS. Default: `null` */\n  labelFontSize?: string | null;\n  /** Label text (<span> element) max-width CSS property. Default: `null` */\n  labelMaxWidth?: string | null;\n  /** Bullet shape size, mapped to the width and height CSS properties. Default: `null` */\n  bulletSize?: string | null;\n  /** Spacing between multiple bullet symbols in pixels. Default: `4` */\n  bulletSpacing?: number;\n  /** Bullet shape enum value or accessor function. Default: `d => d.shape ?? BulletShape.Circle */\n  bulletShape?: GenericAccessor<BulletShape, BulletLegendItemInterface>;\n  /** Legend orientation. When set to `BulletLegendOrientation.Vertical`, each legend item will\n   * start on a new line. Default: `BulletLegendOrientation.Horizontal` */\n  orientation?: BulletLegendOrientation | string;\n  /** If set to true, the legend will be rendered directly into the HTML element provided to the constructor\n   * without creating additional `div` element. Default: `false` */\n  renderIntoProvidedDomNode?: boolean;\n}\n\nexport const BulletLegendDefaultConfig: BulletLegendConfigInterface = {\n  items: [],\n  labelClassName: '',\n  onLegendItemClick: undefined,\n  labelFontSize: null,\n  labelMaxWidth: null,\n  bulletSize: null,\n  bulletSpacing: 4,\n  bulletShape: d => d.shape ?? BulletShape.Circle,\n  orientation: BulletLegendOrientation.Horizontal,\n  renderIntoProvidedDomNode: false,\n}\n"],"names":[],"mappings":";;AAwCa,MAAA,yBAAyB,GAAgC;AACpE,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,cAAc,EAAE,EAAE;AAClB,IAAA,iBAAiB,EAAE,SAAS;AAC5B,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,aAAa,EAAE,CAAC;AAChB,IAAA,WAAW,EAAE,CAAC,cAAI,OAAA,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,WAAW,CAAC,MAAM,CAAA,EAAA;IAC/C,WAAW,EAAE,uBAAuB,CAAC,UAAU;AAC/C,IAAA,yBAAyB,EAAE,KAAK;;;;;"}

package/components/bullet-legend/index.js

@@ -1,8 +1,9 @@
 import { select } from 'd3-selection';
+import toPx from 'to-px';
 import { merge } from '../../utils/data.js';
 import { BulletLegendDefaultConfig } from './config.js';
 import { BulletLegendOrientation } from './types.js';
-import { createBullets, updateBullets } from './modules/shape.js';
+import { createBullets, getBulletsTotalWidth, updateBullets } from './modules/shape.js';
 import * as style from './style.js';
 import { root, item, itemVertical, clickable, bullet, label } from './style.js';
 
@@ -40,7 +41,14 @@ class BulletLegend {
             .attr('class', bullet)
             .call(createBullets);
         legendItemsMerged.select(`.${bullet}`)
-            .style('width', config.bulletSize)
+            .style('width', function (d) {
+            const colors = Array.isArray(d.color) ? d.color : [d.color];
+            const numColors = colors.length;
+            const defaultSize = toPx(getComputedStyle(this).getPropertyValue('--vis-legend-bullet-size')) || 9;
+            const baseSize = config.bulletSize ? toPx(config.bulletSize) : defaultSize;
+            const spacing = config.bulletSpacing;
+            return `${getBulletsTotalWidth(baseSize, numColors, spacing)}px`;
+        })
             .style('height', config.bulletSize)
             .style('box-sizing', 'content-box')
             .call(updateBullets, this.config, this._colorAccessor);

package/components/bullet-legend/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/bullet-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { merge } from 'utils/data'\n\n// Config\nimport { BulletLegendDefaultConfig, BulletLegendConfigInterface } from './config'\n\n// Local Types\nimport { BulletLegendItemInterface, BulletLegendOrientation } from './types'\n\n// Modules\nimport { createBullets, updateBullets } from './modules/shape'\n\n// Styles\nimport * as s from './style'\n\nexport class BulletLegend {\n  static selectors = s\n  protected _defaultConfig = BulletLegendDefaultConfig as BulletLegendConfigInterface\n  public config: BulletLegendConfigInterface = this._defaultConfig\n\n  div: Selection<HTMLElement, unknown, null, undefined>\n  element: HTMLElement\n  prevConfig: BulletLegendConfigInterface\n  protected _container: HTMLElement\n\n  private _colorAccessor = (d: BulletLegendItemInterface): string => d.color\n\n  constructor (element: HTMLElement, config?: BulletLegendConfigInterface) {\n    this._container = element\n\n    this.div = config?.renderIntoProvidedDomNode ? select(this._container) : select(this._container).append<HTMLElement>('div')\n    this.div.classed(s.root, true)\n\n    this.element = this.div.node()\n\n    if (config) this.update(config)\n  }\n\n  update (config: BulletLegendConfigInterface): void {\n    this.prevConfig = this.config\n    this.config = merge(this._defaultConfig, config)\n    this.render()\n  }\n\n  render (): void {\n    const { config } = this\n\n    const legendItems = this.div.selectAll<HTMLDivElement, unknown>(`.${s.item}`).data(config.items)\n\n    const legendItemsEnter = legendItems.enter().append('div')\n      .on('click', this._onItemClick.bind(this))\n\n    const legendItemsMerged = legendItemsEnter.merge(legendItems)\n    legendItemsMerged\n      .attr('class', d => `${s.item} ${d.className ?? ''}`)\n      .classed(s.itemVertical, config.orientation === BulletLegendOrientation.Vertical)\n      .classed(s.clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))\n      .attr('title', d => d.name)\n      .style('display', (d: BulletLegendItemInterface) => d.hidden ? 'none' : null)\n\n    // Bullet\n    legendItemsEnter.append('span')\n      .attr('class', s.bullet)\n      .call(createBullets)\n\n    legendItemsMerged.select<SVGElement>(`.${s.bullet}`)\n      .style('width', config.bulletSize)\n      .style('height', config.bulletSize)\n      .style('box-sizing', 'content-box')\n      .call(updateBullets, this.config, this._colorAccessor)\n\n    // Labels\n    legendItemsEnter.append('span')\n      .attr('class', s.label)\n      .classed(config.labelClassName, true)\n      .style('max-width', config.labelMaxWidth)\n      .style('font-size', config.labelFontSize)\n\n    legendItemsMerged.select(`.${s.label}`)\n      .text((d: BulletLegendItemInterface) => d.name)\n\n    legendItems.exit().remove()\n  }\n\n  _isItemClickable (item: BulletLegendItemInterface): boolean {\n    return item.pointer === undefined ? true : item.pointer\n  }\n\n  _onItemClick (event: MouseEvent, d: BulletLegendItemInterface): void {\n    const { config: { onLegendItemClick } } = this\n\n    const legendItems = this.div.selectAll(`.${s.item}`).nodes() as HTMLElement[]\n    const index = legendItems.indexOf(event.currentTarget as HTMLElement)\n    if (onLegendItemClick) onLegendItemClick(d, index)\n  }\n\n  public destroy (): void {\n    if (this.element !== this._container) this.div.remove()\n  }\n}\n"],"names":["s.root","s.item","s.itemVertical","s.clickable","s.bullet","s.label","s"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/bullet-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport toPx from 'to-px'\n\n// Utils\nimport { merge } from 'utils/data'\n\n// Config\nimport { BulletLegendDefaultConfig, BulletLegendConfigInterface } from './config'\n\n// Local Types\nimport { BulletLegendItemInterface, BulletLegendOrientation } from './types'\n\n// Modules\nimport { createBullets, updateBullets, getBulletsTotalWidth } from './modules/shape'\n\n// Styles\nimport * as s from './style'\n\nexport class BulletLegend {\n  static selectors = s\n  protected _defaultConfig = BulletLegendDefaultConfig as BulletLegendConfigInterface\n  public config: BulletLegendConfigInterface = this._defaultConfig\n\n  div: Selection<HTMLElement, unknown, null, undefined>\n  element: HTMLElement\n  prevConfig: BulletLegendConfigInterface\n  protected _container: HTMLElement\n\n  private _colorAccessor = (d: BulletLegendItemInterface): string|string[] => d.color\n\n  constructor (element: HTMLElement, config?: BulletLegendConfigInterface) {\n    this._container = element\n\n    this.div = config?.renderIntoProvidedDomNode ? select(this._container) : select(this._container).append<HTMLElement>('div')\n    this.div.classed(s.root, true)\n\n    this.element = this.div.node()\n\n    if (config) this.update(config)\n  }\n\n  update (config: BulletLegendConfigInterface): void {\n    this.prevConfig = this.config\n    this.config = merge(this._defaultConfig, config)\n    this.render()\n  }\n\n  render (): void {\n    const { config } = this\n\n    const legendItems = this.div.selectAll<HTMLDivElement, unknown>(`.${s.item}`).data(config.items)\n\n    const legendItemsEnter = legendItems.enter().append('div')\n      .on('click', this._onItemClick.bind(this))\n\n    const legendItemsMerged = legendItemsEnter.merge(legendItems)\n    legendItemsMerged\n      .attr('class', d => `${s.item} ${d.className ?? ''}`)\n      .classed(s.itemVertical, config.orientation === BulletLegendOrientation.Vertical)\n      .classed(s.clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))\n      .attr('title', d => d.name)\n      .style('display', (d: BulletLegendItemInterface) => d.hidden ? 'none' : null)\n\n    // Bullet\n    legendItemsEnter.append('span')\n      .attr('class', s.bullet)\n      .call(createBullets)\n\n    legendItemsMerged.select<SVGElement>(`.${s.bullet}`)\n      .style('width', function (d: BulletLegendItemInterface) {\n        const colors = Array.isArray(d.color) ? d.color : [d.color]\n        const numColors = colors.length\n        const defaultSize = toPx(getComputedStyle(this).getPropertyValue('--vis-legend-bullet-size')) || 9\n        const baseSize = config.bulletSize ? toPx(config.bulletSize) : defaultSize\n        const spacing = config.bulletSpacing\n        return `${getBulletsTotalWidth(baseSize, numColors, spacing)}px`\n      })\n      .style('height', config.bulletSize)\n      .style('box-sizing', 'content-box')\n      .call(updateBullets, this.config, this._colorAccessor)\n\n    // Labels\n    legendItemsEnter.append('span')\n      .attr('class', s.label)\n      .classed(config.labelClassName, true)\n      .style('max-width', config.labelMaxWidth)\n      .style('font-size', config.labelFontSize)\n\n    legendItemsMerged.select(`.${s.label}`)\n      .text((d: BulletLegendItemInterface) => d.name)\n\n    legendItems.exit().remove()\n  }\n\n  _isItemClickable (item: BulletLegendItemInterface): boolean {\n    return item.pointer === undefined ? true : item.pointer\n  }\n\n  _onItemClick (event: MouseEvent, d: BulletLegendItemInterface): void {\n    const { config: { onLegendItemClick } } = this\n\n    const legendItems = this.div.selectAll(`.${s.item}`).nodes() as HTMLElement[]\n    const index = legendItems.indexOf(event.currentTarget as HTMLElement)\n    if (onLegendItemClick) onLegendItemClick(d, index)\n  }\n\n  public destroy (): void {\n    if (this.element !== this._container) this.div.remove()\n  }\n}\n"],"names":["s.root","s.item","s.itemVertical","s.clickable","s.bullet","s.label","s"],"mappings":"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"}

package/components/bullet-legend/modules/shape.d.ts

@@ -2,5 +2,6 @@ import { Selection } from 'd3-selection';
 import { ColorAccessor } from "../../../types/accessor";
 import { BulletLegendConfigInterface } from '../config';
 import { BulletLegendItemInterface } from '../types';
+export declare function getBulletsTotalWidth(bulletSize: number, numBullets: number, spacing: number): number;
 export declare function createBullets(container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLElement, unknown>): void;
 export declare function updateBullets(container: Selection<SVGElement, BulletLegendItemInterface, HTMLElement, unknown>, config: BulletLegendConfigInterface, colorAccessor: ColorAccessor<BulletLegendItemInterface>): void;

package/components/bullet-legend/modules/shape.js

@@ -1,8 +1,9 @@
 import { select } from 'd3-selection';
 import { symbol } from 'd3-shape';
+import toPx from 'to-px';
 import { Symbol } from '../../../types/symbol.js';
 import { getColor } from '../../../utils/color.js';
-import { getString } from '../../../utils/data.js';
+import { getString, ensureArray } from '../../../utils/data.js';
 import { PATTERN_SIZE_PX } from '../../../styles/patterns.js';
 import { BulletShape } from '../types.js';
 
@@ -19,6 +20,11 @@ const shapeScale = {
     [BulletShape.Triangle]: Math.sqrt(3) / 4,
     [BulletShape.Wye]: 5 / 11,
 };
+function getBulletsTotalWidth(bulletSize, numBullets, spacing) {
+    if (numBullets < 1)
+        return 0;
+    return bulletSize * numBullets + spacing * (numBullets - 1);
+}
 function createBullets(container) {
     container.each((d, i, els) => {
         select(els[i]).append('svg')
@@ -29,53 +35,67 @@ function createBullets(container) {
 }
 function updateBullets(container, config, colorAccessor) {
     container.each((d, i, els) => {
+        var _a;
         const shape = getString(d, config.bulletShape, i);
-        const color = getColor(d, colorAccessor, i);
-        const width = BULLET_SIZE;
+        const colors = ensureArray((_a = d.color) !== null && _a !== void 0 ? _a : getColor(d, colorAccessor, i));
+        const numBullets = colors.length;
+        const bulletWidth = BULLET_SIZE;
+        const defaultBulletSize = toPx(getComputedStyle(els[i]).getPropertyValue('--vis-legend-bullet-size'));
+        const spacing = config.bulletSpacing * (BULLET_SIZE / defaultBulletSize); // Scale spacing relative to bullet size
+        const width = getBulletsTotalWidth(bulletWidth, numBullets, spacing);
         const height = shape === BulletShape.Line ? BULLET_SIZE / 2.5 : BULLET_SIZE;
         const selection = select(els[i]).select('svg')
             .attr('viewBox', `0 0 ${width} ${height}`);
-        const bulletPath = selection.select('path')
-            .attr('stroke', color);
+        // Remove existing paths
+        selection.selectAll('path').remove();
         const opacity = d.inactive ? 'var(--vis-legend-bullet-inactive-opacity)' : 1;
-        if (shape === BulletShape.Line) {
-            bulletPath
-                .attr('d', `M0,${height / 2} L${width / 2},${height / 2} L${width},${height / 2}`)
-                .attr('transform', null)
-                .style('opacity', opacity)
-                .style('stroke-width', '3px')
-                .style('fill', null)
-                .style('fill-opacity', null)
-                .style('marker-start', 'none')
-                .style('marker-end', 'none');
-        }
-        else {
-            const symbolGen = symbol()
-                .type(Symbol[shape])
-                .size(width * height * shapeScale[shape]);
-            const scale = (width - 2) / width;
-            let dy = height / 2;
-            switch (shape) {
-                case BulletShape.Triangle:
-                    dy += height / 8;
-                    break;
-                case BulletShape.Star:
-                    dy += height / 16;
-                    break;
-                case BulletShape.Wye:
-                    dy -= height / 16;
-                    break;
+        // Create a path for each color
+        colors.forEach((color, colorIndex) => {
+            const bulletPath = selection.append('path');
+            if (shape === BulletShape.Line) {
+                const x1 = colorIndex * (bulletWidth + spacing);
+                const x2 = x1 + bulletWidth;
+                bulletPath
+                    .attr('d', `M${x1},${height / 2} L${x2},${height / 2}`)
+                    .attr('transform', null)
+                    .style('opacity', opacity)
+                    .style('stroke', color)
+                    .style('stroke-width', '3px')
+                    .style('fill', null)
+                    .style('fill-opacity', null)
+                    .style('marker-start', 'none')
+                    .style('marker-end', 'none');
+            }
+            else {
+                const symbolGen = symbol()
+                    .type(Symbol[shape])
+                    .size(bulletWidth * height * shapeScale[shape]);
+                const scale = (bulletWidth - 2) / bulletWidth;
+                let dy = height / 2;
+                switch (shape) {
+                    case BulletShape.Triangle:
+                        dy += height / 8;
+                        break;
+                    case BulletShape.Star:
+                        dy += height / 16;
+                        break;
+                    case BulletShape.Wye:
+                        dy -= height / 16;
+                        break;
+                }
+                const dx = colorIndex * (bulletWidth + spacing) + bulletWidth / 2;
+                bulletPath
+                    .attr('d', symbolGen)
+                    .attr('transform', `translate(${dx}, ${Math.round(dy)}) scale(${scale})`)
+                    .style('stroke', color)
+                    .style('stroke-width', '1px')
+                    .style('opacity', null)
+                    .style('fill', color)
+                    .style('fill-opacity', opacity);
             }
-            bulletPath
-                .attr('d', symbolGen)
-                .attr('transform', `translate(${width / 2}, ${Math.round(dy)}) scale(${scale})`)
-                .style('stroke-width', '1px')
-                .style('opacity', null)
-                .style('fill', color)
-                .style('fill-opacity', opacity);
-        }
+        });
     });
 }
 
-export { createBullets, updateBullets };
+export { createBullets, getBulletsTotalWidth, updateBullets };
 //# sourceMappingURL=shape.js.map

package/components/bullet-legend/modules/shape.js.map

@@ -1 +1 @@
-{"version":3,"file":"shape.js","sources":["../../../../src/components/bullet-legend/modules/shape.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { symbol } from 'd3-shape'\n\n// Types\nimport { ColorAccessor } from 'types/accessor'\nimport { Symbol, SymbolType } from 'types/symbol'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { getString } from 'utils/data'\n\n// Constants\nimport { PATTERN_SIZE_PX } from 'styles/patterns'\n\n// Local types\nimport { BulletLegendConfigInterface } from '../config'\nimport { BulletShape, BulletLegendItemInterface } from '../types'\n\n// Size with respect to the viewBox. We use this to compute path data which is independent of the\n// the configured size.\nconst BULLET_SIZE = PATTERN_SIZE_PX * 3\n\n// Different shapes need different scaling to fit the full size\nconst shapeScale: Record<SymbolType, number> = {\n  [BulletShape.Circle]: Math.PI / 4,\n  [BulletShape.Cross]: 5 / 9,\n  [BulletShape.Diamond]: Math.sqrt(3) / 6,\n  [BulletShape.Square]: 1,\n  [BulletShape.Star]: 0.3,\n  [BulletShape.Triangle]: Math.sqrt(3) / 4,\n  [BulletShape.Wye]: 5 / 11,\n}\n\nexport function createBullets (\n  container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLElement, unknown>\n): void {\n  container.each((d, i, els) => {\n    select(els[i]).append('svg')\n      .attr('width', '100%')\n      .attr('height', '100%')\n      .append('path')\n  })\n}\n\nexport function updateBullets (\n  container: Selection<SVGElement, BulletLegendItemInterface, HTMLElement, unknown>,\n  config: BulletLegendConfigInterface,\n  colorAccessor: ColorAccessor<BulletLegendItemInterface>\n): void {\n  container.each((d, i, els) => {\n    const shape = getString(d, config.bulletShape, i) as BulletShape\n    const color = getColor(d, colorAccessor, i)\n    const width = BULLET_SIZE\n    const height = shape === BulletShape.Line ? BULLET_SIZE / 2.5 : BULLET_SIZE\n\n    const selection = select(els[i]).select('svg')\n      .attr('viewBox', `0 0 ${width} ${height}`)\n\n    const bulletPath = selection.select<SVGPathElement>('path')\n      .attr('stroke', color)\n\n    const opacity = d.inactive ? 'var(--vis-legend-bullet-inactive-opacity)' : 1\n    if (shape === BulletShape.Line) {\n      bulletPath\n        .attr('d', `M0,${height / 2} L${width / 2},${height / 2} L${width},${height / 2}`)\n        .attr('transform', null)\n        .style('opacity', opacity)\n        .style('stroke-width', '3px')\n        .style('fill', null)\n        .style('fill-opacity', null)\n        .style('marker-start', 'none')\n        .style('marker-end', 'none')\n    } else {\n      const symbolGen = symbol()\n        .type(Symbol[shape])\n        .size(width * height * shapeScale[shape])\n\n      const scale = (width - 2) / width\n      let dy = height / 2\n      switch (shape) {\n        case BulletShape.Triangle:\n          dy += height / 8\n          break\n        case BulletShape.Star:\n          dy += height / 16\n          break\n        case BulletShape.Wye:\n          dy -= height / 16\n          break\n      }\n\n      bulletPath\n        .attr('d', symbolGen)\n        .attr('transform', `translate(${width / 2}, ${Math.round(dy)}) scale(${scale})`)\n        .style('stroke-width', '1px')\n        .style('opacity', null)\n        .style('fill', color)\n        .style('fill-opacity', opacity)\n    }\n  })\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"shape.js","sources":["../../../../src/components/bullet-legend/modules/shape.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { symbol } from 'd3-shape'\nimport toPx from 'to-px'\n\n// Types\nimport { ColorAccessor } from 'types/accessor'\nimport { Symbol, SymbolType } from 'types/symbol'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { ensureArray, getString } from 'utils/data'\n\n// Constants\nimport { PATTERN_SIZE_PX } from 'styles/patterns'\n\n// Local types\nimport { BulletLegendConfigInterface } from '../config'\nimport { BulletShape, BulletLegendItemInterface } from '../types'\n\n// Size with respect to the viewBox. We use this to compute path data which is independent of the\n// the configured size.\nconst BULLET_SIZE = PATTERN_SIZE_PX * 3\n\n// Different shapes need different scaling to fit the full size\nconst shapeScale: Record<SymbolType, number> = {\n  [BulletShape.Circle]: Math.PI / 4,\n  [BulletShape.Cross]: 5 / 9,\n  [BulletShape.Diamond]: Math.sqrt(3) / 6,\n  [BulletShape.Square]: 1,\n  [BulletShape.Star]: 0.3,\n  [BulletShape.Triangle]: Math.sqrt(3) / 4,\n  [BulletShape.Wye]: 5 / 11,\n}\n\nexport function getBulletsTotalWidth (bulletSize: number, numBullets: number, spacing: number): number {\n  if (numBullets < 1) return 0\n  return bulletSize * numBullets + spacing * (numBullets - 1)\n}\n\nexport function createBullets (\n  container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLElement, unknown>\n): void {\n  container.each((d, i, els) => {\n    select(els[i]).append('svg')\n      .attr('width', '100%')\n      .attr('height', '100%')\n      .append('path')\n  })\n}\n\nexport function updateBullets (\n  container: Selection<SVGElement, BulletLegendItemInterface, HTMLElement, unknown>,\n  config: BulletLegendConfigInterface,\n  colorAccessor: ColorAccessor<BulletLegendItemInterface>\n): void {\n  container.each((d, i, els) => {\n    const shape = getString(d, config.bulletShape, i) as BulletShape\n    const colors = ensureArray(d.color ?? getColor(d, colorAccessor, i))\n    const numBullets = colors.length\n    const bulletWidth = BULLET_SIZE\n    const defaultBulletSize = toPx(getComputedStyle(els[i]).getPropertyValue('--vis-legend-bullet-size'))\n    const spacing = config.bulletSpacing * (BULLET_SIZE / defaultBulletSize) // Scale spacing relative to bullet size\n    const width = getBulletsTotalWidth(bulletWidth, numBullets, spacing)\n    const height = shape === BulletShape.Line ? BULLET_SIZE / 2.5 : BULLET_SIZE\n\n    const selection = select(els[i]).select('svg')\n      .attr('viewBox', `0 0 ${width} ${height}`)\n\n    // Remove existing paths\n    selection.selectAll('path').remove()\n\n    const opacity = d.inactive ? 'var(--vis-legend-bullet-inactive-opacity)' : 1\n\n    // Create a path for each color\n    colors.forEach((color, colorIndex) => {\n      const bulletPath = selection.append('path')\n\n      if (shape === BulletShape.Line) {\n        const x1 = colorIndex * (bulletWidth + spacing)\n        const x2 = x1 + bulletWidth\n        bulletPath\n          .attr('d', `M${x1},${height / 2} L${x2},${height / 2}`)\n          .attr('transform', null)\n          .style('opacity', opacity)\n          .style('stroke', color)\n          .style('stroke-width', '3px')\n          .style('fill', null)\n          .style('fill-opacity', null)\n          .style('marker-start', 'none')\n          .style('marker-end', 'none')\n      } else {\n        const symbolGen = symbol()\n          .type(Symbol[shape])\n          .size(bulletWidth * height * shapeScale[shape])\n\n        const scale = (bulletWidth - 2) / bulletWidth\n        let dy = height / 2\n        switch (shape) {\n          case BulletShape.Triangle:\n            dy += height / 8\n            break\n          case BulletShape.Star:\n            dy += height / 16\n            break\n          case BulletShape.Wye:\n            dy -= height / 16\n            break\n        }\n\n        const dx = colorIndex * (bulletWidth + spacing) + bulletWidth / 2\n        bulletPath\n          .attr('d', symbolGen)\n          .attr('transform', `translate(${dx}, ${Math.round(dy)}) scale(${scale})`)\n          .style('stroke', color)\n          .style('stroke-width', '1px')\n          .style('opacity', null)\n          .style('fill', color)\n          .style('fill-opacity', opacity)\n      }\n    })\n  })\n}\n"],"names":[],"mappings":"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"}

package/components/bullet-legend/types.d.ts

@@ -1,7 +1,7 @@
 import { SymbolType } from "../../types/symbol";
 export interface BulletLegendItemInterface {
     name: string | number;
-    color?: string;
+    color?: string | Array<string>;
     className?: string;
     shape?: BulletShape;
     inactive?: boolean;

package/components/bullet-legend/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/bullet-legend/types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { SymbolType } from 'types/symbol'\n\nexport interface BulletLegendItemInterface {\n  name: string | number;\n  color?: string;\n  className?: string;\n  shape?: BulletShape;\n  inactive?: boolean;\n  hidden?: boolean;\n  pointer?: boolean;\n}\n\nexport const BulletShape = {\n  ...SymbolType,\n  Line: 'line',\n} as const\n\nexport type BulletShape = typeof BulletShape[keyof typeof BulletShape]\n\nexport enum BulletLegendOrientation {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n"],"names":[],"mappings":";;AAAA;AAaa,MAAA,WAAW,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACtB,UAAU,CAAA,EAAA,EACb,IAAI,EAAE,MAAM,EAAA,EACJ;IAIE,wBAGX;AAHD,CAAA,UAAY,uBAAuB,EAAA;AACjC,IAAA,uBAAA,CAAA,YAAA,CAAA,GAAA,YAAyB,CAAA;AACzB,IAAA,uBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EAHW,uBAAuB,KAAvB,uBAAuB,GAGlC,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/bullet-legend/types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { SymbolType } from 'types/symbol'\n\nexport interface BulletLegendItemInterface {\n  name: string | number;\n  color?: string | Array<string>;\n  className?: string;\n  shape?: BulletShape;\n  inactive?: boolean;\n  hidden?: boolean;\n  pointer?: boolean;\n}\n\nexport const BulletShape = {\n  ...SymbolType,\n  Line: 'line',\n} as const\n\nexport type BulletShape = typeof BulletShape[keyof typeof BulletShape]\n\nexport enum BulletLegendOrientation {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n"],"names":[],"mappings":";;AAAA;AAaa,MAAA,WAAW,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACtB,UAAU,CAAA,EAAA,EACb,IAAI,EAAE,MAAM,EAAA,EACJ;IAIE,wBAGX;AAHD,CAAA,UAAY,uBAAuB,EAAA;AACjC,IAAA,uBAAA,CAAA,YAAA,CAAA,GAAA,YAAyB,CAAA;AACzB,IAAA,uBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EAHW,uBAAuB,KAAvB,uBAAuB,GAGlC,EAAA,CAAA,CAAA;;;;"}

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 `data` and `leftNearestDatumIndex` will be provided.
+     * Default: `d => ''` */
+    template?: (datum: Datum, x: number | Date, data: Datum[], leftNearestDatumIndex: number) => 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,11 +36,22 @@ 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.
-     * It has to return an array of the CrosshairCircle objects: `{ y: number; color: string; opacity?: number }[]`.
+     * 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[];
+    getCircles?: (x: number | Date, data: Datum[], yScale: ContinuousScale, leftNearestDatumIndex: number) => CrosshairCircle[];
+    /** Callback function that is called when the crosshair is moved:
+     * - `x` is the horizontal position of the crosshair in the data space;
+     * - `datum` is the nearest datum to the crosshair;
+     * - `datumIndex` is the index of the nearest datum.
+     * - `event` is the event that triggered the crosshair move (mouse or wheel).
+     *
+     * When the mouse goes out of the container and on wheel events, all the arguments are `undefined` except for `event`.
+     * Default: `undefined` */
+    onCrosshairMove?: (x?: number | Date, datum?: Datum, datumIndex?: number, event?: MouseEvent | WheelEvent) => 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 });
+const CrosshairDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { yStacked: undefined, baseline: null, duration: 100, tooltip: undefined, template: (d, x, data, leftNearestDatumIndex) => '', 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}\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}\n\n"],"names":[],"mappings":";;AAgDO,MAAM,sBAAsB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC9B,wBAAwB,CAAA,EAAA,EAC3B,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;;;;"}
+{"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  // TODO: Change `datum` type to `Datum | undefined`. This may break the build for many people, so we might want to do it in version 2.0\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 `data` and `leftNearestDatumIndex` will be provided.\n   * Default: `d => ''` */\n  template?: (datum: Datum, x: number | Date, data: Datum[], leftNearestDatumIndex: number) => 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, leftNearestDatumIndex: number) => CrosshairCircle[];\n  /** Callback function that is called when the crosshair is moved:\n   * - `x` is the horizontal position of the crosshair in the data space;\n   * - `datum` is the nearest datum to the crosshair;\n   * - `datumIndex` is the index of the nearest datum.\n   * - `event` is the event that triggered the crosshair move (mouse or wheel).\n   *\n   * When the mouse goes out of the container and on wheel events, all the arguments are `undefined` except for `event`.\n   * Default: `undefined` */\n  onCrosshairMove?: (x?: number | Date, datum?: Datum, datumIndex?: number, event?: MouseEvent | WheelEvent) => 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, x: number | Date, data: Datum[], leftNearestDatumIndex: number): 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":";;AA8DO,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,EAAE,IAAa,EAAE,qBAA6B,KAAa,EAAE,EACzG,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,10 +11,9 @@ 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;
     /** 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. */
@@ -23,13 +22,15 @@ export declare class Crosshair<Datum> extends XYComponentCore<Datum, CrosshairCo
     private _accessors;
     set accessors(accessors: CrosshairAccessors<Datum>);
     get accessors(): CrosshairAccessors<Datum>;
+    private _isContainerInViewport;
     constructor(config?: CrosshairConfigInterface<Datum>);
     setContainer(containerSvg: Selection<SVGSVGElement, unknown, SVGSVGElement, unknown>): void;
     _render(customDuration?: number): void;
-    hide(): void;
+    hide(sourceEvent?: MouseEvent | WheelEvent): void;
     _onMouseMove(event: MouseEvent): void;
-    _onMouseOut(): void;
-    _showTooltip(event: MouseEvent): void;
+    _onMouseOut(event?: MouseEvent): void;
+    _onWheel(event: WheelEvent): void;
+    _showTooltip(datum: Datum, xValue: number, pos: [number, number], nearestDatumIndex: number | undefined): void;
     _hideTooltip(): void;
     getYDataExtent(): number[];
     private getCircleData;