@unovis/ts 1.1.1-beta.7 → 1.1.1-beta.8

package/src/components/chord-diagram/modules/label.ts

@@ -1,155 +0,0 @@
-import { select, Selection } from 'd3-selection'
-import { ScaleContinuousNumeric } from 'd3-scale'
-import { color } from 'd3-color'
-
-// Utils
-import { trimSVGText } from 'utils/text'
-import { smartTransition } from 'utils/d3'
-import { getNumber, getString, getValue } from 'utils/data'
-import { getColor, hexToBrightness } from 'utils/color'
-
-// Config
-import { ChordDiagramConfig } from '../config'
-
-// Local Types
-import { ChordInputLink, ChordInputNode, ChordLabelAlignment, ChordNode } from '../types'
-
-// Styles
-import * as s from '../style'
-
-export const LABEL_PADDING = 3
-
-function getLabelFillColor<N extends ChordInputNode, L extends ChordInputLink> (
-  d: ChordNode<N>,
-  config: ChordDiagramConfig<N, L>
-): string {
-  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along
-  switch (nodeLabelAlignment) {
-    case ChordLabelAlignment.Perpendicular: {
-      return getColor(d.data, config.nodeColor, d.height)
-    }
-    case ChordLabelAlignment.Along: {
-      const c = getColor(d.data, config.nodeColor, d.height)
-      const colorParsed = color(c)
-      const brightness = colorParsed ? hexToBrightness(colorParsed.hex()) : 0
-      return brightness > 0.65 ? 'var(--vis-chord-diagram-label-text-fill-color-dark)' : 'var(--vis-chord-diagram-label-text-fill-color-bright)'
-    }
-  }
-}
-
-function getLabelTextAnchor<N extends ChordInputNode, L extends ChordInputLink> (
-  d: ChordNode<N>,
-  config: ChordDiagramConfig<N, L>
-): string | null {
-  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along
-  switch (nodeLabelAlignment) {
-    case ChordLabelAlignment.Perpendicular: {
-      const angleCenter = (d.x0 + d.x1) / 2
-      const angleDegree = angleCenter * 180 / Math.PI
-      return angleDegree < 180 ? 'start' : 'end'
-    }
-    case ChordLabelAlignment.Along: {
-      return null
-    }
-  }
-}
-
-function getLabelTransform<N extends ChordInputNode, L extends ChordInputLink> (
-  d: ChordNode<N>,
-  config: ChordDiagramConfig<N, L>,
-  radiusScale: ScaleContinuousNumeric<number, number>
-): string | null {
-  const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along
-  switch (nodeLabelAlignment) {
-    case ChordLabelAlignment.Perpendicular: {
-      const r = radiusScale(d.y1) + LABEL_PADDING
-      const angleCenter = (d.x0 + d.x1) / 2
-      const angle = angleCenter - Math.PI / 2
-      const x = r * Math.cos(angle)
-      const y = r * Math.sin(angle)
-      return `translate(${x}, ${y})`
-    }
-    case ChordLabelAlignment.Along:
-      return null
-  }
-}
-
-export function createLabel<N extends ChordInputNode, L extends ChordInputLink> (
-  selection: Selection<SVGGElement, ChordNode<N>, SVGGElement, unknown>,
-  config: ChordDiagramConfig<N, L>,
-  radiusScale: ScaleContinuousNumeric<number, number>
-): void {
-  selection.style('opacity', 0)
-    .attr('transform', d => getLabelTransform(d, config, radiusScale))
-
-  selection.append('text')
-    .attr('class', s.label)
-    .style('fill', d => getColor(d.data, config.nodeColor, d.height))
-}
-
-export function updateLabel<N extends ChordInputNode, L extends ChordInputLink> (
-  selection: Selection<SVGGElement, ChordNode<N>, SVGGElement, unknown>,
-  config: ChordDiagramConfig<N, L>,
-  width: number,
-  radiusScale: ScaleContinuousNumeric<number, number>,
-  duration: number
-): void {
-  const { nodeLabel, nodeLabelColor, nodeWidth } = config
-
-  smartTransition(selection, duration)
-    .attr('transform', d => getLabelTransform(d, config, radiusScale))
-    .style('opacity', 1)
-
-  const label: Selection<SVGTextElement, ChordNode<N>, SVGElement, unknown> = selection.select(`.${s.label}`)
-  label.select('textPath').remove()
-  label
-    .text(d => getString(d.data, nodeLabel))
-    .style('fill', d => getColor(d.data, nodeLabelColor) ?? getLabelFillColor(d, config))
-    .style('text-anchor', d => getLabelTextAnchor(d, config))
-
-  label.each((d: ChordNode<N>, i: number, elements) => {
-    const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment) ?? ChordLabelAlignment.Along
-    const radianArcLength = d.x1 - d.x0 - getNumber(d, config.padAngle) * 2
-    const radius = radiusScale(d.y1) - getNumber(d, config.nodeWidth) / 2
-    const arcLength = radius * radianArcLength
-    const maxWidth = (nodeLabelAlignment === ChordLabelAlignment.Along ? arcLength : width) - LABEL_PADDING * 2
-
-    const textElementSelection = select(elements[i])
-    trimSVGText(textElementSelection, maxWidth)
-    textElementSelection
-      .attr('dx', nodeLabelAlignment === ChordLabelAlignment.Along ? LABEL_PADDING : null)
-      .attr('dy', nodeLabelAlignment === ChordLabelAlignment.Along ? getNumber(d.data, nodeWidth) / 2 : null)
-
-    if (nodeLabelAlignment === ChordLabelAlignment.Along) {
-      const textElement = select(elements[i])
-      const textWidth = textElement.node().getBoundingClientRect().width
-      const labelText = textElement.text()
-
-      select(elements[i])
-        .text('')
-        .style('display', textWidth > maxWidth && 'none')
-
-      select(elements[i]).append('textPath')
-        .attr('href', `#${d.uid}`)
-        .text(labelText)
-    }
-  })
-
-  smartTransition(label, duration)
-    .attr('transform', d => {
-      const nodeLabelAlignment = getValue(d.data, config.nodeLabelAlignment)
-      if (nodeLabelAlignment !== ChordLabelAlignment.Perpendicular) return null
-      const angleCenter = (d.x0 + d.x1) / 2
-      const angleDegree = angleCenter * 180 / Math.PI
-      return `rotate(${angleDegree < 180 ? angleDegree - 90 : angleDegree + 90})`
-    })
-}
-
-export function removeLabel (
-  selection: Selection<SVGGElement, unknown, SVGGElement, unknown>,
-  duration: number
-): void {
-  smartTransition(selection, duration)
-    .style('opacity', 0)
-    .remove()
-}

package/src/components/chord-diagram/modules/link.ts

@@ -1,91 +0,0 @@
-import { Selection, select } from 'd3-selection'
-import { path } from 'd3-path'
-import { Line } from 'd3-shape'
-import { Transition } from 'd3-transition'
-import { interpolatePath } from 'd3-interpolate-path'
-
-// Utils
-import { getColor } from 'utils/color'
-import { smartTransition } from 'utils/d3'
-
-// Local Types
-import { ChordInputLink, ChordInputNode, ChordRibbon, ChordRibbonPoint } from '../types'
-import { ChordDiagramConfig } from '../config'
-
-export interface ArcLink extends SVGElement {
-  _animState?: {
-    source: { y0: number; y1: number };
-    target: { x0: number; x1: number; y1: number };
-  };
-}
-
-export function emptyPath (): string {
-  return 'M0,0 L0,0'
-}
-
-// Creates a path consisting of the inner source arc, node arcs and connecting curves
-function linkGen (points: ChordRibbonPoint[], lineGen: Line<[number, number]>): string {
-  const p = path()
-  const sourceArc = points[0]
-  const targetArc = points[points.length - 1]
-
-  if (points.length === 2) {
-    // Writing a custom curve here since generators won't produce a curved line from only two points
-    p.moveTo(sourceArc.x1, sourceArc.y1)
-    p.quadraticCurveTo(0, 0, targetArc.x0, targetArc.y0)
-    p.arc(0, 0, targetArc.r, targetArc.a0, targetArc.a1)
-    p.quadraticCurveTo(0, 0, sourceArc.x0, sourceArc.y0)
-    p.arc(0, 0, sourceArc.r, sourceArc.a0, sourceArc.a1)
-  } else {
-    const inner: [number, number][] = points.map((d, i) => i < points.length / 2 ? [d.x1, d.y1] : [d.x0, d.y0])
-    const outer: [number, number][] = points.map((d, i) => i < points.length / 2 ? [d.x0, d.y0] : [d.x1, d.y1])
-
-    lineGen.context(p as CanvasRenderingContext2D)
-    lineGen(inner)
-    p.arc(0, 0, targetArc.r, targetArc.a0, targetArc.a1)
-    lineGen(outer.reverse())
-    p.arc(0, 0, sourceArc.r, sourceArc.a0, sourceArc.a1)
-  }
-  return p.toString()
-}
-
-export function createLink<N extends ChordInputNode> (
-  selection: Selection<SVGPathElement, ChordRibbon<N>, SVGGElement, unknown>,
-  lineGen: Line<[number, number]>
-): void {
-  selection
-    .attr('d', d => linkGen(d.points, lineGen) || emptyPath())
-    .style('opacity', 0)
-}
-
-export function updateLink<N extends ChordInputNode, L extends ChordInputLink> (
-  selection: Selection<SVGPathElement, ChordRibbon<N>, SVGGElement, unknown>,
-  config: ChordDiagramConfig<N, L>,
-  lineGen: Line<[number, number]>,
-  duration: number
-): void {
-  const selTransition = smartTransition(selection, duration)
-    .style('fill', d => getColor(d.data, config.linkColor))
-    .style('stroke', d => getColor(d.data, config.linkColor))
-    .style('opacity', 'var(--vis-chord-diagram-link-opacity)')
-
-  if (duration) {
-    const transition = selTransition as Transition<SVGPathElement, ChordRibbon<N>, SVGGElement, unknown>
-    transition.attrTween('d', (d, i, el) => {
-      const previous = select(el[i]).attr('d')
-      const next = linkGen(d.points, lineGen) || emptyPath()
-      return interpolatePath(previous, next)
-    })
-  } else {
-    selTransition.attr('d', d => linkGen(d.points, lineGen) || emptyPath())
-  }
-}
-
-export function removeLink (
-  selection: Selection<SVGPathElement, unknown, SVGGElement, unknown>,
-  duration: number
-): void {
-  smartTransition(selection, duration)
-    .style('opacity', 0)
-    .remove()
-}

package/src/components/chord-diagram/modules/node.ts

@@ -1,80 +0,0 @@
-import { Selection } from 'd3-selection'
-import { Transition } from 'd3-transition'
-import { interpolate } from 'd3-interpolate'
-import { Arc } from 'd3-shape'
-
-// Utils
-import { getColor } from 'utils/color'
-import { smartTransition } from 'utils/d3'
-
-// Local Types
-import { ChordInputNode, ChordInputLink, ChordNode } from '../types'
-
-// Config
-import { ChordDiagramConfig } from '../config'
-
-type AnimState = { x0: number; x1: number; y0: number; y1: number }
-export interface ArcNode extends SVGElement {
-  _animState?: AnimState;
-}
-
-export function createNode<N extends ChordInputNode, L extends ChordInputLink> (
-  selection: Selection<SVGPathElement, ChordNode<N>, SVGGElement, unknown>
-): void {
-  selection
-    .style('opacity', 0)
-    .each((d, i, els) => {
-      const arcNode: ArcNode = els[i]
-      const angleCenter = (d.x0 + d.x1) / 2
-      const angleHalfWidth = (d.x1 - d.x0) / 2
-      arcNode._animState = {
-        x0: angleCenter - angleHalfWidth * 0.8,
-        x1: angleCenter + angleHalfWidth * 0.8,
-        y0: d.y0,
-        y1: d.y1,
-      }
-    })
-}
-
-export function updateNode<N extends ChordInputNode, L extends ChordInputLink> (
-  selection: Selection<SVGPathElement, ChordNode<N>, SVGGElement, unknown>,
-  config: ChordDiagramConfig<N, L>,
-  arcGen: Arc<unknown, AnimState>,
-  duration: number
-): void {
-  const nodeColor = (d: ChordNode<N>): string => getColor(d.data, config.nodeColor, d.height)
-
-  selection
-    .attr('id', d => d.uid)
-    .style('transition', `fill ${duration}ms`) // Animate color with CSS because we're using CSS-variables
-    .style('fill', nodeColor)
-    .style('stroke', nodeColor)
-
-  if (duration) {
-    const transition = smartTransition(selection, duration)
-      .style('opacity', 1) as Transition<SVGPathElement, ChordNode<N>, SVGGElement, ChordNode<N>>
-
-    transition.attrTween('d', (d, i, els) => {
-      const arcNode: ArcNode = els[i]
-      const nextAnimState = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 }
-      const datum = interpolate(arcNode._animState, nextAnimState)
-
-      return (t: number): string => {
-        arcNode._animState = datum(t)
-        return arcGen(arcNode._animState)
-      }
-    })
-  } else {
-    selection.attr('d', d => arcGen(d))
-      .style('opacity', 1)
-  }
-}
-
-export function removeNode<N extends ChordInputNode> (
-  selection: Selection<SVGPathElement, unknown, SVGGElement, unknown>,
-  duration: number
-): void {
-  smartTransition(selection, duration)
-    .style('opacity', 0)
-    .remove()
-}

package/src/components/chord-diagram/types.ts

@@ -1,68 +0,0 @@
-import { HierarchyRectangularNode } from 'd3-hierarchy'
-import { GraphLinkCore, GraphNodeCore } from 'types'
-
-// Node data flow in the component:
-// Input data (N extends ChordInputNode, L extends ChordInputLink)
-//   => GraphNodeCore<N>[] (we reference it only in a few places when it's needed, to make the code easier to read)
-//   => ChordHierarchyNode (nested object representing node hierarchy)
-//   => ChordNode[] and ChordLeafNode[] (HierarchyRectangularNode[] from D3 partition)
-
-export interface ChordInputNode {
-  id?: string;
-}
-
-export interface ChordInputLink {
-  id?: string;
-  source: number | string | ChordInputNode;
-  target: number | string | ChordInputNode;
-}
-
-export type ChordDiagramData<
-  N extends ChordInputNode,
-  L extends ChordInputLink,
-> = {
-  nodes: N[];
-  links?: L[];
-}
-
-export interface ChordHierarchyNode<N> {
-  key: string;
-  values: (ChordHierarchyNode<N> | N)[];
-  depth?: number;
-  height?: number;
-  value?: number;
-  ancestors?: string[];
-}
-
-export type ChordNodeState = {
-  _state: {
-    hovered?: boolean;
-    value?: number;
-  };
-  _prevX1?: number;
-}
-
-export type ChordNodeCore<N> = HierarchyRectangularNode<N> & ChordNodeState & {
-  data: N;
-  uid: string; // Unique id for textPath href
-}
-
-export type ChordNodeDatum<N> = ChordHierarchyNode<N> | N;
-export type ChordNode<N extends ChordInputNode> = ChordNodeCore<ChordNodeDatum<N>>
-export type ChordLeafNode<N extends ChordInputNode> = ChordNodeCore<GraphNodeCore<N, ChordInputLink>>
-
-export type ChordRibbonPoint = { x0: number; x1: number; y0: number; y1: number; a0: number; a1: number; r: number }
-export interface ChordRibbon<N extends ChordInputNode> {
-  source: ChordLeafNode<N>;
-  target: ChordLeafNode<N>;
-  points: ChordRibbonPoint[];
-  data: GraphLinkCore<N, ChordInputLink>;
-  _state: {
-    hovered?: boolean;
-  };
-}
-
-export enum ChordLabelAlignment {
-  Along = 'along',
-  Perpendicular = 'perpendicular',
-}

package/src/components/crosshair/config.ts

@@ -1,48 +0,0 @@
-import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
-import { Tooltip } from 'components/tooltip'
-
-// Types
-import { NumericAccessor } from 'types/accessor'
-import { ContinuousScale } from 'types/scale'
-import { CrosshairCircle } from './types'
-
-// We extend partial XY config interface because x and y properties are optional for Crosshair
-export interface CrosshairConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {
-  /** Separate array of accessors for stacked components (eg StackedBar, Area). Default: `undefined` */
-  yStacked?: NumericAccessor<Datum>[];
-  /** Baseline accessor function for stacked values, useful with stacked areas. Default: `null` */
-  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` */
-  hideWhenFarFromPointer?: boolean;
-  /** Distance in pixels to check in the hideWhenFarFromPointer condition. Default: `100` */
-  hideWhenFarFromPointerDistance?: number;
-  /** Snap to the nearest data point.
-   * If disabled, the tooltip template will receive only the horizontal position of the crosshair and you'll be responsible
-   * for getting the underlying data records and crosshair circles (see the `getCircles` configuration option).
-   * Default: `true`
-  */
-  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 }[]`.
-   * Default: `undefined`
-  */
-  getCircles?: (x: number, data: Datum[], yScale: ContinuousScale) => CrosshairCircle[];
-}
-
-export class CrosshairConfig<Datum> extends XYComponentConfig<Datum> implements CrosshairConfigInterface<Datum> {
-  yStacked = undefined
-  baseline = null
-  duration = 100
-  tooltip: Tooltip = undefined
-  template: ((data: Datum, x: number | Date) => string | HTMLElement) = (d: Datum): string => ''
-  hideWhenFarFromPointer = true
-  hideWhenFarFromPointerDistance = 100
-  snapToData = true
-  getCircles = undefined
-}

package/src/components/crosshair/index.ts

@@ -1,220 +0,0 @@
-import { Selection, pointer } from 'd3-selection'
-import { easeLinear } from 'd3-ease'
-
-// Core
-import { XYComponentCore } from 'core/xy-component'
-import { Tooltip } from 'components/tooltip'
-
-// Utils
-import { isNumber, isArray, getNumber, clamp, getStackedValues, getNearest, isFunction } from 'utils/data'
-import { smartTransition } from 'utils/d3'
-import { getColor } from 'utils/color'
-
-// Local Types
-import { CrosshairAccessors, CrosshairCircle } from './types'
-
-// Config
-import { CrosshairConfig, CrosshairConfigInterface } from './config'
-
-// Styles
-import * as s from './style'
-
-export class Crosshair<Datum> extends XYComponentCore<Datum, CrosshairConfig<Datum>, CrosshairConfigInterface<Datum>> {
-  static selectors = s
-  clippable = true // Don't apply clipping path to this component. See XYContainer
-  config: CrosshairConfig<Datum> = new CrosshairConfig()
-  container: Selection<SVGSVGElement, any, SVGSVGElement, any>
-  line: Selection<SVGLineElement, any, SVGElement, any>
-  x = 0
-  datum: Datum
-  datumIndex: number
-  show = false
-  private _animFrameId: number = null
-
-  /** 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. */
-  public tooltip: Tooltip
-
-  /** Accessors passed externally (e.g. from XYContainer) */
-  private _accessors: CrosshairAccessors<Datum> = {
-    x: undefined,
-    y: undefined,
-    yStacked: undefined,
-    baseline: undefined,
-  }
-
-  public set accessors (accessors: CrosshairAccessors<Datum>) { this._accessors = accessors }
-  public get accessors (): CrosshairAccessors<Datum> {
-    const { config } = this
-
-    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 = hasConfig ? config.yStacked : this._accessors.yStacked
-    const baseline = config.baseline ?? this._accessors.baseline
-
-    return { x, y, yStacked, baseline }
-  }
-
-  constructor (config?: CrosshairConfigInterface<Datum>) {
-    super()
-    if (config) this.config.init(config)
-
-    this.g.style('opacity', this.show ? 1 : 0)
-    this.line = this.g.append('line')
-      .attr('class', s.line)
-  }
-
-  setContainer (containerSvg: Selection<SVGSVGElement, unknown, SVGSVGElement, unknown>): void {
-    // 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))
-  }
-
-  _render (customDuration?: number): void {
-    const { config } = this
-    if (config.snapToData && !this.datum) return
-    const duration = isNumber(customDuration) ? customDuration : config.duration
-
-    smartTransition(this.g, duration)
-      .style('opacity', this.show ? 1 : 0)
-
-    this.line
-      .attr('y1', 0)
-      .attr('y1', this._height)
-
-    smartTransition(this.line, duration, easeLinear)
-      .attr('x1', this.x)
-      .attr('x2', this.x)
-
-    const circleData = this.getCircleData()
-    const circles = this.g
-      .selectAll<SVGCircleElement, CrosshairCircle>('circle')
-      .data(circleData, (d, i) => d.id ?? i)
-
-    const circlesEnter = circles.enter()
-      .append('circle')
-      .attr('class', s.circle)
-      .attr('r', 0)
-      .attr('cx', this.x)
-      .attr('cy', d => d.y)
-      .style('fill', d => d.color)
-
-    smartTransition(circlesEnter.merge(circles), duration, easeLinear)
-      .attr('cx', this.x)
-      .attr('cy', d => d.y)
-      .attr('r', 4)
-      .style('opacity', d => d.opacity)
-      .style('fill', d => d.color)
-
-    circles.exit().remove()
-  }
-
-  hide (): void {
-    this._onMouseOut()
-  }
-
-  _onMouseMove (event: MouseEvent): void {
-    const { config, datamodel, element } = this
-    if (!this.accessors.x && datamodel.data?.length) {
-      console.warn('Unovis | Crosshair: X accessor function has not been configured. Please check if it\'s present in the configuration object')
-    }
-    const [x] = pointer(event, element)
-    const xRange = this.xScale.range()
-
-    if (config.snapToData) {
-      if (!this.accessors.y && !this.accessors.yStacked && datamodel.data?.length) {
-        console.warn('Unovis | Crosshair: Y accessors have not been configured. Please check if they\'re present in the configuration object')
-      }
-      const scaleX = this.xScale
-      const valueX = scaleX.invert(x) as number
-
-      this.datum = getNearest(datamodel.data, valueX, this.accessors.x)
-      this.datumIndex = datamodel.data.indexOf(this.datum)
-      if (!this.datum) return
-
-      this.x = clamp(Math.round(scaleX(getNumber(this.datum, this.accessors.x, this.datumIndex))), 0, this._width)
-
-      // 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.show = (x >= (xRange[0] - tolerance)) && (x <= (xRange[1] + tolerance))
-    }
-
-    window.cancelAnimationFrame(this._animFrameId)
-    this._animFrameId = window.requestAnimationFrame(() => {
-      this._render()
-    })
-
-    if (this.show) this._showTooltip(event)
-    else this._hideTooltip()
-  }
-
-  _onMouseOut (): void {
-    this.show = false
-
-    window.cancelAnimationFrame(this._animFrameId)
-    this._animFrameId = window.requestAnimationFrame(() => {
-      this._render()
-    })
-    this._hideTooltip()
-  }
-
-  _showTooltip (event: MouseEvent): void {
-    const { config } = this
-    const tooltip = config.tooltip ?? this.tooltip
-    if (!tooltip) return
-
-    const container = tooltip.getContainer() || this.container.node()
-    const [x, y] = tooltip.isContainerBody() ? [event.clientX, event.clientY] : pointer(event, container)
-    const content = config.template(this.datum, this.xScale.invert(this.x))
-    if (content) tooltip.show(content, { x, y })
-  }
-
-  _hideTooltip (): void {
-    const { config } = this
-    const tooltip = config.tooltip ?? this.tooltip
-    tooltip?.hide()
-  }
-
-  // We don't want Crosshair to be be taken in to account in domain calculations
-  getYDataExtent (): number[] {
-    return [undefined, undefined]
-  }
-
-  private getCircleData (): CrosshairCircle[] {
-    const { config, datamodel: { data } } = this
-
-    if (isFunction(config.getCircles)) return config.getCircles(this.xScale.invert(this.x), data, this.yScale)
-
-    if (config.snapToData && this.datum) {
-      const yAccessors = this.accessors.y ?? []
-      const yStackedAccessors = this.accessors.yStacked ?? []
-      const baselineValue = getNumber(this.datum, this.accessors.baseline, this.datumIndex) || 0
-      const stackedValues: CrosshairCircle[] = getStackedValues(this.datum, this.datumIndex, ...yStackedAccessors)
-        .map((value, index, arr) => ({
-          y: this.yScale(value + baselineValue),
-          opacity: getNumber(this.datum, yStackedAccessors[index]) ? 1 : 0,
-          color: getColor(this.datum, config.color, index),
-        }))
-
-      const regularValues: CrosshairCircle[] = yAccessors
-        .map((a, index) => {
-          const value = getNumber(this.datum, a)
-          return {
-            y: this.yScale(value),
-            opacity: value ? 1 : 0,
-            color: getColor(this.datum, config.color, stackedValues.length + index),
-          }
-        })
-
-      return stackedValues.concat(regularValues)
-    }
-
-    return []
-  }
-}

package/src/components/crosshair/types.ts

@@ -1,15 +0,0 @@
-import { NumericAccessor } from 'types/accessor'
-
-export type CrosshairCircle = {
-  y: number;
-  color: string;
-  opacity?: number;
-  id?: string;
-}
-
-export type CrosshairAccessors<Datum> = {
-  x: NumericAccessor<Datum> | undefined;
-  y: NumericAccessor<Datum>[] | undefined;
-  yStacked: NumericAccessor<Datum>[] | undefined;
-  baseline: NumericAccessor<Datum> | undefined;
-}