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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -17391,6 +17391,7 @@ var AXIS_ELEMENT_NAME;
17391
17391
  AXIS_ELEMENT_NAME["subTick"] = "axis-sub-tick";
17392
17392
  AXIS_ELEMENT_NAME["label"] = "axis-label";
17393
17393
  AXIS_ELEMENT_NAME["title"] = "axis-title";
17394
+ AXIS_ELEMENT_NAME["labelHoverOnAxis"] = "axis-label-hover-on-axis";
17394
17395
  AXIS_ELEMENT_NAME["gridContainer"] = "axis-grid-container";
17395
17396
  AXIS_ELEMENT_NAME["grid"] = "axis-grid";
17396
17397
  AXIS_ELEMENT_NAME["gridRegion"] = "axis-grid-region";
@@ -20274,6 +20275,7 @@ loadLineAxisComponent();
20274
20275
  class LineAxis extends AxisBase {
20275
20276
  constructor(attributes, options) {
20276
20277
  super((options === null || options === void 0 ? void 0 : options.skipDefault) ? attributes : merge({}, LineAxis.defaultAttributes, attributes), options);
20278
+ this.labelHoverOnAxisGroup = null;
20277
20279
  }
20278
20280
  _renderInner(container) {
20279
20281
  var _a;
@@ -20325,6 +20327,18 @@ class LineAxis extends AxisBase {
20325
20327
  bgRect.states = merge({}, DEFAULT_STATES$1, (_a = panel.state) !== null && _a !== void 0 ? _a : {});
20326
20328
  axisContainer.insertBefore(bgRect, axisContainer.firstChild);
20327
20329
  }
20330
+ const { labelHoverOnAxis } = this.attribute;
20331
+ if (labelHoverOnAxis && labelHoverOnAxis.visible) {
20332
+ this.renderLabelHoverOnAxis();
20333
+ }
20334
+ }
20335
+ renderLabelHoverOnAxis() {
20336
+ const hoverOnLabelAttributes = this.getLabelHoverOnAxisAttribute();
20337
+ const hoverOnLabel = new Tag(Object.assign({}, hoverOnLabelAttributes));
20338
+ hoverOnLabel.name = AXIS_ELEMENT_NAME.title;
20339
+ hoverOnLabel.id = this._getNodeId('hover-on-label');
20340
+ this.labelHoverOnAxisGroup = hoverOnLabel;
20341
+ this.axisContainer.add(hoverOnLabel);
20328
20342
  }
20329
20343
  renderLine(container) {
20330
20344
  const { start, end, line } = this.attribute;
@@ -20519,6 +20533,84 @@ class LineAxis extends AxisBase {
20519
20533
  }
20520
20534
  return attrs;
20521
20535
  }
20536
+ getLabelHoverOnAxisAttribute() {
20537
+ var _a, _b;
20538
+ const { orient } = this.attribute;
20539
+ const _c = this.attribute.labelHoverOnAxis, { position = 0, space = 4, autoRotate = true, textStyle = {}, background = {}, formatMethod, text: textContent = '' } = _c, restAttrs = __rest(_c, ["position", "space", "autoRotate", "textStyle", "background", "formatMethod", "text"]);
20540
+ const point = this.getTickCoord(0);
20541
+ if (orient === 'bottom' || orient === 'top') {
20542
+ point.x = position;
20543
+ }
20544
+ else {
20545
+ point.y = position;
20546
+ }
20547
+ let tickLength = 0;
20548
+ if (((_a = this.attribute.tick) === null || _a === void 0 ? void 0 : _a.visible) && this.attribute.tick.inside === false) {
20549
+ tickLength = this.attribute.tick.length || 4;
20550
+ }
20551
+ if (((_b = this.attribute.subTick) === null || _b === void 0 ? void 0 : _b.visible) && this.attribute.subTick.inside === false) {
20552
+ tickLength = Math.max(tickLength, this.attribute.subTick.length || 2);
20553
+ }
20554
+ const labelLength = 0;
20555
+ const offset = tickLength + labelLength + space;
20556
+ const labelPoint = this.getVerticalCoord(point, offset, false);
20557
+ const vector = this.getVerticalVector(offset, false, { x: 0, y: 0 });
20558
+ let { angle } = restAttrs;
20559
+ let textAlign = 'center';
20560
+ let textBaseline;
20561
+ if (isNil(angle) && autoRotate) {
20562
+ const axisVector = this.getRelativeVector();
20563
+ const v1 = [1, 0];
20564
+ const radian = angleTo(axisVector, v1, true);
20565
+ angle = radian;
20566
+ const { verticalFactor = 1 } = this.attribute;
20567
+ const factor = -1 * verticalFactor;
20568
+ if (factor === 1) {
20569
+ textBaseline = 'bottom';
20570
+ }
20571
+ else {
20572
+ textBaseline = 'top';
20573
+ }
20574
+ }
20575
+ else {
20576
+ textAlign = this.getTextAlign(vector);
20577
+ textBaseline = this.getTextBaseline(vector, false);
20578
+ }
20579
+ let maxTagWidth = 100;
20580
+ if (isNil(maxTagWidth)) {
20581
+ const { verticalLimitSize, verticalMinSize, orient } = this.attribute;
20582
+ const limitSize = Math.min(verticalLimitSize || Infinity, verticalMinSize || Infinity);
20583
+ if (isValidNumber(limitSize)) {
20584
+ const isX = orient === 'bottom' || orient === 'top';
20585
+ if (isX) {
20586
+ if (angle !== Math.PI / 2) {
20587
+ const cosValue = Math.abs(Math.cos(angle !== null && angle !== void 0 ? angle : 0));
20588
+ maxTagWidth = cosValue < 1e-6 ? Infinity : this.attribute.end.x / cosValue;
20589
+ }
20590
+ else {
20591
+ maxTagWidth = limitSize - offset;
20592
+ }
20593
+ }
20594
+ else {
20595
+ if (angle && angle !== 0) {
20596
+ const sinValue = Math.abs(Math.sin(angle));
20597
+ maxTagWidth = sinValue < 1e-6 ? Infinity : this.attribute.end.y / sinValue;
20598
+ }
20599
+ else {
20600
+ maxTagWidth = limitSize - offset;
20601
+ }
20602
+ }
20603
+ }
20604
+ }
20605
+ const text = formatMethod ? formatMethod(textContent) : textContent;
20606
+ const attrs = Object.assign(Object.assign(Object.assign({}, labelPoint), restAttrs), { maxWidth: maxTagWidth, textStyle: Object.assign({ textAlign,
20607
+ textBaseline }, textStyle), text });
20608
+ attrs.angle = angle;
20609
+ if (background && background.visible) {
20610
+ attrs.panel = Object.assign(Object.assign({ visible: true }, restAttrs.panel), background.style);
20611
+ }
20612
+ return attrs;
20613
+ }
20522
20614
  getTextBaseline(vector, inside) {
20523
20615
  let base = 'middle';
20524
20616
  const { verticalFactor = 1 } = this.attribute;
@@ -20751,8 +20843,8 @@ class LineAxis extends AxisBase {
20751
20843
  let limitLength = limitSize;
20752
20844
  let titleHeight = 0;
20753
20845
  let titleSpacing = 0;
20754
- const axisLineWidth = line && line.visible ? ((_b = line.style.lineWidth) !== null && _b !== void 0 ? _b : 1) : 0;
20755
- const tickLength = tick && tick.visible ? ((_c = tick.length) !== null && _c !== void 0 ? _c : 4) : 0;
20846
+ const axisLineWidth = line && line.visible ? (_b = line.style.lineWidth) !== null && _b !== void 0 ? _b : 1 : 0;
20847
+ const tickLength = tick && tick.visible ? (_c = tick.length) !== null && _c !== void 0 ? _c : 4 : 0;
20756
20848
  if (title && title.visible && typeof title.text === 'string') {
20757
20849
  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;
20758
20850
  const padding = normalizePadding(title.padding);
@@ -20763,6 +20855,49 @@ class LineAxis extends AxisBase {
20763
20855
  }
20764
20856
  return limitLength;
20765
20857
  }
20858
+ showLabelHoverOnAxis(position, text) {
20859
+ if (this.attribute.labelHoverOnAxis) {
20860
+ if (this.labelHoverOnAxisGroup) {
20861
+ const { formatMethod } = this.attribute.labelHoverOnAxis;
20862
+ const textStr = formatMethod ? formatMethod(text) : text;
20863
+ this.labelHoverOnAxisGroup.setAttribute('text', textStr);
20864
+ this.labelHoverOnAxisGroup.setAttribute('visible', true);
20865
+ if (this.attribute.orient === 'left' || this.attribute.orient === 'right') {
20866
+ this.labelHoverOnAxisGroup.setAttributes({
20867
+ y: position
20868
+ });
20869
+ }
20870
+ else {
20871
+ this.labelHoverOnAxisGroup.setAttributes({
20872
+ x: position
20873
+ });
20874
+ }
20875
+ }
20876
+ else {
20877
+ this.attribute.labelHoverOnAxis.visible = true;
20878
+ this.attribute.labelHoverOnAxis.position = position;
20879
+ this.attribute.labelHoverOnAxis.text = text;
20880
+ this.renderLabelHoverOnAxis();
20881
+ }
20882
+ }
20883
+ }
20884
+ hideLabelHoverOnAxis() {
20885
+ if (this.attribute.labelHoverOnAxis && this.labelHoverOnAxisGroup) {
20886
+ this.labelHoverOnAxisGroup.setAttributes({
20887
+ visible: false
20888
+ });
20889
+ if (this.attribute.orient === 'left' || this.attribute.orient === 'right') {
20890
+ this.labelHoverOnAxisGroup.setAttributes({
20891
+ y: -100000
20892
+ });
20893
+ }
20894
+ else {
20895
+ this.labelHoverOnAxisGroup.setAttributes({
20896
+ x: -100000
20897
+ });
20898
+ }
20899
+ }
20900
+ }
20766
20901
  release() {
20767
20902
  super.release();
20768
20903
  this._breaks = null;
@@ -22718,25 +22853,12 @@ class LabelBase extends AnimateComponent {
22718
22853
  else {
22719
22854
  labels = this._layout(labels);
22720
22855
  }
22721
- const filteredLabels = [];
22722
- const overlapLabels = labels;
22723
- if (!isBoolean(overlap) && isFunction(overlap.filterBeforeOverlap)) {
22724
- const getRelatedGraphic = this.getRelatedGraphic.bind(this);
22725
- labels.forEach(label => {
22726
- if (overlap.filterBeforeOverlap(label, getRelatedGraphic, this)) {
22727
- overlapLabels.push(label);
22728
- }
22729
- else {
22730
- filteredLabels.push(label);
22731
- }
22732
- });
22733
- }
22734
22856
  if (isFunction(customOverlapFunc)) {
22735
- labels = customOverlapFunc(overlapLabels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null, this).concat(filteredLabels);
22857
+ labels = customOverlapFunc(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? (d) => this._idToPoint.get(d.id) : null, this);
22736
22858
  }
22737
22859
  else {
22738
22860
  if (overlap !== false) {
22739
- labels = this._overlapping(overlapLabels).concat(filteredLabels);
22861
+ labels = this._overlapping(labels);
22740
22862
  }
22741
22863
  }
22742
22864
  if (isFunction(this.attribute.onAfterOverlapping)) {
@@ -34583,6 +34705,6 @@ TableSeriesNumber.defaultAttributes = {
34583
34705
  select: true
34584
34706
  };
34585
34707
 
34586
- const version = "1.0.24-alpha.0";
34708
+ const version = "1.0.25-alpha.0";
34587
34709
 
34588
34710
  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 };
@@ -7,6 +7,7 @@ export declare enum AXIS_ELEMENT_NAME {
7
7
  subTick = "axis-sub-tick",
8
8
  label = "axis-label",
9
9
  title = "axis-title",
10
+ labelHoverOnAxis = "axis-label-hover-on-axis",
10
11
  gridContainer = "axis-grid-container",
11
12
  grid = "axis-grid",
12
13
  gridRegion = "axis-grid-region",
@@ -5,10 +5,11 @@ export var AXIS_ELEMENT_NAME;
5
5
  AXIS_ELEMENT_NAME.labelContainer = "axis-label-container", AXIS_ELEMENT_NAME.tickContainer = "axis-tick-container",
6
6
  AXIS_ELEMENT_NAME.tick = "axis-tick", AXIS_ELEMENT_NAME.subTick = "axis-sub-tick",
7
7
  AXIS_ELEMENT_NAME.label = "axis-label", AXIS_ELEMENT_NAME.title = "axis-title",
8
- AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container", AXIS_ELEMENT_NAME.grid = "axis-grid",
9
- AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region", AXIS_ELEMENT_NAME.line = "axis-line",
10
- AXIS_ELEMENT_NAME.background = "axis-background", AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background",
11
- AXIS_ELEMENT_NAME.axisBreak = "axis-break", AXIS_ELEMENT_NAME.axisBreakSymbol = "axis-break-symbol";
8
+ AXIS_ELEMENT_NAME.labelHoverOnAxis = "axis-label-hover-on-axis", AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container",
9
+ AXIS_ELEMENT_NAME.grid = "axis-grid", AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region",
10
+ AXIS_ELEMENT_NAME.line = "axis-line", AXIS_ELEMENT_NAME.background = "axis-background",
11
+ AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background", AXIS_ELEMENT_NAME.axisBreak = "axis-break",
12
+ AXIS_ELEMENT_NAME.axisBreakSymbol = "axis-break-symbol";
12
13
  }(AXIS_ELEMENT_NAME || (AXIS_ELEMENT_NAME = {}));
13
14
 
14
15
  export var AxisStateValue;
@@ -1 +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"]}
1
+ {"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 CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { TextAlignType, IGroup, IText, TextBaselineType } from '@visactor/vrender-core';
2
- import type { TagAttributes } from '../tag';
2
+ import { type TagAttributes } from '../tag';
3
3
  import type { LineAxisAttributes, AxisItem } from './type';
4
4
  import { AxisBase } from './base';
5
5
  import { LineAxisMixin } from './mixin/line';
@@ -61,12 +61,15 @@ export declare class LineAxis extends AxisBase<LineAxisAttributes> {
61
61
  };
62
62
  };
63
63
  };
64
- constructor(attributes: LineAxisAttributes, options?: ComponentOptions);
65
64
  private _breaks;
65
+ private labelHoverOnAxisGroup;
66
+ constructor(attributes: LineAxisAttributes, options?: ComponentOptions);
66
67
  protected _renderInner(container: IGroup): void;
68
+ protected renderLabelHoverOnAxis(): void;
67
69
  protected renderLine(container: IGroup): void;
68
70
  protected getTextAlign(vector: number[]): TextAlignType;
69
71
  protected getTitleAttribute(): TagAttributes;
72
+ protected getLabelHoverOnAxisAttribute(): TagAttributes;
70
73
  protected getTextBaseline(vector: number[], inside?: boolean): TextBaselineType;
71
74
  protected getLabelAlign(vector: [number, number], inside?: boolean, angle?: number): {
72
75
  textAlign: TextAlignType;
@@ -76,5 +79,7 @@ export declare class LineAxis extends AxisBase<LineAxisAttributes> {
76
79
  protected handleLabelsOverlap(labelShapes: IText[], labelData: AxisItem[], labelContainer: IGroup, layer: number, layerCount: number): void;
77
80
  protected afterLabelsOverlap(labelShapes: IText[], labelData: AxisItem[], labelContainer: IGroup, layer: number, layerCount: number): void;
78
81
  private _getAxisLabelLimitLength;
82
+ showLabelHoverOnAxis(position: number, text: string): void;
83
+ hideLabelHoverOnAxis(): void;
79
84
  release(): void;
80
85
  }
package/es/axis/line.js CHANGED
@@ -16,6 +16,8 @@ import { Segment } from "../segment";
16
16
 
17
17
  import { angleTo } from "../util/matrix";
18
18
 
19
+ import { Tag } from "../tag";
20
+
19
21
  import { AxisBase } from "./base";
20
22
 
21
23
  import { DEFAULT_AXIS_THEME } from "./config";
@@ -44,7 +46,8 @@ loadLineAxisComponent();
44
46
 
45
47
  export class LineAxis extends AxisBase {
46
48
  constructor(attributes, options) {
47
- super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, LineAxis.defaultAttributes, attributes), options);
49
+ super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, LineAxis.defaultAttributes, attributes), options),
50
+ this.labelHoverOnAxisGroup = null;
48
51
  }
49
52
  _renderInner(container) {
50
53
  var _a;
@@ -95,6 +98,13 @@ export class LineAxis extends AxisBase {
95
98
  bgRect.states = merge({}, DEFAULT_STATES, null !== (_a = panel.state) && void 0 !== _a ? _a : {}),
96
99
  axisContainer.insertBefore(bgRect, axisContainer.firstChild);
97
100
  }
101
+ const {labelHoverOnAxis: labelHoverOnAxis} = this.attribute;
102
+ labelHoverOnAxis && labelHoverOnAxis.visible && this.renderLabelHoverOnAxis();
103
+ }
104
+ renderLabelHoverOnAxis() {
105
+ const hoverOnLabelAttributes = this.getLabelHoverOnAxisAttribute(), hoverOnLabel = new Tag(Object.assign({}, hoverOnLabelAttributes));
106
+ hoverOnLabel.name = AXIS_ELEMENT_NAME.title, hoverOnLabel.id = this._getNodeId("hover-on-label"),
107
+ this.labelHoverOnAxisGroup = hoverOnLabel, this.axisContainer.add(hoverOnLabel);
98
108
  }
99
109
  renderLine(container) {
100
110
  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 +199,49 @@ export class LineAxis extends AxisBase {
189
199
  visible: !0
190
200
  }, background.style)), attrs;
191
201
  }
202
+ getLabelHoverOnAxisAttribute() {
203
+ var _a, _b;
204
+ 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 = ""} = _c, restAttrs = __rest(_c, [ "position", "space", "autoRotate", "textStyle", "background", "formatMethod", "text" ]), point = this.getTickCoord(0);
205
+ "bottom" === orient || "top" === orient ? point.x = position : point.y = position;
206
+ let tickLength = 0;
207
+ (null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.visible) && !1 === this.attribute.tick.inside && (tickLength = this.attribute.tick.length || 4),
208
+ (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));
209
+ const offset = tickLength + 0 + space, labelPoint = this.getVerticalCoord(point, offset, !1), vector = this.getVerticalVector(offset, !1, {
210
+ x: 0,
211
+ y: 0
212
+ });
213
+ let textBaseline, {angle: angle} = restAttrs, textAlign = "center";
214
+ if (isNil(angle) && autoRotate) {
215
+ const axisVector = this.getRelativeVector();
216
+ angle = angleTo(axisVector, [ 1, 0 ], !0);
217
+ const {verticalFactor: verticalFactor = 1} = this.attribute;
218
+ textBaseline = 1 === -1 * verticalFactor ? "bottom" : "top";
219
+ } else textAlign = this.getTextAlign(vector), textBaseline = this.getTextBaseline(vector, !1);
220
+ let maxTagWidth = 100;
221
+ if (isNil(maxTagWidth)) {
222
+ const {verticalLimitSize: verticalLimitSize, verticalMinSize: verticalMinSize, orient: orient} = this.attribute, limitSize = Math.min(verticalLimitSize || 1 / 0, verticalMinSize || 1 / 0);
223
+ if (isValidNumber(limitSize)) {
224
+ if ("bottom" === orient || "top" === orient) if (angle !== Math.PI / 2) {
225
+ const cosValue = Math.abs(Math.cos(null != angle ? angle : 0));
226
+ maxTagWidth = cosValue < 1e-6 ? 1 / 0 : this.attribute.end.x / cosValue;
227
+ } else maxTagWidth = limitSize - offset; else if (angle && 0 !== angle) {
228
+ const sinValue = Math.abs(Math.sin(angle));
229
+ maxTagWidth = sinValue < 1e-6 ? 1 / 0 : this.attribute.end.y / sinValue;
230
+ } else maxTagWidth = limitSize - offset;
231
+ }
232
+ }
233
+ const text = formatMethod ? formatMethod(textContent) : textContent, attrs = Object.assign(Object.assign(Object.assign({}, labelPoint), restAttrs), {
234
+ maxWidth: maxTagWidth,
235
+ textStyle: Object.assign({
236
+ textAlign: textAlign,
237
+ textBaseline: textBaseline
238
+ }, textStyle),
239
+ text: text
240
+ });
241
+ return attrs.angle = angle, background && background.visible && (attrs.panel = Object.assign(Object.assign({
242
+ visible: !0
243
+ }, restAttrs.panel), background.style)), attrs;
244
+ }
192
245
  getTextBaseline(vector, inside) {
193
246
  let base = "middle";
194
247
  const {verticalFactor: verticalFactor = 1} = this.attribute, factor = (inside ? 1 : -1) * verticalFactor;
@@ -327,10 +380,30 @@ export class LineAxis extends AxisBase {
327
380
  return limitLength && (limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount),
328
381
  limitLength;
329
382
  }
383
+ showLabelHoverOnAxis(position, text) {
384
+ if (this.attribute.labelHoverOnAxis) if (this.labelHoverOnAxisGroup) {
385
+ const {formatMethod: formatMethod} = this.attribute.labelHoverOnAxis, textStr = formatMethod ? formatMethod(text) : text;
386
+ this.labelHoverOnAxisGroup.setAttribute("text", textStr), this.labelHoverOnAxisGroup.setAttribute("visible", !0),
387
+ "left" === this.attribute.orient || "right" === this.attribute.orient ? this.labelHoverOnAxisGroup.setAttributes({
388
+ y: position
389
+ }) : this.labelHoverOnAxisGroup.setAttributes({
390
+ x: position
391
+ });
392
+ } else this.attribute.labelHoverOnAxis.visible = !0, this.attribute.labelHoverOnAxis.position = position,
393
+ this.attribute.labelHoverOnAxis.text = text, this.renderLabelHoverOnAxis();
394
+ }
395
+ hideLabelHoverOnAxis() {
396
+ this.attribute.labelHoverOnAxis && this.labelHoverOnAxisGroup && (this.labelHoverOnAxisGroup.setAttributes({
397
+ visible: !1
398
+ }), "left" === this.attribute.orient || "right" === this.attribute.orient ? this.labelHoverOnAxisGroup.setAttributes({
399
+ y: -1e5
400
+ }) : this.labelHoverOnAxisGroup.setAttributes({
401
+ x: -1e5
402
+ }));
403
+ }
330
404
  release() {
331
405
  super.release(), this._breaks = null;
332
406
  }
333
407
  }
334
408
 
335
- LineAxis.defaultAttributes = DEFAULT_AXIS_THEME, mixin(LineAxis, LineAxisMixin);
336
- //# sourceMappingURL=line.js.map
409
+ LineAxis.defaultAttributes = DEFAULT_AXIS_THEME, mixin(LineAxis, LineAxisMixin);