@visactor/vchart 2.0.8 → 2.0.10-alpha.0

package/esm/component/data-zoom/data-filter-base-component.js

@@ -4,15 +4,15 @@ import { BaseComponent } from "../base/base-component";
 
 import { ComponentTypeEnum } from "../interface";
 
-import { dataFilterComputeDomain, dataFilterWithNewDomain, lockStatisticsFilter } from "./util";
+import { dataFilterComputeDomain, dataFilterWithNewDomain, dataToStatePoint, getAxisBandSize, isReverse, lockStatisticsFilter, modeCheck, parseDomainFromStateAndValue, parseDomainFromState, statePointToData } from "./util";
 
 import { registerDataSetInstanceParser, registerDataSetInstanceTransform } from "../../data/register";
 
-import { BandScale, isContinuous, isDiscrete } from "@visactor/vscale";
+import { BandScale, isContinuous, isDiscrete, LinearScale } from "@visactor/vscale";
 
 import { getDirectionByOrient, getOrient } from "../axis/cartesian/util/common";
 
-import { mixin, clamp, isNil, merge, isEqual, isValid, array, minInArray, maxInArray, abs, last, throttle } from "@visactor/vutils";
+import { mixin, isNil, isEqual, isValid, array, minInArray, maxInArray, last, isValidNumber } from "@visactor/vutils";
 
 import { dataViewParser, DataView } from "@visactor/vdataset";
 
@@ -24,47 +24,49 @@ import { TransformLevel } from "../../data/initialize";
 
 import { AttributeLevel } from "../../constant/attribute";
 
+import { DataFilterEvent } from "./data-filter-event";
+
+import { ChartEvent } from "../../constant/event";
+
 export class DataFilterBaseComponent extends BaseComponent {
+    get isHorizontal() {
+        return this._isHorizontal;
+    }
+    get stateScale() {
+        return this._stateScale;
+    }
     get relatedAxisComponent() {
         return this._relatedAxisComponent;
     }
     setStartAndEnd(start, end, rangeMode = [ "percent", "percent" ]) {
-        const [startMode = "percent", endMode = "percent"] = rangeMode, startPercent = "percent" === startMode ? start : this.dataToStatePoint(start), endPercent = "percent" === endMode ? end : this.dataToStatePoint(end);
+        const [startMode = "percent", endMode = "percent"] = rangeMode, startPercent = "percent" === startMode ? start : dataToStatePoint(start, this._stateScale, this._isHorizontal), endPercent = "percent" === endMode ? end : dataToStatePoint(end, this._stateScale, this._isHorizontal);
         this._handleChange(startPercent, endPercent, !0);
     }
     enableInteraction() {
-        this._activeRoam = !0;
+        this._dataFilterEvent.enableInteraction();
     }
     disableInteraction() {
-        this._activeRoam = !1;
+        this._dataFilterEvent.disableInteraction();
     }
     zoomIn(location) {
-        this._handleChartZoom({
-            zoomDelta: 1.2,
-            zoomX: null == location ? void 0 : location.x,
-            zoomY: null == location ? void 0 : location.y
-        });
+        this._dataFilterEvent.zoomIn(location);
     }
     zoomOut(location) {
-        this._handleChartZoom({
-            zoomDelta: .8,
-            zoomX: null == location ? void 0 : location.x,
-            zoomY: null == location ? void 0 : location.y
-        });
+        this._dataFilterEvent.zoomOut(location);
+    }
+    _initEvent() {
+        var _a;
+        this._dataFilterEvent.initZoomEvent(), null === (_a = this._relatedAxisComponent) || void 0 === _a || _a.event.on(ChartEvent.scaleRawDomainUpdate, (({model: model}) => {
+            console.log("scaleRawDomainUpdate", model.getRawDomain());
+        }));
     }
     _handleChange(start, end, updateComponent) {
         var _a, _b;
         null !== (_b = null === (_a = this._spec) || void 0 === _a ? void 0 : _a.zoomLock) && void 0 !== _b && _b || end - start !== this._spanCache && (end - start < this._minSpan || end - start > this._maxSpan) ? this._shouldChange = !1 : (this._shouldChange = !0, 
         this._spanCache = end - start);
     }
-    _isReverse() {
-        const axis = this._relatedAxisComponent;
-        if (!axis) return !1;
-        const axisScale = axis.getScale();
-        return axisScale.range()[0] > axisScale.range()[1] && (!axis.getInverse() || this._isHorizontal);
-    }
     _updateRangeFactor(tag) {
-        const axis = this._relatedAxisComponent, axisScale = axis.getScale(), reverse = this._isReverse(), newRangeFactor = reverse ? [ 1 - this._end, 1 - this._start ] : [ this._start, this._end ];
+        const axis = this._relatedAxisComponent, axisScale = axis.getScale(), reverse = isReverse(axis, this._isHorizontal), newRangeFactor = reverse ? [ 1 - this._end, 1 - this._start ] : [ this._start, this._end ];
         if (reverse) switch (tag) {
           case "startHandler":
             axis.scaleRangeFactorEnd(newRangeFactor[1]);
@@ -97,26 +99,19 @@ export class DataFilterBaseComponent extends BaseComponent {
     }
     constructor(spec, options) {
         super(spec, options), this.layoutType = "none", this._orient = "left", this._cacheVisibility = void 0, 
-        this._dataUpdating = !1, this._shouldChange = !0, this._stateField = "x", this._activeRoam = !0, 
-        this._zoomAttr = {
-            enable: !0,
-            rate: 1,
-            focus: !0
-        }, this._dragAttr = {
-            enable: !0,
-            rate: 1,
-            reverse: !0
-        }, this._scrollAttr = {
-            enable: !0,
-            rate: 1,
-            reverse: !0
+        this._dataUpdating = !1, this._hasInitStateScale = !1, this._shouldChange = !0, 
+        this._stateField = "x", this._handleStateChange = (startValue, endValue, tag) => {
+            var _a, _b;
+            return this._startValue = startValue, this._endValue = endValue, this._newDomain = parseDomainFromState(this._startValue, this._endValue, this._stateScale), 
+            null === (_b = (_a = this.effect).onZoomChange) || void 0 === _b || _b.call(_a, tag), 
+            !0;
         }, this.effect = {
             onZoomChange: tag => {
                 var _a, _b;
                 const axis = this._relatedAxisComponent;
                 if (axis && "axis" === this._filterMode) {
                     const axisScale = axis.getScale(), axisSpec = axis.getSpec();
-                    this._auto && this._getAxisBandSize(axisSpec) && this._spec.ignoreBandSize && (axisScale.bandwidth("auto"), 
+                    this._auto && getAxisBandSize(axisSpec) && this._spec.ignoreBandSize && (axisScale.bandwidth("auto"), 
                     axisScale.maxBandwidth("auto"), axisScale.minBandwidth("auto")), this._updateRangeFactor(tag), 
                     this._auto && (null === (_b = null === (_a = this._component) || void 0 === _a ? void 0 : _a.setStartAndEnd) || void 0 === _b || _b.call(_a, this._start, this._end)), 
                     axis.effect.scaleUpdate({
@@ -135,53 +130,11 @@ export class DataFilterBaseComponent extends BaseComponent {
                     specIndex: this._seriesIndex
                 });
             }
-        }, this._visible = !0, this._handleStateChange = (startValue, endValue, tag) => {
-            var _a, _b;
-            return this._startValue = startValue, this._endValue = endValue, this._newDomain = this._parseDomainFromState(this._startValue, this._endValue), 
-            null === (_b = (_a = this.effect).onZoomChange) || void 0 === _b || _b.call(_a, tag), 
-            !0;
-        }, this._handleChartZoom = (params, e) => {
-            var _a, _b;
-            if (!this._activeRoam || this._zoomAttr.filter && !this._zoomAttr.filter(params, e)) return;
-            const {zoomDelta: zoomDelta, zoomX: zoomX, zoomY: zoomY} = params, {x: x, y: y} = this._regions[0].getLayoutStartPoint(), {width: width, height: height} = this._regions[0].getLayoutRect(), delta = Math.abs(this._start - this._end), zoomRate = null !== (_b = null === (_a = this._spec.roamZoom) || void 0 === _a ? void 0 : _a.rate) && void 0 !== _b ? _b : 1;
-            if (delta >= 1 && zoomDelta < 1) return;
-            if (delta <= .01 && zoomDelta > 1) return;
-            const focusLoc = this._isHorizontal ? zoomX : zoomY, totalValue = delta * (zoomDelta - 1) * zoomRate;
-            let startValue = totalValue / 2, endValue = totalValue / 2;
-            if (focusLoc) {
-                const startLoc = this._isHorizontal ? x : y, endLoc = this._isHorizontal ? width : height;
-                startValue = Math.abs(startLoc - focusLoc) / Math.abs(endLoc - startLoc) * totalValue, 
-                endValue = Math.abs(endLoc - focusLoc) / Math.abs(endLoc - startLoc) * totalValue;
-            }
-            const start = clamp(this._start + startValue, 0, 1), end = clamp(this._end - endValue, 0, 1);
-            this._handleChange(Math.min(start, end), Math.max(start, end), !0);
-        }, this._handleChartScroll = (params, e) => {
-            var _a;
-            if (!this._activeRoam || this._scrollAttr.filter && !this._scrollAttr.filter(params, e)) return !1;
-            const {scrollX: scrollX, scrollY: scrollY} = params;
-            let value = this._isHorizontal ? scrollX : scrollY;
-            const active = this._isHorizontal ? abs(scrollX / scrollY) >= .5 : abs(scrollY / scrollX) >= .5;
-            this._scrollAttr.reverse || (value = -value), active && this._handleChartMove(value, null !== (_a = this._scrollAttr.rate) && void 0 !== _a ? _a : 1);
-            const hasChange = 0 !== this._start && 1 !== this._end;
-            return active && hasChange;
-        }, this._handleChartDrag = (delta, e) => {
-            var _a, _b;
-            if (!this._activeRoam || this._dragAttr.filter && !this._dragAttr.filter(delta, e)) return;
-            (null === (_a = this._spec.roamDrag) || void 0 === _a ? void 0 : _a.autoVisible) && this.show();
-            const [dx, dy] = delta;
-            let value = this._isHorizontal ? dx : dy;
-            this._dragAttr.reverse && (value = -value), this._handleChartMove(value, null !== (_b = this._dragAttr.rate) && void 0 !== _b ? _b : 1);
-        }, this._handleChartMove = (value, rate) => {
-            const totalValue = this._isHorizontal ? this.getLayoutRect().width : this.getLayoutRect().height;
-            if (Math.abs(value) >= 1e-6) if (value > 0 && this._end < 1) {
-                const moveDelta = Math.min(1 - this._end, value / totalValue) * rate;
-                this._handleChange(this._start + moveDelta, this._end + moveDelta, !0);
-            } else if (value < 0 && this._start > 0) {
-                const moveDelta = Math.max(-this._start, value / totalValue) * rate;
-                this._handleChange(this._start + moveDelta, this._end + moveDelta, !0);
-            }
-            return !1;
-        }, this._orient = getOrient(spec), this._isHorizontal = "horizontal" === getDirectionByOrient(this._orient);
+        }, this._visible = !0, this._orient = getOrient(spec), this._isHorizontal = "horizontal" === getDirectionByOrient(this._orient), 
+        this._dataFilterEvent = new DataFilterEvent(this.type, this._spec, this._handleChange.bind(this), this.getLayoutRect.bind(this), (() => ({
+            start: this._start,
+            end: this._end
+        })), (() => this._regions), (() => this._option).bind(this), (() => this.event));
     }
     created() {
         super.created(), this._setAxisFromSpec(), this._setRegionsFromSpec(), this._initEvent(), 
@@ -190,10 +143,61 @@ export class DataFilterBaseComponent extends BaseComponent {
     initLayout() {
         super.initLayout(), this._layout && (this._layout.layoutOrient = this._orient);
     }
+    init(option) {
+        super.init(option), this._addTransformToSeries(), 0 === this._start && 1 === this._end || this.effect.onZoomChange();
+    }
+    _compareSpec(spec, prevSpec) {
+        const result = super._compareSpec(spec, prevSpec);
+        return result.reMake || isEqual(prevSpec, spec) || (result.reRender = !0, result.reMake = !0), 
+        result;
+    }
+    reInit(spec) {
+        super.reInit(spec), this._marks.forEach((g => {
+            g.getMarks().forEach((m => {
+                this.initMarkStyleWithSpec(m, this._spec[m.name]);
+            }));
+        }));
+    }
+    onLayoutStart(layoutRect, viewRect) {
+        super.onLayoutStart(layoutRect, viewRect);
+        const isShown = this._autoUpdate(layoutRect);
+        this._autoVisible(isShown), this._dataUpdating = !1;
+    }
+    updateLayoutAttribute() {
+        this._visible && this._createOrUpdateComponent(), this._hasInitStateScale || (0 === this._start && 1 === this._end || (this._newDomain = parseDomainFromStateAndValue(this._spec.start, this._startValue, this._spec.end, this._endValue, this._stateScale), 
+        this.effect.onZoomChange()), this._hasInitStateScale = !0);
+    }
+    _initAfterLayout() {
+        this._stateScale = null, this._initStateScale(), this._updateScaleRange(), this._setStateFromAxis();
+    }
+    _beforeLayoutEnd() {
+        this._hasInitStateScale ? this._updateScaleRange() : this._initAfterLayout();
+    }
+    onLayoutEnd() {
+        var _a;
+        this._beforeLayoutEnd();
+        const isShown = !(0 === this._start && 1 === this._end);
+        this._autoVisible(isShown), super.onLayoutEnd(), null === (_a = this._relatedAxisComponent) || void 0 === _a || _a.updateScaleRange();
+    }
+    getBoundsInRect(rect) {
+        const result = {
+            x1: this.getLayoutStartPoint().x,
+            y1: this.getLayoutStartPoint().y,
+            x2: 0,
+            y2: 0
+        };
+        return this._isHorizontal ? (result.y2 = result.y1 + this._height, result.x2 = result.x1 + rect.width) : (result.x2 = result.x1 + this._width, 
+        result.y2 = result.y1 + rect.height), result;
+    }
+    setAttrFromSpec() {
+        var _a;
+        super.setAttrFromSpec(), this._dataFilterEvent.setEventAttrFromSpec(), this._field = this._spec.field, 
+        this._width = this._computeWidth(), this._height = this._computeHeight(), this._visible = null === (_a = this._spec.visible) || void 0 === _a || _a;
+    }
     _setAxisFromSpec() {
         if (isValid(this._spec.axisId) ? this._relatedAxisComponent = this._option.getComponentByUserId(this._spec.axisId) : isValid(this._spec.axisIndex) && (this._relatedAxisComponent = this._option.getComponentByIndex("axes", this._spec.axisIndex)), 
         isNil(this._spec.field) && !this._relatedAxisComponent) {
-            const axes = this._option.getComponentsByKey("axes"), sameOrientAxis = axes.find((cm => cm._orient === this._orient));
+            const axes = this._option.getComponentsByKey("axes"), sameOrientAxis = axes.find((cm => getDirectionByOrient(cm._orient) === getDirectionByOrient(this._orient)));
             if (sameOrientAxis) this._relatedAxisComponent = sameOrientAxis; else {
                 const bandAxis = axes.find((cm => !isContinuous(cm.getScale().type)));
                 this._relatedAxisComponent = bandAxis;
@@ -223,27 +227,8 @@ export class DataFilterBaseComponent extends BaseComponent {
             this._regions = ids.length ? this._regions.filter((r => ids.includes(r.id))) : [];
         } else ;
     }
-    onDataUpdate() {
-        var _a;
-        const domain = this._computeDomainOfStateScale(isContinuous(this._stateScale.type));
-        this._stateScale.domain(domain, !1), this._handleChange(this._start, this._end, !0), 
-        this._spec.auto && !isEqual(this._domainCache, domain) && (this._domainCache = domain, 
-        this._dataUpdating = !0, null === (_a = this.getChart()) || void 0 === _a || _a.setLayoutTag(!0, null, !1));
-    }
-    _computeDomainOfStateScale(isContinuous) {
-        if (this._spec.customDomain) return this._spec.customDomain;
-        const domain = this._data.getLatestData().map((d => d[this._stateField]));
-        if (isContinuous) {
-            const domainNum = domain.map((n => 1 * n));
-            return domain.length ? [ minInArray(domainNum), maxInArray(domainNum) ] : [ -1 / 0, 1 / 0 ];
-        }
-        return domain;
-    }
-    _initEvent() {
-        this._initCommonEvent();
-    }
     _initData() {
-        const dataCollection = [], stateFields = [], valueFields = [];
+        const dataCollection = [], seriesCollection = [], stateFields = [], valueFields = [];
         let isCategoryState;
         if (this._relatedAxisComponent) {
             const originalStateFields = {};
@@ -251,21 +236,22 @@ export class DataFilterBaseComponent extends BaseComponent {
                 var _a, _b;
                 const xAxisHelper = "cartesian" === s.coordinate ? s.getXAxisHelper() : "polar" === s.coordinate ? s.angleAxisHelper : null, yAxisHelper = "cartesian" === s.coordinate ? s.getYAxisHelper() : "polar" === s.coordinate ? s.radiusAxisHelper : null;
                 if (!xAxisHelper || !yAxisHelper) return;
-                const stateAxisHelper = xAxisHelper.getAxisId() === this._relatedAxisComponent.id ? xAxisHelper : yAxisHelper.getAxisId() === this._relatedAxisComponent.id ? yAxisHelper : this._isHorizontal ? xAxisHelper : yAxisHelper, valueAxisHelper = stateAxisHelper === xAxisHelper ? yAxisHelper : xAxisHelper;
+                const stateAxisHelper = xAxisHelper.getAxisId() === this._relatedAxisComponent.id ? xAxisHelper : yAxisHelper.getAxisId() === this._relatedAxisComponent.id ? yAxisHelper : this._isHorizontal ? xAxisHelper : yAxisHelper, valueAxisHelper = stateAxisHelper === xAxisHelper ? yAxisHelper : xAxisHelper, isValidateValueAxis = isContinuous(valueAxisHelper.getScale(0).type), isValidateStateAxis = isContinuous(stateAxisHelper.getScale(0).type);
                 dataCollection.push(s.getRawData());
                 const seriesSpec = s.getSpec(), xField = "cartesian" === s.coordinate ? array(seriesSpec.xField) : array(null !== (_a = seriesSpec.angleField) && void 0 !== _a ? _a : seriesSpec.categoryField), yField = "cartesian" === s.coordinate ? array(seriesSpec.yField) : array(null !== (_b = seriesSpec.radiusField) && void 0 !== _b ? _b : seriesSpec.valueField);
                 if (originalStateFields[s.id] = "link" === s.type ? [ "from_xField" ] : stateAxisHelper === xAxisHelper ? xField : yField, 
-                isContinuous(stateAxisHelper.getScale(0).type) ? (isCategoryState = !1, stateFields.push(originalStateFields[s.id])) : stateFields.push(originalStateFields[s.id][0]), 
-                this._valueField) {
+                isValidateStateAxis ? (isCategoryState = !1, stateFields.push(originalStateFields[s.id])) : (isCategoryState = !0, 
+                stateFields.push(originalStateFields[s.id][0])), this._valueField) {
                     const valueField = "link" === s.type ? [ "from_yField" ] : valueAxisHelper === xAxisHelper ? xField : yField;
-                    isContinuous(valueAxisHelper.getScale(0).type) && valueFields.push(...valueField);
+                    isValidateValueAxis && valueFields.push(...valueField);
                 }
             }), {
                 userId: this._seriesUserId,
                 specIndex: this._seriesIndex
             }), this._originalStateFields = originalStateFields;
         } else eachSeries(this._regions, (s => {
-            dataCollection.push(s.getRawData()), stateFields.push(this._field), this._valueField && valueFields.push(this._spec.valueField);
+            dataCollection.push(s.getRawData()), seriesCollection.push(s), stateFields.push(this._field), 
+            this._valueField && valueFields.push(this._spec.valueField);
         }), {
             userId: this._seriesUserId,
             specIndex: this._seriesIndex
@@ -280,6 +266,7 @@ export class DataFilterBaseComponent extends BaseComponent {
             options: {
                 input: {
                     dataCollection: dataCollection,
+                    seriesCollection: seriesCollection,
                     stateFields: stateFields,
                     valueFields: valueFields,
                     isCategoryState: isCategoryState
@@ -292,64 +279,6 @@ export class DataFilterBaseComponent extends BaseComponent {
         }, !1), this._data = new CompilableData(this._option, data), data.reRunAllTransform(), 
         dataSet.multipleDataViewAddListener(dataCollection, "change", this._handleDataCollectionChange.bind(this));
     }
-    setAttrFromSpec() {
-        var _a;
-        super.setAttrFromSpec(), !0 === this._spec.roamZoom || this._spec.roamZoom ? this._zoomAttr = merge({}, this._zoomAttr, this._spec.roamZoom) : this._zoomAttr.enable = !1, 
-        !0 === this._spec.roamDrag || this._spec.roamDrag ? this._dragAttr = merge({}, this._dragAttr, this._spec.roamDrag) : this._dragAttr.enable = !1, 
-        !0 === this._spec.roamScroll || this._spec.roamScroll ? this._scrollAttr = merge({}, this._scrollAttr, this._spec.roamScroll) : this._scrollAttr.enable = !1, 
-        this._field = this._spec.field, this._width = this._computeWidth(), this._height = this._computeHeight(), 
-        this._visible = null === (_a = this._spec.visible) || void 0 === _a || _a;
-    }
-    statePointToData(state) {
-        const scale = this._stateScale, domain = scale.domain();
-        if (isContinuous(scale.type)) return this._isReverse() ? domain[0] + (last(domain) - domain[0]) * (1 - state) : domain[0] + (last(domain) - domain[0]) * state;
-        let range = scale.range();
-        this._isReverse() && (range = range.slice().reverse());
-        const posInRange = range[0] + (last(range) - range[0]) * state;
-        return scale.invert(posInRange);
-    }
-    dataToStatePoint(data) {
-        const scale = this._stateScale, pos = scale.scale(data);
-        let range = scale.range();
-        return !this._isHorizontal && isContinuous(scale.type) && (range = range.slice().reverse()), 
-        (pos - range[0]) / (last(range) - range[0]);
-    }
-    _modeCheck(statePoint, mode) {
-        return "start" === statePoint ? "percent" === mode && isValid(this._spec.start) || "value" === mode && isValid(this._spec.startValue) : "percent" === mode && isValid(this._spec.end) || "value" === mode && isValid(this._spec.endValue);
-    }
-    _setStateFromSpec() {
-        var _a, _b;
-        let start, end;
-        if (this._auto = !!this._spec.auto, this._spec.rangeMode) {
-            const [startMode, endMode] = this._spec.rangeMode;
-            this._modeCheck("start", startMode) && this._modeCheck("end", endMode) && (start = "percent" === startMode ? this._spec.start : this.dataToStatePoint(this._spec.startValue), 
-            end = "percent" === endMode ? this._spec.end : this.dataToStatePoint(this._spec.endValue));
-        } else start = this._spec.start ? this._spec.start : this._spec.startValue ? this.dataToStatePoint(this._spec.startValue) : 0, 
-        end = this._spec.end ? this._spec.end : this._spec.endValue ? this.dataToStatePoint(this._spec.endValue) : 1;
-        this._startValue = this.statePointToData(start), this._endValue = this.statePointToData(end), 
-        this._start = start, this._end = end, this._minSpan = null !== (_a = this._spec.minSpan) && void 0 !== _a ? _a : 0, 
-        this._maxSpan = null !== (_b = this._spec.maxSpan) && void 0 !== _b ? _b : 1, isContinuous(this._stateScale.type) && this._stateScale.domain()[0] !== last(this._stateScale.domain()) && (this._spec.minValueSpan && (this._minSpan = this._spec.minValueSpan / (last(this._stateScale.domain()) - this._stateScale.domain()[0])), 
-        this._spec.maxValueSpan && (this._maxSpan = this._spec.maxValueSpan / (last(this._stateScale.domain()) - this._stateScale.domain()[0]))), 
-        this._minSpan = Math.max(0, this._minSpan), this._maxSpan = Math.min(this._maxSpan, 1), 
-        this._relatedAxisComponent && "axis" === this._filterMode || 0 === this._start && 1 === this._end || (this._newDomain = this._parseDomainFromState(this._startValue, this._endValue));
-    }
-    _parseFieldOfSeries(s) {
-        var _a;
-        return null === (_a = this._originalStateFields) || void 0 === _a ? void 0 : _a[s.id];
-    }
-    _initStateScale() {
-        const defaultRange = [ 0, 1 ];
-        if (this._relatedAxisComponent) {
-            const scale = this._relatedAxisComponent.getScale(), isContinuousScale = isContinuous(scale.type), domain = this._computeDomainOfStateScale(isContinuousScale);
-            if (this._stateScale = scale.clone(), isContinuousScale) {
-                const domainNum = domain.map((n => 1 * n));
-                this._stateScale.domain(domain.length ? [ minInArray(domainNum), maxInArray(domainNum) ] : [ 0, 1 ], !0).range(defaultRange);
-            } else this._stateScale.domain(domain, !0).range(defaultRange);
-        } else this._stateScale = new BandScale, this._stateScale.domain(this._computeDomainOfStateScale(), !0).range(defaultRange);
-    }
-    init(option) {
-        super.init(option), this._addTransformToSeries(), 0 === this._start && 1 === this._end || this.effect.onZoomChange();
-    }
     _addTransformToSeries() {
         this._relatedAxisComponent && "axis" === this._filterMode || (registerDataSetInstanceTransform(this._option.dataSet, "dataFilterWithNewDomain", dataFilterWithNewDomain), 
         registerDataSetInstanceTransform(this._option.dataSet, "lockStatisticsFilter", lockStatisticsFilter), 
@@ -383,43 +312,67 @@ export class DataFilterBaseComponent extends BaseComponent {
             specIndex: this._seriesIndex
         }));
     }
-    _compareSpec(spec, prevSpec) {
-        const result = super._compareSpec(spec, prevSpec);
-        return result.reMake || isEqual(prevSpec, spec) || (result.reRender = !0, result.reMake = !0), 
-        result;
+    onDataUpdate() {
+        var _a;
+        const domain = this._computeDomainOfStateScale(isContinuous(this._stateScale.type));
+        this._stateScale.domain(domain, !1), this._handleChange(this._start, this._end, !0), 
+        this._spec.auto && !isEqual(this._domainCache, domain) && (this._domainCache = domain, 
+        this._dataUpdating = !0, null === (_a = this.getChart()) || void 0 === _a || _a.setLayoutTag(!0, null, !1));
     }
-    reInit(spec) {
-        super.reInit(spec), this._marks.forEach((g => {
-            g.getMarks().forEach((m => {
-                this.initMarkStyleWithSpec(m, this._spec[m.name]);
-            }));
-        }));
+    _parseFieldOfSeries(s) {
+        var _a;
+        return null === (_a = this._originalStateFields) || void 0 === _a ? void 0 : _a[s.id];
     }
-    _parseDomainFromState(startValue, endValue) {
-        if (isContinuous(this._stateScale.type)) return [ Math.min(endValue, startValue), Math.max(endValue, startValue) ];
-        const allDomain = this._stateScale.domain(), startIndex = allDomain.indexOf(startValue), endIndex = allDomain.indexOf(endValue);
-        return allDomain.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1);
-    }
-    _initCommonEvent() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const option = {
-            delayType: null !== (_b = null === (_a = this._spec) || void 0 === _a ? void 0 : _a.delayType) && void 0 !== _b ? _b : "throttle",
-            delayTime: isValid(null === (_c = this._spec) || void 0 === _c ? void 0 : _c.delayType) ? null !== (_e = null === (_d = this._spec) || void 0 === _d ? void 0 : _d.delayTime) && void 0 !== _e ? _e : 30 : 0,
-            realTime: null === (_g = null === (_f = this._spec) || void 0 === _f ? void 0 : _f.realTime) || void 0 === _g || _g,
-            allowComponentZoom: !0
-        };
-        if (this._zoomAttr.enable && this.initZoomEventOfRegions(this._regions, null, this._handleChartZoom, option), 
-        this._scrollAttr.enable && this.initScrollEventOfRegions(this._regions, null, this._handleChartScroll, option), 
-        this._dragAttr.enable && this.initDragEventOfRegions(this._regions, null, this._handleChartDrag, option), 
-        null === (_h = this._spec.roamDrag) || void 0 === _h ? void 0 : _h.autoVisible) {
-            const dragEnd = "panend";
-            this._throttledHide = throttle((() => this.hide()), 300), this.event.on(dragEnd, (() => {
-                this._throttledHide();
-            }));
+    _setStateFromSpec() {
+        let start, end;
+        if (this._auto = !!this._spec.auto, this._spec.rangeMode) {
+            const [startMode, endMode] = this._spec.rangeMode;
+            modeCheck("start", startMode, this._spec) && modeCheck("end", endMode, this._spec) && (start = "percent" === startMode ? this._spec.start : dataToStatePoint(this._spec.startValue, this._stateScale, this._isHorizontal), 
+            end = "percent" === endMode ? this._spec.end : dataToStatePoint(this._spec.endValue, this._stateScale, this._isHorizontal));
+        } else start = this._spec.start ? this._spec.start : this._spec.startValue ? dataToStatePoint(this._spec.startValue, this._stateScale, this._isHorizontal) : 0, 
+        end = this._spec.end ? this._spec.end : this._spec.endValue ? dataToStatePoint(this._spec.endValue, this._stateScale, this._isHorizontal) : 1;
+        this._start = Math.max(0, Math.min(1, start)), this._end = Math.max(0, Math.min(1, end));
+    }
+    _setStateFromAxis() {
+        var _a, _b;
+        this._setStateFromSpec();
+        const axis = this._relatedAxisComponent;
+        this._startValue = statePointToData(this._start, this._stateScale, isReverse(axis, this._isHorizontal)), 
+        this._endValue = statePointToData(this._end, this._stateScale, isReverse(axis, this._isHorizontal)), 
+        this._minSpan = null !== (_a = this._spec.minSpan) && void 0 !== _a ? _a : 0, this._maxSpan = null !== (_b = this._spec.maxSpan) && void 0 !== _b ? _b : 1, 
+        isContinuous(this._stateScale.type) && this._stateScale.domain()[0] !== last(this._stateScale.domain()) && (this._spec.minValueSpan && (this._minSpan = this._spec.minValueSpan / (last(this._stateScale.domain()) - this._stateScale.domain()[0])), 
+        this._spec.maxValueSpan && (this._maxSpan = this._spec.maxValueSpan / (last(this._stateScale.domain()) - this._stateScale.domain()[0]))), 
+        this._minSpan = Math.max(0, this._minSpan), this._maxSpan = Math.min(this._maxSpan, 1), 
+        axis && (axis && "axis" === this._filterMode || 0 === this._start && 1 === this._end || (this._newDomain = parseDomainFromState(this._startValue, this._endValue, this._stateScale)));
+    }
+    _initStateScale() {
+        var _a, _b, _c, _d, _e, _f;
+        const defaultRange = [ 0, 1 ];
+        if (this._relatedAxisComponent) {
+            const scale = this._relatedAxisComponent.getScale().clone();
+            this._stateScale = scale, null === (_b = (_a = scale).maxBandwidth) || void 0 === _b || _b.call(_a, "auto", !0), 
+            null === (_d = (_c = scale).minBandwidth) || void 0 === _d || _d.call(_c, "auto", !0), 
+            null === (_f = (_e = scale).bandwidth) || void 0 === _f || _f.call(_e, "auto", !0), 
+            scale.rangeFactor(defaultRange, !0).range(defaultRange);
+        } else {
+            let fieldLinear = !0;
+            this._field && eachSeries(this._regions, (s => {
+                const stats = s.getRawDataStatisticsByField(this._field);
+                isValidNumber(null == stats ? void 0 : stats.min) && isValidNumber(null == stats ? void 0 : stats.max) || (fieldLinear = !1);
+            }), {
+                userId: this._seriesUserId,
+                specIndex: this._seriesIndex
+            }), this._stateScale = fieldLinear ? new LinearScale : new BandScale, this._stateScale.domain(this._computeDomainOfStateScale(fieldLinear), !0).range(defaultRange);
         }
     }
-    updateLayoutAttribute() {
-        this._visible && this._createOrUpdateComponent(), super.updateLayoutAttribute();
+    _computeDomainOfStateScale(isContinuous) {
+        if (this._spec.customDomain) return this._spec.customDomain;
+        const domain = this._data.getLatestData().map((d => d[this._stateField]));
+        if (isContinuous) {
+            const domainNum = domain.map((n => 1 * n));
+            return domain.length ? [ minInArray(domainNum), maxInArray(domainNum) ] : [ -1 / 0, 1 / 0 ];
+        }
+        return domain;
     }
     _autoVisible(isShown) {
         if (!this._auto) return;
@@ -431,25 +384,6 @@ export class DataFilterBaseComponent extends BaseComponent {
             [sizeKey]: AttributeLevel.Built_In
         });
     }
-    onLayoutStart(layoutRect, viewRect) {
-        super.onLayoutStart(layoutRect, viewRect);
-        const isShown = this._autoUpdate(layoutRect);
-        this._autoVisible(isShown), this._dataUpdating = !1;
-    }
-    onLayoutEnd() {
-        const isShown = !(0 === this._start && 1 === this._end);
-        this._autoVisible(isShown), super.onLayoutEnd();
-    }
-    getBoundsInRect(rect) {
-        const result = {
-            x1: this.getLayoutStartPoint().x,
-            y1: this.getLayoutStartPoint().y,
-            x2: 0,
-            y2: 0
-        };
-        return this._isHorizontal ? (result.y2 = result.y1 + this._height, result.x2 = result.x1 + rect.width) : (result.x2 = result.x1 + this._width, 
-        result.y2 = result.y1 + rect.height), result;
-    }
     hide() {
         var _a;
         null === (_a = this._component) || void 0 === _a || _a.hideAll();
@@ -458,18 +392,10 @@ export class DataFilterBaseComponent extends BaseComponent {
         var _a;
         null === (_a = this._component) || void 0 === _a || _a.showAll();
     }
-    _getAxisBandSize(axisSpec) {
-        const bandSize = null == axisSpec ? void 0 : axisSpec.bandSize, maxBandSize = null == axisSpec ? void 0 : axisSpec.maxBandSize, minBandSize = null == axisSpec ? void 0 : axisSpec.minBandSize;
-        if (bandSize || minBandSize || maxBandSize) return {
-            bandSize: bandSize,
-            maxBandSize: maxBandSize,
-            minBandSize: minBandSize
-        };
-    }
     _autoUpdate(rect) {
         var _a, _b, _c, _d, _e, _f;
         if (!this._auto) return this._cacheVisibility = void 0, !0;
-        const axis = this._relatedAxisComponent, axisSpec = null == axis ? void 0 : axis.getSpec(), axisScale = null == axis ? void 0 : axis.getScale(), bandSizeResult = this._getAxisBandSize(axisSpec);
+        const axis = this._relatedAxisComponent, axisSpec = null == axis ? void 0 : axis.getSpec(), axisScale = null == axis ? void 0 : axis.getScale(), bandSizeResult = getAxisBandSize(axisSpec);
         if (!this._dataUpdating && isDiscrete(axisScale.type) && (null == rect ? void 0 : rect.height) === (null === (_a = this._cacheRect) || void 0 === _a ? void 0 : _a.height) && (null == rect ? void 0 : rect.width) === (null === (_b = this._cacheRect) || void 0 === _b ? void 0 : _b.width) && this._fixedBandSize === (null == bandSizeResult ? void 0 : bandSizeResult.bandSize)) return this._cacheVisibility;
         let isShown = !0;
         if (this._isHorizontal && (null == rect ? void 0 : rect.width) !== (null === (_c = this._cacheRect) || void 0 === _c ? void 0 : _c.width) ? axisScale.range(axis.getInverse() ? [ rect.width, 0 ] : [ 0, rect.width ]) : (null == rect ? void 0 : rect.height) !== (null === (_d = this._cacheRect) || void 0 === _d ? void 0 : _d.height) && axisScale.range(axis.getInverse() ? [ 0, rect.height ] : [ rect.height, 0 ]), 
@@ -492,9 +418,6 @@ export class DataFilterBaseComponent extends BaseComponent {
     _getNeedClearVRenderComponents() {
         return [ this._component ];
     }
-    clear() {
-        this._throttledHide = null;
-    }
 }
 
 mixin(DataFilterBaseComponent, Zoomable);