@visactor/vrender-components 1.0.25 → 1.0.26-alpha.0

package/dist/index.es.js

@@ -17391,6 +17391,7 @@ var AXIS_ELEMENT_NAME;
     AXIS_ELEMENT_NAME["subTick"] = "axis-sub-tick";
     AXIS_ELEMENT_NAME["label"] = "axis-label";
     AXIS_ELEMENT_NAME["title"] = "axis-title";
+    AXIS_ELEMENT_NAME["labelHoverOnAxis"] = "axis-label-hover-on-axis";
     AXIS_ELEMENT_NAME["gridContainer"] = "axis-grid-container";
     AXIS_ELEMENT_NAME["grid"] = "axis-grid";
     AXIS_ELEMENT_NAME["gridRegion"] = "axis-grid-region";
@@ -17438,6 +17439,25 @@ const DEFAULT_AXIS_THEME = {
             fillOpacity: 1
         }
     },
+    labelHoverOnAxis: {
+        visible: false,
+        space: 4,
+        position: 0,
+        autoRotate: false,
+        textStyle: {
+            fontSize: 12,
+            fill: 'white',
+            fontWeight: 'normal',
+            fillOpacity: 1
+        },
+        background: {
+            visible: true,
+            style: {
+                cornerRadius: 2,
+                fill: 'black'
+            }
+        }
+    },
     tick: {
         visible: true,
         inside: false,
@@ -20273,7 +20293,13 @@ function loadCircleAxisGridComponent() {
 loadLineAxisComponent();
 class LineAxis extends AxisBase {
     constructor(attributes, options) {
+        var _a;
+        if (attributes.labelHoverOnAxis) {
+            attributes.labelHoverOnAxis.textStyle = Object.assign({}, attributes.label.style, attributes.labelHoverOnAxis.textStyle);
+            attributes.labelHoverOnAxis.space = (_a = attributes.labelHoverOnAxis.space) !== null && _a !== void 0 ? _a : attributes.label.space;
+        }
         super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, LineAxis.defaultAttributes, attributes), options);
+        this.labelHoverOnAxisGroup = null;
     }
     _renderInner(container) {
         var _a;
@@ -20325,6 +20351,18 @@ class LineAxis extends AxisBase {
             bgRect.states = merge({}, DEFAULT_STATES$1, (_a = panel.state) !== null && _a !== void 0 ? _a : {});
             axisContainer.insertBefore(bgRect, axisContainer.firstChild);
         }
+        const { labelHoverOnAxis } = this.attribute;
+        if (labelHoverOnAxis && labelHoverOnAxis.visible) {
+            this.renderLabelHoverOnAxis();
+        }
+    }
+    renderLabelHoverOnAxis() {
+        const hoverOnLabelAttributes = this.getLabelHoverOnAxisAttribute();
+        const hoverOnLabel = new Tag(Object.assign({}, hoverOnLabelAttributes));
+        hoverOnLabel.name = AXIS_ELEMENT_NAME.title;
+        hoverOnLabel.id = this._getNodeId('hover-on-label');
+        this.labelHoverOnAxisGroup = hoverOnLabel;
+        this.axisContainer.add(hoverOnLabel);
     }
     renderLine(container) {
         const { start, end, line } = this.attribute;
@@ -20519,6 +20557,84 @@ class LineAxis extends AxisBase {
         }
         return attrs;
     }
+    getLabelHoverOnAxisAttribute() {
+        var _a, _b;
+        const { orient } = this.attribute;
+        const _c = this.attribute.labelHoverOnAxis, { position = 0, space = 4, autoRotate = true, textStyle = {}, background = {}, formatMethod, text: textContent = '', maxWidth } = _c, restAttrs = __rest(_c, ["position", "space", "autoRotate", "textStyle", "background", "formatMethod", "text", "maxWidth"]);
+        const point = this.getTickCoord(0);
+        if (orient === 'bottom' || orient === 'top') {
+            point.x = position;
+        }
+        else {
+            point.y = position;
+        }
+        let tickLength = 0;
+        if (((_a = this.attribute.tick) === null || _a === void 0 ? void 0 : _a.visible) && this.attribute.tick.inside === false) {
+            tickLength = this.attribute.tick.length || 4;
+        }
+        if (((_b = this.attribute.subTick) === null || _b === void 0 ? void 0 : _b.visible) && this.attribute.subTick.inside === false) {
+            tickLength = Math.max(tickLength, this.attribute.subTick.length || 2);
+        }
+        const labelLength = 0;
+        const offset = tickLength + labelLength + space;
+        const labelPoint = this.getVerticalCoord(point, offset, false);
+        const vector = this.getVerticalVector(offset, false, { x: 0, y: 0 });
+        let { angle } = restAttrs;
+        let textAlign = 'center';
+        let textBaseline;
+        if (isNil(angle) && autoRotate) {
+            const axisVector = this.getRelativeVector();
+            const v1 = [1, 0];
+            const radian = angleTo(axisVector, v1, true);
+            angle = radian;
+            const { verticalFactor = 1 } = this.attribute;
+            const factor = -1 * verticalFactor;
+            if (factor === 1) {
+                textBaseline = 'bottom';
+            }
+            else {
+                textBaseline = 'top';
+            }
+        }
+        else {
+            textAlign = this.getTextAlign(vector);
+            textBaseline = this.getTextBaseline(vector, false);
+        }
+        let maxTagWidth = maxWidth;
+        if (isNil(maxTagWidth)) {
+            const { verticalLimitSize, verticalMinSize, orient } = this.attribute;
+            const limitSize = Math.min(verticalLimitSize || Infinity, verticalMinSize || Infinity);
+            if (isValidNumber(limitSize)) {
+                const isX = orient === 'bottom' || orient === 'top';
+                if (isX) {
+                    if (angle !== Math.PI / 2) {
+                        const cosValue = Math.abs(Math.cos(angle !== null && angle !== void 0 ? angle : 0));
+                        maxTagWidth = cosValue < 1e-6 ? Infinity : this.attribute.end.x / cosValue;
+                    }
+                    else {
+                        maxTagWidth = limitSize - offset;
+                    }
+                }
+                else {
+                    if (angle && angle !== 0) {
+                        const sinValue = Math.abs(Math.sin(angle));
+                        maxTagWidth = sinValue < 1e-6 ? Infinity : this.attribute.end.y / sinValue;
+                    }
+                    else {
+                        maxTagWidth = limitSize - offset;
+                    }
+                }
+            }
+        }
+        const text = formatMethod ? formatMethod(textContent) : textContent;
+        const attrs = Object.assign(Object.assign(Object.assign({}, labelPoint), restAttrs), { maxWidth: maxTagWidth, textStyle: Object.assign({ textAlign,
+                textBaseline }, textStyle), text });
+        attrs.angle = angle;
+        if (background && background.visible) {
+            attrs.panel = Object.assign(Object.assign({ visible: true }, restAttrs.panel), background.style);
+        }
+        return attrs;
+    }
     getTextBaseline(vector, inside) {
         let base = 'middle';
         const { verticalFactor = 1 } = this.attribute;
@@ -20751,8 +20867,8 @@ class LineAxis extends AxisBase {
         let limitLength = limitSize;
         let titleHeight = 0;
         let titleSpacing = 0;
-        const axisLineWidth = line && line.visible ? ((_b = line.style.lineWidth) !== null && _b !== void 0 ? _b : 1) : 0;
-        const tickLength = tick && tick.visible ? ((_c = tick.length) !== null && _c !== void 0 ? _c : 4) : 0;
+        const axisLineWidth = line && line.visible ? (_b = line.style.lineWidth) !== null && _b !== void 0 ? _b : 1 : 0;
+        const tickLength = tick && tick.visible ? (_c = tick.length) !== null && _c !== void 0 ? _c : 4 : 0;
         if (title && title.visible && typeof title.text === 'string') {
             titleHeight = measureTextSize(title.text, title.textStyle, (_e = (_d = this.stage) === null || _d === void 0 ? void 0 : _d.getTheme()) === null || _e === void 0 ? void 0 : _e.text).height;
             const padding = normalizePadding(title.padding);
@@ -20763,6 +20879,41 @@ class LineAxis extends AxisBase {
         }
         return limitLength;
     }
+    showLabelHoverOnAxis(position, text) {
+        if (this.attribute.labelHoverOnAxis) {
+            if (this.labelHoverOnAxisGroup) {
+                const { formatMethod } = this.attribute.labelHoverOnAxis;
+                const textStr = formatMethod ? formatMethod(text) : text;
+                this.labelHoverOnAxisGroup.setAttribute('text', textStr);
+                this.labelHoverOnAxisGroup.setAttribute('visible', true);
+                this.labelHoverOnAxisGroup.setAttribute('visibleAll', true);
+                if (this.attribute.orient === 'left' || this.attribute.orient === 'right') {
+                    this.labelHoverOnAxisGroup.setAttributes({
+                        y: position
+                    });
+                }
+                else {
+                    this.labelHoverOnAxisGroup.setAttributes({
+                        x: position
+                    });
+                }
+            }
+            else {
+                this.attribute.labelHoverOnAxis.visible = true;
+                this.attribute.labelHoverOnAxis.position = position;
+                this.attribute.labelHoverOnAxis.text = text;
+                this.renderLabelHoverOnAxis();
+            }
+        }
+    }
+    hideLabelHoverOnAxis() {
+        if (this.attribute.labelHoverOnAxis && this.labelHoverOnAxisGroup) {
+            this.labelHoverOnAxisGroup.setAttributes({
+                visible: false,
+                visibleAll: false
+            });
+        }
+    }
     release() {
         super.release();
         this._breaks = null;
@@ -22718,25 +22869,12 @@ class LabelBase extends AnimateComponent {
         else {
             labels = this._layout(labels);
         }
-        const filteredLabels = [];
-        const overlapLabels = labels;
-        if (!isBoolean(overlap) && isFunction(overlap.filterBeforeOverlap)) {
-            const getRelatedGraphic = this.getRelatedGraphic.bind(this);
-            labels.forEach(label => {
-                if (overlap.filterBeforeOverlap(label, getRelatedGraphic, this)) {
-                    overlapLabels.push(label);
-                }
-                else {
-                    filteredLabels.push(label);
-                }
-            });
-        }
         if (isFunction(customOverlapFunc)) {
-            labels = customOverlapFunc(overlapLabels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null, this).concat(filteredLabels);
+            labels = customOverlapFunc(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null, this);
         }
         else {
             if (overlap !== false) {
-                labels = this._overlapping(overlapLabels).concat(filteredLabels);
+                labels = this._overlapping(labels);
             }
         }
         if (isFunction(this.attribute.onAfterOverlapping)) {
@@ -34583,6 +34721,6 @@ TableSeriesNumber.defaultAttributes = {
     select: true
 };
 
-const version = "1.0.25";
+const version = "1.0.26-alpha.0";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IDataZoomEvent, IDataZoomInteractiveEvent, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SeriesNumberCellStateValue, SeriesNumberEvent, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, TableSeriesNumber, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, scrollbarModule, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };

package/es/axis/circle.d.ts

@@ -30,6 +30,25 @@ export declare class CircleAxis extends AxisBase<CircleAxisAttributes> {
                 fillOpacity: number;
             };
         };
+        labelHoverOnAxis: {
+            visible: boolean;
+            space: number;
+            position: number;
+            autoRotate: boolean;
+            textStyle: {
+                fontSize: number;
+                fill: string;
+                fontWeight: string;
+                fillOpacity: number;
+            };
+            background: {
+                visible: boolean;
+                style: {
+                    cornerRadius: number;
+                    fill: string;
+                };
+            };
+        };
         tick: {
             visible: boolean;
             inside: boolean;

package/es/axis/config.d.ts

@@ -21,6 +21,25 @@ export declare const DEFAULT_AXIS_THEME: {
             fillOpacity: number;
         };
     };
+    labelHoverOnAxis: {
+        visible: boolean;
+        space: number;
+        position: number;
+        autoRotate: boolean;
+        textStyle: {
+            fontSize: number;
+            fill: string;
+            fontWeight: string;
+            fillOpacity: number;
+        };
+        background: {
+            visible: boolean;
+            style: {
+                cornerRadius: number;
+                fill: string;
+            };
+        };
+    };
     tick: {
         visible: boolean;
         inside: boolean;

package/es/axis/config.js

@@ -21,6 +21,25 @@ export const DEFAULT_AXIS_THEME = {
             fillOpacity: 1
         }
     },
+    labelHoverOnAxis: {
+        visible: !1,
+        space: 4,
+        position: 0,
+        autoRotate: !1,
+        textStyle: {
+            fontSize: 12,
+            fill: "white",
+            fontWeight: "normal",
+            fillOpacity: 1
+        },
+        background: {
+            visible: !0,
+            style: {
+                cornerRadius: 2,
+                fill: "black"
+            }
+        }
+    },
     tick: {
         visible: !0,
         inside: !1,

package/es/axis/config.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/axis/config.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,KAAK,EAAE;QACL,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;YACf,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,CAAC;SACf;KACF;IACD,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;QACV,KAAK,EAAE;YACL,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,MAAM;YACZ,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,CAAC;SACf;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,KAAK;QACb,cAAc,EAAE,IAAI;QACpB,MAAM,EAAE,CAAC;QACT,KAAK,EAAE;YACL,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,CAAC;SACjB;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,KAAK,EAAE;YACL,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,CAAC;SACjB;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,KAAK,EAAE;YACL,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,CAAC;SACjB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,+BAA+B,GAAG;IAC7C,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,CAAC;IACZ,MAAM,EAAE,CAAC;CACV,CAAC","file":"config.js","sourcesContent":["export const DEFAULT_AXIS_THEME = {\n  title: {\n    space: 4,\n    padding: 0,\n    textStyle: {\n      fontSize: 12,\n      fill: '#333333',\n      fontWeight: 'normal',\n      fillOpacity: 1\n    }\n  },\n  label: {\n    visible: true,\n    inside: false,\n    space: 4,\n    padding: 0,\n    style: {\n      fontSize: 12,\n      fill: '#333',\n      fontWeight: 'normal',\n      fillOpacity: 1\n    }\n  },\n  tick: {\n    visible: true,\n    inside: false,\n    alignWithLabel: true,\n    length: 4,\n    style: {\n      lineWidth: 1,\n      stroke: '#000',\n      strokeOpacity: 1\n    }\n  },\n  subTick: {\n    visible: false,\n    inside: false,\n    count: 4,\n    length: 2,\n    style: {\n      lineWidth: 1,\n      stroke: '#999',\n      strokeOpacity: 1\n    }\n  },\n  line: {\n    visible: true,\n    style: {\n      lineWidth: 1,\n      stroke: '#000',\n      strokeOpacity: 1\n    }\n  }\n};\n\nexport const DEFAULT_AXIS_BREAK_SYMBOL_STYLE = {\n  size: 8,\n  stroke: '#000',\n  lineWidth: 1,\n  zIndex: 1\n};\n"]}
+{"version":3,"sources":["../src/axis/config.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,KAAK,EAAE;QACL,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;YACf,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,CAAC;SACf;KACF;IACD,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;QACV,KAAK,EAAE;YACL,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,MAAM;YACZ,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,CAAC;SACf;KACF;IACD,gBAAgB,EAAE;QAChB,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,OAAO;YACb,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,CAAC;SACf;QACD,UAAU,EAAE;YACV,OAAO,EAAE,IAAI;YACb,KAAK,EAAE;gBACL,YAAY,EAAE,CAAC;gBACf,IAAI,EAAE,OAAO;aACd;SACF;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,KAAK;QACb,cAAc,EAAE,IAAI;QACpB,MAAM,EAAE,CAAC;QACT,KAAK,EAAE;YACL,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,CAAC;SACjB;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,KAAK,EAAE;YACL,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,CAAC;SACjB;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,KAAK,EAAE;YACL,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,CAAC;SACjB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,+BAA+B,GAAG;IAC7C,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,CAAC;IACZ,MAAM,EAAE,CAAC;CACV,CAAC","file":"config.js","sourcesContent":["export const DEFAULT_AXIS_THEME = {\n  title: {\n    space: 4,\n    padding: 0,\n    textStyle: {\n      fontSize: 12,\n      fill: '#333333',\n      fontWeight: 'normal',\n      fillOpacity: 1\n    }\n  },\n  label: {\n    visible: true,\n    inside: false,\n    space: 4,\n    padding: 0,\n    style: {\n      fontSize: 12,\n      fill: '#333',\n      fontWeight: 'normal',\n      fillOpacity: 1\n    }\n  },\n  labelHoverOnAxis: {\n    visible: false,\n    space: 4,\n    position: 0,\n    autoRotate: false,\n    textStyle: {\n      fontSize: 12,\n      fill: 'white',\n      fontWeight: 'normal',\n      fillOpacity: 1\n    },\n    background: {\n      visible: true,\n      style: {\n        cornerRadius: 2,\n        fill: 'black'\n      }\n    }\n  },\n  tick: {\n    visible: true,\n    inside: false,\n    alignWithLabel: true,\n    length: 4,\n    style: {\n      lineWidth: 1,\n      stroke: '#000',\n      strokeOpacity: 1\n    }\n  },\n  subTick: {\n    visible: false,\n    inside: false,\n    count: 4,\n    length: 2,\n    style: {\n      lineWidth: 1,\n      stroke: '#999',\n      strokeOpacity: 1\n    }\n  },\n  line: {\n    visible: true,\n    style: {\n      lineWidth: 1,\n      stroke: '#000',\n      strokeOpacity: 1\n    }\n  }\n};\n\nexport const DEFAULT_AXIS_BREAK_SYMBOL_STYLE = {\n  size: 8,\n  stroke: '#000',\n  lineWidth: 1,\n  zIndex: 1\n};\n"]}

package/es/axis/constant.d.ts

@@ -7,6 +7,7 @@ export declare enum AXIS_ELEMENT_NAME {
     subTick = "axis-sub-tick",
     label = "axis-label",
     title = "axis-title",
+    labelHoverOnAxis = "axis-label-hover-on-axis",
     gridContainer = "axis-grid-container",
     grid = "axis-grid",
     gridRegion = "axis-grid-region",

package/es/axis/constant.js

@@ -5,10 +5,11 @@ export var AXIS_ELEMENT_NAME;
     AXIS_ELEMENT_NAME.labelContainer = "axis-label-container", AXIS_ELEMENT_NAME.tickContainer = "axis-tick-container", 
     AXIS_ELEMENT_NAME.tick = "axis-tick", AXIS_ELEMENT_NAME.subTick = "axis-sub-tick", 
     AXIS_ELEMENT_NAME.label = "axis-label", AXIS_ELEMENT_NAME.title = "axis-title", 
-    AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container", AXIS_ELEMENT_NAME.grid = "axis-grid", 
-    AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region", AXIS_ELEMENT_NAME.line = "axis-line", 
-    AXIS_ELEMENT_NAME.background = "axis-background", AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background", 
-    AXIS_ELEMENT_NAME.axisBreak = "axis-break", AXIS_ELEMENT_NAME.axisBreakSymbol = "axis-break-symbol";
+    AXIS_ELEMENT_NAME.labelHoverOnAxis = "axis-label-hover-on-axis", AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container", 
+    AXIS_ELEMENT_NAME.grid = "axis-grid", AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region", 
+    AXIS_ELEMENT_NAME.line = "axis-line", AXIS_ELEMENT_NAME.background = "axis-background", 
+    AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background", AXIS_ELEMENT_NAME.axisBreak = "axis-break", 
+    AXIS_ELEMENT_NAME.axisBreakSymbol = "axis-break-symbol";
 }(AXIS_ELEMENT_NAME || (AXIS_ELEMENT_NAME = {}));
 
 export var AxisStateValue;

package/es/axis/constant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/axis/constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,iBAiBX;AAjBD,WAAY,iBAAiB;IAC3B,6CAAwB,CAAA;IACxB,qDAAgC,CAAA;IAChC,4DAAuC,CAAA;IACvC,0DAAqC,CAAA;IACrC,uCAAkB,CAAA;IAClB,8CAAyB,CAAA;IACzB,yCAAoB,CAAA;IACpB,yCAAoB,CAAA;IACpB,0DAAqC,CAAA;IACrC,uCAAkB,CAAA;IAClB,oDAA+B,CAAA;IAC/B,uCAAkB,CAAA;IAClB,mDAA8B,CAAA;IAC9B,kEAA6C,CAAA;IAC7C,6CAAwB,CAAA;IACxB,0DAAqC,CAAA;AACvC,CAAC,EAjBW,iBAAiB,KAAjB,iBAAiB,QAiB5B;AAED,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,uCAAqB,CAAA;IACrB,sDAAoC,CAAA;IACpC,iCAAe,CAAA;IACf,gDAA8B,CAAA;AAChC,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB;AAED,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,EAAE;IACpC,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,EAAE;IAC7B,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,EAAE;IAC1B,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,EAAE;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC","file":"constant.js","sourcesContent":["export enum AXIS_ELEMENT_NAME {\n  innerView = 'inner-view',\n  axisContainer = 'axis-container',\n  labelContainer = 'axis-label-container',\n  tickContainer = 'axis-tick-container',\n  tick = 'axis-tick',\n  subTick = 'axis-sub-tick',\n  label = 'axis-label',\n  title = 'axis-title',\n  gridContainer = 'axis-grid-container',\n  grid = 'axis-grid',\n  gridRegion = 'axis-grid-region',\n  line = 'axis-line',\n  background = 'axis-background',\n  axisLabelBackground = 'axis-label-background',\n  axisBreak = 'axis-break',\n  axisBreakSymbol = 'axis-break-symbol'\n}\n\nexport enum AxisStateValue {\n  selected = 'selected',\n  selectedReverse = 'selected_reverse',\n  hover = 'hover',\n  hoverReverse = 'hover_reverse'\n}\n\nexport const DEFAULT_STATES = {\n  [AxisStateValue.selectedReverse]: {},\n  [AxisStateValue.selected]: {},\n  [AxisStateValue.hover]: {},\n  [AxisStateValue.hoverReverse]: {}\n};\n\nexport const TopZIndex = 999;\n"]}
+{"version":3,"sources":["../src/axis/constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,iBAkBX;AAlBD,WAAY,iBAAiB;IAC3B,6CAAwB,CAAA;IACxB,qDAAgC,CAAA;IAChC,4DAAuC,CAAA;IACvC,0DAAqC,CAAA;IACrC,uCAAkB,CAAA;IAClB,8CAAyB,CAAA;IACzB,yCAAoB,CAAA;IACpB,yCAAoB,CAAA;IACpB,kEAA6C,CAAA;IAC7C,0DAAqC,CAAA;IACrC,uCAAkB,CAAA;IAClB,oDAA+B,CAAA;IAC/B,uCAAkB,CAAA;IAClB,mDAA8B,CAAA;IAC9B,kEAA6C,CAAA;IAC7C,6CAAwB,CAAA;IACxB,0DAAqC,CAAA;AACvC,CAAC,EAlBW,iBAAiB,KAAjB,iBAAiB,QAkB5B;AAED,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,uCAAqB,CAAA;IACrB,sDAAoC,CAAA;IACpC,iCAAe,CAAA;IACf,gDAA8B,CAAA;AAChC,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB;AAED,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,EAAE;IACpC,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,EAAE;IAC7B,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,EAAE;IAC1B,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,EAAE;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC","file":"constant.js","sourcesContent":["export enum AXIS_ELEMENT_NAME {\n  innerView = 'inner-view',\n  axisContainer = 'axis-container',\n  labelContainer = 'axis-label-container',\n  tickContainer = 'axis-tick-container',\n  tick = 'axis-tick',\n  subTick = 'axis-sub-tick',\n  label = 'axis-label',\n  title = 'axis-title',\n  labelHoverOnAxis = 'axis-label-hover-on-axis',\n  gridContainer = 'axis-grid-container',\n  grid = 'axis-grid',\n  gridRegion = 'axis-grid-region',\n  line = 'axis-line',\n  background = 'axis-background',\n  axisLabelBackground = 'axis-label-background',\n  axisBreak = 'axis-break',\n  axisBreakSymbol = 'axis-break-symbol'\n}\n\nexport enum AxisStateValue {\n  selected = 'selected',\n  selectedReverse = 'selected_reverse',\n  hover = 'hover',\n  hoverReverse = 'hover_reverse'\n}\n\nexport const DEFAULT_STATES = {\n  [AxisStateValue.selectedReverse]: {},\n  [AxisStateValue.selected]: {},\n  [AxisStateValue.hover]: {},\n  [AxisStateValue.hoverReverse]: {}\n};\n\nexport const TopZIndex = 999;\n"]}

package/es/axis/line.d.ts

@@ -1,5 +1,5 @@
 import type { TextAlignType, IGroup, IText, TextBaselineType } from '@visactor/vrender-core';
-import type { TagAttributes } from '../tag';
+import { type TagAttributes } from '../tag';
 import type { LineAxisAttributes, AxisItem } from './type';
 import { AxisBase } from './base';
 import { LineAxisMixin } from './mixin/line';
@@ -30,6 +30,25 @@ export declare class LineAxis extends AxisBase<LineAxisAttributes> {
                 fillOpacity: number;
             };
         };
+        labelHoverOnAxis: {
+            visible: boolean;
+            space: number;
+            position: number;
+            autoRotate: boolean;
+            textStyle: {
+                fontSize: number;
+                fill: string;
+                fontWeight: string;
+                fillOpacity: number;
+            };
+            background: {
+                visible: boolean;
+                style: {
+                    cornerRadius: number;
+                    fill: string;
+                };
+            };
+        };
         tick: {
             visible: boolean;
             inside: boolean;
@@ -61,12 +80,15 @@ export declare class LineAxis extends AxisBase<LineAxisAttributes> {
             };
         };
     };
-    constructor(attributes: LineAxisAttributes, options?: ComponentOptions);
     private _breaks;
+    private labelHoverOnAxisGroup;
+    constructor(attributes: LineAxisAttributes, options?: ComponentOptions);
     protected _renderInner(container: IGroup): void;
+    protected renderLabelHoverOnAxis(): void;
     protected renderLine(container: IGroup): void;
     protected getTextAlign(vector: number[]): TextAlignType;
     protected getTitleAttribute(): TagAttributes;
+    protected getLabelHoverOnAxisAttribute(): TagAttributes;
     protected getTextBaseline(vector: number[], inside?: boolean): TextBaselineType;
     protected getLabelAlign(vector: [number, number], inside?: boolean, angle?: number): {
         textAlign: TextAlignType;
@@ -76,5 +98,7 @@ export declare class LineAxis extends AxisBase<LineAxisAttributes> {
     protected handleLabelsOverlap(labelShapes: IText[], labelData: AxisItem[], labelContainer: IGroup, layer: number, layerCount: number): void;
     protected afterLabelsOverlap(labelShapes: IText[], labelData: AxisItem[], labelContainer: IGroup, layer: number, layerCount: number): void;
     private _getAxisLabelLimitLength;
+    showLabelHoverOnAxis(position: number, text: string): void;
+    hideLabelHoverOnAxis(): void;
     release(): void;
 }

package/es/axis/line.js

@@ -16,6 +16,8 @@ import { Segment } from "../segment";
 
 import { angleTo } from "../util/matrix";
 
+import { Tag } from "../tag";
+
 import { AxisBase } from "./base";
 
 import { DEFAULT_AXIS_THEME } from "./config";
@@ -44,7 +46,11 @@ loadLineAxisComponent();
 
 export class LineAxis extends AxisBase {
     constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, LineAxis.defaultAttributes, attributes), options);
+        var _a;
+        attributes.labelHoverOnAxis && (attributes.labelHoverOnAxis.textStyle = Object.assign({}, attributes.label.style, attributes.labelHoverOnAxis.textStyle), 
+        attributes.labelHoverOnAxis.space = null !== (_a = attributes.labelHoverOnAxis.space) && void 0 !== _a ? _a : attributes.label.space), 
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, LineAxis.defaultAttributes, attributes), options), 
+        this.labelHoverOnAxisGroup = null;
     }
     _renderInner(container) {
         var _a;
@@ -95,6 +101,13 @@ export class LineAxis extends AxisBase {
             bgRect.states = merge({}, DEFAULT_STATES, null !== (_a = panel.state) && void 0 !== _a ? _a : {}), 
             axisContainer.insertBefore(bgRect, axisContainer.firstChild);
         }
+        const {labelHoverOnAxis: labelHoverOnAxis} = this.attribute;
+        labelHoverOnAxis && labelHoverOnAxis.visible && this.renderLabelHoverOnAxis();
+    }
+    renderLabelHoverOnAxis() {
+        const hoverOnLabelAttributes = this.getLabelHoverOnAxisAttribute(), hoverOnLabel = new Tag(Object.assign({}, hoverOnLabelAttributes));
+        hoverOnLabel.name = AXIS_ELEMENT_NAME.title, hoverOnLabel.id = this._getNodeId("hover-on-label"), 
+        this.labelHoverOnAxisGroup = hoverOnLabel, this.axisContainer.add(hoverOnLabel);
     }
     renderLine(container) {
         const {start: start, end: end, line: line} = this.attribute, _a = line, {startSymbol: startSymbol, endSymbol: endSymbol, style: style, state: state} = _a, restLineAttrs = __rest(_a, [ "startSymbol", "endSymbol", "style", "state" ]), lineAttrs = Object.assign({
@@ -189,6 +202,49 @@ export class LineAxis extends AxisBase {
             visible: !0
         }, background.style)), attrs;
     }
+    getLabelHoverOnAxisAttribute() {
+        var _a, _b;
+        const {orient: orient} = this.attribute, _c = this.attribute.labelHoverOnAxis, {position: position = 0, space: space = 4, autoRotate: autoRotate = !0, textStyle: textStyle = {}, background: background = {}, formatMethod: formatMethod, text: textContent = "", maxWidth: maxWidth} = _c, restAttrs = __rest(_c, [ "position", "space", "autoRotate", "textStyle", "background", "formatMethod", "text", "maxWidth" ]), point = this.getTickCoord(0);
+        "bottom" === orient || "top" === orient ? point.x = position : point.y = position;
+        let tickLength = 0;
+        (null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.visible) && !1 === this.attribute.tick.inside && (tickLength = this.attribute.tick.length || 4), 
+        (null === (_b = this.attribute.subTick) || void 0 === _b ? void 0 : _b.visible) && !1 === this.attribute.subTick.inside && (tickLength = Math.max(tickLength, this.attribute.subTick.length || 2));
+        const offset = tickLength + 0 + space, labelPoint = this.getVerticalCoord(point, offset, !1), vector = this.getVerticalVector(offset, !1, {
+            x: 0,
+            y: 0
+        });
+        let textBaseline, {angle: angle} = restAttrs, textAlign = "center";
+        if (isNil(angle) && autoRotate) {
+            const axisVector = this.getRelativeVector();
+            angle = angleTo(axisVector, [ 1, 0 ], !0);
+            const {verticalFactor: verticalFactor = 1} = this.attribute;
+            textBaseline = 1 === -1 * verticalFactor ? "bottom" : "top";
+        } else textAlign = this.getTextAlign(vector), textBaseline = this.getTextBaseline(vector, !1);
+        let maxTagWidth = maxWidth;
+        if (isNil(maxTagWidth)) {
+            const {verticalLimitSize: verticalLimitSize, verticalMinSize: verticalMinSize, orient: orient} = this.attribute, limitSize = Math.min(verticalLimitSize || 1 / 0, verticalMinSize || 1 / 0);
+            if (isValidNumber(limitSize)) {
+                if ("bottom" === orient || "top" === orient) if (angle !== Math.PI / 2) {
+                    const cosValue = Math.abs(Math.cos(null != angle ? angle : 0));
+                    maxTagWidth = cosValue < 1e-6 ? 1 / 0 : this.attribute.end.x / cosValue;
+                } else maxTagWidth = limitSize - offset; else if (angle && 0 !== angle) {
+                    const sinValue = Math.abs(Math.sin(angle));
+                    maxTagWidth = sinValue < 1e-6 ? 1 / 0 : this.attribute.end.y / sinValue;
+                } else maxTagWidth = limitSize - offset;
+            }
+        }
+        const text = formatMethod ? formatMethod(textContent) : textContent, attrs = Object.assign(Object.assign(Object.assign({}, labelPoint), restAttrs), {
+            maxWidth: maxTagWidth,
+            textStyle: Object.assign({
+                textAlign: textAlign,
+                textBaseline: textBaseline
+            }, textStyle),
+            text: text
+        });
+        return attrs.angle = angle, background && background.visible && (attrs.panel = Object.assign(Object.assign({
+            visible: !0
+        }, restAttrs.panel), background.style)), attrs;
+    }
     getTextBaseline(vector, inside) {
         let base = "middle";
         const {verticalFactor: verticalFactor = 1} = this.attribute, factor = (inside ? 1 : -1) * verticalFactor;
@@ -327,6 +383,24 @@ export class LineAxis extends AxisBase {
         return limitLength && (limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount), 
         limitLength;
     }
+    showLabelHoverOnAxis(position, text) {
+        if (this.attribute.labelHoverOnAxis) if (this.labelHoverOnAxisGroup) {
+            const {formatMethod: formatMethod} = this.attribute.labelHoverOnAxis, textStr = formatMethod ? formatMethod(text) : text;
+            this.labelHoverOnAxisGroup.setAttribute("text", textStr), this.labelHoverOnAxisGroup.setAttribute("visible", !0), 
+            this.labelHoverOnAxisGroup.setAttribute("visibleAll", !0), "left" === this.attribute.orient || "right" === this.attribute.orient ? this.labelHoverOnAxisGroup.setAttributes({
+                y: position
+            }) : this.labelHoverOnAxisGroup.setAttributes({
+                x: position
+            });
+        } else this.attribute.labelHoverOnAxis.visible = !0, this.attribute.labelHoverOnAxis.position = position, 
+        this.attribute.labelHoverOnAxis.text = text, this.renderLabelHoverOnAxis();
+    }
+    hideLabelHoverOnAxis() {
+        this.attribute.labelHoverOnAxis && this.labelHoverOnAxisGroup && this.labelHoverOnAxisGroup.setAttributes({
+            visible: !1,
+            visibleAll: !1
+        });
+    }
     release() {
         super.release(), this._breaks = null;
     }