@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/cjs/axis/constant.d.ts +1 -0
- package/cjs/axis/constant.js +5 -4
- package/cjs/axis/constant.js.map +1 -1
- package/cjs/axis/line.d.ts +7 -2
- package/cjs/axis/line.js +75 -4
- package/cjs/axis/line.js.map +1 -1
- package/cjs/axis/type.d.ts +12 -0
- package/cjs/axis/type.js.map +1 -1
- package/cjs/brush/config.js +2 -1
- package/cjs/index.d.ts +1 -1
- package/cjs/index.js +1 -1
- package/cjs/index.js.map +1 -1
- package/cjs/label/base.js +2 -9
- package/cjs/label/base.js.map +1 -1
- package/cjs/label/type.d.ts +0 -2
- package/cjs/label/type.js.map +1 -1
- package/dist/index.es.js +140 -18
- package/es/axis/constant.d.ts +1 -0
- package/es/axis/constant.js +5 -4
- package/es/axis/constant.js.map +1 -1
- package/es/axis/line.d.ts +7 -2
- package/es/axis/line.js +76 -3
- package/es/axis/line.js.map +1 -1
- package/es/axis/type.d.ts +12 -0
- package/es/axis/type.js.map +1 -1
- package/es/brush/config.js +2 -1
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/es/label/base.js +3 -10
- package/es/label/base.js.map +1 -1
- package/es/label/type.d.ts +0 -2
- package/es/label/type.js.map +1 -1
- package/package.json +6 -6
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 ? (
|
|
20755
|
-
const tickLength = tick && tick.visible ? (
|
|
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(
|
|
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(
|
|
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.
|
|
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 };
|
package/es/axis/constant.d.ts
CHANGED
|
@@ -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",
|
package/es/axis/constant.js
CHANGED
|
@@ -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.
|
|
9
|
-
AXIS_ELEMENT_NAME.
|
|
10
|
-
AXIS_ELEMENT_NAME.
|
|
11
|
-
AXIS_ELEMENT_NAME.
|
|
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;
|
package/es/axis/constant.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/axis/constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,
|
|
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
|
|
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);
|