victory-box-plot 36.9.1 → 36.9.2-next.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 +13 -0
- package/dist/victory-box-plot.js +3955 -5337
- package/dist/victory-box-plot.min.js +1 -1
- package/es/helper-methods.d.ts +3 -3
- package/es/helper-methods.js +268 -322
- package/es/index.d.ts +1 -1
- package/es/victory-box-plot.d.ts +139 -139
- package/es/victory-box-plot.js +87 -156
- package/lib/helper-methods.d.ts +3 -3
- package/lib/helper-methods.js +268 -339
- package/lib/index.d.ts +1 -1
- package/lib/index.js +0 -2
- package/lib/victory-box-plot.d.ts +139 -139
- package/lib/victory-box-plot.js +87 -161
- package/package.json +9 -13
- package/src/helper-methods.tsx +3 -3
- package/src/victory-box-plot.tsx +8 -8
package/lib/helper-methods.js
CHANGED
|
@@ -4,65 +4,38 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getDomain = exports.getData = exports.getBaseProps = void 0;
|
|
7
|
-
|
|
8
|
-
var _isNil2 = _interopRequireDefault(require("lodash/isNil"));
|
|
9
|
-
|
|
10
|
-
var _isNaN2 = _interopRequireDefault(require("lodash/isNaN"));
|
|
11
|
-
|
|
12
7
|
var _keys2 = _interopRequireDefault(require("lodash/keys"));
|
|
13
|
-
|
|
14
8
|
var _groupBy2 = _interopRequireDefault(require("lodash/groupBy"));
|
|
15
|
-
|
|
16
9
|
var _uniq2 = _interopRequireDefault(require("lodash/uniq"));
|
|
17
|
-
|
|
18
10
|
var _defaults2 = _interopRequireDefault(require("lodash/defaults"));
|
|
19
|
-
|
|
20
11
|
var _orderBy2 = _interopRequireDefault(require("lodash/orderBy"));
|
|
21
|
-
|
|
22
12
|
var _victoryCore = require("victory-core");
|
|
23
|
-
|
|
24
13
|
var _d3Array = require("victory-vendor/d3-array");
|
|
25
|
-
|
|
26
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
var TYPES = ["max", "min", "median", "q1", "q3"];
|
|
31
|
-
|
|
32
|
-
var checkProcessedData = function (data) {
|
|
15
|
+
const TYPES = ["max", "min", "median", "q1", "q3"];
|
|
16
|
+
const checkProcessedData = data => {
|
|
33
17
|
/* check if the data is pre-processed. start by checking that it has
|
|
34
18
|
all required quartile attributes. */
|
|
35
|
-
|
|
36
|
-
return TYPES.every(
|
|
37
|
-
return typeof datum["_".concat(val)] !== "undefined";
|
|
38
|
-
});
|
|
19
|
+
const hasQuartileAttributes = data.every(datum => {
|
|
20
|
+
return TYPES.every(val => typeof datum[`_${val}`] !== "undefined");
|
|
39
21
|
});
|
|
40
|
-
|
|
41
22
|
if (hasQuartileAttributes) {
|
|
42
23
|
// check that the independent variable is distinct
|
|
43
|
-
|
|
44
|
-
return d._x;
|
|
45
|
-
});
|
|
46
|
-
|
|
24
|
+
const values = data.map(d => d._x);
|
|
47
25
|
if (!(0, _uniq2.default)(values).length === values.length) {
|
|
48
|
-
throw new Error(
|
|
26
|
+
throw new Error(`
|
|
27
|
+
data prop may only take an array of objects with a unique
|
|
28
|
+
independent variable. Make sure your x values are distinct.
|
|
29
|
+
`);
|
|
49
30
|
}
|
|
50
|
-
|
|
51
31
|
return true;
|
|
52
32
|
}
|
|
53
|
-
|
|
54
33
|
return false;
|
|
55
34
|
};
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
var getSummaryStatistics = function (data) {
|
|
62
|
-
var dependentVars = data.map(function (datum) {
|
|
63
|
-
return datum._y;
|
|
64
|
-
});
|
|
65
|
-
var quartiles = {
|
|
35
|
+
const nanToNull = val => Number.isNaN(val) ? null : val;
|
|
36
|
+
const getSummaryStatistics = data => {
|
|
37
|
+
const dependentVars = data.map(datum => datum._y);
|
|
38
|
+
const quartiles = {
|
|
66
39
|
_q1: nanToNull((0, _d3Array.quantile)(dependentVars, 0.25)),
|
|
67
40
|
// eslint-disable-line no-magic-numbers
|
|
68
41
|
_q3: nanToNull((0, _d3Array.quantile)(dependentVars, 0.75)),
|
|
@@ -75,41 +48,36 @@ var getSummaryStatistics = function (data) {
|
|
|
75
48
|
_y: data[0]._y
|
|
76
49
|
});
|
|
77
50
|
};
|
|
78
|
-
|
|
79
|
-
var processData = function (data) {
|
|
51
|
+
const processData = data => {
|
|
80
52
|
/* check if the data is coming in a pre-processed form,
|
|
81
53
|
i.e. { x || y, min, max, q1, q3, median }. if not, process it. */
|
|
82
|
-
|
|
83
|
-
|
|
54
|
+
const isProcessed = checkProcessedData(data);
|
|
84
55
|
if (!isProcessed) {
|
|
85
56
|
// check if the data is coming with x or y values as an array
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
return Array.isArray(datum._y);
|
|
91
|
-
});
|
|
92
|
-
var sortKey = "_y";
|
|
93
|
-
var groupKey = "_x";
|
|
94
|
-
|
|
57
|
+
const arrayX = data.every(datum => Array.isArray(datum._x));
|
|
58
|
+
const arrayY = data.every(datum => Array.isArray(datum._y));
|
|
59
|
+
const sortKey = "_y";
|
|
60
|
+
const groupKey = "_x";
|
|
95
61
|
if (arrayX) {
|
|
96
|
-
throw new Error(
|
|
62
|
+
throw new Error(`
|
|
63
|
+
data should not be given as in array for x
|
|
64
|
+
`);
|
|
97
65
|
} else if (arrayY) {
|
|
98
66
|
/* generate summary statistics for each datum. to do this, flatten
|
|
99
67
|
the depedentVarArray and process each datum separately */
|
|
100
|
-
return data.map(
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
});
|
|
104
|
-
|
|
68
|
+
return data.map(datum => {
|
|
69
|
+
const dataArray = datum[sortKey].map(d => Object.assign({}, datum, {
|
|
70
|
+
[sortKey]: d
|
|
71
|
+
}));
|
|
72
|
+
const sortedData = (0, _orderBy2.default)(dataArray, sortKey);
|
|
105
73
|
return getSummaryStatistics(sortedData);
|
|
106
74
|
});
|
|
107
75
|
} else {
|
|
108
76
|
/* Group data by independent variable and generate summary statistics for each group */
|
|
109
|
-
|
|
110
|
-
return (0, _keys2.default)(groupedData).map(
|
|
111
|
-
|
|
112
|
-
|
|
77
|
+
const groupedData = (0, _groupBy2.default)(data, groupKey);
|
|
78
|
+
return (0, _keys2.default)(groupedData).map(key => {
|
|
79
|
+
const datum = groupedData[key];
|
|
80
|
+
const sortedData = (0, _orderBy2.default)(datum, sortKey);
|
|
113
81
|
return getSummaryStatistics(sortedData);
|
|
114
82
|
});
|
|
115
83
|
}
|
|
@@ -117,92 +85,71 @@ var processData = function (data) {
|
|
|
117
85
|
return data;
|
|
118
86
|
}
|
|
119
87
|
};
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
var formattedData = _victoryCore.Data.formatData(props.data, props, accessorTypes);
|
|
125
|
-
|
|
88
|
+
const getData = props => {
|
|
89
|
+
const accessorTypes = TYPES.concat("x", "y");
|
|
90
|
+
const formattedData = _victoryCore.Data.formatData(props.data, props, accessorTypes);
|
|
126
91
|
return formattedData.length ? processData(formattedData) : [];
|
|
127
92
|
};
|
|
128
|
-
|
|
129
93
|
exports.getData = getData;
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
var minData = minDomain !== undefined ? minDomain : dataset.reduce(function (memo, datum) {
|
|
137
|
-
return memo < datum["_".concat(axis)] ? memo : datum["_".concat(axis)];
|
|
94
|
+
const reduceDataset = (dataset, props, axis) => {
|
|
95
|
+
const minDomain = _victoryCore.Domain.getMinFromProps(props, axis);
|
|
96
|
+
const maxDomain = _victoryCore.Domain.getMaxFromProps(props, axis);
|
|
97
|
+
const minData = minDomain !== undefined ? minDomain : dataset.reduce((memo, datum) => {
|
|
98
|
+
return memo < datum[`_${axis}`] ? memo : datum[`_${axis}`];
|
|
138
99
|
}, Infinity);
|
|
139
|
-
|
|
140
|
-
return memo > datum[
|
|
100
|
+
const maxData = maxDomain !== undefined ? maxDomain : dataset.reduce((memo, datum) => {
|
|
101
|
+
return memo > datum[`_${axis}`] ? memo : datum[`_${axis}`];
|
|
141
102
|
}, -Infinity);
|
|
142
103
|
return _victoryCore.Domain.getDomainFromMinMax(minData, maxData);
|
|
143
104
|
};
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
var maxDomain = _victoryCore.Domain.getMaxFromProps(props, axis);
|
|
149
|
-
|
|
150
|
-
var minData = minDomain !== undefined ? minDomain : dataset.reduce(function (memo, datum) {
|
|
105
|
+
const getDomainFromMinMaxValues = (dataset, props, axis) => {
|
|
106
|
+
const minDomain = _victoryCore.Domain.getMinFromProps(props, axis);
|
|
107
|
+
const maxDomain = _victoryCore.Domain.getMaxFromProps(props, axis);
|
|
108
|
+
const minData = minDomain !== undefined ? minDomain : dataset.reduce((memo, datum) => {
|
|
151
109
|
return memo < datum._min ? memo : datum._min;
|
|
152
110
|
}, Infinity);
|
|
153
|
-
|
|
111
|
+
const maxData = maxDomain !== undefined ? maxDomain : dataset.reduce((memo, datum) => {
|
|
154
112
|
return memo > datum._max ? memo : datum._max;
|
|
155
113
|
}, -Infinity);
|
|
156
114
|
return _victoryCore.Domain.getDomainFromMinMax(minData, maxData);
|
|
157
115
|
};
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
var maxDomain = _victoryCore.Domain.getMaxFromProps(props, axis);
|
|
163
|
-
|
|
164
|
-
var dataset = getData(props);
|
|
165
|
-
|
|
116
|
+
const getDomainFromData = (props, axis) => {
|
|
117
|
+
const minDomain = _victoryCore.Domain.getMinFromProps(props, axis);
|
|
118
|
+
const maxDomain = _victoryCore.Domain.getMaxFromProps(props, axis);
|
|
119
|
+
const dataset = getData(props);
|
|
166
120
|
if (dataset.length < 1) {
|
|
167
121
|
return minDomain !== undefined && maxDomain !== undefined ? _victoryCore.Domain.getDomainFromMinMax(minDomain, maxDomain) : undefined;
|
|
168
122
|
}
|
|
169
|
-
|
|
170
123
|
return axis === "y" ? getDomainFromMinMaxValues(dataset, props, axis) : reduceDataset(dataset, props, axis);
|
|
171
124
|
};
|
|
172
|
-
|
|
173
|
-
var getDomain = function (props, axis) {
|
|
125
|
+
const getDomain = (props, axis) => {
|
|
174
126
|
return _victoryCore.Domain.createDomainFunction(getDomainFromData)(props, axis);
|
|
175
127
|
};
|
|
176
|
-
|
|
177
128
|
exports.getDomain = getDomain;
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
var baseStyle = styleObject["".concat(namespace, "Labels")] || styleObject.labels;
|
|
182
|
-
|
|
129
|
+
const getLabelStyle = (props, styleObject, namespace) => {
|
|
130
|
+
const component = props[`${namespace}LabelComponent`] || props.labelComponent;
|
|
131
|
+
const baseStyle = styleObject[`${namespace}Labels`] || styleObject.labels;
|
|
183
132
|
if (!_victoryCore.Helpers.isTooltip(component)) {
|
|
184
133
|
return baseStyle;
|
|
185
134
|
}
|
|
186
|
-
|
|
187
|
-
var tooltipTheme = props.theme && props.theme.tooltip || {};
|
|
135
|
+
const tooltipTheme = props.theme && props.theme.tooltip || {};
|
|
188
136
|
return (0, _defaults2.default)({}, tooltipTheme.style, baseStyle);
|
|
189
137
|
};
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
138
|
+
const getStyles = function (props, styleObject) {
|
|
139
|
+
if (styleObject === void 0) {
|
|
140
|
+
styleObject = {};
|
|
141
|
+
}
|
|
194
142
|
if (props.disableInlineStyles) {
|
|
195
143
|
return {};
|
|
196
144
|
}
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
var parentStyles = {
|
|
145
|
+
const style = props.style || {};
|
|
146
|
+
const parentStyles = {
|
|
200
147
|
height: "100%",
|
|
201
148
|
width: "100%"
|
|
202
149
|
};
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
150
|
+
const labelStyles = (0, _defaults2.default)({}, style.labels, getLabelStyle(props, styleObject));
|
|
151
|
+
const boxStyles = (0, _defaults2.default)({}, style.boxes, styleObject.boxes);
|
|
152
|
+
const whiskerStyles = (0, _defaults2.default)({}, style.whiskers, styleObject.whiskers);
|
|
206
153
|
return {
|
|
207
154
|
boxes: boxStyles,
|
|
208
155
|
labels: labelStyles,
|
|
@@ -220,63 +167,67 @@ var getStyles = function (props) {
|
|
|
220
167
|
whiskers: whiskerStyles
|
|
221
168
|
};
|
|
222
169
|
};
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
170
|
+
const getCalculatedValues = props => {
|
|
171
|
+
const {
|
|
172
|
+
theme,
|
|
173
|
+
horizontal
|
|
174
|
+
} = props;
|
|
175
|
+
const data = getData(props);
|
|
176
|
+
const range = {
|
|
229
177
|
x: _victoryCore.Helpers.getRange(props, "x"),
|
|
230
178
|
y: _victoryCore.Helpers.getRange(props, "y")
|
|
231
179
|
};
|
|
232
|
-
|
|
180
|
+
const domain = {
|
|
233
181
|
x: getDomain(props, "x"),
|
|
234
182
|
y: getDomain(props, "y")
|
|
235
183
|
};
|
|
236
|
-
|
|
184
|
+
const scale = {
|
|
237
185
|
x: _victoryCore.Scale.getBaseScale(props, "x").domain(domain.x).range(props.horizontal ? range.y : range.x),
|
|
238
186
|
y: _victoryCore.Scale.getBaseScale(props, "y").domain(domain.y).range(props.horizontal ? range.x : range.y)
|
|
239
187
|
};
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
188
|
+
const defaultStyles = theme && theme.boxplot && theme.boxplot.style ? theme.boxplot.style : {};
|
|
189
|
+
const style = getStyles(props, defaultStyles);
|
|
190
|
+
const defaultOrientation = props.horizontal ? "top" : "right";
|
|
191
|
+
const labelOrientation = props.labelOrientation || defaultOrientation;
|
|
192
|
+
const boxWidth = props.boxWidth || 1;
|
|
245
193
|
return {
|
|
246
|
-
data
|
|
247
|
-
horizontal
|
|
248
|
-
domain
|
|
249
|
-
scale
|
|
250
|
-
style
|
|
251
|
-
labelOrientation
|
|
252
|
-
boxWidth
|
|
194
|
+
data,
|
|
195
|
+
horizontal,
|
|
196
|
+
domain,
|
|
197
|
+
scale,
|
|
198
|
+
style,
|
|
199
|
+
labelOrientation,
|
|
200
|
+
boxWidth
|
|
253
201
|
};
|
|
254
|
-
};
|
|
255
|
-
|
|
202
|
+
};
|
|
256
203
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
204
|
+
// eslint-disable-next-line complexity
|
|
205
|
+
const getWhiskerProps = (props, type) => {
|
|
206
|
+
const {
|
|
207
|
+
horizontal,
|
|
208
|
+
style,
|
|
209
|
+
boxWidth,
|
|
210
|
+
whiskerWidth,
|
|
211
|
+
datum,
|
|
212
|
+
scale,
|
|
213
|
+
index,
|
|
214
|
+
disableInlineStyles
|
|
215
|
+
} = props;
|
|
216
|
+
const {
|
|
217
|
+
min,
|
|
218
|
+
max,
|
|
219
|
+
q1,
|
|
220
|
+
q3,
|
|
221
|
+
x,
|
|
222
|
+
y
|
|
223
|
+
} = props.positions;
|
|
224
|
+
const boxValue = type === "min" ? q1 : q3;
|
|
225
|
+
const whiskerValue = type === "min" ? min : max;
|
|
226
|
+
const width = typeof whiskerWidth === "number" ? whiskerWidth : boxWidth;
|
|
276
227
|
return {
|
|
277
|
-
datum
|
|
278
|
-
index
|
|
279
|
-
scale
|
|
228
|
+
datum,
|
|
229
|
+
index,
|
|
230
|
+
scale,
|
|
280
231
|
majorWhisker: {
|
|
281
232
|
x1: horizontal ? boxValue : x,
|
|
282
233
|
y1: horizontal ? y : boxValue,
|
|
@@ -290,128 +241,127 @@ var getWhiskerProps = function (props, type) {
|
|
|
290
241
|
y2: horizontal ? y + width / 2 : whiskerValue
|
|
291
242
|
},
|
|
292
243
|
style: disableInlineStyles ? {} : style[type] || style.whisker,
|
|
293
|
-
disableInlineStyles
|
|
244
|
+
disableInlineStyles
|
|
294
245
|
};
|
|
295
246
|
};
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
247
|
+
const getBoxProps = (props, type) => {
|
|
248
|
+
const {
|
|
249
|
+
horizontal,
|
|
250
|
+
boxWidth,
|
|
251
|
+
style,
|
|
252
|
+
scale,
|
|
253
|
+
datum,
|
|
254
|
+
index,
|
|
255
|
+
disableInlineStyles
|
|
256
|
+
} = props;
|
|
257
|
+
const {
|
|
258
|
+
median,
|
|
259
|
+
q1,
|
|
260
|
+
q3,
|
|
261
|
+
x,
|
|
262
|
+
y
|
|
263
|
+
} = props.positions;
|
|
264
|
+
const defaultX = type === "q1" ? q1 : median;
|
|
265
|
+
const defaultY = type === "q1" ? median : q3;
|
|
266
|
+
const defaultWidth = type === "q1" ? median - q1 : q3 - median;
|
|
267
|
+
const defaultHeight = type === "q1" ? q1 - median : median - q3;
|
|
315
268
|
return {
|
|
316
|
-
datum
|
|
317
|
-
scale
|
|
318
|
-
index
|
|
269
|
+
datum,
|
|
270
|
+
scale,
|
|
271
|
+
index,
|
|
319
272
|
x: horizontal ? defaultX : x - boxWidth / 2,
|
|
320
273
|
y: horizontal ? y - boxWidth / 2 : defaultY,
|
|
321
274
|
width: horizontal ? defaultWidth : boxWidth,
|
|
322
275
|
height: horizontal ? boxWidth : defaultHeight,
|
|
323
276
|
style: disableInlineStyles ? {} : style[type] || style.boxes,
|
|
324
|
-
disableInlineStyles
|
|
277
|
+
disableInlineStyles
|
|
325
278
|
};
|
|
326
279
|
};
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
280
|
+
const getMedianProps = props => {
|
|
281
|
+
const {
|
|
282
|
+
boxWidth,
|
|
283
|
+
horizontal,
|
|
284
|
+
style,
|
|
285
|
+
datum,
|
|
286
|
+
scale,
|
|
287
|
+
index,
|
|
288
|
+
disableInlineStyles
|
|
289
|
+
} = props;
|
|
290
|
+
const {
|
|
291
|
+
median,
|
|
292
|
+
x,
|
|
293
|
+
y
|
|
294
|
+
} = props.positions;
|
|
340
295
|
return {
|
|
341
|
-
datum
|
|
342
|
-
scale
|
|
343
|
-
index
|
|
296
|
+
datum,
|
|
297
|
+
scale,
|
|
298
|
+
index,
|
|
344
299
|
x1: horizontal ? median : x - boxWidth / 2,
|
|
345
300
|
y1: horizontal ? y - boxWidth / 2 : median,
|
|
346
301
|
x2: horizontal ? median : x + boxWidth / 2,
|
|
347
302
|
y2: horizontal ? y + boxWidth / 2 : median,
|
|
348
303
|
style: disableInlineStyles ? {} : style.median,
|
|
349
|
-
disableInlineStyles
|
|
304
|
+
disableInlineStyles
|
|
350
305
|
};
|
|
351
306
|
};
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
307
|
+
const getText = (props, type) => {
|
|
308
|
+
const {
|
|
309
|
+
datum,
|
|
310
|
+
index,
|
|
311
|
+
labels
|
|
312
|
+
} = props;
|
|
313
|
+
const propName = `${type}Labels`;
|
|
314
|
+
const labelProp = props[propName];
|
|
360
315
|
if (!labelProp && !labels) {
|
|
361
316
|
return null;
|
|
362
317
|
} else if (labelProp === true || labels === true) {
|
|
363
|
-
|
|
364
|
-
return
|
|
318
|
+
const dataName = `_${type}`;
|
|
319
|
+
return `${datum[dataName]}`;
|
|
365
320
|
}
|
|
366
|
-
|
|
367
321
|
return Array.isArray(labelProp) ? labelProp[index] : labelProp;
|
|
368
322
|
};
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
var labelStyle = style[namespace] || style.labels;
|
|
387
|
-
var defaultVerticalAnchors = {
|
|
323
|
+
const getOrientation = (labelOrientation, type) => typeof labelOrientation === "object" && labelOrientation[type] || labelOrientation;
|
|
324
|
+
const getLabelProps = (props, text, type) => {
|
|
325
|
+
const {
|
|
326
|
+
datum,
|
|
327
|
+
positions,
|
|
328
|
+
index,
|
|
329
|
+
boxWidth,
|
|
330
|
+
horizontal,
|
|
331
|
+
labelOrientation,
|
|
332
|
+
style,
|
|
333
|
+
theme,
|
|
334
|
+
disableInlineStyles
|
|
335
|
+
} = props;
|
|
336
|
+
const orientation = getOrientation(labelOrientation, type);
|
|
337
|
+
const namespace = `${type}Labels`;
|
|
338
|
+
const labelStyle = style[namespace] || style.labels;
|
|
339
|
+
const defaultVerticalAnchors = {
|
|
388
340
|
top: "end",
|
|
389
341
|
bottom: "start",
|
|
390
342
|
left: "middle",
|
|
391
343
|
right: "middle"
|
|
392
344
|
};
|
|
393
|
-
|
|
345
|
+
const defaultTextAnchors = {
|
|
394
346
|
left: "end",
|
|
395
347
|
right: "start",
|
|
396
348
|
top: "middle",
|
|
397
349
|
bottom: "middle"
|
|
398
350
|
};
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
var sign = {
|
|
351
|
+
const whiskerWidth = typeof props.whiskerWidth === "number" ? props.whiskerWidth : boxWidth;
|
|
352
|
+
const width = type === "min" || type === "max" ? whiskerWidth : boxWidth;
|
|
353
|
+
const getOffset = coord => {
|
|
354
|
+
const sign = {
|
|
404
355
|
x: orientation === "left" ? -1 : 1,
|
|
405
356
|
y: orientation === "top" ? -1 : 1
|
|
406
357
|
};
|
|
407
358
|
return sign[coord] * width / 2 + sign[coord] * (labelStyle.padding || 0);
|
|
408
359
|
};
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
orientation: orientation,
|
|
360
|
+
const labelProps = {
|
|
361
|
+
text,
|
|
362
|
+
datum,
|
|
363
|
+
index,
|
|
364
|
+
orientation,
|
|
415
365
|
style: disableInlineStyles ? {} : labelStyle,
|
|
416
366
|
y: horizontal ? positions.y : positions[type],
|
|
417
367
|
x: horizontal ? positions[type] : positions.x,
|
|
@@ -420,111 +370,92 @@ var getLabelProps = function (props, text, type) {
|
|
|
420
370
|
textAnchor: labelStyle.textAnchor || defaultTextAnchors[orientation],
|
|
421
371
|
verticalAnchor: labelStyle.verticalAnchor || defaultVerticalAnchors[orientation],
|
|
422
372
|
angle: labelStyle.angle,
|
|
423
|
-
horizontal
|
|
424
|
-
disableInlineStyles
|
|
373
|
+
horizontal,
|
|
374
|
+
disableInlineStyles
|
|
425
375
|
};
|
|
426
|
-
|
|
427
|
-
|
|
376
|
+
const component = props[`${type}LabelComponent`];
|
|
428
377
|
if (!_victoryCore.Helpers.isTooltip(component)) {
|
|
429
378
|
return labelProps;
|
|
430
379
|
}
|
|
431
|
-
|
|
432
|
-
var tooltipTheme = theme && theme.tooltip || {};
|
|
380
|
+
const tooltipTheme = theme && theme.tooltip || {};
|
|
433
381
|
return (0, _defaults2.default)({}, labelProps, _victoryCore.Helpers.omit(tooltipTheme, ["style"]));
|
|
434
382
|
};
|
|
435
|
-
|
|
436
|
-
var getDataProps = function (props, type) {
|
|
383
|
+
const getDataProps = (props, type) => {
|
|
437
384
|
if (type === "median") {
|
|
438
385
|
return getMedianProps(props);
|
|
439
386
|
} else if (type === "min" || type === "max") {
|
|
440
387
|
return getWhiskerProps(props, type);
|
|
441
388
|
}
|
|
442
|
-
|
|
443
389
|
return getBoxProps(props, type);
|
|
444
|
-
};
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
var isDatumOutOfBounds = function (datum, domain) {
|
|
448
|
-
var exists = function (val) {
|
|
449
|
-
return val !== undefined;
|
|
450
|
-
};
|
|
451
|
-
|
|
452
|
-
var _x = datum._x,
|
|
453
|
-
_min = datum._min,
|
|
454
|
-
_max = datum._max;
|
|
455
|
-
|
|
456
|
-
var minDomainX = _victoryCore.Collection.getMinValue(domain.x);
|
|
457
|
-
|
|
458
|
-
var maxDomainX = _victoryCore.Collection.getMaxValue(domain.x);
|
|
459
|
-
|
|
460
|
-
var minDomainY = _victoryCore.Collection.getMinValue(domain.y);
|
|
461
|
-
|
|
462
|
-
var maxDomainY = _victoryCore.Collection.getMaxValue(domain.y);
|
|
463
|
-
|
|
464
|
-
var underMin = function (min) {
|
|
465
|
-
return function (val) {
|
|
466
|
-
return exists(val) && val < min;
|
|
467
|
-
};
|
|
468
|
-
};
|
|
469
|
-
|
|
470
|
-
var overMax = function (max) {
|
|
471
|
-
return function (val) {
|
|
472
|
-
return exists(val) && val > max;
|
|
473
|
-
};
|
|
474
|
-
};
|
|
475
|
-
|
|
476
|
-
var isUnderMinX = underMin(minDomainX);
|
|
477
|
-
var isUnderMinY = underMin(minDomainY);
|
|
478
|
-
var isOverMaxX = overMax(maxDomainX);
|
|
479
|
-
var isOverMaxY = overMax(maxDomainY);
|
|
480
|
-
var yOutOfBounds;
|
|
481
|
-
var xOutOfBounds; // if x is out of the bounds of the domain
|
|
482
|
-
|
|
483
|
-
if (isUnderMinX(_x) || isOverMaxX(_x)) xOutOfBounds = true; // if min/max are out of the bounds of the domain
|
|
390
|
+
};
|
|
484
391
|
|
|
392
|
+
// if all data points on an axis are out of bound of the domain, filter out this datum
|
|
393
|
+
const isDatumOutOfBounds = (datum, domain) => {
|
|
394
|
+
const exists = val => val !== undefined;
|
|
395
|
+
const {
|
|
396
|
+
_x,
|
|
397
|
+
_min,
|
|
398
|
+
_max
|
|
399
|
+
} = datum;
|
|
400
|
+
const minDomainX = _victoryCore.Collection.getMinValue(domain.x);
|
|
401
|
+
const maxDomainX = _victoryCore.Collection.getMaxValue(domain.x);
|
|
402
|
+
const minDomainY = _victoryCore.Collection.getMinValue(domain.y);
|
|
403
|
+
const maxDomainY = _victoryCore.Collection.getMaxValue(domain.y);
|
|
404
|
+
const underMin = min => val => exists(val) && val < min;
|
|
405
|
+
const overMax = max => val => exists(val) && val > max;
|
|
406
|
+
const isUnderMinX = underMin(minDomainX);
|
|
407
|
+
const isUnderMinY = underMin(minDomainY);
|
|
408
|
+
const isOverMaxX = overMax(maxDomainX);
|
|
409
|
+
const isOverMaxY = overMax(maxDomainY);
|
|
410
|
+
let yOutOfBounds;
|
|
411
|
+
let xOutOfBounds;
|
|
412
|
+
|
|
413
|
+
// if x is out of the bounds of the domain
|
|
414
|
+
if (isUnderMinX(_x) || isOverMaxX(_x)) xOutOfBounds = true;
|
|
415
|
+
// if min/max are out of the bounds of the domain
|
|
485
416
|
if (isUnderMinY(_min) && isUnderMinY(_max) || isOverMaxY(_min) && isOverMaxY(_max)) yOutOfBounds = true;
|
|
486
417
|
return yOutOfBounds || xOutOfBounds;
|
|
487
418
|
};
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
419
|
+
const getBaseProps = (initialProps, fallbackProps) => {
|
|
420
|
+
const modifiedProps = _victoryCore.Helpers.modifyProps(initialProps, fallbackProps, "boxplot");
|
|
421
|
+
const props = Object.assign({}, modifiedProps, getCalculatedValues(modifiedProps));
|
|
422
|
+
const {
|
|
423
|
+
groupComponent,
|
|
424
|
+
width,
|
|
425
|
+
height,
|
|
426
|
+
padding,
|
|
427
|
+
standalone,
|
|
428
|
+
theme,
|
|
429
|
+
events,
|
|
430
|
+
sharedEvents,
|
|
431
|
+
scale,
|
|
432
|
+
horizontal,
|
|
433
|
+
data,
|
|
434
|
+
style,
|
|
435
|
+
domain,
|
|
436
|
+
name
|
|
437
|
+
} = props;
|
|
438
|
+
const initialChildProps = {
|
|
508
439
|
parent: {
|
|
509
|
-
domain
|
|
510
|
-
scale
|
|
511
|
-
width
|
|
512
|
-
height
|
|
513
|
-
data
|
|
514
|
-
standalone
|
|
515
|
-
name
|
|
516
|
-
theme
|
|
440
|
+
domain,
|
|
441
|
+
scale,
|
|
442
|
+
width,
|
|
443
|
+
height,
|
|
444
|
+
data,
|
|
445
|
+
standalone,
|
|
446
|
+
name,
|
|
447
|
+
theme,
|
|
517
448
|
style: style.parent || {},
|
|
518
|
-
padding
|
|
519
|
-
groupComponent
|
|
520
|
-
horizontal
|
|
449
|
+
padding,
|
|
450
|
+
groupComponent,
|
|
451
|
+
horizontal
|
|
521
452
|
}
|
|
522
453
|
};
|
|
523
|
-
|
|
524
|
-
return data.reduce(
|
|
525
|
-
|
|
454
|
+
const boxScale = scale.y;
|
|
455
|
+
return data.reduce((acc, datum, index) => {
|
|
456
|
+
const eventKey = !_victoryCore.Helpers.isNil(datum.eventKey) ? datum.eventKey : index;
|
|
526
457
|
if (isDatumOutOfBounds(datum, domain)) return acc;
|
|
527
|
-
|
|
458
|
+
const positions = {
|
|
528
459
|
x: horizontal ? scale.y(datum._y) : scale.x(datum._x),
|
|
529
460
|
y: horizontal ? scale.x(datum._x) : scale.y(datum._y),
|
|
530
461
|
min: boxScale(datum._min),
|
|
@@ -533,27 +464,25 @@ var getBaseProps = function (initialProps, fallbackProps) {
|
|
|
533
464
|
q1: boxScale(datum._q1),
|
|
534
465
|
q3: boxScale(datum._q3)
|
|
535
466
|
};
|
|
536
|
-
|
|
537
|
-
index
|
|
538
|
-
datum
|
|
539
|
-
positions
|
|
467
|
+
const dataProps = Object.assign({
|
|
468
|
+
index,
|
|
469
|
+
datum,
|
|
470
|
+
positions
|
|
540
471
|
}, props);
|
|
541
|
-
|
|
472
|
+
const dataObj = TYPES.reduce((memo, type) => {
|
|
542
473
|
memo[type] = getDataProps(dataProps, type);
|
|
543
474
|
return memo;
|
|
544
475
|
}, {});
|
|
545
476
|
acc[eventKey] = dataObj;
|
|
546
|
-
TYPES.forEach(
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
477
|
+
TYPES.forEach(type => {
|
|
478
|
+
const labelText = getText(dataProps, type);
|
|
479
|
+
const labelProp = props.labels || props[`${type}Labels`];
|
|
550
480
|
if (labelText !== null && labelText !== undefined || labelProp && (events || sharedEvents)) {
|
|
551
|
-
|
|
481
|
+
const target = `${type}Labels`;
|
|
552
482
|
acc[eventKey][target] = getLabelProps(Object.assign({}, props, dataProps), labelText, type);
|
|
553
483
|
}
|
|
554
484
|
});
|
|
555
485
|
return acc;
|
|
556
486
|
}, initialChildProps);
|
|
557
487
|
};
|
|
558
|
-
|
|
559
488
|
exports.getBaseProps = getBaseProps;
|