@visactor/vchart 1.11.4 → 1.11.5

package/build/index.es.js

@@ -52789,7 +52789,10 @@ const colorScheme$1 = {
             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)'
         }
     }
 };
@@ -54001,6 +54004,21 @@ const discreteLegend = {
         },
         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,
@@ -54356,7 +54374,6 @@ const tooltip = {
         lineHeight: { type: 'token', key: 'l4LineHeight' },
         fontColor: { type: 'palette', key: 'primaryFontColor' },
         fontWeight: 'bold',
-        textAlign: 'left',
         textBaseline: 'middle',
         spacing: 0
     },
@@ -54368,7 +54385,6 @@ const tooltip = {
         fontSize: { type: 'token', key: 'l4FontSize' },
         lineHeight: { type: 'token', key: 'l4LineHeight' },
         fontColor: { type: 'palette', key: 'secondaryFontColor' },
-        textAlign: 'left',
         textBaseline: 'middle',
         spacing: 26
     },
@@ -54546,7 +54562,10 @@ const colorScheme = {
             dangerColor: '#eb4b4b',
             warningColor: '#f0bd30',
             successColor: '#14b267',
-            infoColor: '#4284ff'
+            infoColor: '#4284ff',
+            discreteLegendPagerTextColor: '#BBBDC3',
+            discreteLegendPagerHandlerColor: '#BBBDC3',
+            discreteLegendPagerHandlerDisableColor: '#55595F'
         }
     }
 };
@@ -63594,11 +63613,11 @@ const getPanelAttributes = (style) => {
 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,
@@ -63625,7 +63644,8 @@ const getTooltipAttributes = (actualTooltip, spec, globalTheme) => {
         valueWidth: 0,
         maxContentHeight,
         enterable,
-        transitionDuration
+        transitionDuration,
+        align
     };
     const { title = {}, content = [] } = actualTooltip;
     let panelWidth = paddingSpec.left + paddingSpec.right;
@@ -65370,7 +65390,7 @@ const DEFAULT_KEY_SPACING = 26;
 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;
@@ -65378,7 +65398,9 @@ function getDomStyles(attributes) {
     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),
@@ -65407,19 +65429,19 @@ function getDomStyles(attributes) {
                 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;
@@ -65626,11 +65648,8 @@ class ShapeModel extends BaseTooltipModel {
         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 '';
     }
@@ -65641,7 +65660,7 @@ function getSvgHtml(option, valueToHtml) {
     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);
@@ -65668,9 +65687,9 @@ function getSvgHtml(option, valueToHtml) {
     </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') {
@@ -65679,7 +65698,7 @@ function getSvgHtml(option, valueToHtml) {
       </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>`;
         }
@@ -65883,33 +65902,35 @@ class ContentModel extends BaseTooltipModel {
         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));
@@ -65957,21 +65978,25 @@ class TitleModel extends BaseTooltipModel {
         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;
@@ -65984,8 +66009,8 @@ class TitleModel extends BaseTooltipModel {
         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;
@@ -66366,7 +66391,7 @@ const registerCanvasTooltipHandler = () => {
     registerComponentPlugin(CanvasTooltipHandler);
 };
 
-const version = "1.11.4";
+const version = "1.11.5";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -75776,7 +75801,13 @@ const waterfall = (lastData, op) => {
     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,
@@ -75784,7 +75815,9 @@ const waterfall = (lastData, op) => {
             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) => {
@@ -75846,12 +75879,22 @@ function computeTotalWithMultipleData(indexData, key, total, totalData, temp, in
     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;
@@ -75885,9 +75928,17 @@ function computeNormalData(indexData, key, total, totalData, temp, indexValues,
             }
         }
         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) {