@visactor/vchart 1.1.0-beta.5 → 1.1.0-beta.7

package/README.md

@@ -77,12 +77,12 @@ $ rush run -p @visactor/vchart -s test
 
 ## 🔗 Related Links
 
-- [Homepage](https://visactor.io/vchart)
-- [VCharts Gallery](todo)
-- [VChart Tutorials](todo)
-- [VChart Options](todo)
-- [VChart API](todo)
-- [VGrammar](https://visactor.io/vgrammar)
-- [VRender](https://visactor.io/vrender)
-- [FAQ](todo)
+- [Homepage](https://www.visactor.io/vchart)
+- [VCharts Gallery](https://www.visactor.io/vchart/example)
+- [VChart Tutorials](https://www.visactor.io/vchart/guide/tutorial_docs/VChart_Website_Guide)
+- [VChart Options](https://www.visactor.io/vchart/option/)
+- [VChart API](https://www.visactor.io/vchart/api/API/vchart)
+- [VGrammar](https://www.visactor.io/vgrammar)
+- [VRender](https://www.visactor.io/vrender)
+- [FAQ](https://www.visactor.io/vchart/guide/tutorial_docs/FAQ)
 - [CodeSandbox Template](https://codesandbox.io/s/the-template-of-visactor-vchart-vl84ww?file=/src/index.ts) for bug reports

package/build/index.js

@@ -5641,25 +5641,6 @@
         y: actualTop
       };
     }
-    const getScrollLeft = element => {
-        var _a, _b, _c;
-        return element === (null === (_a = null === globalThis || void 0 === globalThis ? void 0 : globalThis.document) || void 0 === _a ? void 0 : _a.body) ? (null === (_c = null === (_b = null === globalThis || void 0 === globalThis ? void 0 : globalThis.document) || void 0 === _b ? void 0 : _b.documentElement) || void 0 === _c ? void 0 : _c.scrollLeft) || element.scrollLeft : "html" === element.tagName.toLowerCase() ? 0 : element.scrollLeft;
-      },
-      getScrollTop = element => {
-        var _a, _b, _c;
-        return element === (null === (_a = null === globalThis || void 0 === globalThis ? void 0 : globalThis.document) || void 0 === _a ? void 0 : _a.body) ? (null === (_c = null === (_b = null === globalThis || void 0 === globalThis ? void 0 : globalThis.document) || void 0 === _b ? void 0 : _b.documentElement) || void 0 === _c ? void 0 : _c.scrollTop) || element.scrollTop : "html" === element.tagName.toLowerCase() ? 0 : element.scrollTop;
-      };
-    function getElementAbsoluteScrollOffset(element) {
-      let actualLeft = getScrollLeft(element),
-        current = element.parentElement;
-      for (; current;) actualLeft += getScrollLeft(current), current = current.parentElement;
-      let actualTop = getScrollTop(element);
-      for (current = element.parentElement; current;) actualTop += getScrollTop(current), current = current.parentElement;
-      return {
-        x: actualLeft,
-        y: actualTop
-      };
-    }
     function hasParentElement(element, target) {
       let parent = element.parentNode;
       for (; null !== parent;) {
@@ -6845,12 +6826,33 @@
           l.target.addListener(event, callAd);
         }), this._callMap.set(call, callAd);
       }
+      allDataViewAddListener(event, call) {
+        this.multipleDataViewAddListener(Object.values(this.dataViewMap), event, call);
+      }
       multipleDataViewRemoveListener(list, event, call) {
         const callAd = this._callMap.get(call);
         callAd && list.forEach(l => {
           l.target.removeListener(event, callAd);
         }), this._callMap.delete(call);
       }
+      multipleDataViewUpdateInParse(newData) {
+        newData.forEach(d => {
+          var _a;
+          return null === (_a = this.getDataView(d.name)) || void 0 === _a ? void 0 : _a.markRunning();
+        }), newData.forEach(d => {
+          var _a;
+          return null === (_a = this.getDataView(d.name)) || void 0 === _a ? void 0 : _a.parseNewData(d.data, d.options);
+        });
+      }
+      multipleDataViewUpdateInRawData(newData) {
+        newData.forEach(d => {
+          var _a;
+          return null === (_a = this.getDataView(d.name)) || void 0 === _a ? void 0 : _a.markRunning();
+        }), newData.forEach(d => {
+          var _a;
+          return null === (_a = this.getDataView(d.name)) || void 0 === _a ? void 0 : _a.updateRawData(d.data, d.options);
+        });
+      }
       destroy() {
         this.transformMap = null, this.parserMap = null, this.dataViewMap = null, this._callMap = null, this.target.removeAllListeners();
       }
@@ -47918,7 +47920,9 @@
         ChartEvent["playerForward"] = "playerForward";
         ChartEvent["playerBackward"] = "playerBackward";
         ChartEvent["scrollBarChange"] = "scrollBarChange";
+        ChartEvent["brushStart"] = "brushStart";
         ChartEvent["brushChange"] = "brushChange";
+        ChartEvent["brushEnd"] = "brushEnd";
         ChartEvent["legendSelectedDataChange"] = "legendSelectedDataChange";
         ChartEvent["legendFilter"] = "legendFilter";
         ChartEvent["legendItemClick"] = "legendItemClick";
@@ -47949,11 +47953,12 @@
         AttributeLevel[AttributeLevel["Default"] = 0] = "Default";
         AttributeLevel[AttributeLevel["Theme"] = 1] = "Theme";
         AttributeLevel[AttributeLevel["Chart"] = 2] = "Chart";
-        AttributeLevel[AttributeLevel["Series"] = 3] = "Series";
-        AttributeLevel[AttributeLevel["Mark"] = 4] = "Mark";
-        AttributeLevel[AttributeLevel["User_Chart"] = 5] = "User_Chart";
-        AttributeLevel[AttributeLevel["User_Series"] = 6] = "User_Series";
-        AttributeLevel[AttributeLevel["User_Mark"] = 7] = "User_Mark";
+        AttributeLevel[AttributeLevel["Base_Series"] = 3] = "Base_Series";
+        AttributeLevel[AttributeLevel["Series"] = 4] = "Series";
+        AttributeLevel[AttributeLevel["Mark"] = 5] = "Mark";
+        AttributeLevel[AttributeLevel["User_Chart"] = 6] = "User_Chart";
+        AttributeLevel[AttributeLevel["User_Series"] = 7] = "User_Series";
+        AttributeLevel[AttributeLevel["User_Mark"] = 8] = "User_Mark";
         AttributeLevel[AttributeLevel["Built_In"] = 99] = "Built_In";
     })(AttributeLevel || (AttributeLevel = {}));
     const STACK_FIELD_START = `${PREFIX}_STACK_START`;
@@ -51502,6 +51507,32 @@
         setDimensionIndex(value, opt = {}) {
             return this._chart?.setDimensionIndex(value, opt);
         }
+        convertDatumToPosition(datum, dataLinkInfo = {}) {
+            if (!this._chart) {
+                return null;
+            }
+            if (isEmpty(datum)) {
+                return null;
+            }
+            const { seriesId, seriesIndex = 0 } = dataLinkInfo;
+            let series;
+            if (isValid(seriesId)) {
+                series = this._chart.getSeriesInUserId(seriesId);
+            }
+            else if (isValid(seriesIndex)) {
+                series = this._chart.getSeriesInIndex([seriesIndex])?.[0];
+            }
+            if (series) {
+                const keys = Object.keys(datum);
+                const handledDatum = series
+                    .getViewData()
+                    .latestData.find((viewDatum) => keys.every(k => viewDatum[k] == datum[k]));
+                if (handledDatum) {
+                    return series.dataToPosition(handledDatum);
+                }
+            }
+            return null;
+        }
     }
 
     var STATE_VALUE_ENUM;
@@ -54131,7 +54162,7 @@
     VChart.useMark([ComponentMark, GroupMark]);
     Factory.registerRegion('region', Region);
     Factory.registerLayout('base', Layout);
-    const version = "1.1.0-beta.5";
+    const version = "1.1.0-beta.7";
 
     var SeriesMarkNameEnum;
     (function (SeriesMarkNameEnum) {
@@ -55517,7 +55548,7 @@
             if (!dimensionInfo) {
                 return;
             }
-            if (opt.tooltip) {
+            if (opt.tooltip !== false) {
                 const tooltip = this._components.find(c => c.type === ComponentTypeEnum.tooltip);
                 if (tooltip.getVisible()) {
                     const dataFilter = {};
@@ -55536,7 +55567,7 @@
                     tooltip.showTooltip(dataFilter, opt.showTooltipOption);
                 }
             }
-            if (opt.crosshair) {
+            if (opt.crosshair !== false) {
                 const crosshair = this._components.find(c => c.type === ComponentTypeEnum.cartesianCrosshair);
                 if (crosshair && crosshair.clearAxisValue && crosshair.setAxisValue) {
                     dimensionInfo.forEach((d) => {
@@ -57280,8 +57311,8 @@
             this._rawDataStatistics?.reRunAllTransform();
             this.setSeriesField(this._spec.seriesField);
             this.getMarks().forEach(m => {
-                if (m.stateStyle.normal?.fill?.style) {
-                    m.setAttribute('stroke', m.stateStyle.normal.fill.style, 'normal', AttributeLevel.Chart);
+                if (m.stateStyle?.normal?.lineWidth) {
+                    m.setAttribute('stroke', this.getColorAttribute(), 'normal', AttributeLevel.Base_Series);
                 }
             });
         }
@@ -60390,7 +60421,7 @@
                 label: labelPosition === PositionEnum.bothEnd ? undefined : merge$1({}, this._spec.label),
                 isSeriesMark: true
             });
-            if (labelPosition === PositionEnum.bothEnd) {
+            if (this._spec.label?.visible !== false && labelPosition === PositionEnum.bothEnd) {
                 if (this._spec.label?.minLabel?.visible !== false) {
                     this._minLabelMark = this._createMark(RangeColumnSeries.mark.minLabel, {
                         markSpec: this._spec.label?.minLabel
@@ -63347,6 +63378,7 @@
         _getDefaultStyle() {
             const defaultStyle = {
                 ...super._getDefaultStyle(),
+                lineWidth: 0,
                 path: ''
             };
             return defaultStyle;
@@ -69329,6 +69361,13 @@
     class PolygonMark extends BasePolygonMark {
         static type = MarkTypeEnum.polygon;
         type = PolygonMark.type;
+        _getDefaultStyle() {
+            const defaultStyle = {
+                ...super._getDefaultStyle(),
+                lineWidth: 0
+            };
+            return defaultStyle;
+        }
     }
 
     VChart.useMark([PolygonMark, TextMark, RuleMark]);
@@ -76697,6 +76736,22 @@
             this._bindLinkedSeries();
             this._initNeedOperatedItem();
         }
+        _extendDataInBrush(elementsMap) {
+            const data = [];
+            for (const brushName in elementsMap) {
+                for (const elementKey in elementsMap[brushName]) {
+                    data.push(elementsMap[brushName][elementKey].data[0]);
+                }
+            }
+            return data;
+        }
+        _extendDatumOutOfBrush(elementsMap) {
+            const data = [];
+            for (const elementKey in elementsMap) {
+                data.push(elementsMap[elementKey].data[0]);
+            }
+            return data;
+        }
         _createBrushComponent(region, componentIndex) {
             const seriesRegionStartX = region.getLayoutStartPoint().x;
             const seriesRegionEndX = seriesRegionStartX + region.getLayoutRect().width;
@@ -76725,11 +76780,25 @@
                 }
                 this._reconfigItem(operateMask, region);
                 this._reconfigLinkedItem(operateMask, region);
-                this.event.emit(ChartEvent.brushChange, {
+                let eventType = ChartEvent.brushChange;
+                if (operateType === 'brushStart' || operateType === 'brushDown') {
+                    eventType = ChartEvent.brushStart;
+                }
+                else if (operateType === 'brushEnd' || operateType === 'brushMaskUp') {
+                    eventType = ChartEvent.brushEnd;
+                }
+                else {
+                    eventType = ChartEvent.brushChange;
+                }
+                this.event.emit(eventType, {
                     model: this,
                     value: {
                         operateType,
                         operateRegion: region,
+                        inBrushData: this._extendDataInBrush(this._inBrushElementsMap),
+                        outOfBrushData: this._extendDatumOutOfBrush(this._outOfBrushElementsMap),
+                        linkInBrushData: this._extendDataInBrush(this._linkedInBrushElementsMap),
+                        linkOutOfBrushData: this._extendDatumOutOfBrush(this._linkedOutOfBrushElementsMap),
                         inBrushElementsMap: this._inBrushElementsMap,
                         outOfBrushElementsMap: this._outOfBrushElementsMap,
                         linkedInBrushElementsMap: this._linkedInBrushElementsMap,
@@ -76780,6 +76849,7 @@
                         graphicItem.removeState('inBrush');
                         graphicItem.addState('outOfBrush');
                         this._outOfBrushElementsMap[el.key] = el;
+                        delete this._inBrushElementsMap[operateMask.name][el.key];
                     }
                 });
             });
@@ -76951,6 +77021,16 @@
         }
     }
 
+    var IOperateType;
+    (function (IOperateType) {
+        IOperateType["brushStart"] = "brushStart";
+        IOperateType["brushEnd"] = "brushEnd";
+        IOperateType["brushMaskUp"] = "brushMaskUp";
+        IOperateType["brushing"] = "brushing";
+        IOperateType["brushMaskDown"] = "brushMaskDown";
+        IOperateType["brushMaskMove"] = "brushMaskMove";
+    })(IOperateType || (IOperateType = {}));
+
     function overlap$1(a, b, sep = 0) {
         return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
     }
@@ -80460,6 +80540,7 @@
             const originData = (this._legendData.getLatestData() || []).map((datum) => {
                 const fill = datum.style('fill');
                 const stroke = datum.style('stroke');
+                const lineWidth = datum.style('lineWidth');
                 const symbolType = datum.style('symbolType');
                 const fillOpacity = datum.style('fillOpacity');
                 const strokeOpacity = datum.style('strokeOpacity');
@@ -80473,7 +80554,7 @@
                     shape: {
                         fill,
                         symbolType: symbolType ?? datum.shapeType ?? 'circle',
-                        stroke: fill === stroke ? null : stroke,
+                        stroke: lineWidth === 0 || fill === stroke ? null : stroke,
                         fillOpacity: isValidNumber(fillOpacity) ? fillOpacity : 1,
                         strokeOpacity: isValidNumber(strokeOpacity) ? strokeOpacity : 1,
                         opacity: isValidNumber(opacity) ? opacity : 1,
@@ -84473,7 +84554,7 @@
             };
             return actualTooltip;
         };
-        _getActualTooltipPosition = (actualTooltip, position, params, parentElement, changePositionOnly) => {
+        _getActualTooltipPosition = (actualTooltip, position, params, tooltipParentElement, changePositionOnly) => {
             const event = params.event;
             const { width: tooltipBoxWidth = 0, height: tooltipBoxHeight = 0 } = this._getTooltipBoxSize(actualTooltip, changePositionOnly) ?? {};
             const { offsetX, offsetY } = this._option;
@@ -84482,6 +84563,7 @@
             const canvasRect = params?.chart?.getCanvasRect();
             const canvasWidth = canvasRect?.width ?? DEFAULT_CHART_WIDTH;
             const canvasHeight = canvasRect?.height ?? DEFAULT_CHART_HEIGHT;
+            let isFixedPosition = false;
             let left;
             let top;
             let right;
@@ -84494,6 +84576,7 @@
                 bottom = getActualTooltipPositionValue(posBottom, event);
             }
             else if (isValid(position) && actualTooltip.activeType === 'mark') {
+                isFixedPosition = true;
                 const element = params.item;
                 const model = params.model;
                 const bounds = element?.getBounds();
@@ -84534,28 +84617,24 @@
                 width: 0,
                 height: 0
             };
-            const getDefaultOffest = () => ({ x: 0, y: 0 });
-            let absolutePosOffset = getDefaultOffest();
-            let scrollOffset = getDefaultOffest();
-            let parentElementScrollOffset = getDefaultOffest();
-            let parentElementPosOffset = getDefaultOffest();
+            const getDefaultPointValue = (defaultValue = 0) => ({ x: defaultValue, y: defaultValue });
+            let relativePosOffset = getDefaultPointValue();
+            let tooltipParentElementPos = getDefaultPointValue();
+            let chartElementScale = 1;
+            let tooltipParentElementScale = 1;
             if (isTrueBrowser(this._env) && !tooltipSpec.confine) {
                 containerSize.width = window.innerWidth;
                 containerSize.height = window.innerHeight;
                 if (!isCanvas) {
-                    const chartRenderer = (this._compiler.getCanvas() ?? this._chartContainer);
-                    parentElementPosOffset = getElementAbsolutePosition(parentElement);
-                    parentElementScrollOffset = getElementAbsoluteScrollOffset(parentElement);
-                    const chartPosOffset = getElementAbsolutePosition(chartRenderer);
-                    const chartScrollOffset = getElementAbsoluteScrollOffset(chartRenderer);
-                    absolutePosOffset = {
-                        x: chartPosOffset.x - parentElementPosOffset.x,
-                        y: chartPosOffset.y - parentElementPosOffset.y
-                    };
-                    scrollOffset = {
-                        x: chartScrollOffset.x - parentElementScrollOffset.x,
-                        y: chartScrollOffset.y - parentElementScrollOffset.y
+                    const chartElement = (this._compiler.getCanvas() ?? this._chartContainer);
+                    tooltipParentElementPos = tooltipParentElement.getBoundingClientRect();
+                    const chartPosOffset = chartElement.getBoundingClientRect();
+                    relativePosOffset = {
+                        x: chartPosOffset.x - tooltipParentElementPos.x,
+                        y: chartPosOffset.y - tooltipParentElementPos.y
                     };
+                    chartElementScale = getScale(chartElement);
+                    tooltipParentElementScale = getScale(tooltipParentElement);
                 }
             }
             else {
@@ -84570,7 +84649,7 @@
                 x = canvasWidth - tooltipBoxWidth - right;
             }
             else {
-                x = canvasX - scrollOffset.x + offsetX;
+                x = canvasX + offsetX;
             }
             if (isValidNumber(top)) {
                 y = top;
@@ -84579,28 +84658,38 @@
                 y = canvasHeight - tooltipBoxHeight - bottom;
             }
             else {
-                y = canvasY - scrollOffset.y + offsetY;
+                y = canvasY + offsetY;
             }
+            x *= chartElementScale;
+            y *= chartElementScale;
             if (isTrueBrowser(this._env)) {
-                x += absolutePosOffset.x;
-                y += absolutePosOffset.y;
+                x += relativePosOffset.x;
+                y += relativePosOffset.y;
             }
+            x /= tooltipParentElementScale;
+            y /= tooltipParentElementScale;
             const { width: containerWidth, height: containerHeight } = containerSize;
-            const parentElementTotalOffset = {
-                x: parentElementPosOffset.x - parentElementScrollOffset.x,
-                y: parentElementPosOffset.y - parentElementScrollOffset.y
-            };
-            if (x + tooltipBoxWidth + parentElementTotalOffset.x > containerWidth) {
-                x -= offsetX * 2 + tooltipBoxWidth;
+            if ((x + tooltipBoxWidth) * tooltipParentElementScale + tooltipParentElementPos.x > containerWidth) {
+                if (isFixedPosition) {
+                    x = (containerWidth - tooltipParentElementPos.x) / tooltipParentElementScale - tooltipBoxWidth;
+                }
+                else {
+                    x -= offsetX * 2 + tooltipBoxWidth;
+                }
             }
-            if (y + tooltipBoxHeight + parentElementTotalOffset.y > containerHeight) {
-                y -= offsetY * 2 + tooltipBoxHeight;
+            if ((y + tooltipBoxHeight) * tooltipParentElementScale + tooltipParentElementPos.y > containerHeight) {
+                if (isFixedPosition) {
+                    y = (containerHeight - tooltipParentElementPos.y) / tooltipParentElementScale - tooltipBoxHeight;
+                }
+                else {
+                    y -= offsetY * 2 + tooltipBoxHeight;
+                }
             }
-            if (x + parentElementTotalOffset.x < 0) {
-                x = 0 - parentElementTotalOffset.x;
+            if (x * tooltipParentElementScale + tooltipParentElementPos.x < 0) {
+                x = 0 - tooltipParentElementPos.x / tooltipParentElementScale;
             }
-            if (y + parentElementTotalOffset.y < 0) {
-                y = 0 - parentElementTotalOffset.y;
+            if (y * tooltipParentElementScale + tooltipParentElementPos.y < 0) {
+                y = 0 - tooltipParentElementPos.y / tooltipParentElementScale;
             }
             return { x, y };
         };
@@ -84615,7 +84704,7 @@
         }
         _getStyle() {
             const tooltipSpec = this._component.getSpec();
-            const { style = {}, maxWidth, minWidth, enterable, transitionDuration } = tooltipSpec;
+            const { style = {}, enterable, transitionDuration } = tooltipSpec;
             const { panel: { backgroundColor, border, shadow, padding }, titleLabel, shape, keyLabel, valueLabel, spaceRow } = style;
             const panelStyle = {
                 lineWidth: border?.width ?? 0,
@@ -84650,8 +84739,6 @@
                 key: getTextAttributes(keyLabel, globalTheme),
                 value: getTextAttributes(valueLabel, globalTheme),
                 padding,
-                minWidth,
-                maxWidth,
                 spaceRow,
                 enterable,
                 transitionDuration
@@ -84673,6 +84760,12 @@
             this._initFromSpec();
         }
     }
+    const getScale = (element) => {
+        if (element.offsetWidth > 0) {
+            return element.getBoundingClientRect().width / element.offsetWidth;
+        }
+        return element.getBoundingClientRect().height / element.offsetHeight;
+    };
 
     const DEFAULT_SHAPE_SPACING = 8;
     const DEFAULT_KEY_SPACING = 26;
@@ -84687,7 +84780,7 @@
         return defaultStr ?? 'initial';
     };
     function getDomStyles(style, attributeCache) {
-        const { panel: { fill: fillColor, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, shadowSpread, cornerRadius, stroke: strokeColor, lineWidth = 0 }, padding, key, value, title, shape, maxWidth, minWidth, enterable, spaceRow, transitionDuration } = style;
+        const { panel: { fill: fillColor, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, shadowSpread, cornerRadius, stroke: strokeColor, lineWidth = 0 }, padding, key, value, title, shape, enterable, spaceRow, transitionDuration } = style;
         const backgroundColor = fillColor;
         const styles = {
             panel: {
@@ -84704,8 +84797,6 @@
                 boxShadow: shadow
                     ? `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px ${shadowSpread}px ${shadowColor}`
                     : 'initial',
-                maxWidth: getPixelPropertyStr(maxWidth),
-                minWidth: getPixelPropertyStr(minWidth),
                 pointerEvents: enterable ? 'auto' : 'none',
                 transitionDuration: transitionDuration ? `${transitionDuration}ms` : 'initial',
                 transitionProperty: transitionDuration ? 'transform' : 'initial',
@@ -85953,7 +86044,12 @@
                 };
             }
             if (isValid(userSpec.parentElement)) {
-                this._spec.parentElement = userSpec.parentElement;
+                if (isString(userSpec.parentElement)) {
+                    this._spec.parentElement = globalThis.document?.getElementById(userSpec.parentElement);
+                }
+                else {
+                    this._spec.parentElement = userSpec.parentElement;
+                }
             }
             else if (isTrueBrowser(this._option.mode)) {
                 this._spec.parentElement = domDocument?.body;
@@ -86015,16 +86111,9 @@
                 return false;
             }
             const { x, y } = point;
-            const container = globalInstance.getContainer();
-            const { x: chartX, y: chartY } = getElementAbsolutePosition(container);
-            const { x: scrollOffsetX, y: scrollOffsetY } = getElementAbsoluteScrollOffset(container);
-            const canvasRect = chart.getCanvasRect();
-            const chartWidth = canvasRect?.width;
-            const chartHeight = canvasRect?.height;
-            if (x >= chartX - scrollOffsetX &&
-                x <= chartX + chartWidth - scrollOffsetX &&
-                y >= chartY - scrollOffsetY &&
-                y <= chartY + chartHeight - scrollOffsetY) {
+            const canvas = globalInstance.getCanvas();
+            const { x: chartX, y: chartY, width: chartWidth, height: chartHeight } = canvas.getBoundingClientRect();
+            if (x >= chartX && x <= chartX + chartWidth && y >= chartY && y <= chartY + chartHeight) {
                 return true;
             }
             return false;