line graph is now a stateless component and displays correctly in sto…

…rybook

imports/components/graphs/__stories__/index.js

@@ -4,8 +4,6 @@ import { storiesOf } from "@kadira/storybook";
 import {
   withKnobs,
   text,
-  select,
-  boolean,
 } from "@kadira/storybook-addon-knobs";
 import withReadme from "storybook-readme/with-readme";
 import backgrounds from "react-storybook-addon-backgrounds";
@@ -26,11 +24,58 @@ const story = storiesOf("Graphs", module)
 
 story
   .add("Line Graph", withReadme(Readme, () => {
-    // const accounts = [
-      // { name: text("Fund 1", "General Fund"), id: 1 },
-      // { name: text("Fund 2", "Building Fund"), id: 2 }
-    // ]
+    const data = [
+      {
+        month: "January",
+        amount: 100,
+      },
+      {
+        month: "Febuary",
+        amount: 200,
+      },
+      {
+        month: "March",
+        amount: 100,
+      },
+      {
+        month: "April",
+        amount: 0,
+      },
+      {
+        month: "May",
+        amount: 150,
+      },
+      {
+        month: "June",
+        amount: 100,
+      },
+      {
+        month: "July",
+        amount: 200,
+      },
+      {
+        month: "August",
+        amount: 100,
+      },
+      {
+        month: "September",
+        amount: 300,
+      },
+      {
+        month: "October",
+        amount: 100,
+      },
+      {
+        month: "November",
+        amount: 100,
+      },
+      {
+        month: "December",
+        amount: 500,
+      },
+    ];
+
     return (
-      <LineGraph />
+      <LineGraph data={data} />
     );
   }));

imports/components/graphs/lineGraph/index.js

@@ -1,56 +1,9 @@
-import React, { Component } from "react";
-import { VictoryChart, VictoryGroup, VictoryAxis, VictoryLine, VictoryVoronoi, VictoryLabel, VictoryScatter } from "victory";
-
-const data = [
-  {
-    month: "January",
-    value: 100,
-  },
-  {
-    month: "Febuary",
-    value: 200,
-  },
-  {
-    month: "March",
-    value: 100,
-  },
-  {
-    month: "April",
-    value: 0,
-  },
-  {
-    month: "May",
-    value: 150,
-  },
-  {
-    month: "June",
-    value: 100,
-  },
-  {
-    month: "July",
-    value: 200,
-  },
-  {
-    month: "August",
-    value: 100,
-  },
-  {
-    month: "September",
-    value: 300,
-  },
-  {
-    month: "October",
-    value: 100,
-  },
-  {
-    month: "November",
-    value: 100,
-  },
-  {
-    month: "December",
-    value: 500,
-  },
-];
+import {
+  VictoryChart,
+  VictoryAxis,
+  VictoryLine,
+  VictoryScatter,
+} from "victory";
 
 const styles = {
   line: {
@@ -60,39 +13,42 @@ const styles = {
     data: { fill: "#6bac43" },
   },
   axis: {
-    axis: { stroke: "blue", strokeWidth: "0" },
-    grid: { stroke: "blue", strokeWidth: "0" },
-    ticks: { stroke: "blue", strokeWidth: "0" },
-    tickLabel: { fontSize: 4 },
-    tickLabels: { fontSize: 10, padding: 5 },
+    axis: { stroke: "transparent", strokeWidth: "0" },
+    tickLabels: {
+      fontFamily: "colfax-web, sans-serif",
+      fontSize: 10,
+      padding: 5,
+    },
   },
 };
 
-class LineGraph extends Component {
-  render() {
-    return(
-      <VictoryGroup
+type ILineGraph = {
+  data: Object,
+};
+
+const LineGraph = ({
+  data,
+}: ILineGraph) => (
+  <div className="push soft-half">
+    <VictoryChart>
+      <VictoryAxis
+        style={styles.axis}
+        tickFormat={["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"]}
+      />
+      <VictoryScatter
+        data={data}
+        x="month"
+        y="amount"
+        style={styles.scatter}
+      />
+      <VictoryLine
         data={data}
         x="month"
-        y="value"
-      >
-        <VictoryAxis
-          style={styles.axis}
-          scale="time"
-          tickValues={["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"]}
-          standalone={false}
-        />
-        <VictoryScatter
-          style={styles.scatter}
-          standalone={false}
-        />
-        <VictoryLine
-          style={styles.line}
-          standalone={false}
-        />
-      </VictoryGroup>
-    );
-  }
-}
+        y="amount"
+        style={styles.line}
+      />
+    </VictoryChart>
+  </div>
+);
 
 export default LineGraph;