@visactor/react-vchart 2.0.16 → 2.0.18

package/build/index.js

@@ -8171,28 +8171,59 @@
       }
       addEventListener(type, listener, options) {
         if (!listener) return;
+        const capture = this._resolveCapture(options),
+          once = this._resolveOnce(options),
+          listenerTypeMap = this._getOrCreateListenerTypeMap(type),
+          wrappedMap = this._getOrCreateWrappedMap(listenerTypeMap, listener);
+        if (wrappedMap.has(capture)) return;
         const wrappedListener = event => {
           const transformedEvent = this._eventListenerTransformer(event);
-          "function" == typeof listener ? listener(transformedEvent) : listener.handleEvent && listener.handleEvent(transformedEvent);
+          "function" == typeof listener ? listener(transformedEvent) : listener.handleEvent && listener.handleEvent(transformedEvent), once && this._deleteListenerRecord(type, listener, capture);
         };
-        this._listenerMap.has(type) || this._listenerMap.set(type, new Map()), this._listenerMap.get(type).set(listener, wrappedListener), this._nativeAddEventListener(type, wrappedListener, options);
+        wrappedMap.set(capture, {
+          wrappedListener: wrappedListener,
+          options: options
+        }), this._nativeAddEventListener(type, wrappedListener, options);
       }
       removeEventListener(type, listener, options) {
-        var _a;
+        var _a, _b;
         if (!listener) return;
-        const wrappedListener = null === (_a = this._listenerMap.get(type)) || void 0 === _a ? void 0 : _a.get(listener);
-        wrappedListener && (this._nativeRemoveEventListener(type, wrappedListener, options), this._listenerMap.get(type).delete(listener), 0 === this._listenerMap.get(type).size && this._listenerMap.delete(type));
+        const capture = this._resolveCapture(options),
+          wrappedRecord = null === (_b = null === (_a = this._listenerMap.get(type)) || void 0 === _a ? void 0 : _a.get(listener)) || void 0 === _b ? void 0 : _b.get(capture);
+        wrappedRecord && (this._nativeRemoveEventListener(type, wrappedRecord.wrappedListener, capture), this._deleteListenerRecord(type, listener, capture));
       }
       dispatchEvent(event) {
         return this._nativeDispatchEvent(event);
       }
       clearAllEventListeners() {
-        this._listenerMap.forEach((listenersMap, type) => {
-          listenersMap.forEach((wrappedListener, originalListener) => {
-            this._nativeRemoveEventListener(type, wrappedListener, void 0);
+        this._listenerMap.forEach((listenerMap, type) => {
+          listenerMap.forEach(wrappedMap => {
+            wrappedMap.forEach((wrappedRecord, capture) => {
+              this._nativeRemoveEventListener(type, wrappedRecord.wrappedListener, capture);
+            });
           });
         }), this._listenerMap.clear();
       }
+      _resolveCapture(options) {
+        return "boolean" == typeof options ? options : !!(null == options ? void 0 : options.capture);
+      }
+      _resolveOnce(options) {
+        return "object" == typeof options && !!(null == options ? void 0 : options.once);
+      }
+      _getOrCreateListenerTypeMap(type) {
+        let listenerTypeMap = this._listenerMap.get(type);
+        return listenerTypeMap || (listenerTypeMap = new Map(), this._listenerMap.set(type, listenerTypeMap)), listenerTypeMap;
+      }
+      _getOrCreateWrappedMap(listenerTypeMap, listener) {
+        let wrappedMap = listenerTypeMap.get(listener);
+        return wrappedMap || (wrappedMap = new Map(), listenerTypeMap.set(listener, wrappedMap)), wrappedMap;
+      }
+      _deleteListenerRecord(type, listener, capture) {
+        const listenerTypeMap = this._listenerMap.get(type);
+        if (!listenerTypeMap) return;
+        const wrappedMap = listenerTypeMap.get(listener);
+        wrappedMap && (wrappedMap.delete(capture), 0 === wrappedMap.size && listenerTypeMap.delete(listener), 0 === listenerTypeMap.size && this._listenerMap.delete(type));
+      }
       _nativeAddEventListener(type, listener, options) {
         throw new Error("_nativeAddEventListener must be implemented by derived classes");
       }
@@ -12537,7 +12568,9 @@
         var _a;
         if (event.manager !== this) throw new Error("It is illegal to free an event not managed by this EventManager!");
         const constructor = event.constructor;
-        this.eventPool.has(constructor) || this.eventPool.set(constructor, []), null === (_a = this.eventPool.get(constructor)) || void 0 === _a || _a.push(event);
+        this.eventPool.has(constructor) || (this.eventPool.get(constructor).forEach(e => {
+          e.eventPhase = event.NONE, e.currentTarget = null, e.path = [], e.detailPath = [], e.target = null;
+        }), this.eventPool.set(constructor, [])), null === (_a = this.eventPool.get(constructor)) || void 0 === _a || _a.push(event);
       }
       notifyListeners(e, type) {
         const listeners = e.currentTarget._events[type];
@@ -15179,7 +15212,7 @@
         });
       }
       release() {
-        this.releaseStatus = "released", this.stopAnimates(), application.graphicService.onRelease(this);
+        this.releaseStatus = "released", this.stopAnimates(), application.graphicService.onRelease(this), super.release();
       }
       _emitCustomEvent(type, context) {
         var _a, _b;
@@ -22842,12 +22875,12 @@
         throw new Error("暂不支持");
       }
       release() {
-        var _a, _b;
+        var _a, _b, _d;
         super.release(), this.hooks.beforeRender.unTap("constructor", this.beforeRender), this.hooks.afterRender.unTap("constructor", this.afterRender), this.eventSystem && this.eventSystem.release(), this.layerService.releaseStage(this), this.pluginService.release(), this.forEach(layer => {
           layer.release();
         }), this.interactiveLayer && (this.interactiveLayer.forEachChildren(item => {
           item.setStage && item.setStage(null, null), this.interactiveLayer.removeChild(item);
-        }), this.interactiveLayer.release()), this.window.release(), null === (_a = this._ticker) || void 0 === _a || _a.remTimeline(null == this ? void 0 : this.timeline), null === (_b = this._ticker) || void 0 === _b || _b.removeListener("tick", this.afterTickCb), this.renderService.renderTreeRoots = [];
+        }), this.interactiveLayer.release()), this.window.release(), null === (_a = this._ticker) || void 0 === _a || _a.remTimeline(null == this ? void 0 : this.timeline), null === (_b = this._ticker) || void 0 === _b || _b.removeListener("tick", this.afterTickCb), this.params.ticker || null === (_d = this._ticker) || void 0 === _d || _d.release(), this.renderService.renderTreeRoots = [];
       }
       setStage(stage) {}
       dirty(b, matrix) {
@@ -27735,7 +27768,7 @@
         this._sliderRenderBounds = null, this._sliderLimitRange = null;
       }
       release(all) {
-        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).removeEventListener("touchmove", this._handleTouchMove, {
           passive: !1
         }), this._clearDragEvents();
       }
@@ -29940,17 +29973,21 @@
         } = this.attribute.label;
         textStyle = isFunction$1(textStyle) ? merge$1({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer)) : textStyle;
         const labelAlign = this.getLabelAlign(vector, inside, textStyle.angle);
-        return textStyle = merge$1(labelAlign, textStyle), isFunction$1(textStyle.text) && (textStyle.text = textStyle.text({
+        textStyle = merge$1(labelAlign, textStyle), isFunction$1(textStyle.text) && (textStyle.text = textStyle.text({
           label: tickDatum.label,
           value: tickDatum.rawValue,
           index: tickDatum.index,
           layer: layer
-        })), Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, textContent, textStyle)), {
+        }));
+        let reactStyle = textStyle.react;
+        return isFunction$1(reactStyle) && (reactStyle = reactStyle(tickDatum, index, tickData, layer)), Object.assign(Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, textContent, textStyle)), {
           text: null != text ? text : textContent,
           _originText: tickDatum.label,
           lineHeight: null == textStyle ? void 0 : textStyle.fontSize,
           type: type
-        }), textStyle);
+        }), textStyle), {
+          react: reactStyle
+        });
       }
       getLabelPosition(point, vector, text, style) {
         return point;
@@ -30979,6 +31016,8 @@
           this.status === STATUS$1.RUNNING && (this.tickCounts++, this.timelines.forEach(timeline => {
             timeline.tick(delta);
           }), this.emit("tick", delta));
+        }, this._handleGraphTick = () => {
+          this.initHandler(!1);
         }, this.init(), this.lastFrameTime = -1, this.tickCounts = 0, this.stage = stage, this.autoStop = !0, this.interval = 16, this.computeTimeOffsetAndJitter();
       }
       bindStage(stage) {
@@ -30988,9 +31027,7 @@
         this.timeOffset = Math.floor(Math.random() * this.interval), this._jitter = Math.min(Math.max(.2 * this.interval, 6), .7 * this.interval);
       }
       init() {
-        this.interval = 16, this.status = STATUS$1.INITIAL, application.global.hooks.onSetEnv.tap("graph-ticker", () => {
-          this.initHandler(!1);
-        }), application.global.env && this.initHandler(!1);
+        this.interval = 16, this.status = STATUS$1.INITIAL, application.global.hooks.onSetEnv.tap("graph-ticker", this._handleGraphTick), application.global.env && this.initHandler(!1);
       }
       addTimeline(timeline) {
         this.timelines.push(timeline);
@@ -31063,7 +31100,7 @@
       }
       release() {
         var _a;
-        this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1;
+        this.stop(), this.timelines = [], null === (_a = this.tickerHandler) || void 0 === _a || _a.release(), this.tickerHandler = null, this.lastFrameTime = -1, application.global.hooks.onSetEnv.unTap("graph-ticker", this._handleGraphTick);
       }
       checkSkip(delta) {
         var _a, _b, _c;
@@ -39461,7 +39498,7 @@
         });
       }
       clearVGlobalEvents() {
-        ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+        ("browser" === vglobal.env ? vglobal : this.stage).removeEventListener("touchmove", this._handleTouchMove, {
           passive: !1
         });
       }
@@ -43165,7 +43202,7 @@
         };
       }
       release(all) {
-        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).removeEventListener("touchmove", this._handleTouchMove, {
           passive: !1
         }), this._clearAllDragEvents();
       }
@@ -44212,6 +44249,9 @@
           value: this._data[dataIndex]
         });
       }
+      release(all) {
+        this._sliderVisible || this._slider.release(all), super.release(all);
+      }
     }
     BasePlayer.defaultAttributes = {
       visible: !0,
@@ -46160,6 +46200,9 @@
       }
       return isArray$1(spec) ? spec.map(s => functionTransform(s, VChart)) : spec;
     }
+    function transformFunctionAttribute(att, ...args) {
+      return isFunction$1(att) ? att(...args) : att;
+    }
 
     const initTextMeasure = (textSpec, option, useNaiveCanvas) => initTextMeasure$1(textSpec, option, useNaiveCanvas, {
       fontFamily: token.fontFamily,
@@ -50022,12 +50065,12 @@
       _runApplyGraphic(graphics) {
         const hasAnimation = this.hasAnimation();
         graphics.forEach((g, index) => {
-          var _a, _b;
+          var _a, _b, _c;
           const finalAttrs = g.context.finalAttrs,
             hasStateAnimation = this.hasAnimationByState(g.context.animationState);
           if (g.setAttributes) {
             const diffAttrs = getDiffAttributesOfGraphic(g, finalAttrs);
-            g.context.diffAttrs = diffAttrs, g.context.reusing ? (g.context.lastAttrs = g.attribute, g.initAttributes({}), g.context.reusing = !1) : hasStateAnimation || (hasAnimation ? g.setAttributesAndPreventAnimate(diffAttrs) : g.setAttributes(diffAttrs)), hasAnimation && g.setFinalAttributes(finalAttrs);
+            g.context.diffAttrs = diffAttrs, g.context.reusing ? (g.context.lastAttrs = g.attribute, g.initAttributes({}), g.context.reusing = !1) : hasStateAnimation || (hasAnimation ? g.setAttributesAndPreventAnimate(diffAttrs) : g.setAttributes(diffAttrs)), !(null === (_c = this.renderContext) || void 0 === _c ? void 0 : _c.progressive) && this._product && g.parent !== this._product && this._product.appendChild(g), hasAnimation && g.setFinalAttributes(finalAttrs);
           } else {
             const mockGraphic = g;
             g = this._createGraphic(finalAttrs), hasAnimation && (null === (_a = g.setFinalAttributes) || void 0 === _a || _a.call(g, finalAttrs)), g.context = mockGraphic.context, g.context.diffAttrs = finalAttrs, g.stateSort = this._stateSort;
@@ -54756,7 +54799,7 @@
         const components = this._getNeedClearVRenderComponents();
         components && components.length && components.forEach(c => {
           var _a;
-          c && (null === (_a = this.getContainer()) || void 0 === _a || _a.removeChild(c), c = null);
+          c && (c.release(!0), null === (_a = this.getContainer()) || void 0 === _a || _a.removeChild(c), c = null);
         }), this._container = null, null === (_a = this.pluginService) || void 0 === _a || _a.clearAll();
       }
       compile() {
@@ -55160,7 +55203,7 @@
       _getGridAttributes() {
         const spec = this._spec;
         return {
-          alternateColor: spec.grid.alternateColor,
+          alternateColor: transformFunctionAttribute(spec.grid.alternateColor),
           alignWithLabel: spec.grid.alignWithLabel,
           style: isFunction$1(spec.grid.style) ? (datum, index) => {
             var _a, _b;
@@ -55172,7 +55215,7 @@
           } : {
             type: "line",
             visible: spec.subGrid.visible,
-            alternateColor: spec.subGrid.alternateColor,
+            alternateColor: transformFunctionAttribute(spec.subGrid.alternateColor),
             style: transformToGraphic(spec.subGrid.style)
           }
         };
@@ -74024,6 +74067,11 @@
       },
       cellBackground: {
         visible: !1
+      },
+      label: {
+        style: {
+          lineWidth: 2
+        }
       }
     };
 
@@ -74052,8 +74100,9 @@
         this.initCellMarkStyle(), this.initCellBackgroundMarkStyle();
       }
       initLabelMarkStyle(textMark) {
+        var _a, _b, _c;
         textMark && this.setMarkStyle(textMark, {
-          fill: this.getColorAttribute(),
+          fill: null !== (_c = null === (_b = null === (_a = this._spec.cell) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fill) && void 0 !== _c ? _c : this.getColorAttribute(),
           text: datum => datum[this.getMeasureField()[0]]
         });
       }
@@ -79452,7 +79501,7 @@
         return this._visible;
       }
       constructor(spec, options) {
-        super(spec, options), this.layoutType = "none", this._orient = "left", this._cacheVisibility = void 0, this._dataUpdating = !1, this._hasInitStateScale = !1, this._shouldChange = !0, this._stateField = "x", this._handleStateChange = (startValue, endValue, tag) => {
+        super(spec, options), this.layoutType = "none", this._orient = "left", this._cacheVisibility = void 0, this._dataUpdating = !1, this._hasInitStateScale = !1, this._shouldChange = !0, this._stateField = "x", this._currentDataCollection = [], 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 = {
@@ -79484,7 +79533,7 @@
         }), () => this._regions, (() => this._option).bind(this), () => this.event);
       }
       created() {
-        super.created(), this._setAxisFromSpec(), this._setRegionsFromSpec(), this._initEvent(), this._initData(), this._initStateScale(), this._setStateFromSpec();
+        this._handleDataCollectionChangeBound = this._handleDataCollectionChange.bind(this), super.created(), this._setAxisFromSpec(), this._setRegionsFromSpec(), this._initEvent(), this._initData(), this._initStateScale(), this._setStateFromSpec();
       }
       initLayout() {
         super.initLayout(), this._layout && (this._layout.layoutOrient = this._orient);
@@ -79567,7 +79616,7 @@
           this._regions = ids.length ? this._regions.filter(r => ids.includes(r.id)) : [];
         } else ;
       }
-      _initData() {
+      _collectDataInfo() {
         const dataCollection = [],
           seriesCollection = [],
           stateFields = [],
@@ -79602,9 +79651,25 @@
           userId: this._seriesUserId,
           specIndex: this._seriesIndex
         });
+        return {
+          dataCollection: dataCollection,
+          seriesCollection: seriesCollection,
+          stateFields: stateFields,
+          valueFields: valueFields,
+          isCategoryState: isCategoryState
+        };
+      }
+      _initData() {
         const {
-          dataSet: dataSet
-        } = this._option;
+            dataCollection: dataCollection,
+            seriesCollection: seriesCollection,
+            stateFields: stateFields,
+            valueFields: valueFields,
+            isCategoryState: isCategoryState
+          } = this._collectDataInfo(),
+          {
+            dataSet: dataSet
+          } = this._option;
         registerDataSetInstanceParser(dataSet, "dataview", dataViewParser), registerDataSetInstanceTransform(dataSet, "dataFilterComputeDomain", dataFilterComputeDomain);
         const data = new DataView(dataSet, {
           name: `${this.type}_${this.id}_data`
@@ -79624,7 +79689,7 @@
               valueField: this._valueField
             }
           }
-        }, !1), this._data = new CompilableData(this._option, data), data.reRunAllTransform(), dataSet.multipleDataViewAddListener(dataCollection, "change", this._handleDataCollectionChange.bind(this));
+        }, !1), this._data = new CompilableData(this._option, data), data.reRunAllTransform(), this._currentDataCollection = dataCollection, dataSet.multipleDataViewAddListener(dataCollection, "change", this._handleDataCollectionChangeBound);
       }
       _addTransformToSeries() {
         this._relatedAxisComponent && "axis" === this._filterMode || (registerDataSetInstanceTransform(this._option.dataSet, "dataFilterWithNewDomain", dataFilterWithNewDomain), registerDataSetInstanceTransform(this._option.dataSet, "lockStatisticsFilter", lockStatisticsFilter), eachSeries(this._regions, s => {
@@ -79659,8 +79724,41 @@
       }
       onDataUpdate() {
         var _a;
+        const {
+          dataCollection: dataCollection,
+          seriesCollection: seriesCollection,
+          stateFields: stateFields,
+          valueFields: valueFields,
+          isCategoryState: isCategoryState
+        } = this._collectDataInfo();
+        if (this._currentDataCollection.length !== dataCollection.length || this._currentDataCollection.some((dv, i) => dv !== dataCollection[i])) {
+          this._currentDataCollection.forEach(dv => {
+            var _a;
+            null === (_a = null == dv ? void 0 : dv.target) || void 0 === _a || _a.removeListener("change", this._handleDataCollectionChangeBound);
+          }), this._currentDataCollection = dataCollection;
+          const {
+            dataSet: dataSet
+          } = this._option;
+          dataSet.multipleDataViewAddListener(this._currentDataCollection, "change", this._handleDataCollectionChangeBound);
+        }
+        this._data.getDataView().transform({
+          type: "dataFilterComputeDomain",
+          options: {
+            input: {
+              dataCollection: dataCollection,
+              seriesCollection: seriesCollection,
+              stateFields: stateFields,
+              valueFields: valueFields,
+              isCategoryState: isCategoryState
+            },
+            output: {
+              stateField: this._stateField,
+              valueField: this._valueField
+            }
+          }
+        }, !1), this._data.getDataView().reRunAllTransform();
         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));
+        this._stateScale.domain(domain, !1), (isValid$1(this._spec.start) || isValid$1(this._spec.end)) && this._setStateFromSpec(), 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));
       }
       _parseFieldOfSeries(s) {
         var _a;
@@ -82543,11 +82641,11 @@
           const sliderHeight = null !== (_a = isVertical(this._orient) ? this._spec.slider.railStyle.width : this._spec.slider.railStyle.height) && void 0 !== _a ? _a : 10,
             controllersHeight = Math.max(...array(null === (_c = null === (_b = this._spec.controller.start) || void 0 === _b ? void 0 : _b.style) || void 0 === _c ? void 0 : _c.size), ...array(null === (_e = null === (_d = this._spec.controller.pause) || void 0 === _d ? void 0 : _d.style) || void 0 === _e ? void 0 : _e.size), ...array(null === (_g = null === (_f = this._spec.controller.backward) || void 0 === _f ? void 0 : _f.style) || void 0 === _g ? void 0 : _g.size), ...array(null === (_j = null === (_h = this._spec.controller.forward) || void 0 === _h ? void 0 : _h.style) || void 0 === _j ? void 0 : _j.size));
           return sliderHeight >= controllersHeight ? sliderHeight - controllersHeight : 0;
+        }, this.autoPlayCallback = () => {
+          var _a;
+          (null === (_a = this._spec) || void 0 === _a ? void 0 : _a.auto) && (this._playerComponent.pause(), this._playerComponent.play());
         }, this._initEvent = () => {
-          this._option.disableTriggerEvent || (this._option.globalInstance.on(ChartEvent.rendered, () => {
-            var _a;
-            (null === (_a = this._spec) || void 0 === _a ? void 0 : _a.auto) && (this._playerComponent.pause(), this._playerComponent.play());
-          }), this._playerComponent.addEventListener(PlayerEventEnum.end, () => {
+          this._option.disableTriggerEvent || (this._option.globalInstance.off(ChartEvent.rendered, this.autoPlayCallback), this._option.globalInstance.on(ChartEvent.rendered, this.autoPlayCallback), this._playerComponent.addEventListener(PlayerEventEnum.end, () => {
             var _a;
             this.event.emit(ChartEvent.playerEnd, {
               model: this
@@ -82698,6 +82796,9 @@
           }
         });
       }
+      release() {
+        this._option.globalInstance.off(ChartEvent.rendered, this.autoPlayCallback);
+      }
     };
     Player$1.builtInTheme = {
       player: player
@@ -88776,7 +88877,7 @@
 
     const VChartSimple = createChart('VChartSimple');
 
-    const version = "2.0.16";
+    const version = "2.0.18";
 
     exports.Area = Area;
     exports.AreaChart = AreaChart;