SYS-2557 inital work on line graph component

imports/components/graphs/__stories__/index.js

@@ -0,0 +1,36 @@
+/* eslint-disable */
+import { Meteor } from "meteor/meteor";
+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";
+
+// import Provider from "/.storybook/mocks/Provider";
+
+import centered from "/.storybook/decorators/centered";
+import defaultColors from "/.storybook/defaults";
+
+import Readme from "../README.md";
+import LineGraph from "../lineGraph/";
+
+const story = storiesOf("Graphs", module)
+  .addDecorator(withKnobs)
+  .addDecorator(centered)
+  .addDecorator(backgrounds(defaultColors("light-primary", "light-secondary")))
+  ;
+
+story
+  .add("Line Graph", withReadme(Readme, () => {
+    // const accounts = [
+      // { name: text("Fund 1", "General Fund"), id: 1 },
+      // { name: text("Fund 2", "Building Fund"), id: 2 }
+    // ]
+    return (
+      <LineGraph />
+    );
+  }));

imports/components/graphs/lineGraph/index.js

@@ -0,0 +1,98 @@
+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,
+  },
+];
+
+const styles = {
+  line: {
+    data: { stroke: "#6bac43", strokeWidth: "3" },
+  },
+  scatter: {
+    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 },
+  },
+};
+
+class LineGraph extends Component {
+  render() {
+    return(
+      <VictoryGroup
+        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>
+    );
+  }
+}
+
+export default LineGraph;

package.json

@@ -134,6 +134,7 @@
     "underscore": "^1.8.3",
     "velocity-animate": "^1.2.3",
     "velocity-react": "^1.1.5",
+    "victory": "^0.13.7",
     "xml2js": "^0.4.16"
   },
   "devDependencies": {