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

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

@@ -0,0 +1,267 @@
+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/{components/stacked-bar/style.js → src/components/stacked-bar/style.ts}

@@ -1,9 +1,10 @@
-import { css, injectGlobal } from '@emotion/css';
+import { css, injectGlobal } from '@emotion/css'
 
-const root = css `
+export const root = css`
   label: stacked-bar-component;
-`;
-const globalStyles = injectGlobal `
+`
+
+export const globalStyles = injectGlobal`
   :root {
     --vis-stacked-bar-cursor: default;
     --vis-stacked-bar-fill-color: var(--vis-color-main);
@@ -19,8 +20,9 @@ const globalStyles = injectGlobal `
   body.theme-dark ${`.${root}`} {
     --vis-stacked-bar-stroke-color: var(--vis-dark-stacked-bar-stroke-color);
   }
-`;
-const bar = css `
+`
+
+export const bar = css`
   label: bar;
   fill: var(--vis-stacked-bar-fill-color);
   stroke: var(--vis-stacked-bar-stroke-color);
@@ -31,13 +33,12 @@ const bar = css `
     stroke-width: var(--vis-stacked-bar-hover-stroke-width);
     stroke: var(--vis-stacked-bar-hover-stroke-color);
   }
-`;
-const barGroup = css `
+`
+
+export const barGroup = css`
   label: barGroup;
-`;
-const barGroupExit = css `
-  label: barGroupExit;
-`;
+`
 
-export { bar, barGroup, barGroupExit, globalStyles, root };
-//# sourceMappingURL=style.js.map
+export const barGroupExit = css`
+  label: barGroupExit;
+`

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

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

package/src/components/timeline/config.ts

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,302 @@
+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]
+  }
+}