@visactor/vchart-extension 1.13.3-alpha.6 → 1.13.3-alpha.8

package/build/index.js

@@ -402,7 +402,15 @@
     const applyVisible = (spec, keyList) => {
         keyList.forEach(key => {
             var _a, _b, _c, _d, _e, _f;
-            spec[key] = Object.assign(Object.assign({}, spec[key]), { style: Object.assign(Object.assign({}, (_a = spec[key]) === null || _a === void 0 ? void 0 : _a.style), { visible: (_f = (_d = (_c = (_b = spec[key]) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.visible) !== null && _d !== void 0 ? _d : (_e = spec[key]) === null || _e === void 0 ? void 0 : _e.visible) !== null && _f !== void 0 ? _f : true }) });
+            if (vutils.isArray(spec[key])) {
+                spec[key].forEach((s, i) => {
+                    var _a, _b, _c;
+                    spec[key][i] = Object.assign(Object.assign({}, s), { style: Object.assign(Object.assign({}, s === null || s === void 0 ? void 0 : s.style), { visible: (_c = (_b = (_a = s === null || s === void 0 ? void 0 : s.style) === null || _a === void 0 ? void 0 : _a.visible) !== null && _b !== void 0 ? _b : s === null || s === void 0 ? void 0 : s.visible) !== null && _c !== void 0 ? _c : true }) });
+                });
+            }
+            else {
+                spec[key] = Object.assign(Object.assign({}, spec[key]), { style: Object.assign(Object.assign({}, (_a = spec[key]) === null || _a === void 0 ? void 0 : _a.style), { visible: (_f = (_d = (_c = (_b = spec[key]) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.visible) !== null && _d !== void 0 ? _d : (_e = spec[key]) === null || _e === void 0 ? void 0 : _e.visible) !== null && _f !== void 0 ? _f : true }) });
+            }
         });
     };
     const mergeObjects = (objA, objB) => {
@@ -560,7 +568,7 @@
             applyVisible(spec, [
                 'barBackground',
                 'rankingIcon',
-                'decorateHaloIcon',
+                'decorateHaloIcons',
                 'orderLabel',
                 'nameLabel',
                 'valueLabel'
@@ -644,6 +652,7 @@
             ];
         }
         generateBarBackground(spec) {
+            var _a;
             const totalDuration = spec.animation.duration;
             return {
                 type: spec.barBackground.type,
@@ -651,6 +660,7 @@
                 visible: true,
                 dataKey: DATA_KEY,
                 zIndex: -99,
+                state: (_a = spec.barBackground) === null || _a === void 0 ? void 0 : _a.state,
                 style: Object.assign(Object.assign({ x: (datum, ctx) => spec.barBackground.type === 'symbol' ? ctx.getRegion().getLayoutRect().width / 2 : 0, y: (datum, ctx) => {
                         return (ctx.valueToY([datum[spec.yField]]) +
                             ctx.yBandwidth() / 2 -
@@ -668,14 +678,19 @@
             };
         }
         generateDecorateHaloIcons(spec) {
+            var _a;
             const totalDuration = spec.animation.duration;
-            return spec.decorateHaloIcons.map((decorateHaloIcon) => {
+            return (_a = spec.decorateHaloIcons) === null || _a === void 0 ? void 0 : _a.map((decorateHaloIcon) => {
                 return {
                     type: 'symbol',
                     dataId: 'data',
                     visible: true,
                     dataKey: DATA_KEY,
+                    state: decorateHaloIcon === null || decorateHaloIcon === void 0 ? void 0 : decorateHaloIcon.state,
                     style: Object.assign(Object.assign({ x: (datum, ctx) => {
+                            if (datum[spec.xField] === undefined || datum[spec.xField] === null) {
+                                return undefined;
+                            }
                             return ctx.valueToX([datum[spec.xField]]);
                         }, y: (datum, ctx) => {
                             return ctx.valueToY([datum[spec.yField]]) + ctx.yBandwidth() / 2;
@@ -699,6 +714,7 @@
                 dataId: 'data',
                 visible: true,
                 dataKey: DATA_KEY,
+                state: spec.rankingIcon.state,
                 style: Object.assign(Object.assign({ x: (datum) => {
                         if (spec.labelLayout === 'bothEnd') {
                             return -(NAME_LABEL_PADDING_RIGHT +
@@ -733,11 +749,13 @@
             };
         }
         generateNameLabel(spec) {
+            var _a;
             const totalDuration = spec.animation.duration;
             return {
                 type: 'text',
                 dataId: 'data',
                 dataKey: DATA_KEY,
+                state: (_a = spec.nameLabel) === null || _a === void 0 ? void 0 : _a.state,
                 style: Object.assign(Object.assign({ text: (datum) => this.formatDatum(spec.yField, datum), x: () => {
                         var _a;
                         if (spec.labelLayout === 'bothEnd') {
@@ -765,11 +783,13 @@
             };
         }
         generateOrderLabel(spec) {
+            var _a;
             const totalDuration = spec.animation.duration;
             return {
                 type: 'text',
                 dataId: 'data',
                 dataKey: DATA_KEY,
+                state: (_a = spec.orderLabel) === null || _a === void 0 ? void 0 : _a.state,
                 style: Object.assign(Object.assign({ text: (datum) => this.formatDatum(ORDER_KEY, datum), x: (datum) => {
                         var _a;
                         if (spec.labelLayout === 'bothEnd') {
@@ -804,6 +824,11 @@
                 dataId: 'data',
                 visible: true,
                 dataKey: DATA_KEY,
+                state: {
+                    blur: {
+                        opacity: 0.2
+                    }
+                },
                 style: Object.assign(Object.assign({ text: (datum) => this.formatDatum(spec.xField, datum), x: (datum, ctx) => {
                         if (spec.labelLayout === 'bothEnd') {
                             return (ctx.getRegion().getLayoutRect().width +
@@ -818,7 +843,7 @@
                             return ctx.valueToY([datum[spec.yField]]) + ctx.yBandwidth() / 2;
                         }
                         return ctx.valueToY([datum[spec.yField]]) + ctx.yBandwidth() / 2 - spec.bar.height / 2 - LABEL_PADDING_BOTTOM;
-                    } }, spec.valueLabel.style), { textAlign: 'right', textBaseline: spec.labelLayout === 'bothEnd' ? 'middle' : 'bottom', visible: (datum) => {
+                    } }, spec.valueLabel.style), { textAlign: spec.labelLayout === 'bothEnd' ? 'left' : 'right', textBaseline: spec.labelLayout === 'bothEnd' ? 'middle' : 'bottom', visible: (datum) => {
                         if (datum[SUPPLY_DATA_KEY]) {
                             return false;
                         }
@@ -832,6 +857,9 @@
         }
         transformPaddingSpec(spec) {
             var _a;
+            const maxHaloIconSize = spec.decorateHaloIcons.length > 0
+                ? Math.max(...spec.decorateHaloIcons.map((icon) => { var _a, _b; return (_b = (_a = icon.style) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 18; }))
+                : 0;
             spec.padding = Object.assign({ left: spec.labelLayout === 'bothEnd'
                     ? NAME_LABEL_PADDING_RIGHT +
                         this.getMaxDataLabelLens(spec, spec.yField, this.nameLabelTextMeasure) +
@@ -840,7 +868,7 @@
                             : 0) +
                         (spec.rankingIcon.style.visible ? NAME_SYMBOL_PADDING_RIGHT + ((_a = spec.rankingIcon.style.size) !== null && _a !== void 0 ? _a : 10) : 0) +
                         CHART_PADDING_LEFT
-                    : CHART_PADDING_LEFT, right: spec.labelLayout === 'bothEnd'
+                    : CHART_PADDING_LEFT + maxHaloIconSize / 2, right: spec.labelLayout === 'bothEnd'
                     ? VALUE_LABEL_PADDING_LEFT +
                         this.getMaxDataLabelLens(spec, spec.yField, this.valueLabelTextMeasure) +
                         CHART_PADDING_RIGHT