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