@visactor/vchart 0.0.1-alpha.0

package/cjs/series/funnel/funnel.js

@@ -0,0 +1,524 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Funnel3dSeries = exports.FunnelSeries = void 0;
+
+const interface_1 = require("../interface"), base_series_1 = require("../base/base-series"), constant_1 = require("../../constant"), register_1 = require("../../data/register"), vdataset_1 = require("@visactor/vdataset"), interface_2 = require("../../mark/interface"), funnel_1 = require("../../data/transforms/funnel"), funnel_2 = require("../../constant/funnel"), util_1 = require("../../util"), tooltip_helper_1 = require("./tooltip-helper"), vutils_1 = require("@visactor/vutils"), config_1 = require("../../animation/config"), utils_1 = require("../../animation/utils"), series_data_1 = require("../base/series-data");
+
+class FunnelSeries extends base_series_1.BaseSeries {
+    constructor() {
+        super(...arguments), this.type = interface_1.SeriesTypeEnum.funnel, this._funnelMarkType = interface_2.MarkTypeEnum.polygon, 
+        this._funnelMark = null, this._funnelTransformMark = null, this._labelMark = null, 
+        this._transformLabelMark = null, this._funnelOuterLabelMark = {};
+    }
+    get categoryField() {
+        return this._categoryField;
+    }
+    setCategoryField(f) {
+        return this._categoryField = f, this._categoryField;
+    }
+    getValueField() {
+        return this._valueField;
+    }
+    setValueField(f) {
+        return this._valueField = f, this._valueField;
+    }
+    setAttrFromSpec() {
+        var _a, _b;
+        super.setAttrFromSpec(), this.setCategoryField(this._spec.categoryField), this.setValueField(this._spec.valueField), 
+        this._funnelOrient = null !== (_a = this._spec.funnelOrient) && void 0 !== _a ? _a : "top", 
+        this._shape = null !== (_b = this._spec.shape) && void 0 !== _b ? _b : "trapezoid", 
+        this._isHorizontal() ? this._funnelAlign = [ "top", "bottom" ].includes(this._spec.funnelAlign) ? this._spec.funnelAlign : "center" : this._funnelAlign = [ "left", "right" ].includes(this._spec.funnelAlign) ? this._spec.funnelAlign : "center", 
+        this._spec.categoryField && this.setSeriesField(this._spec.categoryField);
+    }
+    initData() {
+        if (super.initData(), !this._data) return;
+        (0, register_1.registerDataSetInstanceTransform)(this._dataSet, "funnel", funnel_1.funnel), 
+        (0, register_1.registerDataSetInstanceTransform)(this._dataSet, "funnelTransform", funnel_1.funnelTransform);
+        const viewDataTransform = new vdataset_1.DataView(this._dataSet);
+        viewDataTransform.parse([ this.getViewData() ], {
+            type: "dataview"
+        }), viewDataTransform.name = `${constant_1.PREFIX}_series_${this.id}_viewDataTransform`, 
+        this._viewDataTransform = new series_data_1.SeriesData(this._option, viewDataTransform);
+    }
+    getStatisticFields() {
+        const fields = [];
+        return fields.push({
+            key: this._categoryField,
+            operations: [ "values" ]
+        }), fields.push({
+            key: this._valueField,
+            operations: [ "max", "min" ]
+        }), fields;
+    }
+    _statisticViewData() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        super._statisticViewData(), this._data.getDataView().transform({
+            type: "funnel",
+            options: {
+                valueField: this.getValueField(),
+                isCone: this._spec.isCone,
+                asCurrentValue: funnel_2.FUNNEL_CURRENT_VALUE,
+                asTransformRatio: funnel_2.FUNNEL_TRANSFORM_RATIO,
+                asReachRatio: funnel_2.FUNNEL_REACH_RATIO,
+                asHeightRatio: funnel_2.FUNNEL_HEIGHT_RATIO,
+                asValueRatio: funnel_2.FUNNEL_VALUE_RATIO,
+                asNextValueRatio: funnel_2.FUNNEL_NEXT_VALUE_RATIO,
+                asLastValueRatio: funnel_2.FUNNEL_LAST_VALUE_RATIO,
+                asLastValue: funnel_2.FUNNEL_LAST_VALUE,
+                asNextValue: funnel_2.FUNNEL_NEXT_VALUE,
+                range: {
+                    min: null !== (_b = null === (_a = this._spec.range) || void 0 === _a ? void 0 : _a.min) && void 0 !== _b ? _b : null === (_d = null === (_c = this.getViewDataStatistics().latestData) || void 0 === _c ? void 0 : _c[this.getValueField()]) || void 0 === _d ? void 0 : _d.min,
+                    max: null !== (_f = null === (_e = this._spec.range) || void 0 === _e ? void 0 : _e.max) && void 0 !== _f ? _f : null === (_h = null === (_g = this.getViewDataStatistics().latestData) || void 0 === _g ? void 0 : _g[this.getValueField()]) || void 0 === _h ? void 0 : _h.max
+                }
+            }
+        }), null === (_j = this._viewDataTransform.getDataView()) || void 0 === _j || _j.transform({
+            type: "funnelTransform",
+            options: {
+                asIsTransformLevel: funnel_2.FUNNEL_TRANSFORM_LEVEL
+            }
+        });
+    }
+    initMark() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        if (this._funnelMark = this._createMark(this._funnelMarkType, "funnel", {
+            themeSpec: null === (_a = this._theme) || void 0 === _a ? void 0 : _a.funnel,
+            defaultMorphElementKey: this._seriesField,
+            key: this._seriesField,
+            groupKey: this._seriesField,
+            isSeriesMark: !0
+        }), this._spec.isTransform && (this._funnelTransformMark = this._createMark(this._funnelMarkType, "transform", {
+            themeSpec: null === (_b = this._theme) || void 0 === _b ? void 0 : _b.transform,
+            key: this._seriesField,
+            skipBeforeLayouted: !1,
+            dataView: this._viewDataTransform.getDataView(),
+            dataProductId: this._viewDataTransform.getProductId()
+        })), (null === (_d = null === (_c = this._spec) || void 0 === _c ? void 0 : _c.label) || void 0 === _d ? void 0 : _d.visible) && (this._labelMark = this._createMark(interface_2.MarkTypeEnum.text, "label", {
+            themeSpec: null === (_e = this._theme) || void 0 === _e ? void 0 : _e.label,
+            key: this._seriesField
+        })), (null === (_g = null === (_f = this._spec) || void 0 === _f ? void 0 : _f.transformLabel) || void 0 === _g ? void 0 : _g.visible) && (this._transformLabelMark = this._createMark(interface_2.MarkTypeEnum.text, "transformLabel", {
+            themeSpec: null === (_h = this._theme) || void 0 === _h ? void 0 : _h.transformLabel,
+            key: this._seriesField,
+            skipBeforeLayouted: !1,
+            dataView: this._viewDataTransform.getDataView(),
+            dataProductId: this._viewDataTransform.getProductId()
+        })), null === (_k = null === (_j = this._spec) || void 0 === _j ? void 0 : _j.outerLabel) || void 0 === _k ? void 0 : _k.visible) {
+            const {line: line} = null !== (_l = this._spec.outerLabel) && void 0 !== _l ? _l : {}, {line: lineTheme} = null !== (_o = null === (_m = this._theme) || void 0 === _m ? void 0 : _m.outerLabel) && void 0 !== _o ? _o : {};
+            this._funnelOuterLabelMark.label = this._createMark(interface_2.MarkTypeEnum.text, "outerLabelText", {
+                themeSpec: null === (_p = this._theme) || void 0 === _p ? void 0 : _p.outerLabel,
+                key: this._seriesField,
+                markSpec: this._spec.outerLabel,
+                depend: this._labelMark
+            }), this._funnelOuterLabelMark.line = this._createMark(interface_2.MarkTypeEnum.rule, "outerLabelLine", {
+                themeSpec: lineTheme,
+                key: this._seriesField,
+                markSpec: line,
+                depend: [ this._funnelOuterLabelMark.label, this._labelMark ]
+            });
+        }
+    }
+    initTooltip() {
+        this._tooltipHelper = new tooltip_helper_1.FunnelSeriesTooltipHelper(this);
+    }
+    getDimensionField() {
+        return this._seriesField ? [ this._seriesField ] : [];
+    }
+    getMeasureField() {
+        return [ this._valueField ];
+    }
+    getGroupFields() {
+        return null;
+    }
+    initMarkStyle() {
+        var _a, _b, _c, _d;
+        const funnelMark = this._funnelMark;
+        funnelMark && (this.setMarkStyle(funnelMark, {
+            points: datum => this.getPoints(datum),
+            visible: datum => (0, vutils_1.isValid)(datum[this._valueField]),
+            fill: this.getColorAttribute()
+        }, "normal", constant_1.AttributeLevel.Series), this._trigger.registerMark(funnelMark), 
+        null === (_a = this._tooltipHelper) || void 0 === _a || _a.activeTriggerSet.mark.add(funnelMark));
+        const funnelTransformMark = this._funnelTransformMark;
+        funnelTransformMark && (this.setMarkStyle(funnelTransformMark, {
+            points: datum => this.getPoints(datum)
+        }, "normal", constant_1.AttributeLevel.Series), this._trigger.registerMark(funnelTransformMark), 
+        null === (_b = this._tooltipHelper) || void 0 === _b || _b.activeTriggerSet.mark.add(funnelTransformMark));
+        const labelMark = this._labelMark;
+        labelMark && (this.setMarkStyle(labelMark, {
+            text: datum => `${datum[this.categoryField]} ${datum[this.getValueField()]}`,
+            x: datum => this._computeLabelPosition(datum).x,
+            y: datum => this._computeLabelPosition(datum).y,
+            limit: datum => this._computeLabelLimit(datum, this._spec.label),
+            stroke: this.getColorAttribute()
+        }, "normal", constant_1.AttributeLevel.Series), this._trigger.registerMark(labelMark), 
+        null === (_c = this._tooltipHelper) || void 0 === _c || _c.activeTriggerSet.mark.add(labelMark));
+        const transformLabelMark = this._transformLabelMark;
+        transformLabelMark && (this.setMarkStyle(transformLabelMark, {
+            text: datum => `${(100 * (0, util_1.field)(funnel_2.FUNNEL_REACH_RATIO).bind(this)(datum)).toFixed(1)}%`,
+            x: datum => this._computeLabelPosition(datum).x,
+            y: datum => this._computeLabelPosition(datum).y,
+            limit: datum => this._computeLabelLimit(datum, this._spec.transformLabel)
+        }, "normal", constant_1.AttributeLevel.Series), this._trigger.registerMark(transformLabelMark), 
+        null === (_d = this._tooltipHelper) || void 0 === _d || _d.activeTriggerSet.mark.add(transformLabelMark));
+        const outerLabelMark = this._funnelOuterLabelMark.label;
+        outerLabelMark && this.setMarkStyle(outerLabelMark, {
+            text: datum => `${datum[this.categoryField]}`,
+            x: datum => this._computeOuterLabelPosition(datum).x,
+            y: datum => this._computeOuterLabelPosition(datum).y,
+            textAlign: datum => this._computeOuterLabelPosition(datum).align,
+            textBaseline: datum => this._computeOuterLabelPosition(datum).textBaseline,
+            limit: datum => this._computeOuterLabelLimit(datum)
+        }, "normal", constant_1.AttributeLevel.Series);
+        const outerLabelLineMark = this._funnelOuterLabelMark.line;
+        outerLabelLineMark && outerLabelMark && this.setMarkStyle(outerLabelLineMark, {
+            x: datum => this._computeOuterLabelLinePosition(datum).x1,
+            y: datum => this._computeOuterLabelLinePosition(datum).y1,
+            x1: datum => this._computeOuterLabelLinePosition(datum).x2,
+            y1: datum => this._computeOuterLabelLinePosition(datum).y2
+        }, "normal", constant_1.AttributeLevel.Series);
+    }
+    initAnimation() {
+        var _a, _b, _c, _d, _e;
+        const appearPreset = null !== (_c = null === (_b = null === (_a = this._spec) || void 0 === _a ? void 0 : _a.animationAppear) || void 0 === _b ? void 0 : _b.preset) && void 0 !== _c ? _c : "clipIn";
+        "clipIn" === appearPreset && this._rootMark && this._rootMark.setAnimationConfig((0, 
+        utils_1.animationConfig)(config_1.DEFAULT_MARK_ANIMATION.cartesianGroup({
+            direction: () => this._isHorizontal() ? "x" : "y",
+            width: () => this.getLayoutRect().width,
+            height: () => this.getLayoutRect().height,
+            orient: () => this._isReverse() ? "negative" : "positive"
+        }, appearPreset), (0, utils_1.userAnimationConfig)("group", this._spec))), [ this._labelMark, null === (_d = this._funnelOuterLabelMark) || void 0 === _d ? void 0 : _d.label, this._transformLabelMark ].forEach((m => {
+            m && m.setAnimationConfig((0, utils_1.animationConfig)(config_1.DEFAULT_MARK_ANIMATION.label(), (0, 
+            utils_1.userAnimationConfig)(m.name, this._spec)));
+        })), [ this._funnelMark, this._funnelTransformMark ].forEach((m => {
+            m && m.setAnimationConfig((0, utils_1.animationConfig)(config_1.DEFAULT_MARK_ANIMATION.funnel({}, appearPreset), (0, 
+            utils_1.userAnimationConfig)(m.name, this._spec)));
+        })), (null === (_e = this._funnelOuterLabelMark) || void 0 === _e ? void 0 : _e.line) && this._funnelOuterLabelMark.line.setAnimationConfig((0, 
+        utils_1.animationConfig)(config_1.DEFAULT_MARK_ANIMATION.label(), (0, utils_1.userAnimationConfig)("outerLabelLine", this._spec)));
+    }
+    initGroups() {}
+    getStackGroupFields() {
+        return [];
+    }
+    getStackValueField() {
+        return null;
+    }
+    setValueFieldToStack() {}
+    setValueFieldToPercent() {}
+    initEvent() {
+        var _a;
+        super.initEvent(), null === (_a = this._viewDataTransform.getDataView()) || void 0 === _a || _a.target.addListener("change", (d => {
+            this._viewDataTransform.updateData();
+        }));
+    }
+    getPoints(datum) {
+        const isTransformLevel = this.isTransformLevel(datum), heightHalf = this._getMainAxisLength(isTransformLevel) / 2;
+        let upperLeft, lowerLeft;
+        isTransformLevel ? (upperLeft = "rect" === this._shape ? this._getSecondaryAxisLength(datum[funnel_2.FUNNEL_LAST_VALUE_RATIO]) / 2 : this._getSecondaryAxisLength(datum[funnel_2.FUNNEL_VALUE_RATIO]) / 2, 
+        lowerLeft = this._getSecondaryAxisLength(datum[funnel_2.FUNNEL_VALUE_RATIO]) / 2) : (upperLeft = this._getSecondaryAxisLength(datum[funnel_2.FUNNEL_VALUE_RATIO]) / 2, 
+        lowerLeft = "rect" === this._shape ? upperLeft : this._getSecondaryAxisLength(datum[funnel_2.FUNNEL_NEXT_VALUE_RATIO]) / 2);
+        const {x: x, y: y} = this._getPositionByData(datum), points = this._getPolygonPoints([ x, y ], upperLeft, lowerLeft, upperLeft, lowerLeft, heightHalf);
+        return "center" !== this._funnelAlign && this._adjustPoints(points), points;
+    }
+    isTransformLevel(datum) {
+        return !!(null == datum ? void 0 : datum[funnel_2.FUNNEL_TRANSFORM_LEVEL]);
+    }
+    _buildMarkAttributeContext() {
+        super._buildMarkAttributeContext(), this._markAttributeContext.valueToPosition = this.valueToPosition.bind(this);
+    }
+    valueToPosition(category) {
+        var _a, _b, _c;
+        const innerDatum = null === (_c = null === (_b = null === (_a = this.getViewData()) || void 0 === _a ? void 0 : _a.latestData) || void 0 === _b ? void 0 : _b.find) || void 0 === _c ? void 0 : _c.call(_b, (d => d[this._categoryField] === category));
+        return (0, vutils_1.isValid)(innerDatum) ? this._getPolygonCenter(this.getPoints(innerDatum)) : null;
+    }
+    dataToPosition(datum) {
+        return this.valueToPosition(datum[this._categoryField]);
+    }
+    dataToPositionX(datum) {
+        return this.dataToPosition(datum).x;
+    }
+    dataToPositionY(datum) {
+        return this.dataToPosition(datum).y;
+    }
+    _getMainAxisLength(isTransform = !1) {
+        var _a;
+        const funnelCount = this.getViewDataStatistics().latestData[this.categoryField].values.length, viewHeight = this._isHorizontal() ? this.getLayoutRect().width : this.getLayoutRect().height, hasTransform = !!this._spec.isTransform, gap = hasTransform ? 0 : null !== (_a = this._spec.gap) && void 0 !== _a ? _a : 0, transformCount = hasTransform ? Math.max(0, funnelCount - 1) : 0, funnelHeight = (viewHeight - gap * Math.max(0, funnelCount - 1)) / (funnelCount + .5 * transformCount);
+        return isTransform ? hasTransform ? .5 * funnelHeight : 0 : funnelHeight;
+    }
+    _getSecondaryAxisLength(ratio) {
+        const validRatio = Number.isNaN(ratio) || !Number.isFinite(ratio) ? 0 : ratio, maxSize = this._computeMaxSize(), minSize = this._computeMinSize();
+        return minSize + (maxSize - minSize) * validRatio;
+    }
+    _getPositionByData(datum) {
+        var _a;
+        const index = null === (_a = this.getViewData().latestData) || void 0 === _a ? void 0 : _a.findIndex((d => d[this._seriesField] === datum[this._seriesField]));
+        if (!(0, vutils_1.isValid)(index) || index < 0) return {};
+        const isTransform = this.isTransformLevel(datum), isHorizontal = this._isHorizontal(), viewWidth = isHorizontal ? this.getLayoutRect().height : this.getLayoutRect().width, viewHeight = isHorizontal ? this.getLayoutRect().width : this.getLayoutRect().height, centerX = viewWidth / 2;
+        let centerY = 0;
+        const funnelHeight = this._getMainAxisLength(), transformHeight = this._getMainAxisLength(!0);
+        return centerY += index * (funnelHeight + transformHeight), centerY += isTransform ? -transformHeight / 2 : funnelHeight / 2, 
+        !this._spec.isTransform && this._spec.gap && (centerY += this._spec.gap * index), 
+        this._isReverse() && (centerY = viewHeight - centerY), this._isHorizontal() ? {
+            x: centerY,
+            y: centerX
+        } : {
+            x: centerX,
+            y: centerY
+        };
+    }
+    _getPolygonPoints(center, upperLeft, lowerLeft, upperRight, lowerRight, heightHalf) {
+        const x = center[0], y = center[1];
+        switch (this._funnelOrient) {
+          case "left":
+            return [ {
+                x: x - heightHalf,
+                y: y + upperLeft
+            }, {
+                x: x - heightHalf,
+                y: y - upperRight
+            }, {
+                x: x + heightHalf,
+                y: y - lowerRight
+            }, {
+                x: x + heightHalf,
+                y: y + lowerLeft
+            } ];
+
+          case "right":
+            return [ {
+                x: x + heightHalf,
+                y: y - upperRight
+            }, {
+                x: x + heightHalf,
+                y: y + upperRight
+            }, {
+                x: x - heightHalf,
+                y: y + lowerLeft
+            }, {
+                x: x - heightHalf,
+                y: y - lowerLeft
+            } ];
+
+          case "bottom":
+            return [ {
+                x: x + upperLeft,
+                y: y + heightHalf
+            }, {
+                x: x - upperRight,
+                y: y + heightHalf
+            }, {
+                x: x - lowerRight,
+                y: y - heightHalf
+            }, {
+                x: x + lowerLeft,
+                y: y - heightHalf
+            } ];
+
+          default:
+            return [ {
+                x: x - upperLeft,
+                y: y - heightHalf
+            }, {
+                x: x + upperRight,
+                y: y - heightHalf
+            }, {
+                x: x + lowerRight,
+                y: y + heightHalf
+            }, {
+                x: x - lowerLeft,
+                y: y + heightHalf
+            } ];
+        }
+    }
+    _getPolygonCenter(points) {
+        if (this._isHorizontal()) {
+            const p0_x = (points[0].x + points[3].x) / 2, p0_y = (points[0].y + points[3].y) / 2;
+            return {
+                x: (p0_x + (points[1].x + points[2].x) / 2) / 2,
+                y: (p0_y + (points[1].y + points[2].y) / 2) / 2
+            };
+        }
+        const p0_x = (points[0].x + points[3].x) / 2, p0_y = (points[0].y + points[3].y) / 2;
+        return {
+            x: (p0_x + (points[1].x + points[2].x) / 2) / 2,
+            y: (p0_y + (points[1].y + points[2].y) / 2) / 2
+        };
+    }
+    _adjustPoints(points) {
+        let upperOffset, lowerOffset, dirKey;
+        return this._isHorizontal() ? (dirKey = "y", "left" === this._funnelOrient ? (upperOffset = "bottom" === this._funnelAlign ? -points[1].y : points[1].y, 
+        lowerOffset = "bottom" === this._funnelAlign ? -points[2].y : points[2].y) : (upperOffset = "bottom" === this._funnelAlign ? -points[0].y : points[0].y, 
+        lowerOffset = "bottom" === this._funnelAlign ? -points[3].y : points[3].y)) : (dirKey = "x", 
+        "top" === this._funnelOrient ? (upperOffset = "left" === this._funnelAlign ? points[0].x : -points[0].x, 
+        lowerOffset = "left" === this._funnelAlign ? points[3].x : -points[3].x) : (upperOffset = "left" === this._funnelAlign ? points[1].x : -points[1].x, 
+        lowerOffset = "left" === this._funnelAlign ? points[2].x : -points[2].x)), points[0][dirKey] -= upperOffset, 
+        points[1][dirKey] -= upperOffset, points[2][dirKey] -= lowerOffset, points[3][dirKey] -= lowerOffset, 
+        points;
+    }
+    _computeLabelPosition(datum) {
+        const points = this.getPoints(datum);
+        return this._getPolygonCenter(points);
+    }
+    _computeLabelLimit(datum, labelSpec) {
+        const limit = null == labelSpec ? void 0 : labelSpec.limit;
+        if ((0, util_1.isNumber)(limit)) return limit;
+        const points = this.getPoints(datum);
+        return "shapeSize" === limit ? this._isHorizontal() ? Math.abs(points[3].x - points[0].x) : (Math.abs(points[0].x - points[1].x) + Math.abs(points[2].x - points[3].x)) / 2 : this._isHorizontal() ? Math.abs(points[3].x - points[0].x) : this._computeMaxSize();
+    }
+    _computeOuterLabelPosition(datum) {
+        var _a, _b;
+        let x, y, position = null === (_a = this._spec.outerLabel) || void 0 === _a ? void 0 : _a.position, textAlign = "center", textBaseline = "middle";
+        if (position = this._isHorizontal() ? [ "top", "bottom" ].includes(position) ? position : "bottom" === this._funnelAlign ? "top" : "bottom" : [ "left", "right" ].includes(position) ? position : "left" === this._funnelAlign ? "right" : "left", 
+        !1 !== (null === (_b = this._spec.outerLabel) || void 0 === _b ? void 0 : _b.alignLabel)) ({x: x, y: y} = this._getPositionByData(datum)), 
+        "left" === position ? (x = 0, textAlign = "left") : "right" === position ? (x = this.getLayoutRect().width, 
+        textAlign = "right") : "top" === position ? (y = 0, textBaseline = "top") : "bottom" === position && (y = this.getLayoutRect().height, 
+        textBaseline = "bottom"); else {
+            const {x2: x2, y2: y2} = this._computeOuterLabelLinePosition(datum);
+            x = x2, y = y2, "left" === position ? (x -= funnel_2.FUNNEL_LABEL_SPACE_WIDTH, textAlign = "right") : "right" === position ? (x += funnel_2.FUNNEL_LABEL_SPACE_WIDTH, 
+            textAlign = "left") : "top" === position ? (y -= funnel_2.FUNNEL_LABEL_SPACE_WIDTH, 
+            textBaseline = "bottom") : "bottom" === position && (y += funnel_2.FUNNEL_LABEL_SPACE_WIDTH, 
+            textBaseline = "top");
+        }
+        return {
+            x: x,
+            y: y,
+            align: textAlign,
+            textBaseline: textBaseline
+        };
+    }
+    _computeOuterLabelLimit(datum) {
+        var _a, _b, _c, _d, _e, _f;
+        if (this._isHorizontal()) return this._getMainAxisLength(this.isTransformLevel(datum));
+        const points = this.getPoints(datum), shapeMiddleWidth = (Math.abs(points[0].x - points[1].x) + Math.abs(points[2].x - points[3].x)) / 2, funnelLabelBounds = null === (_d = null === (_c = null === (_b = null === (_a = this._labelMark) || void 0 === _a ? void 0 : _a.getProduct()) || void 0 === _b ? void 0 : _b.elements) || void 0 === _c ? void 0 : _c.find((el => {
+            var _a;
+            return (null === (_a = el.data[0]) || void 0 === _a ? void 0 : _a[this.categoryField]) === datum[this.categoryField];
+        }))) || void 0 === _d ? void 0 : _d.getBounds(), funnelLabelWidth = funnelLabelBounds ? funnelLabelBounds.x2 - funnelLabelBounds.x1 : 0;
+        return this.getLayoutRect().width / 2 - Math.max(shapeMiddleWidth / 2, funnelLabelWidth / 2) - funnel_2.FUNNEL_LABEL_LINE_LENGTH - 2 * (null !== (_f = null === (_e = this._spec.outerLabel) || void 0 === _e ? void 0 : _e.spaceWidth) && void 0 !== _f ? _f : funnel_2.FUNNEL_LABEL_SPACE_WIDTH);
+    }
+    _computeOuterLabelLinePosition(datum) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        const outerLabelMarkBounds = null === (_e = null === (_d = null === (_c = null === (_b = null === (_a = this._funnelOuterLabelMark) || void 0 === _a ? void 0 : _a.label) || void 0 === _b ? void 0 : _b.getProduct()) || void 0 === _c ? void 0 : _c.elements) || void 0 === _d ? void 0 : _d.find((el => {
+            var _a;
+            return (null === (_a = el.data[0]) || void 0 === _a ? void 0 : _a[this.categoryField]) === datum[this.categoryField];
+        }))) || void 0 === _e ? void 0 : _e.getBounds(), labelMarkBounds = null === (_j = null === (_h = null === (_g = null === (_f = this._labelMark) || void 0 === _f ? void 0 : _f.getProduct()) || void 0 === _g ? void 0 : _g.elements) || void 0 === _h ? void 0 : _h.find((el => {
+            var _a;
+            return (null === (_a = el.data[0]) || void 0 === _a ? void 0 : _a[this.categoryField]) === datum[this.categoryField];
+        }))) || void 0 === _j ? void 0 : _j.getBounds();
+        let x1, x2, y1, y2;
+        if (this._isHorizontal()) {
+            const spaceWidth = null !== (_l = null === (_k = this._spec.outerLabel) || void 0 === _k ? void 0 : _k.spaceWidth) && void 0 !== _l ? _l : funnel_2.FUNNEL_LABEL_SPACE_WIDTH, points = this.getPoints(datum), shapeMiddleHeight = (Math.abs(points[0].y - points[1].y) + Math.abs(points[2].y - points[3].y)) / 2;
+            return "top" === this._spec.outerLabel.position || "bottom" === this._funnelAlign ? (y1 = this._getPolygonCenter(points).y - shapeMiddleHeight / 2 - spaceWidth, 
+            y2 = !1 !== (null === (_m = this._spec.outerLabel) || void 0 === _m ? void 0 : _m.alignLabel) ? (null == outerLabelMarkBounds ? void 0 : outerLabelMarkBounds.y2) + spaceWidth : y1 - spaceWidth, 
+            x1 = this._getPolygonCenter(points).x, y1 - y2 < funnel_2.FUNNEL_LABEL_LINE_LENGTH && (y2 = y1 - funnel_2.FUNNEL_LABEL_LINE_LENGTH), 
+            x2 = x1) : (y1 = this._getPolygonCenter(points).y + shapeMiddleHeight / 2 + spaceWidth, 
+            y2 = !1 !== (null === (_o = this._spec.outerLabel) || void 0 === _o ? void 0 : _o.alignLabel) ? (null == outerLabelMarkBounds ? void 0 : outerLabelMarkBounds.y1) - spaceWidth : y1 + spaceWidth, 
+            x1 = this._getPolygonCenter(points).x, y2 - y1 < funnel_2.FUNNEL_LABEL_LINE_LENGTH && (y2 = y1 + funnel_2.FUNNEL_LABEL_LINE_LENGTH), 
+            x2 = x1), {
+                x1: x1,
+                x2: x2,
+                y1: y1,
+                y2: y2
+            };
+        }
+        const points = this.getPoints(datum), shapeMiddleWidth = (Math.abs(points[0].x - points[1].x) + Math.abs(points[2].x - points[3].x)) / 2, labelWidth = (null == labelMarkBounds ? void 0 : labelMarkBounds.x2) - (null == labelMarkBounds ? void 0 : labelMarkBounds.x1) || 0, spaceWidth = null !== (_q = null === (_p = this._spec.outerLabel) || void 0 === _p ? void 0 : _p.spaceWidth) && void 0 !== _q ? _q : funnel_2.FUNNEL_LABEL_SPACE_WIDTH;
+        return "right" === this._spec.outerLabel.position || "left" === this._funnelAlign ? (x1 = this._getPolygonCenter(points).x + Math.max(labelWidth / 2, shapeMiddleWidth / 2) + spaceWidth, 
+        x2 = !1 !== (null === (_r = this._spec.outerLabel) || void 0 === _r ? void 0 : _r.alignLabel) ? (null == outerLabelMarkBounds ? void 0 : outerLabelMarkBounds.x1) - spaceWidth : x1 + spaceWidth, 
+        y1 = this._getPolygonCenter(points).y, x2 - x1 < funnel_2.FUNNEL_LABEL_LINE_LENGTH && (x2 = x1 + funnel_2.FUNNEL_LABEL_LINE_LENGTH), 
+        y2 = y1) : (x1 = this._getPolygonCenter(points).x - Math.max(labelWidth / 2, shapeMiddleWidth / 2) - spaceWidth, 
+        x2 = !1 !== (null === (_s = this._spec.outerLabel) || void 0 === _s ? void 0 : _s.alignLabel) ? (null == outerLabelMarkBounds ? void 0 : outerLabelMarkBounds.x2) + spaceWidth : x1 - spaceWidth, 
+        y1 = this._getPolygonCenter(points).y, x1 - x2 < funnel_2.FUNNEL_LABEL_LINE_LENGTH && (x2 = x1 - funnel_2.FUNNEL_LABEL_LINE_LENGTH), 
+        y2 = y1), {
+            x1: x1,
+            x2: x2,
+            y1: y1,
+            y2: y2
+        };
+    }
+    _computeMaxSize() {
+        var _a;
+        const size = this._isHorizontal() ? this.getLayoutRect().height : this.getLayoutRect().width, maxSize = null !== (_a = this._spec.maxSize) && void 0 !== _a ? _a : funnel_2.FUNNEL_MAX_SIZE;
+        return (0, util_1.calcLayoutNumber)(maxSize, size);
+    }
+    _computeMinSize() {
+        var _a;
+        const size = this._isHorizontal() ? this.getLayoutRect().height : this.getLayoutRect().width, minSize = null !== (_a = this._spec.minSize) && void 0 !== _a ? _a : funnel_2.FUNNEL_MIN_SIZE;
+        return (0, util_1.calcLayoutNumber)(minSize, size);
+    }
+    _isHorizontal() {
+        return "left" === this._funnelOrient || "right" === this._funnelOrient;
+    }
+    _isReverse() {
+        return "bottom" === this._funnelOrient || "right" === this._funnelOrient;
+    }
+    setValueFieldToStackOffsetSilhouette() {}
+    getDefaultShapeType() {
+        return "square";
+    }
+}
+
+exports.FunnelSeries = FunnelSeries, FunnelSeries.type = interface_1.SeriesTypeEnum.funnel;
+
+class Funnel3dSeries extends FunnelSeries {
+    constructor() {
+        super(...arguments), this.type = interface_1.SeriesTypeEnum.funnel3d, this._funnelMarkType = interface_2.MarkTypeEnum.pyramid3d;
+    }
+    initMark() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        if (this._funnelMark = this._createMark(this._funnelMarkType, "funnel3d", {
+            themeSpec: null === (_a = this._theme) || void 0 === _a ? void 0 : _a.funnel,
+            key: this._seriesField,
+            isSeriesMark: !0
+        }), this._spec.isTransform && (this._funnelTransformMark = this._createMark(this._funnelMarkType, "transform", {
+            themeSpec: null === (_b = this._theme) || void 0 === _b ? void 0 : _b.transform,
+            key: this._seriesField,
+            skipBeforeLayouted: !1,
+            dataView: this._viewDataTransform.getDataView(),
+            dataProductId: this._viewDataTransform.getProductId()
+        })), (null === (_d = null === (_c = this._spec) || void 0 === _c ? void 0 : _c.label) || void 0 === _d ? void 0 : _d.visible) && (this._labelMark = this._createMark(interface_2.MarkTypeEnum.text, "label", {
+            themeSpec: null === (_e = this._theme) || void 0 === _e ? void 0 : _e.label,
+            key: this._seriesField,
+            support3d: this._spec.label.support3d
+        })), (null === (_g = null === (_f = this._spec) || void 0 === _f ? void 0 : _f.transformLabel) || void 0 === _g ? void 0 : _g.visible) && (this._transformLabelMark = this._createMark(interface_2.MarkTypeEnum.text, "transformLabel", {
+            themeSpec: null === (_h = this._theme) || void 0 === _h ? void 0 : _h.transformLabel,
+            key: this._seriesField,
+            skipBeforeLayouted: !1,
+            dataView: this._viewDataTransform.getDataView(),
+            dataProductId: this._viewDataTransform.getProductId()
+        })), null === (_k = null === (_j = this._spec) || void 0 === _j ? void 0 : _j.outerLabel) || void 0 === _k ? void 0 : _k.visible) {
+            const {line: line} = null !== (_l = this._spec.outerLabel) && void 0 !== _l ? _l : {}, {line: lineTheme} = null !== (_o = null === (_m = this._theme) || void 0 === _m ? void 0 : _m.outerLabel) && void 0 !== _o ? _o : {};
+            this._funnelOuterLabelMark.label = this._createMark(interface_2.MarkTypeEnum.text, "outerLabelText", {
+                themeSpec: null === (_p = this._theme) || void 0 === _p ? void 0 : _p.outerLabel,
+                key: this._seriesField,
+                markSpec: this._spec.outerLabel,
+                depend: this._labelMark
+            }), this._funnelOuterLabelMark.line = this._createMark(interface_2.MarkTypeEnum.rule, "outerLabelLine", {
+                themeSpec: lineTheme,
+                key: this._seriesField,
+                markSpec: line,
+                depend: [ this._funnelOuterLabelMark.label, this._labelMark ]
+            });
+        }
+    }
+    initMarkStyle() {
+        super.initMarkStyle();
+        const funnelMark = this._funnelMark;
+        funnelMark && this.setMarkStyle(funnelMark, {
+            z: _ => {
+                if (this._isHorizontal()) return 0;
+                const points = this.getPoints(_), width = Math.max(Math.abs(points[0].x - points[1].x), Math.abs(points[2].x - points[3].x));
+                return (this._computeMaxSize() - width) / 2;
+            }
+        }, "normal", constant_1.AttributeLevel.Series);
+        const labelMark = this._labelMark;
+        labelMark && this.setMarkStyle(labelMark, {
+            z: _ => {
+                if (this._isHorizontal()) return 0;
+                const points = this.getPoints(_), width = Math.max(Math.abs(points[0].x - points[1].x), Math.abs(points[2].x - points[3].x));
+                return (this._computeMaxSize() - width) / 2;
+            }
+        }, "normal", constant_1.AttributeLevel.Series);
+    }
+}
+
+exports.Funnel3dSeries = Funnel3dSeries, Funnel3dSeries.type = interface_1.SeriesTypeEnum.funnel3d;
+//# sourceMappingURL=funnel.js.map