Merge pull request #185 from FormidableLabs/add-stories

add radius and origin stories
FormidableLabs · Jun 24, 2018 · b449e7f · b449e7f
2 parents e5b1d44 + a1c7c64
commit b449e7f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 56 deletions.
diff --git 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
@@ -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", () => (
+    <VictoryPie
+      radius={100}
+    />
+  ))
+  .add("with an origin prop", () => (
+    <VictoryPie
+      radius={100}
+      origin={{ x: 150, y: 150 }}
+    />
+  ))
   .add("with custom data and colors", () => (
     <VictoryPie
       style={{
@@ -140,51 +149,4 @@ storiesOf("VictoryPie", module)
         }]}
       />
     </div>
-  ))
-  .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 (
-          <div className="chromatic-ignore">
-            <VictoryPie
-              data={this.state.data}
-              labelRadius={120}
-              colorScale="qualitative"
-              animate={{
-                duration: 1000,
-                onEnter: {
-                  duration: 500,
-                  before: () => ({ y: 0, label: "NEW" }),
-                  after: (datum) => ({ y: datum.y, label: datum.label })
-                }
-              }}
-            />
-          </div>
-        );
-      }
-    }
-
-    return <PieContainer/>;
-  });
+  ));