From 6d81165cf463d7f311331a65cdf6ef13737211a5 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Mon, 24 Feb 2020 18:32:42 -0500 Subject: [PATCH 01/13] wip --- demo/js/app.js | 68 ++++++++++--------- demo/js/components/dillon-demo.js | 60 ++++++++++++++++ demo/js/components/dillon-perf.js | 60 ++++++++++++++++ packages/victory-bar/src/helper-methods.js | 7 +- packages/victory-chart/src/helper-methods.js | 1 + packages/victory-chart/src/victory-chart.js | 2 + .../victory-core/src/victory-util/helpers.js | 5 +- packages/victory-group/src/helper-methods.js | 9 +-- packages/victory-group/src/victory-group.js | 4 ++ packages/victory-stack/src/helper-methods.js | 8 +-- packages/victory-stack/src/victory-stack.js | 2 + 11 files changed, 182 insertions(+), 44 deletions(-) create mode 100644 demo/js/components/dillon-demo.js create mode 100644 demo/js/components/dillon-perf.js diff --git a/demo/js/app.js b/demo/js/app.js index 2ee4ba763..e574e3043 100644 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -36,40 +36,44 @@ import VictoryPieDemo from "./components/victory-pie-demo"; import VictoryDemo from "./components/victory-demo"; import HorizontalDemo from "./components/horizontal-demo"; import DraggableDemo from "./components/draggable-demo"; +import DillonDemo from "./components/dillon-demo"; +import DillonPerf from "./components/dillon-perf"; const MAP = { - "/axis": { component: AxisDemo, name: "AxisDemo" }, - "/area": { component: AreaDemo, name: "AreaDemo" }, - "/bar": { component: BarDemo, name: "BarDemo" }, - "/chart": { component: ChartDemo, name: "ChartDemo" }, - "/line": { component: LineDemo, name: "LineDemo" }, - "/scatter": { component: ScatterDemo, name: "ScatterDemo" }, - "/errorbar": { component: ErrorBarDemo, name: "ErrorBarDemo" }, - "/candlestick": { component: CandlestickDemo, name: "CandlestickDemo" }, - "/boxplot": { component: BoxplotDemo, name: "BoxplotDemo" }, - "/events": { component: EventsDemo, name: "EventsDemo" }, - "/group": { component: GroupDemo, name: "GroupDemo" }, - "/voronoi": { component: VoronoiDemo, name: "VoronoiDemo" }, - "/tooltip": { component: TooltipDemo, name: "TooltipDemo" }, - "/zoom-container": { component: ZoomContainerDemo, name: "ZoomContainerDemo" }, - "/voronoi-container": { component: VoronoiContainerDemo, name: "VoronoiContainerDemo" }, - "/cursor-container": { component: CursorContainerDemo, name: "CursorContainerDemo" }, - "/brush-container": { component: BrushContainerDemo, name: "BrushContainerDemo" }, - "/animation": { component: AnimationDemo, name: "AnimationDemo" }, - "/selection-container": { component: SelectionDemo, name: "SelectionDemo" }, - "/create-container": { component: CreateContainerDemo, name: "CreateContainerDemo" }, - "/polar": { component: PolarDemo, name: "PolarDemo" }, - "/immutable": { component: ImmutableDemo, name: "ImmutableDemo" }, - "/external-events": { component: ExternalEventsDemo, name: "ExternalEventsDemo" }, - "/victory-brush-line": { component: VictoryBrushLineDemo, name: "BrushLineDemo" }, - "/performance": { component: PerformanceDemo, name: "PerformanceDemo" }, - "/debug": { component: DebugDemo, name: "DebugDemo" }, - "/label": { component: VictoryLabelDemo, name: "LabelDemo" }, - "/legend": { component: VictoryLegendDemo, name: "LegendDemo" }, - "/pie": { component: VictoryPieDemo, name: "PieDemo" }, - "/victory": { component: VictoryDemo, name: "VictoryDemo" }, - "/horizontal": { component: HorizontalDemo, name: "HorizontalDemo" }, - "/draggable": { component: DraggableDemo, name: "DraggableDemo" } + // "/axis": { component: AxisDemo, name: "AxisDemo" }, + // "/area": { component: AreaDemo, name: "AreaDemo" }, + // "/bar": { component: BarDemo, name: "BarDemo" }, + // "/chart": { component: ChartDemo, name: "ChartDemo" }, + // "/line": { component: LineDemo, name: "LineDemo" }, + // "/scatter": { component: ScatterDemo, name: "ScatterDemo" }, + // "/errorbar": { component: ErrorBarDemo, name: "ErrorBarDemo" }, + // "/candlestick": { component: CandlestickDemo, name: "CandlestickDemo" }, + // "/boxplot": { component: BoxplotDemo, name: "BoxplotDemo" }, + // "/events": { component: EventsDemo, name: "EventsDemo" }, + // "/group": { component: GroupDemo, name: "GroupDemo" }, + // "/voronoi": { component: VoronoiDemo, name: "VoronoiDemo" }, + // "/tooltip": { component: TooltipDemo, name: "TooltipDemo" }, + // "/zoom-container": { component: ZoomContainerDemo, name: "ZoomContainerDemo" }, + // "/voronoi-container": { component: VoronoiContainerDemo, name: "VoronoiContainerDemo" }, + // "/cursor-container": { component: CursorContainerDemo, name: "CursorContainerDemo" }, + // "/brush-container": { component: BrushContainerDemo, name: "BrushContainerDemo" }, + // "/animation": { component: AnimationDemo, name: "AnimationDemo" }, + // "/selection-container": { component: SelectionDemo, name: "SelectionDemo" }, + // "/create-container": { component: CreateContainerDemo, name: "CreateContainerDemo" }, + // "/polar": { component: PolarDemo, name: "PolarDemo" }, + // "/immutable": { component: ImmutableDemo, name: "ImmutableDemo" }, + // "/external-events": { component: ExternalEventsDemo, name: "ExternalEventsDemo" }, + // "/victory-brush-line": { component: VictoryBrushLineDemo, name: "BrushLineDemo" }, + // "/performance": { component: PerformanceDemo, name: "PerformanceDemo" }, + // "/debug": { component: DebugDemo, name: "DebugDemo" }, + // "/label": { component: VictoryLabelDemo, name: "LabelDemo" }, + // "/legend": { component: VictoryLegendDemo, name: "LegendDemo" }, + // "/pie": { component: VictoryPieDemo, name: "PieDemo" }, + // "/victory": { component: VictoryDemo, name: "VictoryDemo" }, + // "/horizontal": { component: HorizontalDemo, name: "HorizontalDemo" }, + // "/draggable": { component: DraggableDemo, name: "DraggableDemo" }, + "/dillon": { component: DillonDemo, name: "Dillon Dev" }, + "/dillon-perf": { component: DillonPerf, name: "Dillon Perf" } }; class Home extends React.Component { diff --git a/demo/js/components/dillon-demo.js b/demo/js/components/dillon-demo.js new file mode 100644 index 000000000..85c2c5b93 --- /dev/null +++ b/demo/js/components/dillon-demo.js @@ -0,0 +1,60 @@ +/* eslint-disable no-undef */ +/* eslint-disable no-magic-numbers */ +import React from "react"; +import { VictoryChart, VictoryBar, VictoryGroup, VictoryStack } from "victory"; + +class App extends React.Component { + constructor(props) { + super(props); + this.state = { + barData: this.getBarData() + }; + } + + // componentDidMount() { + // /* eslint-disable react/no-did-mount-set-state */ + // this.setStateInterval = window.setInterval(() => { + // this.setState({ + // barData: this.getBarData() + // }); + // }, 2000); + // } + + // componentWillUnmount() { + // window.clearInterval(this.setStateInterval); + // } + + getBarData() { + return [1, 2, 3, 4, 5].map((d) => { + return [{ x: 1, y: Math.random() }, { x: 2, y: Math.random() }, { x: 3, y: Math.random() }]; + }); + } + + render() { + return ( +
+ + + + {this.state.barData.map((data, index) => { + return ; + })} + + + {this.state.barData.map((data, index) => { + return ; + })} + + + {this.state.barData.map((data, index) => { + return ; + })} + + + +
+ ); + } +} + +export default App; diff --git a/demo/js/components/dillon-perf.js b/demo/js/components/dillon-perf.js new file mode 100644 index 000000000..b90b5b1e5 --- /dev/null +++ b/demo/js/components/dillon-perf.js @@ -0,0 +1,60 @@ +/* eslint-disable no-invalid-this */ +/* eslint-disable func-style */ +/* eslint-disable no-use-before-define */ +/* eslint-disable no-magic-numbers */ +/* eslint-disable react/no-multi-comp */ +import React from "react"; +import { VictoryBar, VictoryChart, VictoryGroup, VictoryStack } from "victory"; + +export const VictoryExample = () => { + return ( + <> + + + {[...Array(10).keys()].map((index) => ( + + {[...Array(10).keys()].map((idx) => ( + + ))} + + ))} + + + + ); +}; + +const generateFakeData = (n, range) => + [...Array(n).keys()].map((index) => ({ + x: index + 1, + y: Math.random() * range + })); + +class ShowChartButton extends React.Component { + constructor(props) { + super(props); + this.state = { show: false }; + } + + render = () => ( + <> +
+ this.setState({ show: !this.state.show })} + /> +
+ {this.state.show && } + + ); +} +function App() { + return ( +
+ +
+ ); +} + +export default App; diff --git a/packages/victory-bar/src/helper-methods.js b/packages/victory-bar/src/helper-methods.js index 0915bd0a9..4eb994ce4 100644 --- a/packages/victory-bar/src/helper-methods.js +++ b/packages/victory-bar/src/helper-methods.js @@ -21,15 +21,16 @@ const getBarPosition = (props, datum) => { }; const getCalculatedValues = (props) => { + debugger; 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 = props.data || Data.getData(props); + 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") }; diff --git a/packages/victory-chart/src/helper-methods.js b/packages/victory-chart/src/helper-methods.js index da2053337..e8d459372 100644 --- a/packages/victory-chart/src/helper-methods.js +++ b/packages/victory-chart/src/helper-methods.js @@ -91,6 +91,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 = { diff --git a/packages/victory-chart/src/victory-chart.js b/packages/victory-chart/src/victory-chart.js index 5b29fe9f0..8a7323963 100644 --- a/packages/victory-chart/src/victory-chart.js +++ b/packages/victory-chart/src/victory-chart.js @@ -128,7 +128,9 @@ export default class VictoryChart extends React.Component { const axes = props.polar ? modifiedProps.defaultPolarAxes : modifiedProps.defaultAxes; const childComponents = getChildComponents(modifiedProps, axes); const calculatedProps = getCalculatedProps(modifiedProps, childComponents); + console.log({ "chart.calculatedProps": calculatedProps }); const newChildren = this.getNewChildren(modifiedProps, childComponents, calculatedProps); + // debugger; const containerProps = standalone ? this.getContainerProps(modifiedProps, calculatedProps) : {}; const container = standalone ? this.renderContainer(containerComponent, containerProps) diff --git a/packages/victory-core/src/victory-util/helpers.js b/packages/victory-core/src/victory-util/helpers.js index a32ed12e8..661d40116 100644 --- a/packages/victory-core/src/victory-util/helpers.js +++ b/packages/victory-core/src/victory-util/helpers.js @@ -188,6 +188,7 @@ function getCurrentAxis(axis, horizontal) { return horizontal ? otherAxis : axis; } +let reduceCount = 0; /** * @param {Array} children: an array of child components * @param {Function} iteratee: a function with arguments "child", "childName", and "parent" @@ -205,6 +206,8 @@ function reduceChildren( initialMemo = [], combine = (memo, item) => memo.concat(item) ) { + reduceCount++; + console.log(reduceCount); const sharedProps = [ "data", "domain", @@ -223,7 +226,7 @@ function reduceChildren( if (child.props && child.props.children) { const childProps = assign({}, child.props, pick(parentProps, sharedProps)); const nestedChildren = - child.type && isFunction(child.type.getChildren) + child.type && false //isFunction(child.type.getChildren) ? child.type.getChildren(childProps) : React.Children.toArray(child.props.children).map((c) => { const nestedChildProps = assign({}, c.props, pick(childProps, sharedProps)); diff --git a/packages/victory-group/src/helper-methods.js b/packages/victory-group/src/helper-methods.js index 73b93d9dd..34a1e2778 100644 --- a/packages/victory-group/src/helper-methods.js +++ b/packages/victory-group/src/helper-methods.js @@ -17,13 +17,14 @@ 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); + // debugger; + 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") }; diff --git a/packages/victory-group/src/victory-group.js b/packages/victory-group/src/victory-group.js index ce0f2625f..dd61852d5 100644 --- a/packages/victory-group/src/victory-group.js +++ b/packages/victory-group/src/victory-group.js @@ -108,6 +108,8 @@ export default class VictoryGroup extends React.Component { } render() { + console.log({ "group.this.props": this.props }); + const { role } = this.constructor; const props = this.state && this.state.nodesWillExit ? this.state.oldProps || this.props : this.props; @@ -120,7 +122,9 @@ export default class VictoryGroup extends React.Component { externalEventMutations } = modifiedProps; const childComponents = React.Children.toArray(modifiedProps.children); + debugger; const calculatedProps = getCalculatedProps(modifiedProps, childComponents); + console.log({ "group.calculatedProps": calculatedProps }); const newChildren = this.getNewChildren(modifiedProps, childComponents, calculatedProps); const containerProps = standalone ? this.getContainerProps(modifiedProps, calculatedProps) : {}; const container = standalone diff --git a/packages/victory-stack/src/helper-methods.js b/packages/victory-stack/src/helper-methods.js index ab7153576..bfad62385 100644 --- a/packages/victory-stack/src/helper-methods.js +++ b/packages/victory-stack/src/helper-methods.js @@ -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") }; diff --git a/packages/victory-stack/src/victory-stack.js b/packages/victory-stack/src/victory-stack.js index 1cabf3500..d48405cc6 100644 --- a/packages/victory-stack/src/victory-stack.js +++ b/packages/victory-stack/src/victory-stack.js @@ -125,6 +125,7 @@ export default class VictoryStack extends React.Component { } render() { + console.log({ "stack.this.props": this.props }); const { role } = this.constructor; const props = this.state && this.state.nodesWillExit ? this.state.oldProps || this.props : this.props; @@ -138,6 +139,7 @@ export default class VictoryStack extends React.Component { } = modifiedProps; const childComponents = React.Children.toArray(modifiedProps.children); const calculatedProps = getCalculatedProps(modifiedProps, childComponents); + console.log({ "stack.calculatedProps": calculatedProps }); const newChildren = this.getNewChildren(modifiedProps, childComponents, calculatedProps); const containerProps = standalone ? this.getContainerProps(modifiedProps, calculatedProps) : {}; const container = standalone From 36638d10ea5c49da391df970f742b6eb5692bed0 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Mon, 24 Feb 2020 19:11:22 -0500 Subject: [PATCH 02/13] Remove debugger, unused test demo, rename files --- demo/js/app.js | 70 +++++++++---------- demo/js/components/dillon-demo.js | 60 ---------------- .../{dillon-perf.js => wrapper-perf.js} | 0 packages/victory-bar/src/helper-methods.js | 1 - packages/victory-chart/src/victory-chart.js | 2 - .../victory-core/src/victory-util/helpers.js | 15 ++-- packages/victory-group/src/helper-methods.js | 1 - packages/victory-group/src/victory-group.js | 4 -- packages/victory-stack/src/victory-stack.js | 2 - 9 files changed, 39 insertions(+), 116 deletions(-) delete mode 100644 demo/js/components/dillon-demo.js rename demo/js/components/{dillon-perf.js => wrapper-perf.js} (100%) diff --git a/demo/js/app.js b/demo/js/app.js index e574e3043..2252aec03 100644 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -36,44 +36,42 @@ import VictoryPieDemo from "./components/victory-pie-demo"; import VictoryDemo from "./components/victory-demo"; import HorizontalDemo from "./components/horizontal-demo"; import DraggableDemo from "./components/draggable-demo"; -import DillonDemo from "./components/dillon-demo"; -import DillonPerf from "./components/dillon-perf"; +import WrapperPerf from "./components/wrapper-perf"; const MAP = { - // "/axis": { component: AxisDemo, name: "AxisDemo" }, - // "/area": { component: AreaDemo, name: "AreaDemo" }, - // "/bar": { component: BarDemo, name: "BarDemo" }, - // "/chart": { component: ChartDemo, name: "ChartDemo" }, - // "/line": { component: LineDemo, name: "LineDemo" }, - // "/scatter": { component: ScatterDemo, name: "ScatterDemo" }, - // "/errorbar": { component: ErrorBarDemo, name: "ErrorBarDemo" }, - // "/candlestick": { component: CandlestickDemo, name: "CandlestickDemo" }, - // "/boxplot": { component: BoxplotDemo, name: "BoxplotDemo" }, - // "/events": { component: EventsDemo, name: "EventsDemo" }, - // "/group": { component: GroupDemo, name: "GroupDemo" }, - // "/voronoi": { component: VoronoiDemo, name: "VoronoiDemo" }, - // "/tooltip": { component: TooltipDemo, name: "TooltipDemo" }, - // "/zoom-container": { component: ZoomContainerDemo, name: "ZoomContainerDemo" }, - // "/voronoi-container": { component: VoronoiContainerDemo, name: "VoronoiContainerDemo" }, - // "/cursor-container": { component: CursorContainerDemo, name: "CursorContainerDemo" }, - // "/brush-container": { component: BrushContainerDemo, name: "BrushContainerDemo" }, - // "/animation": { component: AnimationDemo, name: "AnimationDemo" }, - // "/selection-container": { component: SelectionDemo, name: "SelectionDemo" }, - // "/create-container": { component: CreateContainerDemo, name: "CreateContainerDemo" }, - // "/polar": { component: PolarDemo, name: "PolarDemo" }, - // "/immutable": { component: ImmutableDemo, name: "ImmutableDemo" }, - // "/external-events": { component: ExternalEventsDemo, name: "ExternalEventsDemo" }, - // "/victory-brush-line": { component: VictoryBrushLineDemo, name: "BrushLineDemo" }, - // "/performance": { component: PerformanceDemo, name: "PerformanceDemo" }, - // "/debug": { component: DebugDemo, name: "DebugDemo" }, - // "/label": { component: VictoryLabelDemo, name: "LabelDemo" }, - // "/legend": { component: VictoryLegendDemo, name: "LegendDemo" }, - // "/pie": { component: VictoryPieDemo, name: "PieDemo" }, - // "/victory": { component: VictoryDemo, name: "VictoryDemo" }, - // "/horizontal": { component: HorizontalDemo, name: "HorizontalDemo" }, - // "/draggable": { component: DraggableDemo, name: "DraggableDemo" }, - "/dillon": { component: DillonDemo, name: "Dillon Dev" }, - "/dillon-perf": { component: DillonPerf, name: "Dillon Perf" } + "/axis": { component: AxisDemo, name: "AxisDemo" }, + "/area": { component: AreaDemo, name: "AreaDemo" }, + "/bar": { component: BarDemo, name: "BarDemo" }, + "/chart": { component: ChartDemo, name: "ChartDemo" }, + "/line": { component: LineDemo, name: "LineDemo" }, + "/scatter": { component: ScatterDemo, name: "ScatterDemo" }, + "/errorbar": { component: ErrorBarDemo, name: "ErrorBarDemo" }, + "/candlestick": { component: CandlestickDemo, name: "CandlestickDemo" }, + "/boxplot": { component: BoxplotDemo, name: "BoxplotDemo" }, + "/events": { component: EventsDemo, name: "EventsDemo" }, + "/group": { component: GroupDemo, name: "GroupDemo" }, + "/voronoi": { component: VoronoiDemo, name: "VoronoiDemo" }, + "/tooltip": { component: TooltipDemo, name: "TooltipDemo" }, + "/zoom-container": { component: ZoomContainerDemo, name: "ZoomContainerDemo" }, + "/voronoi-container": { component: VoronoiContainerDemo, name: "VoronoiContainerDemo" }, + "/cursor-container": { component: CursorContainerDemo, name: "CursorContainerDemo" }, + "/brush-container": { component: BrushContainerDemo, name: "BrushContainerDemo" }, + "/animation": { component: AnimationDemo, name: "AnimationDemo" }, + "/selection-container": { component: SelectionDemo, name: "SelectionDemo" }, + "/create-container": { component: CreateContainerDemo, name: "CreateContainerDemo" }, + "/polar": { component: PolarDemo, name: "PolarDemo" }, + "/immutable": { component: ImmutableDemo, name: "ImmutableDemo" }, + "/external-events": { component: ExternalEventsDemo, name: "ExternalEventsDemo" }, + "/victory-brush-line": { component: VictoryBrushLineDemo, name: "BrushLineDemo" }, + "/performance": { component: PerformanceDemo, name: "PerformanceDemo" }, + "/debug": { component: DebugDemo, name: "DebugDemo" }, + "/label": { component: VictoryLabelDemo, name: "LabelDemo" }, + "/legend": { component: VictoryLegendDemo, name: "LegendDemo" }, + "/pie": { component: VictoryPieDemo, name: "PieDemo" }, + "/victory": { component: VictoryDemo, name: "VictoryDemo" }, + "/horizontal": { component: HorizontalDemo, name: "HorizontalDemo" }, + "/draggable": { component: DraggableDemo, name: "DraggableDemo" }, + "/wrapper-perf": { component: WrapperPerf, name: "Dillon Perf" } }; class Home extends React.Component { diff --git a/demo/js/components/dillon-demo.js b/demo/js/components/dillon-demo.js deleted file mode 100644 index 85c2c5b93..000000000 --- a/demo/js/components/dillon-demo.js +++ /dev/null @@ -1,60 +0,0 @@ -/* eslint-disable no-undef */ -/* eslint-disable no-magic-numbers */ -import React from "react"; -import { VictoryChart, VictoryBar, VictoryGroup, VictoryStack } from "victory"; - -class App extends React.Component { - constructor(props) { - super(props); - this.state = { - barData: this.getBarData() - }; - } - - // componentDidMount() { - // /* eslint-disable react/no-did-mount-set-state */ - // this.setStateInterval = window.setInterval(() => { - // this.setState({ - // barData: this.getBarData() - // }); - // }, 2000); - // } - - // componentWillUnmount() { - // window.clearInterval(this.setStateInterval); - // } - - getBarData() { - return [1, 2, 3, 4, 5].map((d) => { - return [{ x: 1, y: Math.random() }, { x: 2, y: Math.random() }, { x: 3, y: Math.random() }]; - }); - } - - render() { - return ( -
- - - - {this.state.barData.map((data, index) => { - return ; - })} - - - {this.state.barData.map((data, index) => { - return ; - })} - - - {this.state.barData.map((data, index) => { - return ; - })} - - - -
- ); - } -} - -export default App; diff --git a/demo/js/components/dillon-perf.js b/demo/js/components/wrapper-perf.js similarity index 100% rename from demo/js/components/dillon-perf.js rename to demo/js/components/wrapper-perf.js diff --git a/packages/victory-bar/src/helper-methods.js b/packages/victory-bar/src/helper-methods.js index 4eb994ce4..6846a4139 100644 --- a/packages/victory-bar/src/helper-methods.js +++ b/packages/victory-bar/src/helper-methods.js @@ -21,7 +21,6 @@ const getBarPosition = (props, datum) => { }; const getCalculatedValues = (props) => { - debugger; const { theme, polar } = props; const defaultStyles = theme && theme.bar && theme.bar.style ? theme.bar.style : {}; const style = Helpers.getStyles(props.style, defaultStyles); diff --git a/packages/victory-chart/src/victory-chart.js b/packages/victory-chart/src/victory-chart.js index 8a7323963..5b29fe9f0 100644 --- a/packages/victory-chart/src/victory-chart.js +++ b/packages/victory-chart/src/victory-chart.js @@ -128,9 +128,7 @@ export default class VictoryChart extends React.Component { const axes = props.polar ? modifiedProps.defaultPolarAxes : modifiedProps.defaultAxes; const childComponents = getChildComponents(modifiedProps, axes); const calculatedProps = getCalculatedProps(modifiedProps, childComponents); - console.log({ "chart.calculatedProps": calculatedProps }); const newChildren = this.getNewChildren(modifiedProps, childComponents, calculatedProps); - // debugger; const containerProps = standalone ? this.getContainerProps(modifiedProps, calculatedProps) : {}; const container = standalone ? this.renderContainer(containerComponent, containerProps) diff --git a/packages/victory-core/src/victory-util/helpers.js b/packages/victory-core/src/victory-util/helpers.js index 661d40116..d64f74615 100644 --- a/packages/victory-core/src/victory-util/helpers.js +++ b/packages/victory-core/src/victory-util/helpers.js @@ -188,7 +188,6 @@ function getCurrentAxis(axis, horizontal) { return horizontal ? otherAxis : axis; } -let reduceCount = 0; /** * @param {Array} children: an array of child components * @param {Function} iteratee: a function with arguments "child", "childName", and "parent" @@ -206,8 +205,7 @@ function reduceChildren( initialMemo = [], combine = (memo, item) => memo.concat(item) ) { - reduceCount++; - console.log(reduceCount); + // console.log(++reduceCount); const sharedProps = [ "data", "domain", @@ -225,13 +223,10 @@ 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 && false //isFunction(child.type.getChildren) - ? 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 nestedChildren = 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); diff --git a/packages/victory-group/src/helper-methods.js b/packages/victory-group/src/helper-methods.js index 34a1e2778..1c38c9f0b 100644 --- a/packages/victory-group/src/helper-methods.js +++ b/packages/victory-group/src/helper-methods.js @@ -19,7 +19,6 @@ function getCalculatedProps(props, childComponents) { const { offset, colorScale, color, polar, horizontal } = props; const categories = props.categories || Wrapper.getCategories(props, childComponents); const datasets = props.datasets || Wrapper.getDataFromChildren(props); - // debugger; const domain = props.domain || { x: Wrapper.getDomain(assign({}, props, { categories }), "x", childComponents), y: Wrapper.getDomain(assign({}, props, { categories }), "y", childComponents) diff --git a/packages/victory-group/src/victory-group.js b/packages/victory-group/src/victory-group.js index dd61852d5..ce0f2625f 100644 --- a/packages/victory-group/src/victory-group.js +++ b/packages/victory-group/src/victory-group.js @@ -108,8 +108,6 @@ export default class VictoryGroup extends React.Component { } render() { - console.log({ "group.this.props": this.props }); - const { role } = this.constructor; const props = this.state && this.state.nodesWillExit ? this.state.oldProps || this.props : this.props; @@ -122,9 +120,7 @@ export default class VictoryGroup extends React.Component { externalEventMutations } = modifiedProps; const childComponents = React.Children.toArray(modifiedProps.children); - debugger; const calculatedProps = getCalculatedProps(modifiedProps, childComponents); - console.log({ "group.calculatedProps": calculatedProps }); const newChildren = this.getNewChildren(modifiedProps, childComponents, calculatedProps); const containerProps = standalone ? this.getContainerProps(modifiedProps, calculatedProps) : {}; const container = standalone diff --git a/packages/victory-stack/src/victory-stack.js b/packages/victory-stack/src/victory-stack.js index d48405cc6..1cabf3500 100644 --- a/packages/victory-stack/src/victory-stack.js +++ b/packages/victory-stack/src/victory-stack.js @@ -125,7 +125,6 @@ export default class VictoryStack extends React.Component { } render() { - console.log({ "stack.this.props": this.props }); const { role } = this.constructor; const props = this.state && this.state.nodesWillExit ? this.state.oldProps || this.props : this.props; @@ -139,7 +138,6 @@ export default class VictoryStack extends React.Component { } = modifiedProps; const childComponents = React.Children.toArray(modifiedProps.children); const calculatedProps = getCalculatedProps(modifiedProps, childComponents); - console.log({ "stack.calculatedProps": calculatedProps }); const newChildren = this.getNewChildren(modifiedProps, childComponents, calculatedProps); const containerProps = standalone ? this.getContainerProps(modifiedProps, calculatedProps) : {}; const container = standalone From f789537acb7a778db880cffd0438b57f377d078f Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Mon, 24 Feb 2020 19:12:10 -0500 Subject: [PATCH 03/13] rename demo name --- demo/js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/js/app.js b/demo/js/app.js index 2252aec03..a20d2c077 100644 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -71,7 +71,7 @@ const MAP = { "/victory": { component: VictoryDemo, name: "VictoryDemo" }, "/horizontal": { component: HorizontalDemo, name: "HorizontalDemo" }, "/draggable": { component: DraggableDemo, name: "DraggableDemo" }, - "/wrapper-perf": { component: WrapperPerf, name: "Dillon Perf" } + "/wrapper-perf": { component: WrapperPerf, name: "Wrapper Perf" } }; class Home extends React.Component { From a49f3b6cbd13e43ffec8a9ae75aee3d57638aaf0 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Mon, 24 Feb 2020 20:53:24 -0500 Subject: [PATCH 04/13] fix bar tests + demo --- demo/js/components/victory-bar-demo.js | 4 ++-- packages/victory-bar/src/helper-methods.js | 2 +- packages/victory-core/src/victory-util/helpers.js | 15 +++++++++++---- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/demo/js/components/victory-bar-demo.js b/demo/js/components/victory-bar-demo.js index d7db0ef20..4d9ec103d 100644 --- a/demo/js/components/victory-bar-demo.js +++ b/demo/js/components/victory-bar-demo.js @@ -139,7 +139,7 @@ export default class App extends React.Component { ]} /> - + {/* - + */} ); } diff --git a/packages/victory-bar/src/helper-methods.js b/packages/victory-bar/src/helper-methods.js index 6846a4139..009bfcdde 100644 --- a/packages/victory-bar/src/helper-methods.js +++ b/packages/victory-bar/src/helper-methods.js @@ -24,7 +24,7 @@ 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 = props.data || Data.getData(props); + const data = Data.getData(props); // Data.getDate needs to be called to formate the data (we may be able to this in a wrapper component) const range = props.range || { x: Helpers.getRange(props, "x"), y: Helpers.getRange(props, "y") diff --git a/packages/victory-core/src/victory-util/helpers.js b/packages/victory-core/src/victory-util/helpers.js index d64f74615..2c2522b88 100644 --- a/packages/victory-core/src/victory-util/helpers.js +++ b/packages/victory-core/src/victory-util/helpers.js @@ -223,10 +223,17 @@ 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 = React.Children.toArray(child.props.children).map((c) => { - const nestedChildProps = assign({}, c.props, pick(childProps, sharedProps)); - return React.cloneElement(c, nestedChildProps); - }); + // const nestedChildren = React.Children.toArray(child.props.children).map((c) => { + // const nestedChildProps = assign({}, c.props, pick(childProps, sharedProps)); + // return React.cloneElement(c, nestedChildProps); + // }); + const nestedChildren = + child.type && isFunction(child.type.getChildren) + ? 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); From 8ecaecdcd4978ee95a5bdd50d15cb2de577fda33 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Mon, 24 Feb 2020 20:55:51 -0500 Subject: [PATCH 05/13] uncomment demo code --- demo/js/components/victory-bar-demo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/js/components/victory-bar-demo.js b/demo/js/components/victory-bar-demo.js index 4d9ec103d..d7db0ef20 100644 --- a/demo/js/components/victory-bar-demo.js +++ b/demo/js/components/victory-bar-demo.js @@ -139,7 +139,7 @@ export default class App extends React.Component { ]} /> - {/* + - */} + ); } From ec88e5c65507f3d99ee982e4fc036063ef469492 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Mon, 24 Feb 2020 21:24:04 -0500 Subject: [PATCH 06/13] swap nestedChildren impl --- .../victory-core/src/victory-util/helpers.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/packages/victory-core/src/victory-util/helpers.js b/packages/victory-core/src/victory-util/helpers.js index 2c2522b88..4b734963a 100644 --- a/packages/victory-core/src/victory-util/helpers.js +++ b/packages/victory-core/src/victory-util/helpers.js @@ -205,7 +205,6 @@ function reduceChildren( initialMemo = [], combine = (memo, item) => memo.concat(item) ) { - // console.log(++reduceCount); const sharedProps = [ "data", "domain", @@ -223,17 +222,10 @@ 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 = React.Children.toArray(child.props.children).map((c) => { - // const nestedChildProps = assign({}, c.props, pick(childProps, sharedProps)); - // return React.cloneElement(c, nestedChildProps); - // }); - const nestedChildren = - child.type && isFunction(child.type.getChildren) - ? 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 nestedChildren = 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); From 8ca2806830924ee784ee9cb1becb4bf0ca2989c5 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Tue, 25 Feb 2020 15:14:06 -0800 Subject: [PATCH 07/13] fix comment and remove test demo --- demo/js/app.js | 4 +- demo/js/components/wrapper-perf.js | 60 ---------------------- packages/victory-bar/src/helper-methods.js | 2 +- 3 files changed, 2 insertions(+), 64 deletions(-) delete mode 100644 demo/js/components/wrapper-perf.js diff --git a/demo/js/app.js b/demo/js/app.js index a20d2c077..2ee4ba763 100644 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -36,7 +36,6 @@ import VictoryPieDemo from "./components/victory-pie-demo"; import VictoryDemo from "./components/victory-demo"; import HorizontalDemo from "./components/horizontal-demo"; import DraggableDemo from "./components/draggable-demo"; -import WrapperPerf from "./components/wrapper-perf"; const MAP = { "/axis": { component: AxisDemo, name: "AxisDemo" }, @@ -70,8 +69,7 @@ const MAP = { "/pie": { component: VictoryPieDemo, name: "PieDemo" }, "/victory": { component: VictoryDemo, name: "VictoryDemo" }, "/horizontal": { component: HorizontalDemo, name: "HorizontalDemo" }, - "/draggable": { component: DraggableDemo, name: "DraggableDemo" }, - "/wrapper-perf": { component: WrapperPerf, name: "Wrapper Perf" } + "/draggable": { component: DraggableDemo, name: "DraggableDemo" } }; class Home extends React.Component { diff --git a/demo/js/components/wrapper-perf.js b/demo/js/components/wrapper-perf.js deleted file mode 100644 index b90b5b1e5..000000000 --- a/demo/js/components/wrapper-perf.js +++ /dev/null @@ -1,60 +0,0 @@ -/* eslint-disable no-invalid-this */ -/* eslint-disable func-style */ -/* eslint-disable no-use-before-define */ -/* eslint-disable no-magic-numbers */ -/* eslint-disable react/no-multi-comp */ -import React from "react"; -import { VictoryBar, VictoryChart, VictoryGroup, VictoryStack } from "victory"; - -export const VictoryExample = () => { - return ( - <> - - - {[...Array(10).keys()].map((index) => ( - - {[...Array(10).keys()].map((idx) => ( - - ))} - - ))} - - - - ); -}; - -const generateFakeData = (n, range) => - [...Array(n).keys()].map((index) => ({ - x: index + 1, - y: Math.random() * range - })); - -class ShowChartButton extends React.Component { - constructor(props) { - super(props); - this.state = { show: false }; - } - - render = () => ( - <> -
- this.setState({ show: !this.state.show })} - /> -
- {this.state.show && } - - ); -} -function App() { - return ( -
- -
- ); -} - -export default App; diff --git a/packages/victory-bar/src/helper-methods.js b/packages/victory-bar/src/helper-methods.js index 009bfcdde..3c0d8f51c 100644 --- a/packages/victory-bar/src/helper-methods.js +++ b/packages/victory-bar/src/helper-methods.js @@ -24,7 +24,7 @@ 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); // Data.getDate needs to be called to formate the data (we may be able to this in a wrapper component) + const data = Data.getData(props); // Data.getDate 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") From 566f57f7b372e17d1ba6286db48b673f2d2484cc Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Wed, 26 Feb 2020 00:38:51 -0800 Subject: [PATCH 08/13] typo --- packages/victory-bar/src/helper-methods.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/victory-bar/src/helper-methods.js b/packages/victory-bar/src/helper-methods.js index 3c0d8f51c..4d8a4981e 100644 --- a/packages/victory-bar/src/helper-methods.js +++ b/packages/victory-bar/src/helper-methods.js @@ -24,7 +24,7 @@ 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); // Data.getDate needs to be called to format the data (we may be able to do this in a wrapper component) + 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") From f4e093373b5b5fc3f92dae30a258e1e8a8af4eeb Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Tue, 3 Mar 2020 18:08:32 -0500 Subject: [PATCH 09/13] wip --- demo/js/app.js | 4 +- demo/js/components/stack-bug.js | 140 ++++++++++++++++++ packages/victory-chart/src/helper-methods.js | 12 ++ .../victory-core/src/victory-util/domain.js | 5 +- .../victory-core/src/victory-util/helpers.js | 16 +- .../victory-core/src/victory-util/wrapper.js | 11 +- packages/victory-stack/src/helper-methods.js | 2 +- 7 files changed, 180 insertions(+), 10 deletions(-) create mode 100644 demo/js/components/stack-bug.js diff --git a/demo/js/app.js b/demo/js/app.js index 2ee4ba763..0d5913354 100644 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -36,6 +36,7 @@ import VictoryPieDemo from "./components/victory-pie-demo"; import VictoryDemo from "./components/victory-demo"; import HorizontalDemo from "./components/horizontal-demo"; import DraggableDemo from "./components/draggable-demo"; +import StackBug from "./components/stack-bug"; const MAP = { "/axis": { component: AxisDemo, name: "AxisDemo" }, @@ -69,7 +70,8 @@ const MAP = { "/pie": { component: VictoryPieDemo, name: "PieDemo" }, "/victory": { component: VictoryDemo, name: "VictoryDemo" }, "/horizontal": { component: HorizontalDemo, name: "HorizontalDemo" }, - "/draggable": { component: DraggableDemo, name: "DraggableDemo" } + "/draggable": { component: DraggableDemo, name: "DraggableDemo" }, + "stack-bug": { component: StackBug, name: "Stack Bug" } }; class Home extends React.Component { diff --git a/demo/js/components/stack-bug.js b/demo/js/components/stack-bug.js new file mode 100644 index 000000000..e8daf426d --- /dev/null +++ b/demo/js/components/stack-bug.js @@ -0,0 +1,140 @@ +/* eslint-disable no-magic-numbers */ +/* eslint-disable no-undef */ +/* eslint-disable */ +import React from "react"; +import { VictoryChart, VictoryBar, VictoryGroup, VictoryStack } from "victory"; + +// const staticData = [ +// [ +// { x: 1, y: 0.009817927244408997 }, +// { x: 2, y: 0.42586222721782807 }, +// { x: 3, y: 0.4008184713786571 } +// ], +// [ +// { x: 1, y: 0.20424273601384724 }, +// { x: 2, y: 0.06850186146804682 }, +// { x: 3, y: 0.7475527052876683 } +// ], +// [ +// { x: 1, y: 0.7176360010060048 }, +// { x: 2, y: 0.3999913253586804 }, +// { x: 3, y: 0.8006962673556197 } +// ], +// [ +// { x: 1, y: 0.15508050339977686 }, +// { x: 2, y: 0.9006242816213939 }, +// { x: 3, y: 0.8135459504426841 } +// ], +// [ +// { x: 1, y: 0.8454739967041625 }, +// { x: 2, y: 0.6908533242234443 }, +// { x: 3, y: 0.6163376520330617 } +// ] +// ]; + +// class App extends React.Component { +// constructor(props) { +// super(props); +// this.state = { +// barData: staticData //this.getBarData() +// }; +// } + +// // componentDidMount() { +// // /* eslint-disable react/no-did-mount-set-state */ +// // this.setStateInterval = window.setInterval(() => { +// // this.setState({ +// // barData: this.getBarData() +// // }); +// // }, 2000); +// // } + +// // componentWillUnmount() { +// // window.clearInterval(this.setStateInterval); +// // } + +// getBarData() { +// return [1, 2, 3, 4, 5].map(() => { +// return [{ x: 1, y: Math.random() }, { x: 2, y: Math.random() }, { x: 3, y: Math.random() }]; +// }); +// } + +// render() { +// return ( +//
+// +// +// +// {this.state.barData.map((data, index) => { +// return ; +// })} +// +// +// {this.state.barData.map((data, index) => { +// return ; +// })} +// +// +// {this.state.barData.map((data, index) => { +// return ; +// })} +// +// +// +//
+// ); +// } +// } + +export const VictoryExample = () => { + return ( + <> + + + {[...Array(10).keys()].map((index) => ( + + {[...Array(10).keys()].map((index) => ( + + ))} + + ))} + + + + ); +}; + +const generateFakeData = (n, range) => + [...Array(n).keys()].map((index) => ({ + x: index + 1, + y: Math.random() * range + })); + +class ShowChartButton extends React.Component { + constructor(props) { + super(props); + this.state = { show: false }; + } + + render = () => ( + <> +
+ this.setState({ show: !this.state.show })} + /> +
+ {this.state.show && } + + ); +} +function App() { + return ( +
+ +
+ ); +} + +export default App; diff --git a/packages/victory-chart/src/helper-methods.js b/packages/victory-chart/src/helper-methods.js index e8d459372..f12acb776 100644 --- a/packages/victory-chart/src/helper-methods.js +++ b/packages/victory-chart/src/helper-methods.js @@ -4,6 +4,7 @@ import React from "react"; import { Helpers, Scale, Axis, Wrapper } from "victory-core"; import { defaults, assign } from "lodash"; +import isFunction from "lodash/isFunction"; const fallbackProps = { width: 450, @@ -75,10 +76,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") @@ -155,6 +158,15 @@ function getChildren(props, childComponents, calculatedProps) { } const getChildComponents = (props, defaultAxes) => { + // const childComponents = React.Children.toArray(props.children).map((child) => { + // if (child.type && isFunction(child.type.getChildren)) { + // child.children = child.type.getChildren(props); + // return child; + // // const children = child.type.getChildren(props); + // } + // return child; + // }); + const childComponents = React.Children.toArray(props.children); if (childComponents.length === 0) { return [defaultAxes.independent, defaultAxes.dependent]; diff --git a/packages/victory-core/src/victory-util/domain.js b/packages/victory-core/src/victory-util/domain.js index b40a4e7e3..da747b850 100644 --- a/packages/victory-core/src/victory-util/domain.js +++ b/packages/victory-core/src/victory-util/domain.js @@ -313,7 +313,7 @@ function getDomainWithZero(props, axis) { const formatDomainFunction = (domain) => { return formatDomain(ensureZero(domain), props, axis); }; - + props.data = dataset; return createDomainFunction(getDomainFunction, formatDomainFunction)(props, axis); } @@ -386,7 +386,8 @@ function isDomainComponent(component) { ]; return includes(whitelist, role); } - +window.getDomainFromData = getDomainFromData; +window.getDomainWithZero = getDomainWithZero; export default { createDomainFunction, formatDomain, diff --git a/packages/victory-core/src/victory-util/helpers.js b/packages/victory-core/src/victory-util/helpers.js index 4b734963a..90ff57e96 100644 --- a/packages/victory-core/src/victory-util/helpers.js +++ b/packages/victory-core/src/victory-util/helpers.js @@ -222,10 +222,18 @@ 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 = React.Children.toArray(child.props.children).map((c) => { - const nestedChildProps = assign({}, c.props, pick(childProps, sharedProps)); - return React.cloneElement(c, nestedChildProps); - }); + // const nestedChildren = React.Children.toArray(child.props.children).map((c) => { + // const nestedChildProps = assign({}, c.props, pick(childProps, sharedProps)); + // return React.cloneElement(c, nestedChildProps); + // }); + const nestedChildren = + child.type && child.type.role === "stack" && isFunction(child.type.getChildren) + ? 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); diff --git a/packages/victory-core/src/victory-util/wrapper.js b/packages/victory-core/src/victory-util/wrapper.js index 0fbc9acbb..598b73efc 100644 --- a/packages/victory-core/src/victory-util/wrapper.js +++ b/packages/victory-core/src/victory-util/wrapper.js @@ -183,16 +183,22 @@ export default { ? assign(baseParentProps, { data: parentData }) : baseParentProps; + // HERE const iteratee = (child) => { const sharedProps = assign({}, child.props, parentProps); if (!Domain.isDomainComponent(child)) { return null; } else if (child.type && isFunction(child.type.getDomain)) { - return child.props && child.type.getDomain(sharedProps, axis); + const ret = child.props && child.type.getDomain(sharedProps, axis); + return ret; } else { - return Domain.getDomain(sharedProps, axis); + const ret = Domain.getDomain(sharedProps, axis); + + return ret; } }; + if (axis === "y") debugger; + 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); @@ -211,6 +217,7 @@ export default { } else if (child.type && isFunction(child.type.getData)) { child = parent ? React.cloneElement(child, parent.props) : child; childData = child.type.getData(childProps); + child = React.cloneElement(child, { test: "test", data: childData }); } else { childData = Data.getData(childProps); } diff --git a/packages/victory-stack/src/helper-methods.js b/packages/victory-stack/src/helper-methods.js index bfad62385..79a830171 100644 --- a/packages/victory-stack/src/helper-methods.js +++ b/packages/victory-stack/src/helper-methods.js @@ -112,7 +112,7 @@ function getCalculatedProps(props, childComponents) { props = Helpers.modifyProps(props, fallbackProps, role); const style = Wrapper.getStyle(props.theme, props.style, role); const categories = props.categories || Wrapper.getCategories(props, childComponents); - const datasets = props.datasets || stackData(props, childComponents); + const datasets = stackData(props, childComponents); const children = childComponents.map((c, i) => { return React.cloneElement(c, { data: datasets[i] }); }); From 345fb66067329a864c4781175ca736413ce74a61 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Wed, 4 Mar 2020 12:00:22 -0500 Subject: [PATCH 10/13] wip --- packages/victory-core/src/victory-util/helpers.js | 5 +---- packages/victory-core/src/victory-util/wrapper.js | 9 ++------- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/victory-core/src/victory-util/helpers.js b/packages/victory-core/src/victory-util/helpers.js index 90ff57e96..512b4551b 100644 --- a/packages/victory-core/src/victory-util/helpers.js +++ b/packages/victory-core/src/victory-util/helpers.js @@ -222,10 +222,7 @@ 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 = React.Children.toArray(child.props.children).map((c) => { - // const nestedChildProps = assign({}, c.props, pick(childProps, sharedProps)); - // return React.cloneElement(c, nestedChildProps); - // }); + const nestedChildren = child.type && child.type.role === "stack" && isFunction(child.type.getChildren) ? child.type.getChildren(childProps) diff --git a/packages/victory-core/src/victory-util/wrapper.js b/packages/victory-core/src/victory-util/wrapper.js index 598b73efc..ae9d8f036 100644 --- a/packages/victory-core/src/victory-util/wrapper.js +++ b/packages/victory-core/src/victory-util/wrapper.js @@ -183,21 +183,16 @@ export default { ? assign(baseParentProps, { data: parentData }) : baseParentProps; - // HERE const iteratee = (child) => { const sharedProps = assign({}, child.props, parentProps); if (!Domain.isDomainComponent(child)) { return null; } else if (child.type && isFunction(child.type.getDomain)) { - const ret = child.props && child.type.getDomain(sharedProps, axis); - return ret; + return child.props && child.type.getDomain(sharedProps, axis); } else { - const ret = Domain.getDomain(sharedProps, axis); - - return ret; + return Domain.getDomain(sharedProps, axis); } }; - if (axis === "y") debugger; const childDomains = Helpers.reduceChildren(children, iteratee, props); const min = childDomains.length === 0 ? 0 : Collection.getMinValue(childDomains); From 782d08152fac008a6ce8344274e986d71c9f886c Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Wed, 4 Mar 2020 12:08:51 -0500 Subject: [PATCH 11/13] clean up wip --- packages/victory-chart/src/helper-methods.js | 10 ---------- packages/victory-core/src/victory-util/domain.js | 4 +--- packages/victory-core/src/victory-util/helpers.js | 2 +- packages/victory-core/src/victory-util/wrapper.js | 1 - packages/victory-stack/src/helper-methods.js | 2 +- 5 files changed, 3 insertions(+), 16 deletions(-) diff --git a/packages/victory-chart/src/helper-methods.js b/packages/victory-chart/src/helper-methods.js index f12acb776..e4ffed651 100644 --- a/packages/victory-chart/src/helper-methods.js +++ b/packages/victory-chart/src/helper-methods.js @@ -4,7 +4,6 @@ import React from "react"; import { Helpers, Scale, Axis, Wrapper } from "victory-core"; import { defaults, assign } from "lodash"; -import isFunction from "lodash/isFunction"; const fallbackProps = { width: 450, @@ -158,15 +157,6 @@ function getChildren(props, childComponents, calculatedProps) { } const getChildComponents = (props, defaultAxes) => { - // const childComponents = React.Children.toArray(props.children).map((child) => { - // if (child.type && isFunction(child.type.getChildren)) { - // child.children = child.type.getChildren(props); - // return child; - // // const children = child.type.getChildren(props); - // } - // return child; - // }); - const childComponents = React.Children.toArray(props.children); if (childComponents.length === 0) { return [defaultAxes.independent, defaultAxes.dependent]; diff --git a/packages/victory-core/src/victory-util/domain.js b/packages/victory-core/src/victory-util/domain.js index da747b850..85b5174f8 100644 --- a/packages/victory-core/src/victory-util/domain.js +++ b/packages/victory-core/src/victory-util/domain.js @@ -313,7 +313,6 @@ function getDomainWithZero(props, axis) { const formatDomainFunction = (domain) => { return formatDomain(ensureZero(domain), props, axis); }; - props.data = dataset; return createDomainFunction(getDomainFunction, formatDomainFunction)(props, axis); } @@ -386,8 +385,7 @@ function isDomainComponent(component) { ]; return includes(whitelist, role); } -window.getDomainFromData = getDomainFromData; -window.getDomainWithZero = getDomainWithZero; + export default { createDomainFunction, formatDomain, diff --git a/packages/victory-core/src/victory-util/helpers.js b/packages/victory-core/src/victory-util/helpers.js index 512b4551b..6014d90e2 100644 --- a/packages/victory-core/src/victory-util/helpers.js +++ b/packages/victory-core/src/victory-util/helpers.js @@ -224,7 +224,7 @@ function reduceChildren( const childProps = assign({}, child.props, pick(parentProps, sharedProps)); const nestedChildren = - child.type && child.type.role === "stack" && isFunction(child.type.getChildren) + child.type && isFunction(child.type.getChildren) ? child.type.getChildren(childProps) : React.Children.toArray(child.props.children).map((c) => { const nestedChildProps = assign({}, c.props, pick(childProps, sharedProps)); diff --git a/packages/victory-core/src/victory-util/wrapper.js b/packages/victory-core/src/victory-util/wrapper.js index ae9d8f036..9e794e04e 100644 --- a/packages/victory-core/src/victory-util/wrapper.js +++ b/packages/victory-core/src/victory-util/wrapper.js @@ -212,7 +212,6 @@ export default { } else if (child.type && isFunction(child.type.getData)) { child = parent ? React.cloneElement(child, parent.props) : child; childData = child.type.getData(childProps); - child = React.cloneElement(child, { test: "test", data: childData }); } else { childData = Data.getData(childProps); } diff --git a/packages/victory-stack/src/helper-methods.js b/packages/victory-stack/src/helper-methods.js index 79a830171..bfad62385 100644 --- a/packages/victory-stack/src/helper-methods.js +++ b/packages/victory-stack/src/helper-methods.js @@ -112,7 +112,7 @@ function getCalculatedProps(props, childComponents) { props = Helpers.modifyProps(props, fallbackProps, role); const style = Wrapper.getStyle(props.theme, props.style, role); const categories = props.categories || Wrapper.getCategories(props, childComponents); - const datasets = stackData(props, childComponents); + const datasets = props.datasets || stackData(props, childComponents); const children = childComponents.map((c, i) => { return React.cloneElement(c, { data: datasets[i] }); }); From e7911e90dab0320ca857ab60ddcd822296a191c5 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Wed, 4 Mar 2020 12:13:05 -0500 Subject: [PATCH 12/13] bail out on calls to getChildren if its not a stacked component --- packages/victory-core/src/victory-util/helpers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/victory-core/src/victory-util/helpers.js b/packages/victory-core/src/victory-util/helpers.js index 6014d90e2..512b4551b 100644 --- a/packages/victory-core/src/victory-util/helpers.js +++ b/packages/victory-core/src/victory-util/helpers.js @@ -224,7 +224,7 @@ function reduceChildren( 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) ? child.type.getChildren(childProps) : React.Children.toArray(child.props.children).map((c) => { const nestedChildProps = assign({}, c.props, pick(childProps, sharedProps)); From fbca897fb068795db23fb814f04ce84c1ef0c324 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Wed, 4 Mar 2020 12:23:42 -0500 Subject: [PATCH 13/13] remove testing demo --- demo/js/app.js | 4 +- demo/js/components/stack-bug.js | 140 -------------------------------- 2 files changed, 1 insertion(+), 143 deletions(-) delete mode 100644 demo/js/components/stack-bug.js diff --git a/demo/js/app.js b/demo/js/app.js index 0d5913354..2ee4ba763 100644 --- a/demo/js/app.js +++ b/demo/js/app.js @@ -36,7 +36,6 @@ import VictoryPieDemo from "./components/victory-pie-demo"; import VictoryDemo from "./components/victory-demo"; import HorizontalDemo from "./components/horizontal-demo"; import DraggableDemo from "./components/draggable-demo"; -import StackBug from "./components/stack-bug"; const MAP = { "/axis": { component: AxisDemo, name: "AxisDemo" }, @@ -70,8 +69,7 @@ const MAP = { "/pie": { component: VictoryPieDemo, name: "PieDemo" }, "/victory": { component: VictoryDemo, name: "VictoryDemo" }, "/horizontal": { component: HorizontalDemo, name: "HorizontalDemo" }, - "/draggable": { component: DraggableDemo, name: "DraggableDemo" }, - "stack-bug": { component: StackBug, name: "Stack Bug" } + "/draggable": { component: DraggableDemo, name: "DraggableDemo" } }; class Home extends React.Component { diff --git a/demo/js/components/stack-bug.js b/demo/js/components/stack-bug.js deleted file mode 100644 index e8daf426d..000000000 --- a/demo/js/components/stack-bug.js +++ /dev/null @@ -1,140 +0,0 @@ -/* eslint-disable no-magic-numbers */ -/* eslint-disable no-undef */ -/* eslint-disable */ -import React from "react"; -import { VictoryChart, VictoryBar, VictoryGroup, VictoryStack } from "victory"; - -// const staticData = [ -// [ -// { x: 1, y: 0.009817927244408997 }, -// { x: 2, y: 0.42586222721782807 }, -// { x: 3, y: 0.4008184713786571 } -// ], -// [ -// { x: 1, y: 0.20424273601384724 }, -// { x: 2, y: 0.06850186146804682 }, -// { x: 3, y: 0.7475527052876683 } -// ], -// [ -// { x: 1, y: 0.7176360010060048 }, -// { x: 2, y: 0.3999913253586804 }, -// { x: 3, y: 0.8006962673556197 } -// ], -// [ -// { x: 1, y: 0.15508050339977686 }, -// { x: 2, y: 0.9006242816213939 }, -// { x: 3, y: 0.8135459504426841 } -// ], -// [ -// { x: 1, y: 0.8454739967041625 }, -// { x: 2, y: 0.6908533242234443 }, -// { x: 3, y: 0.6163376520330617 } -// ] -// ]; - -// class App extends React.Component { -// constructor(props) { -// super(props); -// this.state = { -// barData: staticData //this.getBarData() -// }; -// } - -// // componentDidMount() { -// // /* eslint-disable react/no-did-mount-set-state */ -// // this.setStateInterval = window.setInterval(() => { -// // this.setState({ -// // barData: this.getBarData() -// // }); -// // }, 2000); -// // } - -// // componentWillUnmount() { -// // window.clearInterval(this.setStateInterval); -// // } - -// getBarData() { -// return [1, 2, 3, 4, 5].map(() => { -// return [{ x: 1, y: Math.random() }, { x: 2, y: Math.random() }, { x: 3, y: Math.random() }]; -// }); -// } - -// render() { -// return ( -//
-// -// -// -// {this.state.barData.map((data, index) => { -// return ; -// })} -// -// -// {this.state.barData.map((data, index) => { -// return ; -// })} -// -// -// {this.state.barData.map((data, index) => { -// return ; -// })} -// -// -// -//
-// ); -// } -// } - -export const VictoryExample = () => { - return ( - <> - - - {[...Array(10).keys()].map((index) => ( - - {[...Array(10).keys()].map((index) => ( - - ))} - - ))} - - - - ); -}; - -const generateFakeData = (n, range) => - [...Array(n).keys()].map((index) => ({ - x: index + 1, - y: Math.random() * range - })); - -class ShowChartButton extends React.Component { - constructor(props) { - super(props); - this.state = { show: false }; - } - - render = () => ( - <> -
- this.setState({ show: !this.state.show })} - /> -
- {this.state.show && } - - ); -} -function App() { - return ( -
- -
- ); -} - -export default App;