@unovis/ts 1.6.5 → 1.6.6-beta.0

package/components/scatter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/scatter/index.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { max, min } from 'd3-array'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { isNumber, getExtent, getNumber, getString, isArray, flatten, getValue } from 'utils/data'\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\n\n// Types\nimport { Spacing } from 'types/spacing'\nimport { SymbolType } from 'types/symbol'\nimport { NumericAccessor } from 'types/accessor'\nimport { Position } from 'types/position'\nimport { ContinuousScale } from 'types/scale'\n\n// Local Types\nimport { ScatterPointGroupNode, ScatterPoint } from './types'\n\n// Config\nimport { ScatterDefaultConfig, ScatterConfigInterface } from './config'\n\n// Modules\nimport { createPoints, updatePoints, removePoints } from './modules/point'\nimport { collideLabels, getEstimatedLabelBBox } from './modules/utils'\n\n// Styles\nimport * as s from './style'\n\n\nexport class Scatter<Datum> extends XYComponentCore<Datum, ScatterConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = ScatterDefaultConfig as ScatterConfigInterface<Datum>\n  public config: ScatterConfigInterface<Datum> = this._defaultConfig\n\n  events = {\n    [Scatter.selectors.point]: {\n      mouseenter: this._onPointMouseOver.bind(this),\n      mouseleave: this._onPointMouseOut.bind(this),\n    },\n  }\n\n  private _pointData: ScatterPoint<Datum>[][] = []\n  private _points: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>\n  private _sizeScale: ContinuousScale\n  private _collideLabelsAnimFrameId: ReturnType<typeof requestAnimationFrame>\n\n  constructor (config?: ScatterConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n  }\n\n  setConfig (config: ScatterConfigInterface<Datum>): void {\n    super.setConfig(config)\n    this._updateSizeScale()\n  }\n\n  setData (data: Datum[]): void {\n    super.setData(data)\n    this._updateSizeScale()\n  }\n\n  get bleed (): Spacing {\n    this._pointData = this._getOnScreenData()\n    const pointDataFlat: ScatterPoint<Datum>[] = flatten(this._pointData)\n\n    const yRangeStart = min(this.yScale.range())\n    const yRangeEnd = max(this.yScale.range())\n    const xRangeStart = this.xScale.range()[0]\n    const xRangeEnd = this.xScale.range()[1]\n\n    const fontSizePx = getCSSVariableValueInPixels('var(--vis-scatter-point-label-text-font-size)', this.element)\n\n    const extent = pointDataFlat.reduce((ext, d) => {\n      const x = this.xScale(d._point.xValue)\n      const y = this.yScale(d._point.yValue)\n      const r = d._point.sizePx / 2\n\n      ext.minX = Math.min(ext.minX, x - r)\n      ext.maxX = Math.max(ext.maxX, x + r)\n      ext.minY = Math.min(ext.minY, y - r)\n      ext.maxY = Math.max(ext.maxY, y + r)\n\n      if (d._point.label) {\n        const labelBBox = getEstimatedLabelBBox(d, d._point.labelPosition, this.xScale, this.yScale, fontSizePx)\n        ext.minX = Math.min(ext.minX, labelBBox.x)\n        ext.maxX = Math.max(ext.maxX, labelBBox.x + labelBBox.width)\n        ext.minY = Math.min(ext.minY, labelBBox.y)\n        ext.maxY = Math.max(ext.maxY, labelBBox.y + labelBBox.height)\n      }\n      return ext\n    }, {\n      minX: Number.POSITIVE_INFINITY,\n      maxX: Number.NEGATIVE_INFINITY,\n      minY: Number.POSITIVE_INFINITY,\n      maxY: Number.NEGATIVE_INFINITY,\n    })\n\n    const coeff = 1.2 // Multiplier to take into account subsequent scale range changes and shape irregularities\n    const top = extent.minY < yRangeStart ? coeff * (yRangeStart - extent.minY) : 0\n    const bottom = extent.maxY > yRangeEnd ? coeff * (extent.maxY - yRangeEnd) : 0\n    const left = extent.minX < xRangeStart ? coeff * (xRangeStart - extent.minX) : 0\n    const right = extent.maxX > xRangeEnd ? coeff * (extent.maxX - xRangeEnd) : 0\n\n    return { top, bottom, left, right }\n  }\n\n  _render (customDuration?: number): void {\n    const { config } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    // Groups\n    const pointGroups = this.g\n      .selectAll<SVGGElement, ScatterPoint<Datum>[]>(`.${s.pointGroup}`)\n      .data(this._pointData)\n\n    const pointGroupsEnter = pointGroups\n      .enter()\n      .append('g')\n      .attr('class', s.pointGroup)\n\n    const pointGroupsMerged = pointGroupsEnter.merge(pointGroups)\n    smartTransition(pointGroupsMerged, duration)\n      .style('opacity', 1)\n\n    const pointGroupExit = pointGroups.exit().attr('class', s.pointGroupExit)\n    smartTransition(pointGroupExit, duration).style('opacity', 0).remove()\n\n    // Points\n    const points = pointGroupsMerged\n      .selectAll<SVGGElement, ScatterPoint<Datum>>(`.${s.point}`)\n      .data(\n        d => d,\n        d => `${getString(d, config.id, d._point.pointIndex) ?? d._point.pointIndex}`\n      )\n\n    const pointsEnter = points.enter().append('g')\n      .attr('class', s.point)\n    createPoints(pointsEnter, this.xScale, this.yScale)\n\n    this._points = pointsEnter.merge(points)\n    updatePoints(this._points, config, this.xScale, this.yScale, duration)\n\n    removePoints(points.exit<ScatterPoint<Datum>>(), this.xScale, this.yScale, duration)\n\n    // Take care of overlapping labels\n    if (this._hasLabels()) {\n      this._resolveLabelOverlap()\n    }\n  }\n\n  private _hasLabels (): boolean {\n    // If label config is not defined, no labels will be shown\n    if (!this.config.label) return false\n\n    // Check if any point in the flattened data has a label\n    const pointDataFlat: ScatterPoint<Datum>[] = flatten(this._pointData)\n    return pointDataFlat.some(d => d._point.label)\n  }\n\n  private _resolveLabelOverlap (): void {\n    if (!this.config.labelHideOverlapping) {\n      const label = this._points.selectAll<SVGTextElement, ScatterPoint<Datum>>('text')\n      label.attr('opacity', null)\n      return\n    }\n\n    cancelAnimationFrame(this._collideLabelsAnimFrameId)\n    this._collideLabelsAnimFrameId = requestAnimationFrame(() => {\n      collideLabels(this._points, this.config, this.xScale, this.yScale)\n    })\n  }\n\n  private _updateSizeScale (): void {\n    const { config, datamodel } = this\n\n    this._sizeScale = config.sizeScale.copy()\n    this._sizeScale.domain(getExtent(datamodel.data, config.size))\n    this._sizeScale.range(config.sizeRange ?? [0, 0])\n  }\n\n  private _getOnScreenData (): ScatterPoint<Datum>[][] {\n    const { config, datamodel: { data } } = this\n\n    const xDomain = this.xScale.domain().map((d: number | Date) => +d) // Convert Date to number\n    const yDomain = this.yScale.domain().map((d: number | Date) => +d) // Convert Date to number\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n    const maxSizeValue = max<number>(flatten(yAccessors.map((y, j) => data?.map(d => getNumber(d, config.size, j)))))\n    const maxSizePx = config.sizeRange ? this._sizeScale(maxSizeValue) : maxSizeValue\n\n    const maxSizeXDomain = (this.xScale.invert(maxSizePx) as number) - (this.xScale.invert(0) as number)\n    const maxSizeYDomain = Math.abs((this.yScale.invert(maxSizePx) as number) - (this.yScale.invert(0) as number))\n\n    return yAccessors.map((y, j) => {\n      return data?.reduce<ScatterPoint<Datum>[]>((acc, d, i) => {\n        const xValue = getNumber(d, config.x, i)\n        const yValue = getNumber(d, y, j)\n        const pointSize = getNumber(d, config.size, i)\n        const pointSizeScaled = config.sizeRange ? this._sizeScale(pointSize) : pointSize\n        const pointSizeXDomain = (this.xScale.invert(pointSizeScaled) as number) - (this.xScale.invert(0) as number)\n        const pointSizeYDomain = Math.abs((this.yScale.invert(pointSizeScaled) as number) - (this.yScale.invert(0) as number))\n\n        if (\n          ((xValue - pointSizeXDomain / 2) >= (xDomain[0] - maxSizeXDomain / 2)) &&\n          ((xValue + pointSizeXDomain / 2) <= (xDomain[1] + maxSizeXDomain / 2)) &&\n          ((yValue - pointSizeYDomain / 2) >= (yDomain[0] - maxSizeYDomain / 2)) &&\n          ((yValue + pointSizeYDomain / 2) <= (yDomain[1] + maxSizeYDomain / 2))\n        ) {\n          acc.push({\n            ...d,\n            _point: {\n              xValue: xValue,\n              yValue: yValue,\n              sizePx: pointSizeScaled,\n              color: getColor(d, config.color, j),\n              strokeColor: getColor(d, config.strokeColor, j, true),\n              strokeWidthPx: getNumber(d, config.strokeWidth, j),\n              shape: getString(d, config.shape, j) as SymbolType,\n              label: getString(d, config.label, j),\n              labelColor: getColor(d, config.labelColor, j, true),\n              labelPosition: getValue(d, config.labelPosition, i) as Position,\n              cursor: getString(d, config.cursor, j),\n              groupIndex: j,\n              pointIndex: i,\n            },\n          })\n        }\n\n        return acc\n      }, []) ?? []\n    })\n  }\n\n  private _onPointMouseOver (d: ScatterPoint<Datum>, event: MouseEvent): void {\n    const point = select(event.target as SVGGElement)\n    const pointNode = point.node() as ScatterPointGroupNode | null\n    if (pointNode) pointNode._forceShowLabel = true\n\n    point.raise()\n    this._resolveLabelOverlap()\n  }\n\n  private _onPointMouseOut (d: ScatterPoint<Datum>, event: MouseEvent): void {\n    const pointNode = select(event.target as SVGGElement).node() as ScatterPointGroupNode | null\n    if (pointNode) delete pointNode._forceShowLabel\n\n    this._resolveLabelOverlap()\n  }\n}\n"],"names":["s.pointGroup","pointGroupExit","s.pointGroupExit","s.point","s"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/scatter/index.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { max, min } from 'd3-array'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { isNumber, getExtent, getNumber, getString, isArray, flatten, getValue } from 'utils/data'\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\n\n// Types\nimport { Spacing } from 'types/spacing'\nimport { SymbolType } from 'types/symbol'\nimport { NumericAccessor } from 'types/accessor'\nimport { Position } from 'types/position'\nimport { ContinuousScale } from 'types/scale'\n\n// Local Types\nimport { ScatterPointGroupNode, ScatterPoint } from './types'\n\n// Config\nimport { ScatterDefaultConfig, ScatterConfigInterface } from './config'\n\n// Modules\nimport { createPoints, updatePoints, removePoints } from './modules/point'\nimport { collideLabels, getEstimatedLabelBBox } from './modules/utils'\n\n// Styles\nimport * as s from './style'\n\n\nexport class Scatter<Datum> extends XYComponentCore<Datum, ScatterConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = ScatterDefaultConfig as ScatterConfigInterface<Datum>\n  public config: ScatterConfigInterface<Datum> = this._defaultConfig\n\n  events = {\n    [Scatter.selectors.point]: {\n      mouseenter: this._onPointMouseOver.bind(this),\n      mouseleave: this._onPointMouseOut.bind(this),\n    },\n  }\n\n  private _pointData: ScatterPoint<Datum>[][] = []\n  private _points: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>\n  private _sizeScale: ContinuousScale\n  private _collideLabelsAnimFrameId: ReturnType<typeof requestAnimationFrame>\n\n  constructor (config?: ScatterConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n  }\n\n  setConfig (config: ScatterConfigInterface<Datum>): void {\n    super.setConfig(config)\n    this._updateSizeScale()\n  }\n\n  setData (data: Datum[]): void {\n    super.setData(data)\n    this._updateSizeScale()\n  }\n\n  get bleed (): Spacing {\n    this._pointData = this._getOnScreenData()\n    const pointDataFlat: ScatterPoint<Datum>[] = flatten(this._pointData)\n\n    const yRangeStart = min(this.yScale.range())\n    const yRangeEnd = max(this.yScale.range())\n    const xRangeStart = this.xScale.range()[0]\n    const xRangeEnd = this.xScale.range()[1]\n\n    const fontSizePx = getCSSVariableValueInPixels('var(--vis-scatter-point-label-text-font-size)', this.element)\n\n    const extent = pointDataFlat.reduce((ext, d) => {\n      const x = this.xScale(d._point.xValue)\n      const y = this.yScale(d._point.yValue)\n      const r = d._point.sizePx / 2\n\n      ext.minX = Math.min(ext.minX, x - r)\n      ext.maxX = Math.max(ext.maxX, x + r)\n      ext.minY = Math.min(ext.minY, y - r)\n      ext.maxY = Math.max(ext.maxY, y + r)\n\n      if (d._point.label) {\n        const labelBBox = getEstimatedLabelBBox(d, d._point.labelPosition, this.xScale, this.yScale, fontSizePx)\n        ext.minX = Math.min(ext.minX, labelBBox.x)\n        ext.maxX = Math.max(ext.maxX, labelBBox.x + labelBBox.width)\n        ext.minY = Math.min(ext.minY, labelBBox.y)\n        ext.maxY = Math.max(ext.maxY, labelBBox.y + labelBBox.height)\n      }\n      return ext\n    }, {\n      minX: Number.POSITIVE_INFINITY,\n      maxX: Number.NEGATIVE_INFINITY,\n      minY: Number.POSITIVE_INFINITY,\n      maxY: Number.NEGATIVE_INFINITY,\n    })\n\n    const coeff = 1.2 // Multiplier to take into account subsequent scale range changes and shape irregularities\n    const top = extent.minY < yRangeStart ? coeff * (yRangeStart - extent.minY) : 0\n    const bottom = extent.maxY > yRangeEnd ? coeff * (extent.maxY - yRangeEnd) : 0\n    const left = extent.minX < xRangeStart ? coeff * (xRangeStart - extent.minX) : 0\n    const right = extent.maxX > xRangeEnd ? coeff * (extent.maxX - xRangeEnd) : 0\n\n    return { top, bottom, left, right }\n  }\n\n  _render (customDuration?: number): void {\n    const { config } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    // Groups\n    const pointGroups = this.g\n      .selectAll<SVGGElement, ScatterPoint<Datum>[]>(`.${s.pointGroup}`)\n      .data(this._pointData)\n\n    const pointGroupsEnter = pointGroups\n      .enter()\n      .append('g')\n      .attr('class', s.pointGroup)\n\n    const pointGroupsMerged = pointGroupsEnter.merge(pointGroups)\n    smartTransition(pointGroupsMerged, duration)\n      .style('opacity', 1)\n\n    const pointGroupExit = pointGroups.exit().attr('class', s.pointGroupExit)\n    smartTransition(pointGroupExit, duration).style('opacity', 0).remove()\n\n    // Points\n    const points = pointGroupsMerged\n      .selectAll<SVGGElement, ScatterPoint<Datum>>(`.${s.point}`)\n      .data(\n        d => d,\n        d => `${getString(d, config.id, d._point.pointIndex) ?? d._point.pointIndex}`\n      )\n\n    const pointsEnter = points.enter().append('g')\n      .attr('class', s.point)\n    createPoints(pointsEnter, this.xScale, this.yScale)\n\n    this._points = pointsEnter.merge(points)\n    updatePoints(this._points, config, this.xScale, this.yScale, duration)\n\n    removePoints(points.exit<ScatterPoint<Datum>>(), this.xScale, this.yScale, duration)\n\n    // Take care of overlapping labels\n    if (this._hasLabels()) {\n      this._resolveLabelOverlap()\n    }\n  }\n\n  private _hasLabels (): boolean {\n    // If label config is not defined, no labels will be shown\n    if (!this.config.label) return false\n\n    // Check if any point in the flattened data has a label\n    const pointDataFlat: ScatterPoint<Datum>[] = flatten(this._pointData)\n    return pointDataFlat.some(d => d._point.label)\n  }\n\n  private _resolveLabelOverlap (): void {\n    if (!this.config.labelHideOverlapping) {\n      const label = this._points.selectAll<SVGTextElement, ScatterPoint<Datum>>('text')\n      label.attr('opacity', null)\n      return\n    }\n\n    cancelAnimationFrame(this._collideLabelsAnimFrameId)\n    this._collideLabelsAnimFrameId = requestAnimationFrame(() => {\n      collideLabels(this._points, this.config, this.xScale, this.yScale)\n    })\n  }\n\n  private _updateSizeScale (): void {\n    const { config, datamodel } = this\n\n    this._sizeScale = config.sizeScale.copy()\n    this._sizeScale.domain(getExtent(datamodel.data, config.size))\n    this._sizeScale.range(config.sizeRange ?? [0, 0])\n  }\n\n  private _getOnScreenData (): ScatterPoint<Datum>[][] {\n    const { config, datamodel: { data } } = this\n\n    const xDomain = this.xScale.domain().map((d: number | Date) => +d) // Convert Date to number\n    const yDomain = this.yScale.domain().map((d: number | Date) => +d) // Convert Date to number\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n    const maxSizeValue = max<number>(flatten(yAccessors.map((y, j) => data?.map(d => getNumber(d, config.size, j)))))\n    const maxSizePx = config.sizeRange ? this._sizeScale(maxSizeValue) : maxSizeValue\n\n    const maxSizeXDomain = (this.xScale.invert(maxSizePx) as number) - (this.xScale.invert(0) as number)\n    const maxSizeYDomain = Math.abs((this.yScale.invert(maxSizePx) as number) - (this.yScale.invert(0) as number))\n\n    return yAccessors.map((y, j) => {\n      return data?.reduce<ScatterPoint<Datum>[]>((acc, d, i) => {\n        const xValue = getNumber(d, config.x, i)\n        const yValue = getNumber(d, y, j)\n        if (xValue == null || yValue == null) return acc\n\n        const pointSize = getNumber(d, config.size, i)\n        const pointSizeScaled = config.sizeRange ? this._sizeScale(pointSize) : pointSize\n        const pointSizeXDomain = (this.xScale.invert(pointSizeScaled) as number) - (this.xScale.invert(0) as number)\n        const pointSizeYDomain = Math.abs((this.yScale.invert(pointSizeScaled) as number) - (this.yScale.invert(0) as number))\n\n        if (\n          ((xValue - pointSizeXDomain / 2) >= (xDomain[0] - maxSizeXDomain / 2)) &&\n          ((xValue + pointSizeXDomain / 2) <= (xDomain[1] + maxSizeXDomain / 2)) &&\n          ((yValue - pointSizeYDomain / 2) >= (yDomain[0] - maxSizeYDomain / 2)) &&\n          ((yValue + pointSizeYDomain / 2) <= (yDomain[1] + maxSizeYDomain / 2))\n        ) {\n          acc.push({\n            ...d,\n            _point: {\n              xValue: xValue,\n              yValue: yValue,\n              sizePx: pointSizeScaled,\n              color: getColor(d, config.color, j),\n              strokeColor: getColor(d, config.strokeColor, j, true),\n              strokeWidthPx: getNumber(d, config.strokeWidth, j),\n              shape: getString(d, config.shape, j) as SymbolType,\n              label: getString(d, config.label, j),\n              labelColor: getColor(d, config.labelColor, j, true),\n              labelPosition: getValue(d, config.labelPosition, i) as Position,\n              cursor: getString(d, config.cursor, j),\n              groupIndex: j,\n              pointIndex: i,\n            },\n          })\n        }\n\n        return acc\n      }, []) ?? []\n    })\n  }\n\n  private _onPointMouseOver (d: ScatterPoint<Datum>, event: MouseEvent): void {\n    const point = select(event.target as SVGGElement)\n    const pointNode = point.node() as ScatterPointGroupNode | null\n    if (pointNode) pointNode._forceShowLabel = true\n\n    point.raise()\n    this._resolveLabelOverlap()\n  }\n\n  private _onPointMouseOut (d: ScatterPoint<Datum>, event: MouseEvent): void {\n    const pointNode = select(event.target as SVGGElement).node() as ScatterPointGroupNode | null\n    if (pointNode) delete pointNode._forceShowLabel\n\n    this._resolveLabelOverlap()\n  }\n}\n"],"names":["s.pointGroup","pointGroupExit","s.pointGroupExit","s.point","s"],"mappings":"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"}

package/components/timeline/config.d.ts

@@ -1,7 +1,7 @@
 import { XYComponentConfigInterface } from "../../core/xy-component/config";
 import { WithOptional } from "../../types/misc";
 import { ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from "../../types/accessor";
-import { TextAlign } from "../../types/text";
+import { TextAlign, TrimMode } from "../../types/text";
 import { Arrangement } from "../../types/position";
 import type { TimelineArrow, TimelineLineRenderState, TimelineRowIcon, TimelineRowLabel } from './types';
 export interface TimelineConfigInterface<Datum> extends WithOptional<XYComponentConfigInterface<Datum>, 'y'> {
@@ -74,6 +74,10 @@ export interface TimelineConfigInterface<Datum> extends WithOptional<XYComponent
     rowMaxLabelWidth?: number;
     /** Text alignment for labels: `TextAlign.Left`, `TextAlign.Center` or `TextAlign.Right`. Default: `TextAlign.Right` */
     rowLabelTextAlign?: TextAlign | `${TextAlign}`;
+    /** Row label trim mode when width is limited: `TrimMode.Start`, `TrimMode.Middle` or `TrimMode.End`. Default: `TrimMode.Middle` */
+    rowLabelTrimMode?: TrimMode | `${TrimMode}`;
+    /** Row label margin in pixels. Can be a single number or a `[left, right]` tuple. Default: `[0, 5]` */
+    rowLabelMargin?: number | [number, number];
     arrows?: TimelineArrow[];
     /** Control the animation by specify the initial position for new lines as [x, y]. Default: `undefined` */
     animationLineEnterPosition?: [

package/components/timeline/config.js

@@ -1,5 +1,5 @@
 import { XYComponentDefaultConfig } from '../../core/xy-component/config.js';
-import { TextAlign } from '../../types/text.js';
+import { TextAlign, TrimMode } from '../../types/text.js';
 import { Arrangement } from '../../types/position.js';
 
 const TimelineDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { id: undefined, 
@@ -8,7 +8,7 @@ const TimelineDefaultConfig = Object.assign(Object.assign({}, XYComponentDefault
     // Rows
     rowHeight: 22, alternatingRowColors: true, 
     // Row Labels
-    showLabels: false, labelWidth: undefined, maxLabelWidth: 120, showRowLabels: undefined, rowLabelFormatter: undefined, rowIcon: undefined, rowLabelStyle: undefined, rowLabelWidth: undefined, rowMaxLabelWidth: undefined, rowLabelTextAlign: TextAlign.Right, 
+    showLabels: false, labelWidth: undefined, maxLabelWidth: 120, showRowLabels: undefined, rowLabelFormatter: undefined, rowIcon: undefined, rowLabelStyle: undefined, rowLabelWidth: undefined, rowMaxLabelWidth: undefined, rowLabelTextAlign: TextAlign.Right, rowLabelTrimMode: TrimMode.Middle, rowLabelMargin: [0, 5], 
     // Arrows
     arrows: undefined, 
     // Animation

package/components/timeline/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/timeline/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\n\n// Types\nimport { WithOptional } from 'types/misc'\nimport { ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\nimport { TextAlign } from 'types/text'\nimport { Arrangement } from 'types/position'\n\n// Local Types\nimport type { TimelineArrow, TimelineLineRenderState, TimelineRowIcon, TimelineRowLabel } from './types'\n\nexport interface TimelineConfigInterface<Datum> extends WithOptional<XYComponentConfigInterface<Datum>, 'y'> {\n  // Items (Lines)\n  /** @deprecated This property has been renamed to `key` */\n  type?: StringAccessor<Datum>;\n  /** @deprecated This property has been renamed to `lineDuration` */\n  length?: NumericAccessor<Datum>;\n  /** @deprecated This property has been renamed to `lineCursor` */\n  cursor?: StringAccessor<Datum>;\n  /** Timeline item row accessor function. Records with the `lineRow` will be plotted in one row. Default: `undefined` */\n  lineRow?: StringAccessor<Datum>;\n  /** Timeline item duration accessor function. Default: `undefined`. Falls back to the deprecated `length` property */\n  lineDuration?: NumericAccessor<Datum>;\n  /** Timeline item color accessor function. Default: `d => d.color` */\n  color?: ColorAccessor<Datum>;\n  /** Width of the timeline items. Default: `8` */\n  lineWidth?: NumericAccessor<Datum>;\n  /** Display rounded ends for timeline items. Default: `true` */\n  lineCap?: boolean;\n  /** Provide a href to an SVG defined in container's `svgDefs` to display an icon at the start of the line. Default: undefined */\n  lineStartIcon?: StringAccessor<Datum>;\n  /** Line start icon color accessor function. Default: `undefined` */\n  lineStartIconColor?: StringAccessor<Datum>;\n  /** Line start icon size accessor function. Default: `undefined` */\n  lineStartIconSize?: NumericAccessor<Datum>;\n  /** Line start icon arrangement configuration. Controls how the icon is positioned relative to the line.\n   * Accepts values from the Arrangement enum: `Arrangement.Start`, `Arrangement.Middle`, `Arrangement.End` or a string equivalent.\n   * Default: `Arrangement.Inside` */\n  lineStartIconArrangement?: GenericAccessor<Arrangement | `${Arrangement}`, Datum>;\n  /** Provide a href to an SVG defined in container's `svgDefs` to display an icon at the end of the line. Default: undefined */\n  lineEndIcon?: StringAccessor<Datum>;\n  /** Line end icon color accessor function. Default: `undefined` */\n  lineEndIconColor?: StringAccessor<Datum>;\n  /** Line end icon size accessor function. Default: `undefined` */\n  lineEndIconSize?: NumericAccessor<Datum>;\n  /** Line end icon arrangement configuration. Controls how the icon is positioned relative to the line.\n   * Accepts values from the Arrangement enum: `Arrangement.Start`, `Arrangement.Middle`, `Arrangement.End` or a string equivalent.\n   * Default: `Arrangement.Inside` */\n  lineEndIconArrangement?: GenericAccessor<Arrangement | `${Arrangement}`, Datum>;\n  /** Configurable Timeline item cursor when hovering over. Default: `undefined` */\n  lineCursor?: StringAccessor<Datum>;\n  /** Sets the minimum line length to 1 pixel for better visibility of small values.\n   * When `lineCap` is set to `true`, the segment will be rendered as a circle.\n   * Default: `false` */\n  showEmptySegments?: boolean;\n  /** Center small segments when `showEmptySegments` and `lineCap` are set to `true`.\n   * Default: `true` */\n  showEmptySegmentsCorrectPosition?: boolean;\n\n  /** Timeline row height. Default: `22` */\n  rowHeight?: number;\n  /** Alternating row colors. Default: `true` */\n  alternatingRowColors?: boolean;\n\n  // Row Labels\n  /** @deprecated This property has been renamed to `showRowLabels */\n  showLabels?: boolean;\n  /** @deprecated This property has been renamed to `rowLabelWidth */\n  labelWidth?: number;\n  /** @deprecated This property has been renamed to `rowMaxLabelWidth */\n  maxLabelWidth?: number;\n\n  /** Show row labels when set to `true`. Default: `false`. Falls back to deprecated `showLabels` */\n  showRowLabels?: boolean;\n  /** Row label style as an object with the `{ [property-name]: value }` format. Default: `undefined` */\n  rowLabelStyle?: GenericAccessor<Record<string, string>, TimelineRowLabel<Datum>>;\n  /** Row label formatter function. Default: `undefined` */\n  rowLabelFormatter?: (key: string, items: Datum[], i: number) => string;\n  /** Provide an icon href to be displayed before the row label. Default: `undefined` */\n  rowIcon?: (key: string, items: Datum[], i: number) => TimelineRowIcon | undefined;\n  /** Fixed label width in pixels. Labels longer than the specified value will be trimmed. Default: `undefined`. Falls back to deprecated `labelWidth`. */\n  rowLabelWidth?: number;\n  /** Maximum label width in pixels. Labels longer than the specified value will be trimmed. Default: `undefined`. Falls back to deprecated `maxLabelWidth`. */\n  rowMaxLabelWidth?: number;\n  /** Text alignment for labels: `TextAlign.Left`, `TextAlign.Center` or `TextAlign.Right`. Default: `TextAlign.Right` */\n  rowLabelTextAlign?: TextAlign | `${TextAlign}`;\n\n  // Arrows\n  arrows?: TimelineArrow[];\n\n  // Animation\n  /** Control the animation by specify the initial position for new lines as [x, y]. Default: `undefined` */\n  animationLineEnterPosition?:\n  [number | undefined | null, number | undefined | null] |\n  ((d: Datum & TimelineLineRenderState, i: number, data: (Datum & TimelineLineRenderState)[]) => [number | undefined, number | undefined]) |\n  undefined;\n  /** Control the animation by specify the destination position for exiting lines as [x, y]. Default: `undefined` */\n  animationLineExitPosition?: [number | undefined | null, number | undefined | null] |\n  ((d: Datum & TimelineLineRenderState, i: number, data: (Datum & TimelineLineRenderState)[]) => [number | undefined, number | undefined]) |\n  undefined;\n\n  // Callbacks\n  /** Scrolling callback function: `(scrollTop: number) => void`. Default: `undefined` */\n  onScroll?: (scrollTop: number) => void;\n}\n\nexport const TimelineDefaultConfig: TimelineConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  id: undefined,\n\n  // Items (Lines)\n  cursor: undefined, // Deprecated (see above)\n  type: (d: unknown): string => (d as { type: string }).type, // Deprecated (see above)\n  length: (d: unknown): number => (d as { length: number }).length, // Deprecated (see above)\n  color: (d: unknown): string => (d as { color: string }).color,\n  lineRow: undefined,\n  lineDuration: undefined,\n  lineWidth: 8,\n  lineCap: false,\n  lineCursor: undefined,\n  showEmptySegments: false,\n  showEmptySegmentsCorrectPosition: true,\n  lineStartIcon: undefined,\n  lineStartIconColor: undefined,\n  lineStartIconSize: undefined,\n  lineStartIconArrangement: Arrangement.Inside,\n  lineEndIcon: undefined,\n  lineEndIconColor: undefined,\n  lineEndIconSize: undefined,\n  lineEndIconArrangement: Arrangement.Inside,\n\n  // Rows\n  rowHeight: 22,\n  alternatingRowColors: true,\n\n  // Row Labels\n  showLabels: false, // Deprecated (see above)\n  labelWidth: undefined, // Deprecated (see above)\n  maxLabelWidth: 120, // Deprecated (see above)\n\n  showRowLabels: undefined,\n  rowLabelFormatter: undefined,\n  rowIcon: undefined,\n  rowLabelStyle: undefined,\n  rowLabelWidth: undefined,\n  rowMaxLabelWidth: undefined,\n  rowLabelTextAlign: TextAlign.Right,\n\n  // Arrows\n  arrows: undefined,\n\n  // Animation\n  animationLineEnterPosition: undefined,\n\n  // Callbacks\n  onScroll: undefined,\n}\n"],"names":[],"mappings":";;;;MA0Ga,qBAAqB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC7B,wBAAwB,CAC3B,EAAA,EAAA,EAAE,EAAE,SAAS;;IAGb,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,CAAC,CAAU,KAAc,CAAsB,CAAC,IAAI,EAC1D,MAAM,EAAE,CAAC,CAAU,KAAc,CAAwB,CAAC,MAAM,EAChE,KAAK,EAAE,CAAC,CAAU,KAAc,CAAuB,CAAC,KAAK,EAC7D,OAAO,EAAE,SAAS,EAClB,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,SAAS,EACrB,iBAAiB,EAAE,KAAK,EACxB,gCAAgC,EAAE,IAAI,EACtC,aAAa,EAAE,SAAS,EACxB,kBAAkB,EAAE,SAAS,EAC7B,iBAAiB,EAAE,SAAS,EAC5B,wBAAwB,EAAE,WAAW,CAAC,MAAM,EAC5C,WAAW,EAAE,SAAS,EACtB,gBAAgB,EAAE,SAAS,EAC3B,eAAe,EAAE,SAAS,EAC1B,sBAAsB,EAAE,WAAW,CAAC,MAAM;;AAG1C,IAAA,SAAS,EAAE,EAAE,EACb,oBAAoB,EAAE,IAAI;;AAG1B,IAAA,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,SAAS,EACrB,aAAa,EAAE,GAAG,EAElB,aAAa,EAAE,SAAS,EACxB,iBAAiB,EAAE,SAAS,EAC5B,OAAO,EAAE,SAAS,EAClB,aAAa,EAAE,SAAS,EACxB,aAAa,EAAE,SAAS,EACxB,gBAAgB,EAAE,SAAS,EAC3B,iBAAiB,EAAE,SAAS,CAAC,KAAK;;AAGlC,IAAA,MAAM,EAAE,SAAS;;AAGjB,IAAA,0BAA0B,EAAE,SAAS;;IAGrC,QAAQ,EAAE,SAAS,EAAA;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/timeline/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-component/config'\n\n// Types\nimport { WithOptional } from 'types/misc'\nimport { ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\nimport { TextAlign, TrimMode } from 'types/text'\nimport { Arrangement } from 'types/position'\n\n// Local Types\nimport type { TimelineArrow, TimelineLineRenderState, TimelineRowIcon, TimelineRowLabel } from './types'\n\nexport interface TimelineConfigInterface<Datum> extends WithOptional<XYComponentConfigInterface<Datum>, 'y'> {\n  // Items (Lines)\n  /** @deprecated This property has been renamed to `key` */\n  type?: StringAccessor<Datum>;\n  /** @deprecated This property has been renamed to `lineDuration` */\n  length?: NumericAccessor<Datum>;\n  /** @deprecated This property has been renamed to `lineCursor` */\n  cursor?: StringAccessor<Datum>;\n  /** Timeline item row accessor function. Records with the `lineRow` will be plotted in one row. Default: `undefined` */\n  lineRow?: StringAccessor<Datum>;\n  /** Timeline item duration accessor function. Default: `undefined`. Falls back to the deprecated `length` property */\n  lineDuration?: NumericAccessor<Datum>;\n  /** Timeline item color accessor function. Default: `d => d.color` */\n  color?: ColorAccessor<Datum>;\n  /** Width of the timeline items. Default: `8` */\n  lineWidth?: NumericAccessor<Datum>;\n  /** Display rounded ends for timeline items. Default: `true` */\n  lineCap?: boolean;\n  /** Provide a href to an SVG defined in container's `svgDefs` to display an icon at the start of the line. Default: undefined */\n  lineStartIcon?: StringAccessor<Datum>;\n  /** Line start icon color accessor function. Default: `undefined` */\n  lineStartIconColor?: StringAccessor<Datum>;\n  /** Line start icon size accessor function. Default: `undefined` */\n  lineStartIconSize?: NumericAccessor<Datum>;\n  /** Line start icon arrangement configuration. Controls how the icon is positioned relative to the line.\n   * Accepts values from the Arrangement enum: `Arrangement.Start`, `Arrangement.Middle`, `Arrangement.End` or a string equivalent.\n   * Default: `Arrangement.Inside` */\n  lineStartIconArrangement?: GenericAccessor<Arrangement | `${Arrangement}`, Datum>;\n  /** Provide a href to an SVG defined in container's `svgDefs` to display an icon at the end of the line. Default: undefined */\n  lineEndIcon?: StringAccessor<Datum>;\n  /** Line end icon color accessor function. Default: `undefined` */\n  lineEndIconColor?: StringAccessor<Datum>;\n  /** Line end icon size accessor function. Default: `undefined` */\n  lineEndIconSize?: NumericAccessor<Datum>;\n  /** Line end icon arrangement configuration. Controls how the icon is positioned relative to the line.\n   * Accepts values from the Arrangement enum: `Arrangement.Start`, `Arrangement.Middle`, `Arrangement.End` or a string equivalent.\n   * Default: `Arrangement.Inside` */\n  lineEndIconArrangement?: GenericAccessor<Arrangement | `${Arrangement}`, Datum>;\n  /** Configurable Timeline item cursor when hovering over. Default: `undefined` */\n  lineCursor?: StringAccessor<Datum>;\n  /** Sets the minimum line length to 1 pixel for better visibility of small values.\n   * When `lineCap` is set to `true`, the segment will be rendered as a circle.\n   * Default: `false` */\n  showEmptySegments?: boolean;\n  /** Center small segments when `showEmptySegments` and `lineCap` are set to `true`.\n   * Default: `true` */\n  showEmptySegmentsCorrectPosition?: boolean;\n\n  /** Timeline row height. Default: `22` */\n  rowHeight?: number;\n  /** Alternating row colors. Default: `true` */\n  alternatingRowColors?: boolean;\n\n  // Row Labels\n  /** @deprecated This property has been renamed to `showRowLabels */\n  showLabels?: boolean;\n  /** @deprecated This property has been renamed to `rowLabelWidth */\n  labelWidth?: number;\n  /** @deprecated This property has been renamed to `rowMaxLabelWidth */\n  maxLabelWidth?: number;\n\n  /** Show row labels when set to `true`. Default: `false`. Falls back to deprecated `showLabels` */\n  showRowLabels?: boolean;\n  /** Row label style as an object with the `{ [property-name]: value }` format. Default: `undefined` */\n  rowLabelStyle?: GenericAccessor<Record<string, string>, TimelineRowLabel<Datum>>;\n  /** Row label formatter function. Default: `undefined` */\n  rowLabelFormatter?: (key: string, items: Datum[], i: number) => string;\n  /** Provide an icon href to be displayed before the row label. Default: `undefined` */\n  rowIcon?: (key: string, items: Datum[], i: number) => TimelineRowIcon | undefined;\n  /** Fixed label width in pixels. Labels longer than the specified value will be trimmed. Default: `undefined`. Falls back to deprecated `labelWidth`. */\n  rowLabelWidth?: number;\n  /** Maximum label width in pixels. Labels longer than the specified value will be trimmed. Default: `undefined`. Falls back to deprecated `maxLabelWidth`. */\n  rowMaxLabelWidth?: number;\n  /** Text alignment for labels: `TextAlign.Left`, `TextAlign.Center` or `TextAlign.Right`. Default: `TextAlign.Right` */\n  rowLabelTextAlign?: TextAlign | `${TextAlign}`;\n  /** Row label trim mode when width is limited: `TrimMode.Start`, `TrimMode.Middle` or `TrimMode.End`. Default: `TrimMode.Middle` */\n  rowLabelTrimMode?: TrimMode | `${TrimMode}`;\n  /** Row label margin in pixels. Can be a single number or a `[left, right]` tuple. Default: `[0, 5]` */\n  rowLabelMargin?: number | [number, number];\n\n  // Arrows\n  arrows?: TimelineArrow[];\n\n  // Animation\n  /** Control the animation by specify the initial position for new lines as [x, y]. Default: `undefined` */\n  animationLineEnterPosition?:\n  [number | undefined | null, number | undefined | null] |\n  ((d: Datum & TimelineLineRenderState, i: number, data: (Datum & TimelineLineRenderState)[]) => [number | undefined, number | undefined]) |\n  undefined;\n  /** Control the animation by specify the destination position for exiting lines as [x, y]. Default: `undefined` */\n  animationLineExitPosition?: [number | undefined | null, number | undefined | null] |\n  ((d: Datum & TimelineLineRenderState, i: number, data: (Datum & TimelineLineRenderState)[]) => [number | undefined, number | undefined]) |\n  undefined;\n\n  // Callbacks\n  /** Scrolling callback function: `(scrollTop: number) => void`. Default: `undefined` */\n  onScroll?: (scrollTop: number) => void;\n}\n\nexport const TimelineDefaultConfig: TimelineConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  id: undefined,\n\n  // Items (Lines)\n  cursor: undefined, // Deprecated (see above)\n  type: (d: unknown): string => (d as { type: string }).type, // Deprecated (see above)\n  length: (d: unknown): number => (d as { length: number }).length, // Deprecated (see above)\n  color: (d: unknown): string => (d as { color: string }).color,\n  lineRow: undefined,\n  lineDuration: undefined,\n  lineWidth: 8,\n  lineCap: false,\n  lineCursor: undefined,\n  showEmptySegments: false,\n  showEmptySegmentsCorrectPosition: true,\n  lineStartIcon: undefined,\n  lineStartIconColor: undefined,\n  lineStartIconSize: undefined,\n  lineStartIconArrangement: Arrangement.Inside,\n  lineEndIcon: undefined,\n  lineEndIconColor: undefined,\n  lineEndIconSize: undefined,\n  lineEndIconArrangement: Arrangement.Inside,\n\n  // Rows\n  rowHeight: 22,\n  alternatingRowColors: true,\n\n  // Row Labels\n  showLabels: false, // Deprecated (see above)\n  labelWidth: undefined, // Deprecated (see above)\n  maxLabelWidth: 120, // Deprecated (see above)\n\n  showRowLabels: undefined,\n  rowLabelFormatter: undefined,\n  rowIcon: undefined,\n  rowLabelStyle: undefined,\n  rowLabelWidth: undefined,\n  rowMaxLabelWidth: undefined,\n  rowLabelTextAlign: TextAlign.Right,\n  rowLabelTrimMode: TrimMode.Middle,\n  rowLabelMargin: [0, 5],\n\n  // Arrows\n  arrows: undefined,\n\n  // Animation\n  animationLineEnterPosition: undefined,\n\n  // Callbacks\n  onScroll: undefined,\n}\n"],"names":[],"mappings":";;;;MA8Ga,qBAAqB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAC7B,wBAAwB,CAC3B,EAAA,EAAA,EAAE,EAAE,SAAS;;IAGb,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,CAAC,CAAU,KAAc,CAAsB,CAAC,IAAI,EAC1D,MAAM,EAAE,CAAC,CAAU,KAAc,CAAwB,CAAC,MAAM,EAChE,KAAK,EAAE,CAAC,CAAU,KAAc,CAAuB,CAAC,KAAK,EAC7D,OAAO,EAAE,SAAS,EAClB,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,SAAS,EACrB,iBAAiB,EAAE,KAAK,EACxB,gCAAgC,EAAE,IAAI,EACtC,aAAa,EAAE,SAAS,EACxB,kBAAkB,EAAE,SAAS,EAC7B,iBAAiB,EAAE,SAAS,EAC5B,wBAAwB,EAAE,WAAW,CAAC,MAAM,EAC5C,WAAW,EAAE,SAAS,EACtB,gBAAgB,EAAE,SAAS,EAC3B,eAAe,EAAE,SAAS,EAC1B,sBAAsB,EAAE,WAAW,CAAC,MAAM;;AAG1C,IAAA,SAAS,EAAE,EAAE,EACb,oBAAoB,EAAE,IAAI;;IAG1B,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,SAAS,EACrB,aAAa,EAAE,GAAG,EAElB,aAAa,EAAE,SAAS,EACxB,iBAAiB,EAAE,SAAS,EAC5B,OAAO,EAAE,SAAS,EAClB,aAAa,EAAE,SAAS,EACxB,aAAa,EAAE,SAAS,EACxB,gBAAgB,EAAE,SAAS,EAC3B,iBAAiB,EAAE,SAAS,CAAC,KAAK,EAClC,gBAAgB,EAAE,QAAQ,CAAC,MAAM,EACjC,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;;AAGtB,IAAA,MAAM,EAAE,SAAS;;AAGjB,IAAA,0BAA0B,EAAE,SAAS;;IAGrC,QAAQ,EAAE,SAAS,EAAA;;;;"}

package/components/timeline/index.d.ts

@@ -25,9 +25,8 @@ export declare class Timeline<Datum> extends XYComponentCore<Datum, TimelineConf
     private _scrollBarMargin;
     private _maxScroll;
     private _scrollbarHeight;
-    private _labelMargin;
     private _labelWidth;
-    private _rowIconBleed;
+    private _lineIconBleed;
     private _lineBleed;
     /** We define a dedicated clipping path for this component because it needs to behave
      * differently than the regular XYContainer's clipPath */
@@ -38,6 +37,7 @@ export declare class Timeline<Datum> extends XYComponentCore<Datum, TimelineConf
     setData(data: Datum[]): void;
     get bleed(): Spacing;
     _render(customDuration?: number): void;
+    private _getRowLabelMargin;
     private _getLineLength;
     private _getLineWidth;
     private _getLineDuration;

package/components/timeline/index.js

@@ -12,7 +12,7 @@ import { guid } from '../../utils/misc.js';
 import '../../types.js';
 import { TimelineDefaultConfig } from './config.js';
 import * as style from './style.js';
-import { background, rows, arrows, lines, labels, rowIcons, scrollbar, scrollbarBackground, scrollbarHandle, label, rowIcon, row, rowOdd, lineGroup, line, lineStartIcon, lineEndIcon, arrow } from './style.js';
+import { background, rows, arrows, lines, labels, rowIcons, scrollbar, scrollbarBackground, scrollbarHandle, label, rowIcon, labelBackground, row, rowOdd, lineGroup, line, lineStartIcon, lineEndIcon, arrow } from './style.js';
 import { TIMELINE_DEFAULT_ARROW_HEAD_LENGTH, TIMELINE_DEFAULT_ARROW_HEAD_WIDTH, TIMELINE_DEFAULT_ARROW_MARGIN } from './constants.js';
 import { getIconBleed } from './utils.js';
 import { TextAlign } from '../../types/text.js';
@@ -30,6 +30,9 @@ class Timeline extends XYComponentCore {
             [Timeline.selectors.label]: {
                 wheel: this._onMouseWheel.bind(this),
             },
+            [Timeline.selectors.labelBackground]: {
+                wheel: this._onMouseWheel.bind(this),
+            },
             [Timeline.selectors.rows]: {
                 wheel: this._onMouseWheel.bind(this),
             },
@@ -42,9 +45,8 @@ class Timeline extends XYComponentCore {
         this._scrollBarMargin = 5;
         this._maxScroll = 0;
         this._scrollbarHeight = 0;
-        this._labelMargin = 5;
         this._labelWidth = 0; // Will be overridden in `get bleed ()`
-        this._rowIconBleed = [0, 0];
+        this._lineIconBleed = [0, 0];
         this._lineBleed = [0, 0];
         /** We define a dedicated clipping path for this component because it needs to behave
          * differently than the regular XYContainer's clipPath */
@@ -84,26 +86,31 @@ class Timeline extends XYComponentCore {
         super.setData(data);
     }
     get bleed() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const { config, datamodel: { data } } = this;
         const rowLabels = this._getRowLabels(data);
         const rowHeight = config.rowHeight || (this._height / (rowLabels.length || 1));
-        const hasIcons = rowLabels.some(l => l.iconHref);
-        const maxIconSize = max(rowLabels.map(l => l.iconSize || 0));
+        const hasRowIcons = rowLabels.some(l => l.iconHref);
+        const maxRowIconSize = max(rowLabels.map(l => l.iconSize || 0));
         // We calculate the longest label width to set the bleed values accordingly
         if ((_a = config.showRowLabels) !== null && _a !== void 0 ? _a : config.showLabels) {
-            if ((_b = config.rowLabelWidth) !== null && _b !== void 0 ? _b : config.labelWidth)
-                this._labelWidth = ((_c = config.rowLabelWidth) !== null && _c !== void 0 ? _c : config.labelWidth) + this._labelMargin;
+            const [marginLeft, marginRight] = this._getRowLabelMargin();
+            if ((_b = config.rowLabelWidth) !== null && _b !== void 0 ? _b : config.labelWidth) {
+                // We add a little of extra space to take into account the fact that `trimSVGText` is not always precise
+                const tolerance = 1.1;
+                this._labelWidth = tolerance * ((_c = config.rowLabelWidth) !== null && _c !== void 0 ? _c : config.labelWidth) + marginLeft + marginRight;
+            }
             else {
-                const longestLabel = rowLabels.reduce((longestLabel, l) => longestLabel.formattedLabel.length > l.formattedLabel.length ? longestLabel : l, rowLabels[0]);
-                const label$1 = this._labelsGroup.append('text')
-                    .attr('class', label)
-                    .text((longestLabel === null || longestLabel === void 0 ? void 0 : longestLabel.formattedLabel) || '')
-                    .call(trimSVGText, (_d = config.rowMaxLabelWidth) !== null && _d !== void 0 ? _d : config.maxLabelWidth);
-                const labelWidth = label$1.node().getBBox().width;
-                label$1.remove();
-                const tolerance = 1.15; // Some characters are wider than others so we add a little of extra space to take that into account
-                this._labelWidth = labelWidth ? tolerance * labelWidth + this._labelMargin : 0;
+                const labels = rowLabels.map(l => {
+                    var _a;
+                    return this._labelsGroup.append('text')
+                        .attr('class', label)
+                        .text(l.formattedLabel || '')
+                        .call(trimSVGText, (_a = config.rowMaxLabelWidth) !== null && _a !== void 0 ? _a : config.maxLabelWidth, config.rowLabelTrimMode);
+                });
+                const labelWidth = max(labels.map(l => l.node().getBBox().width)) || 0;
+                labels.forEach(l => l.remove());
+                this._labelWidth = labelWidth ? labelWidth + marginLeft + marginRight : 0;
             }
         }
         // There can be multiple start / end items with the same timestamp, so we need to find the shortest one
@@ -136,23 +143,23 @@ class Timeline extends XYComponentCore {
         }
         this._lineBleed = lineBleed;
         // Icon bleed
-        const iconBleed = [0, 0];
+        const lineIconBleed = [0, 0];
         if (config.lineStartIcon) {
-            iconBleed[0] = max(data, (d, i) => getIconBleed(d, i, config.lineStartIcon, config.lineStartIconSize, config.lineStartIconArrangement, rowHeight)) || 0;
+            lineIconBleed[0] = max(data, (d, i) => getIconBleed(d, i, config.lineStartIcon, config.lineStartIconSize, config.lineStartIconArrangement, rowHeight)) || 0;
         }
         if (config.lineEndIcon) {
-            iconBleed[1] = max(data, (d, i) => getIconBleed(d, i, config.lineEndIcon, config.lineEndIconSize, config.lineEndIconArrangement, rowHeight)) || 0;
+            lineIconBleed[1] = max(data, (d, i) => getIconBleed(d, i, config.lineEndIcon, config.lineEndIconSize, config.lineEndIconArrangement, rowHeight)) || 0;
         }
-        this._rowIconBleed = iconBleed;
+        this._lineIconBleed = lineIconBleed;
         return {
             top: 0,
             bottom: 0,
-            left: this._labelWidth + iconBleed[0] + (hasIcons ? maxIconSize : 0) + lineBleed[0],
-            right: this._scrollBarWidth + this._scrollBarMargin + iconBleed[1] + lineBleed[1],
+            left: this._labelWidth + lineIconBleed[0] + (hasRowIcons ? maxRowIconSize : 0) + lineBleed[0],
+            right: this._scrollBarWidth + this._scrollBarMargin + lineIconBleed[1] + lineBleed[1],
         };
     }
     _render(customDuration) {
-        var _a;
+        var _a, _b, _c;
         super._render(customDuration);
         const { config, datamodel: { data } } = this;
         const duration = isNumber(customDuration) ? customDuration : config.duration;
@@ -181,6 +188,7 @@ class Timeline extends XYComponentCore {
             .attr('width', l => l.iconSize)
             .attr('height', l => l.iconSize)
             .attr('y', l => yStart + (yOrdinalScale(l.label) + 0.5) * rowHeight - l.iconSize / 2)
+            .style('color', l => l.iconColor)
             .style('opacity', 0);
         smartTransition(rowIconsEnter.merge(rowIcons), duration)
             .attr('href', l => l.iconHref)
@@ -196,11 +204,28 @@ class Timeline extends XYComponentCore {
         // Labels
         const labels = this._labelsGroup.selectAll(`.${label}`)
             .data(((_a = config.showRowLabels) !== null && _a !== void 0 ? _a : config.showLabels) ? rowLabels : [], l => l === null || l === void 0 ? void 0 : l.label);
+        const [labelMarginLeft, labelMarginRight] = this._getRowLabelMargin();
         const labelOffset = config.rowLabelTextAlign === TextAlign.Center ? this._labelWidth / 2
-            : config.rowLabelTextAlign === TextAlign.Left ? this._labelWidth
-                : this._labelMargin;
-        const xStart = xRange[0] - this._rowIconBleed[0] - this._lineBleed[0];
+            : config.rowLabelTextAlign === TextAlign.Left ? this._labelWidth - labelMarginLeft
+                : labelMarginRight;
+        const xStart = xRange[0] - this._lineBleed[0] - this._lineIconBleed[0];
         const labelXStart = xStart - labelOffset;
+        // Invisible background rects covering the full label column width for pointer events
+        const labelBackgrounds = this._labelsGroup
+            .selectAll(`.${labelBackground}`)
+            .data(((_b = config.showRowLabels) !== null && _b !== void 0 ? _b : config.showLabels) ? rowLabels : [], l => l === null || l === void 0 ? void 0 : l.label);
+        const labelBackgroundsEnter = labelBackgrounds.enter().append('rect')
+            .attr('class', labelBackground)
+            .attr('x', xStart - this._labelWidth)
+            .attr('y', l => yStart + yOrdinalScale(l.label) * rowHeight)
+            .attr('width', this._labelWidth)
+            .attr('height', rowHeight);
+        labelBackgroundsEnter.merge(labelBackgrounds)
+            .attr('x', xStart - this._labelWidth)
+            .attr('y', l => yStart + yOrdinalScale(l.label) * rowHeight)
+            .attr('width', this._labelWidth)
+            .attr('height', rowHeight);
+        labelBackgrounds.exit().remove();
         const labelsEnter = labels.enter().append('text')
             .attr('class', label)
             .attr('x', labelXStart)
@@ -211,7 +236,8 @@ class Timeline extends XYComponentCore {
             .each((label, i, els) => {
             var _a, _b;
             const labelSelection = select(els[i]);
-            trimSVGText(labelSelection, ((_a = config.rowLabelWidth) !== null && _a !== void 0 ? _a : config.labelWidth) || ((_b = config.rowMaxLabelWidth) !== null && _b !== void 0 ? _b : config.maxLabelWidth));
+            const maxLabelWidth = ((_a = config.rowLabelWidth) !== null && _a !== void 0 ? _a : config.labelWidth) || ((_b = config.rowMaxLabelWidth) !== null && _b !== void 0 ? _b : config.maxLabelWidth);
+            trimSVGText(labelSelection, maxLabelWidth, config.rowLabelTrimMode);
             // Apply custom label style if it has been provided
             const customStyle = getValue(label, config.rowLabelStyle);
             if (!isPlainObject(customStyle))
@@ -229,7 +255,7 @@ class Timeline extends XYComponentCore {
             .style('opacity', 0)
             .remove();
         // Row background rects
-        const timelineWidth = xRange[1] - xRange[0] + this._rowIconBleed[0] + this._rowIconBleed[1] + this._lineBleed[0] + this._lineBleed[1];
+        const timelineWidth = xRange[1] - xRange[0] + this._lineIconBleed[0] + this._lineIconBleed[1] + this._lineBleed[0] + this._lineBleed[1];
         const numRows = Math.max(Math.floor(yHeight / rowHeight), numRowLabels);
         const recordTypes = Array(numRows).fill(null).map((_, i) => rowLabels[i]);
         const rects = this._rowsGroup.selectAll(`.${row}`)
@@ -360,12 +386,19 @@ class Timeline extends XYComponentCore {
             .attr('ry', this._scrollBarWidth / 2);
         this._updateScrollPosition(0);
         // Clip path
+        // Arrowheads can get cut off when they are too close to the edges, so we extend the clip path to account for them.
+        // TODO: In rare scenarios this can have unwanted side effects, so we might need to create a dedicated clip path for arrows.
+        const maxArrowHeadWidth = (_c = max(arrowsData !== null && arrowsData !== void 0 ? arrowsData : [], a => { var _a; return (_a = a.arrowHeadWidth) !== null && _a !== void 0 ? _a : TIMELINE_DEFAULT_ARROW_HEAD_WIDTH; })) !== null && _c !== void 0 ? _c : 0;
         const clipPathRect = this._clipPath.select('rect');
         smartTransition(clipPathRect, clipPathRect.attr('width') ? duration : 0)
-            .attr('x', xStart)
-            .attr('width', timelineWidth)
+            .attr('x', xStart - maxArrowHeadWidth / 2)
+            .attr('width', timelineWidth + maxArrowHeadWidth)
             .attr('height', this._height);
     }
+    _getRowLabelMargin() {
+        const m = this.config.rowLabelMargin;
+        return Array.isArray(m) ? m : [m, m];
+    }
     _getLineLength(d, i) {
         var _a, _b;
         const { config, xScale } = this;