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

package/build/index.js

@@ -21974,6 +21974,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 +25574,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 +25620,7 @@
 	exports.registerBar3dChart = registerBar3dChart;
 	exports.registerBar3dSeries = registerBar3dSeries;
 	exports.registerBarLink = registerBarLink;
+	exports.registerCandlestickChart = registerCandlestickChart;
 	exports.registerConversionFunnelChart = registerConversionFunnelChart;
 	exports.registerFunnel3dChart = registerFunnel3dChart;
 	exports.registerFunnel3dSeries = registerFunnel3dSeries;