Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve performance of Wrapper components (Chart, Group, Stack) #1494

Merged
merged 13 commits into from
Mar 9, 2020
6 changes: 3 additions & 3 deletions packages/victory-bar/src/helper-methods.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ const getCalculatedValues = (props) => {
const { theme, polar } = props;
const defaultStyles = theme && theme.bar && theme.bar.style ? theme.bar.style : {};
const style = Helpers.getStyles(props.style, defaultStyles);
const data = Data.getData(props);
const range = {
const data = Data.getData(props); // Data.getData needs to be called to format the data (we may be able to do this in a wrapper component)
const range = props.range || {
x: Helpers.getRange(props, "x"),
y: Helpers.getRange(props, "y")
};
const domain = {
const domain = props.domain || {
x: Domain.getDomainWithZero(props, "x"),
y: Domain.getDomainWithZero(props, "y")
};
Expand Down
3 changes: 3 additions & 0 deletions packages/victory-chart/src/helper-methods.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,12 @@ function getCalculatedProps(props, childComponents) {
const { horizontal, polar } = props;
const categories = Wrapper.getCategories(props, childComponents);
const stringMap = createStringMap(props, childComponents);

const domain = {
x: getDomain(assign({}, props, { categories }), "x", childComponents),
y: getDomain(assign({}, props, { categories }), "y", childComponents)
};

const range = {
x: Helpers.getRange(props, "x"),
y: Helpers.getRange(props, "y")
Expand All @@ -91,6 +93,7 @@ function getCalculatedProps(props, childComponents) {
x: baseScale.x.domain(domain.x).range(horizontal ? range.y : range.x),
y: baseScale.y.domain(domain.y).range(horizontal ? range.x : range.y)
};

const origin = polar ? Helpers.getPolarOrigin(props) : Axis.getOrigin(domain);

const originSign = {
Expand Down
1 change: 0 additions & 1 deletion packages/victory-core/src/victory-util/domain.js
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,6 @@ function getDomainWithZero(props, axis) {
const formatDomainFunction = (domain) => {
return formatDomain(ensureZero(domain), props, axis);
};

return createDomainFunction(getDomainFunction, formatDomainFunction)(props, axis);
}

Expand Down
4 changes: 3 additions & 1 deletion packages/victory-core/src/victory-util/helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -222,13 +222,15 @@ function reduceChildren(
const childName = child.props.name || `${childRole}-${names[index]}`;
if (child.props && child.props.children) {
const childProps = assign({}, child.props, pick(parentProps, sharedProps));

const nestedChildren =
child.type && isFunction(child.type.getChildren)
child.type && child.type.role === "stack" && isFunction(child.type.getChildren)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we get similar performance improvements without this change?

? child.type.getChildren(childProps)
: React.Children.toArray(child.props.children).map((c) => {
const nestedChildProps = assign({}, c.props, pick(childProps, sharedProps));
return React.cloneElement(c, nestedChildProps);
});

const childNames = nestedChildren.map((c, i) => `${childName}-${i}`);
const nestedResults = traverseChildren(nestedChildren, childNames, child);
memo = combine(memo, nestedResults);
Expand Down
1 change: 1 addition & 0 deletions packages/victory-core/src/victory-util/wrapper.js
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@ export default {
return Domain.getDomain(sharedProps, axis);
}
};

const childDomains = Helpers.reduceChildren(children, iteratee, props);
const min = childDomains.length === 0 ? 0 : Collection.getMinValue(childDomains);
const max = childDomains.length === 0 ? 1 : Collection.getMaxValue(childDomains);
Expand Down
8 changes: 4 additions & 4 deletions packages/victory-group/src/helper-methods.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ function getCalculatedProps(props, childComponents) {
props = Helpers.modifyProps(props, fallbackProps, role);
const style = Wrapper.getStyle(props.theme, props.style, role);
const { offset, colorScale, color, polar, horizontal } = props;
const categories = Wrapper.getCategories(props, childComponents);
const datasets = Wrapper.getDataFromChildren(props);
const domain = {
const categories = props.categories || Wrapper.getCategories(props, childComponents);
const datasets = props.datasets || Wrapper.getDataFromChildren(props);
const domain = props.domain || {
x: Wrapper.getDomain(assign({}, props, { categories }), "x", childComponents),
y: Wrapper.getDomain(assign({}, props, { categories }), "y", childComponents)
};
const range = {
const range = props.range || {
x: Helpers.getRange(props, "x"),
y: Helpers.getRange(props, "y")
};
Expand Down
8 changes: 4 additions & 4 deletions packages/victory-stack/src/helper-methods.js
Original file line number Diff line number Diff line change
Expand Up @@ -111,16 +111,16 @@ function getCalculatedProps(props, childComponents) {
const role = "stack";
props = Helpers.modifyProps(props, fallbackProps, role);
const style = Wrapper.getStyle(props.theme, props.style, role);
const categories = Wrapper.getCategories(props, childComponents);
const datasets = stackData(props, childComponents);
const categories = props.categories || Wrapper.getCategories(props, childComponents);
const datasets = props.datasets || stackData(props, childComponents);
const children = childComponents.map((c, i) => {
return React.cloneElement(c, { data: datasets[i] });
});
const domain = {
const domain = props.domain || {
x: Wrapper.getDomain(assign({}, props, { categories }), "x", children),
y: Wrapper.getDomain(assign({}, props, { categories }), "y", children)
};
const range = {
const range = props.range || {
x: Helpers.getRange(props, "x"),
y: Helpers.getRange(props, "y")
};
Expand Down