diff --git a/src/components/helper-methods.js b/src/components/helper-methods.js index 6e07534..2ccfd9c 100644 --- a/src/components/helper-methods.js +++ b/src/components/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 } from "lodash"; +import { assign, isFunction, isPlainObject } from "lodash"; import * as d3Shape from "d3-shape"; import { Helpers, Data, Style } from "victory-core"; @@ -33,6 +33,15 @@ const getRadius = (props, padding) => { ) / 2; }; +const getOrigin = (props, padding) => { + const { width, height } = props; + const origin = isPlainObject(props.origin) ? props.origin : {}; + return { + x: origin.x !== undefined ? origin.x : (padding.left - padding.right + width) / 2, + y: origin.y !== undefined ? origin.y : (padding.top - padding.bottom + height) / 2 + }; +}; + const getSlices = (props, data) => { const layoutFunction = d3Shape.pie() .sort(null) @@ -44,16 +53,13 @@ const getSlices = (props, data) => { }; const getCalculatedValues = (props) => { - const { theme, colorScale, width, height } = props; + const { theme, colorScale } = props; const styleObject = theme && theme.pie && theme.pie.style ? theme.pie.style : {}; 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 origin = props.origin || { - x: (padding.left - padding.right + width) / 2, - y: (padding.top - padding.bottom + height) / 2 - }; + const origin = getOrigin(props, padding); const data = Data.getData(props); const slices = getSlices(props, data); const pathFunction = d3Shape.arc() diff --git a/stories/victory-pie.js b/stories/victory-pie.js index e365490..99236b8 100644 --- a/stories/victory-pie.js +++ b/stories/victory-pie.js @@ -1,9 +1,7 @@ -/*global window:false*/ /*eslint-disable no-magic-numbers*/ import React from "react"; import { storiesOf } from "@storybook/react"; import { action } from "@storybook/addon-actions"; -import _ from "lodash"; import { VictoryPie } from "../src"; storiesOf("VictoryPie", module) @@ -67,6 +65,17 @@ storiesOf("VictoryPie", module) startAngle={-90} /> )) + .add("with a radius prop", () => ( + + )) + .add("with an origin prop", () => ( + + )) .add("with custom data and colors", () => ( - )) - .add("animation: custom entrance transitions", () => { - class PieContainer extends React.Component { - constructor(props) { - super(props); - this.state = { data: this.getData() }; - } - - getData() { //eslint-disable-line - const samples = _.random(6, 10); - return _.range(samples).map((data) => { - return { - x: data, - y: _.random(3, 10), - label: `#${data}` - }; - }); - } - - componentDidMount() { - window.setInterval(() => { - this.setState({ data: this.getData() }); - }, 2000); - } - - render() { - return ( -
- ({ y: 0, label: "NEW" }), - after: (datum) => ({ y: datum.y, label: datum.label }) - } - }} - /> -
- ); - } - } - - return ; - }); + ));