victory-stack 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-stack.js +2486 -3379
- package/dist/victory-stack.min.js +1 -1
- package/es/helper-methods.js +116 -162
- package/es/victory-stack.js +61 -72
- package/lib/helper-methods.js +116 -178
- package/lib/index.js +0 -2
- package/lib/victory-stack.js +60 -91
- package/package.json +3 -3
package/es/helper-methods.js
CHANGED
|
@@ -1,78 +1,53 @@
|
|
|
1
1
|
import _orderBy from "lodash/orderBy";
|
|
2
|
-
|
|
3
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
-
|
|
5
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
6
|
-
|
|
7
|
-
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); }
|
|
8
|
-
|
|
9
|
-
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; }
|
|
10
|
-
|
|
11
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
12
|
-
|
|
13
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
-
|
|
15
|
-
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; }
|
|
16
|
-
|
|
17
|
-
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; }
|
|
18
|
-
|
|
19
|
-
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; }
|
|
20
|
-
|
|
2
|
+
/* eslint-disable no-use-before-define */
|
|
21
3
|
import React from "react";
|
|
22
4
|
import { Helpers, Scale, Wrapper } from "victory-core";
|
|
23
5
|
import isEqual from "react-fast-compare";
|
|
24
|
-
|
|
6
|
+
const fallbackProps = {
|
|
25
7
|
width: 450,
|
|
26
8
|
height: 300,
|
|
27
9
|
padding: 50
|
|
28
|
-
};
|
|
10
|
+
};
|
|
29
11
|
|
|
12
|
+
// Assumes data in `datasets` is sorted by `Data.getData`.
|
|
30
13
|
function fillData(props, datasets) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
14
|
+
const {
|
|
15
|
+
fillInMissingData
|
|
16
|
+
} = props;
|
|
17
|
+
const xMap = datasets.reduce((prev, dataset) => {
|
|
18
|
+
dataset.forEach(datum => {
|
|
34
19
|
prev[datum._x instanceof Date ? datum._x.getTime() : datum._x] = true;
|
|
35
20
|
});
|
|
36
21
|
return prev;
|
|
37
22
|
}, {});
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
var isDate = dataset[0] && dataset[0]._x instanceof Date;
|
|
47
|
-
var filledInData = xArr.map(function (x, index) {
|
|
48
|
-
var parsedX = Number(x);
|
|
49
|
-
var datum = dataset[index - indexOffset];
|
|
50
|
-
|
|
23
|
+
const xKeys = Object.keys(xMap).map(k => Number(k));
|
|
24
|
+
const xArr = _orderBy(xKeys);
|
|
25
|
+
return datasets.map(dataset => {
|
|
26
|
+
let indexOffset = 0;
|
|
27
|
+
const isDate = dataset[0] && dataset[0]._x instanceof Date;
|
|
28
|
+
const filledInData = xArr.map((x, index) => {
|
|
29
|
+
let parsedX = Number(x);
|
|
30
|
+
const datum = dataset[index - indexOffset];
|
|
51
31
|
if (datum) {
|
|
52
|
-
|
|
53
|
-
|
|
32
|
+
const x1 = isDate ? datum._x.getTime() : datum._x;
|
|
54
33
|
if (x1 === parsedX) {
|
|
55
34
|
return datum;
|
|
56
35
|
}
|
|
57
|
-
|
|
58
36
|
indexOffset++;
|
|
59
|
-
|
|
60
|
-
var _y = fillInMissingData ? 0 : null;
|
|
61
|
-
|
|
37
|
+
const y = fillInMissingData ? 0 : null;
|
|
62
38
|
parsedX = isDate ? new Date(parsedX) : parsedX;
|
|
63
39
|
return {
|
|
64
40
|
x: parsedX,
|
|
65
|
-
y
|
|
41
|
+
y,
|
|
66
42
|
_x: parsedX,
|
|
67
|
-
_y:
|
|
43
|
+
_y: y
|
|
68
44
|
};
|
|
69
45
|
}
|
|
70
|
-
|
|
71
|
-
var y = fillInMissingData ? 0 : null;
|
|
46
|
+
const y = fillInMissingData ? 0 : null;
|
|
72
47
|
parsedX = isDate ? new Date(parsedX) : parsedX;
|
|
73
48
|
return {
|
|
74
49
|
x: parsedX,
|
|
75
|
-
y
|
|
50
|
+
y,
|
|
76
51
|
_x: parsedX,
|
|
77
52
|
_y: y
|
|
78
53
|
};
|
|
@@ -80,40 +55,29 @@ function fillData(props, datasets) {
|
|
|
80
55
|
return filledInData;
|
|
81
56
|
});
|
|
82
57
|
}
|
|
83
|
-
|
|
84
58
|
function getY0(datum, index, datasets) {
|
|
85
59
|
if (datum.y0) {
|
|
86
60
|
return datum.y0;
|
|
87
61
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
var previousDatasets = datasets.slice(0, index);
|
|
95
|
-
var previousPoints = previousDatasets.reduce(function (prev, dataset) {
|
|
96
|
-
return prev.concat(dataset.filter(function (previousDatum) {
|
|
97
|
-
return datum._x instanceof Date ? previousDatum._x.getTime() === datum._x.getTime() : previousDatum._x === datum._x;
|
|
98
|
-
}).map(function (previousDatum) {
|
|
99
|
-
return previousDatum._y || 0;
|
|
100
|
-
}));
|
|
62
|
+
const y = datum._y;
|
|
63
|
+
const group = datum._group;
|
|
64
|
+
const firstDatasetBaseline = datasets[0].map(d => d.y0);
|
|
65
|
+
const previousDatasets = datasets.slice(0, index);
|
|
66
|
+
const previousPoints = previousDatasets.reduce((prev, dataset) => {
|
|
67
|
+
return prev.concat(dataset.filter(previousDatum => datum._x instanceof Date ? previousDatum._x.getTime() === datum._x.getTime() : previousDatum._x === datum._x).map(previousDatum => previousDatum._y || 0));
|
|
101
68
|
}, []);
|
|
102
|
-
|
|
103
|
-
|
|
69
|
+
const y0 = previousPoints.length && previousPoints.reduce((memo, value) => {
|
|
70
|
+
const sameSign = y < 0 && value < 0 || y >= 0 && value >= 0;
|
|
104
71
|
return sameSign ? Number(value) + memo : memo;
|
|
105
72
|
}, firstDatasetBaseline[group] || 0);
|
|
106
|
-
return previousPoints.some(
|
|
107
|
-
return point instanceof Date;
|
|
108
|
-
}) ? new Date(y0) : y0;
|
|
73
|
+
return previousPoints.some(point => point instanceof Date) ? new Date(y0) : y0;
|
|
109
74
|
}
|
|
110
|
-
/* eslint-disable no-nested-ternary */
|
|
111
|
-
|
|
112
75
|
|
|
76
|
+
/* eslint-disable no-nested-ternary */
|
|
113
77
|
function addLayoutData(props, datasets, index) {
|
|
114
|
-
|
|
115
|
-
return datasets[index].map(
|
|
116
|
-
|
|
78
|
+
const xOffset = props.xOffset || 0;
|
|
79
|
+
return datasets[index].map(datum => {
|
|
80
|
+
const yOffset = getY0(datum, index, datasets) || 0;
|
|
117
81
|
return Object.assign({}, datum, {
|
|
118
82
|
_y0: !(datum._y instanceof Date) ? yOffset : yOffset ? new Date(yOffset) : datum._y,
|
|
119
83
|
_y1: datum._y === null ? null : datum._y instanceof Date ? new Date(Number(datum._y) + Number(yOffset)) : datum._y + yOffset,
|
|
@@ -123,162 +87,152 @@ function addLayoutData(props, datasets, index) {
|
|
|
123
87
|
}
|
|
124
88
|
/* eslint-enable no-nested-ternary */
|
|
125
89
|
|
|
126
|
-
|
|
127
90
|
function stackData(props, childComponents) {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
});
|
|
133
|
-
});
|
|
134
|
-
var datasets = fillData(props, filterNullChildData);
|
|
135
|
-
return datasets.map(function (d, i) {
|
|
136
|
-
return addLayoutData(props, datasets, i);
|
|
137
|
-
});
|
|
91
|
+
const dataFromChildren = Wrapper.getDataFromChildren(props, childComponents);
|
|
92
|
+
const filterNullChildData = dataFromChildren.map(dataset => dataset.filter(datum => datum._x !== null && datum._y !== null));
|
|
93
|
+
const datasets = fillData(props, filterNullChildData);
|
|
94
|
+
return datasets.map((d, i) => addLayoutData(props, datasets, i));
|
|
138
95
|
}
|
|
139
|
-
|
|
140
96
|
export function getCalculatedProps(initialProps, childComponents) {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
97
|
+
const children = childComponents || React.Children.toArray(initialProps.children);
|
|
98
|
+
const role = "stack";
|
|
99
|
+
const props = Helpers.modifyProps(initialProps, fallbackProps, role);
|
|
100
|
+
const style = Wrapper.getStyle(props.theme, props.style, role);
|
|
101
|
+
const categories = props.categories || Wrapper.getCategories(props, children);
|
|
102
|
+
const datasets = props.datasets || stackData(props, children);
|
|
103
|
+
const clonedChildren = children.map((c, i) => {
|
|
148
104
|
return /*#__PURE__*/React.cloneElement(c, {
|
|
149
105
|
data: datasets[i]
|
|
150
106
|
});
|
|
151
107
|
});
|
|
152
|
-
|
|
108
|
+
const domain = {
|
|
153
109
|
x: Wrapper.getDomain(Object.assign({}, props, {
|
|
154
|
-
categories
|
|
110
|
+
categories
|
|
155
111
|
}), "x", clonedChildren),
|
|
156
112
|
y: Wrapper.getDomain(Object.assign({}, props, {
|
|
157
|
-
categories
|
|
113
|
+
categories
|
|
158
114
|
}), "y", clonedChildren)
|
|
159
115
|
};
|
|
160
|
-
|
|
116
|
+
const range = props.range || {
|
|
161
117
|
x: Helpers.getRange(props, "x"),
|
|
162
118
|
y: Helpers.getRange(props, "y")
|
|
163
119
|
};
|
|
164
|
-
|
|
120
|
+
const baseScale = {
|
|
165
121
|
x: Scale.getScaleFromProps(props, "x") || Wrapper.getScale(props, "x"),
|
|
166
122
|
y: Scale.getScaleFromProps(props, "y") || Wrapper.getScale(props, "y")
|
|
167
123
|
};
|
|
168
|
-
|
|
124
|
+
const scale = {
|
|
169
125
|
x: baseScale.x.domain(domain.x).range(props.horizontal ? range.y : range.x),
|
|
170
126
|
y: baseScale.y.domain(domain.y).range(props.horizontal ? range.x : range.y)
|
|
171
127
|
};
|
|
172
|
-
|
|
173
|
-
|
|
128
|
+
const {
|
|
129
|
+
colorScale,
|
|
130
|
+
horizontal
|
|
131
|
+
} = props;
|
|
174
132
|
return {
|
|
175
|
-
datasets
|
|
176
|
-
categories
|
|
177
|
-
range
|
|
178
|
-
domain
|
|
179
|
-
horizontal
|
|
180
|
-
scale
|
|
181
|
-
style
|
|
182
|
-
colorScale
|
|
183
|
-
role
|
|
133
|
+
datasets,
|
|
134
|
+
categories,
|
|
135
|
+
range,
|
|
136
|
+
domain,
|
|
137
|
+
horizontal,
|
|
138
|
+
scale,
|
|
139
|
+
style,
|
|
140
|
+
colorScale,
|
|
141
|
+
role
|
|
184
142
|
};
|
|
185
|
-
}
|
|
186
|
-
// With shared events, the props change on every event, and every value is re-calculated
|
|
143
|
+
}
|
|
187
144
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
145
|
+
// We need to remove sharedEvents in order to memoize the calculated data
|
|
146
|
+
// With shared events, the props change on every event, and every value is re-calculated
|
|
147
|
+
const withoutSharedEvents = props => {
|
|
148
|
+
const {
|
|
149
|
+
children
|
|
150
|
+
} = props;
|
|
151
|
+
const modifiedChildren = React.Children.toArray(children).map(_child => {
|
|
152
|
+
const child = _child;
|
|
153
|
+
return {
|
|
154
|
+
...child,
|
|
193
155
|
props: Helpers.omit(child.props, ["sharedEvents"])
|
|
194
|
-
}
|
|
156
|
+
};
|
|
195
157
|
});
|
|
196
158
|
props.children = modifiedChildren;
|
|
197
159
|
return props;
|
|
198
160
|
};
|
|
199
|
-
|
|
200
161
|
export function useMemoizedProps(initialProps) {
|
|
201
|
-
|
|
162
|
+
const modifiedProps = withoutSharedEvents(initialProps);
|
|
163
|
+
const [props, setProps] = React.useState(modifiedProps);
|
|
202
164
|
|
|
203
|
-
|
|
204
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
205
|
-
props = _React$useState2[0],
|
|
206
|
-
setProps = _React$useState2[1]; // React.memo uses shallow equality to compare objects. This way props
|
|
165
|
+
// React.memo uses shallow equality to compare objects. This way props
|
|
207
166
|
// will only be re-calculated when they change.
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
React.useEffect(function () {
|
|
167
|
+
React.useEffect(() => {
|
|
211
168
|
if (!isEqual(modifiedProps, props)) {
|
|
212
169
|
setProps(modifiedProps);
|
|
213
170
|
}
|
|
214
171
|
}, [props, setProps, modifiedProps]);
|
|
215
|
-
return React.useMemo(
|
|
172
|
+
return React.useMemo(() => {
|
|
216
173
|
return getCalculatedProps(props, props.children);
|
|
217
174
|
}, [props]);
|
|
218
175
|
}
|
|
219
|
-
|
|
220
176
|
function getLabels(props, datasets, index) {
|
|
221
177
|
if (!props.labels) {
|
|
222
178
|
return undefined;
|
|
223
179
|
}
|
|
224
|
-
|
|
225
180
|
return datasets.length === index + 1 ? props.labels : undefined;
|
|
226
181
|
}
|
|
227
|
-
|
|
228
182
|
export function getChildProps(props, calculatedProps) {
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
183
|
+
const {
|
|
184
|
+
categories,
|
|
185
|
+
domain,
|
|
186
|
+
range,
|
|
187
|
+
scale,
|
|
188
|
+
horizontal
|
|
189
|
+
} = calculatedProps;
|
|
234
190
|
return {
|
|
235
191
|
height: props.height,
|
|
236
192
|
width: props.width,
|
|
237
193
|
padding: Helpers.getPadding(props),
|
|
238
194
|
standalone: false,
|
|
239
195
|
theme: props.theme,
|
|
240
|
-
categories
|
|
241
|
-
domain
|
|
242
|
-
range
|
|
243
|
-
scale
|
|
244
|
-
horizontal
|
|
196
|
+
categories,
|
|
197
|
+
domain,
|
|
198
|
+
range,
|
|
199
|
+
scale,
|
|
200
|
+
horizontal
|
|
245
201
|
};
|
|
246
202
|
}
|
|
247
|
-
|
|
248
203
|
function getColorScale(props, child) {
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
204
|
+
const role = child.type && child.type.role;
|
|
205
|
+
const colorScaleOptions = child.props.colorScale || props.colorScale;
|
|
252
206
|
if (role !== "group" && role !== "stack") {
|
|
253
207
|
return undefined;
|
|
254
208
|
}
|
|
255
|
-
|
|
256
209
|
return props.theme ? colorScaleOptions || props.theme.props.colorScale : colorScaleOptions;
|
|
257
210
|
}
|
|
258
|
-
|
|
259
211
|
export function getChildren(initialProps, childComponents, calculatedProps) {
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
212
|
+
const props = Helpers.modifyProps(initialProps, fallbackProps, "stack");
|
|
213
|
+
const children = childComponents || React.Children.toArray(props.children);
|
|
214
|
+
const newCalculatedProps = calculatedProps || getCalculatedProps(props, children);
|
|
215
|
+
const {
|
|
216
|
+
datasets
|
|
217
|
+
} = newCalculatedProps;
|
|
218
|
+
const childProps = getChildProps(props, newCalculatedProps);
|
|
219
|
+
const parentName = props.name || "stack";
|
|
220
|
+
return children.map((child, index) => {
|
|
221
|
+
const role = child.type && child.type.role;
|
|
222
|
+
const data = datasets[index];
|
|
223
|
+
const style = Wrapper.getChildStyle(child, index, newCalculatedProps);
|
|
224
|
+
const labels = props.labels ? getLabels(props, datasets, index) : child.props.labels;
|
|
225
|
+
const name = child.props.name || `${parentName}-${role}-${index}`;
|
|
272
226
|
return /*#__PURE__*/React.cloneElement(child, Object.assign({
|
|
273
|
-
key:
|
|
274
|
-
labels
|
|
275
|
-
name
|
|
227
|
+
key: `${name}-key-${index}`,
|
|
228
|
+
labels,
|
|
229
|
+
name,
|
|
276
230
|
domainPadding: child.props.domainPadding || props.domainPadding,
|
|
277
231
|
theme: props.theme,
|
|
278
232
|
labelComponent: props.labelComponent || child.props.labelComponent,
|
|
279
|
-
style
|
|
233
|
+
style,
|
|
280
234
|
colorScale: getColorScale(props, child),
|
|
281
|
-
data
|
|
235
|
+
data,
|
|
282
236
|
polar: props.polar
|
|
283
237
|
}, childProps));
|
|
284
238
|
});
|
package/es/victory-stack.js
CHANGED
|
@@ -1,63 +1,61 @@
|
|
|
1
1
|
import _isEmpty from "lodash/isEmpty";
|
|
2
2
|
import _defaults from "lodash/defaults";
|
|
3
|
-
|
|
4
|
-
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; }
|
|
5
|
-
|
|
6
|
-
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; }
|
|
7
|
-
|
|
8
|
-
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; }
|
|
9
|
-
|
|
10
3
|
import React from "react";
|
|
11
4
|
import { Helpers, Hooks, UserProps, VictoryContainer, VictoryTheme, Wrapper } from "victory-core";
|
|
12
5
|
import { VictorySharedEvents } from "victory-shared-events";
|
|
13
6
|
import { getChildren, useMemoizedProps } from "./helper-methods";
|
|
14
7
|
import isEqual from "react-fast-compare";
|
|
15
|
-
|
|
8
|
+
const fallbackProps = {
|
|
16
9
|
width: 450,
|
|
17
10
|
height: 300,
|
|
18
11
|
padding: 50
|
|
19
12
|
};
|
|
20
|
-
|
|
13
|
+
const defaultProps = {
|
|
21
14
|
containerComponent: /*#__PURE__*/React.createElement(VictoryContainer, null),
|
|
22
15
|
groupComponent: /*#__PURE__*/React.createElement("g", null),
|
|
23
16
|
standalone: true,
|
|
24
17
|
theme: VictoryTheme.grayscale,
|
|
25
18
|
fillInMissingData: true
|
|
26
19
|
};
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
20
|
+
const VictoryStackBase = initialProps => {
|
|
21
|
+
const {
|
|
22
|
+
role
|
|
23
|
+
} = VictoryStack;
|
|
24
|
+
const propsWithDefaults = React.useMemo(() => ({
|
|
25
|
+
...defaultProps,
|
|
26
|
+
...initialProps
|
|
27
|
+
}), [initialProps]);
|
|
28
|
+
const {
|
|
29
|
+
setAnimationState,
|
|
30
|
+
getAnimationProps,
|
|
31
|
+
getProps
|
|
32
|
+
} = Hooks.useAnimationState();
|
|
33
|
+
const props = getProps(propsWithDefaults);
|
|
34
|
+
const modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
|
|
35
|
+
const {
|
|
36
|
+
eventKey,
|
|
37
|
+
containerComponent,
|
|
38
|
+
standalone,
|
|
39
|
+
groupComponent,
|
|
40
|
+
externalEventMutations,
|
|
41
|
+
width,
|
|
42
|
+
height,
|
|
43
|
+
theme,
|
|
44
|
+
polar,
|
|
45
|
+
horizontal,
|
|
46
|
+
name
|
|
47
|
+
} = modifiedProps;
|
|
48
|
+
const childComponents = React.Children.toArray(modifiedProps.children);
|
|
49
|
+
const calculatedProps = useMemoizedProps(modifiedProps);
|
|
50
|
+
const {
|
|
51
|
+
domain,
|
|
52
|
+
scale,
|
|
53
|
+
style
|
|
54
|
+
} = calculatedProps;
|
|
55
|
+
const newChildren = React.useMemo(() => {
|
|
56
|
+
const children = getChildren(props, childComponents, calculatedProps);
|
|
57
|
+
const orderedChildren = children.map((child, index) => {
|
|
58
|
+
const childProps = Object.assign({
|
|
61
59
|
animate: getAnimationProps(props, child, index)
|
|
62
60
|
}, child.props);
|
|
63
61
|
return /*#__PURE__*/React.cloneElement(child, childProps);
|
|
@@ -67,52 +65,45 @@ var VictoryStackBase = function (initialProps) {
|
|
|
67
65
|
are rendered behind lower children. This looks nicer for stacked bars with cornerRadius, and
|
|
68
66
|
areas with strokes
|
|
69
67
|
*/
|
|
70
|
-
|
|
71
68
|
return orderedChildren.reverse();
|
|
72
69
|
}, [props, childComponents, calculatedProps, getAnimationProps]);
|
|
73
|
-
|
|
70
|
+
const containerProps = React.useMemo(() => {
|
|
74
71
|
if (standalone) {
|
|
75
72
|
return {
|
|
76
|
-
domain
|
|
77
|
-
scale
|
|
78
|
-
width
|
|
79
|
-
height
|
|
80
|
-
standalone
|
|
81
|
-
theme
|
|
73
|
+
domain,
|
|
74
|
+
scale,
|
|
75
|
+
width,
|
|
76
|
+
height,
|
|
77
|
+
standalone,
|
|
78
|
+
theme,
|
|
82
79
|
style: style.parent,
|
|
83
|
-
horizontal
|
|
84
|
-
polar
|
|
85
|
-
name
|
|
80
|
+
horizontal,
|
|
81
|
+
polar,
|
|
82
|
+
name
|
|
86
83
|
};
|
|
87
84
|
}
|
|
88
|
-
|
|
89
85
|
return {};
|
|
90
86
|
}, [standalone, domain, scale, width, height, theme, style, horizontal, polar, name]);
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}, [propsWithDefaults]);
|
|
94
|
-
var container = React.useMemo(function () {
|
|
87
|
+
const userProps = React.useMemo(() => UserProps.getSafeUserProps(propsWithDefaults), [propsWithDefaults]);
|
|
88
|
+
const container = React.useMemo(() => {
|
|
95
89
|
if (standalone) {
|
|
96
|
-
|
|
97
|
-
|
|
90
|
+
const defaultContainerProps = _defaults({}, containerComponent.props, containerProps, userProps);
|
|
98
91
|
return /*#__PURE__*/React.cloneElement(containerComponent, defaultContainerProps);
|
|
99
92
|
}
|
|
100
|
-
|
|
101
93
|
return /*#__PURE__*/React.cloneElement(groupComponent, userProps);
|
|
102
94
|
}, [groupComponent, standalone, containerComponent, containerProps, userProps]);
|
|
103
|
-
|
|
95
|
+
const events = React.useMemo(() => {
|
|
104
96
|
return Wrapper.getAllEvents(props);
|
|
105
97
|
}, [props]);
|
|
106
|
-
|
|
107
|
-
React.useEffect(
|
|
98
|
+
const previousProps = Hooks.usePreviousProps(propsWithDefaults);
|
|
99
|
+
React.useEffect(() => {
|
|
108
100
|
// This is called before dismount to keep state in sync
|
|
109
|
-
return
|
|
101
|
+
return () => {
|
|
110
102
|
if (propsWithDefaults.animate) {
|
|
111
103
|
setAnimationState(previousProps, propsWithDefaults);
|
|
112
104
|
}
|
|
113
105
|
};
|
|
114
106
|
}, [setAnimationState, previousProps, propsWithDefaults]);
|
|
115
|
-
|
|
116
107
|
if (!_isEmpty(events)) {
|
|
117
108
|
return /*#__PURE__*/React.createElement(VictorySharedEvents, {
|
|
118
109
|
container: container,
|
|
@@ -121,14 +112,12 @@ var VictoryStackBase = function (initialProps) {
|
|
|
121
112
|
externalEventMutations: externalEventMutations
|
|
122
113
|
}, newChildren);
|
|
123
114
|
}
|
|
124
|
-
|
|
125
115
|
return /*#__PURE__*/React.cloneElement(container, container.props, newChildren);
|
|
126
116
|
};
|
|
127
|
-
|
|
128
|
-
var componentConfig = {
|
|
117
|
+
const componentConfig = {
|
|
129
118
|
role: "stack",
|
|
130
119
|
expectedComponents: ["groupComponent", "containerComponent", "labelComponent"],
|
|
131
|
-
getChildren
|
|
120
|
+
getChildren
|
|
132
121
|
};
|
|
133
|
-
export
|
|
122
|
+
export const VictoryStack = Object.assign( /*#__PURE__*/React.memo(VictoryStackBase, isEqual), componentConfig);
|
|
134
123
|
VictoryStack.displayName = "VictoryStack";
|