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

package/components/timeline/index.js

@@ -0,0 +1,244 @@
+import { select } from 'd3-selection';
+import { scaleOrdinal } from 'd3-scale';
+import { drag } from 'd3-drag';
+import { max } from 'd3-array';
+import { XYComponentCore } from '../../core/xy-component/index.js';
+import { isNumber, unique, arrayOfIndices, getString, getNumber, getMin, getMax } from '../../utils/data.js';
+import { smartTransition } from '../../utils/d3.js';
+import { getColor } from '../../utils/color.js';
+import { trimSVGText } from '../../utils/text.js';
+import { TimelineConfig } from './config.js';
+import * as style from './style.js';
+import { background, rows, lines, labels, scrollbar, scrollbarBackground, scrollbarHandle, label, row, rowOdd, line } from './style.js';
+
+class Timeline extends XYComponentCore {
+    constructor(config) {
+        super();
+        this.config = new TimelineConfig();
+        this.events = {
+            [Timeline.selectors.rows]: {
+                wheel: this._onMouseWheel.bind(this),
+            },
+            [Timeline.selectors.line]: {
+                wheel: this._onMouseWheel.bind(this),
+            },
+        };
+        this._scrollBarWidth = 5;
+        this._scrollDistance = 0;
+        this._scrollBarMargin = 5;
+        this._maxScroll = 0;
+        this._scrollbarHeight = 0;
+        this._labelMargin = 5;
+        if (config)
+            this.config.init(config);
+        // Invisible background rect to track events
+        this._background = this.g.append('rect').attr('class', background);
+        // Group for content
+        this._rowsGroup = this.g.append('g').attr('class', rows);
+        this._linesGroup = this.g.append('g').attr('class', lines);
+        this._labelsGroup = this.g.append('g').attr('class', labels);
+        this._scrollBarGroup = this.g.append('g').attr('class', scrollbar);
+        // Scroll bar
+        this._scrollBarBackground = this._scrollBarGroup.append('rect')
+            .attr('class', scrollbarBackground);
+        this._scrollBarHandle = this._scrollBarGroup.append('rect')
+            .attr('class', scrollbarHandle);
+        // Set up scrollbar drag event
+        const dragBehaviour = drag()
+            .on('drag', this._onScrollbarDrag.bind(this));
+        this._scrollBarHandle.call(dragBehaviour);
+    }
+    get bleed() {
+        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$1 = this._labelsGroup.append('text')
+                    .attr('class', label)
+                    .text(longestLabel)
+                    .call(trimSVGText, config.maxLabelWidth);
+                const labelWidth = label$1.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) {
+        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();
+        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(`.${label}`)
+            .data(config.showLabels ? recordLabelsUnique : []);
+        const labelsEnter = labels.enter().append('text')
+            .attr('class', 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 = Array(numRows).fill(null).map((_, i) => recordLabelsUnique[i]);
+        const rects = this._rowsGroup.selectAll(`.${row}`)
+            .data(recordTypes);
+        const rectsEnter = rects.enter().append('rect')
+            .attr('class', row);
+        rectsEnter.merge(rects)
+            .classed(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(`.${line}`)
+            .data(data, (d, i) => { var _a; return `${(_a = getString(d, config.id, i)) !== null && _a !== void 0 ? _a : i}`; });
+        const linesEnter = lines.enter().append('rect')
+            .attr('class', line)
+            .classed(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);
+    }
+    _positionLines(selection, ordinalScale) {
+        const { config, xScale, yScale } = this;
+        const yRange = yScale.range();
+        const yStart = Math.min(...yRange);
+        selection.each((d, i, elements) => {
+            var _a;
+            const x = getNumber(d, config.x, i);
+            const y = ordinalScale(this._getRecordType(d, i)) * config.rowHeight;
+            const length = (_a = getNumber(d, config.length, i)) !== null && _a !== void 0 ? _a : 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);
+        });
+    }
+    _onScrollbarDrag(event) {
+        const yRange = this.yScale.range();
+        const yHeight = Math.abs(yRange[1] - yRange[0]);
+        this._updateScrollPosition(event.dy * this._maxScroll / (yHeight - this._scrollbarHeight));
+    }
+    _onMouseWheel(d, event) {
+        var _a;
+        const { config } = this;
+        this._updateScrollPosition(event === null || event === void 0 ? void 0 : event.deltaY);
+        if (this._scrollDistance > 0 && this._scrollDistance < this._maxScroll)
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+        (_a = config.onScroll) === null || _a === void 0 ? void 0 : _a.call(config, 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);
+    }
+    _updateScrollPosition(diff) {
+        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);
+    }
+    _getMaxLineWidth() {
+        var _a;
+        const { config, datamodel: { data } } = this;
+        return (_a = max(data, (d, i) => getNumber(d, config.lineWidth, i))) !== null && _a !== void 0 ? _a : 0;
+    }
+    _getRecordType(d, i) {
+        return getString(d, this.config.type) || `__${i}`;
+    }
+    _getRecordLabels(data) {
+        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() {
+        const { config, datamodel } = this;
+        const min = getMin(datamodel.data, config.x);
+        const max = getMax(datamodel.data, (d, i) => { var _a; return getNumber(d, config.x, i) + ((_a = getNumber(d, config.length, i)) !== null && _a !== void 0 ? _a : 0); });
+        return [min, max];
+    }
+}
+Timeline.selectors = style;
+
+export { Timeline };
+//# sourceMappingURL=index.js.map

package/components/timeline/index.js.map

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

package/components/timeline/style.d.ts

@@ -0,0 +1,13 @@
+export declare const root: string;
+export declare const globalStyles: void;
+export declare const background: string;
+export declare const lines: string;
+export declare const line: string;
+export declare const rows: string;
+export declare const row: string;
+export declare const rowOdd: string;
+export declare const scrollbar: string;
+export declare const scrollbarHandle: string;
+export declare const scrollbarBackground: string;
+export declare const labels: string;
+export declare const label: string;

package/{src/components/timeline/style.ts → components/timeline/style.js}

@@ -1,10 +1,9 @@
-import { css, injectGlobal } from '@emotion/css'
+import { css, injectGlobal } from '@emotion/css';
 
-export const root = css`
+const root = css `
   label: timeline-component;
-`
-
-export const globalStyles = injectGlobal`
+`;
+const globalStyles = injectGlobal `
   :root {
     --vis-timeline-row-even-fill-color: #FFFFFF;
     --vis-timeline-row-odd-fill-color: #F7FAFC;
@@ -36,17 +35,14 @@ export const globalStyles = injectGlobal`
     --vis-timeline-scrollbar-color: var(--vis-dark-timeline-scrollbar-color);
     --vis-timeline-label-color: var(--vis-dark-timeline-label-color);
   }
-`
-
-export const background = css`
+`;
+const background = css `
   label: background;
-`
-
-export const lines = css`
+`;
+const lines = css `
   label: lines;
-`
-
-export const line = css`
+`;
+const line = css `
   label: line;
   fill: var(--vis-timeline-line-color);
   cursor: var(--vis-timeline-cursor);
@@ -57,46 +53,41 @@ export const line = css`
   &.odd {
     stroke: var(--vis-timeline-line-stroke-color, var(--vis-timeline-row-odd-fill-color));
   }
-`
-
-export const rows = css`
+`;
+const rows = css `
   label: rows;
-`
-
-export const row = css`
+`;
+const row = css `
   label: row;
   fill: var(--vis-timeline-row-even-fill-color);
   opacity: var(--vis-timeline-row-background-opacity);
-`
-
-export const rowOdd = css`
+`;
+const rowOdd = css `
   label: row-odd;
   fill: var(--vis-timeline-row-odd-fill-color);
-`
-
-export const scrollbar = css`
+`;
+const scrollbar = css `
   label: scroll-bar;
-`
-
-export const scrollbarHandle = css`
+`;
+const scrollbarHandle = css `
   label: scroll-bar-handle;
   fill: var(--vis-timeline-scrollbar-color);
-`
-
-export const scrollbarBackground = css`
+`;
+const scrollbarBackground = css `
   label: scroll-bar-background;
   fill: var(--vis-timeline-scrollbar-background-color);
-`
-
-export const labels = css`
+`;
+const labels = css `
   label: labels;
-`
-
-export const label = css`
+`;
+const label = css `
   label: label;
   dominant-baseline: middle;
   font-size: var(--vis-timeline-label-font-size);
   fill: var(--vis-timeline-label-color);
   text-anchor: end;
   user-select: none;
-`
+`;
+
+export { background, globalStyles, label, labels, line, lines, root, row, rowOdd, rows, scrollbar, scrollbarBackground, scrollbarHandle };
+//# sourceMappingURL=style.js.map

package/components/timeline/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/timeline/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n  label: timeline-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-timeline-row-even-fill-color: #FFFFFF;\n    --vis-timeline-row-odd-fill-color: #F7FAFC;\n    --vis-timeline-row-background-opacity: 1;\n    --vis-timeline-scrollbar-background-color: #E6E9F3;\n    --vis-timeline-scrollbar-color: #9EA7B8;\n\n    --vis-timeline-label-font-size: 12px;\n    --vis-timeline-label-color: #6C778C;\n\n    --vis-timeline-cursor: default;\n    --vis-timeline-line-color: var(--vis-color-main);\n    --vis-timeline-line-stroke-width: 0;\n    // The line stroke color variable is not defined by default\n    // to allow it to fallback to the corresponding row background color\n    /* --vis-timeline-line-stroke-color: none; */\n\n    --vis-dark-timeline-row-even-fill-color: #292B34;\n    --vis-dark-timeline-row-odd-fill-color: #333742;\n    --vis-dark-timeline-scrollbar-background-color: #292B34;\n    --vis-dark-timeline-scrollbar-color: #6C778C;\n    --vis-dark-timeline-label-color: #EFF5F8;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-timeline-row-even-fill-color: var(--vis-dark-timeline-row-even-fill-color);\n    --vis-timeline-row-odd-fill-color: var(--vis-dark-timeline-row-odd-fill-color);\n    --vis-timeline-scrollbar-background-color: var(--vis-dark-timeline-scrollbar-background-color);\n    --vis-timeline-scrollbar-color: var(--vis-dark-timeline-scrollbar-color);\n    --vis-timeline-label-color: var(--vis-dark-timeline-label-color);\n  }\n`\n\nexport const background = css`\n  label: background;\n`\n\nexport const lines = css`\n  label: lines;\n`\n\nexport const line = css`\n  label: line;\n  fill: var(--vis-timeline-line-color);\n  cursor: var(--vis-timeline-cursor);\n\n  stroke: var(--vis-timeline-line-stroke-color, var(--vis-timeline-row-even-fill-color));\n  stroke-width: var(--vis-timeline-line-stroke-width);\n\n  &.odd {\n    stroke: var(--vis-timeline-line-stroke-color, var(--vis-timeline-row-odd-fill-color));\n  }\n`\n\nexport const rows = css`\n  label: rows;\n`\n\nexport const row = css`\n  label: row;\n  fill: var(--vis-timeline-row-even-fill-color);\n  opacity: var(--vis-timeline-row-background-opacity);\n`\n\nexport const rowOdd = css`\n  label: row-odd;\n  fill: var(--vis-timeline-row-odd-fill-color);\n`\n\nexport const scrollbar = css`\n  label: scroll-bar;\n`\n\nexport const scrollbarHandle = css`\n  label: scroll-bar-handle;\n  fill: var(--vis-timeline-scrollbar-color);\n`\n\nexport const scrollbarBackground = css`\n  label: scroll-bar-background;\n  fill: var(--vis-timeline-scrollbar-background-color);\n`\n\nexport const labels = css`\n  label: labels;\n`\n\nexport const label = css`\n  label: label;\n  dominant-baseline: middle;\n  font-size: var(--vis-timeline-label-font-size);\n  fill: var(--vis-timeline-label-color);\n  text-anchor: end;\n  user-select: none;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;EAO7B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA;;;;EAIrB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;EAGxB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;EAGjC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;EAGrC;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;"}

package/components/tooltip/config.d.ts

@@ -0,0 +1,68 @@
+import { Config } from "../../core/config";
+import { ComponentCore } from "../../core/component";
+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 declare class TooltipConfig extends Config implements TooltipConfigInterface {
+    components: ComponentCore<unknown>[];
+    container: any;
+    horizontalPlacement: Position;
+    horizontalShift: number;
+    verticalPlacement: Position;
+    verticalShift: number;
+    attributes: {
+        [attr: string]: string | number | boolean;
+    };
+    triggers: {
+        [selector: string]: (data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null;
+    };
+}

package/components/tooltip/config.js

@@ -0,0 +1,20 @@
+import { Config } from '../../core/config/index.js';
+import { Position } from '../../types/position.js';
+
+/* eslint-disable no-irregular-whitespace */
+class TooltipConfig extends Config {
+    constructor() {
+        super(...arguments);
+        this.components = [];
+        this.container = undefined;
+        this.horizontalPlacement = Position.Auto;
+        this.horizontalShift = 0;
+        this.verticalPlacement = Position.Top;
+        this.verticalShift = 0;
+        this.attributes = {};
+        this.triggers = {};
+    }
+}
+
+export { TooltipConfig };
+//# sourceMappingURL=config.js.map

package/components/tooltip/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/tooltip/config.ts"],"sourcesContent":["/* eslint-disable no-irregular-whitespace */\nimport { Config } from 'core/config'\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\nexport interface TooltipConfigInterface {\n  /** An array of visualization components to interact with. Default: `[]` */\n  components?: ComponentCore<unknown>[];\n  /** Container to where the Tooltip component should be inserted. Default: `undefined` */\n  container?: HTMLElement;\n  /** Horizontal placement of the tooltip. Default: `Position.Auto` */\n  horizontalPlacement?: Position | string | undefined;\n  /** Horizontal shift of the tooltip in pixels. Default: `0` */\n  horizontalShift?: number;\n  /** Vertical placement of the tooltip. Default: `Position.Top` */\n  verticalPlacement?: Position | string | undefined;\n  /** Vertical shift of the tooltip in pixels. Default: `0` */\n  verticalShift?: number;\n  /** Defines the content of the tooltip and hovering over which elements should trigger it.\n   * An object containing properties in the following format:\n   *\n   * ```\n   * {\n   *   [selectorString]: (d: unknown) => string | HTMLElement\n   * }\n   * ```\n   * e.g.:\n   * ```\n   * {\n   *   [Area.selectors.area]: (d: AreaDatum[]) => `<div>${d.value.toString()}</div>\n   * }\n   * ```\n   */\n  triggers?: {\n    [selector: string]: (data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null;\n  };\n  /** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance\n   * by using a CSS selector. Attributes configuration object has the following structure:\n   *\n   * ```\n   * {\n   *   [attributeName]: attribute value\n   * }\n   * ```\n   * e.g.:\n   * ```\n   * {\n   *   'type': 'area-tooltip',\n   *   'value': 42\n   * }\n   * ```\n   */\n  attributes?: { [attr: string]: string | number | boolean };\n}\n\nexport class TooltipConfig extends Config implements TooltipConfigInterface {\n  components: ComponentCore<unknown>[] = []\n  container = undefined\n  horizontalPlacement = Position.Auto\n  horizontalShift = 0\n  verticalPlacement = Position.Top\n  verticalShift = 0\n  attributes: { [attr: string]: string | number | boolean } = {}\n  triggers: {\n    [selector: string]: (data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null;\n  } = {}\n}\n"],"names":[],"mappings":";;;AAAA;AAyDM,MAAO,aAAc,SAAQ,MAAM,CAAA;AAAzC,IAAA,WAAA,GAAA;;QACE,IAAU,CAAA,UAAA,GAA6B,EAAE,CAAA;QACzC,IAAS,CAAA,SAAA,GAAG,SAAS,CAAA;AACrB,QAAA,IAAA,CAAA,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAA;QACnC,IAAe,CAAA,eAAA,GAAG,CAAC,CAAA;AACnB,QAAA,IAAA,CAAA,iBAAiB,GAAG,QAAQ,CAAC,GAAG,CAAA;QAChC,IAAa,CAAA,aAAA,GAAG,CAAC,CAAA;QACjB,IAAU,CAAA,UAAA,GAAkD,EAAE,CAAA;QAC9D,IAAQ,CAAA,QAAA,GAEJ,EAAE,CAAA;KACP;AAAA;;;;"}

package/components/tooltip/index.d.ts

@@ -0,0 +1,36 @@
+import { Selection } from 'd3-selection';
+import { ComponentCore } from "../../core/component";
+import { TooltipConfig, TooltipConfigInterface } from './config';
+export declare class Tooltip {
+    element: HTMLElement;
+    div: Selection<HTMLElement, unknown, null, undefined>;
+    config: TooltipConfig;
+    prevConfig: TooltipConfig;
+    components: ComponentCore<unknown>[];
+    static selectors: any;
+    private _setUpEventsThrottled;
+    private _setContainerPositionThrottled;
+    private _isShown;
+    private _container;
+    constructor(config?: TooltipConfigInterface);
+    setConfig(config: TooltipConfigInterface): void;
+    setContainer(container: HTMLElement): void;
+    getContainer(): HTMLElement;
+    hasContainer(): boolean;
+    setComponents(components: ComponentCore<unknown>[]): void;
+    update(): void;
+    show(html: string | HTMLElement, pos: {
+        x: number;
+        y: number;
+    }): void;
+    hide(): void;
+    place(pos: {
+        x: number;
+        y: number;
+    }): void;
+    isContainerBody(): boolean;
+    private _setContainerPosition;
+    private _setUpEvents;
+    private _setUpAttributes;
+    destroy(): void;
+}