@visactor/vchart-extension 2.0.15 → 2.0.16

package/build/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@visactor/vchart')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@visactor/vchart'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VChartExtension = {}, global.VChart));
-})(this, (function (exports, vchart) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@visactor/vchart'), require('@visactor/vutils')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@visactor/vchart', '@visactor/vutils'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VChartExtension = {}, global.VChart, global.VUtils));
+})(this, (function (exports, vchart, vutils) { 'use strict';
 
     class RankingBarChartSpecTransformer extends vchart.BaseChartSpecTransformer {
         transformSpec(spec) {
@@ -1475,7 +1475,7 @@
             var _a, _b, _c, _d, _e;
             super.transformSpec(spec);
             const dataSpecs = processSequenceData$2(spec);
-            const showTooltip = spec.taskType === 'neighborhood' ? false : true;
+            const showTooltip = spec.taskType !== 'neighborhood';
             spec.type = 'common';
             spec.dataKey = DATA_KEY$2;
             spec.data = dataSpecs[0].data;
@@ -1536,9 +1536,7 @@
                                 if (datum.type === 'same_type') {
                                     return [0, 0];
                                 }
-                                else {
-                                    return [3, 2];
-                                }
+                                return [3, 2];
                             },
                             lineWidth: 0.8,
                             strokeOpacity: 0.6
@@ -1583,7 +1581,7 @@
                         visible: true,
                         style: {
                             visible: () => {
-                                return spec.taskType == 'neighborhood';
+                                return spec.taskType === 'neighborhood';
                             },
                             type: 'text',
                             fontFamily: 'Console',
@@ -1989,7 +1987,7 @@
                 {
                     type: 'text',
                     dataIndex: 1,
-                    style: Object.assign({ text: (datum) => datum['iter'], x: 10, y: () => 10, textBaseline: 'top', textAlign: 'left', fontSize: 25, fontWeight: 'bolder', fill: 'black', fillOpacity: 0.2 }, (_b = spec.infoLabel) === null || _b === void 0 ? void 0 : _b.style)
+                    style: Object.assign({ text: (datum) => datum.iter, x: 10, y: () => 10, textBaseline: 'top', textAlign: 'left', fontSize: 25, fontWeight: 'bolder', fill: 'black', fillOpacity: 0.2 }, (_b = spec.infoLabel) === null || _b === void 0 ? void 0 : _b.style)
                 },
                 {
                     type: 'symbol',
@@ -2226,7 +2224,7 @@
                 {
                     type: 'text',
                     dataIndex: 1,
-                    style: Object.assign({ text: (datum) => datum['inter'], x: 50, y: () => 10, textBaseline: 'top', textAlign: 'left', fontSize: 100, fontWeight: 'bolder', fill: 'black', fillOpacity: 0.2 }, (_e = spec.infoLabel) === null || _e === void 0 ? void 0 : _e.style)
+                    style: Object.assign({ text: (datum) => datum.inter, x: 50, y: () => 10, textBaseline: 'top', textAlign: 'left', fontSize: 100, fontWeight: 'bolder', fill: 'black', fillOpacity: 0.2 }, (_e = spec.infoLabel) === null || _e === void 0 ? void 0 : _e.style)
                 }
             ];
             spec.tooltip = {
@@ -5244,6 +5242,586 @@
         vchart.Factory.registerChart(ImageCloudChart.type, ImageCloudChart);
     };
 
+    class TimelineChartSpecTransformer extends vchart.BaseChartSpecTransformer {
+        _getDefaultSeriesSpec(spec) {
+            return super._getDefaultSeriesSpec(spec, [
+                'timeField',
+                'eventField',
+                'seriesField',
+                'titleField',
+                'subTitleField',
+                'iconField',
+                'dot',
+                'title',
+                'subTitle',
+                'icon',
+                'line',
+                'arrow',
+                'labelPosition',
+                'sortDataByAxis'
+            ]);
+        }
+        _setDefaultXAxisSpec(spec) {
+            return {
+                type: 'band',
+                orient: 'bottom',
+                label: {
+                    visible: false
+                },
+                tick: {
+                    visible: false
+                },
+                grid: {
+                    visible: false
+                },
+                domainLine: {
+                    visible: false
+                },
+                paddingInner: 0,
+                paddingOuter: 0
+            };
+        }
+        _setDefaultYAxisSpec(spec) {
+            return {
+                type: 'band',
+                inverse: true,
+                orient: 'left',
+                label: {
+                    visible: false
+                },
+                tick: {
+                    visible: false
+                },
+                grid: {
+                    visible: false
+                },
+                domainLine: {
+                    visible: false
+                },
+                paddingInner: 0,
+                paddingOuter: 0
+            };
+        }
+        _transformAxisSpec(spec) {
+            if (!spec.axes) {
+                spec.axes = [];
+            }
+            const haxAxes = { x: false, y: false };
+            spec.axes.forEach((axis) => {
+                const { orient } = axis;
+                let defaultSpec = null;
+                if (orient === 'top' || orient === 'bottom') {
+                    haxAxes.x = true;
+                    defaultSpec = this._setDefaultXAxisSpec(spec);
+                }
+                if (orient === 'left' || orient === 'right') {
+                    haxAxes.y = true;
+                    defaultSpec = this._setDefaultYAxisSpec(spec);
+                }
+                if (defaultSpec) {
+                    Object.keys(defaultSpec).forEach(key => {
+                        axis[key] = vutils.isObject(axis[key])
+                            ? vutils.merge(defaultSpec[key], axis[key])
+                            : vutils.isNil(axis[key])
+                                ? defaultSpec[key]
+                                : axis[key];
+                    });
+                }
+            });
+            if (!haxAxes.x) {
+                spec.axes.push(this._setDefaultXAxisSpec(spec));
+            }
+            if (!haxAxes.y) {
+                spec.axes.push(this._setDefaultYAxisSpec(spec));
+            }
+        }
+        transformSpec(spec) {
+            var _a, _b;
+            super.transformSpec(spec);
+            this.transformSeriesSpec(spec);
+            this._transformAxisSpec(spec);
+            const direction = (_a = spec.direction) !== null && _a !== void 0 ? _a : 'horizontal';
+            (_b = spec.series) === null || _b === void 0 ? void 0 : _b.forEach(seriesSpec => {
+                if (direction === 'vertical') {
+                    if (seriesSpec.timeField && !seriesSpec.yField) {
+                        seriesSpec.yField = seriesSpec.timeField;
+                    }
+                    if (!seriesSpec.xField) {
+                        seriesSpec.xField = seriesSpec.seriesField || '__vchart_timeline_dummy__';
+                    }
+                }
+                else {
+                    if (seriesSpec.timeField && !seriesSpec.xField) {
+                        seriesSpec.xField = seriesSpec.timeField;
+                    }
+                    if (!seriesSpec.yField) {
+                        seriesSpec.yField = seriesSpec.seriesField || '__vchart_timeline_dummy__';
+                    }
+                }
+            });
+        }
+    }
+
+    const EVENT_SERIES_TYPE = 'event';
+
+    const event = {
+        dot: {
+            style: {
+                size: 8
+            }
+        },
+        icon: {
+            visible: false,
+            style: {
+                size: 20
+            }
+        },
+        line: {
+            visible: true,
+            style: {
+                stroke: '#c0c3c7',
+                lineWidth: 1
+            }
+        },
+        title: {
+            visible: true,
+            offset: 6,
+            subTitleGap: 4,
+            style: {
+                fontSize: 14
+            }
+        },
+        subTitle: {
+            visible: true,
+            style: {
+                fontSize: 12
+            }
+        },
+        arrow: {
+            visible: false,
+            thickness: 16
+        }
+    };
+
+    const eventSeriesMark = Object.assign(Object.assign({}, vchart.baseSeriesMark), { ["line"]: { name: "line", type: "line" }, ["dot"]: { name: "dot", type: "symbol" }, icon: { name: 'icon', type: "symbol" }, ["title"]: { name: "title", type: "text" }, ["subTitle"]: { name: "subTitle", type: "text" }, arrow: { name: 'arrow', type: "path" } });
+    class EventSeries extends vchart.CartesianSeries {
+        constructor() {
+            super(...arguments);
+            this.type = EVENT_SERIES_TYPE;
+            this.transformerConstructor = vchart.BaseSeriesSpecTransformer;
+            this.coordinate = 'cartesian';
+        }
+        setAttrFromSpec() {
+            super.setAttrFromSpec();
+            this.setSeriesField(this._spec.seriesField);
+            this._timeField = this._spec.timeField;
+            this._eventField = this._spec.eventField;
+            this._subTitleField = this._spec.subTitleField;
+            this._iconField = this._spec.iconField;
+            this._labelPosition = this._spec.labelPosition;
+        }
+        getDimensionField() {
+            return this._timeField ? [this._timeField] : [];
+        }
+        getMeasureField() {
+            const fields = [];
+            if (this._eventField) {
+                fields.push(this._eventField);
+            }
+            if (this._subTitleField) {
+                fields.push(this._subTitleField);
+            }
+            return fields;
+        }
+        initMark() {
+            this._axisLineMark = this._createMark(EventSeries.mark.line, {
+                isSeriesMark: true,
+                groupKey: this._seriesField
+            });
+            this._arrowMark = this._createMark(EventSeries.mark.arrow, {
+                isSeriesMark: true
+            });
+            this._dotMark = this._createMark(EventSeries.mark.dot, {
+                isSeriesMark: true
+            });
+            this._iconMark = this._createMark(EventSeries.mark.icon, {
+                isSeriesMark: true
+            });
+            this._titleMark = this._createMark(EventSeries.mark.title);
+            this._subTitleMark = this._createMark(EventSeries.mark.subTitle);
+        }
+        initTooltip() {
+            super.initTooltip();
+            this._dotMark && this._tooltipHelper.activeTriggerSet.mark.add(this._dotMark);
+            this._titleMark && this._tooltipHelper.activeTriggerSet.mark.add(this._titleMark);
+            this._subTitleMark && this._tooltipHelper.activeTriggerSet.mark.add(this._subTitleMark);
+            this._iconMark && this._tooltipHelper.activeTriggerSet.mark.add(this._iconMark);
+            this._arrowMark && this._tooltipHelper.activeTriggerSet.mark.add(this._arrowMark);
+        }
+        initMarkStyle() {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            if (this._axisLineMark) {
+                this.setMarkStyle(this._axisLineMark, {
+                    points: this._getAxisPoints.bind(this),
+                    visible: this._isFirstDataInGroup.bind(this),
+                    stroke: '#c0c3c7',
+                    lineWidth: 1
+                }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+            }
+            const dotSpec = this._spec.dot;
+            const dotSize = typeof ((_a = dotSpec === null || dotSpec === void 0 ? void 0 : dotSpec.style) === null || _a === void 0 ? void 0 : _a.size) === 'number' ? dotSpec.style.size : 8;
+            const titleSpec = this._spec.title;
+            const titleStyle = (_b = titleSpec === null || titleSpec === void 0 ? void 0 : titleSpec.style) !== null && _b !== void 0 ? _b : {};
+            const subTitleSpec = this._spec.subTitle;
+            const subTitleStyle = (_c = subTitleSpec === null || subTitleSpec === void 0 ? void 0 : subTitleSpec.style) !== null && _c !== void 0 ? _c : {};
+            const titleFontSize = typeof titleStyle.fontSize === 'number' ? titleStyle.fontSize : 14;
+            const labelOffset = dotSize / 2 + ((_d = titleSpec === null || titleSpec === void 0 ? void 0 : titleSpec.offset) !== null && _d !== void 0 ? _d : 6);
+            if (this._dotMark) {
+                this.setMarkStyle(this._dotMark, {
+                    x: (datum) => this._getPoint(datum).x,
+                    y: (datum) => this._getPoint(datum).y,
+                    size: dotSize,
+                    fill: (_f = (_e = dotSpec === null || dotSpec === void 0 ? void 0 : dotSpec.style) === null || _e === void 0 ? void 0 : _e.fill) !== null && _f !== void 0 ? _f : this.getColorAttribute()
+                }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+            }
+            if (this._arrowMark) {
+                this.setMarkStyle(this._arrowMark, {
+                    path: (datum) => this._getArrowPath(datum),
+                    fill: (_h = (_g = dotSpec === null || dotSpec === void 0 ? void 0 : dotSpec.style) === null || _g === void 0 ? void 0 : _g.fill) !== null && _h !== void 0 ? _h : this.getColorAttribute()
+                }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+            }
+            if (this._titleMark) {
+                this.setMarkStyle(this._titleMark, Object.assign(Object.assign({ fontSize: 14 }, titleStyle), { x: (datum) => this._getTitlePosition(datum, labelOffset).x, y: (datum) => this._getTitlePosition(datum, labelOffset).y, textAlign: (datum) => this._getLabelTextAlign(datum), textBaseline: (datum) => this._getLabelTextBaseline(datum, true), text: (datum) => this._getDatumString(datum, this._eventField) }), vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+            }
+            if (this._subTitleMark) {
+                this.setMarkStyle(this._subTitleMark, Object.assign(Object.assign({}, subTitleStyle), { x: (datum) => this._getSubTitlePosition(datum, labelOffset, titleFontSize).x, y: (datum) => this._getSubTitlePosition(datum, labelOffset, titleFontSize).y, textAlign: (datum) => this._getLabelTextAlign(datum), textBaseline: (datum) => this._getLabelTextBaseline(datum, false), text: (datum) => this._getDatumString(datum, this._subTitleField) }), vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+            }
+            const iconSpec = this._spec.icon;
+            const iconSize = typeof ((_j = iconSpec === null || iconSpec === void 0 ? void 0 : iconSpec.style) === null || _j === void 0 ? void 0 : _j.size) === 'number' ? iconSpec.style.size : 20;
+            const iconOffset = (vutils.isValid(iconSpec === null || iconSpec === void 0 ? void 0 : iconSpec.offset) ? iconSpec.offset + dotSize / 2 : labelOffset) + iconSize / 2;
+            if (this._iconMark) {
+                this.setMarkStyle(this._iconMark, {
+                    x: (datum) => this._getIconPosition(datum, iconOffset).x,
+                    y: (datum) => this._getIconPosition(datum, iconOffset).y,
+                    size: iconSize,
+                    fill: (_l = (_k = iconSpec === null || iconSpec === void 0 ? void 0 : iconSpec.style) === null || _k === void 0 ? void 0 : _k.fill) !== null && _l !== void 0 ? _l : this.getColorAttribute(),
+                    shape: (datum) => this._getDatumString(datum, this._iconField) || 'circle'
+                }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+            }
+        }
+        _getLabelSide(datum) {
+            const data = this._getViewDataList();
+            const index = data.indexOf(datum);
+            const position = this._labelPosition;
+            if (this.direction === 'vertical') {
+                switch (position) {
+                    case 'left':
+                        return 'primary';
+                    case 'right':
+                        return 'secondary';
+                    case 'left-right':
+                        return index % 2 === 0 ? 'primary' : 'secondary';
+                    case 'right-left':
+                        return index % 2 === 0 ? 'secondary' : 'primary';
+                    default:
+                        return 'primary';
+                }
+            }
+            else {
+                switch (position) {
+                    case 'top':
+                        return 'primary';
+                    case 'bottom':
+                        return 'secondary';
+                    case 'top-bottom':
+                        return index % 2 === 0 ? 'primary' : 'secondary';
+                    case 'bottom-top':
+                        return index % 2 === 0 ? 'secondary' : 'primary';
+                    default:
+                        return 'primary';
+                }
+            }
+        }
+        _getLabelTextAlign(datum) {
+            if (this.direction === 'vertical') {
+                const side = this._getLabelSide(datum);
+                return side === 'primary' ? 'right' : 'left';
+            }
+            return 'center';
+        }
+        _getLabelTextBaseline(datum, isTitle) {
+            if (this.direction === 'vertical') {
+                return 'middle';
+            }
+            const side = this._getLabelSide(datum);
+            return side === 'primary' ? 'bottom' : 'top';
+        }
+        _getTitlePosition(datum, offset) {
+            const point = this._getPoint(datum);
+            const side = this._getLabelSide(datum);
+            if (this.direction === 'vertical') {
+                return {
+                    x: side === 'primary' ? point.x - offset : point.x + offset,
+                    y: point.y
+                };
+            }
+            return {
+                x: point.x,
+                y: side === 'primary' ? point.y - offset : point.y + offset
+            };
+        }
+        _getSubTitlePosition(datum, offset, titleFontSize) {
+            var _a, _b, _c, _d;
+            const point = this._getPoint(datum);
+            const side = this._getLabelSide(datum);
+            const gap = (_b = (_a = this._spec.title) === null || _a === void 0 ? void 0 : _a.subTitleGap) !== null && _b !== void 0 ? _b : 4;
+            if (this.direction === 'vertical') {
+                const titleStyle = (_d = (_c = this._spec.title) === null || _c === void 0 ? void 0 : _c.style) !== null && _d !== void 0 ? _d : {};
+                const titleLineHeight = typeof titleStyle.lineHeight === 'number' ? titleStyle.lineHeight : titleFontSize * 1.2;
+                return {
+                    x: side === 'primary' ? point.x - offset : point.x + offset,
+                    y: point.y + titleLineHeight + gap
+                };
+            }
+            return {
+                x: point.x,
+                y: side === 'primary' ? point.y - (offset + titleFontSize + gap) : point.y + (offset + titleFontSize + gap)
+            };
+        }
+        _getIconPosition(datum, offset) {
+            const point = this._getPoint(datum);
+            const side = this._getLabelSide(datum);
+            if (this.direction === 'vertical') {
+                return {
+                    x: side === 'primary' ? point.x + offset : point.x - offset,
+                    y: point.y
+                };
+            }
+            return {
+                x: point.x,
+                y: side === 'primary' ? point.y + offset : point.y - offset
+            };
+        }
+        _getViewDataList() {
+            var _a, _b;
+            return (_b = (_a = this.getViewData()) === null || _a === void 0 ? void 0 : _a.latestData) !== null && _b !== void 0 ? _b : [];
+        }
+        _getPoint(datum) {
+            if (this.direction === 'vertical') {
+                const x = this._getPositionFromAxis(datum, this.getXAxisHelper(), this._seriesField);
+                const y = this._getPositionFromAxis(datum, this.getYAxisHelper(), this._timeField);
+                return { x, y };
+            }
+            const x = this._getPositionFromAxis(datum, this.getXAxisHelper(), this._timeField);
+            const y = this._getPositionFromAxis(datum, this.getYAxisHelper(), this._seriesField);
+            return { x, y };
+        }
+        _getPositionFromAxis(datum, axisHelper, field) {
+            var _a, _b, _c, _d, _e, _f;
+            if (!axisHelper) {
+                return this._getDefaultPosition(field);
+            }
+            if (!field || !(field in datum)) {
+                return this._getDefaultPosition(field);
+            }
+            const value = datum[field];
+            const axisType = (_b = (_a = axisHelper.getSpec) === null || _a === void 0 ? void 0 : _a.call(axisHelper)) === null || _b === void 0 ? void 0 : _b.type;
+            if (axisType === 'band' || !axisHelper.isContinuous) {
+                return (_d = (_c = axisHelper.dataToPosition) === null || _c === void 0 ? void 0 : _c.call(axisHelper, [value], { bandPosition: 0.5 })) !== null && _d !== void 0 ? _d : this._getDefaultPosition(field);
+            }
+            return (_f = (_e = axisHelper.valueToPosition) === null || _e === void 0 ? void 0 : _e.call(axisHelper, value)) !== null && _f !== void 0 ? _f : this._getDefaultPosition(field);
+        }
+        onXAxisHelperUpdate() {
+            var _a;
+            (_a = super.onXAxisHelperUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.onMarkPositionUpdate();
+        }
+        onYAxisHelperUpdate() {
+            var _a;
+            (_a = super.onYAxisHelperUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.onMarkPositionUpdate();
+        }
+        _getDefaultPosition(field) {
+            const rect = this._region.getLayoutRect();
+            if (!this._seriesField || field === this._seriesField) {
+                const isHorizontal = this.direction !== 'vertical';
+                return isHorizontal ? rect.height * 0.5 : rect.width * 0.5;
+            }
+            return 0;
+        }
+        _getAxisPoints(datum) {
+            const rect = this._region.getLayoutRect();
+            if (this.direction === 'vertical') {
+                const x = this._getPositionFromAxis(datum, this.getXAxisHelper(), this._seriesField);
+                return [
+                    { x, y: 0 },
+                    { x, y: rect.height }
+                ];
+            }
+            const y = this._getPositionFromAxis(datum, this.getYAxisHelper(), this._seriesField);
+            return [
+                { x: 0, y },
+                { x: rect.width, y }
+            ];
+        }
+        _isFirstDataInGroup(datum) {
+            if (!this._seriesField) {
+                const data = this._getViewDataList();
+                return data.indexOf(datum) === 0;
+            }
+            const data = this._getViewDataList();
+            const categoryValue = datum[this._seriesField];
+            const firstInGroup = data.find(d => this._seriesField && d[this._seriesField] === categoryValue);
+            return datum === firstInGroup;
+        }
+        _getNextDatum(datum) {
+            const data = this._getViewDataList();
+            const currentIndex = data.indexOf(datum);
+            if (currentIndex === -1 || currentIndex === data.length - 1) {
+                return null;
+            }
+            if (!this._seriesField) {
+                return data[currentIndex + 1];
+            }
+            const categoryValue = datum[this._seriesField];
+            for (let i = currentIndex + 1; i < data.length; i++) {
+                const nextDatum = data[i];
+                if (nextDatum[this._seriesField] === categoryValue) {
+                    return nextDatum;
+                }
+            }
+            return null;
+        }
+        _getPreviousDatum(datum) {
+            const data = this._getViewDataList();
+            const currentIndex = data.indexOf(datum);
+            if (currentIndex === -1 || currentIndex === 0) {
+                return null;
+            }
+            if (!this._seriesField) {
+                return data[currentIndex - 1];
+            }
+            const categoryValue = datum[this._seriesField];
+            for (let i = currentIndex - 1; i >= 0; i--) {
+                const prevDatum = data[i];
+                if (prevDatum[this._seriesField] === categoryValue) {
+                    return prevDatum;
+                }
+            }
+            return null;
+        }
+        _getArrowPath(datum) {
+            var _a, _b;
+            const point = this._getPoint(datum);
+            const nextDatum = this._getNextDatum(datum);
+            const prevDatum = this._getPreviousDatum(datum);
+            const arrowThickness = (_b = (_a = this._spec.arrow) === null || _a === void 0 ? void 0 : _a.thickness) !== null && _b !== void 0 ? _b : 16;
+            const rect = this._region.getLayoutRect();
+            if (this.direction === 'vertical') {
+                const axisHelper = this.getYAxisHelper();
+                const inverse = axisHelper.isInverse();
+                const startPoint = prevDatum
+                    ? {
+                        x: point.x,
+                        y: (this._getPoint(prevDatum).y + point.y) / 2
+                    }
+                    : { x: point.x, y: inverse ? 0 : rect.height };
+                const endPoint = nextDatum
+                    ? {
+                        x: point.x,
+                        y: (this._getPoint(nextDatum).y + point.y) / 2
+                    }
+                    : { x: point.x, y: inverse ? rect.height : 0 };
+                const tag = inverse ? 1 : -1;
+                const arrowHeight = arrowThickness / 3;
+                const arrowWidth = arrowThickness / 2;
+                return `M ${startPoint.x - arrowWidth} ${startPoint.y} L ${startPoint.x} ${startPoint.y + tag * arrowHeight} L ${startPoint.x + arrowWidth} ${startPoint.y} 
+      L ${endPoint.x + arrowWidth} ${endPoint.y - tag * arrowHeight} 
+      L ${endPoint.x} ${endPoint.y}
+      L ${endPoint.x - arrowWidth} ${endPoint.y - tag * arrowHeight} Z`;
+            }
+            const axisHelper = this.getXAxisHelper();
+            const inverse = axisHelper.isInverse();
+            const startPoint = prevDatum
+                ? {
+                    x: (this._getPoint(prevDatum).x + point.x) / 2,
+                    y: point.y
+                }
+                : { x: inverse ? rect.width : 0, y: point.y };
+            const endPoint = nextDatum
+                ? {
+                    x: (this._getPoint(nextDatum).x + point.x) / 2,
+                    y: point.y
+                }
+                : { x: inverse ? 0 : rect.width, y: point.y };
+            const tag = inverse ? -1 : 1;
+            const arrowHeight = arrowThickness / 2;
+            const arrowWidth = arrowThickness / 3;
+            return `M ${startPoint.x} ${startPoint.y - arrowHeight} L ${startPoint.x + tag * arrowWidth} ${startPoint.y} L ${startPoint.x} ${startPoint.y + arrowHeight} 
+      L ${endPoint.x - tag * arrowWidth} ${endPoint.y + arrowHeight} 
+      L ${endPoint.x} ${endPoint.y} 
+      L ${endPoint.x - tag * arrowWidth} ${endPoint.y - arrowHeight} Z`;
+        }
+        _getDatumString(datum, field) {
+            if (!datum || !field) {
+                return '';
+            }
+            const value = datum[field];
+            return typeof value === 'string' ? value : value == null ? '' : String(value);
+        }
+        valueToPosition(timeValue, eventValue) {
+            if (timeValue && typeof timeValue === 'object') {
+                return this.dataToPosition(timeValue);
+            }
+            const mockDatum = {};
+            if (this._timeField) {
+                mockDatum[this._timeField] = timeValue;
+            }
+            if (this._eventField && eventValue !== undefined) {
+                mockDatum[this._eventField] = eventValue;
+            }
+            return this._getPoint(mockDatum);
+        }
+        getActiveMarks() {
+            return [
+                this._axisLineMark,
+                this._dotMark,
+                this._iconMark,
+                this._arrowMark,
+                this._titleMark,
+                this._subTitleMark
+            ].filter(Boolean);
+        }
+    }
+    EventSeries.type = EVENT_SERIES_TYPE;
+    EventSeries.mark = eventSeriesMark;
+    EventSeries.builtInTheme = { event };
+    EventSeries.transformerConstructor = vchart.BaseSeriesSpecTransformer;
+    const registerEventSeries = () => {
+        vchart.registerSymbolMark();
+        vchart.registerTextMark();
+        vchart.registerLineMark();
+        vchart.registerPathMark();
+        vchart.Factory.registerSeries(EventSeries.type, EventSeries);
+    };
+
+    class TimelineChart extends vchart.BaseChart {
+        constructor() {
+            super(...arguments);
+            this.transformerConstructor = TimelineChartSpecTransformer;
+            this.type = 'timeline';
+            this.seriesType = 'event';
+        }
+    }
+    TimelineChart.type = 'timeline';
+    TimelineChart.seriesType = 'event';
+    TimelineChart.transformerConstructor = TimelineChartSpecTransformer;
+    const registerTimelineChart = () => {
+        vchart.registerMarkTooltipProcessor();
+        registerEventSeries();
+        vchart.Factory.registerChart(TimelineChart.type, TimelineChart);
+    };
+
     const SERIES_BREAK = 'seriesBreak';
 
     function generateZigzagPath(start, end, size, angle, isVertical = false) {
@@ -7277,6 +7855,7 @@
     exports.SequenceScatterPixel = SequenceScatterPixel;
     exports.SeriesBreakComponent = SeriesBreakComponent;
     exports.SeriesLabelComponent = SeriesLabelComponent;
+    exports.TimelineChart = TimelineChart;
     exports.WordCloud3dChart = WordCloud3dChart;
     exports.WordCloud3dChartSpecTransformer = WordCloud3dChartSpecTransformer;
     exports.WordCloud3dSeries = WordCloud3dSeries;
@@ -7303,6 +7882,7 @@
     exports.registerCandlestickSeries = registerCandlestickSeries;
     exports.registerCombinationCandlestickChart = registerCombinationCandlestickChart;
     exports.registerConversionFunnelChart = registerConversionFunnelChart;
+    exports.registerEventSeries = registerEventSeries;
     exports.registerFunnel3dChart = registerFunnel3dChart;
     exports.registerFunnel3dSeries = registerFunnel3dSeries;
     exports.registerHistogram3dChart = registerHistogram3dChart;
@@ -7323,6 +7903,7 @@
     exports.registerSequenceScatterPixel = registerSequenceScatterPixel;
     exports.registerSeriesBreak = registerSeriesBreak;
     exports.registerSeriesLabel = registerSeriesLabel;
+    exports.registerTimelineChart = registerTimelineChart;
     exports.registerWordCloud3dChart = registerWordCloud3dChart;
     exports.registerWordCloud3dSeries = registerWordCloud3dSeries;
     exports.registerWordCloudShape3dChart = registerWordCloudShape3dChart;