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

package/src/components/stacked-bar/index.ts

@@ -1,267 +0,0 @@
-import { min, max } from 'd3-array'
-
-// Core
-import { XYComponentCore } from 'core/xy-component'
-
-// Utils
-import { isNumber, isArray, isEmpty, clamp, getStackedExtent, getString, getNumber, getStackedData, getExtent } from 'utils/data'
-import { roundedRectPath } from 'utils/path'
-import { smartTransition } from 'utils/d3'
-import { getColor } from 'utils/color'
-
-// Types
-import { ContinuousScale } from 'types/scale'
-import { NumericAccessor } from 'types/accessor'
-import { Spacing } from 'types/spacing'
-import { Orientation } from 'types/position'
-
-// Local Types
-import { StackedBarDataRecord } from './types'
-
-// Config
-import { StackedBarConfig, StackedBarConfigInterface } from './config'
-
-// Styles
-import * as s from './style'
-
-export class StackedBar<Datum> extends XYComponentCore<Datum, StackedBarConfig<Datum>, StackedBarConfigInterface<Datum>> {
-  static selectors = s
-  config: StackedBarConfig<Datum> = new StackedBarConfig()
-  getAccessors = (): NumericAccessor<Datum>[] => (isArray(this.config.y) ? this.config.y : [this.config.y])
-  stacked = true
-  events = {}
-  private _prevNegative: boolean[] | undefined // To help guessing the bar direction when an accessor was set to null or 0
-  private _barData: Datum[] = []
-
-  constructor (config?: StackedBarConfigInterface<Datum>) {
-    super()
-    if (config) this.config.init(config)
-  }
-
-  get bleed (): Spacing {
-    this._barData = this._getVisibleData()
-    if (this._barData.length === 0) return { top: 0, bottom: 0, left: 0, right: 0 }
-
-    // By default, horizontal orientation is "flipped", i.e. the `yDirection` of `XYContainer` is set to `Direction.North`
-    const isHorizontalAndFlipped = !this.isVertical() && (this.dataScale.range()[0] > this.dataScale.range()[1])
-    const dataDomain = this.dataScale.domain()
-    const halfGroupWidth = this._getBarWidth() / 2
-
-    const dataScaleValues = this._barData.map((d, i) => getNumber(d, this.config.x, i))
-    const firstDataValue = min(dataScaleValues)
-    const lastDataValue = max(dataScaleValues)
-    const firstValuePx = this.dataScale(firstDataValue)
-    const lastValuePx = this.dataScale(lastDataValue)
-
-    const dataDomainRequiredStart = this.dataScale.invert(firstValuePx + (isHorizontalAndFlipped ? halfGroupWidth : -halfGroupWidth))
-    const dataDomainRequiredEnd = this.dataScale.invert(lastValuePx + (isHorizontalAndFlipped ? -halfGroupWidth : halfGroupWidth))
-    const bleedPxStart = dataDomainRequiredStart <= dataDomain[0] ? this.dataScale(dataDomain[0]) - this.dataScale(dataDomainRequiredStart) : 0
-    const bleedPxEnd = dataDomainRequiredEnd > dataDomain[1] ? this.dataScale(dataDomainRequiredEnd) - this.dataScale(dataDomain[1]) : 0
-
-    return {
-      top: this.isVertical() ? 0 : (isHorizontalAndFlipped ? -bleedPxEnd : bleedPxStart),
-      bottom: this.isVertical() ? 0 : (isHorizontalAndFlipped ? -bleedPxStart : bleedPxEnd),
-      left: this.isVertical() ? bleedPxStart : 0,
-      right: this.isVertical() ? bleedPxEnd : 0,
-    }
-  }
-
-  private get dataScale (): ContinuousScale {
-    return this.isVertical() ? this.xScale : this.yScale
-  }
-
-  private get valueScale (): ContinuousScale {
-    return this.isVertical() ? this.yScale : this.xScale
-  }
-
-  private isVertical (): boolean {
-    return this.config.orientation === Orientation.Vertical
-  }
-
-  _render (customDuration?: number): void {
-    const { config } = this
-    const duration = isNumber(customDuration) ? customDuration : config.duration
-
-    const yAccessors = this.getAccessors()
-    const stacked = getStackedData(this._barData, 0, yAccessors, this._prevNegative)
-    this._prevNegative = stacked.map(s => !!s.negative)
-
-    const barGroups = this.g
-      .selectAll<SVGGElement, Datum>(`.${s.barGroup}`)
-      .data(this._barData, (d, i) => `${getString(d, config.id, i) ?? i}`)
-
-    const getBarGroupsTransform = (d: Datum, i: number): string => {
-      const v = this.dataScale(getNumber(d, config.x, i))
-      const x = this.isVertical() ? v : 0
-      const y = this.isVertical() ? 0 : v
-      return `translate(${x},${y})`
-    }
-
-    const barGroupsEnter = barGroups.enter().append('g')
-      .attr('class', s.barGroup)
-      .attr('transform', getBarGroupsTransform)
-      .style('opacity', 1)
-
-    const barGroupsMerged = barGroupsEnter.merge(barGroups)
-    smartTransition(barGroupsMerged, duration)
-      .attr('transform', getBarGroupsTransform)
-      .style('opacity', 1)
-
-    const barGroupExit = barGroups.exit()
-      .attr('class', s.barGroupExit)
-
-    smartTransition(barGroupExit, duration)
-      .style('opacity', 0)
-      .remove()
-
-    // Animate bars from exiting groups going down
-    smartTransition(barGroupExit.selectAll(`.${s.bar}`), duration)
-      .attr('transform', this.isVertical()
-        ? `translate(0,${this._height / 3})`
-        : `translate(${this._width / 6},0)`
-      )
-
-    // Render Bars
-    const bars = barGroupsMerged
-      .selectAll<SVGPathElement, StackedBarDataRecord<Datum>>(`.${s.bar}`)
-      .data((d, j) => stacked.map((s) =>
-        ({ ...d, _stacked: s[j], _negative: s.negative, _ending: s.ending }))
-      )
-
-    const barsEnter = bars.enter().append('path')
-      .attr('class', s.bar)
-      .attr('d', (d, j) => this._getBarPath(d, j, true))
-      .style('fill', (d, j) => getColor(d, config.color, j))
-
-    const barsMerged = barsEnter.merge(bars)
-
-    smartTransition(barsMerged, duration)
-      .attr('d', (d, j) => this._getBarPath(d, j))
-      .style('fill', (d, j) => getColor(d, config.color, j))
-      .style('cursor', (d, j) => getString(d, config.cursor, j))
-
-    smartTransition(bars.exit(), duration)
-      .style('opacity', 0)
-      .remove()
-  }
-
-  _getBarWidth (): number {
-    const { config, datamodel: { data } } = this
-    if (isEmpty(data)) return 0
-    if (config.barWidth) return min([config.barWidth, config.barMaxWidth])
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const isOrdinal = this.dataScale.bandwidth
-    const domain = (this.dataScale.domain ? this.dataScale.domain() : []) as number[]
-    const domainLength = isOrdinal ? domain.length : domain[1] - domain[0]
-
-    // If the dataStep property is provided the amount of data elements is calculates as domainLength / dataStep
-    //   otherwise we get the number of data elements within the domain range
-    // Or if the scale is ordinal we use data.length
-    let dataSize = (1 + domainLength / config.dataStep) ||
-        (!isOrdinal && data.filter((d, i) => {
-          const value = getNumber(d, config.x, i)
-          return (value >= domain[0]) && (value <= domain[1])
-        }).length) ||
-        data.length
-
-    // We increase the dataSize by 1 to take into account possible additional domain space
-    if (!isOrdinal && dataSize >= 2) dataSize += 1
-
-    const c = dataSize < 2 ? 1 : 1 - config.barPadding
-    const barWidth = c * (this.isVertical() ? this._width : this._height) / dataSize
-
-    return min([barWidth, config.barMaxWidth])
-  }
-
-  _getVisibleData (): Datum[] {
-    const { config, datamodel: { data } } = this
-
-    const groupWidth = this._getBarWidth()
-    const halfGroupWidthPx = data.length < 2 ? 0 : groupWidth / 2
-
-    const scale = this.dataScale
-    const halfGroupWidth = Math.abs((scale.invert(halfGroupWidthPx) as number) - (scale.invert(0) as number))
-    const filtered = data?.filter((d, i) => {
-      const v = getNumber(d, config.x, i)
-      const domain: number[] | Date[] = scale.domain()
-      const domainMin = +domain[0]
-      const domainMax = +domain[1]
-      return (v >= (domainMin - halfGroupWidth)) && (v <= (domainMax + halfGroupWidth))
-    })
-
-    return filtered
-  }
-
-  _getBarPath (d: StackedBarDataRecord<Datum>, accessorIndex: number, isEntering = false): string {
-    const { config } = this
-    const yAccessors = this.getAccessors()
-    const barWidth = this._getBarWidth()
-
-    const isNegative = d._negative
-    const isEnding = d._ending // The most top bar or, if the value is negative, the most bottom bar
-    // Todo: Find a way to pass the datum index to `getNumber` below
-    const value = getNumber(d, yAccessors[accessorIndex])
-
-    const height = isEntering ? 0 : Math.abs(this.valueScale(d._stacked[0]) - this.valueScale(d._stacked[1]))
-    const h = !isEntering && config.barMinHeight1Px && (height < 1) && isFinite(value) && (value !== config.barMinHeightZeroValue) ? 1 : height
-    const y = isEntering
-      ? this.valueScale(0)
-      : this.valueScale(isNegative ? d._stacked[0] : d._stacked[1]) - (height < 1 && config.barMinHeight1Px ? 1 : 0)
-
-    const x = -barWidth / 2
-    const width = barWidth
-
-    const cornerRadius = config.roundedCorners
-      ? isNumber(config.roundedCorners) ? +config.roundedCorners : width / 2
-      : 0
-    const cornerRadiusClamped = clamp(cornerRadius, 0, Math.min(height, width) / 2)
-    const isNorthDirected = this.yScale.range()[0] > this.yScale.range()[1]
-
-    return roundedRectPath({
-      x: this.isVertical() ? x : y - h,
-      y: this.isVertical() ? y + (isNorthDirected ? 0 : -h) : x,
-      w: this.isVertical() ? width : h,
-      h: this.isVertical() ? h : width,
-      tl: isEnding && (this.isVertical()
-        ? (!isNegative && isNorthDirected) || (isNegative && !isNorthDirected)
-        : isNegative
-      ),
-      tr: isEnding && (this.isVertical()
-        ? (!isNegative && isNorthDirected) || (isNegative && !isNorthDirected)
-        : !isNegative
-      ),
-      br: isEnding && (this.isVertical()
-        ? (isNegative && isNorthDirected) || (!isNegative && !isNorthDirected)
-        : !isNegative
-      ),
-      bl: isEnding && (this.isVertical()
-        ? (isNegative && isNorthDirected) || (!isNegative && !isNorthDirected)
-        : isNegative
-      ),
-      r: cornerRadiusClamped,
-    })
-  }
-
-  getValueScaleExtent (scaleByVisibleData: boolean): number[] {
-    const { datamodel } = this
-    const yAccessors = this.getAccessors()
-
-    const data = scaleByVisibleData ? this._getVisibleData() : datamodel.data
-    return getStackedExtent(data, ...yAccessors)
-  }
-
-  getDataScaleExtent (): number[] {
-    const { config, datamodel } = this
-    return getExtent(datamodel.data, config.x)
-  }
-
-  getYDataExtent (scaleByVisibleData: boolean): number[] {
-    return this.isVertical() ? this.getValueScaleExtent(scaleByVisibleData) : this.getDataScaleExtent()
-  }
-
-  getXDataExtent (): number[] {
-    return this.isVertical() ? this.getDataScaleExtent() : this.getValueScaleExtent(false)
-  }
-}

package/src/components/stacked-bar/types.ts

@@ -1,5 +0,0 @@
-export type StackedBarDataRecord<D> = D & {
-  _stacked: [number, number];
-  _negative: boolean;
-  _ending: boolean;
-}

package/src/components/timeline/config.ts

@@ -1,49 +0,0 @@
-import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
-
-// Types
-import { WithOptional } from 'types/misc'
-import { NumericAccessor, StringAccessor } from 'types/accessor'
-
-export interface TimelineConfigInterface<Datum> extends WithOptional<XYComponentConfigInterface<Datum>, 'y'> {
-  /** Width of the timeline items. Default: `8` */
-  lineWidth?: NumericAccessor<Datum>;
-  /** Display rounded ends for timeline items. Default: `true` */
-  lineCap?: boolean;
-  /** Timeline row height. Default: `22` */
-  rowHeight?: number;
-  /** Timeline item length accessor function. Default: `d => d.length` */
-  length?: NumericAccessor<Datum>;
-  /** Timeline item type accessor function. Records of one type will be plotted in one row. Default: `d => d.type` */
-  type?: StringAccessor<Datum>;
-  /** Configurable Timeline item cursor when hovering over. Default: `null` */
-  cursor?: StringAccessor<Datum>;
-  /** Show item type labels when set to `true`. Default: `false` */
-  showLabels?: boolean;
-  /** Fixed label width in pixels. Labels longer than the specified value will be trimmed. Default: `undefined` */
-  labelWidth?: number;
-  /** Maximum label width in pixels. Labels longer than the specified value will be trimmed. Default: `120` */
-  maxLabelWidth?: number;
-  /** Alternating row colors. Default: `true` */
-  alternatingRowColors?: boolean;
-  /** Scrolling callback function: `(scrollTop: number) => void`. Default: `undefined` */
-  onScroll?: (scrollTop: number) => void;
-  /** Sets the minimum line length to 1 pixel for better visibility of small values. Default: `false` */
-  showEmptySegments?: boolean;
-}
-
-export class TimelineConfig<Datum> extends XYComponentConfig<Datum> implements TimelineConfigInterface<Datum> {
-  lineWidth = 8
-  lineCap = false
-  rowHeight = 22
-  // eslint-disable-next-line dot-notation
-  length: NumericAccessor<Datum> = d => d['length']
-  // eslint-disable-next-line dot-notation
-  type: StringAccessor<Datum> = d => d['type']
-  cursor = null
-  labelWidth = undefined
-  showLabels = false
-  maxLabelWidth = 120
-  alternatingRowColors = true
-  onScroll = undefined
-  showEmptySegments = false
-}

package/src/components/timeline/index.ts

@@ -1,302 +0,0 @@
-import { select, Selection } from 'd3-selection'
-import { Transition } from 'd3-transition'
-import { scaleOrdinal, ScaleOrdinal } from 'd3-scale'
-import { drag, D3DragEvent } from 'd3-drag'
-import { max } from 'd3-array'
-
-// Core
-import { XYComponentCore } from 'core/xy-component'
-
-// Utils
-import { isNumber, unique, arrayOfIndices, getMin, getMax, getString, getNumber } from 'utils/data'
-import { smartTransition } from 'utils/d3'
-import { getColor } from 'utils/color'
-import { trimSVGText } from 'utils/text'
-
-// Config
-import { TimelineConfig, TimelineConfigInterface } from './config'
-
-// Styles
-import * as s from './style'
-
-export class Timeline<Datum> extends XYComponentCore<Datum, TimelineConfig<Datum>, TimelineConfigInterface<Datum>> {
-  static selectors = s
-  config: TimelineConfig<Datum> = new TimelineConfig()
-  events = {
-    [Timeline.selectors.rows]: {
-      wheel: this._onMouseWheel.bind(this),
-    },
-    [Timeline.selectors.line]: {
-      wheel: this._onMouseWheel.bind(this),
-    },
-  }
-
-  private _background: Selection<SVGRectElement, unknown, SVGGElement, unknown>
-  private _rowsGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
-  private _linesGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
-  private _labelsGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
-  private _scrollBarGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>
-  private _scrollBarBackground: Selection<SVGRectElement, unknown, SVGGElement, unknown>
-  private _scrollBarHandle: Selection<SVGRectElement, unknown, SVGGElement, unknown>
-  private _scrollBarWidth = 5
-  private _scrollDistance = 0
-  private _scrollBarMargin = 5
-  private _maxScroll = 0
-  private _scrollbarHeight = 0
-  private _labelMargin = 5
-
-  constructor (config?: TimelineConfigInterface<Datum>) {
-    super()
-    if (config) this.config.init(config)
-
-    // Invisible background rect to track events
-    this._background = this.g.append('rect').attr('class', s.background)
-
-    // Group for content
-    this._rowsGroup = this.g.append('g').attr('class', s.rows)
-    this._linesGroup = this.g.append('g').attr('class', s.lines)
-    this._labelsGroup = this.g.append('g').attr('class', s.labels)
-    this._scrollBarGroup = this.g.append('g').attr('class', s.scrollbar)
-
-    // Scroll bar
-    this._scrollBarBackground = this._scrollBarGroup.append('rect')
-      .attr('class', s.scrollbarBackground)
-
-    this._scrollBarHandle = this._scrollBarGroup.append('rect')
-      .attr('class', s.scrollbarHandle)
-
-    // Set up scrollbar drag event
-    const dragBehaviour = drag<SVGRectElement, unknown>()
-      .on('drag', this._onScrollbarDrag.bind(this))
-
-    this._scrollBarHandle.call(dragBehaviour)
-  }
-
-  get bleed (): { top: number; bottom: number; left: number; right: number } {
-    const { config, datamodel: { data } } = this
-
-    // We calculate the longest label width to set the bleed values accordingly
-    let labelsBleed = 0
-    if (config.showLabels) {
-      if (config.labelWidth) labelsBleed = config.labelWidth + this._labelMargin
-      else {
-        const recordLabels = this._getRecordLabels(data)
-        const longestLabel = recordLabels.reduce((acc, val) => acc.length > val.length ? acc : val, '')
-        const label = this._labelsGroup.append('text')
-          .attr('class', s.label)
-          .text(longestLabel)
-          .call(trimSVGText, config.maxLabelWidth)
-        const labelWidth = label.node().getBBox().width
-        this._labelsGroup.empty()
-
-        const tolerance = 1.15 // Some characters are wider than others so we add a little of extra space to take that into account
-        labelsBleed = labelWidth ? tolerance * labelWidth + this._labelMargin : 0
-      }
-    }
-
-    const maxLineWidth = this._getMaxLineWidth()
-    return {
-      top: 0,
-      bottom: 0,
-      left: maxLineWidth / 2 + labelsBleed,
-      right: maxLineWidth / 2 + this._scrollBarWidth + this._scrollBarMargin,
-    }
-  }
-
-  _render (customDuration?: number): void {
-    super._render(customDuration)
-    const { config, datamodel: { data } } = this
-    const duration = isNumber(customDuration) ? customDuration : config.duration
-    const xRange = this.xScale.range()
-    const yRange = this.yScale.range()
-    const yStart = Math.min(...yRange)
-    const yHeight = Math.abs(yRange[1] - yRange[0])
-    const maxLineWidth = this._getMaxLineWidth()
-    const recordLabels = this._getRecordLabels(data)
-    const recordLabelsUnique = unique(recordLabels)
-    const numUniqueRecords = recordLabelsUnique.length
-
-    // Ordinal scale to handle records on the same type
-    const ordinalScale: ScaleOrdinal<string, number> = scaleOrdinal()
-    ordinalScale.range(arrayOfIndices(numUniqueRecords))
-
-    // Invisible Background rect to track events
-    this._background
-      .attr('width', this._width)
-      .attr('height', this._height)
-      .attr('opacity', 0)
-
-    // Labels
-    const labels = this._labelsGroup.selectAll<SVGTextElement, string>(`.${s.label}`)
-      .data(config.showLabels ? recordLabelsUnique : [])
-
-    const labelsEnter = labels.enter().append('text')
-      .attr('class', s.label)
-
-    labelsEnter.merge(labels)
-      .attr('x', xRange[0] - maxLineWidth / 2 - this._labelMargin)
-      .attr('y', (label, i) => yStart + (ordinalScale(label) + 0.5) * config.rowHeight)
-      .text(label => label)
-      .each((label, i, els) => {
-        trimSVGText(select(els[i]), config.labelWidth || config.maxLabelWidth)
-      })
-
-    labels.exit().remove()
-
-    // Row background rects
-    const xStart = xRange[0]
-    const numRows = Math.max(Math.floor(yHeight / config.rowHeight), numUniqueRecords)
-    const recordTypes: (string | undefined)[] = Array(numRows).fill(null).map((_, i) => recordLabelsUnique[i])
-    const rects = this._rowsGroup.selectAll<SVGRectElement, number>(`.${s.row}`)
-      .data(recordTypes)
-
-    const rectsEnter = rects.enter().append('rect')
-      .attr('class', s.row)
-
-    rectsEnter.merge(rects)
-      .classed(s.rowOdd, config.alternatingRowColors ? (_, i) => !(i % 2) : null)
-      .attr('x', xStart - maxLineWidth / 2)
-      .attr('width', xRange[1] - xStart + maxLineWidth)
-      .attr('y', (_, i) => yStart + i * config.rowHeight)
-      .attr('height', config.rowHeight)
-
-    rects.exit().remove()
-
-    // Lines
-    const lines = this._linesGroup.selectAll<SVGRectElement, Datum>(`.${s.line}`)
-      .data(data, (d: Datum, i) => `${getString(d, config.id, i) ?? i}`)
-    const linesEnter = lines.enter().append('rect')
-      .attr('class', s.line)
-      .classed(s.rowOdd, config.alternatingRowColors
-        ? (d, i) => !(recordLabelsUnique.indexOf(this._getRecordType(d, i)) % 2)
-        : null)
-      .style('fill', (d, i) => getColor(d, config.color, i))
-      .attr('transform', 'translate(0, 10)')
-      .style('opacity', 0)
-    this._positionLines(linesEnter, ordinalScale)
-
-    const linesMerged = smartTransition(linesEnter.merge(lines), duration)
-      .style('fill', (d, i) => getColor(d, config.color, ordinalScale(this._getRecordType(d, i))))
-      .attr('transform', 'translate(0, 0)')
-      .style('cursor', (d, i) => getString(d, config.cursor, i))
-      .style('opacity', 1)
-
-    this._positionLines(linesMerged, ordinalScale)
-
-    smartTransition(lines.exit(), duration)
-      .style('opacity', 0)
-      .remove()
-
-    // Scroll Bar
-    const contentBBox = this._rowsGroup.node().getBBox() // We determine content size using the rects group because lines are animated
-    const absoluteContentHeight = contentBBox.height
-    this._scrollbarHeight = yHeight * yHeight / absoluteContentHeight || 0
-    this._maxScroll = Math.max(absoluteContentHeight - yHeight, 0)
-
-    this._scrollBarGroup
-      .attr('transform', `translate(${this._width - this._scrollBarWidth}, ${yStart})`)
-      .attr('opacity', this._maxScroll ? 1 : 0)
-
-    this._scrollBarBackground
-      .attr('width', this._scrollBarWidth)
-      .attr('height', this._height)
-      .attr('rx', this._scrollBarWidth / 2)
-      .attr('ry', this._scrollBarWidth / 2)
-
-    this._scrollBarHandle
-      .attr('width', this._scrollBarWidth)
-      .attr('height', this._scrollbarHeight)
-      .attr('rx', this._scrollBarWidth / 2)
-      .attr('ry', this._scrollBarWidth / 2)
-
-    this._updateScrollPosition(0)
-  }
-
-  private _positionLines (
-    selection: Selection<SVGRectElement, Datum, SVGGElement, unknown> | Transition<SVGRectElement, Datum, SVGGElement, unknown>,
-    ordinalScale: ScaleOrdinal<string, number>
-  ): void {
-    const { config, xScale, yScale } = this
-    const yRange = yScale.range()
-    const yStart = Math.min(...yRange)
-
-    selection.each((d, i, elements) => {
-      const x = getNumber(d, config.x, i)
-      const y = ordinalScale(this._getRecordType(d, i)) * config.rowHeight
-      const length = getNumber(d, config.length, i) ?? 0
-
-      // Rect dimensions
-      const height = getNumber(d, config.lineWidth, i)
-      const width = xScale(x + length) - xScale(x)
-
-      if (width < 0) {
-        console.warn('Unovis | Timeline: Line segments should not have negative lengths. Setting to 0.')
-      }
-
-      select(elements[i])
-        .attr('x', xScale(x))
-        .attr('y', yStart + y + (config.rowHeight - height) / 2)
-        .attr('width', config.showEmptySegments
-          ? Math.max(config.lineCap ? height : 1, width)
-          : Math.max(0, width))
-        .attr('height', height)
-        .attr('rx', config.lineCap ? height / 2 : null)
-        .style('opacity', 1)
-    })
-  }
-
-  private _onScrollbarDrag (event: D3DragEvent<any, any, any>): void {
-    const yRange = this.yScale.range()
-    const yHeight = Math.abs(yRange[1] - yRange[0])
-    this._updateScrollPosition(event.dy * this._maxScroll / (yHeight - this._scrollbarHeight))
-  }
-
-  private _onMouseWheel (d: unknown, event: WheelEvent): void {
-    const { config } = this
-
-    this._updateScrollPosition(event?.deltaY)
-    if (this._scrollDistance > 0 && this._scrollDistance < this._maxScroll) event?.preventDefault()
-
-    config.onScroll?.(this._scrollDistance)
-
-    // Programmatically trigger a mousemove event to update Tooltip or Crosshair if they were set up
-    const e = new Event('mousemove')
-    this.element.dispatchEvent(e)
-  }
-
-  private _updateScrollPosition (diff: number): void {
-    const yRange = this.yScale.range()
-    const yHeight = Math.abs(yRange[1] - yRange[0])
-
-    this._scrollDistance += diff
-    this._scrollDistance = Math.max(0, this._scrollDistance)
-    this._scrollDistance = Math.min(this._maxScroll, this._scrollDistance)
-
-    this._linesGroup.attr('transform', `translate(0,${-this._scrollDistance})`)
-    this._rowsGroup.attr('transform', `translate(0,${-this._scrollDistance})`)
-    this._labelsGroup.attr('transform', `translate(0,${-this._scrollDistance})`)
-    const scrollBarPosition = (this._scrollDistance / this._maxScroll * (yHeight - this._scrollbarHeight)) || 0
-    this._scrollBarHandle.attr('y', scrollBarPosition)
-  }
-
-  private _getMaxLineWidth (): number {
-    const { config, datamodel: { data } } = this
-    return max(data, (d, i) => getNumber(d, config.lineWidth, i)) ?? 0
-  }
-
-  private _getRecordType (d: Datum, i: number): string {
-    return getString(d, this.config.type) || `__${i}`
-  }
-
-  private _getRecordLabels (data: Datum[]): string[] {
-    return data.map((d, i) => getString(d, this.config.type) || `${i + 1}`)
-  }
-
-  // Override the default XYComponent getXDataExtent method to take into account line lengths
-  getXDataExtent (): number[] {
-    const { config, datamodel } = this
-    const min = getMin(datamodel.data, config.x)
-    const max = getMax(datamodel.data, (d, i) => getNumber(d, config.x, i) + (getNumber(d, config.length, i) ?? 0))
-    return [min, max]
-  }
-}

package/src/components/tooltip/config.ts

@@ -1,69 +0,0 @@
-/* eslint-disable no-irregular-whitespace */
-import { Config } from 'core/config'
-import { ComponentCore } from 'core/component'
-
-// Types
-import { Position } from 'types/position'
-
-export interface TooltipConfigInterface {
-  /** An array of visualization components to interact with. Default: `[]` */
-  components?: ComponentCore<unknown>[];
-  /** Container to where the Tooltip component should be inserted. Default: `undefined` */
-  container?: HTMLElement;
-  /** Horizontal placement of the tooltip. Default: `Position.Auto` */
-  horizontalPlacement?: Position | string | undefined;
-  /** Horizontal shift of the tooltip in pixels. Default: `0` */
-  horizontalShift?: number;
-  /** Vertical placement of the tooltip. Default: `Position.Top` */
-  verticalPlacement?: Position | string | undefined;
-  /** Vertical shift of the tooltip in pixels. Default: `0` */
-  verticalShift?: number;
-  /** Defines the content of the tooltip and hovering over which elements should trigger it.
-   * An object containing properties in the following format:
-   *
-   * ```
-   * {
-   *   [selectorString]: (d: unknown) => string | HTMLElement
-   * }
-   * ```
-   * e.g.:
-   * ```
-   * {
-   *   [Area.selectors.area]: (d: AreaDatum[]) => `<div>${d.value.toString()}</div>
-   * }
-   * ```
-   */
-  triggers?: {
-    [selector: string]: (data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null;
-  };
-  /** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance
-   * by using a CSS selector. Attributes configuration object has the following structure:
-   *
-   * ```
-   * {
-   *   [attributeName]: attribute value
-   * }
-   * ```
-   * e.g.:
-   * ```
-   * {
-   *   'type': 'area-tooltip',
-   *   'value': 42
-   * }
-   * ```
-   */
-  attributes?: { [attr: string]: string | number | boolean };
-}
-
-export class TooltipConfig extends Config implements TooltipConfigInterface {
-  components: ComponentCore<unknown>[] = []
-  container = undefined
-  horizontalPlacement = Position.Auto
-  horizontalShift = 0
-  verticalPlacement = Position.Top
-  verticalShift = 0
-  attributes: { [attr: string]: string | number | boolean } = {}
-  triggers: {
-    [selector: string]: (data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null;
-  } = {}
-}