Merge pull request #19 from openjck/example-chart

Add example chart to homepage

distributionviewer/core/static/js/app/components/containers/example-chart-container.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ExampleChart from '../views/example-chart';
+
+export default function(props) {
+  return (
+    <ExampleChart />
+  );
+};

distributionviewer/core/static/js/app/components/home.js

@@ -1,11 +1,12 @@
 import React from 'react';
 
-const Home = React.createClass({
-  render: function() {
-    return (
-      <h1>Distribution Viewer</h1>
-    );
-  }
-});
+import ExampleChartContainer from './containers/example-chart-container';
 
-export default Home;
+export default function(props) {
+  return (
+    <div>
+      <h1>Distribution Viewer</h1>
+      <ExampleChartContainer />
+    </div>
+  );
+}

distributionviewer/core/static/js/app/components/views/example-chart.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { LineChart } from 'rd3';
+
+export default function(props) {
+  var exampleData = [{
+    values : [
+      { x: 0,   y: 10 },
+      { x: 5,   y: 10 },
+      { x: 10,  y: 10 },
+      { x: 15,  y: 10 },
+      { x: 20,  y: 10 },
+      { x: 25,  y: 12 },
+      { x: 30,  y: 14 },
+      { x: 35,  y: 18 },
+      { x: 40,  y: 24 },
+      { x: 45,  y: 32 },
+      { x: 50,  y: 42 },
+      { x: 55,  y: 54 },
+      { x: 60,  y: 64 },
+      { x: 65,  y: 72 },
+      { x: 70,  y: 78 },
+      { x: 75,  y: 82 },
+      { x: 80,  y: 84 },
+      { x: 85,  y: 85 },
+      { x: 90,  y: 86 },
+      { x: 95,  y: 86 },
+      { x: 100, y: 86 },
+    ]
+  }];
+
+  return  (
+    <LineChart
+      data={exampleData}
+
+      // General display
+      title="Number of available TV channels"
+      gridHorizontal={false}
+      circleRadius={0}
+      width={400}
+      height={300}
+
+      // Axes
+      domain={{x: [,100], y: [0,100]}}
+
+      // x-axis
+      xAxisLabel="channels"
+      xAxisTickValues={[0, 5, 100]}
+
+      // y-axis
+      yAxisFormatter={tickLabel => tickLabel + '%' }
+      yAxisTickValues={[0, 25, 50, 75, 100]}
+    />
+  );
+}

package.json

@@ -10,12 +10,14 @@
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "browser-sync": "^2.12.3",
+    "d3": "^3.5.17",
     "es6-promise": "^3.1.2",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.0",
     "gulp-concat": "^2.6.0",
     "gulp-stylus": "^2.3.1",
     "nib": "^1.1.0",
+    "rd3": "^0.6.5",
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
     "react-router": "^2.0.0",