Merge pull request #71 from yldio/graphing-spike

Graphing Spikes

spikes/graphs-fe/c3js/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    ["transform-object-rest-spread", {
+      "useBuiltIns": true
+    }],
+    "add-module-exports",
+    "transform-es2015-modules-commonjs",
+    "react-hot-loader/babel"
+  ],
+  "sourceMaps": "both"
+}

spikes/graphs-fe/c3js/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+coverage
+.nyc_output

spikes/graphs-fe/c3js/.eslintrc

@@ -0,0 +1,29 @@
+{
+  "extends": "semistandard",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "babel",
+    "react"
+  ],
+  "rules": {
+    "generator-star-spacing": 0,
+    "babel/generator-star-spacing": 1,
+    "space-before-function-paren": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "object-curly-newline": ["error", {
+      "minProperties": 1
+    }],
+    "sort-vars": ["error", {
+      "ignoreCase": true
+    }]
+  }
+}

spikes/graphs-fe/c3js/.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+coverage
+.nyc_output
+npm-debug.log

spikes/graphs-fe/c3js/client/c3js.js

@@ -0,0 +1,43 @@
+const C3Graph = require('react-c3js').default;
+const ReactRedux = require('react-redux');
+const React = require('react');
+
+const {
+  connect
+} = ReactRedux;
+
+const Graph = React.createClass({
+  render: function() {
+    const {
+      data = []
+    } = this.props;
+
+    const cpu = data.map((d) => Math.floor(d.cpu));
+    const datatime = data.map((d, i) => i);
+
+    const formattedData = {
+      x: 'x',
+      columns: [
+        ['x'].concat(datatime),
+        ['cpu'].concat(cpu)
+      ]
+    };
+
+    return (
+      <C3Graph
+        data={formattedData}
+      />
+    );
+  }
+});
+
+const mapStateToProps = ({
+  data
+}) => {
+  return {
+    data
+  };
+};
+
+module.exports = connect(mapStateToProps)(Graph);
+

spikes/graphs-fe/c3js/client/index.js

@@ -0,0 +1,46 @@
+const ReactDOM = require('react-dom');
+const React = require('react');
+const store = require('./store')();
+const nes = require('nes/dist/client');
+
+const {
+  Client
+} = nes;
+
+const client = new Client(`ws://${document.location.host}`);
+
+client.connect((err) => {
+  if (err) {
+    throw err;
+  }
+
+  console.log('connected');
+
+  client.subscribe('/stats/5', (update, flag) => {
+    store.dispatch({
+      type: 'UPDATE_STATS',
+      payload: update
+    })
+  }, (err) => {
+    if (err) {
+      throw err;
+    }
+
+    console.log('subscribed');
+  });
+});
+
+const render = () => {
+  const Root = require('./root');
+
+  ReactDOM.render(
+    <Root store={store} />,
+    document.getElementById('root')
+  );
+};
+
+render();
+
+if (module.hot) {
+  module.hot.accept('./root', render);
+}

spikes/graphs-fe/c3js/client/root.js

@@ -0,0 +1,24 @@
+const React = require('react');
+const ReactHotLoader = require('react-hot-loader');
+const ReactRedux = require('react-redux');
+const Graph = require('./c3js');
+
+const {
+  AppContainer
+} = ReactHotLoader;
+
+const {
+  Provider
+} = ReactRedux;
+
+module.exports = ({
+  store
+}) => {
+  return (
+    <AppContainer>
+      <Provider store={store}>
+        <Graph />
+      </Provider>
+    </AppContainer>
+  );
+};

spikes/graphs-fe/c3js/client/store.js

@@ -0,0 +1,25 @@
+const takeRight = require('lodash.takeright');
+const redux = require('redux');
+
+const {
+  createStore,
+  compose,
+  applyMiddleware
+} = redux;
+
+const reducer = (state, action) => {
+  if (action.type !== 'UPDATE_STATS') {
+    return state;
+  }
+
+  const data = (state.data || []).concat([action.payload]);
+
+  return {
+    ...state,
+    data: takeRight(data, 50)
+  };
+};
+
+module.exports = (state = Object.freeze({})) => {
+  return createStore(reducer, state);
+};

spikes/graphs-fe/c3js/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "redux-thunks-spike",
+  "private": true,
+  "license": "private",
+  "main": "server/index.js",
+  "dependencies": {
+    "autoprefixer": "^6.5.1",
+    "babel-eslint": "^7.0.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
+    "babel-plugin-transform-object-rest-spread": "^6.16.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-runtime": "^6.11.6",
+    "c3": "^0.4.11",
+    "component-emitter": "^1.2.1",
+    "css-loader": "^0.25.0",
+    "hapi": "^15.2.0",
+    "hapi-webpack-dev-plugin": "^1.1.4",
+    "inert": "^4.0.2",
+    "lodash.takeright": "^4.1.1",
+    "nes": "^6.3.1",
+    "postcss-loader": "^1.0.0",
+    "postcss-modules-values": "^1.2.2",
+    "postcss-nested": "^1.0.0",
+    "react": "^15.3.2",
+    "react-c3js": "^0.1.9",
+    "react-dom": "^15.3.2",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "react-redux": "^4.4.5",
+    "redux": "^3.6.0",
+    "require-dir": "^0.3.1",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.2"
+  },
+  "devDependencies": {
+    "babel-register": "^6.16.3",
+    "eslint": "^3.8.1",
+    "eslint-config-semistandard": "^7.0.0",
+    "eslint-config-standard": "^6.2.0",
+    "eslint-plugin-babel": "^3.3.0",
+    "eslint-plugin-promise": "^3.3.0",
+    "eslint-plugin-react": "^6.4.1",
+    "eslint-plugin-standard": "^2.0.1",
+    "json-loader": "^0.5.4"
+  },
+  "ava": {
+    "require": [
+      "babel-register"
+    ],
+    "babel": "inherit"
+  }
+}

spikes/graphs-fe/c3js/readme.md

@@ -0,0 +1,6 @@
+# Graphing Spikes
+
+## Plotly
+
+Adding plotly through npm and created a plotly graph components
+Running three different graph types of the same data on the same page

spikes/graphs-fe/c3js/server/index.js

@@ -0,0 +1,29 @@
+const requireDir = require('require-dir');
+const plugins = require('./plugins');
+const routes = requireDir('./routes');
+const Hapi = require('hapi');
+const path = require('path');
+const fs = require('fs');
+
+const server = new Hapi.Server();
+
+server.connection({
+  host: 'localhost',
+  port: 8000
+});
+
+server.register(plugins, (err) => {
+  if (err) {
+    throw err;
+  }
+
+  Object.keys(routes).forEach((name) => {
+    routes[name](server);
+  });
+
+  server.start((err) => {
+    server.connections.forEach((conn) => {
+      console.log(`started at: ${conn.info.uri}`);
+    });
+  });
+});

spikes/graphs-fe/c3js/server/metric.js

@@ -0,0 +1,35 @@
+const Emitter = require('component-emitter');
+
+const cdm = {};
+
+module.exports = (server) => ({
+  on: (id) => {
+    console.log('on', cdm[id]);
+    if (cdm[id] && (cdm[id].sockets > 0)) {
+      cdm[id].sockets +=1;
+      return;
+    }
+
+
+    let messageId = 0;
+    const interval = setInterval(() => {
+      console.log(`publishing /stats/${id}`);
+
+      server.publish(`/stats/${id}`, {
+        when: new Date().getTime(),
+        cpu: Math.random() * 100
+      });
+    }, 200);
+
+    cdm[id] = {
+      interval,
+      sockets: 1
+    };
+  },
+  off: (id) => {
+    if (!(cdm[id].sockets -= 1)) {
+      clearInterval(cdm[id].interval);
+    }
+  }
+});
+

spikes/graphs-fe/c3js/server/plugins.js

@@ -0,0 +1,15 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const cfg = require('../webpack.config.js');
+
+module.exports = [
+  require('inert'),
+  require('nes'), {
+    register: require('hapi-webpack-dev-plugin'),
+    options: {
+      compiler: webpack(cfg),
+      devIndex: path.join(__dirname, '../static')
+    }
+  }
+];

spikes/graphs-fe/c3js/server/routes/home.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/',
+    handler: (request, reply) => {
+      reply.file(path.join(__dirname, '../../static/index.html'));
+    }
+  });
+};

spikes/graphs-fe/c3js/server/routes/metrics.js

@@ -0,0 +1,18 @@
+const Metric = require('../metric');
+
+module.exports = (server) => {
+  const metric = Metric(server);
+
+  server.subscription('/stats/{id}', {
+    onSubscribe: (socket, path, params, next) => {
+      console.log('onSubscribe');
+      metric.on(params.id);
+      next();
+    },
+    onUnsubscribe: (socket, path, params, next) => {
+      console.log('onUnsubscribe');
+      metric.off(params.id);
+      next();
+    }
+  });
+};

spikes/graphs-fe/c3js/server/routes/static.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = (server) => {
+  // server.route({
+  //   method: 'GET',
+  //   path: '/{param*}',
+  //   handler: {
+  //     directory: {
+  //       path: path.join(__dirname, '../../static'),
+  //       redirectToSlash: true,
+  //       index: true
+  //     }
+  //   }
+  // });
+};

spikes/graphs-fe/c3js/server/routes/version.js

@@ -0,0 +1,18 @@
+const Pkg = require('../../package.json');
+
+const internals = {
+  response: {
+    version: Pkg.version
+  }
+};
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/ops/version',
+    config: {
+      description: 'Returns the version of the server',
+      handler: (request, reply) => reply(internals.response)
+    }
+  });
+};

spikes/graphs-fe/c3js/static/index.html

@@ -0,0 +1,181 @@
+<!doctype html>
+<html lang='en-US'>
+  <head>
+    <title>React Boilerplate</title>
+    <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
+    <style>
+          /*-- Chart --*/
+      .c3 svg {
+      font: 10px sans-serif;
+      -webkit-tap-highlight-color: transparent; }
+
+      .c3 path, .c3 line {
+      fill: none;
+      stroke: #000; }
+
+      .c3 text {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none; }
+
+      .c3-legend-item-tile,
+      .c3-xgrid-focus,
+      .c3-ygrid,
+      .c3-event-rect,
+      .c3-bars path {
+      shape-rendering: crispEdges; }
+
+      .c3-chart-arc path {
+      stroke: #fff; }
+
+      .c3-chart-arc text {
+      fill: #fff;
+      font-size: 13px; }
+
+      /*-- Axis --*/
+      /*-- Grid --*/
+      .c3-grid line {
+      stroke: #aaa; }
+
+      .c3-grid text {
+      fill: #aaa; }
+
+      .c3-xgrid, .c3-ygrid {
+      stroke-dasharray: 3 3; }
+
+      /*-- Text on Chart --*/
+      .c3-text.c3-empty {
+      fill: #808080;
+      font-size: 2em; }
+
+      /*-- Line --*/
+      .c3-line {
+      stroke-width: 1px; }
+
+      /*-- Point --*/
+      .c3-circle._expanded_ {
+      stroke-width: 1px;
+      stroke: white; }
+
+      .c3-selected-circle {
+      fill: white;
+      stroke-width: 2px; }
+
+      /*-- Bar --*/
+      .c3-bar {
+      stroke-width: 0; }
+
+      .c3-bar._expanded_ {
+      fill-opacity: 0.75; }
+
+      /*-- Focus --*/
+      .c3-target.c3-focused {
+      opacity: 1; }
+
+      .c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
+      stroke-width: 2px; }
+
+      .c3-target.c3-defocused {
+      opacity: 0.3 !important; }
+
+      /*-- Region --*/
+      .c3-region {
+      fill: steelblue;
+      fill-opacity: .1; }
+
+      /*-- Brush --*/
+      .c3-brush .extent {
+      fill-opacity: .1; }
+
+      /*-- Select - Drag --*/
+      /*-- Legend --*/
+      .c3-legend-item {
+      font-size: 12px; }
+
+      .c3-legend-item-hidden {
+      opacity: 0.15; }
+
+      .c3-legend-background {
+      opacity: 0.75;
+      fill: white;
+      stroke: lightgray;
+      stroke-width: 1; }
+
+      /*-- Title --*/
+      .c3-title {
+      font: 14px sans-serif; }
+
+      /*-- Tooltip --*/
+      .c3-tooltip-container {
+      z-index: 10; }
+
+      .c3-tooltip {
+      border-collapse: collapse;
+      border-spacing: 0;
+      background-color: #fff;
+      empty-cells: show;
+      -webkit-box-shadow: 7px 7px 12px -9px #777777;
+      -moz-box-shadow: 7px 7px 12px -9px #777777;
+      box-shadow: 7px 7px 12px -9px #777777;
+      opacity: 0.9; }
+
+      .c3-tooltip tr {
+      border: 1px solid #CCC; }
+
+      .c3-tooltip th {
+      background-color: #aaa;
+      font-size: 14px;
+      padding: 2px 5px;
+      text-align: left;
+      color: #FFF; }
+
+      .c3-tooltip td {
+      font-size: 13px;
+      padding: 3px 6px;
+      background-color: #fff;
+      border-left: 1px dotted #999; }
+
+      .c3-tooltip td > span {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      margin-right: 6px; }
+
+      .c3-tooltip td.value {
+      text-align: right; }
+
+      /*-- Area --*/
+      .c3-area {
+      stroke-width: 0;
+      opacity: 0.2; }
+
+      /*-- Arc --*/
+      .c3-chart-arcs-title {
+      dominant-baseline: middle;
+      font-size: 1.3em; }
+
+      .c3-chart-arcs .c3-chart-arcs-background {
+      fill: #e0e0e0;
+      stroke: none; }
+
+      .c3-chart-arcs .c3-chart-arcs-gauge-unit {
+      fill: #000;
+      font-size: 16px; }
+
+      .c3-chart-arcs .c3-chart-arcs-gauge-max {
+      fill: #777; }
+
+      .c3-chart-arcs .c3-chart-arcs-gauge-min {
+      fill: #777; }
+
+      .c3-chart-arc .c3-gauge-value {
+      fill: #000;
+      /*  font-size: 28px !important;*/ }
+
+    </style>
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src='/static/bundle.js'></script>
+  </body>
+</html>

spikes/graphs-fe/c3js/webpack.config.js

@@ -0,0 +1,69 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const config = {
+  debug: true,
+  devtool: 'source-map',
+  context: path.join(__dirname, './client'),
+  app: path.join(__dirname, './client/index.js'),
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/only-dev-server',
+    'react-hot-loader/patch',
+    './index.js'
+  ],
+  output: {
+    path: path.join(__dirname, './static'),
+    publicPath: '/static/',
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
+  postcss: () => {
+    return [
+      require('postcss-modules-values'),
+      require('postcss-nested'),
+      require('autoprefixer')
+    ];
+  },
+  module: {
+    loaders: [{
+      test: /js?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['babel']
+    }, {
+      test: /\.json?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['json']
+    }, {
+      test: /\.css$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
+    }]
+  }
+};
+
+const devServer = {
+  hot: true,
+  compress: true,
+  lazy: false,
+  publicPath: config.output.publicPath,
+  historyApiFallback: {
+    index: './static/index.html'
+  }
+};
+
+module.exports = Object.assign({
+  devServer
+}, config);

spikes/graphs-fe/chartjs/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    ["transform-object-rest-spread", {
+      "useBuiltIns": true
+    }],
+    "add-module-exports",
+    "transform-es2015-modules-commonjs",
+    "react-hot-loader/babel"
+  ],
+  "sourceMaps": "both"
+}

spikes/graphs-fe/chartjs/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+coverage
+.nyc_output

spikes/graphs-fe/chartjs/.eslintrc

@@ -0,0 +1,29 @@
+{
+  "extends": "semistandard",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "babel",
+    "react"
+  ],
+  "rules": {
+    "generator-star-spacing": 0,
+    "babel/generator-star-spacing": 1,
+    "space-before-function-paren": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "object-curly-newline": ["error", {
+      "minProperties": 1
+    }],
+    "sort-vars": ["error", {
+      "ignoreCase": true
+    }]
+  }
+}

spikes/graphs-fe/chartjs/.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+coverage
+.nyc_output
+npm-debug.log

spikes/graphs-fe/chartjs/client/chart.js

@@ -0,0 +1,65 @@
+const buildArray = require('build-array');
+const Chart = require('chart.js');
+const ReactRedux = require('react-redux');
+const React = require('react');
+
+const {
+  connect
+} = ReactRedux;
+
+const Component = React.createClass({
+  ref: function(name) {
+    this._refs = this._refs || {};
+
+    return (el) => {
+      this._refs[name] = el;
+    };
+  },
+  fromData: function(data) {
+    return (data || []).map((d) => {
+      return d.cpu;
+    });
+  },
+  componentDidMount: function() {
+    const bars = this.fromData(this.props.data);
+
+    this._chart = new Chart(this._refs.component, {
+      type: 'bar',
+      data: {
+        labels: buildArray(bars.length).map((v, i) => ''),
+        datasets: [{
+          data: bars
+        }]
+      }
+    });
+  },
+  componentWillReceiveProps: function(nextProps) {
+    const bars = this.fromData(this.props.data);
+
+    this._chart.data.labels = buildArray(bars.length).map((v, i) => '');
+    this._chart.data.datasets[0].data = bars;
+
+    this._chart.update(0);
+  },
+  render: function() {
+    return (
+      <canvas
+        ref={this.ref('component')}
+        width='400'
+        height='400'
+      />
+    );
+  }
+});
+
+const mapStateToProps = ({
+  data
+}) => {
+  return {
+    data
+  };
+};
+
+module.exports = connect(
+  mapStateToProps
+)(Component);

spikes/graphs-fe/chartjs/client/index.js

@@ -0,0 +1,46 @@
+const ReactDOM = require('react-dom');
+const React = require('react');
+const store = require('./store')();
+const nes = require('nes/dist/client');
+
+const {
+  Client
+} = nes;
+
+const client = new Client(`ws://${document.location.host}`);
+
+client.connect((err) => {
+  if (err) {
+    throw err;
+  }
+
+  console.log('connected');
+
+  client.subscribe('/stats/5', (update, flag) => {
+    store.dispatch({
+      type: 'UPDATE_STATS',
+      payload: update
+    })
+  }, (err) => {
+    if (err) {
+      throw err;
+    }
+
+    console.log('subscribed');
+  });
+});
+
+const render = () => {
+  const Root = require('./root');
+
+  ReactDOM.render(
+    <Root store={store} />,
+    document.getElementById('root')
+  );
+};
+
+render();
+
+if (module.hot) {
+  module.hot.accept('./root', render);
+}

spikes/graphs-fe/chartjs/client/root.js

@@ -0,0 +1,25 @@
+const React = require('react');
+const ReactHotLoader = require('react-hot-loader');
+const ReactRedux = require('react-redux');
+const Chart = require('./chart');
+
+
+const {
+  AppContainer
+} = ReactHotLoader;
+
+const {
+  Provider
+} = ReactRedux;
+
+module.exports = ({
+  store
+}) => {
+  return (
+    <AppContainer>
+      <Provider store={store}>
+        <Chart />
+      </Provider>
+    </AppContainer>
+  );
+};

spikes/graphs-fe/chartjs/client/store.js

@@ -0,0 +1,25 @@
+const takeRight = require('lodash.takeright');
+const redux = require('redux');
+
+const {
+  createStore,
+  compose,
+  applyMiddleware
+} = redux;
+
+const reducer = (state, action) => {
+  if (action.type !== 'UPDATE_STATS') {
+    return state;
+  }
+
+  const data = (state.data || []).concat([action.payload]);
+
+  return {
+    ...state,
+    data: takeRight(data, 50)
+  };
+};
+
+module.exports = (state = Object.freeze({})) => {
+  return createStore(reducer, state);
+};

spikes/graphs-fe/chartjs/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "chartjs-graphing-spike",
+  "private": true,
+  "license": "private",
+  "main": "server/index.js",
+  "dependencies": {
+    "autoprefixer": "^6.5.1",
+    "babel-eslint": "^7.0.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
+    "babel-plugin-transform-object-rest-spread": "^6.16.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-runtime": "^6.11.6",
+    "build-array": "^1.0.0",
+    "chart.js": "^2.3.0",
+    "component-emitter": "^1.2.1",
+    "css-loader": "^0.25.0",
+    "hapi": "^15.2.0",
+    "hapi-webpack-dev-plugin": "^1.1.4",
+    "inert": "^4.0.2",
+    "lodash.takeright": "^4.1.1",
+    "nes": "^6.3.1",
+    "postcss-loader": "^1.0.0",
+    "postcss-modules-values": "^1.2.2",
+    "postcss-nested": "^1.0.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "react-redux": "^4.4.5",
+    "redux": "^3.6.0",
+    "require-dir": "^0.3.1",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.2"
+  },
+  "devDependencies": {
+    "babel-register": "^6.16.3",
+    "eslint": "^3.8.1",
+    "eslint-config-semistandard": "^7.0.0",
+    "eslint-config-standard": "^6.2.0",
+    "eslint-plugin-babel": "^3.3.0",
+    "eslint-plugin-promise": "^3.3.0",
+    "eslint-plugin-react": "^6.4.1",
+    "eslint-plugin-standard": "^2.0.1",
+    "json-loader": "^0.5.4"
+  },
+  "ava": {
+    "require": [
+      "babel-register"
+    ],
+    "babel": "inherit"
+  }
+}

spikes/graphs-fe/chartjs/readme.md

@@ -0,0 +1,9 @@
+# ChartJS
+
+![](http://g.recordit.co/N8vdP8DBk4.gif)
+
+## summary
+
+ - [x] customisable via js
+ - [x] fast (handles 100ms updates well)
+ - [x] easy to update data

spikes/graphs-fe/chartjs/server/index.js

@@ -0,0 +1,29 @@
+const requireDir = require('require-dir');
+const plugins = require('./plugins');
+const routes = requireDir('./routes');
+const Hapi = require('hapi');
+const path = require('path');
+const fs = require('fs');
+
+const server = new Hapi.Server();
+
+server.connection({
+  host: 'localhost',
+  port: 8000
+});
+
+server.register(plugins, (err) => {
+  if (err) {
+    throw err;
+  }
+
+  Object.keys(routes).forEach((name) => {
+    routes[name](server);
+  });
+
+  server.start((err) => {
+    server.connections.forEach((conn) => {
+      console.log(`started at: ${conn.info.uri}`);
+    });
+  });
+});

spikes/graphs-fe/chartjs/server/metric.js

@@ -0,0 +1,34 @@
+const Emitter = require('component-emitter');
+
+const cdm = {};
+
+module.exports = (server) => ({
+  on: (id) => {
+    console.log('on', cdm[id]);
+    if (cdm[id] && (cdm[id].sockets > 0)) {
+      cdm[id].sockets +=1;
+      return;
+    }
+
+
+    let messageId = 0;
+    const interval = setInterval(() => {
+      console.log(`publishing /stats/${id}`);
+
+      server.publish(`/stats/${id}`, {
+        when: new Date().getTime(),
+        cpu: Math.random() * 100
+      });
+    }, 400);
+
+    cdm[id] = {
+      interval,
+      sockets: 1
+    };
+  },
+  off: (id) => {
+    if (!(cdm[id].sockets -= 1)) {
+      clearInterval(cdm[id].interval);
+    }
+  }
+});

spikes/graphs-fe/chartjs/server/plugins.js

@@ -0,0 +1,15 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const cfg = require('../webpack.config.js');
+
+module.exports = [
+  require('inert'),
+  require('nes'), {
+    register: require('hapi-webpack-dev-plugin'),
+    options: {
+      compiler: webpack(cfg),
+      devIndex: path.join(__dirname, '../static')
+    }
+  }
+];

spikes/graphs-fe/chartjs/server/routes/home.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/',
+    handler: (request, reply) => {
+      reply.file(path.join(__dirname, '../../static/index.html'));
+    }
+  });
+};

spikes/graphs-fe/chartjs/server/routes/metrics.js

@@ -0,0 +1,18 @@
+const Metric = require('../metric');
+
+module.exports = (server) => {
+  const metric = Metric(server);
+
+  server.subscription('/stats/{id}', {
+    onSubscribe: (socket, path, params, next) => {
+      console.log('onSubscribe');
+      metric.on(params.id);
+      next();
+    },
+    onUnsubscribe: (socket, path, params, next) => {
+      console.log('onUnsubscribe');
+      metric.off(params.id);
+      next();
+    }
+  });
+};

spikes/graphs-fe/chartjs/server/routes/static.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = (server) => {
+  // server.route({
+  //   method: 'GET',
+  //   path: '/{param*}',
+  //   handler: {
+  //     directory: {
+  //       path: path.join(__dirname, '../../static'),
+  //       redirectToSlash: true,
+  //       index: true
+  //     }
+  //   }
+  // });
+};

spikes/graphs-fe/chartjs/server/routes/version.js

@@ -0,0 +1,18 @@
+const Pkg = require('../../package.json');
+
+const internals = {
+  response: {
+    version: Pkg.version
+  }
+};
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/ops/version',
+    config: {
+      description: 'Returns the version of the server',
+      handler: (request, reply) => reply(internals.response)
+    }
+  });
+};

spikes/graphs-fe/chartjs/static/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang='en-US'>
+  <head>
+    <title>React Boilerplate</title>
+    <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
+    <link rel="stylesheet" type="text/css" href="https://rawgit.com/epochjs/epoch/master/dist/css/epoch.css" />
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src='/static/bundle.js'></script>
+  </body>
+</html>

spikes/graphs-fe/chartjs/webpack.config.js

@@ -0,0 +1,69 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const config = {
+  debug: true,
+  devtool: 'source-map',
+  context: path.join(__dirname, './client'),
+  app: path.join(__dirname, './client/index.js'),
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/only-dev-server',
+    'react-hot-loader/patch',
+    './index.js'
+  ],
+  output: {
+    path: path.join(__dirname, './static'),
+    publicPath: '/static/',
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
+  postcss: () => {
+    return [
+      require('postcss-modules-values'),
+      require('postcss-nested'),
+      require('autoprefixer')
+    ];
+  },
+  module: {
+    loaders: [{
+      test: /js?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['babel']
+    }, {
+      test: /\.json?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['json']
+    }, {
+      test: /\.css$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
+    }]
+  }
+};
+
+const devServer = {
+  hot: true,
+  compress: true,
+  lazy: false,
+  publicPath: config.output.publicPath,
+  historyApiFallback: {
+    index: './static/index.html'
+  }
+};
+
+module.exports = Object.assign({
+  devServer
+}, config);

spikes/graphs-fe/epoch/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    ["transform-object-rest-spread", {
+      "useBuiltIns": true
+    }],
+    "add-module-exports",
+    "transform-es2015-modules-commonjs",
+    "react-hot-loader/babel"
+  ],
+  "sourceMaps": "both"
+}

spikes/graphs-fe/epoch/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+coverage
+.nyc_output

spikes/graphs-fe/epoch/.eslintrc

@@ -0,0 +1,29 @@
+{
+  "extends": "semistandard",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "babel",
+    "react"
+  ],
+  "rules": {
+    "generator-star-spacing": 0,
+    "babel/generator-star-spacing": 1,
+    "space-before-function-paren": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "object-curly-newline": ["error", {
+      "minProperties": 1
+    }],
+    "sort-vars": ["error", {
+      "ignoreCase": true
+    }]
+  }
+}

spikes/graphs-fe/epoch/.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+coverage
+.nyc_output
+npm-debug.log

spikes/graphs-fe/epoch/client/epoch.js

@@ -0,0 +1,212 @@
+// injects into `window` (ikr)
+require('epoch-charting');
+
+const ReactRedux = require('react-redux');
+const React = require('react');
+
+const {
+  // Chart: {
+  //   Bar
+  // }
+  Time: {
+    Bar
+  }
+} = window.Epoch;
+
+const {
+  connect
+} = ReactRedux;
+
+const style = {
+  height: '220px'
+};
+
+const EpochGraph = React.createClass({
+  ref: function(name) {
+    this._refs = this._refs || {};
+
+    return (el) => {
+      this._refs[name] = el;
+    };
+  },
+  fromData: function(data) {
+    return (data || []).map((d) => {
+      return {
+        y: d.cpu,
+        time: d.when
+      };
+    });
+  },
+  componentDidMount: function() {
+    this.chart = new Bar({
+      el: this._refs.component,
+      type: 'time.bar',
+      data: [{
+        label: 'A',
+        values: []
+      }]
+    });
+
+
+    // {
+    //   time: 1478605670,
+    //   y: 2
+    // }, {
+    //   time: 1478605671,
+    //   y: 1.9876883405951378
+    // }, {
+    //   time: 1478605672,
+    //   y: 1.9510565162951536
+    // }, {
+    //   time: 1478605673,
+    //   y: 1.8910065241883678
+    // }, {
+    //   time: 1478605674,
+    //   y: 1.8090169943749475
+    // }, {
+    //   time: 1478605675,
+    //   y: 1.7071067811865475
+    // }, {
+    //   time: 1478605676,
+    //   y: 1.5877852522924731
+    // }, {
+    //   time: 1478605677,
+    //   y: 1.4539904997395467
+    // }, {
+    //   time: 1478605678,
+    //   y: 1.3090169943749475
+    // }, {
+    //   time: 1478605679,
+    //   y: 1.156434465040231
+    // }, {
+    //   time: 1478605680,
+    //   y: 1
+    // }, {
+    //   time: 1478605681,
+    //   y: 0.8435655349597694
+    // }, {
+    //   time: 1478605682,
+    //   y: 0.6909830056250527
+    // }, {
+    //   time: 1478605683,
+    //   y: 0.5460095002604533
+    // }, {
+    //   time: 1478605684,
+    //   y: 0.412214747707527
+    // }, {
+    //   time: 1478605685,
+    //   y: 0.29289321881345254
+    // }, {
+    //   time: 1478605686,
+    //   y: 0.19098300562505266
+    // }, {
+    //   time: 1478605687,
+    //   y: 0.10899347581163221
+    // }, {
+    //   time: 1478605688,
+    //   y: 0.04894348370484647
+    // }, {
+    //   time: 1478605689,
+    //   y: 0.01231165940486234
+    // }, {
+    //   time: 1478605690,
+    //   y: 0
+    // }, {
+    //   time: 1478605691,
+    //   y: 0.01231165940486223
+    // }, {
+    //   time: 1478605692,
+    //   y: 0.04894348370484625
+    // }, {
+    //   time: 1478605693,
+    //   y: 0.1089934758116321
+    // }, {
+    //   time: 1478605694,
+    //   y: 0.19098300562505255
+    // }, {
+    //   time: 1478605695,
+    //   y: 0.2928932188134523
+    // }, {
+    //   time: 1478605696,
+    //   y: 0.41221474770752675
+    // }, {
+    //   time: 1478605697,
+    //   y: 0.546009500260453
+    // }, {
+    //   time: 1478605698,
+    //   y: 0.6909830056250524
+    // }, {
+    //   time: 1478605699,
+    //   y: 0.8435655349597689
+    // }, {
+    //   time: 1478605700,
+    //   y: 0.9999999999999998
+    // }, {
+    //   time: 1478605701,
+    //   y: 1.1564344650402307
+    // }, {
+    //   time: 1478605702,
+    //   y: 1.3090169943749472
+    // }, {
+    //   time: 1478605703,
+    //   y: 1.4539904997395467
+    // }, {
+    //   time: 1478605704,
+    //   y: 1.587785252292473
+    // }, {
+    //   time: 1478605705,
+    //   y: 1.7071067811865475
+    // }, {
+    //   time: 1478605706,
+    //   y: 1.8090169943749475
+    // }, {
+    //   time: 1478605707,
+    //   y: 1.8910065241883678
+    // }, {
+    //   time: 1478605708,
+    //   y: 1.9510565162951536
+    // }, {
+    //   time: 1478605709,
+    //   y: 1.9876883405951378
+    // }
+
+
+    // this.chart = new Bar({
+    //   el: this._refs.component,
+    //   data: [{
+    //     values: [{
+    //       x: 'A',
+    //       y: 20
+    //     }, {
+    //       x: 'B',
+    //       y: 39
+    //     }, {
+    //       x: 'C',
+    //       y: 8
+    //     }, ]
+    //   }]
+    // });
+  },
+  componentWillReceiveProps: function(nextProps) {
+    this.fromData(this.props.data).forEach((r) => this.chart.push([r]));
+  },
+  render: function() {
+    return (
+      <div
+        style={style}
+        className='epoch epoch-theme-default category20'
+        ref={this.ref('component')}
+      />
+    );
+  }
+});
+
+const mapStateToProps = ({
+  data
+}) => {
+  return {
+    data
+  };
+};
+
+module.exports = connect(mapStateToProps)(EpochGraph);

spikes/graphs-fe/epoch/client/index.js

@@ -0,0 +1,46 @@
+const ReactDOM = require('react-dom');
+const React = require('react');
+const store = require('./store')();
+const nes = require('nes/dist/client');
+
+const {
+  Client
+} = nes;
+
+const client = new Client(`ws://${document.location.host}`);
+
+client.connect((err) => {
+  if (err) {
+    throw err;
+  }
+
+  console.log('connected');
+
+  client.subscribe('/stats/5', (update, flag) => {
+    store.dispatch({
+      type: 'UPDATE_STATS',
+      payload: update
+    })
+  }, (err) => {
+    if (err) {
+      throw err;
+    }
+
+    console.log('subscribed');
+  });
+});
+
+const render = () => {
+  const Root = require('./root');
+
+  ReactDOM.render(
+    <Root store={store} />,
+    document.getElementById('root')
+  );
+};
+
+render();
+
+if (module.hot) {
+  module.hot.accept('./root', render);
+}

spikes/graphs-fe/epoch/client/root.js

@@ -0,0 +1,25 @@
+const React = require('react');
+const ReactHotLoader = require('react-hot-loader');
+const ReactRedux = require('react-redux');
+const EpochGraph = require('./epoch');
+
+
+const {
+  AppContainer
+} = ReactHotLoader;
+
+const {
+  Provider
+} = ReactRedux;
+
+module.exports = ({
+  store
+}) => {
+  return (
+    <AppContainer>
+      <Provider store={store}>
+        <EpochGraph />
+      </Provider>
+    </AppContainer>
+  );
+};

spikes/graphs-fe/epoch/client/store.js

@@ -0,0 +1,25 @@
+const takeRight = require('lodash.takeright');
+const redux = require('redux');
+
+const {
+  createStore,
+  compose,
+  applyMiddleware
+} = redux;
+
+const reducer = (state, action) => {
+  if (action.type !== 'UPDATE_STATS') {
+    return state;
+  }
+
+  const data = (state.data || []).concat([action.payload]);
+
+  return {
+    ...state,
+    data: takeRight(data, 50)
+  };
+};
+
+module.exports = (state = Object.freeze({})) => {
+  return createStore(reducer, state);
+};

spikes/graphs-fe/epoch/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "epoch-graphing-spike",
+  "private": true,
+  "license": "private",
+  "main": "server/index.js",
+  "dependencies": {
+    "autoprefixer": "^6.5.1",
+    "babel-eslint": "^7.0.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
+    "babel-plugin-transform-object-rest-spread": "^6.16.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-runtime": "^6.11.6",
+    "component-emitter": "^1.2.1",
+    "css-loader": "^0.25.0",
+    "d3": "^4.3.0",
+    "epoch-charting": "^0.8.4",
+    "hapi": "^15.2.0",
+    "hapi-webpack-dev-plugin": "^1.1.4",
+    "inert": "^4.0.2",
+    "lodash.takeright": "^4.1.1",
+    "nes": "^6.3.1",
+    "postcss-loader": "^1.0.0",
+    "postcss-modules-values": "^1.2.2",
+    "postcss-nested": "^1.0.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "react-redux": "^4.4.5",
+    "redux": "^3.6.0",
+    "require-dir": "^0.3.1",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.2"
+  },
+  "devDependencies": {
+    "babel-register": "^6.16.3",
+    "eslint": "^3.8.1",
+    "eslint-config-semistandard": "^7.0.0",
+    "eslint-config-standard": "^6.2.0",
+    "eslint-plugin-babel": "^3.3.0",
+    "eslint-plugin-promise": "^3.3.0",
+    "eslint-plugin-react": "^6.4.1",
+    "eslint-plugin-standard": "^2.0.1",
+    "json-loader": "^0.5.4"
+  },
+  "ava": {
+    "require": [
+      "babel-register"
+    ],
+    "babel": "inherit"
+  }
+}

spikes/graphs-fe/epoch/readme.md

@@ -0,0 +1,6 @@
+# Epoch
+
+![](http://g.recordit.co/4LVH7PlAJP.gif)
+
+## summary
+

spikes/graphs-fe/epoch/server/index.js

@@ -0,0 +1,29 @@
+const requireDir = require('require-dir');
+const plugins = require('./plugins');
+const routes = requireDir('./routes');
+const Hapi = require('hapi');
+const path = require('path');
+const fs = require('fs');
+
+const server = new Hapi.Server();
+
+server.connection({
+  host: 'localhost',
+  port: 8000
+});
+
+server.register(plugins, (err) => {
+  if (err) {
+    throw err;
+  }
+
+  Object.keys(routes).forEach((name) => {
+    routes[name](server);
+  });
+
+  server.start((err) => {
+    server.connections.forEach((conn) => {
+      console.log(`started at: ${conn.info.uri}`);
+    });
+  });
+});

spikes/graphs-fe/epoch/server/metric.js

@@ -0,0 +1,34 @@
+const Emitter = require('component-emitter');
+
+const cdm = {};
+
+module.exports = (server) => ({
+  on: (id) => {
+    console.log('on', cdm[id]);
+    if (cdm[id] && (cdm[id].sockets > 0)) {
+      cdm[id].sockets +=1;
+      return;
+    }
+
+
+    let messageId = 0;
+    const interval = setInterval(() => {
+      console.log(`publishing /stats/${id}`);
+
+      server.publish(`/stats/${id}`, {
+        when: new Date().getTime(),
+        cpu: Math.random() * 100
+      });
+    }, 400);
+
+    cdm[id] = {
+      interval,
+      sockets: 1
+    };
+  },
+  off: (id) => {
+    if (!(cdm[id].sockets -= 1)) {
+      clearInterval(cdm[id].interval);
+    }
+  }
+});

spikes/graphs-fe/epoch/server/plugins.js

@@ -0,0 +1,15 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const cfg = require('../webpack.config.js');
+
+module.exports = [
+  require('inert'),
+  require('nes'), {
+    register: require('hapi-webpack-dev-plugin'),
+    options: {
+      compiler: webpack(cfg),
+      devIndex: path.join(__dirname, '../static')
+    }
+  }
+];

spikes/graphs-fe/epoch/server/routes/home.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/',
+    handler: (request, reply) => {
+      reply.file(path.join(__dirname, '../../static/index.html'));
+    }
+  });
+};

spikes/graphs-fe/epoch/server/routes/metrics.js

@@ -0,0 +1,18 @@
+const Metric = require('../metric');
+
+module.exports = (server) => {
+  const metric = Metric(server);
+
+  server.subscription('/stats/{id}', {
+    onSubscribe: (socket, path, params, next) => {
+      console.log('onSubscribe');
+      metric.on(params.id);
+      next();
+    },
+    onUnsubscribe: (socket, path, params, next) => {
+      console.log('onUnsubscribe');
+      metric.off(params.id);
+      next();
+    }
+  });
+};

spikes/graphs-fe/epoch/server/routes/static.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = (server) => {
+  // server.route({
+  //   method: 'GET',
+  //   path: '/{param*}',
+  //   handler: {
+  //     directory: {
+  //       path: path.join(__dirname, '../../static'),
+  //       redirectToSlash: true,
+  //       index: true
+  //     }
+  //   }
+  // });
+};

spikes/graphs-fe/epoch/server/routes/version.js

@@ -0,0 +1,18 @@
+const Pkg = require('../../package.json');
+
+const internals = {
+  response: {
+    version: Pkg.version
+  }
+};
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/ops/version',
+    config: {
+      description: 'Returns the version of the server',
+      handler: (request, reply) => reply(internals.response)
+    }
+  });
+};

spikes/graphs-fe/epoch/static/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang='en-US'>
+  <head>
+    <title>React Boilerplate</title>
+    <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
+    <link rel="stylesheet" type="text/css" href="https://rawgit.com/epochjs/epoch/master/dist/css/epoch.css" />
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src='/static/bundle.js'></script>
+  </body>
+</html>

spikes/graphs-fe/epoch/webpack.config.js

@@ -0,0 +1,72 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const config = {
+  debug: true,
+  devtool: 'source-map',
+  context: path.join(__dirname, './client'),
+  app: path.join(__dirname, './client/index.js'),
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/only-dev-server',
+    'react-hot-loader/patch',
+    './index.js'
+  ],
+  output: {
+    path: path.join(__dirname, './static'),
+    publicPath: '/static/',
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    new webpack.ProvidePlugin({
+      'd3': 'd3'
+    })
+  ],
+  postcss: () => {
+    return [
+      require('postcss-modules-values'),
+      require('postcss-nested'),
+      require('autoprefixer')
+    ];
+  },
+  module: {
+    loaders: [{
+      test: /js?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['babel']
+    }, {
+      test: /\.json?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['json']
+    }, {
+      test: /\.css$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
+    }]
+  }
+};
+
+const devServer = {
+  hot: true,
+  compress: true,
+  lazy: false,
+  publicPath: config.output.publicPath,
+  historyApiFallback: {
+    index: './static/index.html'
+  }
+};
+
+module.exports = Object.assign({
+  devServer
+}, config);

spikes/graphs-fe/nvd3/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    ["transform-object-rest-spread", {
+      "useBuiltIns": true
+    }],
+    "add-module-exports",
+    "transform-es2015-modules-commonjs",
+    "react-hot-loader/babel"
+  ],
+  "sourceMaps": "both"
+}

spikes/graphs-fe/nvd3/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+coverage
+.nyc_output

spikes/graphs-fe/nvd3/.eslintrc

@@ -0,0 +1,29 @@
+{
+  "extends": "semistandard",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "babel",
+    "react"
+  ],
+  "rules": {
+    "generator-star-spacing": 0,
+    "babel/generator-star-spacing": 1,
+    "space-before-function-paren": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "object-curly-newline": ["error", {
+      "minProperties": 1
+    }],
+    "sort-vars": ["error", {
+      "ignoreCase": true
+    }]
+  }
+}

spikes/graphs-fe/nvd3/.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+coverage
+.nyc_output
+npm-debug.log

spikes/graphs-fe/nvd3/client/chart.js

@@ -0,0 +1,58 @@
+const NVD3Chart = require('react-nvd3');
+const ReactRedux = require('react-redux');
+const React = require('react');
+
+const {
+  connect
+} = ReactRedux;
+
+const Component = ({
+  data
+}) => {
+  const datum = [{
+    key: 'test',
+    values: (data || []).map((v, i) => ({
+      label: `${i}`,
+      value: v.cpu
+    }))
+  }];
+
+  const context = {
+    getColor: (i) => {
+      if (i.value > 50) {
+        return 'red';
+      }
+
+      return 'green';
+    }
+  };
+
+  const color = {
+    name: 'getColor',
+    type: 'function'
+  };
+
+  return (
+    <NVD3Chart
+      duration={0}
+      context={context}
+      color={color}
+      type='discreteBarChart'
+      datum={datum}
+      x='label'
+      y='value'
+    />
+  );
+};
+
+const mapStateToProps = ({
+  data
+}) => {
+  return {
+    data
+  };
+};
+
+module.exports = connect(
+  mapStateToProps
+)(Component);

spikes/graphs-fe/nvd3/client/index.js

@@ -0,0 +1,46 @@
+const ReactDOM = require('react-dom');
+const React = require('react');
+const store = require('./store')();
+const nes = require('nes/dist/client');
+
+const {
+  Client
+} = nes;
+
+const client = new Client(`ws://${document.location.host}`);
+
+client.connect((err) => {
+  if (err) {
+    throw err;
+  }
+
+  console.log('connected');
+
+  client.subscribe('/stats/5', (update, flag) => {
+    store.dispatch({
+      type: 'UPDATE_STATS',
+      payload: update
+    })
+  }, (err) => {
+    if (err) {
+      throw err;
+    }
+
+    console.log('subscribed');
+  });
+});
+
+const render = () => {
+  const Root = require('./root');
+
+  ReactDOM.render(
+    <Root store={store} />,
+    document.getElementById('root')
+  );
+};
+
+render();
+
+if (module.hot) {
+  module.hot.accept('./root', render);
+}

spikes/graphs-fe/nvd3/client/root.js

@@ -0,0 +1,25 @@
+const React = require('react');
+const ReactHotLoader = require('react-hot-loader');
+const ReactRedux = require('react-redux');
+const Chart = require('./chart');
+
+
+const {
+  AppContainer
+} = ReactHotLoader;
+
+const {
+  Provider
+} = ReactRedux;
+
+module.exports = ({
+  store
+}) => {
+  return (
+    <AppContainer>
+      <Provider store={store}>
+        <Chart />
+      </Provider>
+    </AppContainer>
+  );
+};

spikes/graphs-fe/nvd3/client/store.js

@@ -0,0 +1,25 @@
+const takeRight = require('lodash.takeright');
+const redux = require('redux');
+
+const {
+  createStore,
+  compose,
+  applyMiddleware
+} = redux;
+
+const reducer = (state, action) => {
+  if (action.type !== 'UPDATE_STATS') {
+    return state;
+  }
+
+  const data = (state.data || []).concat([action.payload]);
+
+  return {
+    ...state,
+    data: takeRight(data, 50)
+  };
+};
+
+module.exports = (state = Object.freeze({})) => {
+  return createStore(reducer, state);
+};

spikes/graphs-fe/nvd3/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "nvd3-graphing-spike",
+  "private": true,
+  "license": "private",
+  "main": "server/index.js",
+  "dependencies": {
+    "autoprefixer": "^6.5.1",
+    "babel-eslint": "^7.0.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
+    "babel-plugin-transform-object-rest-spread": "^6.16.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-runtime": "^6.11.6",
+    "build-array": "^1.0.0",
+    "component-emitter": "^1.2.1",
+    "css-loader": "^0.25.0",
+    "hapi": "^15.2.0",
+    "hapi-webpack-dev-plugin": "^1.1.4",
+    "inert": "^4.0.2",
+    "lodash.takeright": "^4.1.1",
+    "nes": "^6.3.1",
+    "postcss-loader": "^1.0.0",
+    "postcss-modules-values": "^1.2.2",
+    "postcss-nested": "^1.0.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "react-nvd3": "^0.5.7",
+    "react-redux": "^4.4.5",
+    "redux": "^3.6.0",
+    "require-dir": "^0.3.1",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.2"
+  },
+  "devDependencies": {
+    "babel-register": "^6.16.3",
+    "eslint": "^3.8.1",
+    "eslint-config-semistandard": "^7.0.0",
+    "eslint-config-standard": "^6.2.0",
+    "eslint-plugin-babel": "^3.3.0",
+    "eslint-plugin-promise": "^3.3.0",
+    "eslint-plugin-react": "^6.4.1",
+    "eslint-plugin-standard": "^2.0.1",
+    "json-loader": "^0.5.4"
+  },
+  "ava": {
+    "require": [
+      "babel-register"
+    ],
+    "babel": "inherit"
+  }
+}

spikes/graphs-fe/nvd3/readme.md

@@ -0,0 +1,9 @@
+# NVD3
+
+![](http://g.recordit.co/BGRyJNZxME.gif)
+
+## summary
+
+ - [x] customisable via js and css
+ - [x] fast (handles 100ms updates well)
+ - [x] simple react integration

spikes/graphs-fe/nvd3/server/index.js

@@ -0,0 +1,29 @@
+const requireDir = require('require-dir');
+const plugins = require('./plugins');
+const routes = requireDir('./routes');
+const Hapi = require('hapi');
+const path = require('path');
+const fs = require('fs');
+
+const server = new Hapi.Server();
+
+server.connection({
+  host: 'localhost',
+  port: 8000
+});
+
+server.register(plugins, (err) => {
+  if (err) {
+    throw err;
+  }
+
+  Object.keys(routes).forEach((name) => {
+    routes[name](server);
+  });
+
+  server.start((err) => {
+    server.connections.forEach((conn) => {
+      console.log(`started at: ${conn.info.uri}`);
+    });
+  });
+});

spikes/graphs-fe/nvd3/server/metric.js

@@ -0,0 +1,34 @@
+const Emitter = require('component-emitter');
+
+const cdm = {};
+
+module.exports = (server) => ({
+  on: (id) => {
+    console.log('on', cdm[id]);
+    if (cdm[id] && (cdm[id].sockets > 0)) {
+      cdm[id].sockets +=1;
+      return;
+    }
+
+
+    let messageId = 0;
+    const interval = setInterval(() => {
+      console.log(`publishing /stats/${id}`);
+
+      server.publish(`/stats/${id}`, {
+        when: new Date().getTime(),
+        cpu: Math.random() * 100
+      });
+    }, 100);
+
+    cdm[id] = {
+      interval,
+      sockets: 1
+    };
+  },
+  off: (id) => {
+    if (!(cdm[id].sockets -= 1)) {
+      clearInterval(cdm[id].interval);
+    }
+  }
+});

spikes/graphs-fe/nvd3/server/plugins.js

@@ -0,0 +1,15 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const cfg = require('../webpack.config.js');
+
+module.exports = [
+  require('inert'),
+  require('nes'), {
+    register: require('hapi-webpack-dev-plugin'),
+    options: {
+      compiler: webpack(cfg),
+      devIndex: path.join(__dirname, '../static')
+    }
+  }
+];

spikes/graphs-fe/nvd3/server/routes/home.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/',
+    handler: (request, reply) => {
+      reply.file(path.join(__dirname, '../../static/index.html'));
+    }
+  });
+};

spikes/graphs-fe/nvd3/server/routes/metrics.js

@@ -0,0 +1,18 @@
+const Metric = require('../metric');
+
+module.exports = (server) => {
+  const metric = Metric(server);
+
+  server.subscription('/stats/{id}', {
+    onSubscribe: (socket, path, params, next) => {
+      console.log('onSubscribe');
+      metric.on(params.id);
+      next();
+    },
+    onUnsubscribe: (socket, path, params, next) => {
+      console.log('onUnsubscribe');
+      metric.off(params.id);
+      next();
+    }
+  });
+};

spikes/graphs-fe/nvd3/server/routes/static.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = (server) => {
+  // server.route({
+  //   method: 'GET',
+  //   path: '/{param*}',
+  //   handler: {
+  //     directory: {
+  //       path: path.join(__dirname, '../../static'),
+  //       redirectToSlash: true,
+  //       index: true
+  //     }
+  //   }
+  // });
+};

spikes/graphs-fe/nvd3/server/routes/version.js

@@ -0,0 +1,18 @@
+const Pkg = require('../../package.json');
+
+const internals = {
+  response: {
+    version: Pkg.version
+  }
+};
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/ops/version',
+    config: {
+      description: 'Returns the version of the server',
+      handler: (request, reply) => reply(internals.response)
+    }
+  });
+};

spikes/graphs-fe/nvd3/static/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang='en-US'>
+  <head>
+    <title>React Boilerplate</title>
+    <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
+    <link rel="stylesheet" type="text/css" href="https://rawgit.com/epochjs/epoch/master/dist/css/epoch.css" />
+    <style>
+      .nv-x {
+        display: none;
+      }
+
+      .nvd3-svg {
+        width: 1080px;
+        height: 720px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src='/static/bundle.js'></script>
+  </body>
+</html>

spikes/graphs-fe/nvd3/webpack.config.js

@@ -0,0 +1,69 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const config = {
+  debug: true,
+  devtool: 'source-map',
+  context: path.join(__dirname, './client'),
+  app: path.join(__dirname, './client/index.js'),
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/only-dev-server',
+    'react-hot-loader/patch',
+    './index.js'
+  ],
+  output: {
+    path: path.join(__dirname, './static'),
+    publicPath: '/static/',
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
+  postcss: () => {
+    return [
+      require('postcss-modules-values'),
+      require('postcss-nested'),
+      require('autoprefixer')
+    ];
+  },
+  module: {
+    loaders: [{
+      test: /js?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['babel']
+    }, {
+      test: /\.json?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['json']
+    }, {
+      test: /\.css$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
+    }]
+  }
+};
+
+const devServer = {
+  hot: true,
+  compress: true,
+  lazy: false,
+  publicPath: config.output.publicPath,
+  historyApiFallback: {
+    index: './static/index.html'
+  }
+};
+
+module.exports = Object.assign({
+  devServer
+}, config);

spikes/graphs-fe/plotly/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    ["transform-object-rest-spread", {
+      "useBuiltIns": true
+    }],
+    "add-module-exports",
+    "transform-es2015-modules-commonjs",
+    "react-hot-loader/babel"
+  ],
+  "sourceMaps": "both"
+}

spikes/graphs-fe/plotly/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+coverage
+.nyc_output

spikes/graphs-fe/plotly/.eslintrc

@@ -0,0 +1,29 @@
+{
+  "extends": "semistandard",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "babel",
+    "react"
+  ],
+  "rules": {
+    "generator-star-spacing": 0,
+    "babel/generator-star-spacing": 1,
+    "space-before-function-paren": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "object-curly-newline": ["error", {
+      "minProperties": 1
+    }],
+    "sort-vars": ["error", {
+      "ignoreCase": true
+    }]
+  }
+}

spikes/graphs-fe/plotly/.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+coverage
+.nyc_output
+npm-debug.log

spikes/graphs-fe/plotly/client/index.js

@@ -0,0 +1,46 @@
+const ReactDOM = require('react-dom');
+const React = require('react');
+const store = require('./store')();
+const nes = require('nes/dist/client');
+
+const {
+  Client
+} = nes;
+
+const client = new Client(`ws://${document.location.host}`);
+
+client.connect((err) => {
+  if (err) {
+    throw err;
+  }
+
+  console.log('connected');
+
+  client.subscribe('/stats/5', (update, flag) => {
+    store.dispatch({
+      type: 'UPDATE_STATS',
+      payload: update
+    })
+  }, (err) => {
+    if (err) {
+      throw err;
+    }
+
+    console.log('subscribed');
+  });
+});
+
+const render = () => {
+  const Root = require('./root');
+
+  ReactDOM.render(
+    <Root store={store} />,
+    document.getElementById('root')
+  );
+};
+
+render();
+
+if (module.hot) {
+  module.hot.accept('./root', render);
+}

spikes/graphs-fe/plotly/client/plotly.js

@@ -0,0 +1,68 @@
+const Plotly = require('react-plotlyjs');
+const ReactRedux = require('react-redux');
+const React = require('react');
+
+const {
+  connect
+} = ReactRedux;
+
+const PlotlyGraph = React.createClass({
+  render: function() {
+    const {
+      data = []
+    } = this.props;
+
+    const cpu = data.map((d) => Math.floor(d.cpu));
+    const datatime = data.map((d, i) => i);
+
+    const graphTypes = [{
+      type: 'bar',
+      marker: {
+        color: 'rgba(205, 54, 54, 0.3)'
+      }
+    }, {
+      type: 'bar',
+      marker: {
+        color: 'rgba(54, 74, 205, 0.3)'
+      }
+    }];
+
+    const graphs = graphTypes.map((graphType, i) => {
+      const data = {
+        type: graphType.type,
+        mode: graphType.mode,
+        marker: graphType.marker,
+        x: datatime,
+        y: cpu
+      };
+
+      const layout = {
+        barmode: graphType.mode
+      };
+
+      return (
+        <Plotly
+          key={i}
+          layout={layout}
+          data={[data]}
+        />
+      );
+    });
+
+    return (
+      <div>
+        {graphs}
+      </div>
+    )
+  }
+});
+
+const mapStateToProps = ({
+  data
+}) => {
+  return {
+    data
+  };
+};
+
+module.exports = connect(mapStateToProps)(PlotlyGraph);

spikes/graphs-fe/plotly/client/root.js

@@ -0,0 +1,25 @@
+const React = require('react');
+const ReactHotLoader = require('react-hot-loader');
+const ReactRedux = require('react-redux');
+const PlotlyGraph = require('./plotly');
+
+
+const {
+  AppContainer
+} = ReactHotLoader;
+
+const {
+  Provider
+} = ReactRedux;
+
+module.exports = ({
+  store
+}) => {
+  return (
+    <AppContainer>
+      <Provider store={store}>
+        <PlotlyGraph />
+      </Provider>
+    </AppContainer>
+  );
+};

spikes/graphs-fe/plotly/client/store.js

@@ -0,0 +1,25 @@
+const takeRight = require('lodash.takeright');
+const redux = require('redux');
+
+const {
+  createStore,
+  compose,
+  applyMiddleware
+} = redux;
+
+const reducer = (state, action) => {
+  if (action.type !== 'UPDATE_STATS') {
+    return state;
+  }
+
+  const data = (state.data || []).concat([action.payload]);
+
+  return {
+    ...state,
+    data: takeRight(data, 50)
+  };
+};
+
+module.exports = (state = Object.freeze({})) => {
+  return createStore(reducer, state);
+};

spikes/graphs-fe/plotly/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "redux-thunks-spike",
+  "private": true,
+  "license": "private",
+  "main": "server/index.js",
+  "dependencies": {
+    "autoprefixer": "^6.5.1",
+    "babel-eslint": "^7.0.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
+    "babel-plugin-transform-object-rest-spread": "^6.16.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-runtime": "^6.11.6",
+    "component-emitter": "^1.2.1",
+    "css-loader": "^0.25.0",
+    "hapi": "^15.2.0",
+    "hapi-webpack-dev-plugin": "^1.1.4",
+    "inert": "^4.0.2",
+    "lodash.takeright": "^4.1.1",
+    "nes": "^6.3.1",
+    "postcss-loader": "^1.0.0",
+    "postcss-modules-values": "^1.2.2",
+    "postcss-nested": "^1.0.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "react-plotlyjs": "^0.3.7",
+    "react-redux": "^4.4.5",
+    "redux": "^3.6.0",
+    "require-dir": "^0.3.1",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.2"
+  },
+  "devDependencies": {
+    "babel-register": "^6.16.3",
+    "eslint": "^3.8.1",
+    "eslint-config-semistandard": "^7.0.0",
+    "eslint-config-standard": "^6.2.0",
+    "eslint-plugin-babel": "^3.3.0",
+    "eslint-plugin-promise": "^3.3.0",
+    "eslint-plugin-react": "^6.4.1",
+    "eslint-plugin-standard": "^2.0.1",
+    "json-loader": "^0.5.4"
+  },
+  "ava": {
+    "require": [
+      "babel-register"
+    ],
+    "babel": "inherit"
+  }
+}

spikes/graphs-fe/plotly/readme.md

@@ -0,0 +1,17 @@
+# Plotly
+
+![](http://g.recordit.co/FtMgVC8tE3.gif)
+
+Adding plotly through npm and created a plotly graph components
+Running three different graph types of the same data on the same page
+
+## summary
+
+Pros: 
+ - [x] simple and complete api for static graphs
+
+Cons:
+ - [ ] very slow on consecutive renders (if they happen in short intervals)
+ - [ ] lacking api for real time graphs
+ - [ ] `restyle` or `recalc` are only useful for style changes
+ - [ ] `extendTraces` API is not documented and not obvious

spikes/graphs-fe/plotly/server/index.js

@@ -0,0 +1,29 @@
+const requireDir = require('require-dir');
+const plugins = require('./plugins');
+const routes = requireDir('./routes');
+const Hapi = require('hapi');
+const path = require('path');
+const fs = require('fs');
+
+const server = new Hapi.Server();
+
+server.connection({
+  host: 'localhost',
+  port: 8000
+});
+
+server.register(plugins, (err) => {
+  if (err) {
+    throw err;
+  }
+
+  Object.keys(routes).forEach((name) => {
+    routes[name](server);
+  });
+
+  server.start((err) => {
+    server.connections.forEach((conn) => {
+      console.log(`started at: ${conn.info.uri}`);
+    });
+  });
+});

spikes/graphs-fe/plotly/server/metric.js

@@ -0,0 +1,34 @@
+const Emitter = require('component-emitter');
+
+const cdm = {};
+
+module.exports = (server) => ({
+  on: (id) => {
+    console.log('on', cdm[id]);
+    if (cdm[id] && (cdm[id].sockets > 0)) {
+      cdm[id].sockets +=1;
+      return;
+    }
+
+
+    let messageId = 0;
+    const interval = setInterval(() => {
+      console.log(`publishing /stats/${id}`);
+
+      server.publish(`/stats/${id}`, {
+        when: new Date().getTime(),
+        cpu: Math.random() * 100
+      });
+    }, 400);
+
+    cdm[id] = {
+      interval,
+      sockets: 1
+    };
+  },
+  off: (id) => {
+    if (!(cdm[id].sockets -= 1)) {
+      clearInterval(cdm[id].interval);
+    }
+  }
+});

spikes/graphs-fe/plotly/server/plugins.js

@@ -0,0 +1,15 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const cfg = require('../webpack.config.js');
+
+module.exports = [
+  require('inert'),
+  require('nes'), {
+    register: require('hapi-webpack-dev-plugin'),
+    options: {
+      compiler: webpack(cfg),
+      devIndex: path.join(__dirname, '../static')
+    }
+  }
+];

spikes/graphs-fe/plotly/server/routes/home.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/',
+    handler: (request, reply) => {
+      reply.file(path.join(__dirname, '../../static/index.html'));
+    }
+  });
+};

spikes/graphs-fe/plotly/server/routes/metrics.js

@@ -0,0 +1,18 @@
+const Metric = require('../metric');
+
+module.exports = (server) => {
+  const metric = Metric(server);
+
+  server.subscription('/stats/{id}', {
+    onSubscribe: (socket, path, params, next) => {
+      console.log('onSubscribe');
+      metric.on(params.id);
+      next();
+    },
+    onUnsubscribe: (socket, path, params, next) => {
+      console.log('onUnsubscribe');
+      metric.off(params.id);
+      next();
+    }
+  });
+};

spikes/graphs-fe/plotly/server/routes/static.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = (server) => {
+  // server.route({
+  //   method: 'GET',
+  //   path: '/{param*}',
+  //   handler: {
+  //     directory: {
+  //       path: path.join(__dirname, '../../static'),
+  //       redirectToSlash: true,
+  //       index: true
+  //     }
+  //   }
+  // });
+};

spikes/graphs-fe/plotly/server/routes/version.js

@@ -0,0 +1,18 @@
+const Pkg = require('../../package.json');
+
+const internals = {
+  response: {
+    version: Pkg.version
+  }
+};
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/ops/version',
+    config: {
+      description: 'Returns the version of the server',
+      handler: (request, reply) => reply(internals.response)
+    }
+  });
+};

spikes/graphs-fe/plotly/static/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang='en-US'>
+  <head>
+    <title>React Boilerplate</title>
+    <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src='/static/bundle.js'></script>
+  </body>
+</html>

spikes/graphs-fe/plotly/webpack.config.js

@@ -0,0 +1,69 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const config = {
+  debug: true,
+  devtool: 'source-map',
+  context: path.join(__dirname, './client'),
+  app: path.join(__dirname, './client/index.js'),
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/only-dev-server',
+    'react-hot-loader/patch',
+    './index.js'
+  ],
+  output: {
+    path: path.join(__dirname, './static'),
+    publicPath: '/static/',
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
+  postcss: () => {
+    return [
+      require('postcss-modules-values'),
+      require('postcss-nested'),
+      require('autoprefixer')
+    ];
+  },
+  module: {
+    loaders: [{
+      test: /js?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['babel']
+    }, {
+      test: /\.json?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['json']
+    }, {
+      test: /\.css$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
+    }]
+  }
+};
+
+const devServer = {
+  hot: true,
+  compress: true,
+  lazy: false,
+  publicPath: config.output.publicPath,
+  historyApiFallback: {
+    index: './static/index.html'
+  }
+};
+
+module.exports = Object.assign({
+  devServer
+}, config);

spikes/graphs-fe/rickshaw/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    ["transform-object-rest-spread", {
+      "useBuiltIns": true
+    }],
+    "add-module-exports",
+    "transform-es2015-modules-commonjs",
+    "react-hot-loader/babel"
+  ],
+  "sourceMaps": "both"
+}

spikes/graphs-fe/rickshaw/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+coverage
+.nyc_output

spikes/graphs-fe/rickshaw/.eslintrc

@@ -0,0 +1,29 @@
+{
+  "extends": "semistandard",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "babel",
+    "react"
+  ],
+  "rules": {
+    "generator-star-spacing": 0,
+    "babel/generator-star-spacing": 1,
+    "space-before-function-paren": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "object-curly-newline": ["error", {
+      "minProperties": 1
+    }],
+    "sort-vars": ["error", {
+      "ignoreCase": true
+    }]
+  }
+}

spikes/graphs-fe/rickshaw/.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+coverage
+.nyc_output
+npm-debug.log

spikes/graphs-fe/rickshaw/client/chart.js

@@ -0,0 +1,77 @@
+const Rickshaw = require('rickshaw');
+const ReactRedux = require('react-redux');
+const React = require('react');
+const style = require('./style.css');
+
+const {
+  connect
+} = ReactRedux;
+
+const {
+  Graph
+} = Rickshaw;
+
+let i = 0;
+
+const Component = React.createClass({
+  ref: function(name) {
+    this._refs = this._refs || {};
+
+    return (el) => {
+      this._refs[name] = el;
+    };
+  },
+  fromData: function(data) {
+    return (data || []).map((d, i) => {
+      return {
+        y: d.cpu,
+        x: i
+      };
+    });
+  },
+  componentDidMount: function() {
+    this._chart = new Graph({
+      element: this._refs.component,
+      renderer: 'bar',
+      width: 500,
+      height: 200,
+      series: [{
+        data: this.fromData(this.props.data)
+      }]
+    });
+
+    this._chart.render();
+  },
+  componentWillReceiveProps: function(nextProps) {
+    this._chart.series[0].data = this.fromData(this.props.data);
+    this._chart.update();
+  },
+  render: function() {
+    const {
+      data = []
+    } = this.props;
+
+    const className = (data.length && data[data.length - 1].cpu > 50)
+      ? style.red
+      : style.blue;
+
+    return (
+      <div
+        className={`${style.rickshaw_graph} ${className}`}
+        ref={this.ref('component')}
+      />
+    );
+  }
+});
+
+const mapStateToProps = ({
+  data
+}) => {
+  return {
+    data
+  };
+};
+
+module.exports = connect(
+  mapStateToProps
+)(Component);