@visactor/vchart 2.0.20-alpha.1 → 2.0.20-alpha.3

package/build/index.es.js

@@ -22135,9 +22135,10 @@ class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRende
       }), context.highPerformanceRestore(), context.setTransformForCurrent();
     } else {
       const {
-        backgroundCornerRadius: backgroundCornerRadius
+        backgroundCornerRadius: backgroundCornerRadius,
+        backgroundOpacity = 1
       } = graphic.attribute;
-      context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+      context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.globalAlpha = backgroundOpacity, context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
     }
     shouldReCalBounds && boundsAllocate.free(b), restore();
   }
@@ -44071,8 +44072,9 @@ class LabelBase extends AnimateComponent {
       const label = labels[i];
       if (!label) continue;
       const baseMark = this.getRelatedGraphic(label.attribute);
-      let backgroundColor = baseMark.getAttributes(!0).fill,
-        foregroundColor = label.attribute.fill;
+      let backgroundColor = baseMark.getAttributes(!0).fill;
+      const backgroundOpacity = baseMark.getAttributes(!0).fillOpacity;
+      let foregroundColor = label.attribute.fill;
       if (isObject$2(backgroundColor) && backgroundColor.gradient) {
         const firstStopColor = null === (_g = null === (_f = backgroundColor.stops) || void 0 === _f ? void 0 : _f[0]) || void 0 === _g ? void 0 : _g.color;
         firstStopColor && (backgroundColor = firstStopColor, foregroundColor = firstStopColor);
@@ -44086,11 +44088,26 @@ class LabelBase extends AnimateComponent {
         if (fill && label.setAttributes({
           fill: fill
         }), 0 === label.attribute.lineWidth || 0 === label.attribute.strokeOpacity) continue;
-        const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
-        stroke && label.setAttributes({
-          stroke: stroke
-        });
+        if ("background" === interactInvertType) label.setAttributes({
+          stroke: !1
+        });else {
+          const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
+          stroke && label.setAttributes({
+            stroke: stroke
+          });
+        }
       } else if (isIntersect && "none" !== interactInvertType) {
+        if ("background" === interactInvertType) {
+          const fill = smartInvertStrategy(fillStrategy, backgroundColor, invertColor, similarColor);
+          fill && label.setAttributes({
+            fill: fill
+          }), label.setAttributes({
+            stroke: !1,
+            background: backgroundColor,
+            backgroundOpacity: backgroundOpacity
+          });
+          continue;
+        }
         if (0 === label.attribute.lineWidth || 0 === label.attribute.strokeOpacity) continue;
         if (label.attribute.stroke) {
           label.setAttributes({
@@ -44107,6 +44124,9 @@ class LabelBase extends AnimateComponent {
           stroke: stroke
         });
       }
+      !1 === isInside && "background" === interactInvertType && label.setAttributes({
+        background: null
+      });
     }
   }
   _canPlaceInside(textBound, shapeBound) {
@@ -49650,7 +49670,31 @@ class Slider extends AbstractComponent {
     return graphicCreator.symbol(style);
   }
   _renderHandlerText(value, position) {
-    var _a, _b, _c;
+    return graphicCreator.text(this._getHandlerTextAttributes(value, position));
+  }
+  _getHandlerPosition(isStart) {
+    return this.attribute.range && isStart ? "start" : "end";
+  }
+  _getHandlerTextStyle(value, position) {
+    const {
+      align: align,
+      handlerSize = 14,
+      handlerText = {},
+      railHeight: railHeight,
+      railWidth: railWidth,
+      slidable: slidable
+    } = this.attribute;
+    return isFunction$1(handlerText.style) ? handlerText.style(value, position, {
+      layout: this.attribute.layout,
+      align: align,
+      railWidth: railWidth,
+      railHeight: railHeight,
+      handlerSize: handlerSize,
+      slidable: slidable
+    }) : handlerText.style;
+  }
+  _getHandlerTextAttributes(value, position) {
+    var _a, _b;
     const {
         align: align,
         handlerSize = 14,
@@ -49662,13 +49706,13 @@ class Slider extends AbstractComponent {
       isHorizontal = this._isHorizontal,
       pos = this.calculatePosByValue(value, position),
       textSpace = null !== (_a = handlerText.space) && void 0 !== _a ? _a : 4,
+      handlerTextStyle = this._getHandlerTextStyle(value, position),
       textStyle = {
         text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_b = handlerText.precision) && void 0 !== _b ? _b : 0),
-        lineHeight: null === (_c = handlerText.style) || void 0 === _c ? void 0 : _c.lineHeight,
+        lineHeight: null == handlerTextStyle ? void 0 : handlerTextStyle.lineHeight,
         cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
       };
-    isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos);
-    return graphicCreator.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
+    return isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos), Object.assign(Object.assign({}, textStyle), handlerTextStyle);
   }
   _renderTooltip() {
     var _a;
@@ -49796,31 +49840,19 @@ class Slider extends AbstractComponent {
     }
   }
   _updateHandler(handler, position, value) {
-    var _a;
     const isHorizontal = this._isHorizontal;
     handler.setAttribute(isHorizontal ? "x" : "y", position);
     const updateHandlerText = handler.name === SLIDER_ELEMENT_NAME.startHandler ? this._startHandlerText : this._endHandlerText;
     if (updateHandlerText) {
-      const {
-        handlerText = {}
-      } = this.attribute;
-      updateHandlerText.setAttributes({
-        text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_a = handlerText.precision) && void 0 !== _a ? _a : 0),
-        [isHorizontal ? "x" : "y"]: position
-      });
+      const handlerPosition = this._getHandlerPosition(handler.name === SLIDER_ELEMENT_NAME.startHandler);
+      updateHandlerText.setAttributes(this._getHandlerTextAttributes(value, handlerPosition));
     }
     handler.name === SLIDER_ELEMENT_NAME.startHandler ? (this._currentValue.startValue = value, this._currentValue.startPos = position) : (this._currentValue.endValue = value, this._currentValue.endPos = position);
   }
   _updateHandlerText(handlerText, position, value) {
-    var _a;
     const isHorizontal = this._isHorizontal,
-      {
-        handlerText: handlerTextAttr = {}
-      } = this.attribute;
-    handlerText.setAttributes({
-      [isHorizontal ? "x" : "y"]: position,
-      text: handlerTextAttr.formatter ? handlerTextAttr.formatter(value) : value.toFixed(null !== (_a = handlerTextAttr.precision) && void 0 !== _a ? _a : 0)
-    });
+      handlerPosition = this._getHandlerPosition(handlerText.name === SLIDER_ELEMENT_NAME.startHandlerText);
+    handlerText.setAttributes(this._getHandlerTextAttributes(value, handlerPosition));
     const updateHandler = handlerText.name === SLIDER_ELEMENT_NAME.startHandlerText ? this._startHandler : this._endHandler;
     updateHandler && updateHandler.setAttributes({
       [isHorizontal ? "x" : "y"]: position
@@ -59213,6 +59245,9 @@ class BaseMark extends GrammarItem {
         if (this.isCommited()) {
             if (this.getVisible() &&
                 (!this._skipBeforeLayouted || this.getCompiler().getLayoutState() !== LayoutState.before)) {
+                if (!this._product) {
+                    this._initProduct();
+                }
                 log(`render mark: ${this.getProductId()}, type is ${this.type}`);
                 this.renderInner();
             }
@@ -66132,6 +66167,9 @@ class AxisComponent extends BaseComponent {
     getTickData(index = 0) {
         return this._tickData[index];
     }
+    getVisible() {
+        return this._visible;
+    }
     get visible() {
         return this._visible;
     }
@@ -66142,20 +66180,34 @@ class AxisComponent extends BaseComponent {
         return this._coordinateType;
     }
     constructor(spec, options) {
-        var _a;
+        var _a, _b;
         super(spec, options);
         this.specKey = 'axes';
         this._scales = [];
         this._tickData = [];
         this._visible = true;
+        this._specVisible = true;
+        this._hideWhenEmpty = false;
         this._tick = undefined;
         this._onTickDataChange = (tickData) => {
             this._forceLayout();
             tickData === null || tickData === void 0 ? void 0 : tickData.updateData();
         };
-        this._visible = (_a = spec.visible) !== null && _a !== void 0 ? _a : true;
+        this._specVisible = (_a = spec.visible) !== null && _a !== void 0 ? _a : true;
+        this._hideWhenEmpty = (_b = spec.hideWhenEmpty) !== null && _b !== void 0 ? _b : false;
+        this._visible = this._specVisible;
         this._coordinateType = 'none';
     }
+    setAttrFromSpec() {
+        var _a, _b;
+        super.setAttrFromSpec();
+        this._specVisible = (_a = this._spec.visible) !== null && _a !== void 0 ? _a : true;
+        this._hideWhenEmpty = (_b = this._spec.hideWhenEmpty) !== null && _b !== void 0 ? _b : false;
+        this._visible = this._specVisible;
+        if (this._scale) {
+            this._refreshVisibilityByData();
+        }
+    }
     getVRenderComponents() {
         var _a, _b;
         return [(_a = this._axisMark) === null || _a === void 0 ? void 0 : _a.getProduct(), (_b = this._gridMark) === null || _b === void 0 ? void 0 : _b.getProduct()].filter(isValid$1);
@@ -66167,8 +66219,9 @@ class AxisComponent extends BaseComponent {
         this.initEvent();
         this.initScales();
         this.updateSeriesScale();
+        this._refreshVisibilityByData();
         this._shouldComputeTickData() && this._initData();
-        if (this._visible) {
+        if (this._specVisible) {
             const axisMark = this._createMark({ type: 'component', name: `axis-${this.getOrient()}` }, {
                 componentType: this.getOrient() === 'angle' ? AxisEnum.circleAxis : AxisEnum.lineAxis,
                 mode: this._spec.mode
@@ -66198,6 +66251,7 @@ class AxisComponent extends BaseComponent {
                 this._marks.addMark(gridMark);
                 this._gridMark = gridMark;
             }
+            this._syncComponentVisibility();
             if (((_h = this._option.globalInstance) === null || _h === void 0 ? void 0 : _h.isAnimationEnable()) &&
                 get$1(this._option.getChart().getSpec(), 'animation') !== false &&
                 this._spec.animation === true) {
@@ -66218,7 +66272,7 @@ class AxisComponent extends BaseComponent {
         }
     }
     _shouldComputeTickData() {
-        return this.getVisible() || this._spec.forceInitTick;
+        return this._specVisible && (this.getVisible() || this._spec.forceInitTick || this._hideWhenEmpty);
     }
     _initData() {
         const tickData = this._initTickDataSet(this._tickTransformOption());
@@ -66230,40 +66284,41 @@ class AxisComponent extends BaseComponent {
     }
     collectData(depth, rawData) {
         const data = [];
-        eachSeries(this._regions, s => {
-            var _a;
-            let field = this.collectSeriesField(depth, s);
-            field = (isArray$1(field) ? (isContinuous(this._scale.type) ? field : [field[0]]) : [field]);
-            if (!depth) {
-                this._dataFieldText = s.getFieldAlias(field[0]);
-            }
-            if (field) {
-                const viewData = s.getViewData();
-                if (rawData) {
-                    field.forEach(f => {
-                        data.push(s.getRawDataStatisticsByField(f, !!isContinuous(this._scale.type)));
-                    });
-                }
-                else if (viewData && viewData.latestData && viewData.latestData.length) {
-                    const seriesData = (_a = s.getViewDataStatistics) === null || _a === void 0 ? void 0 : _a.call(s);
-                    const userSetBreaks = this.type === ComponentTypeEnum.cartesianLinearAxis && this._spec.breaks && this._spec.breaks.length;
-                    field.forEach(f => {
-                        var _a;
-                        if ((_a = seriesData === null || seriesData === void 0 ? void 0 : seriesData.latestData) === null || _a === void 0 ? void 0 : _a[f]) {
-                            if (userSetBreaks) {
-                                data.push(Object.assign(Object.assign({}, seriesData.latestData[f]), { values: viewData.latestData.map((obj) => obj[f]) }));
-                            }
-                            else {
-                                data.push(seriesData.latestData[f]);
+        this._regions &&
+            eachSeries(this._regions, s => {
+                var _a;
+                let field = this.collectSeriesField(depth, s);
+                field = (isArray$1(field) ? (isContinuous(this._scale.type) ? field : [field[0]]) : [field]);
+                if (!depth) {
+                    this._dataFieldText = s.getFieldAlias(field[0]);
+                }
+                if (field) {
+                    const viewData = s.getViewData();
+                    if (rawData) {
+                        field.forEach(f => {
+                            data.push(s.getRawDataStatisticsByField(f, !!isContinuous(this._scale.type)));
+                        });
+                    }
+                    else if (viewData && viewData.latestData && viewData.latestData.length) {
+                        const seriesData = (_a = s.getViewDataStatistics) === null || _a === void 0 ? void 0 : _a.call(s);
+                        const userSetBreaks = this.type === ComponentTypeEnum.cartesianLinearAxis && this._spec.breaks && this._spec.breaks.length;
+                        field.forEach(f => {
+                            var _a;
+                            if ((_a = seriesData === null || seriesData === void 0 ? void 0 : seriesData.latestData) === null || _a === void 0 ? void 0 : _a[f]) {
+                                if (userSetBreaks) {
+                                    data.push(Object.assign(Object.assign({}, seriesData.latestData[f]), { values: viewData.latestData.map((obj) => obj[f]) }));
+                                }
+                                else {
+                                    data.push(seriesData.latestData[f]);
+                                }
                             }
-                        }
-                    });
+                        });
+                    }
                 }
-            }
-        }, {
-            userId: this._seriesUserId,
-            specIndex: this._seriesIndex
-        });
+            }, {
+                userId: this._seriesUserId,
+                specIndex: this._seriesIndex
+            });
         return data;
     }
     isSeriesDataEnable() {
@@ -66323,6 +66378,30 @@ class AxisComponent extends BaseComponent {
     }
     updateScaleDomain() {
     }
+    _hasCollectedSeriesData() {
+        return this.collectData(0).length > 0;
+    }
+    _refreshVisibilityByData() {
+        const nextVisible = this._specVisible && (!this._hideWhenEmpty || this._hasCollectedSeriesData());
+        const changed = this._visible !== nextVisible;
+        this._visible = nextVisible;
+        if (this._axisMark || this._gridMark) {
+            this._syncComponentVisibility();
+        }
+        if (changed) {
+            this._forceLayout();
+        }
+        return changed;
+    }
+    _syncComponentVisibility() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        (_a = this._axisMark) === null || _a === void 0 ? void 0 : _a.setVisible(this._visible);
+        (_b = this._gridMark) === null || _b === void 0 ? void 0 : _b.setVisible(this._visible && ((_c = this._spec.grid) === null || _c === void 0 ? void 0 : _c.visible) !== false);
+        (_g = (_f = (_e = (_d = this._axisMark) === null || _d === void 0 ? void 0 : _d.getComponent) === null || _e === void 0 ? void 0 : _e.call(_d)) === null || _f === void 0 ? void 0 : _f.setAttributes) === null || _g === void 0 ? void 0 : _g.call(_f, { visibleAll: this._visible });
+        (_l = (_k = (_j = (_h = this._gridMark) === null || _h === void 0 ? void 0 : _h.getComponent) === null || _j === void 0 ? void 0 : _j.call(_h)) === null || _k === void 0 ? void 0 : _k.setAttributes) === null || _l === void 0 ? void 0 : _l.call(_k, {
+            visibleAll: this._visible && ((_m = this._spec.grid) === null || _m === void 0 ? void 0 : _m.visible) !== false
+        });
+    }
     _clearRawDomain() {
     }
     onLayoutEnd() {
@@ -66784,6 +66863,10 @@ class CartesianAxis extends AxisComponent {
             return padding;
         };
         this._updateAxisLayout = () => {
+            if (!this._visible) {
+                this._syncComponentVisibility();
+                return;
+            }
             const startPoint = this.getLayoutStartPoint();
             const _a = this._getUpdateAttribute(false), { grid: updateGridAttrs } = _a, updateAxisAttrs = __rest$e(_a, ["grid"]);
             const axisAttrs = mergeSpec({ x: startPoint.x, y: startPoint.y }, this._axisStyle, updateAxisAttrs);
@@ -66791,6 +66874,7 @@ class CartesianAxis extends AxisComponent {
             if (this._gridMark) {
                 this._gridMark.setSimpleStyle(mergeSpec({ x: startPoint.x, y: startPoint.y }, this._getGridAttributes(), updateGridAttrs));
             }
+            this._syncComponentVisibility();
         };
         this._fixAxisOnZero = () => {
             const { onZero, visible } = this._spec.domainLine;
@@ -66957,7 +67041,7 @@ class CartesianAxis extends AxisComponent {
     setAttrFromSpec() {
         var _a;
         super.setAttrFromSpec();
-        if (this.visible) {
+        if (this._specVisible) {
             const isX = isXAxis(this.getOrient());
             if (isX) {
                 if (isUndefined$1(this._spec.maxHeight)) {
@@ -67287,7 +67371,7 @@ class CartesianAxis extends AxisComponent {
     }
     initEvent() {
         super.initEvent();
-        if (this.visible) {
+        if (this._specVisible) {
             this.event.on(ChartEvent.layoutEnd, this._updateAxisLayout);
             this.event.on(ChartEvent.layoutEnd, this._fixAxisOnZero);
             this.event.on(ChartEvent.layoutRectUpdate, () => {
@@ -67806,6 +67890,7 @@ class LinearAxisMixin {
         }
         this._updateNiceLabelFormatter(domain);
         this._domainAfterSpec = this._scale.domain();
+        this._refreshVisibilityByData();
         this.event.emit(ChartEvent.scaleDomainUpdate, { model: this });
         this.event.emit(ChartEvent.scaleUpdate, { model: this, value: 'domain' });
     }
@@ -68204,6 +68289,7 @@ class BandAxisMixin {
             }
         }
         this.transformScaleDomain();
+        this._refreshVisibilityByData();
         this.event.emit(ChartEvent.scaleDomainUpdate, { model: this });
         this.event.emit(ChartEvent.scaleUpdate, { model: this, value: 'domain' });
     }
@@ -78425,6 +78511,14 @@ class BasePieSeries extends PolarSeries {
         this._labelMark = null;
         this._labelLineMark = null;
         this._emptyArcMark = null;
+        this._pendingViewDataLabelUpdate = false;
+        this.flushViewDataLabelUpdate = () => {
+            if (!this._pendingViewDataLabelUpdate) {
+                return;
+            }
+            this._pendingViewDataLabelUpdate = false;
+            this._viewDataLabel.getDataView().reRunAllTransform();
+        };
         this.dataToCentralPosition = (datum) => {
             const angle = datum[ARC_MIDDLE_ANGLE];
             if (isNil$1(angle)) {
@@ -78600,12 +78694,13 @@ class BasePieSeries extends PolarSeries {
         var _a;
         super.initEvent();
         (_a = this._viewDataLabel.getDataView()) === null || _a === void 0 ? void 0 : _a.target.addListener('change', this.viewDataLabelUpdate.bind(this));
+        this.event.on(ChartEvent.afterRender, this.flushViewDataLabelUpdate);
     }
     initGroups() {
         return;
     }
     onLayoutEnd() {
-        this._viewDataLabel.getDataView().reRunAllTransform();
+        this._pendingViewDataLabelUpdate = true;
         this.onMarkPositionUpdate();
         super.onLayoutEnd();
     }
@@ -79009,7 +79104,7 @@ class PolarAxis extends AxisComponent {
     }
     setAttrFromSpec() {
         super.setAttrFromSpec();
-        if (this.visible) {
+        if (this._specVisible) {
             this._axisStyle = this._getAxisAttributes();
             this._gridStyle = this._getGridAttributes();
         }
@@ -95535,6 +95630,20 @@ const continuousLegendFilter = (data, op) => {
     return data;
 };
 
+function transformHandlerText(handlerText) {
+    if (!handlerText) {
+        return handlerText;
+    }
+    const nextHandlerText = Object.assign({}, handlerText);
+    const handlerTextStyle = handlerText.style;
+    if (isFunction$1(handlerTextStyle)) {
+        nextHandlerText.style = (value, position, context) => transformToGraphic(handlerTextStyle(value, position, context));
+    }
+    else if (!isEmpty(handlerTextStyle)) {
+        nextHandlerText.style = transformToGraphic(handlerTextStyle);
+    }
+    return nextHandlerText;
+}
 function getContinuousLegendAttributes(spec) {
     const _a = mergeSpec({}, spec), { title = {}, handler = {}, rail = {}, track = {}, startText, endText, handlerText, sizeBackground, background = {}, type, id, visible, orient, position, data, defaultSelected, field, filter, regionId, regionIndex, seriesIndex, seriesId, padding } = _a, restSpec = __rest$e(_a, ["title", "handler", "rail", "track", "startText", "endText", "handlerText", "sizeBackground", "background", "type", "id", "visible", "orient", "position", "data", "defaultSelected", "field", "filter", "regionId", "regionIndex", "seriesIndex", "seriesId", "padding"]);
     const attrs = restSpec;
@@ -95562,7 +95671,7 @@ function getContinuousLegendAttributes(spec) {
     }
     attrs.startText = transformComponentStyle(startText);
     attrs.endText = transformComponentStyle(endText);
-    attrs.handlerText = transformComponentStyle(handlerText);
+    attrs.handlerText = transformHandlerText(handlerText);
     if (!isEmpty(sizeBackground)) {
         attrs.sizeBackground = transformToGraphic(sizeBackground);
     }