victory-tooltip 36.9.2 → 37.0.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/CHANGELOG.md +6 -0
- package/dist/victory-tooltip.js +1580 -1984
- package/dist/victory-tooltip.min.js +1 -1
- package/es/flyout.js +90 -68
- package/es/victory-tooltip.js +471 -576
- package/lib/flyout.js +89 -80
- package/lib/index.js +0 -4
- package/lib/victory-tooltip.js +472 -606
- package/package.json +2 -2
package/lib/victory-tooltip.js
CHANGED
|
@@ -4,636 +4,502 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.VictoryTooltip = void 0;
|
|
7
|
-
|
|
8
7
|
var _orderBy2 = _interopRequireDefault(require("lodash/orderBy"));
|
|
9
|
-
|
|
10
8
|
var _isPlainObject2 = _interopRequireDefault(require("lodash/isPlainObject"));
|
|
11
|
-
|
|
12
9
|
var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
|
|
13
|
-
|
|
14
10
|
var _defaults2 = _interopRequireDefault(require("lodash/defaults"));
|
|
15
|
-
|
|
16
11
|
var _react = _interopRequireDefault(require("react"));
|
|
17
|
-
|
|
18
12
|
var _victoryCore = require("victory-core");
|
|
19
|
-
|
|
20
13
|
var _flyout = require("./flyout");
|
|
21
|
-
|
|
22
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
-
|
|
24
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
25
|
-
|
|
26
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
27
|
-
|
|
28
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
29
|
-
|
|
30
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
31
|
-
|
|
32
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
33
|
-
|
|
34
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
35
|
-
|
|
36
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
37
|
-
|
|
38
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
39
|
-
|
|
40
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
41
|
-
|
|
42
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
43
|
-
|
|
44
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
45
|
-
|
|
46
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
47
|
-
|
|
48
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
49
|
-
|
|
50
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
51
|
-
|
|
52
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
53
|
-
|
|
54
|
-
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
55
|
-
|
|
56
|
-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
57
|
-
|
|
58
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
59
|
-
|
|
60
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
61
|
-
|
|
62
|
-
var fallbackProps = {
|
|
15
|
+
const fallbackProps = {
|
|
63
16
|
cornerRadius: 5,
|
|
64
17
|
pointerLength: 10,
|
|
65
18
|
pointerWidth: 10
|
|
66
19
|
};
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
20
|
+
class VictoryTooltip extends _react.default.Component {
|
|
21
|
+
static displayName = "VictoryTooltip";
|
|
22
|
+
static role = "tooltip";
|
|
23
|
+
static defaultProps = {
|
|
24
|
+
active: false,
|
|
25
|
+
renderInPortal: true,
|
|
26
|
+
labelComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryLabel, null),
|
|
27
|
+
flyoutComponent: /*#__PURE__*/_react.default.createElement(_flyout.Flyout, null),
|
|
28
|
+
groupComponent: /*#__PURE__*/_react.default.createElement("g", null)
|
|
29
|
+
};
|
|
30
|
+
static defaultEvents = props => {
|
|
31
|
+
const activate = props.activateData ? [{
|
|
32
|
+
target: "labels",
|
|
33
|
+
mutation: () => ({
|
|
34
|
+
active: true
|
|
35
|
+
})
|
|
36
|
+
}, {
|
|
37
|
+
target: "data",
|
|
38
|
+
mutation: () => ({
|
|
39
|
+
active: true
|
|
40
|
+
})
|
|
41
|
+
}] : [{
|
|
42
|
+
target: "labels",
|
|
43
|
+
mutation: () => ({
|
|
44
|
+
active: true
|
|
45
|
+
})
|
|
46
|
+
}];
|
|
47
|
+
const deactivate = props.activateData ? [{
|
|
48
|
+
target: "labels",
|
|
49
|
+
mutation: () => ({
|
|
50
|
+
active: undefined
|
|
51
|
+
})
|
|
52
|
+
}, {
|
|
53
|
+
target: "data",
|
|
54
|
+
mutation: () => ({
|
|
55
|
+
active: undefined
|
|
56
|
+
})
|
|
57
|
+
}] : [{
|
|
58
|
+
target: "labels",
|
|
59
|
+
mutation: () => ({
|
|
60
|
+
active: undefined
|
|
61
|
+
})
|
|
62
|
+
}];
|
|
63
|
+
return [{
|
|
64
|
+
target: "data",
|
|
65
|
+
eventHandlers: {
|
|
66
|
+
onMouseOver: () => activate,
|
|
67
|
+
onFocus: () => activate,
|
|
68
|
+
onTouchStart: () => activate,
|
|
69
|
+
onMouseOut: () => deactivate,
|
|
70
|
+
onBlur: () => deactivate,
|
|
71
|
+
onTouchEnd: () => deactivate
|
|
95
72
|
}
|
|
96
|
-
|
|
97
|
-
|
|
73
|
+
}];
|
|
74
|
+
};
|
|
75
|
+
constructor(props) {
|
|
76
|
+
super(props);
|
|
77
|
+
this.id = props.id === undefined ? (0, _uniqueId2.default)("tooltip-") : props.id;
|
|
78
|
+
}
|
|
79
|
+
getDefaultOrientation(props) {
|
|
80
|
+
const {
|
|
81
|
+
datum,
|
|
82
|
+
horizontal,
|
|
83
|
+
polar
|
|
84
|
+
} = props;
|
|
85
|
+
if (!polar) {
|
|
86
|
+
const positive = horizontal ? "right" : "top";
|
|
87
|
+
const negative = horizontal ? "left" : "bottom";
|
|
88
|
+
return datum && datum.y < 0 ? negative : positive;
|
|
98
89
|
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
} else if (placement === "parallel") {
|
|
109
|
-
return degrees < 90 || degrees > 270 ? "right" : "left";
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
return degrees > 180 ? "bottom" : "top";
|
|
90
|
+
return this.getPolarOrientation(props);
|
|
91
|
+
}
|
|
92
|
+
getPolarOrientation(props) {
|
|
93
|
+
const degrees = _victoryCore.LabelHelpers.getDegrees(props, props.datum);
|
|
94
|
+
const placement = props.labelPlacement || "vertical";
|
|
95
|
+
if (placement === "vertical") {
|
|
96
|
+
return this.getVerticalOrientations(degrees);
|
|
97
|
+
} else if (placement === "parallel") {
|
|
98
|
+
return degrees < 90 || degrees > 270 ? "right" : "left";
|
|
113
99
|
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
100
|
+
return degrees > 180 ? "bottom" : "top";
|
|
101
|
+
}
|
|
102
|
+
getVerticalOrientations(degrees) {
|
|
103
|
+
// eslint-disable-next-line no-magic-numbers
|
|
104
|
+
if (degrees < 45 || degrees > 315) {
|
|
105
|
+
return "right";
|
|
117
106
|
// eslint-disable-next-line no-magic-numbers
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
return "left";
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
return "bottom";
|
|
127
|
-
}
|
|
128
|
-
}, {
|
|
129
|
-
key: "getStyles",
|
|
130
|
-
value: function getStyles(props) {
|
|
131
|
-
var theme = props.theme || _victoryCore.VictoryTheme.grayscale;
|
|
132
|
-
var defaultLabelStyles = theme && theme.tooltip && theme.tooltip.style ? theme.tooltip.style : {};
|
|
133
|
-
var baseLabelStyle = Array.isArray(props.style) ? props.style.map(function (s) {
|
|
134
|
-
return (0, _defaults2.default)({}, s, defaultLabelStyles);
|
|
135
|
-
}) : (0, _defaults2.default)({}, props.style, defaultLabelStyles);
|
|
136
|
-
var defaultFlyoutStyles = theme && theme.tooltip && theme.tooltip.flyoutStyle ? theme.tooltip.flyoutStyle : {};
|
|
137
|
-
var baseFlyoutStyle = props.flyoutStyle ? (0, _defaults2.default)({}, props.flyoutStyle, defaultFlyoutStyles) : defaultFlyoutStyles;
|
|
138
|
-
var style = Array.isArray(baseLabelStyle) ? baseLabelStyle.map(function (s) {
|
|
139
|
-
return _victoryCore.Helpers.evaluateStyle(s, props);
|
|
140
|
-
}) : _victoryCore.Helpers.evaluateStyle(baseLabelStyle, props);
|
|
141
|
-
|
|
142
|
-
var flyoutStyle = _victoryCore.Helpers.evaluateStyle(baseFlyoutStyle, Object.assign({}, props, {
|
|
143
|
-
style: style
|
|
144
|
-
}));
|
|
145
|
-
|
|
146
|
-
return {
|
|
147
|
-
style: style,
|
|
148
|
-
flyoutStyle: flyoutStyle
|
|
149
|
-
};
|
|
107
|
+
} else if (degrees >= 45 && degrees <= 135) {
|
|
108
|
+
return "top";
|
|
109
|
+
// eslint-disable-next-line no-magic-numbers
|
|
110
|
+
} else if (degrees > 135 && degrees < 225) {
|
|
111
|
+
return "left";
|
|
150
112
|
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
active: active,
|
|
182
|
-
text: text,
|
|
183
|
-
style: style,
|
|
184
|
-
flyoutStyle: flyoutStyle
|
|
185
|
-
})) || this.getDefaultOrientation(props);
|
|
186
|
-
var padding = _victoryCore.Helpers.evaluateProp(props.flyoutPadding, Object.assign({}, props, {
|
|
187
|
-
active: active,
|
|
188
|
-
text: text,
|
|
189
|
-
style: style,
|
|
190
|
-
flyoutStyle: flyoutStyle,
|
|
191
|
-
orientation: orientation
|
|
192
|
-
})) || this.getLabelPadding(style);
|
|
193
|
-
|
|
194
|
-
var flyoutPadding = _victoryCore.Helpers.getPadding({
|
|
195
|
-
padding: padding
|
|
196
|
-
});
|
|
197
|
-
|
|
198
|
-
var pointerWidth = _victoryCore.Helpers.evaluateProp(props.pointerWidth, Object.assign({}, props, {
|
|
199
|
-
active: active,
|
|
200
|
-
text: text,
|
|
201
|
-
style: style,
|
|
202
|
-
flyoutStyle: flyoutStyle,
|
|
203
|
-
orientation: orientation
|
|
204
|
-
}));
|
|
205
|
-
|
|
206
|
-
var pointerLength = _victoryCore.Helpers.evaluateProp(props.pointerLength, Object.assign({}, props, {
|
|
207
|
-
active: active,
|
|
208
|
-
text: text,
|
|
209
|
-
style: style,
|
|
210
|
-
flyoutStyle: flyoutStyle,
|
|
211
|
-
orientation: orientation
|
|
212
|
-
}));
|
|
213
|
-
|
|
214
|
-
var labelSize = _victoryCore.TextSize.approximateTextSize(text, style);
|
|
215
|
-
|
|
216
|
-
var _this$getDimensions = this.getDimensions(Object.assign({}, props, {
|
|
217
|
-
style: style,
|
|
218
|
-
flyoutStyle: flyoutStyle,
|
|
219
|
-
active: active,
|
|
220
|
-
text: text,
|
|
221
|
-
orientation: orientation,
|
|
222
|
-
flyoutPadding: flyoutPadding,
|
|
223
|
-
pointerWidth: pointerWidth,
|
|
224
|
-
pointerLength: pointerLength
|
|
225
|
-
}), labelSize),
|
|
226
|
-
flyoutHeight = _this$getDimensions.flyoutHeight,
|
|
227
|
-
flyoutWidth = _this$getDimensions.flyoutWidth;
|
|
228
|
-
|
|
229
|
-
var evaluatedProps = Object.assign({}, props, {
|
|
230
|
-
active: active,
|
|
231
|
-
text: text,
|
|
232
|
-
style: style,
|
|
233
|
-
flyoutStyle: flyoutStyle,
|
|
234
|
-
orientation: orientation,
|
|
235
|
-
flyoutHeight: flyoutHeight,
|
|
236
|
-
flyoutWidth: flyoutWidth,
|
|
237
|
-
flyoutPadding: flyoutPadding,
|
|
238
|
-
pointerWidth: pointerWidth,
|
|
239
|
-
pointerLength: pointerLength
|
|
240
|
-
});
|
|
241
|
-
var offsetX = (0, _isPlainObject2.default)(centerOffset) && (centerOffset === null || centerOffset === void 0 ? void 0 : centerOffset.x) !== undefined ? _victoryCore.Helpers.evaluateProp(centerOffset.x, evaluatedProps) : 0;
|
|
242
|
-
var offsetY = (0, _isPlainObject2.default)(centerOffset) && (centerOffset === null || centerOffset === void 0 ? void 0 : centerOffset.y) !== undefined ? _victoryCore.Helpers.evaluateProp(centerOffset.y, evaluatedProps) : 0;
|
|
243
|
-
return _objectSpread(_objectSpread({}, evaluatedProps), {}, {
|
|
244
|
-
centerOffset: {
|
|
245
|
-
x: offsetX,
|
|
246
|
-
y: offsetY
|
|
247
|
-
},
|
|
248
|
-
dx: dx !== undefined ? _victoryCore.Helpers.evaluateProp(dx, evaluatedProps) : 0,
|
|
249
|
-
dy: dy !== undefined ? _victoryCore.Helpers.evaluateProp(dy, evaluatedProps) : 0,
|
|
250
|
-
cornerRadius: _victoryCore.Helpers.evaluateProp(cornerRadius, evaluatedProps)
|
|
251
|
-
});
|
|
113
|
+
return "bottom";
|
|
114
|
+
}
|
|
115
|
+
getStyles(props) {
|
|
116
|
+
const theme = props.theme || _victoryCore.VictoryTheme.grayscale;
|
|
117
|
+
const defaultLabelStyles = theme && theme.tooltip && theme.tooltip.style ? theme.tooltip.style : {};
|
|
118
|
+
const baseLabelStyle = Array.isArray(props.style) ? props.style.map(s => (0, _defaults2.default)({}, s, defaultLabelStyles)) : (0, _defaults2.default)({}, props.style, defaultLabelStyles);
|
|
119
|
+
const defaultFlyoutStyles = theme && theme.tooltip && theme.tooltip.flyoutStyle ? theme.tooltip.flyoutStyle : {};
|
|
120
|
+
const baseFlyoutStyle = props.flyoutStyle ? (0, _defaults2.default)({}, props.flyoutStyle, defaultFlyoutStyles) : defaultFlyoutStyles;
|
|
121
|
+
const style = Array.isArray(baseLabelStyle) ? baseLabelStyle.map(s => _victoryCore.Helpers.evaluateStyle(s, props)) : _victoryCore.Helpers.evaluateStyle(baseLabelStyle, props);
|
|
122
|
+
const flyoutStyle = _victoryCore.Helpers.evaluateStyle(baseFlyoutStyle, Object.assign({}, props, {
|
|
123
|
+
style
|
|
124
|
+
}));
|
|
125
|
+
return {
|
|
126
|
+
style,
|
|
127
|
+
flyoutStyle
|
|
128
|
+
};
|
|
129
|
+
}
|
|
130
|
+
getEvaluatedProps(props) {
|
|
131
|
+
const {
|
|
132
|
+
cornerRadius,
|
|
133
|
+
centerOffset,
|
|
134
|
+
dx,
|
|
135
|
+
dy
|
|
136
|
+
} = props;
|
|
137
|
+
const active = _victoryCore.Helpers.evaluateProp(props.active, props);
|
|
138
|
+
let text = _victoryCore.Helpers.evaluateProp(props.text, Object.assign({}, props, {
|
|
139
|
+
active
|
|
140
|
+
}));
|
|
141
|
+
if (text === undefined || text === null) {
|
|
142
|
+
text = "";
|
|
252
143
|
}
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
value: function getCalculatedValues(props) {
|
|
256
|
-
var style = props.style,
|
|
257
|
-
text = props.text,
|
|
258
|
-
flyoutStyle = props.flyoutStyle,
|
|
259
|
-
flyoutHeight = props.flyoutHeight,
|
|
260
|
-
flyoutWidth = props.flyoutWidth;
|
|
261
|
-
|
|
262
|
-
var labelSize = _victoryCore.TextSize.approximateTextSize(text, style);
|
|
263
|
-
|
|
264
|
-
var flyoutDimensions = {
|
|
265
|
-
height: flyoutHeight,
|
|
266
|
-
width: flyoutWidth
|
|
267
|
-
};
|
|
268
|
-
var flyoutCenter = this.getFlyoutCenter(props, flyoutDimensions);
|
|
269
|
-
var transform = this.getTransform(props);
|
|
270
|
-
return {
|
|
271
|
-
style: style,
|
|
272
|
-
flyoutStyle: flyoutStyle,
|
|
273
|
-
labelSize: labelSize,
|
|
274
|
-
flyoutDimensions: flyoutDimensions,
|
|
275
|
-
flyoutCenter: flyoutCenter,
|
|
276
|
-
transform: transform
|
|
277
|
-
};
|
|
144
|
+
if (typeof text === "number") {
|
|
145
|
+
text = text.toString();
|
|
278
146
|
}
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
147
|
+
const {
|
|
148
|
+
style,
|
|
149
|
+
flyoutStyle
|
|
150
|
+
} = this.getStyles(Object.assign({}, props, {
|
|
151
|
+
active,
|
|
152
|
+
text
|
|
153
|
+
}));
|
|
154
|
+
const orientation = _victoryCore.Helpers.evaluateProp(props.orientation, Object.assign({}, props, {
|
|
155
|
+
active,
|
|
156
|
+
text,
|
|
157
|
+
style,
|
|
158
|
+
flyoutStyle
|
|
159
|
+
})) || this.getDefaultOrientation(props);
|
|
160
|
+
const padding = _victoryCore.Helpers.evaluateProp(props.flyoutPadding, Object.assign({}, props, {
|
|
161
|
+
active,
|
|
162
|
+
text,
|
|
163
|
+
style,
|
|
164
|
+
flyoutStyle,
|
|
165
|
+
orientation
|
|
166
|
+
})) || this.getLabelPadding(style);
|
|
167
|
+
const flyoutPadding = _victoryCore.Helpers.getPadding({
|
|
168
|
+
padding
|
|
169
|
+
});
|
|
170
|
+
const pointerWidth = _victoryCore.Helpers.evaluateProp(props.pointerWidth, Object.assign({}, props, {
|
|
171
|
+
active,
|
|
172
|
+
text,
|
|
173
|
+
style,
|
|
174
|
+
flyoutStyle,
|
|
175
|
+
orientation
|
|
176
|
+
}));
|
|
177
|
+
const pointerLength = _victoryCore.Helpers.evaluateProp(props.pointerLength, Object.assign({}, props, {
|
|
178
|
+
active,
|
|
179
|
+
text,
|
|
180
|
+
style,
|
|
181
|
+
flyoutStyle,
|
|
182
|
+
orientation
|
|
183
|
+
}));
|
|
184
|
+
const labelSize = _victoryCore.TextSize.approximateTextSize(text, style);
|
|
185
|
+
const {
|
|
186
|
+
flyoutHeight,
|
|
187
|
+
flyoutWidth
|
|
188
|
+
} = this.getDimensions(Object.assign({}, props, {
|
|
189
|
+
style,
|
|
190
|
+
flyoutStyle,
|
|
191
|
+
active,
|
|
192
|
+
text,
|
|
193
|
+
orientation,
|
|
194
|
+
flyoutPadding,
|
|
195
|
+
pointerWidth,
|
|
196
|
+
pointerLength
|
|
197
|
+
}), labelSize);
|
|
198
|
+
const evaluatedProps = Object.assign({}, props, {
|
|
199
|
+
active,
|
|
200
|
+
text,
|
|
201
|
+
style,
|
|
202
|
+
flyoutStyle,
|
|
203
|
+
orientation,
|
|
204
|
+
flyoutHeight,
|
|
205
|
+
flyoutWidth,
|
|
206
|
+
flyoutPadding,
|
|
207
|
+
pointerWidth,
|
|
208
|
+
pointerLength
|
|
209
|
+
});
|
|
210
|
+
const offsetX = (0, _isPlainObject2.default)(centerOffset) && centerOffset?.x !== undefined ? _victoryCore.Helpers.evaluateProp(centerOffset.x, evaluatedProps) : 0;
|
|
211
|
+
const offsetY = (0, _isPlainObject2.default)(centerOffset) && centerOffset?.y !== undefined ? _victoryCore.Helpers.evaluateProp(centerOffset.y, evaluatedProps) : 0;
|
|
212
|
+
return {
|
|
213
|
+
...evaluatedProps,
|
|
214
|
+
centerOffset: {
|
|
215
|
+
x: offsetX,
|
|
216
|
+
y: offsetY
|
|
217
|
+
},
|
|
218
|
+
dx: dx !== undefined ? _victoryCore.Helpers.evaluateProp(dx, evaluatedProps) : 0,
|
|
219
|
+
dy: dy !== undefined ? _victoryCore.Helpers.evaluateProp(dy, evaluatedProps) : 0,
|
|
220
|
+
cornerRadius: _victoryCore.Helpers.evaluateProp(cornerRadius, evaluatedProps)
|
|
221
|
+
};
|
|
222
|
+
}
|
|
223
|
+
getCalculatedValues(props) {
|
|
224
|
+
const {
|
|
225
|
+
style,
|
|
226
|
+
text,
|
|
227
|
+
flyoutStyle,
|
|
228
|
+
flyoutHeight,
|
|
229
|
+
flyoutWidth
|
|
230
|
+
} = props;
|
|
231
|
+
const labelSize = _victoryCore.TextSize.approximateTextSize(text, style);
|
|
232
|
+
const flyoutDimensions = {
|
|
233
|
+
height: flyoutHeight,
|
|
234
|
+
width: flyoutWidth
|
|
235
|
+
};
|
|
236
|
+
const flyoutCenter = this.getFlyoutCenter(props, flyoutDimensions);
|
|
237
|
+
const transform = this.getTransform(props);
|
|
238
|
+
return {
|
|
239
|
+
style,
|
|
240
|
+
flyoutStyle,
|
|
241
|
+
labelSize,
|
|
242
|
+
flyoutDimensions,
|
|
243
|
+
flyoutCenter,
|
|
244
|
+
transform
|
|
245
|
+
};
|
|
246
|
+
}
|
|
247
|
+
getTransform(props) {
|
|
248
|
+
const {
|
|
249
|
+
x,
|
|
250
|
+
y,
|
|
251
|
+
style
|
|
252
|
+
} = props;
|
|
253
|
+
const labelStyle = style || {};
|
|
254
|
+
const angle = labelStyle.angle || props.angle || this.getDefaultAngle(props);
|
|
255
|
+
return angle ? `rotate(${angle} ${x} ${y})` : undefined;
|
|
256
|
+
}
|
|
257
|
+
getDefaultAngle(props) {
|
|
258
|
+
const {
|
|
259
|
+
polar,
|
|
260
|
+
labelPlacement,
|
|
261
|
+
orientation,
|
|
262
|
+
datum
|
|
263
|
+
} = props;
|
|
264
|
+
if (!polar || !labelPlacement || labelPlacement === "vertical") {
|
|
265
|
+
return 0;
|
|
288
266
|
}
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
var degrees = _victoryCore.LabelHelpers.getDegrees(props, datum);
|
|
302
|
-
|
|
303
|
-
var sign = degrees > 90 && degrees < 180 || degrees > 270 ? 1 : -1;
|
|
304
|
-
var labelRotation = labelPlacement === "perpendicular" ? 0 : 90;
|
|
305
|
-
var angle = 0;
|
|
306
|
-
|
|
307
|
-
if (degrees === 0 || degrees === 180) {
|
|
308
|
-
angle = orientation === "top" && degrees === 180 ? 270 : 90;
|
|
309
|
-
} else if (degrees > 0 && degrees < 180) {
|
|
310
|
-
angle = 90 - degrees;
|
|
311
|
-
} else if (degrees > 180 && degrees < 360) {
|
|
312
|
-
angle = 270 - degrees;
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
return angle + sign * labelRotation;
|
|
267
|
+
const degrees = _victoryCore.LabelHelpers.getDegrees(props, datum);
|
|
268
|
+
const sign = degrees > 90 && degrees < 180 || degrees > 270 ? 1 : -1;
|
|
269
|
+
const labelRotation = labelPlacement === "perpendicular" ? 0 : 90;
|
|
270
|
+
let angle = 0;
|
|
271
|
+
if (degrees === 0 || degrees === 180) {
|
|
272
|
+
angle = orientation === "top" && degrees === 180 ? 270 : 90;
|
|
273
|
+
} else if (degrees > 0 && degrees < 180) {
|
|
274
|
+
angle = 90 - degrees;
|
|
275
|
+
} else if (degrees > 180 && degrees < 360) {
|
|
276
|
+
angle = 270 - degrees;
|
|
316
277
|
}
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
278
|
+
return angle + sign * labelRotation;
|
|
279
|
+
}
|
|
280
|
+
constrainTooltip(center, props, dimensions) {
|
|
281
|
+
const {
|
|
282
|
+
x,
|
|
283
|
+
y
|
|
284
|
+
} = center;
|
|
285
|
+
const {
|
|
286
|
+
width,
|
|
287
|
+
height
|
|
288
|
+
} = dimensions;
|
|
289
|
+
const extent = {
|
|
290
|
+
x: [0, props.width],
|
|
291
|
+
y: [0, props.height]
|
|
292
|
+
};
|
|
293
|
+
const flyoutExtent = {
|
|
294
|
+
x: [x - width / 2, x + width / 2],
|
|
295
|
+
y: [y - height / 2, y + height / 2]
|
|
296
|
+
};
|
|
297
|
+
const adjustments = {
|
|
298
|
+
x: [flyoutExtent.x[0] < extent.x[0] ? extent.x[0] - flyoutExtent.x[0] : 0, flyoutExtent.x[1] > extent.x[1] ? flyoutExtent.x[1] - extent.x[1] : 0],
|
|
299
|
+
y: [flyoutExtent.y[0] < extent.y[0] ? extent.y[0] - flyoutExtent.y[0] : 0, flyoutExtent.y[1] > extent.y[1] ? flyoutExtent.y[1] - extent.y[1] : 0]
|
|
300
|
+
};
|
|
301
|
+
return {
|
|
302
|
+
x: Math.round(x + adjustments.x[0] - adjustments.x[1]),
|
|
303
|
+
y: Math.round(y + adjustments.y[0] - adjustments.y[1])
|
|
304
|
+
};
|
|
305
|
+
}
|
|
341
306
|
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
307
|
+
// eslint-disable-next-line complexity
|
|
308
|
+
getFlyoutCenter(props, dimensions) {
|
|
309
|
+
const {
|
|
310
|
+
x,
|
|
311
|
+
y,
|
|
312
|
+
dx,
|
|
313
|
+
dy,
|
|
314
|
+
pointerLength,
|
|
315
|
+
orientation,
|
|
316
|
+
constrainToVisibleArea,
|
|
317
|
+
centerOffset
|
|
318
|
+
} = props;
|
|
319
|
+
const {
|
|
320
|
+
height,
|
|
321
|
+
width
|
|
322
|
+
} = dimensions;
|
|
323
|
+
const xSign = orientation === "left" ? -1 : 1;
|
|
324
|
+
const ySign = orientation === "bottom" ? -1 : 1;
|
|
325
|
+
const flyoutCenter = {
|
|
326
|
+
x: orientation === "left" || orientation === "right" ? x + xSign * (pointerLength + width / 2 + xSign * dx) : x + dx,
|
|
327
|
+
y: orientation === "top" || orientation === "bottom" ? y - ySign * (pointerLength + height / 2 - ySign * dy) : y + dy
|
|
328
|
+
};
|
|
329
|
+
const center = {
|
|
330
|
+
x: (0, _isPlainObject2.default)(props.center) && props.center.x !== undefined ? props.center.x : flyoutCenter.x,
|
|
331
|
+
y: (0, _isPlainObject2.default)(props.center) && props.center.y !== undefined ? props.center.y : flyoutCenter.y
|
|
332
|
+
};
|
|
333
|
+
const centerWithOffset = {
|
|
334
|
+
x: center.x + centerOffset.x,
|
|
335
|
+
y: center.y + centerOffset.y
|
|
336
|
+
};
|
|
337
|
+
return constrainToVisibleArea ? this.constrainTooltip(centerWithOffset, props, dimensions) : centerWithOffset;
|
|
338
|
+
}
|
|
339
|
+
getLabelPadding(style) {
|
|
340
|
+
if (!style) {
|
|
341
|
+
return 0;
|
|
370
342
|
}
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
343
|
+
const paddings = Array.isArray(style) ? style.map(s => s.padding) : [style.padding];
|
|
344
|
+
return Math.max(...paddings, 0);
|
|
345
|
+
}
|
|
346
|
+
getDimensions(props, labelSize) {
|
|
347
|
+
const {
|
|
348
|
+
orientation,
|
|
349
|
+
pointerLength,
|
|
350
|
+
pointerWidth,
|
|
351
|
+
flyoutHeight,
|
|
352
|
+
flyoutWidth,
|
|
353
|
+
flyoutPadding
|
|
354
|
+
} = props;
|
|
355
|
+
const cornerRadius = _victoryCore.Helpers.evaluateProp(props.cornerRadius, props);
|
|
356
|
+
const getHeight = () => {
|
|
357
|
+
const calculatedHeight = labelSize.height + flyoutPadding.top + flyoutPadding.bottom;
|
|
358
|
+
const minHeight = orientation === "top" || orientation === "bottom" ? 2 * cornerRadius : 2 * cornerRadius + pointerWidth;
|
|
359
|
+
return Math.max(minHeight, calculatedHeight);
|
|
360
|
+
};
|
|
361
|
+
const getWidth = () => {
|
|
362
|
+
const calculatedWidth = labelSize.width + flyoutPadding.left + flyoutPadding.right;
|
|
363
|
+
const minWidth = orientation === "left" || orientation === "right" ? 2 * cornerRadius + pointerLength : 2 * cornerRadius;
|
|
364
|
+
return Math.max(minWidth, calculatedWidth);
|
|
365
|
+
};
|
|
366
|
+
return {
|
|
367
|
+
flyoutHeight: flyoutHeight ? _victoryCore.Helpers.evaluateProp(flyoutHeight, props) : getHeight(),
|
|
368
|
+
flyoutWidth: flyoutWidth ? _victoryCore.Helpers.evaluateProp(flyoutWidth, props) : getWidth()
|
|
369
|
+
};
|
|
370
|
+
}
|
|
371
|
+
getLabelProps(props, calculatedValues) {
|
|
372
|
+
const {
|
|
373
|
+
flyoutCenter,
|
|
374
|
+
style,
|
|
375
|
+
labelSize,
|
|
376
|
+
dy = 0,
|
|
377
|
+
dx = 0
|
|
378
|
+
} = calculatedValues;
|
|
379
|
+
const {
|
|
380
|
+
text,
|
|
381
|
+
datum,
|
|
382
|
+
activePoints,
|
|
383
|
+
labelComponent,
|
|
384
|
+
index,
|
|
385
|
+
flyoutPadding
|
|
386
|
+
} = props;
|
|
387
|
+
const textAnchor = (Array.isArray(style) && style.length ? style[0].textAnchor : style.textAnchor) || "middle";
|
|
388
|
+
const getLabelX = () => {
|
|
389
|
+
if (!textAnchor || textAnchor === "middle") {
|
|
390
|
+
return flyoutCenter.x;
|
|
376
391
|
}
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
}
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
angle: style.angle
|
|
452
|
-
});
|
|
453
|
-
}
|
|
454
|
-
}, {
|
|
455
|
-
key: "getPointerOrientation",
|
|
456
|
-
value: function getPointerOrientation(point, center, flyoutDimensions) {
|
|
457
|
-
var edges = {
|
|
458
|
-
bottom: center.y + flyoutDimensions.height / 2,
|
|
459
|
-
top: center.y - flyoutDimensions.height / 2,
|
|
460
|
-
left: center.x - flyoutDimensions.width / 2,
|
|
461
|
-
right: center.x + flyoutDimensions.width / 2
|
|
462
|
-
};
|
|
463
|
-
var gaps = [{
|
|
464
|
-
side: "top",
|
|
465
|
-
val: edges.top > point.y ? edges.top - point.y : -1
|
|
466
|
-
}, {
|
|
467
|
-
side: "bottom",
|
|
468
|
-
val: edges.bottom < point.y ? point.y - edges.bottom : -1
|
|
469
|
-
}, {
|
|
470
|
-
side: "right",
|
|
471
|
-
val: edges.right < point.x ? point.x - edges.right : -1
|
|
472
|
-
}, {
|
|
473
|
-
side: "left",
|
|
474
|
-
val: edges.left > point.x ? edges.left - point.x : -1
|
|
475
|
-
}];
|
|
476
|
-
return (0, _orderBy2.default)(gaps, "val", "desc")[0].side;
|
|
477
|
-
}
|
|
478
|
-
}, {
|
|
479
|
-
key: "getFlyoutProps",
|
|
480
|
-
value: function getFlyoutProps(props, calculatedValues) {
|
|
481
|
-
var flyoutDimensions = calculatedValues.flyoutDimensions,
|
|
482
|
-
flyoutStyle = calculatedValues.flyoutStyle,
|
|
483
|
-
flyoutCenter = calculatedValues.flyoutCenter;
|
|
484
|
-
var x = props.x,
|
|
485
|
-
y = props.y,
|
|
486
|
-
dx = props.dx,
|
|
487
|
-
dy = props.dy,
|
|
488
|
-
datum = props.datum,
|
|
489
|
-
activePoints = props.activePoints,
|
|
490
|
-
index = props.index,
|
|
491
|
-
pointerLength = props.pointerLength,
|
|
492
|
-
pointerWidth = props.pointerWidth,
|
|
493
|
-
cornerRadius = props.cornerRadius,
|
|
494
|
-
events = props.events,
|
|
495
|
-
flyoutComponent = props.flyoutComponent;
|
|
496
|
-
|
|
497
|
-
var pointerOrientation = _victoryCore.Helpers.evaluateProp(props.pointerOrientation, props);
|
|
498
|
-
|
|
499
|
-
return (0, _defaults2.default)({}, flyoutComponent.props, {
|
|
392
|
+
const sign = textAnchor === "end" ? -1 : 1;
|
|
393
|
+
return flyoutCenter.x - sign * (labelSize.width / 2);
|
|
394
|
+
};
|
|
395
|
+
return (0, _defaults2.default)({}, labelComponent.props, {
|
|
396
|
+
key: `${this.id}-label-${index}`,
|
|
397
|
+
text,
|
|
398
|
+
datum,
|
|
399
|
+
activePoints,
|
|
400
|
+
textAnchor,
|
|
401
|
+
dy,
|
|
402
|
+
dx,
|
|
403
|
+
style,
|
|
404
|
+
x: getLabelX() + (flyoutPadding.left - flyoutPadding.right) / 2,
|
|
405
|
+
y: flyoutCenter.y + (flyoutPadding.top - flyoutPadding.bottom) / 2,
|
|
406
|
+
verticalAnchor: "middle",
|
|
407
|
+
angle: style.angle
|
|
408
|
+
});
|
|
409
|
+
}
|
|
410
|
+
getPointerOrientation(point, center, flyoutDimensions) {
|
|
411
|
+
const edges = {
|
|
412
|
+
bottom: center.y + flyoutDimensions.height / 2,
|
|
413
|
+
top: center.y - flyoutDimensions.height / 2,
|
|
414
|
+
left: center.x - flyoutDimensions.width / 2,
|
|
415
|
+
right: center.x + flyoutDimensions.width / 2
|
|
416
|
+
};
|
|
417
|
+
const gaps = [{
|
|
418
|
+
side: "top",
|
|
419
|
+
val: edges.top > point.y ? edges.top - point.y : -1
|
|
420
|
+
}, {
|
|
421
|
+
side: "bottom",
|
|
422
|
+
val: edges.bottom < point.y ? point.y - edges.bottom : -1
|
|
423
|
+
}, {
|
|
424
|
+
side: "right",
|
|
425
|
+
val: edges.right < point.x ? point.x - edges.right : -1
|
|
426
|
+
}, {
|
|
427
|
+
side: "left",
|
|
428
|
+
val: edges.left > point.x ? edges.left - point.x : -1
|
|
429
|
+
}];
|
|
430
|
+
return (0, _orderBy2.default)(gaps, "val", "desc")[0].side;
|
|
431
|
+
}
|
|
432
|
+
getFlyoutProps(props, calculatedValues) {
|
|
433
|
+
const {
|
|
434
|
+
flyoutDimensions,
|
|
435
|
+
flyoutStyle,
|
|
436
|
+
flyoutCenter
|
|
437
|
+
} = calculatedValues;
|
|
438
|
+
const {
|
|
439
|
+
x,
|
|
440
|
+
y,
|
|
441
|
+
dx,
|
|
442
|
+
dy,
|
|
443
|
+
datum,
|
|
444
|
+
activePoints,
|
|
445
|
+
index,
|
|
446
|
+
pointerLength,
|
|
447
|
+
pointerWidth,
|
|
448
|
+
cornerRadius,
|
|
449
|
+
events,
|
|
450
|
+
flyoutComponent
|
|
451
|
+
} = props;
|
|
452
|
+
const pointerOrientation = _victoryCore.Helpers.evaluateProp(props.pointerOrientation, props);
|
|
453
|
+
return (0, _defaults2.default)({}, flyoutComponent.props, {
|
|
454
|
+
x,
|
|
455
|
+
y,
|
|
456
|
+
dx,
|
|
457
|
+
dy,
|
|
458
|
+
datum,
|
|
459
|
+
activePoints,
|
|
460
|
+
index,
|
|
461
|
+
pointerLength,
|
|
462
|
+
pointerWidth,
|
|
463
|
+
cornerRadius,
|
|
464
|
+
events,
|
|
465
|
+
orientation: pointerOrientation || this.getPointerOrientation({
|
|
500
466
|
x: x,
|
|
501
|
-
y: y
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
events: events,
|
|
511
|
-
orientation: pointerOrientation || this.getPointerOrientation({
|
|
512
|
-
x: x,
|
|
513
|
-
y: y
|
|
514
|
-
}, flyoutCenter, flyoutDimensions),
|
|
515
|
-
key: "".concat(this.id, "-tooltip-").concat(index),
|
|
516
|
-
width: flyoutDimensions.width,
|
|
517
|
-
height: flyoutDimensions.height,
|
|
518
|
-
style: flyoutStyle,
|
|
519
|
-
center: flyoutCenter
|
|
520
|
-
});
|
|
521
|
-
} // Overridden in victory-core-native
|
|
522
|
-
|
|
523
|
-
}, {
|
|
524
|
-
key: "renderTooltip",
|
|
525
|
-
value: function renderTooltip(props) {
|
|
526
|
-
var active = _victoryCore.Helpers.evaluateProp(props.active, props);
|
|
527
|
-
|
|
528
|
-
var renderInPortal = props.renderInPortal;
|
|
529
|
-
|
|
530
|
-
if (!active) {
|
|
531
|
-
return renderInPortal ? /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryPortal, null) : null;
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
var evaluatedProps = this.getEvaluatedProps(props);
|
|
535
|
-
var flyoutComponent = evaluatedProps.flyoutComponent,
|
|
536
|
-
labelComponent = evaluatedProps.labelComponent,
|
|
537
|
-
groupComponent = evaluatedProps.groupComponent;
|
|
538
|
-
var calculatedValues = this.getCalculatedValues(evaluatedProps);
|
|
539
|
-
var children = [/*#__PURE__*/_react.default.cloneElement(flyoutComponent, this.getFlyoutProps(evaluatedProps, calculatedValues)), /*#__PURE__*/_react.default.cloneElement(labelComponent, this.getLabelProps(evaluatedProps, calculatedValues))];
|
|
540
|
-
|
|
541
|
-
var tooltip = /*#__PURE__*/_react.default.cloneElement(groupComponent, {
|
|
542
|
-
role: "presentation",
|
|
543
|
-
transform: calculatedValues.transform
|
|
544
|
-
}, children);
|
|
545
|
-
|
|
546
|
-
return renderInPortal ? /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryPortal, null, tooltip) : tooltip;
|
|
547
|
-
}
|
|
548
|
-
}, {
|
|
549
|
-
key: "render",
|
|
550
|
-
value: function render() {
|
|
551
|
-
var props = _victoryCore.Helpers.modifyProps(this.props, fallbackProps, "tooltip");
|
|
552
|
-
|
|
553
|
-
return this.renderTooltip(props);
|
|
554
|
-
}
|
|
555
|
-
}]);
|
|
556
|
-
|
|
557
|
-
return VictoryTooltip;
|
|
558
|
-
}(_react.default.Component);
|
|
559
|
-
|
|
560
|
-
exports.VictoryTooltip = VictoryTooltip;
|
|
561
|
-
VictoryTooltip.displayName = "VictoryTooltip";
|
|
562
|
-
VictoryTooltip.role = "tooltip";
|
|
563
|
-
VictoryTooltip.defaultProps = {
|
|
564
|
-
active: false,
|
|
565
|
-
renderInPortal: true,
|
|
566
|
-
labelComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryLabel, null),
|
|
567
|
-
flyoutComponent: /*#__PURE__*/_react.default.createElement(_flyout.Flyout, null),
|
|
568
|
-
groupComponent: /*#__PURE__*/_react.default.createElement("g", null)
|
|
569
|
-
};
|
|
467
|
+
y: y
|
|
468
|
+
}, flyoutCenter, flyoutDimensions),
|
|
469
|
+
key: `${this.id}-tooltip-${index}`,
|
|
470
|
+
width: flyoutDimensions.width,
|
|
471
|
+
height: flyoutDimensions.height,
|
|
472
|
+
style: flyoutStyle,
|
|
473
|
+
center: flyoutCenter
|
|
474
|
+
});
|
|
475
|
+
}
|
|
570
476
|
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
}, {
|
|
580
|
-
target: "data",
|
|
581
|
-
mutation: function () {
|
|
582
|
-
return {
|
|
583
|
-
active: true
|
|
584
|
-
};
|
|
477
|
+
// Overridden in victory-core-native
|
|
478
|
+
renderTooltip(props) {
|
|
479
|
+
const active = _victoryCore.Helpers.evaluateProp(props.active, props);
|
|
480
|
+
const {
|
|
481
|
+
renderInPortal
|
|
482
|
+
} = props;
|
|
483
|
+
if (!active) {
|
|
484
|
+
return renderInPortal ? /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryPortal, null) : null;
|
|
585
485
|
}
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
};
|
|
607
|
-
}
|
|
608
|
-
}] : [{
|
|
609
|
-
target: "labels",
|
|
610
|
-
mutation: function () {
|
|
611
|
-
return {
|
|
612
|
-
active: undefined
|
|
613
|
-
};
|
|
614
|
-
}
|
|
615
|
-
}];
|
|
616
|
-
return [{
|
|
617
|
-
target: "data",
|
|
618
|
-
eventHandlers: {
|
|
619
|
-
onMouseOver: function () {
|
|
620
|
-
return activate;
|
|
621
|
-
},
|
|
622
|
-
onFocus: function () {
|
|
623
|
-
return activate;
|
|
624
|
-
},
|
|
625
|
-
onTouchStart: function () {
|
|
626
|
-
return activate;
|
|
627
|
-
},
|
|
628
|
-
onMouseOut: function () {
|
|
629
|
-
return deactivate;
|
|
630
|
-
},
|
|
631
|
-
onBlur: function () {
|
|
632
|
-
return deactivate;
|
|
633
|
-
},
|
|
634
|
-
onTouchEnd: function () {
|
|
635
|
-
return deactivate;
|
|
636
|
-
}
|
|
637
|
-
}
|
|
638
|
-
}];
|
|
639
|
-
};
|
|
486
|
+
const evaluatedProps = this.getEvaluatedProps(props);
|
|
487
|
+
const {
|
|
488
|
+
flyoutComponent,
|
|
489
|
+
labelComponent,
|
|
490
|
+
groupComponent
|
|
491
|
+
} = evaluatedProps;
|
|
492
|
+
const calculatedValues = this.getCalculatedValues(evaluatedProps);
|
|
493
|
+
const children = [/*#__PURE__*/_react.default.cloneElement(flyoutComponent, this.getFlyoutProps(evaluatedProps, calculatedValues)), /*#__PURE__*/_react.default.cloneElement(labelComponent, this.getLabelProps(evaluatedProps, calculatedValues))];
|
|
494
|
+
const tooltip = /*#__PURE__*/_react.default.cloneElement(groupComponent, {
|
|
495
|
+
role: "presentation",
|
|
496
|
+
transform: calculatedValues.transform
|
|
497
|
+
}, children);
|
|
498
|
+
return renderInPortal ? /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryPortal, null, tooltip) : tooltip;
|
|
499
|
+
}
|
|
500
|
+
render() {
|
|
501
|
+
const props = _victoryCore.Helpers.modifyProps(this.props, fallbackProps, "tooltip");
|
|
502
|
+
return this.renderTooltip(props);
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
exports.VictoryTooltip = VictoryTooltip;
|