From 5ec6b3e4fb40f2d586b445144cdcf45e002a851a Mon Sep 17 00:00:00 2001 From: boygirl Date: Tue, 6 Nov 2018 21:10:36 -0800 Subject: [PATCH 01/12] allow individual innerRadius, cornerRadius and radius --- packages/victory-pie/src/helper-methods.js | 7 +++++-- packages/victory-pie/src/slice.js | 24 ++++++++++++++++++++-- packages/victory-pie/src/victory-pie.js | 4 ++-- 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/packages/victory-pie/src/helper-methods.js b/packages/victory-pie/src/helper-methods.js index d1af6773c..c99de313b 100644 --- a/packages/victory-pie/src/helper-methods.js +++ b/packages/victory-pie/src/helper-methods.js @@ -162,7 +162,10 @@ export const getBaseProps = (props, fallbackProps) => { props = Helpers.modifyProps(props, fallbackProps, "pie"); const calculatedValues = getCalculatedValues(props); const { slices, style, pathFunction, data, origin } = calculatedValues; - const { labels, events, sharedEvents, height, width, standalone, name } = props; + const { + labels, events, sharedEvents, height, width, standalone, name, + innerRadius, outerRadius, cornerRadius + } = props; const initialChildProps = { parent: { standalone, height, width, slices, pathFunction, name, style: style.parent } }; @@ -171,7 +174,7 @@ export const getBaseProps = (props, fallbackProps) => { const datum = data[index]; const eventKey = datum.eventKey || index; const dataProps = { - index, slice, pathFunction, datum, data, origin, + index, slice, datum, data, origin, innerRadius, outerRadius, cornerRadius, style: getSliceStyle(index, calculatedValues) }; childProps[eventKey] = { diff --git a/packages/victory-pie/src/slice.js b/packages/victory-pie/src/slice.js index 544665861..dff3993d1 100644 --- a/packages/victory-pie/src/slice.js +++ b/packages/victory-pie/src/slice.js @@ -2,13 +2,18 @@ import React from "react"; import PropTypes from "prop-types"; import { Helpers, CommonProps, Path } from "victory-core"; import { isFunction } from "lodash"; +import * as d3Shape from "d3-shape"; + export default class Slice extends React.Component { static propTypes = { ...CommonProps.primitiveProps, + cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), datum: PropTypes.object, + innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), pathComponent: PropTypes.element, pathFunction: PropTypes.func, + radius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), slice: PropTypes.object }; @@ -16,17 +21,32 @@ export default class Slice extends React.Component { pathComponent: }; + getPathFunction(props) { + if (isFunction(props.pathFunction)) { + return props.pathFunction; + } + const { datum, active } = this.props; + const cornerRadius = Helpers.evaluateProp(props.cornerRadius, datum, active); + const innerRadius = Helpers.evaluateProp(props.innerRadius, datum, active); + const radius = Helpers.evaluateProp(props.radius, datum, active); + return d3Shape.arc() + .cornerRadius(cornerRadius) + .outerRadius(radius) + .innerRadius(innerRadius); + } + render() { const { datum, slice, active, role, shapeRendering, className, - origin, events, pathComponent, pathFunction, style, clipPath + origin, events, pathComponent, style, clipPath } = this.props; const defaultTransform = origin ? `translate(${origin.x}, ${origin.y})` : undefined; const transform = this.props.transform || defaultTransform; + const pathFunction = this.getPathFunction(this.props); return React.cloneElement(pathComponent, { className, role, shapeRendering, events, transform, clipPath, style: Helpers.evaluateStyle(style, datum, active), - d: isFunction(pathFunction) ? pathFunction(slice) : undefined + d: pathFunction(slice) }); } } diff --git a/packages/victory-pie/src/victory-pie.js b/packages/victory-pie/src/victory-pie.js index 712aa8ec7..e0aeccb98 100644 --- a/packages/victory-pie/src/victory-pie.js +++ b/packages/victory-pie/src/victory-pie.js @@ -99,7 +99,7 @@ class VictoryPie extends React.Component { })), groupComponent: PropTypes.element, height: CustomPropTypes.nonNegative, - innerRadius: CustomPropTypes.nonNegative, + innerRadius: PropTypes.oneOfType([ CustomPropTypes.nonNegative, PropTypes.func ]), labelComponent: PropTypes.element, labelPosition: PropTypes.oneOf(["startAngle", "centroid", "endAngle"]), labelRadius: PropTypes.oneOfType([ CustomPropTypes.nonNegative, PropTypes.func ]), @@ -117,7 +117,7 @@ class VictoryPie extends React.Component { left: PropTypes.number, right: PropTypes.number }) ]), - radius: CustomPropTypes.nonNegative, + radius: PropTypes.oneOfType([ CustomPropTypes.nonNegative, PropTypes.func ]), sharedEvents: PropTypes.shape({ events: PropTypes.array, getEventState: PropTypes.func From 3acb0bba8c49d67c06d19b7d2b023368dc44a3b3 Mon Sep 17 00:00:00 2001 From: boygirl Date: Wed, 7 Nov 2018 13:04:14 -0800 Subject: [PATCH 02/12] clean up radius and pathFunction logic --- packages/victory-pie/src/helper-methods.js | 24 +++++++++------------- packages/victory-pie/src/slice.js | 15 +++++++------- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/packages/victory-pie/src/helper-methods.js b/packages/victory-pie/src/helper-methods.js index c99de313b..61dce3cdf 100644 --- a/packages/victory-pie/src/helper-methods.js +++ b/packages/victory-pie/src/helper-methods.js @@ -24,7 +24,7 @@ const getColor = (style, colors, index) => { }; const getRadius = (props, padding) => { - if (props.radius) { + if (typeof props.radius === "number") { return props.radius; } return Math.min( @@ -58,15 +58,11 @@ const getCalculatedValues = (props) => { const style = Helpers.getStyles(props.style, styleObject, "auto", "100%"); const colors = Array.isArray(colorScale) ? colorScale : Style.getColorScale(colorScale); const padding = Helpers.getPadding(props); - const radius = getRadius(props, padding); + const defaultRadius = getRadius(props, padding); const origin = getOrigin(props, padding); const data = Data.getData(props); const slices = getSlices(props, data); - const pathFunction = d3Shape.arc() - .cornerRadius(props.cornerRadius) - .outerRadius(radius) - .innerRadius(props.innerRadius); - return { style, colors, padding, radius, data, slices, pathFunction, origin }; + return { style, colors, padding, defaultRadius, data, slices, origin }; }; const getSliceStyle = (index, calculatedValues) => { @@ -138,12 +134,12 @@ const getVerticalAnchor = (orientation) => { const getLabelProps = (props, dataProps, calculatedValues) => { const { index, datum, data, slice } = dataProps; - const { style, radius, origin } = calculatedValues; + const { style, defaultRadius, origin } = calculatedValues; const labelStyle = Helpers.evaluateStyle( assign({ padding: 0 }, style.labels), datum, props.active ); const labelRadius = Helpers.evaluateProp(props.labelRadius, datum); - const labelArc = getLabelArc(radius, labelRadius, labelStyle); + const labelArc = getLabelArc(defaultRadius, labelRadius, labelStyle); const position = getLabelPosition(labelArc, slice, props.labelPosition); const orientation = getLabelOrientation(slice); return { @@ -161,20 +157,20 @@ const getLabelProps = (props, dataProps, calculatedValues) => { export const getBaseProps = (props, fallbackProps) => { props = Helpers.modifyProps(props, fallbackProps, "pie"); const calculatedValues = getCalculatedValues(props); - const { slices, style, pathFunction, data, origin } = calculatedValues; + const { slices, style, data, origin, defaultRadius } = calculatedValues; const { - labels, events, sharedEvents, height, width, standalone, name, - innerRadius, outerRadius, cornerRadius + labels, events, sharedEvents, height, width, standalone, name, innerRadius, cornerRadius } = props; + const radius = props.radius || defaultRadius; const initialChildProps = { - parent: { standalone, height, width, slices, pathFunction, name, style: style.parent } + parent: { standalone, height, width, slices, name, style: style.parent } }; return slices.reduce((childProps, slice, index) => { const datum = data[index]; const eventKey = datum.eventKey || index; const dataProps = { - index, slice, datum, data, origin, innerRadius, outerRadius, cornerRadius, + index, slice, datum, data, origin, innerRadius, radius, cornerRadius, style: getSliceStyle(index, calculatedValues) }; childProps[eventKey] = { diff --git a/packages/victory-pie/src/slice.js b/packages/victory-pie/src/slice.js index dff3993d1..d6080a6dd 100644 --- a/packages/victory-pie/src/slice.js +++ b/packages/victory-pie/src/slice.js @@ -21,32 +21,33 @@ export default class Slice extends React.Component { pathComponent: }; - getPathFunction(props) { + getPath(props) { + const { datum, active, slice } = this.props; + if (isFunction(props.pathFunction)) { - return props.pathFunction; + return props.pathFunction(slice); } - const { datum, active } = this.props; const cornerRadius = Helpers.evaluateProp(props.cornerRadius, datum, active); const innerRadius = Helpers.evaluateProp(props.innerRadius, datum, active); const radius = Helpers.evaluateProp(props.radius, datum, active); - return d3Shape.arc() + const pathFunction = d3Shape.arc() .cornerRadius(cornerRadius) .outerRadius(radius) .innerRadius(innerRadius); + return pathFunction(slice); } render() { const { - datum, slice, active, role, shapeRendering, className, + datum, active, role, shapeRendering, className, origin, events, pathComponent, style, clipPath } = this.props; const defaultTransform = origin ? `translate(${origin.x}, ${origin.y})` : undefined; const transform = this.props.transform || defaultTransform; - const pathFunction = this.getPathFunction(this.props); return React.cloneElement(pathComponent, { className, role, shapeRendering, events, transform, clipPath, style: Helpers.evaluateStyle(style, datum, active), - d: pathFunction(slice) + d: this.getPath(this.props) }); } } From 49a660ad96b37be10b86260373407969fb6b332f Mon Sep 17 00:00:00 2001 From: boygirl Date: Wed, 7 Nov 2018 16:02:12 -0800 Subject: [PATCH 03/12] clean up demo --- demo/components/victory-pie-demo.js | 54 +++++----------------- packages/victory-pie/src/helper-methods.js | 1 - 2 files changed, 12 insertions(+), 43 deletions(-) diff --git a/demo/components/victory-pie-demo.js b/demo/components/victory-pie-demo.js index f9c4e0284..65754e455 100644 --- a/demo/components/victory-pie-demo.js +++ b/demo/components/victory-pie-demo.js @@ -1,52 +1,13 @@ /*global window:false*/ /*eslint-disable no-magic-numbers,react/no-multi-comp*/ import { merge, random, range } from "lodash"; -import PropTypes from "prop-types"; import React from "react"; -import { VictoryPie, Slice } from "../../packages/victory-pie/src/index"; +import { VictoryPie } from "../../packages/victory-pie/src/index"; import { VictoryTooltip } from "../../packages/victory-tooltip/src/index"; import { VictoryContainer, VictoryTheme, VictoryLabel } from "../../packages/victory-core/src/index"; -class BorderLabelSlice extends React.Component { - static propTypes = { - ...Slice.propTypes, - index: PropTypes.number - }; - - renderSlice(props) { - return ; - } - - renderLabel(props) { - const { pathFunction, datum, slice, index, origin } = props; - const path = pathFunction({ ...slice, endAngle: slice.startAngle }); - const pathId = `textPath-path-${index}`; - return ( - - - - - {datum.label || datum.xName || datum.x} - - - - ); - } - - render() { - const { index } = this.props; - - return ( - - {this.renderSlice(this.props)} - {this.renderLabel(this.props)} - - ); - } -} - export default class App extends React.Component { constructor(props) { super(props); @@ -145,6 +106,14 @@ export default class App extends React.Component { labelRadius={60} padding={{ bottom: 50, left: 50, right: 10 }} width={400} height={200} + radius={(d) => d.radius} + data={[ + { x: 1, y: 1, radius: 40 }, + { x: 2, y: 3, radius: 50 }, + { x: 3, y: 5, radius: 70 }, + { x: 4, y: 2, radius: 80 }, + { x: 5, y: 3, radius: 60 } + ]} /> { + const radius = props.radius === 150 ? undefined : 150; return { - style: merge({}, props.style, { fill: "#F50057" }) + style: merge({}, props.style, { fill: "#F50057" }), + radius }; } }, { @@ -266,7 +237,6 @@ export default class App extends React.Component { innerRadius={100} animate={{ duration: 2000 }} colorScale={this.state.colorScale} - dataComponent={} /> { style: getSliceStyle(index, calculatedValues) }; childProps[eventKey] = { - data: dataProps }; const text = getLabelText(props, datum, index); if (text !== undefined && text !== null || (labels && (events || sharedEvents))) { From 8a6310d22e3a0f31f55cf02f0f4eefc10a50715e Mon Sep 17 00:00:00 2001 From: boygirl Date: Wed, 7 Nov 2018 16:54:18 -0800 Subject: [PATCH 04/12] initial work on custom start and end angle per slice --- demo/components/victory-pie-demo.js | 4 +++- packages/victory-pie/src/helper-methods.js | 11 ++++++++--- packages/victory-pie/src/slice.js | 14 ++++++++++---- packages/victory-pie/src/victory-pie.js | 11 ++++++++++- 4 files changed, 31 insertions(+), 9 deletions(-) diff --git a/demo/components/victory-pie-demo.js b/demo/components/victory-pie-demo.js index 65754e455..35ed0d4d1 100644 --- a/demo/components/victory-pie-demo.js +++ b/demo/components/victory-pie-demo.js @@ -169,9 +169,11 @@ export default class App extends React.Component { { mutation: (props) => { const radius = props.radius === 150 ? undefined : 150; + const startAngle = props.startAngle === undefined ? 0 : undefined; + const endAngle = props.endAngle === undefined ? 1.5 : undefined; return { style: merge({}, props.style, { fill: "#F50057" }), - radius + radius, startAngle, endAngle }; } }, { diff --git a/packages/victory-pie/src/helper-methods.js b/packages/victory-pie/src/helper-methods.js index 03b699dbe..f4ba20f98 100644 --- a/packages/victory-pie/src/helper-methods.js +++ b/packages/victory-pie/src/helper-methods.js @@ -1,5 +1,5 @@ /*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2, 45, 135, 180, 225, 315] }]*/ -import { assign, isFunction, isPlainObject } from "lodash"; +import { assign, defaults, isFunction, isPlainObject } from "lodash"; import * as d3Shape from "d3-shape"; import { Helpers, Data, Style } from "victory-core"; @@ -159,7 +159,8 @@ export const getBaseProps = (props, fallbackProps) => { const calculatedValues = getCalculatedValues(props); const { slices, style, data, origin, defaultRadius } = calculatedValues; const { - labels, events, sharedEvents, height, width, standalone, name, innerRadius, cornerRadius + labels, events, sharedEvents, height, width, standalone, name, + innerRadius, cornerRadius } = props; const radius = props.radius || defaultRadius; const initialChildProps = { @@ -167,13 +168,17 @@ export const getBaseProps = (props, fallbackProps) => { }; return slices.reduce((childProps, slice, index) => { - const datum = data[index]; + const datum = defaults( + {}, data[index], { startAngle: slice.startAngle, endAngle: slice.endAngle } + ); + console.log(datum.startAngle) const eventKey = datum.eventKey || index; const dataProps = { index, slice, datum, data, origin, innerRadius, radius, cornerRadius, style: getSliceStyle(index, calculatedValues) }; childProps[eventKey] = { + data: dataProps }; const text = getLabelText(props, datum, index); if (text !== undefined && text !== null || (labels && (events || sharedEvents))) { diff --git a/packages/victory-pie/src/slice.js b/packages/victory-pie/src/slice.js index d6080a6dd..899d5c039 100644 --- a/packages/victory-pie/src/slice.js +++ b/packages/victory-pie/src/slice.js @@ -10,11 +10,14 @@ export default class Slice extends React.Component { ...CommonProps.primitiveProps, cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), datum: PropTypes.object, + endAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), pathComponent: PropTypes.element, pathFunction: PropTypes.func, radius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), - slice: PropTypes.object + slice: PropTypes.object, + startAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func]) + }; static defaultProps = { @@ -22,19 +25,22 @@ export default class Slice extends React.Component { }; getPath(props) { - const { datum, active, slice } = this.props; - + const { datum, active, slice } = props; if (isFunction(props.pathFunction)) { return props.pathFunction(slice); } const cornerRadius = Helpers.evaluateProp(props.cornerRadius, datum, active); const innerRadius = Helpers.evaluateProp(props.innerRadius, datum, active); const radius = Helpers.evaluateProp(props.radius, datum, active); + const defaultStartAngle = datum.startAngle !== undefined ? datum.startAngle : slice.startAngle; + const defaultEndAngle = datum.endAngle !== undefined ? datum.endAngle : slice.endAngle; + const startAngle = props.startAngle !== undefined ? props.startAngle : defaultStartAngle; + const endAngle = props.endAngle !== undefined ? props.endAngle : defaultEndAngle; const pathFunction = d3Shape.arc() .cornerRadius(cornerRadius) .outerRadius(radius) .innerRadius(innerRadius); - return pathFunction(slice); + return pathFunction({ startAngle, endAngle }); } render() { diff --git a/packages/victory-pie/src/victory-pie.js b/packages/victory-pie/src/victory-pie.js index e0aeccb98..2da2e907c 100644 --- a/packages/victory-pie/src/victory-pie.js +++ b/packages/victory-pie/src/victory-pie.js @@ -42,6 +42,13 @@ class VictoryPie extends React.Component { static role = "pie"; static defaultTransitions = { + onLoad: { + duration: 2000, + before: () => { + return { _y: 0, startAngle: 0, label: " " }; + }, + after: (datum) => ({ _y: datum._y, startAngle: undefined, label: datum.label }) + }, onExit: { duration: 500, before: () => ({ _y: 0, label: " " }) @@ -49,7 +56,9 @@ class VictoryPie extends React.Component { onEnter: { duration: 500, before: () => ({ _y: 0, label: " " }), - after: (datum) => ({ y_: datum._y, label: datum.label }) + after: (datum) => ({ + y_: datum._y, label: datum.label + }) } }; From 9ee03ee63e2d263341b82dc7fb43488750bf4f83 Mon Sep 17 00:00:00 2001 From: boygirl Date: Thu, 8 Nov 2018 20:46:29 -0800 Subject: [PATCH 05/12] clean up startAngle and endAngle --- packages/victory-pie/src/helper-methods.js | 7 ++----- packages/victory-pie/src/slice.js | 6 ++---- packages/victory-pie/src/victory-pie.js | 7 ------- 3 files changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/victory-pie/src/helper-methods.js b/packages/victory-pie/src/helper-methods.js index f4ba20f98..8fa588ee7 100644 --- a/packages/victory-pie/src/helper-methods.js +++ b/packages/victory-pie/src/helper-methods.js @@ -1,5 +1,5 @@ /*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2, 45, 135, 180, 225, 315] }]*/ -import { assign, defaults, isFunction, isPlainObject } from "lodash"; +import { assign, isFunction, isPlainObject } from "lodash"; import * as d3Shape from "d3-shape"; import { Helpers, Data, Style } from "victory-core"; @@ -168,10 +168,7 @@ export const getBaseProps = (props, fallbackProps) => { }; return slices.reduce((childProps, slice, index) => { - const datum = defaults( - {}, data[index], { startAngle: slice.startAngle, endAngle: slice.endAngle } - ); - console.log(datum.startAngle) + const datum = data[index]; const eventKey = datum.eventKey || index; const dataProps = { index, slice, datum, data, origin, innerRadius, radius, cornerRadius, diff --git a/packages/victory-pie/src/slice.js b/packages/victory-pie/src/slice.js index 899d5c039..a0a53beab 100644 --- a/packages/victory-pie/src/slice.js +++ b/packages/victory-pie/src/slice.js @@ -32,10 +32,8 @@ export default class Slice extends React.Component { const cornerRadius = Helpers.evaluateProp(props.cornerRadius, datum, active); const innerRadius = Helpers.evaluateProp(props.innerRadius, datum, active); const radius = Helpers.evaluateProp(props.radius, datum, active); - const defaultStartAngle = datum.startAngle !== undefined ? datum.startAngle : slice.startAngle; - const defaultEndAngle = datum.endAngle !== undefined ? datum.endAngle : slice.endAngle; - const startAngle = props.startAngle !== undefined ? props.startAngle : defaultStartAngle; - const endAngle = props.endAngle !== undefined ? props.endAngle : defaultEndAngle; + const startAngle = props.startAngle !== undefined ? props.startAngle : slice.startAngle; + const endAngle = props.endAngle !== undefined ? props.endAngle : slice.endAngle; const pathFunction = d3Shape.arc() .cornerRadius(cornerRadius) .outerRadius(radius) diff --git a/packages/victory-pie/src/victory-pie.js b/packages/victory-pie/src/victory-pie.js index 2da2e907c..630b74d79 100644 --- a/packages/victory-pie/src/victory-pie.js +++ b/packages/victory-pie/src/victory-pie.js @@ -42,13 +42,6 @@ class VictoryPie extends React.Component { static role = "pie"; static defaultTransitions = { - onLoad: { - duration: 2000, - before: () => { - return { _y: 0, startAngle: 0, label: " " }; - }, - after: (datum) => ({ _y: datum._y, startAngle: undefined, label: datum.label }) - }, onExit: { duration: 500, before: () => ({ _y: 0, label: " " }) From 14d47959ac9783f090357d720e37c533d8294fab Mon Sep 17 00:00:00 2001 From: boygirl Date: Thu, 8 Nov 2018 21:10:57 -0800 Subject: [PATCH 06/12] prop naming --- packages/victory-pie/src/slice.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/victory-pie/src/slice.js b/packages/victory-pie/src/slice.js index a0a53beab..201fff77b 100644 --- a/packages/victory-pie/src/slice.js +++ b/packages/victory-pie/src/slice.js @@ -10,13 +10,13 @@ export default class Slice extends React.Component { ...CommonProps.primitiveProps, cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), datum: PropTypes.object, - endAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), pathComponent: PropTypes.element, pathFunction: PropTypes.func, radius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), slice: PropTypes.object, - startAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func]) + sliceEndAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), + sliceStartAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func]) }; @@ -25,15 +25,15 @@ export default class Slice extends React.Component { }; getPath(props) { - const { datum, active, slice } = props; + const { datum, active, slice, sliceStartAngle, sliceEndAngle } = props; if (isFunction(props.pathFunction)) { return props.pathFunction(slice); } const cornerRadius = Helpers.evaluateProp(props.cornerRadius, datum, active); const innerRadius = Helpers.evaluateProp(props.innerRadius, datum, active); const radius = Helpers.evaluateProp(props.radius, datum, active); - const startAngle = props.startAngle !== undefined ? props.startAngle : slice.startAngle; - const endAngle = props.endAngle !== undefined ? props.endAngle : slice.endAngle; + const startAngle = sliceStartAngle !== undefined ? sliceStartAngle : slice.startAngle; + const endAngle = sliceEndAngle !== undefined ? sliceEndAngle : slice.endAngle; const pathFunction = d3Shape.arc() .cornerRadius(cornerRadius) .outerRadius(radius) From 37de151b9cb5c043397fd2dc4c8e2d82c7b34c44 Mon Sep 17 00:00:00 2001 From: boygirl Date: Thu, 8 Nov 2018 21:42:49 -0800 Subject: [PATCH 07/12] clean up demo --- demo/components/victory-pie-demo.js | 48 ++++++++--------------------- 1 file changed, 13 insertions(+), 35 deletions(-) diff --git a/demo/components/victory-pie-demo.js b/demo/components/victory-pie-demo.js index 35ed0d4d1..7706af593 100644 --- a/demo/components/victory-pie-demo.js +++ b/demo/components/victory-pie-demo.js @@ -1,12 +1,10 @@ /*global window:false*/ /*eslint-disable no-magic-numbers,react/no-multi-comp*/ -import { merge, random, range } from "lodash"; +import { random, range } from "lodash"; import React from "react"; import { VictoryPie } from "../../packages/victory-pie/src/index"; import { VictoryTooltip } from "../../packages/victory-tooltip/src/index"; -import { - VictoryContainer, VictoryTheme, VictoryLabel -} from "../../packages/victory-core/src/index"; +import { VictoryTheme } from "../../packages/victory-core/src/index"; export default class App extends React.Component { constructor(props) { @@ -147,44 +145,24 @@ export default class App extends React.Component { } }} data={this.state.transitionData} - containerComponent={ - } /> } - labels={() => "click me!"} events={[{ target: "data", eventHandlers: { - onClick: () => { - return [ - { - mutation: (props) => { - const radius = props.radius === 150 ? undefined : 150; - const startAngle = props.startAngle === undefined ? 0 : undefined; - const endAngle = props.endAngle === undefined ? 1.5 : undefined; - return { - style: merge({}, props.style, { fill: "#F50057" }), - radius, startAngle, endAngle - }; - } - }, { - target: "labels", - eventKey: [0, 2, 4], - mutation: () => { - return { text: "Nice." }; - } - } - ]; - } + onMouseOver: () => ({ + mutation: (props) => ({ + radius: 135, + sliceStartAngle: props.slice.startAngle + 0.05, + sliceEndAngle: props.slice.endAngle - 0.05 + }) + }), + onMouseOut: () => ({ + mutation: () => null + }) } }]} /> From bc38c49f39d27e59c241df361a262b9e307b1f34 Mon Sep 17 00:00:00 2001 From: boygirl Date: Fri, 9 Nov 2018 13:35:34 -0800 Subject: [PATCH 08/12] add startAngle and endAngle to datum --- packages/victory-pie/src/helper-methods.js | 6 ++++-- packages/victory-pie/src/slice.js | 4 +++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/victory-pie/src/helper-methods.js b/packages/victory-pie/src/helper-methods.js index 8fa588ee7..a609d230e 100644 --- a/packages/victory-pie/src/helper-methods.js +++ b/packages/victory-pie/src/helper-methods.js @@ -1,5 +1,5 @@ /*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2, 45, 135, 180, 225, 315] }]*/ -import { assign, isFunction, isPlainObject } from "lodash"; +import { assign, defaults, isFunction, isPlainObject } from "lodash"; import * as d3Shape from "d3-shape"; import { Helpers, Data, Style } from "victory-core"; @@ -168,7 +168,9 @@ export const getBaseProps = (props, fallbackProps) => { }; return slices.reduce((childProps, slice, index) => { - const datum = data[index]; + const datum = defaults( + {}, data[index], { startAngle: slice.startAngle, endAngle: slice.endAngle } + ); const eventKey = datum.eventKey || index; const dataProps = { index, slice, datum, data, origin, innerRadius, radius, cornerRadius, diff --git a/packages/victory-pie/src/slice.js b/packages/victory-pie/src/slice.js index 201fff77b..0a837a166 100644 --- a/packages/victory-pie/src/slice.js +++ b/packages/victory-pie/src/slice.js @@ -25,13 +25,15 @@ export default class Slice extends React.Component { }; getPath(props) { - const { datum, active, slice, sliceStartAngle, sliceEndAngle } = props; + const { datum, active, slice } = props; if (isFunction(props.pathFunction)) { return props.pathFunction(slice); } const cornerRadius = Helpers.evaluateProp(props.cornerRadius, datum, active); const innerRadius = Helpers.evaluateProp(props.innerRadius, datum, active); const radius = Helpers.evaluateProp(props.radius, datum, active); + const sliceStartAngle = Helpers.evaluateProp(props.sliceStartAngle, datum, active); + const sliceEndAngle = Helpers.evaluateProp(props.sliceEndAngle, datum, active); const startAngle = sliceStartAngle !== undefined ? sliceStartAngle : slice.startAngle; const endAngle = sliceEndAngle !== undefined ? sliceEndAngle : slice.endAngle; const pathFunction = d3Shape.arc() From 4fc95a11540fe9a717021b40a4b638e35d00afdd Mon Sep 17 00:00:00 2001 From: boygirl Date: Fri, 9 Nov 2018 13:35:46 -0800 Subject: [PATCH 09/12] add stories for new pie features --- stories/victory-pie.js | 59 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/stories/victory-pie.js b/stories/victory-pie.js index b3ed91ccd..1e429e702 100644 --- a/stories/victory-pie.js +++ b/stories/victory-pie.js @@ -2,7 +2,7 @@ import React from "react"; import { storiesOf } from "@storybook/react"; import { action } from "@storybook/addon-actions"; -import { VictoryPie } from "../packages/victory-pie/src/index"; +import { VictoryPie, Slice } from "../packages/victory-pie/src/index"; storiesOf("VictoryPie", module) .addDecorator((story) => ( @@ -129,6 +129,63 @@ storiesOf("VictoryPie", module) ]} /> )) + .add("with functional radius", () => ( + d.y + 100} + labelRadius={(d) => d.y + 50} + style={{ + labels: { fill: "white" } + }} + data={[ + { x: "Cat", y: 62 }, + { x: "Dog", y: 91 }, + { x: "Fish", y: 55 }, + { x: "Bird", y: 55 } + ]} + /> + )) + .add("with functional innerRadius", () => ( + d.y} + data={[ + { x: "Cat", y: 62 }, + { x: "Dog", y: 91 }, + { x: "Fish", y: 55 }, + { x: "Bird", y: 55 } + ]} + /> + )) + .add("with functional cornerRadius", () => ( + d.y > 70 ? 10 : 0 } + innerRadius={100} + data={[ + { x: "Cat", y: 62 }, + { x: "Dog", y: 91 }, + { x: "Fish", y: 55 }, + { x: "Bird", y: 55 } + ]} + /> + )) + .add("with sliceStartAngle and sliceEndAngle", () => ( + d.endAngle - 0.5} + /> + } + labels={() => " "} + radius={(d) => d.radius} + innerRadius={(d) => d.innerRadius} + data={[ + { x: "Cat", y: 62, innerRadius: 0, radius: 30 }, + { x: "Dog", y: 91, innerRadius: 35, radius: 65 }, + { x: "Fish", y: 55, innerRadius: 70, radius: 100 }, + { x: "Bird", y: 55, innerRadius: 105, radius: 135, endAngle: 5.5 } + ]} + /> + )) .add("events: click handler", () => (
Date: Fri, 9 Nov 2018 16:59:04 -0800 Subject: [PATCH 10/12] use degrees everywhere user facing --- .../victory-core/src/victory-util/helpers.js | 4 ++-- packages/victory-pie/src/helper-methods.js | 20 +++++++++---------- packages/victory-pie/src/slice.js | 18 +++++++++++------ packages/victory-pie/src/victory-pie.js | 4 ++-- 4 files changed, 26 insertions(+), 20 deletions(-) diff --git a/packages/victory-core/src/victory-util/helpers.js b/packages/victory-core/src/victory-util/helpers.js index 231e45059..20e77fe62 100644 --- a/packages/victory-core/src/victory-util/helpers.js +++ b/packages/victory-core/src/victory-util/helpers.js @@ -122,11 +122,11 @@ function evaluateStyle(style, data, active) { } function degreesToRadians(degrees) { - return degrees * (Math.PI / 180); + return typeof degrees === "number" ? degrees * (Math.PI / 180) : degrees; } function radiansToDegrees(radians) { - return radians / (Math.PI / 180); + return typeof radians === "number" ? radians / (Math.PI / 180) : radians; } function getRadius(props) { diff --git a/packages/victory-pie/src/helper-methods.js b/packages/victory-pie/src/helper-methods.js index a609d230e..be6b910dc 100644 --- a/packages/victory-pie/src/helper-methods.js +++ b/packages/victory-pie/src/helper-methods.js @@ -4,10 +4,6 @@ import * as d3Shape from "d3-shape"; import { Helpers, Data, Style } from "victory-core"; -const degreesToRadians = (degrees) => { - return degrees * (Math.PI / 180); -}; - const checkForValidText = (text) => { if (text === undefined || text === null) { return text; @@ -45,9 +41,9 @@ const getOrigin = (props, padding) => { const getSlices = (props, data) => { const layoutFunction = d3Shape.pie() .sort(null) - .startAngle(degreesToRadians(props.startAngle)) - .endAngle(degreesToRadians(props.endAngle)) - .padAngle(degreesToRadians(props.padAngle)) + .startAngle(Helpers.degreesToRadians(props.startAngle)) + .endAngle(Helpers.degreesToRadians(props.endAngle)) + .padAngle(Helpers.degreesToRadians(props.padAngle)) .value((datum) => { return datum._y; }); return layoutFunction(data); }; @@ -160,7 +156,7 @@ export const getBaseProps = (props, fallbackProps) => { const { slices, style, data, origin, defaultRadius } = calculatedValues; const { labels, events, sharedEvents, height, width, standalone, name, - innerRadius, cornerRadius + innerRadius, cornerRadius, padAngle } = props; const radius = props.radius || defaultRadius; const initialChildProps = { @@ -169,11 +165,15 @@ export const getBaseProps = (props, fallbackProps) => { return slices.reduce((childProps, slice, index) => { const datum = defaults( - {}, data[index], { startAngle: slice.startAngle, endAngle: slice.endAngle } + {}, data[index], { + startAngle: Helpers.radiansToDegrees(slice.startAngle), + endAngle: Helpers.radiansToDegrees(slice.endAngle), + padAngle: Helpers.radiansToDegrees(slice.padAngle) + } ); const eventKey = datum.eventKey || index; const dataProps = { - index, slice, datum, data, origin, innerRadius, radius, cornerRadius, + index, slice, datum, data, origin, innerRadius, radius, cornerRadius, padAngle, style: getSliceStyle(index, calculatedValues) }; childProps[eventKey] = { diff --git a/packages/victory-pie/src/slice.js b/packages/victory-pie/src/slice.js index 0a837a166..79c4acd3c 100644 --- a/packages/victory-pie/src/slice.js +++ b/packages/victory-pie/src/slice.js @@ -1,7 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; import { Helpers, CommonProps, Path } from "victory-core"; -import { isFunction } from "lodash"; +import { defaults, isFunction } from "lodash"; import * as d3Shape from "d3-shape"; @@ -11,6 +11,7 @@ export default class Slice extends React.Component { cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), datum: PropTypes.object, innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), + padAngle: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), pathComponent: PropTypes.element, pathFunction: PropTypes.func, radius: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), @@ -32,15 +33,20 @@ export default class Slice extends React.Component { const cornerRadius = Helpers.evaluateProp(props.cornerRadius, datum, active); const innerRadius = Helpers.evaluateProp(props.innerRadius, datum, active); const radius = Helpers.evaluateProp(props.radius, datum, active); - const sliceStartAngle = Helpers.evaluateProp(props.sliceStartAngle, datum, active); - const sliceEndAngle = Helpers.evaluateProp(props.sliceEndAngle, datum, active); - const startAngle = sliceStartAngle !== undefined ? sliceStartAngle : slice.startAngle; - const endAngle = sliceEndAngle !== undefined ? sliceEndAngle : slice.endAngle; + const padAngle = Helpers.degreesToRadians( + Helpers.evaluateProp(props.padAngle, datum, active) + ); + const startAngle = Helpers.degreesToRadians( + Helpers.evaluateProp(props.sliceStartAngle, datum, active) + ); + const endAngle = Helpers.degreesToRadians( + Helpers.evaluateProp(props.sliceEndAngle, datum, active) + ); const pathFunction = d3Shape.arc() .cornerRadius(cornerRadius) .outerRadius(radius) .innerRadius(innerRadius); - return pathFunction({ startAngle, endAngle }); + return pathFunction(defaults({ startAngle, endAngle, padAngle }, slice)); } render() { diff --git a/packages/victory-pie/src/victory-pie.js b/packages/victory-pie/src/victory-pie.js index 630b74d79..61d64af1d 100644 --- a/packages/victory-pie/src/victory-pie.js +++ b/packages/victory-pie/src/victory-pie.js @@ -64,7 +64,7 @@ class VictoryPie extends React.Component { ]) ]), containerComponent: PropTypes.element, - cornerRadius: CustomPropTypes.nonNegative, + cornerRadius: PropTypes.oneOfType([ CustomPropTypes.nonNegative, PropTypes.func ]), data: PropTypes.array, dataComponent: PropTypes.element, endAngle: PropTypes.number, @@ -111,7 +111,7 @@ class VictoryPie extends React.Component { x: CustomPropTypes.nonNegative, y: CustomPropTypes.nonNegative }), - padAngle: CustomPropTypes.nonNegative, + padAngle: PropTypes.oneOfType([ CustomPropTypes.nonNegative, PropTypes.func ]), padding: PropTypes.oneOfType([ PropTypes.number, PropTypes.shape({ From 33861e7970af23a007007441aedf68c440be11b1 Mon Sep 17 00:00:00 2001 From: boygirl Date: Fri, 9 Nov 2018 17:00:52 -0800 Subject: [PATCH 11/12] VictoryPie no longer passes pathFunction to child components --- test/client/spec/victory-pie/victory-pie.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/client/spec/victory-pie/victory-pie.spec.js b/test/client/spec/victory-pie/victory-pie.spec.js index d68d1b821..0f269d417 100644 --- a/test/client/spec/victory-pie/victory-pie.spec.js +++ b/test/client/spec/victory-pie/victory-pie.spec.js @@ -324,7 +324,7 @@ describe("components/victory-pie", () => { expect(clickHandler).called; // the first argument is the standard evt object expect(clickHandler.args[0][1]) - .to.include.keys("slices", "pathFunction", "width", "height", "style"); + .to.include.keys("slices", "width", "height", "style"); }); it("attaches an event to data", () => { From e7a806cdf23036cb6feb8ffcef5790197778b1e1 Mon Sep 17 00:00:00 2001 From: boygirl Date: Sat, 10 Nov 2018 16:41:41 -0800 Subject: [PATCH 12/12] clean up story --- stories/victory-pie.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stories/victory-pie.js b/stories/victory-pie.js index 1e429e702..86bf31e55 100644 --- a/stories/victory-pie.js +++ b/stories/victory-pie.js @@ -172,7 +172,7 @@ storiesOf("VictoryPie", module) dataComponent={ d.endAngle - 0.5} + sliceEndAngle={(d) => d.endAngle} /> } labels={() => " "} @@ -182,7 +182,7 @@ storiesOf("VictoryPie", module) { x: "Cat", y: 62, innerRadius: 0, radius: 30 }, { x: "Dog", y: 91, innerRadius: 35, radius: 65 }, { x: "Fish", y: 55, innerRadius: 70, radius: 100 }, - { x: "Bird", y: 55, innerRadius: 105, radius: 135, endAngle: 5.5 } + { x: "Bird", y: 55, innerRadius: 105, radius: 135, endAngle: 360 } ]} /> ))