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

package/src/components/axis/index.ts

@@ -1,363 +0,0 @@
-import { select, Selection } from 'd3-selection'
-import { interrupt } from 'd3-transition'
-import { Axis as D3Axis, axisBottom, axisLeft, axisRight, axisTop } from 'd3-axis'
-
-// Core
-import { XYComponentCore } from 'core/xy-component'
-
-// Types
-import { Position } from 'types/position'
-import { Spacing } from 'types/spacing'
-import { FitMode, TextAlign, UnovisText, UnovisTextOptions, VerticalAlign } from 'types/text'
-
-// Utils
-import { smartTransition } from 'utils/d3'
-import { renderTextToSvgTextElement, trimSVGText } from 'utils/text'
-
-// Local Types
-import { AxisType } from './types'
-
-// Config
-import { AxisConfig, AxisConfigInterface } from './config'
-
-// Styles
-import * as s from './style'
-
-export class Axis<Datum> extends XYComponentCore<Datum, AxisConfig<Datum>, AxisConfigInterface<Datum>> {
-  static selectors = s
-  config: AxisConfig<Datum> = new AxisConfig<Datum>()
-  axisGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
-  gridGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
-
-  private _axisRawBBox: DOMRect
-  private _axisSizeBBox: SVGRect
-  private _requiredMargin: Spacing
-  private _defaultNumTicks = 3
-  private _minMaxTicksOnlyEnforceWidth = 250
-
-  events = {}
-
-  constructor (config?: AxisConfigInterface<Datum>) {
-    super()
-    if (config) this.config.init(config)
-
-    this.axisGroup = this.g.append('g')
-    this.gridGroup = this.g.append('g')
-      .attr('class', s.grid)
-  }
-
-  /** Renders axis to an invisible grouped to calculate automatic chart margins */
-  preRender (): void {
-    const { config } = this
-    const axisRenderHelperGroup = this.g.append('g').attr('opacity', 0)
-
-    this._renderAxis(axisRenderHelperGroup, 0)
-
-    // Store axis raw BBox (without the label) for further label positioning (see _renderAxisLabel)
-    this._axisRawBBox = axisRenderHelperGroup.node().getBBox()
-
-    // Align tick text
-    if (config.tickTextAlign) this._alignTickLabels()
-
-    // Render label and store total axis size and required margins
-    this._renderAxisLabel(axisRenderHelperGroup)
-    this._axisSizeBBox = this._getAxisSize(axisRenderHelperGroup)
-    this._requiredMargin = this._getRequiredMargin(this._axisSizeBBox)
-
-    axisRenderHelperGroup.remove()
-  }
-
-  getPosition (): Position {
-    const { config: { type, position } } = this
-    return (position ?? ((type === AxisType.X) ? Position.Bottom : Position.Left)) as Position
-  }
-
-  _getAxisSize (selection: Selection<SVGGElement, unknown, SVGGElement, undefined>): SVGRect {
-    const bBox = selection.node().getBBox()
-    return bBox
-  }
-
-  _getRequiredMargin (axisSize = this._axisSizeBBox): Spacing {
-    const { config: { type, position } } = this
-
-    switch (type) {
-      case AxisType.X: {
-        const tolerancePx = 1
-        const xEnd = this._axisSizeBBox.x + this._axisSizeBBox.width
-
-        const left = this._axisSizeBBox.x < 0 ? Math.abs(this._axisSizeBBox.x) : 0
-        const right = (xEnd - this._width) > tolerancePx ? xEnd - this._width : 0
-
-        switch (position) {
-          case Position.Top: return { top: axisSize.height, left, right }
-          case Position.Bottom: default: return { bottom: axisSize.height, left, right }
-        }
-      }
-      case AxisType.Y: {
-        const bleedY = axisSize.height > this._height ? (axisSize.height - this._height) / 2 : 0
-        const top = bleedY
-        const bottom = bleedY
-
-        switch (position) {
-          case Position.Right: return { right: axisSize.width, top, bottom }
-          case Position.Left: default: return { left: axisSize.width, top, bottom }
-        }
-      }
-    }
-  }
-
-  getRequiredMargin (): Spacing {
-    return this._requiredMargin
-  }
-
-  /** Calculates axis transform:translate offset based on passed container margins */
-  getOffset (containerMargin: Spacing): {left: number; top: number} {
-    const { config: { type, position } } = this
-
-    switch (type) {
-      case AxisType.X:
-        switch (position) {
-          case Position.Top: return { top: containerMargin.top, left: containerMargin.left }
-          case Position.Bottom: default: return { top: containerMargin.top + this._height, left: containerMargin.left }
-        }
-      case AxisType.Y:
-        switch (position) {
-          case Position.Right: return { top: containerMargin.top, left: containerMargin.left + this._width }
-          case Position.Left: default: return { top: containerMargin.top, left: containerMargin.left }
-        }
-    }
-  }
-
-  _render (duration = this.config.duration, selection = this.axisGroup): void {
-    const { config } = this
-
-    this._renderAxis(selection, duration)
-    this._renderAxisLabel(selection)
-
-    if (config.gridLine) {
-      const gridGen = this._buildGrid().tickFormat(() => '')
-      gridGen.tickValues(this._getConfiguredTickValues())
-      // Interrupting all active transitions first to prevent them from being stuck.
-      // Somehow we see it happening in Angular apps.
-      this.gridGroup.selectAll('*').interrupt()
-      smartTransition(this.gridGroup, duration).call(gridGen).style('opacity', 1)
-    } else {
-      smartTransition(this.gridGroup, duration).style('opacity', 0)
-    }
-
-    if (config.tickTextAlign) this._alignTickLabels()
-  }
-
-  _buildAxis (): D3Axis<any> {
-    const { config: { type, position, tickPadding } } = this
-
-    const ticks = this._getNumTicks()
-    switch (type) {
-      case AxisType.X:
-        switch (position) {
-          case Position.Top: return axisTop(this.xScale).ticks(ticks).tickPadding(tickPadding)
-          case Position.Bottom: default: return axisBottom(this.xScale).ticks(ticks).tickPadding(tickPadding)
-        }
-      case AxisType.Y:
-        switch (position) {
-          case Position.Right: return axisRight(this.yScale).ticks(ticks).tickPadding(tickPadding)
-          case Position.Left: default: return axisLeft(this.yScale).ticks(ticks).tickPadding(tickPadding)
-        }
-    }
-  }
-
-  _buildGrid (): D3Axis<any> {
-    const { config: { type, position } } = this
-
-    const ticks = this._getNumTicks()
-    switch (type) {
-      case AxisType.X:
-        switch (position) {
-          case Position.Top: return axisTop(this.xScale).ticks(ticks * 2).tickSize(-this._height).tickSizeOuter(0)
-          case Position.Bottom: default: return axisBottom(this.xScale).ticks(ticks * 2).tickSize(-this._height).tickSizeOuter(0)
-        }
-      case AxisType.Y:
-        switch (position) {
-          case Position.Right: return axisRight(this.yScale).ticks(ticks * 2).tickSize(-this._width).tickSizeOuter(0)
-          case Position.Left: default: return axisLeft(this.yScale).ticks(ticks * 2).tickSize(-this._width).tickSizeOuter(0)
-        }
-    }
-  }
-
-  _renderAxis (selection = this.axisGroup, duration = this.config.duration): void {
-    const { config } = this
-
-    const axisGen = this._buildAxis()
-    axisGen.tickValues(this._getConfiguredTickValues())
-
-    // Interrupting all active transitions first to prevent them from being stuck.
-    // Somehow we see it happening in Angular apps.
-    selection.selectAll('*').interrupt()
-    smartTransition(selection, duration).call(axisGen)
-
-    const ticks = selection.selectAll<SVGGElement, number | Date>('g.tick')
-    const tickValues = ticks.data()
-
-    ticks
-      .classed(s.tick, true)
-      .style('font-size', config.tickTextFontSize)
-
-    // We interrupt transition on tick Text to make it 'wrappable'
-    const tickText = selection.selectAll<SVGTextElement, number | Date>('g.tick > text')
-    tickText.nodes().forEach(node => interrupt(node))
-
-    tickText.each((value, i, elements) => {
-      const text = config.tickFormat?.(value, i, tickValues) ?? `${value}`
-      const textElement = elements[i]
-      const textMaxWidth = config.tickTextWidth || (config.type === AxisType.X ? this._containerWidth / (ticks.size() + 1) : this._containerWidth / 5)
-      const styleDeclaration = getComputedStyle(textElement)
-      const fontSize = Number.parseFloat(styleDeclaration.fontSize)
-      const fontFamily = styleDeclaration.fontFamily
-
-      if (config.tickTextFitMode === FitMode.Trim) {
-        const textElementSelection = select(textElement).text(text)
-        trimSVGText(textElementSelection, textMaxWidth, config.tickTextTrimType, true, fontSize, 0.58)
-      } else {
-        const textBlock: UnovisText = { text, fontFamily, fontSize }
-        const textOptions: UnovisTextOptions = {
-          verticalAlign: config.type === AxisType.X ? VerticalAlign.Top : VerticalAlign.Middle,
-          width: textMaxWidth,
-        }
-        renderTextToSvgTextElement(textElement, textBlock, textOptions)
-      }
-    })
-
-    selection
-      .classed(s.axis, true)
-      .classed(s.hideTickLine, !config.tickLine)
-      .classed(s.hideDomain, !config.domainLine)
-
-    if (config.fullSize) {
-      const path = this._getFullDomainPath(0)
-      smartTransition(selection.select('.domain'), duration).attr('d', path)
-    }
-  }
-
-  _getNumTicks (): number {
-    const { config: { type, numTicks } } = this
-
-    if (numTicks) return numTicks
-
-    if (type === AxisType.X) {
-      const xRange = this.xScale.range() as [number, number]
-      const width = xRange[1] - xRange[0]
-      return Math.floor(width / 175)
-    }
-
-    if (type === AxisType.Y) {
-      const yRange = this.yScale.range() as [number, number]
-      const height = Math.abs(yRange[0] - yRange[1])
-      return Math.pow(height, 0.85) / 25
-    }
-
-    return this._defaultNumTicks
-  }
-
-  _getConfiguredTickValues (): number[] | null {
-    const { config: { tickValues, type, minMaxTicksOnly } } = this
-    const scale = type === AxisType.X ? this.xScale : this.yScale
-    const scaleDomain = scale?.domain()
-
-    if (tickValues) {
-      return tickValues.filter(v => (v >= scaleDomain[0]) && (v <= scaleDomain[1]))
-    }
-
-    if (minMaxTicksOnly || (type === AxisType.X && this._width < this._minMaxTicksOnlyEnforceWidth)) {
-      return scaleDomain as number[]
-    }
-
-    return null
-  }
-
-  _getFullDomainPath (tickSize = 0): string {
-    const { config: { type } } = this
-    switch (type) {
-      case AxisType.X: return `M0.5, ${tickSize} V0.5 H${this._width + 0.5} V${tickSize}`
-      case AxisType.Y: return `M${-tickSize}, ${this._height + 0.5} H0.5 V0.5 H${-tickSize}`
-    }
-  }
-
-  _renderAxisLabel (selection = this.axisGroup): void {
-    const { type, label, labelMargin, labelFontSize } = this.config
-
-    // Remove the old label first to calculate the axis size properly
-    selection.selectAll(`.${s.label}`).remove()
-
-    // Calculate label position and rotation
-    const axisPosition = this.getPosition()
-    // We always use this.axisRenderHelperGroup to calculate the size of the axis because
-    //    this.axisGroup will give us incorrect values due to animation
-    const { width: axisWidth, height: axisHeight } = this._axisRawBBox ?? selection.node().getBBox()
-
-    const offsetX = type === AxisType.X ? this._width / 2 : (-1) ** (+(axisPosition === Position.Left)) * axisWidth
-    const offsetY = type === AxisType.X ? (-1) ** (+(axisPosition === Position.Top)) * axisHeight : this._height / 2
-
-    const marginX = type === AxisType.X ? 0 : (-1) ** (+(axisPosition === Position.Left)) * labelMargin
-    const marginY = type === AxisType.X ? (-1) ** (+(axisPosition === Position.Top)) * labelMargin : 0
-
-    const rotation = type === AxisType.Y ? -90 : 0
-
-    // Append new label
-    selection
-      .append('text')
-      .attr('class', s.label)
-      .text(label)
-      .style('font-size', labelFontSize)
-      .attr('dy', `${this._getLabelDY()}em`)
-      .attr('transform', `translate(${offsetX + marginX},${offsetY + marginY}) rotate(${rotation})`)
-  }
-
-  _getLabelDY (): number {
-    const { type, position } = this.config
-    switch (type) {
-      case AxisType.X:
-        switch (position) {
-          case Position.Top: return 0
-          case Position.Bottom: default: return 0.75
-        }
-      case AxisType.Y:
-        switch (position) {
-          case Position.Right: return 0.75
-          case Position.Left: default: return -0.25
-        }
-    }
-  }
-
-  _alignTickLabels (): void {
-    const { config: { type, tickTextAlign, position } } = this
-
-    const tickText = this.g.selectAll('g.tick > text')
-    const textAnchor = this._getTickTextAnchor(tickTextAlign)
-    const translateX = type === AxisType.X ? 0 : this._getYTickTextTranslate(tickTextAlign, position)
-
-    tickText
-      .attr('text-anchor', textAnchor)
-      .attr('transform', `translate(${translateX},0)`)
-  }
-
-  _getTickTextAnchor (textAlign: TextAlign): string {
-    switch (textAlign) {
-      case TextAlign.Left: return 'start'
-      case TextAlign.Right: return 'end'
-      case TextAlign.Center: return 'middle'
-      default: return null
-    }
-  }
-
-  _getYTickTextTranslate (textAlign: TextAlign, axisPosition: Position = Position.Left): number {
-    const defaultTickTextSpacingPx = 9 // Default in D3
-    const width = this._axisRawBBox.width - defaultTickTextSpacingPx
-
-    switch (textAlign) {
-      case TextAlign.Left: return axisPosition === Position.Left ? width * -1 : 0
-      case TextAlign.Right: return axisPosition === Position.Left ? 0 : width
-      case TextAlign.Center: return axisPosition === Position.Left ? width * (-0.5) : width * 0.5
-      default: return 0
-    }
-  }
-}

package/src/components/axis/types.ts

@@ -1,4 +0,0 @@
-export enum AxisType {
-  X = 'x',
-  Y = 'y',
-}

package/src/components/brush/config.ts

@@ -1,51 +0,0 @@
-import { D3BrushEvent } from 'd3-brush'
-import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
-
-// Types
-import { Arrangement } from 'types/position'
-
-// We extend partial XY config interface because x and y properties are optional for Brush
-export interface BrushConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {
-  /** Callback function to be called on any Brush event.
-   * Default: `(selection: [number, number], event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`
-  */
-  onBrush?: ((selection: [number, number] | undefined, event: D3BrushEvent<Datum>, userDriven: boolean) => void);
-  /** Callback function to be called on the Brush start event.
-   * Default: `(selection: [number, number], event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`
-  */
-  onBrushStart?: ((selection: [number, number] | undefined, event: D3BrushEvent<Datum>, userDriven: boolean) => void);
-  /** Callback function to be called on the Brush move event.
-   * Default: `(selection: [number, number], event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`
-  */
-  onBrushMove?: ((selection: [number, number] | undefined, event: D3BrushEvent<Datum>, userDriven: boolean) => void);
-  /** Callback function to be called on the Brush end event.
-   * Default: `(selection: [number, number], event: D3BrushEvent<Datum>, userDriven: boolean): void => {}`
-  */
-  onBrushEnd?: ((selection: [number, number] | undefined, event: D3BrushEvent<Datum>, userDriven: boolean) => void);
-  /** Width of the Brush handle. Default: `1` */
-  handleWidth?: number;
-  /** Brush selection in the data space coordinates, can be used to control the selection. Default: `undefined` */
-  selection?: [number, number] | null;
-  /** Allow dragging the selected area as a whole in order to change the selected range. Default: `false` */
-  draggable?: boolean;
-  /** Position of the handle: `Arrangement.Inside` or `Arrangement.Outside`. Default: `Arrangement.Inside` */
-  handlePosition?: Arrangement | string;
-  /** Constraint Brush selection to a minimal length in data units. Default: `undefined` */
-  selectionMinLength?: number;
-}
-
-export class BrushConfig<Datum> extends XYComponentConfig<Datum> implements BrushConfigInterface<Datum> {
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
-  onBrush = (s: [number, number] | undefined, e: D3BrushEvent<Datum>, userDriven: boolean): void => {}
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
-  onBrushStart = (s: [number, number] | undefined, e: D3BrushEvent<Datum>, userDriven: boolean): void => {}
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
-  onBrushMove = (s: [number, number] | undefined, e: D3BrushEvent<Datum>, userDriven: boolean): void => {}
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function */
-  onBrushEnd = (s: [number, number] | undefined, e: D3BrushEvent<Datum>, userDriven: boolean): void => {}
-  handleWidth = 9
-  selection = null
-  draggable = false
-  handlePosition: Arrangement | string = Arrangement.Inside
-  selectionMinLength = undefined
-}

package/src/components/brush/index.ts

@@ -1,233 +0,0 @@
-import { BrushBehavior, brushX, D3BrushEvent } from 'd3-brush'
-import { Selection } from 'd3-selection'
-
-// Core
-import { XYComponentCore } from 'core/xy-component'
-
-// Utils
-import { isNumber, clamp } from 'utils/data'
-import { smartTransition } from 'utils/d3'
-
-// Types
-import { Arrangement } from 'types/position'
-
-// Config
-import { BrushConfig, BrushConfigInterface } from './config'
-
-// Local Types
-import { BrushDirection, BrushHandleType } from './types'
-
-// Styles
-import * as s from './style'
-
-export class Brush<Datum> extends XYComponentCore<Datum, BrushConfig<Datum>, BrushConfigInterface<Datum>> {
-  static selectors = s
-  clippable = false // Don't apply clipping path to this component. See XYContainer
-  config: BrushConfig<Datum> = new BrushConfig()
-  brush: Selection<SVGGElement, unknown, SVGGElement, unknown>
-  unselectedRange: Selection<SVGRectElement, BrushHandleType, SVGGElement, unknown>
-  handleLines: Selection<SVGLineElement, BrushHandleType, SVGGElement, unknown>
-  brushBehaviour: BrushBehavior<unknown> = brushX()
-  events = {
-    [Brush.selectors.brush]: {},
-  }
-
-  private _selection: [number, number] | null = null
-  private _firstRender = true
-
-  constructor (config?: BrushConfigInterface<Datum>) {
-    super()
-    if (config) this.config.init(config)
-
-    this.brush = this.g
-      .append('g')
-      .attr('class', s.brush)
-
-    const directions: BrushHandleType[] = [{ type: BrushDirection.West }, { type: BrushDirection.East }]
-    this.unselectedRange = this.g
-      .selectAll(`.${s.unselected}`)
-      .data(directions)
-      .enter().append('rect')
-      .attr('class', s.unselected)
-
-    this.handleLines = this.g
-      .selectAll(`.${s.handleLine}`)
-      .data(directions)
-      .enter().append('line')
-      .attr('class', s.handleLine)
-  }
-
-  _render (customDuration?: number): void {
-    const { brushBehaviour, config } = this
-    const duration = isNumber(customDuration) ? customDuration : config.duration
-    const xScale = this.xScale
-
-    brushBehaviour
-      .extent([[0, 0], [this._width, this._height]])
-      .on('start', this._onBrushStart.bind(this))
-      .on('brush', this._onBrushMove.bind(this))
-      .on('end', this._onBrushEnd.bind(this))
-
-    this.brush
-      .call(brushBehaviour)
-      .classed('non-draggable', !config.draggable)
-
-    const yRange = [this._height, 0]
-    const h = yRange[0] - yRange[1]
-
-    this.g.selectAll('.handle')
-      .attr('y', yRange[1])
-      .attr('height', h)
-
-    this.unselectedRange
-      .attr('y', yRange[1])
-      .attr('height', h)
-
-    this.handleLines
-      .attr('y1', yRange[1] + 10)
-      .attr('y2', yRange[1] + h - 10)
-
-    // We save the X scale range and set it to the available horizontal space to calculate the selection range in pixels correctly
-    const xRange = [0, this._width]
-    const xScaleRange = xScale.range()
-    xScale.range(xRange)
-    const selectionMin = clamp(xScale((config.selection || this._selection)?.[0]) ?? 0, xRange[0], xRange[1])
-    const selectionMax = clamp(xScale((config.selection || this._selection)?.[1]) ?? 0, xRange[0], xRange[1])
-    xScale.range(xScaleRange) // Restore the X scale range
-
-    const selectionLength = selectionMax - selectionMin
-    const brushRange = (selectionLength ? [selectionMin, selectionMax] : xRange) as [number, number]
-    this._positionHandles(brushRange)
-
-    smartTransition(this.brush, duration)
-      .call(brushBehaviour.move, brushRange) // Sets up the brush and calls brush events
-      .on('end interrupt', () => { this._firstRender = false })
-      // We track the first render to not trigger user events on component initialization
-    if (!duration) this._firstRender = false
-  }
-
-  _updateSelection (s: [number, number]): void {
-    const xRange = [0, this._width]
-    this.unselectedRange
-      .attr('x', d => d.type === BrushDirection.West ? xRange[0] : s[1])
-      .attr('width', d => {
-        const length = d.type === BrushDirection.West ? s[0] - xRange[0] : xRange[1] - s[1]
-        const lengthClamped = clamp(length, 0, xRange[1] - xRange[0])
-        return lengthClamped
-      })
-
-    this._positionHandles(s)
-
-    // D3 sets brush handle height to be too long, so we need to update it
-    const yRange = [this._height, 0]
-    const h = yRange[0] - yRange[1]
-    this.g.selectAll('.handle')
-      .attr('y', yRange[1])
-      .attr('height', h)
-  }
-
-  private _positionHandles (s: [number, number]): void {
-    const { config } = this
-
-    this.brush.selectAll<SVGRectElement, BrushHandleType>('.handle')
-      .attr('width', config.handleWidth)
-      .attr('x', d => {
-        if (!s) return 0
-        const west = d.type === BrushDirection.West
-        const inside = config.handlePosition === Arrangement.Inside
-
-        if (west) return s[0] + (inside ? 0 : -config.handleWidth)
-        else return s[1] + (inside ? -config.handleWidth : 0)
-      })
-
-    this.handleLines
-      .attr('transform', d => {
-        if (!s) return null
-        const west = d.type === BrushDirection.West
-        const inside = config.handlePosition === Arrangement.Inside
-        return `translate(${west
-          ? s[0] - (-1) ** Number(inside) * config.handleWidth / 2
-          : s[1] + (-1) ** Number(inside) * config.handleWidth / 2},0)`
-      })
-  }
-
-  _onBrush (event: D3BrushEvent<Datum>): void {
-    const { config } = this
-    const xScale = this.xScale
-    const xRange = [0, this._width]
-    const s = (event?.selection || xRange) as [number, number]
-    const userDriven = !!event?.sourceEvent
-    // Handle edge cases:
-    // (event?.selection === null) happens when user clicks to reset the selection
-    // (s?.[0] === s?.[1]) happens when user drags the selection out of range
-    if (userDriven && (
-      (event?.selection === null) || // happens when user clicks to reset the selection
-      (s?.[0] === s?.[1]) || // happens when user drags the selection out of range
-      (s?.[0] < xRange[0]) || //
-      (s?.[0] > xRange[1]) || // happens when you drag the brush and the domain updates
-      (s?.[1] < xRange[0]) || // to a smaller one and brush goes out of range
-      (s?.[1] > xRange[1]) //
-    )) {
-      this.brush.call(this.brushBehaviour.move, xRange) // Will trigger the 'brush end' callback with `range`
-      return
-    }
-
-    // When you reset selection by clicking on a non-selected brush area, D3 triggers the brush event twice.
-    // The first call will have equal selection coordinates (e.g. [441, 441]), the second call will have the full range (e.g. [0, 700]).
-    // To avoid unnecessary render from the first call we skip it
-    if (s[0] !== s[1] && isNumber(s[0]) && isNumber(s[1])) {
-      // We save the X scale range and set it to the available horizontal space to invert the selection correctly
-      const xScaleRange = xScale.range()
-      xScale.range(xRange)
-      const selectedDomain = s.map(n => +xScale.invert(n)) as [number, number]
-
-      if (userDriven) {
-        // Constraint the selection if configured
-        const xDomain = xScale.domain() as [number, number]
-        const xDomainLength = Math.abs(xDomain[1] - xDomain[0])
-        const selectionLength = Math.abs(selectedDomain[1] - selectedDomain[0])
-
-        if (config.selectionMinLength >= xDomainLength) {
-          console.warn('Unovis | Brush: Configured `selectionMinLength` is bigger than the brush domain')
-        }
-
-        if ((selectionLength < config.selectionMinLength) && (config.selectionMinLength < xDomainLength)) {
-          const selection = config.selection ?? this._selection
-          const range = [xScale(selection[0]), xScale(selection[1])] as [number, number]
-          this.brush.call(this.brushBehaviour.move, range) // Will trigger the 'brush end' callback with `range`
-          // Restore the X scale range
-          xScale.range(xScaleRange)
-          return
-        } else {
-          this._selection = selectedDomain
-          // Restore the X scale range
-          xScale.range(xScaleRange)
-        }
-      }
-
-      this._updateSelection(s)
-      if (!this._firstRender) config.onBrush(selectedDomain, event, userDriven)
-    }
-  }
-
-  _onBrushStart (event: D3BrushEvent<Datum>): void {
-    const { config } = this
-
-    this._onBrush(event)
-    if (!this._firstRender) config.onBrushStart(this._selection, event, !!event?.sourceEvent)
-  }
-
-  _onBrushMove (event: D3BrushEvent<Datum>): void {
-    const { config } = this
-
-    this._onBrush(event)
-    if (!this._firstRender) config.onBrushMove(this._selection, event, !!event?.sourceEvent)
-  }
-
-  _onBrushEnd (event: D3BrushEvent<Datum>): void {
-    const { config } = this
-
-    this._onBrush(event)
-    if (!this._firstRender) config.onBrushEnd(this._selection, event, !!event?.sourceEvent)
-  }
-}

package/src/components/brush/types.ts

@@ -1,8 +0,0 @@
-export type BrushHandleType = {
-  type: BrushDirection;
-}
-
-export enum BrushDirection {
-  West = 'w', // D3 defines brush directions as 'w', 'e', ...
-  East = 'e',
-}