@visactor/vchart 1.11.4 → 1.11.5

package/build/index.js

@@ -52795,7 +52795,10 @@
                 dangerColor: '#e33232',
                 warningColor: '#ffc528',
                 successColor: '#07a35a',
-                infoColor: '#3073f2'
+                infoColor: '#3073f2',
+                discreteLegendPagerTextColor: 'rgb(51, 51, 51)',
+                discreteLegendPagerHandlerColor: 'rgb(47, 69, 84)',
+                discreteLegendPagerHandlerDisableColor: 'rgb(170, 170, 170)'
             }
         }
     };
@@ -54007,6 +54010,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             },
             space: 12
         },
+        pager: {
+            textStyle: {
+                fill: { type: 'palette', key: 'discreteLegendPagerTextColor' }
+            },
+            handler: {
+                style: {
+                    fill: { type: 'palette', key: 'discreteLegendPagerHandlerColor' }
+                },
+                state: {
+                    disable: {
+                        fill: { type: 'palette', key: 'discreteLegendPagerHandlerDisableColor' }
+                    }
+                }
+            }
+        },
         item: {
             visible: true,
             spaceCol: 10,
@@ -54362,7 +54380,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             lineHeight: { type: 'token', key: 'l4LineHeight' },
             fontColor: { type: 'palette', key: 'primaryFontColor' },
             fontWeight: 'bold',
-            textAlign: 'left',
             textBaseline: 'middle',
             spacing: 0
         },
@@ -54374,7 +54391,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             fontSize: { type: 'token', key: 'l4FontSize' },
             lineHeight: { type: 'token', key: 'l4LineHeight' },
             fontColor: { type: 'palette', key: 'secondaryFontColor' },
-            textAlign: 'left',
             textBaseline: 'middle',
             spacing: 26
         },
@@ -54552,7 +54568,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 dangerColor: '#eb4b4b',
                 warningColor: '#f0bd30',
                 successColor: '#14b267',
-                infoColor: '#4284ff'
+                infoColor: '#4284ff',
+                discreteLegendPagerTextColor: '#BBBDC3',
+                discreteLegendPagerHandlerColor: '#BBBDC3',
+                discreteLegendPagerHandlerDisableColor: '#55595F'
             }
         }
     };
@@ -63600,11 +63619,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const getTooltipAttributes = (actualTooltip, spec, globalTheme) => {
         var _a, _b, _c, _d, _e;
         const { style = {}, enterable, transitionDuration } = spec;
-        const { panel = {}, titleLabel, shape, keyLabel, valueLabel, spaceRow: commonSpaceRow, maxContentHeight } = style;
+        const { panel = {}, titleLabel, shape, keyLabel, valueLabel, spaceRow: commonSpaceRow, maxContentHeight, align } = style;
         const padding = normalizePadding$1(panel.padding);
         const paddingSpec = normalizeLayoutPaddingSpec(panel.padding);
-        const titleStyle = getTextAttributes(titleLabel, globalTheme);
-        const keyStyle = getTextAttributes(keyLabel, globalTheme);
+        const titleStyle = getTextAttributes(Object.assign({ textAlign: align === 'right' ? 'right' : 'left' }, titleLabel), globalTheme);
+        const keyStyle = getTextAttributes(Object.assign({ textAlign: align === 'right' ? 'right' : 'left' }, keyLabel), globalTheme);
         const valueStyle = getTextAttributes(valueLabel, globalTheme);
         const shapeStyle = {
             fill: true,
@@ -63631,7 +63650,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             valueWidth: 0,
             maxContentHeight,
             enterable,
-            transitionDuration
+            transitionDuration,
+            align
         };
         const { title = {}, content = [] } = actualTooltip;
         let panelWidth = paddingSpec.left + paddingSpec.right;
@@ -65376,7 +65396,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const DEFAULT_VALUE_SPACING = 0;
     function getDomStyles(attributes) {
         var _a, _b, _c;
-        const { panel = {}, title: titleAttribute, content: contentAttribute, titleStyle = {}, contentStyle = {}, padding, keyWidth, valueWidth, enterable, transitionDuration, panelDomHeight = 0 } = attributes !== null && attributes !== void 0 ? attributes : {};
+        const { panel = {}, title: titleAttribute, content: contentAttribute, titleStyle = {}, contentStyle = {}, padding, keyWidth, valueWidth, enterable, transitionDuration, panelDomHeight = 0, align = 'left' } = attributes !== null && attributes !== void 0 ? attributes : {};
         const { fill: backgroundColor, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, shadowSpread, cornerRadius, stroke: strokeColor, lineWidth = 0, width = 0 } = panel;
         const { value: title = {} } = titleStyle;
         const { shape = {}, key = {}, value = {} } = contentStyle;
@@ -65384,7 +65404,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const keyStyle = getLabelStyle(key);
         const valueStyle = getLabelStyle(value);
         const { bottom, left, right, top } = normalizeLayoutPaddingSpec(padding);
+        const marginKey = align === 'right' ? 'marginLeft' : 'marginRight';
         const styles = {
+            align,
             panel: {
                 width: getPixelPropertyStr(width + lineWidth * 2),
                 minHeight: getPixelPropertyStr(panelDomHeight + lineWidth * 2),
@@ -65413,19 +65435,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     marginBottom: i < contentAttribute.length - 1 ? getPixelPropertyStr(spaceRow) : '0px'
                 })),
                 width: getPixelPropertyStr(shape.size),
-                marginRight: getPixelPropertyStr((_a = shape.spacing) !== null && _a !== void 0 ? _a : DEFAULT_SHAPE_SPACING)
+                [marginKey]: getPixelPropertyStr((_a = shape.spacing) !== null && _a !== void 0 ? _a : DEFAULT_SHAPE_SPACING)
             },
             keyColumn: {
                 common: keyStyle,
                 items: contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute.map(({ key, spaceRow }, i) => (Object.assign(Object.assign(Object.assign({ marginTop: '0px', marginBottom: i < contentAttribute.length - 1 ? getPixelPropertyStr(spaceRow) : '0px' }, keyStyle), getLabelStyle(key)), ((key === null || key === void 0 ? void 0 : key.multiLine) ? { width: getPixelPropertyStr(Math.ceil(key.width)) } : undefined)))),
                 width: getPixelPropertyStr(keyWidth),
-                marginRight: getPixelPropertyStr((_b = key.spacing) !== null && _b !== void 0 ? _b : DEFAULT_KEY_SPACING)
+                [marginKey]: getPixelPropertyStr((_b = key.spacing) !== null && _b !== void 0 ? _b : DEFAULT_KEY_SPACING)
             },
             valueColumn: {
                 common: valueStyle,
                 items: contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute.map(({ value, spaceRow }, i) => (Object.assign(Object.assign(Object.assign({ marginTop: '0px', marginBottom: i < contentAttribute.length - 1 ? getPixelPropertyStr(spaceRow) : '0px' }, valueStyle), getLabelStyle(value)), ((value === null || value === void 0 ? void 0 : value.multiLine) ? { width: getPixelPropertyStr(Math.ceil(value.width)) } : undefined)))),
                 width: getPixelPropertyStr(valueWidth),
-                marginRight: getPixelPropertyStr((_c = value.spacing) !== null && _c !== void 0 ? _c : DEFAULT_VALUE_SPACING)
+                [marginKey]: getPixelPropertyStr((_c = value.spacing) !== null && _c !== void 0 ? _c : DEFAULT_VALUE_SPACING)
             }
         };
         return styles;
@@ -65632,11 +65654,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._svgHtmlCache = '';
         }
     }
-    const builtInShape = {
-        star: 'M0 -1L0.22451398828979266 -0.3090169943749474L0.9510565162951535 -0.30901699437494745L0.3632712640026804 0.1180339887498948L0.5877852522924732 0.8090169943749473L8.326672684688674e-17 0.3819660112501051L-0.587785252292473 0.8090169943749476L-0.3632712640026804 0.11803398874989487L-0.9510565162951536 -0.30901699437494723L-0.22451398828979274 -0.30901699437494734Z'
-    };
     function getSvgHtml(option, valueToHtml) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f;
         if (!(option === null || option === void 0 ? void 0 : option.hasShape) || !option.symbolType) {
             return '';
         }
@@ -65647,7 +65666,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const getStroke = () => (stroke ? valueToHtml(stroke) : fillString);
         const sizeNumber = pixelPropertyStrToNumber(size);
         const createSymbol = (symbolType) => new Symbol$1({ symbolType, size: sizeNumber, fill: true });
-        let symbol = createSymbol((_a = builtInShape[symbolType]) !== null && _a !== void 0 ? _a : symbolType);
+        let symbol = createSymbol(symbolType);
         const parsedPath = symbol.getParsedPath();
         if (!parsedPath.path) {
             symbol = createSymbol(parsedPath.pathStr);
@@ -65674,9 +65693,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     </svg>`;
         }
         if (isObject$2(fill)) {
-            fillString = (_b = 'gradientColor' + option.index) !== null && _b !== void 0 ? _b : '';
+            fillString = (_a = 'gradientColor' + option.index) !== null && _a !== void 0 ? _a : '';
             let gradient = '';
-            const stops = ((_c = fill.stops) !== null && _c !== void 0 ? _c : [])
+            const stops = ((_b = fill.stops) !== null && _b !== void 0 ? _b : [])
                 .map(s => `<stop offset="${valueToHtml(s.offset.toString())}" stop-color="${valueToHtml(s.color)}"/>`)
                 .join('');
             if (fill.gradient === 'radial') {
@@ -65685,7 +65704,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       </radialGradient>`;
             }
             else if (fill.gradient === 'linear') {
-                gradient = `<linearGradient id="${fillString}" x1="${((_d = fill.x0) !== null && _d !== void 0 ? _d : 0) * 100}%" y1="${((_e = fill.y0) !== null && _e !== void 0 ? _e : 0) * 100}%" x2="${((_f = fill.x1) !== null && _f !== void 0 ? _f : 0) * 100}%" y2="${((_g = fill.y1) !== null && _g !== void 0 ? _g : 0) * 100}%">
+                gradient = `<linearGradient id="${fillString}" x1="${((_c = fill.x0) !== null && _c !== void 0 ? _c : 0) * 100}%" y1="${((_d = fill.y0) !== null && _d !== void 0 ? _d : 0) * 100}%" x2="${((_e = fill.x1) !== null && _e !== void 0 ? _e : 0) * 100}%" y2="${((_f = fill.y1) !== null && _f !== void 0 ? _f : 0) * 100}%">
       ${stops}
       </linearGradient>`;
             }
@@ -65889,33 +65908,35 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!this.product) {
                 this.product = this.createElement('div', ['container-box']);
             }
-            if (!this.shapeBox) {
-                this._initShapeBox();
-            }
-            if (!this.keyBox) {
-                this._initKeyBox();
+            const { align } = this._option.getTooltipAttributes();
+            if (align === 'right') {
+                if (!this.valueBox) {
+                    this.valueBox = this._initBox('value-box', 0);
+                }
+                if (!this.keyBox) {
+                    this.keyBox = this._initBox('key-box', 1);
+                }
+                if (!this.shapeBox) {
+                    this.shapeBox = this._initBox('shape-box', 2);
+                }
             }
-            if (!this.valueBox) {
-                this._initValueBox();
+            else {
+                if (!this.shapeBox) {
+                    this.shapeBox = this._initBox('shape-box', 0);
+                }
+                if (!this.keyBox) {
+                    this.keyBox = this._initBox('key-box', 1);
+                }
+                if (!this.valueBox) {
+                    this.valueBox = this._initBox('value-box', 2);
+                }
             }
         }
-        _initShapeBox() {
-            const shapeBox = new ContentColumnModel(this.product, this._option, 'shape-box', 0);
-            shapeBox.init();
-            this.shapeBox = shapeBox;
-            this.children[shapeBox.childIndex] = shapeBox;
-        }
-        _initKeyBox() {
-            const keyBox = new ContentColumnModel(this.product, this._option, 'key-box', 1);
-            keyBox.init();
-            this.keyBox = keyBox;
-            this.children[keyBox.childIndex] = keyBox;
-        }
-        _initValueBox() {
-            const valueBox = new ContentColumnModel(this.product, this._option, 'value-box', 2);
-            valueBox.init();
-            this.valueBox = valueBox;
-            this.children[valueBox.childIndex] = valueBox;
+        _initBox(className, index) {
+            const box = new ContentColumnModel(this.product, this._option, className, index);
+            box.init();
+            this.children[box.childIndex] = box;
+            return box;
         }
         setStyle(style) {
             super.setStyle(mergeSpec(this._getContentContainerStyle(), style));
@@ -65963,21 +65984,25 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!this.product) {
                 this.product = this.createElement('h2');
             }
+            const { align } = this._option.getTooltipAttributes();
+            if (align === 'right' && !this.textSpan) {
+                this._initTextSpan(0);
+            }
             const { title } = tooltipActual;
             if ((title === null || title === void 0 ? void 0 : title.hasShape) && (title === null || title === void 0 ? void 0 : title.shapeType)) {
                 if (!this.shape) {
-                    this._initShape();
+                    this._initShape(align === 'right' ? 1 : 0);
                 }
             }
             else if (this.shape) {
                 this._releaseShape();
             }
-            if (!this.textSpan) {
-                this._initTextSpan();
+            if (align !== 'right' && !this.textSpan) {
+                this._initTextSpan(1);
             }
         }
-        _initShape() {
-            const shape = new ShapeModel(this.product, this._option, 0);
+        _initShape(index = 0) {
+            const shape = new ShapeModel(this.product, this._option, index);
             shape.init();
             this.shape = shape;
             this.children[shape.childIndex] = shape;
@@ -65990,8 +66015,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             delete this.children[this.shape.childIndex];
             this.shape = null;
         }
-        _initTextSpan() {
-            const textSpan = new TextModel(this.product, this._option, 1);
+        _initTextSpan(index = 1) {
+            const textSpan = new TextModel(this.product, this._option, index);
             textSpan.init();
             this.textSpan = textSpan;
             this.children[textSpan.childIndex] = textSpan;
@@ -66372,7 +66397,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerComponentPlugin(CanvasTooltipHandler);
     };
 
-    const version = "1.11.4";
+    const version = "1.11.5";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -75782,7 +75807,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const totalData = [];
         const { dimensionValues, dimensionData } = groupData().latestData;
         const indexValues = Array.from(dimensionValues[indexField]);
-        let temp = { start: 0, end: 0, lastIndex: null };
+        let temp = {
+            start: 0,
+            end: 0,
+            positive: 0,
+            negative: 0,
+            lastIndex: null
+        };
         indexValues.forEach((key, index) => {
             const total = {
                 start: temp.end,
@@ -75790,7 +75821,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 lastIndex: temp.lastIndex,
                 lastEnd: temp.end,
                 index: key,
-                isTotal: false
+                isTotal: false,
+                positive: temp.end,
+                negative: temp.end
             };
             const indexData = dimensionData[key];
             indexData === null || indexData === void 0 ? void 0 : indexData.forEach((d, i) => {
@@ -75852,12 +75885,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         let { start, end } = getTotalStartEnd(totalConfigData, total, totalData, temp, totalSpec);
         total.start = start;
         total.end = end;
+        let positive = start;
+        let navigate = start;
         let valueTemp = end - start;
         _normalTemp.forEach(d => {
-            d[startAs] = +start;
-            d[endAs] = precisionAdd(d[startAs], +d[valueField]);
-            start = d[endAs];
-            valueTemp = precisionSub(valueTemp, +d[valueField]);
+            const value = +d[valueField];
+            if (value >= 0) {
+                d[startAs] = +positive;
+                positive = precisionAdd(positive, value);
+            }
+            else {
+                d[startAs] = +navigate;
+                navigate = precisionAdd(navigate, value);
+            }
+            d[endAs] = precisionAdd(d[startAs], value);
+            start = precisionAdd(start, value);
+            valueTemp = precisionSub(valueTemp, value);
         });
         _totalTemp.forEach(d => {
             d[startAs] = +start;
@@ -75891,9 +75934,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
             if (!isTotalTag) {
-                d[startAs] = +total.end;
-                d[endAs] = precisionAdd(d[startAs], +d[valueField]);
-                total.end = d[endAs];
+                const value = +d[valueField];
+                if (value >= 0) {
+                    d[startAs] = +total.positive;
+                    total.positive = precisionAdd(total.positive, value);
+                }
+                else {
+                    d[startAs] = +total.negative;
+                    total.negative = precisionAdd(total.negative, value);
+                }
+                d[endAs] = precisionAdd(d[startAs], value);
+                total.end = precisionAdd(total.end, value);
             }
             total.isTotal = isTotalTag;
             if (isNil$1(seriesField) || seriesField === WaterfallDefaultSeriesField) {