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