@visactor/vchart-extension 2.0.4-alpha.0 → 2.0.4-alpha.1

package/build/index.js

@@ -7015,7 +7015,8 @@
 	  y1: 0,
 	  strokeBoundsBuffer: 0,
 	  cornerRadius: 0,
-	  cornerType: "round"
+	  cornerType: "round",
+	  drawStrokeWhenZeroWH: !1
 	});
 	Object.assign(Object.assign({}, DefaultAttribute), {
 	  width: 0,
@@ -7024,7 +7025,8 @@
 	  y1: 0,
 	  cornerRadius: 0,
 	  length: 0,
-	  cornerType: "round"
+	  cornerType: "round",
+	  drawStrokeWhenZeroWH: !1
 	});
 	const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
 	  symbolType: "circle",
@@ -10219,7 +10221,7 @@
 	    });
 	  }
 	  setAttributes(params, forceUpdateTag = !1, context) {
-	    (params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context);
+	    params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
 	  }
 	  _setAttributes(params, forceUpdateTag = !1, context) {
 	    const keys = Object.keys(params);
@@ -10854,8 +10856,8 @@
 	function strokeVisible(opacity, strokeOpacity) {
 	  return opacity * strokeOpacity > 0;
 	}
-	function rectStrokeVisible(opacity, strokeOpacity, width, height) {
-	  return opacity * strokeOpacity > 0 && 0 !== width && 0 !== height;
+	function rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH) {
+	  return drawStrokeWhenZeroWH ? opacity * strokeOpacity > 0 : opacity * strokeOpacity > 0 && 0 !== width && 0 !== height;
 	}
 	function intersect(x0, y0, x1, y1, x2, y2, x3, y3) {
 	  const x10 = x1 - x0,
@@ -14921,7 +14923,8 @@
 	      y1: y1,
 	      x: originX = rectAttribute.x,
 	      y: originY = rectAttribute.y,
-	      fillStrokeOrder = rectAttribute.fillStrokeOrder
+	      fillStrokeOrder = rectAttribute.fillStrokeOrder,
+	      drawStrokeWhenZeroWH = rectAttribute.drawStrokeWhenZeroWH
 	    } = rect.attribute;
 	    let {
 	      width: width,
@@ -14929,7 +14932,7 @@
 	    } = rect.attribute;
 	    width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
 	    const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
-	      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
+	      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH),
 	      doFill = runFill(fill, background),
 	      doStroke = runStroke(stroke, lineWidth);
 	    if (!rect.valid || !visible) return;
@@ -15833,7 +15836,7 @@
 	    super(...arguments), this.type = "rect3d", this.numberType = RECT3D_NUMBER_TYPE;
 	  }
 	  drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
-	    var _a;
+	    var _a, _b;
 	    const rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect,
 	      {
 	        fill = rectAttribute.fill,
@@ -15846,16 +15849,17 @@
 	        fillOpacity = rectAttribute.fillOpacity,
 	        lineWidth = rectAttribute.lineWidth,
 	        strokeOpacity = rectAttribute.strokeOpacity,
-	        visible = rectAttribute.visible
+	        visible = rectAttribute.visible,
+	        drawStrokeWhenZeroWH = null !== (_a = rectAttribute.drawStrokeWhenZeroWH) && void 0 !== _a && _a
 	      } = rect.attribute;
 	    let {
 	      width: width,
 	      height: height
 	    } = rect.attribute;
 	    width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
-	    const z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
+	    const z = null !== (_b = this.z) && void 0 !== _b ? _b : 0,
 	      fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
-	      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
+	      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH),
 	      doFill = runFill(fill),
 	      doStroke = runStroke(stroke, lineWidth);
 	    if (!rect.valid || !visible) return;
@@ -17848,6 +17852,7 @@
 	    return this.getEndProps();
 	  }
 	  stop() {}
+	  release() {}
 	}
 	class WaitStep extends Step {
 	  constructor(type, props, duration, easing) {
@@ -18065,7 +18070,9 @@
 	    this.status !== AnimateStatus.END && this.onEnd(), this.status = AnimateStatus.END, this.target && ("start" === type ? this.target.setAttributes(this._startProps) : "end" === type ? this.target.setAttributes(this._endProps) : type && this.target.setAttributes(type));
 	  }
 	  release() {
-	    this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [];
+	    this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [], this.forEachStep(step => {
+	      step.release();
+	    });
 	  }
 	  getDuration() {
 	    return this._duration;
@@ -18139,6 +18146,10 @@
 	  getLoop() {
 	    return this._loopCount;
 	  }
+	  forEachStep(cb) {
+	    let step = this._firstStep;
+	    for (; step;) cb(step), step = step.next;
+	  }
 	}
 
 	const performanceRAF = new PerformanceRAF();
@@ -18371,6 +18382,9 @@
 	  constructor(target) {
 	    this._animates = [], this._startCallbacks = [], this._endCallbacks = [], this._started = !1, this._activeCount = 0, this._target = target;
 	  }
+	  get started() {
+	    return this._started;
+	  }
 	  onStart(cb) {
 	    cb ? (this._startCallbacks.push(cb), this._started && this._activeCount > 0 && cb()) : this._startCallbacks.forEach(cb => {
 	      cb();
@@ -18511,14 +18525,14 @@
 	    return delayAfterValue > 0 && (totalDelay += delayAfterValue), totalDelay > 0 && animate.wait(totalDelay), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0), animate;
 	  }
 	  _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
-	    var _a, _b, _c, _d;
+	    var _a, _b, _c, _d, _e, _f;
 	    if (custom && customType) {
 	      const customParams = Object.assign({
-	          width: graphic.stage.width,
-	          height: graphic.stage.height,
+	          width: (null === (_a = graphic.stage) || void 0 === _a ? void 0 : _a.width) || 0,
+	          height: (null === (_b = graphic.stage) || void 0 === _b ? void 0 : _b.height) || 0,
 	          group: this._target.parent
 	        }, this.resolveValue(customParameters, graphic)),
-	        objOptions = isFunction$1(options) ? options.call(null, null !== (_b = customParams && (null === (_a = customParams.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParams) : options;
+	        objOptions = isFunction$1(options) ? options.call(null, null !== (_d = customParams && (null === (_c = customParams.data) || void 0 === _c ? void 0 : _c[0])) && void 0 !== _d ? _d : null === (_f = null === (_e = graphic.context) || void 0 === _e ? void 0 : _e.data) || void 0 === _f ? void 0 : _f[0], graphic, customParams) : options;
 	      customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
 	    } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
 	  }
@@ -18738,7 +18752,7 @@
 	  reApplyState(state) {
 	    var _a;
 	    const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
-	    if (stateInfo) {
+	    if (stateInfo && stateInfo.executor.started) {
 	      const stateList = this.stateList.slice();
 	      stateInfo.executor.stop(), this.stateList = stateList, stateInfo.executor.execute(stateInfo.animationConfig);
 	    }
@@ -21974,6 +21988,536 @@
 	    vchart.Factory.registerChart(ImageCloudChart.type, ImageCloudChart);
 	};
 
+	class CandlestickChartSpecTransformer extends vchart.CartesianChartSpecTransformer {
+	    _getDefaultSeriesSpec(spec) {
+	        const dataFields = [spec.openField, spec.highField, spec.lowField, spec.closeField];
+	        const seriesSpec = super._getDefaultSeriesSpec(spec, [
+	            'candlestick',
+	            'openField',
+	            'highField',
+	            'lowField',
+	            'closeField',
+	            'rising',
+	            'falling',
+	            'doji'
+	        ]);
+	        seriesSpec.yField = dataFields;
+	        return seriesSpec;
+	    }
+	    transformSpec(spec) {
+	        super.transformSpec(spec);
+	        if (!spec.axes) {
+	            spec.axes = [
+	                {
+	                    orient: 'bottom'
+	                },
+	                {
+	                    orient: 'left'
+	                }
+	            ];
+	        }
+	        vchart.setDefaultCrosshairForCartesianChart(spec);
+	    }
+	}
+
+	const CANDLESTICK_MARK_TYPE = 'candlestick';
+	class CandlestickMark extends vchart.GlyphMark {
+	    constructor() {
+	        super(...arguments);
+	        this.type = CandlestickMark.type;
+	    }
+	    setGlyphConfig(cfg) {
+	        super.setGlyphConfig(cfg);
+	        this._subMarks = {
+	            line: { type: 'line', defaultAttributes: { x: 0, y: 0 } },
+	            box: { type: 'rect' }
+	        };
+	        this._positionChannels = ['x', 'boxWidth', 'open', 'close', 'high', 'low'];
+	        this._channelEncoder = null;
+	        this._positionEncoder = (glyphAttrs, datum, g) => {
+	            const { x = g.attribute.x, boxWidth = g.attribute.boxWidth, open = g.attribute.open, close = g.attribute.close, low = g.attribute.low, high = g.attribute.high } = glyphAttrs;
+	            const attributes = {};
+	            attributes.line = {
+	                points: [
+	                    {
+	                        x: x,
+	                        y: low
+	                    },
+	                    {
+	                        x: x,
+	                        y: high
+	                    }
+	                ]
+	            };
+	            attributes.box = {
+	                x: x - boxWidth / 2,
+	                x1: x + boxWidth / 2,
+	                y: Math.min(open, close),
+	                y1: Math.max(open, close),
+	                drawStrokeWhenZeroWH: true
+	            };
+	            return attributes;
+	        };
+	    }
+	    _getDefaultStyle() {
+	        const defaultStyle = Object.assign({}, super._getDefaultStyle());
+	        return defaultStyle;
+	    }
+	}
+	CandlestickMark.type = CANDLESTICK_MARK_TYPE;
+	const registerCandlestickMark = () => {
+	    vchart.registerGlyphMark();
+	    registerLine();
+	    registerRect();
+	    vchart.Factory.registerGraphicComponent('line', (attrs) => createLine(attrs));
+	    vchart.Factory.registerGraphicComponent('rect', (attrs) => createRect(attrs));
+	    vchart.Factory.registerMark(CandlestickMark.type, CandlestickMark);
+	};
+
+	const scaleIn = () => {
+	    return (graphic) => {
+	        const finalAttribute = graphic.getFinalAttribute();
+	        const { x, y, open, high, low, close } = finalAttribute;
+	        const animateAttributes = { from: { x, y }, to: { x, y } };
+	        if (isValidNumber$1(open) && isValidNumber$1(close)) {
+	            if (open > close) {
+	                animateAttributes.from.open = low;
+	                animateAttributes.to.open = open;
+	                animateAttributes.from.close = low;
+	                animateAttributes.to.close = close;
+	                if (isValidNumber$1(high)) {
+	                    animateAttributes.from.high = low;
+	                    animateAttributes.to.high = high;
+	                }
+	            }
+	            else {
+	                animateAttributes.from.open = high;
+	                animateAttributes.to.open = open;
+	                animateAttributes.from.close = high;
+	                animateAttributes.to.close = close;
+	                if (isValidNumber$1(low)) {
+	                    animateAttributes.from.low = high;
+	                    animateAttributes.to.low = low;
+	                }
+	            }
+	        }
+	        return animateAttributes;
+	    };
+	};
+	const scaleOut = () => {
+	    return (graphic) => {
+	        const finalAttribute = graphic.getFinalAttribute();
+	        const { x, y, open, high, low, close } = finalAttribute;
+	        const animateAttributes = { from: { x, y }, to: { x, y } };
+	        if (isValidNumber$1(open) && isValidNumber$1(close)) {
+	            if (open > close) {
+	                animateAttributes.from.open = open;
+	                animateAttributes.to.open = low;
+	                animateAttributes.from.close = close;
+	                animateAttributes.to.close = low;
+	                if (isValidNumber$1(high)) {
+	                    animateAttributes.from.high = high;
+	                    animateAttributes.to.high = low;
+	                }
+	            }
+	            else {
+	                animateAttributes.from.open = open;
+	                animateAttributes.to.open = high;
+	                animateAttributes.from.close = close;
+	                animateAttributes.to.close = high;
+	                if (isValidNumber$1(low)) {
+	                    animateAttributes.from.low = low;
+	                    animateAttributes.to.low = high;
+	                }
+	            }
+	        }
+	        return animateAttributes;
+	    };
+	};
+	class CandlestickScaleIn extends ACustomAnimate {
+	    constructor(from, to, duration, easing, params) {
+	        super(from, to, duration, easing, params);
+	    }
+	    onBind() {
+	        super.onBind();
+	        const finalAttribute = this.target.getFinalAttribute();
+	        if (finalAttribute) {
+	            this.target.setAttributes(finalAttribute);
+	        }
+	        const { from, to } = this.computeAttribute();
+	        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+	        this.animate.reSyncProps();
+	        this.from = from;
+	        this.to = to;
+	        this.target.setAttributes(this.from);
+	    }
+	    computeAttribute() {
+	        const attr = scaleIn()(this.target, this.params, this.params.options);
+	        return attr;
+	    }
+	    onUpdate(end, ratio, out) {
+	        const attribute = this.target.attribute;
+	        this.propKeys.forEach(key => {
+	            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+	        });
+	        this.target.setAttributes(attribute);
+	    }
+	}
+	class CandlestickScaleOut extends ACustomAnimate {
+	    constructor(from, to, duration, easing, params) {
+	        super(from, to, duration, easing, params);
+	    }
+	    onBind() {
+	        var _a;
+	        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
+	            this.target.setAttributes(this.params.diffAttrs);
+	        }
+	        const { from, to } = this.computeAttribute();
+	        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+	        this.animate.reSyncProps();
+	        this.from = from;
+	        this.to = to;
+	        this.target.setAttributes(this.from);
+	    }
+	    computeAttribute() {
+	        const attr = scaleOut()(this.target, this.params, this.params.options);
+	        return attr;
+	    }
+	    onUpdate(end, ratio, out) {
+	        const attribute = this.target.attribute;
+	        this.propKeys.forEach(key => {
+	            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+	        });
+	        this.target.setAttributes(attribute);
+	    }
+	}
+	const registerCandlestickScaleAnimation = () => {
+	    AnimateExecutor.registerBuiltInAnimate('candlestickScaleIn', CandlestickScaleIn);
+	    AnimateExecutor.registerBuiltInAnimate('candlestickScaleOut', CandlestickScaleOut);
+	};
+
+	const CANDLESTICK_CHART_TYPE = 'candlestick';
+	const CANDLESTICK_SERIES_TYPE = 'candlestick';
+	var CANDLESTICK_TOOLTIP_KEYS;
+	(function (CANDLESTICK_TOOLTIP_KEYS) {
+	    CANDLESTICK_TOOLTIP_KEYS["OPEN"] = "open";
+	    CANDLESTICK_TOOLTIP_KEYS["HIGH"] = "high";
+	    CANDLESTICK_TOOLTIP_KEYS["LOW"] = "low";
+	    CANDLESTICK_TOOLTIP_KEYS["CLOSE"] = "close";
+	    CANDLESTICK_TOOLTIP_KEYS["SERIES_FIELD"] = "seriesField";
+	})(CANDLESTICK_TOOLTIP_KEYS || (CANDLESTICK_TOOLTIP_KEYS = {}));
+	var CandlestickMarkNameEnum;
+	(function (CandlestickMarkNameEnum) {
+	    CandlestickMarkNameEnum["candlestick"] = "candlestick";
+	})(CandlestickMarkNameEnum || (CandlestickMarkNameEnum = {}));
+	const CandlestickSeriesMark = Object.assign(Object.assign({}, vchart.baseSeriesMark), { ["candlestick"]: { name: "candlestick", type: 'candlestick' } });
+
+	class CandlestickSeriesTooltipHelper extends vchart.BaseSeriesTooltipHelper {
+	    constructor() {
+	        super(...arguments);
+	        this.getContentKey = (contentType) => (datum) => {
+	            switch (contentType) {
+	                case CANDLESTICK_TOOLTIP_KEYS.OPEN: {
+	                    const openField = this.series.getOpenField();
+	                    return openField;
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.HIGH: {
+	                    const highField = this.series.getHighField();
+	                    return highField;
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.LOW: {
+	                    const lowField = this.series.getLowField();
+	                    return lowField;
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.CLOSE: {
+	                    const closeField = this.series.getCloseField();
+	                    return closeField;
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.SERIES_FIELD: {
+	                    const seriesField = this.series.getSeriesField();
+	                    return seriesField;
+	                }
+	            }
+	            return null;
+	        };
+	        this.getContentValue = (contentType) => (datum) => {
+	            switch (contentType) {
+	                case CANDLESTICK_TOOLTIP_KEYS.OPEN: {
+	                    const openField = this.series.getOpenField();
+	                    return datum[openField];
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.HIGH: {
+	                    const highField = this.series.getHighField();
+	                    return datum[highField];
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.LOW: {
+	                    const lowField = this.series.getLowField();
+	                    return datum[lowField];
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.CLOSE: {
+	                    const closeField = this.series.getCloseField();
+	                    return datum[closeField];
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.SERIES_FIELD: {
+	                    const seriesField = this.series.getSeriesField();
+	                    return datum[seriesField];
+	                }
+	            }
+	            return null;
+	        };
+	        this.shapeColorCallback = (datum) => {
+	            return this.series.getMarkInName('candlestick').getAttribute('stroke', datum);
+	        };
+	    }
+	    getDefaultContentList(activeType) {
+	        return [
+	            {
+	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.OPEN),
+	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.OPEN)
+	            },
+	            {
+	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.HIGH),
+	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.HIGH)
+	            },
+	            {
+	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.LOW),
+	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.LOW)
+	            },
+	            {
+	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.CLOSE),
+	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.CLOSE)
+	            },
+	            {
+	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.SERIES_FIELD),
+	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.SERIES_FIELD)
+	            }
+	        ];
+	    }
+	}
+
+	const getCandlestickTheme = () => {
+	    const res = {
+	        rising: {
+	            style: {
+	                boxFill: '#FF0000',
+	                stroke: '#FF0000'
+	            }
+	        },
+	        falling: {
+	            style: {
+	                boxFill: '#00AA00',
+	                stroke: '#00AA00'
+	            }
+	        },
+	        doji: {
+	            style: {
+	                boxFill: '#000000',
+	                stroke: '#000000'
+	            }
+	        },
+	        candlestick: {
+	            style: {
+	                lineWidth: 1
+	            }
+	        }
+	    };
+	    return res;
+	};
+	const candlestick = getCandlestickTheme();
+
+	class CandlestickSeries extends vchart.CartesianSeries {
+	    constructor() {
+	        super(...arguments);
+	        this.type = CANDLESTICK_SERIES_TYPE;
+	        this._mergedStyles = {
+	            rising: {},
+	            falling: {},
+	            doji: {}
+	        };
+	    }
+	    getOpenField() {
+	        return this._openField;
+	    }
+	    getHighField() {
+	        return this._highField;
+	    }
+	    getLowField() {
+	        return this._lowField;
+	    }
+	    getCloseField() {
+	        return this._closeField;
+	    }
+	    getBoxFill() {
+	        return this._boxFill;
+	    }
+	    getStrokeColor() {
+	        return this._strokeColor;
+	    }
+	    setAttrFromSpec() {
+	        var _a, _b, _c, _d, _e, _f, _g, _h;
+	        super.setAttrFromSpec();
+	        const spec = this._spec;
+	        const CandlestickStyle = (_b = (_a = spec.candlestick) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
+	        this._openField = spec.openField;
+	        this._highField = spec.highField;
+	        this._lowField = spec.lowField;
+	        this._closeField = spec.closeField;
+	        this._boxWidth = CandlestickStyle.boxWidth;
+	        this._boxFill = CandlestickStyle.boxFill;
+	        this._strokeColor = CandlestickStyle.strokeColor;
+	        this._buildMergedStyles(CandlestickStyle, (_d = (_c = spec.rising) === null || _c === void 0 ? void 0 : _c.style) !== null && _d !== void 0 ? _d : {}, (_f = (_e = spec.falling) === null || _e === void 0 ? void 0 : _e.style) !== null && _f !== void 0 ? _f : {}, (_h = (_g = spec.doji) === null || _g === void 0 ? void 0 : _g.style) !== null && _h !== void 0 ? _h : {});
+	    }
+	    initMark() {
+	        this._candlestickMark = this._createMark(CandlestickSeries.mark.candlestick, {
+	            groupKey: this._seriesField,
+	            isSeriesMark: true
+	        });
+	    }
+	    initMarkStyle() {
+	        var _a;
+	        const candlestickMark = this._candlestickMark;
+	        if (candlestickMark) {
+	            const CandlestickStyles = {
+	                fill: (datum) => {
+	                    const boxFill = this.mergeStyle(datum).boxFill;
+	                    return boxFill;
+	                },
+	                stroke: (datum) => {
+	                    const strokeColor = this.mergeStyle(datum).stroke;
+	                    return strokeColor;
+	                },
+	                lineWidth: (datum) => {
+	                    const lineWidth = this.mergeStyle(datum).lineWidth;
+	                    return lineWidth;
+	                },
+	                boxWidth: (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth.bind(this),
+	                x: this.dataToPositionX.bind(this)
+	            };
+	            candlestickMark.setGlyphConfig({});
+	            this.setMarkStyle(candlestickMark, CandlestickStyles, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+	        }
+	    }
+	    initCandlestickMarkStyle() {
+	        var _a;
+	        const candlestickMark = this._candlestickMark;
+	        const axisHelper = this._yAxisHelper;
+	        if (candlestickMark && axisHelper) {
+	            const { dataToPosition } = axisHelper;
+	            const scale = (_a = axisHelper === null || axisHelper === void 0 ? void 0 : axisHelper.getScale) === null || _a === void 0 ? void 0 : _a.call(axisHelper, 0);
+	            this.setMarkStyle(candlestickMark, {
+	                open: (datum) => vchart.valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._openField), {
+	                    bandPosition: this._bandPosition
+	                }), scale),
+	                high: (datum) => vchart.valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._highField), {
+	                    bandPosition: this._bandPosition
+	                }), scale),
+	                low: (datum) => vchart.valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._lowField), {
+	                    bandPosition: this._bandPosition
+	                }), scale),
+	                close: (datum) => vchart.valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._closeField), {
+	                    bandPosition: this._bandPosition
+	                }), scale)
+	            }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+	        }
+	    }
+	    init(option) {
+	        super.init(option);
+	        this.initCandlestickMarkStyle();
+	    }
+	    _initAnimationSpec(config = {}) {
+	        const newConfig = merge({}, config);
+	        ['appear', 'enter', 'update', 'exit', 'disappear'].forEach(state => {
+	            if (newConfig[state] && newConfig[state].type === 'scaleIn') {
+	                newConfig[state].type = 'candlestickScaleIn';
+	            }
+	            else if (newConfig[state] && newConfig[state].type === 'scaleOut') {
+	                newConfig[state].type = 'candlestickScaleOut';
+	            }
+	        });
+	        return newConfig;
+	    }
+	    initAnimation() {
+	        var _a;
+	        const animationParams = vchart.getGroupAnimationParams(this);
+	        if (this._candlestickMark) {
+	            const newDefaultConfig = this._initAnimationSpec((_a = vchart.Factory.getAnimationInKey('scaleInOut')) === null || _a === void 0 ? void 0 : _a());
+	            const newConfig = this._initAnimationSpec(vchart.userAnimationConfig(CANDLESTICK_SERIES_TYPE, this._spec, this._markAttributeContext));
+	            this._candlestickMark.setAnimationConfig(vchart.animationConfig(newDefaultConfig, newConfig, animationParams));
+	        }
+	    }
+	    initTooltip() {
+	        this._tooltipHelper = new CandlestickSeriesTooltipHelper(this);
+	        this._candlestickMark && this._tooltipHelper.activeTriggerSet.mark.add(this._candlestickMark);
+	    }
+	    _buildMergedStyles(baseStyle, risingStyle, fallingStyle, dojiStyle) {
+	        this._mergedStyles.rising = merge({}, baseStyle, risingStyle);
+	        this._mergedStyles.falling = merge({}, baseStyle, fallingStyle);
+	        this._mergedStyles.doji = merge({}, baseStyle, dojiStyle);
+	    }
+	    mergeStyle(datum) {
+	        const open = this.getDatumPositionValues(datum, this._openField)[0];
+	        const close = this.getDatumPositionValues(datum, this._closeField)[0];
+	        if (open < close) {
+	            return this._mergedStyles.rising;
+	        }
+	        else if (open > close) {
+	            return this._mergedStyles.falling;
+	        }
+	        else {
+	            return this._mergedStyles.doji;
+	        }
+	    }
+	    _getMarkWidth() {
+	        if (this._autoBoxWidth) {
+	            return this._autoBoxWidth;
+	        }
+	        const bandAxisHelper = this._xAxisHelper;
+	        const xField = this._fieldX;
+	        const innerBandWidth = bandAxisHelper.getBandwidth(xField.length - 1);
+	        const autoBoxWidth = innerBandWidth / xField.length;
+	        this._autoBoxWidth = autoBoxWidth;
+	        return this._autoBoxWidth;
+	    }
+	    onLayoutEnd() {
+	        super.onLayoutEnd();
+	        this._autoBoxWidth = null;
+	    }
+	    getActiveMarks() {
+	        return [this._candlestickMark];
+	    }
+	}
+	CandlestickSeries.type = CANDLESTICK_SERIES_TYPE;
+	CandlestickSeries.builtInTheme = { candlestick };
+	CandlestickSeries.mark = CandlestickSeriesMark;
+	const registerCandlestickSeries = () => {
+	    registerCandlestickMark();
+	    vchart.registerSymbolMark();
+	    vchart.registerScaleInOutAnimation();
+	    vchart.registerCartesianBandAxis();
+	    vchart.registerCartesianLinearAxis();
+	    registerCandlestickScaleAnimation();
+	    vchart.Factory.registerSeries(CandlestickSeries.type, CandlestickSeries);
+	};
+
+	class CandlestickChart extends vchart.BaseChart {
+	    _setModelOption() {
+	        this._modelOption.getDimensionInfo = vchart.getCartesianDimensionInfo;
+	        this._modelOption.getDimensionInfoByValue = vchart.getDimensionInfoByValue;
+	        this._modelOption.getRectByDimensionData = vchart.getCartesianCrosshairRect;
+	    }
+	}
+	CandlestickChart.type = CANDLESTICK_CHART_TYPE;
+	CandlestickChart.seriesType = CANDLESTICK_SERIES_TYPE;
+	CandlestickChart.transformerConstructor = CandlestickChartSpecTransformer;
+	const registerCandlestickChart = () => {
+	    vchart.registerDimensionTooltipProcessor();
+	    vchart.registerMarkTooltipProcessor();
+	    vchart.registerDimensionEvents();
+	    vchart.registerDimensionHover();
+	    registerCandlestickSeries();
+	    vchart.Factory.registerChart(CandlestickChart.type, CandlestickChart);
+	};
+
 	const GROUP_ATTRIBUTES = ["x", "y", "dx", "dy", "scaleX", "scaleY", "angle", "anchor", "postMatrix", "visible", "clip", "pickable", "childrenPickable", "zIndex", "cursor"];
 	class AbstractComponent extends Group {
 	  constructor(attributes, options) {
@@ -25044,6 +25588,8 @@
 	exports.Bar3dSeries = Bar3dSeries;
 	exports.Bar3dSeriesSpecTransformer = Bar3dSeriesSpecTransformer;
 	exports.BarLinkComponent = BarLinkComponent;
+	exports.CandlestickChart = CandlestickChart;
+	exports.CandlestickChartSpecTransformer = CandlestickChartSpecTransformer;
 	exports.ConversionFunnelChart = ConversionFunnelChart;
 	exports.ConversionFunnelSeries = ConversionFunnelSeries;
 	exports.DefaultBandWidth = DefaultBandWidth;
@@ -25088,6 +25634,7 @@
 	exports.registerBar3dChart = registerBar3dChart;
 	exports.registerBar3dSeries = registerBar3dSeries;
 	exports.registerBarLink = registerBarLink;
+	exports.registerCandlestickChart = registerCandlestickChart;
 	exports.registerConversionFunnelChart = registerConversionFunnelChart;
 	exports.registerFunnel3dChart = registerFunnel3dChart;
 	exports.registerFunnel3dSeries = registerFunnel3dSeries;