chartjs matrix implementation

spikes/graphs-matrix/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-matrix/chartjs/.eslintignore

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

spikes/graphs-matrix/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-matrix/chartjs/.gitignore

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

spikes/graphs-matrix/chartjs/client/actions.js

@@ -0,0 +1,64 @@
+const takeRight = require('lodash.takeright');
+
+const actions =  {
+  'UPDATE_STATS': (state, action) => {
+    const data = (state[action.subscription] || []).concat([action.payload]);
+
+    return {
+      ...state,
+      [action.subscription]: takeRight(data, 50)
+    };
+  }
+};
+
+module.exports = (state, action) => {
+  return !actions[action.type] ? state : actions[action.type](state, action);
+};
+
+module.exports.subscribe = (id) => (dispatch, getState) => {
+  const {
+    ws
+  } = getState();
+
+  const p = new Promise((resolve, reject) => {
+    ws.subscribe(`/stats/${id}`, (update, flag) => {
+      dispatch({
+        type: 'UPDATE_STATS',
+        payload: update,
+        subscription: id
+      });
+    }, (err) => {
+      if (err) {
+        return reject(err);
+      }
+
+      resolve();
+    });
+  });
+
+  return dispatch({
+    action: 'SUBSCRIBE',
+    payload: p
+  });
+};
+
+module.exports.unsubscribe = (id) => (dispatch, getState) => {
+  const {
+    ws
+  } = getState();
+
+  const p = new Promise((resolve, reject) => {
+    ws.unsubscribe(`/stats/${id}`, null, (err) => {
+      if (err) {
+        return reject(err);
+      }
+
+      resolve();
+    });
+  });
+
+  return dispatch({
+    action: 'UNSUBSCRIBE',
+    payload: p
+  });
+};

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

@@ -0,0 +1,48 @@
+const buildArray = require('build-array');
+const Chart = require('chart.js');
+const React = require('react');
+
+module.exports = 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'
+      />
+    );
+  }
+});

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

@@ -0,0 +1,37 @@
+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');
+});
+
+const store = Store({
+  ws: client
+});
+
+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-matrix/chartjs/client/matrix.js

@@ -0,0 +1,95 @@
+const React = require('react');
+const buildArray = require('build-array');
+const ReactRedux = require('react-redux');
+const Chart = require('./chart');
+const actions = require('./actions');
+
+const {
+  connect
+} = ReactRedux;
+
+const {
+  subscribe,
+  unsubscribe
+} = actions;
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    data: state[ownProps.id]
+  };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    subscribe: () => {
+      return dispatch(subscribe(ownProps.id));
+    },
+    unsubscribe: () => {
+      return unsubscribe(ownProps.id);
+    }
+  }
+};
+
+const Graph = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(React.createClass({
+  componentWillMount: function() {
+    this.props.subscribe();
+  },
+  componentWillUnmount: function() {
+    this.props.unsubscribe();
+  },
+  render: function() {
+    const {
+      data = []
+    } = this.props;
+
+    const median = data.reduce((sum, v) => (sum + v.cpu), 0) / data.length;
+
+    const bg = median > 50
+      ? 'rgba(205, 54, 54, 0.3)'
+      : 'rgba(54, 74, 205, 0.3)';
+
+    const shadow = median > 50
+      ? 'inset 0 1px 0 0 rgba(248, 51, 51, 0.5)'
+      : 'inset 0 1px 0 0 rgba(54, 73, 205, 0.5)';
+
+    return (
+      <Chart
+        data={this.props.data}
+        bg={bg}
+        shadow={shadow}
+        median={median}
+      />
+    );
+  }
+}));
+
+module.exports = ({
+  x,
+  y
+}) => {
+  const m = buildArray(y).map((v, i) => {
+    const m = buildArray(x).map((v, y) => {
+      const id = `${i}${y}`;
+      return (
+        <div className={`col-xs-${12/x}`}>
+          <Graph key={id} id={id} />
+        </div>
+      );
+    });
+
+    return (
+      <div className='row'>
+        {m}
+      </div>
+    );
+  });
+
+  return (
+    <div>
+      {m}
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,19 @@
+const createLogger = require('redux-logger');
+const promiseMiddleware = require('redux-promise-middleware').default;
+const thunk = require('redux-thunk').default;
+const redux = require('redux');
+const reducer = require('./actions');
+
+const {
+  createStore,
+  compose,
+  applyMiddleware
+} = redux;
+
+module.exports = (state = Object.freeze({})) => {
+  return createStore(reducer, state, applyMiddleware(
+    createLogger(),
+    promiseMiddleware(),
+    thunk
+  ));
+};

spikes/graphs-matrix/chartjs/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "epoch-matrix-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",
+    "classnames": "^2.2.5",
+    "component-emitter": "^1.2.1",
+    "css-loader": "^0.25.0",
+    "d3": "^4.3.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",
+    "redux-logger": "^2.7.4",
+    "redux-promise-middleware": "^4.1.0",
+    "redux-thunk": "^2.1.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-matrix/chartjs/readme.md

@@ -0,0 +1,15 @@
+# Epoch
+
+ - [x] Graphs should maintain aspect ration
+ - [ ] Graphs should match Antonas' first draft designs
+ - [x] Should have 3 Graphs on each row
+ - [x] Should be a 3 x 4 matrix of graphs, showing different data
+ - [x] Graphs should not jitter, ideally smoothly move across the x axis
+ - [x] All graphs should be a bar graph
+ - [ ] Animations when a graph comes into view 
+ 
+## notes
+
+ - Epoch is not responsive. Even though they maintain aspect ratio, using a responsive grid they get cluttered between each other
+ - With short update intervals, the graphs start using to much cpu and can't handle it
+ - Even looking at the [documentation](https://epochjs.github.io/epoch/styles), it's not obvious how styling works and I wasn't able to make it work.

spikes/graphs-matrix/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-matrix/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-matrix/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-matrix/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-matrix/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-matrix/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-matrix/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-matrix/chartjs/static/index.html

@@ -0,0 +1,983 @@
+<!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>
+      .epoch.red canvas {
+        fill: rgba(205, 54, 54, 0.3);
+      }
+
+      .epoch.blue canvas {
+        fill: rgba(54, 74, 205, 0.3);
+      }
+    </style>
+    <style>
+      .container-fluid,
+      .container {
+        margin-right: auto;
+        margin-left: auto;
+      }
+
+      .container-fluid {
+        padding-right: 2rem;
+        padding-left: 2rem;
+      }
+
+      .row {
+        box-sizing: border-box;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-flex: 0;
+        -ms-flex: 0 1 auto;
+        flex: 0 1 auto;
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+        margin-right: -0.5rem;
+        margin-left: -0.5rem;
+      }
+
+      .row.reverse {
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: reverse;
+        -ms-flex-direction: row-reverse;
+        flex-direction: row-reverse;
+      }
+
+      .col.reverse {
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+      }
+
+      .col-xs,
+      .col-xs-1,
+      .col-xs-2,
+      .col-xs-3,
+      .col-xs-4,
+      .col-xs-5,
+      .col-xs-6,
+      .col-xs-7,
+      .col-xs-8,
+      .col-xs-9,
+      .col-xs-10,
+      .col-xs-11,
+      .col-xs-12,
+      .col-xs-offset-0,
+      .col-xs-offset-1,
+      .col-xs-offset-2,
+      .col-xs-offset-3,
+      .col-xs-offset-4,
+      .col-xs-offset-5,
+      .col-xs-offset-6,
+      .col-xs-offset-7,
+      .col-xs-offset-8,
+      .col-xs-offset-9,
+      .col-xs-offset-10,
+      .col-xs-offset-11,
+      .col-xs-offset-12 {
+        box-sizing: border-box;
+        -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        padding-right: 0.5rem;
+        padding-left: 0.5rem;
+      }
+
+      .col-xs {
+        -webkit-box-flex: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+        -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+        max-width: 100%;
+      }
+
+      .col-xs-1 {
+        -ms-flex-preferred-size: 8.33333333%;
+        flex-basis: 8.33333333%;
+        max-width: 8.33333333%;
+      }
+
+      .col-xs-2 {
+        -ms-flex-preferred-size: 16.66666667%;
+        flex-basis: 16.66666667%;
+        max-width: 16.66666667%;
+      }
+
+      .col-xs-3 {
+        -ms-flex-preferred-size: 25%;
+        flex-basis: 25%;
+        max-width: 25%;
+      }
+
+      .col-xs-4 {
+        -ms-flex-preferred-size: 33.33333333%;
+        flex-basis: 33.33333333%;
+        max-width: 33.33333333%;
+      }
+
+      .col-xs-5 {
+        -ms-flex-preferred-size: 41.66666667%;
+        flex-basis: 41.66666667%;
+        max-width: 41.66666667%;
+      }
+
+      .col-xs-6 {
+        -ms-flex-preferred-size: 50%;
+        flex-basis: 50%;
+        max-width: 50%;
+      }
+
+      .col-xs-7 {
+        -ms-flex-preferred-size: 58.33333333%;
+        flex-basis: 58.33333333%;
+        max-width: 58.33333333%;
+      }
+
+      .col-xs-8 {
+        -ms-flex-preferred-size: 66.66666667%;
+        flex-basis: 66.66666667%;
+        max-width: 66.66666667%;
+      }
+
+      .col-xs-9 {
+        -ms-flex-preferred-size: 75%;
+        flex-basis: 75%;
+        max-width: 75%;
+      }
+
+      .col-xs-10 {
+        -ms-flex-preferred-size: 83.33333333%;
+        flex-basis: 83.33333333%;
+        max-width: 83.33333333%;
+      }
+
+      .col-xs-11 {
+        -ms-flex-preferred-size: 91.66666667%;
+        flex-basis: 91.66666667%;
+        max-width: 91.66666667%;
+      }
+
+      .col-xs-12 {
+        -ms-flex-preferred-size: 100%;
+        flex-basis: 100%;
+        max-width: 100%;
+      }
+
+      .col-xs-offset-0 {
+        margin-left: 0;
+      }
+
+      .col-xs-offset-1 {
+        margin-left: 8.33333333%;
+      }
+
+      .col-xs-offset-2 {
+        margin-left: 16.66666667%;
+      }
+
+      .col-xs-offset-3 {
+        margin-left: 25%;
+      }
+
+      .col-xs-offset-4 {
+        margin-left: 33.33333333%;
+      }
+
+      .col-xs-offset-5 {
+        margin-left: 41.66666667%;
+      }
+
+      .col-xs-offset-6 {
+        margin-left: 50%;
+      }
+
+      .col-xs-offset-7 {
+        margin-left: 58.33333333%;
+      }
+
+      .col-xs-offset-8 {
+        margin-left: 66.66666667%;
+      }
+
+      .col-xs-offset-9 {
+        margin-left: 75%;
+      }
+
+      .col-xs-offset-10 {
+        margin-left: 83.33333333%;
+      }
+
+      .col-xs-offset-11 {
+        margin-left: 91.66666667%;
+      }
+
+      .start-xs {
+        -webkit-box-pack: start;
+        -ms-flex-pack: start;
+        justify-content: flex-start;
+        text-align: start;
+      }
+
+      .center-xs {
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        text-align: center;
+      }
+
+      .end-xs {
+        -webkit-box-pack: end;
+        -ms-flex-pack: end;
+        justify-content: flex-end;
+        text-align: end;
+      }
+
+      .top-xs {
+        -webkit-box-align: start;
+        -ms-flex-align: start;
+        align-items: flex-start;
+      }
+
+      .middle-xs {
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .bottom-xs {
+        -webkit-box-align: end;
+        -ms-flex-align: end;
+        align-items: flex-end;
+      }
+
+      .around-xs {
+        -ms-flex-pack: distribute;
+        justify-content: space-around;
+      }
+
+      .between-xs {
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+      }
+
+      .first-xs {
+        -webkit-box-ordinal-group: 0;
+        -ms-flex-order: -1;
+        order: -1;
+      }
+
+      .last-xs {
+        -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
+        order: 1;
+      }
+
+      @media only screen and (min-width: 48em) {
+        .container {
+          width: 49rem;
+        }
+
+        .col-sm,
+        .col-sm-1,
+        .col-sm-2,
+        .col-sm-3,
+        .col-sm-4,
+        .col-sm-5,
+        .col-sm-6,
+        .col-sm-7,
+        .col-sm-8,
+        .col-sm-9,
+        .col-sm-10,
+        .col-sm-11,
+        .col-sm-12,
+        .col-sm-offset-0,
+        .col-sm-offset-1,
+        .col-sm-offset-2,
+        .col-sm-offset-3,
+        .col-sm-offset-4,
+        .col-sm-offset-5,
+        .col-sm-offset-6,
+        .col-sm-offset-7,
+        .col-sm-offset-8,
+        .col-sm-offset-9,
+        .col-sm-offset-10,
+        .col-sm-offset-11,
+        .col-sm-offset-12 {
+          box-sizing: border-box;
+          -webkit-box-flex: 0;
+          -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+          padding-right: 0.5rem;
+          padding-left: 0.5rem;
+        }
+
+        .col-sm {
+          -webkit-box-flex: 1;
+          -ms-flex-positive: 1;
+          flex-grow: 1;
+          -ms-flex-preferred-size: 0;
+          flex-basis: 0;
+          max-width: 100%;
+        }
+
+        .col-sm-1 {
+          -ms-flex-preferred-size: 8.33333333%;
+          flex-basis: 8.33333333%;
+          max-width: 8.33333333%;
+        }
+
+        .col-sm-2 {
+          -ms-flex-preferred-size: 16.66666667%;
+          flex-basis: 16.66666667%;
+          max-width: 16.66666667%;
+        }
+
+        .col-sm-3 {
+          -ms-flex-preferred-size: 25%;
+          flex-basis: 25%;
+          max-width: 25%;
+        }
+
+        .col-sm-4 {
+          -ms-flex-preferred-size: 33.33333333%;
+          flex-basis: 33.33333333%;
+          max-width: 33.33333333%;
+        }
+
+        .col-sm-5 {
+          -ms-flex-preferred-size: 41.66666667%;
+          flex-basis: 41.66666667%;
+          max-width: 41.66666667%;
+        }
+
+        .col-sm-6 {
+          -ms-flex-preferred-size: 50%;
+          flex-basis: 50%;
+          max-width: 50%;
+        }
+
+        .col-sm-7 {
+          -ms-flex-preferred-size: 58.33333333%;
+          flex-basis: 58.33333333%;
+          max-width: 58.33333333%;
+        }
+
+        .col-sm-8 {
+          -ms-flex-preferred-size: 66.66666667%;
+          flex-basis: 66.66666667%;
+          max-width: 66.66666667%;
+        }
+
+        .col-sm-9 {
+          -ms-flex-preferred-size: 75%;
+          flex-basis: 75%;
+          max-width: 75%;
+        }
+
+        .col-sm-10 {
+          -ms-flex-preferred-size: 83.33333333%;
+          flex-basis: 83.33333333%;
+          max-width: 83.33333333%;
+        }
+
+        .col-sm-11 {
+          -ms-flex-preferred-size: 91.66666667%;
+          flex-basis: 91.66666667%;
+          max-width: 91.66666667%;
+        }
+
+        .col-sm-12 {
+          -ms-flex-preferred-size: 100%;
+          flex-basis: 100%;
+          max-width: 100%;
+        }
+
+        .col-sm-offset-0 {
+          margin-left: 0;
+        }
+
+        .col-sm-offset-1 {
+          margin-left: 8.33333333%;
+        }
+
+        .col-sm-offset-2 {
+          margin-left: 16.66666667%;
+        }
+
+        .col-sm-offset-3 {
+          margin-left: 25%;
+        }
+
+        .col-sm-offset-4 {
+          margin-left: 33.33333333%;
+        }
+
+        .col-sm-offset-5 {
+          margin-left: 41.66666667%;
+        }
+
+        .col-sm-offset-6 {
+          margin-left: 50%;
+        }
+
+        .col-sm-offset-7 {
+          margin-left: 58.33333333%;
+        }
+
+        .col-sm-offset-8 {
+          margin-left: 66.66666667%;
+        }
+
+        .col-sm-offset-9 {
+          margin-left: 75%;
+        }
+
+        .col-sm-offset-10 {
+          margin-left: 83.33333333%;
+        }
+
+        .col-sm-offset-11 {
+          margin-left: 91.66666667%;
+        }
+
+        .start-sm {
+          -webkit-box-pack: start;
+          -ms-flex-pack: start;
+          justify-content: flex-start;
+          text-align: start;
+        }
+
+        .center-sm {
+          -webkit-box-pack: center;
+          -ms-flex-pack: center;
+          justify-content: center;
+          text-align: center;
+        }
+
+        .end-sm {
+          -webkit-box-pack: end;
+          -ms-flex-pack: end;
+          justify-content: flex-end;
+          text-align: end;
+        }
+
+        .top-sm {
+          -webkit-box-align: start;
+          -ms-flex-align: start;
+          align-items: flex-start;
+        }
+
+        .middle-sm {
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+        }
+
+        .bottom-sm {
+          -webkit-box-align: end;
+          -ms-flex-align: end;
+          align-items: flex-end;
+        }
+
+        .around-sm {
+          -ms-flex-pack: distribute;
+          justify-content: space-around;
+        }
+
+        .between-sm {
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+        }
+
+        .first-sm {
+          -webkit-box-ordinal-group: 0;
+          -ms-flex-order: -1;
+          order: -1;
+        }
+
+        .last-sm {
+          -webkit-box-ordinal-group: 2;
+          -ms-flex-order: 1;
+          order: 1;
+        }
+      }
+
+      @media only screen and (min-width: 64em) {
+        .container {
+          width: 65rem;
+        }
+
+        .col-md,
+        .col-md-1,
+        .col-md-2,
+        .col-md-3,
+        .col-md-4,
+        .col-md-5,
+        .col-md-6,
+        .col-md-7,
+        .col-md-8,
+        .col-md-9,
+        .col-md-10,
+        .col-md-11,
+        .col-md-12,
+        .col-md-offset-0,
+        .col-md-offset-1,
+        .col-md-offset-2,
+        .col-md-offset-3,
+        .col-md-offset-4,
+        .col-md-offset-5,
+        .col-md-offset-6,
+        .col-md-offset-7,
+        .col-md-offset-8,
+        .col-md-offset-9,
+        .col-md-offset-10,
+        .col-md-offset-11,
+        .col-md-offset-12 {
+          box-sizing: border-box;
+          -webkit-box-flex: 0;
+          -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+          padding-right: 0.5rem;
+          padding-left: 0.5rem;
+        }
+
+        .col-md {
+          -webkit-box-flex: 1;
+          -ms-flex-positive: 1;
+          flex-grow: 1;
+          -ms-flex-preferred-size: 0;
+          flex-basis: 0;
+          max-width: 100%;
+        }
+
+        .col-md-1 {
+          -ms-flex-preferred-size: 8.33333333%;
+          flex-basis: 8.33333333%;
+          max-width: 8.33333333%;
+        }
+
+        .col-md-2 {
+          -ms-flex-preferred-size: 16.66666667%;
+          flex-basis: 16.66666667%;
+          max-width: 16.66666667%;
+        }
+
+        .col-md-3 {
+          -ms-flex-preferred-size: 25%;
+          flex-basis: 25%;
+          max-width: 25%;
+        }
+
+        .col-md-4 {
+          -ms-flex-preferred-size: 33.33333333%;
+          flex-basis: 33.33333333%;
+          max-width: 33.33333333%;
+        }
+
+        .col-md-5 {
+          -ms-flex-preferred-size: 41.66666667%;
+          flex-basis: 41.66666667%;
+          max-width: 41.66666667%;
+        }
+
+        .col-md-6 {
+          -ms-flex-preferred-size: 50%;
+          flex-basis: 50%;
+          max-width: 50%;
+        }
+
+        .col-md-7 {
+          -ms-flex-preferred-size: 58.33333333%;
+          flex-basis: 58.33333333%;
+          max-width: 58.33333333%;
+        }
+
+        .col-md-8 {
+          -ms-flex-preferred-size: 66.66666667%;
+          flex-basis: 66.66666667%;
+          max-width: 66.66666667%;
+        }
+
+        .col-md-9 {
+          -ms-flex-preferred-size: 75%;
+          flex-basis: 75%;
+          max-width: 75%;
+        }
+
+        .col-md-10 {
+          -ms-flex-preferred-size: 83.33333333%;
+          flex-basis: 83.33333333%;
+          max-width: 83.33333333%;
+        }
+
+        .col-md-11 {
+          -ms-flex-preferred-size: 91.66666667%;
+          flex-basis: 91.66666667%;
+          max-width: 91.66666667%;
+        }
+
+        .col-md-12 {
+          -ms-flex-preferred-size: 100%;
+          flex-basis: 100%;
+          max-width: 100%;
+        }
+
+        .col-md-offset-0 {
+          margin-left: 0;
+        }
+
+        .col-md-offset-1 {
+          margin-left: 8.33333333%;
+        }
+
+        .col-md-offset-2 {
+          margin-left: 16.66666667%;
+        }
+
+        .col-md-offset-3 {
+          margin-left: 25%;
+        }
+
+        .col-md-offset-4 {
+          margin-left: 33.33333333%;
+        }
+
+        .col-md-offset-5 {
+          margin-left: 41.66666667%;
+        }
+
+        .col-md-offset-6 {
+          margin-left: 50%;
+        }
+
+        .col-md-offset-7 {
+          margin-left: 58.33333333%;
+        }
+
+        .col-md-offset-8 {
+          margin-left: 66.66666667%;
+        }
+
+        .col-md-offset-9 {
+          margin-left: 75%;
+        }
+
+        .col-md-offset-10 {
+          margin-left: 83.33333333%;
+        }
+
+        .col-md-offset-11 {
+          margin-left: 91.66666667%;
+        }
+
+        .start-md {
+          -webkit-box-pack: start;
+          -ms-flex-pack: start;
+          justify-content: flex-start;
+          text-align: start;
+        }
+
+        .center-md {
+          -webkit-box-pack: center;
+          -ms-flex-pack: center;
+          justify-content: center;
+          text-align: center;
+        }
+
+        .end-md {
+          -webkit-box-pack: end;
+          -ms-flex-pack: end;
+          justify-content: flex-end;
+          text-align: end;
+        }
+
+        .top-md {
+          -webkit-box-align: start;
+          -ms-flex-align: start;
+          align-items: flex-start;
+        }
+
+        .middle-md {
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+        }
+
+        .bottom-md {
+          -webkit-box-align: end;
+          -ms-flex-align: end;
+          align-items: flex-end;
+        }
+
+        .around-md {
+          -ms-flex-pack: distribute;
+          justify-content: space-around;
+        }
+
+        .between-md {
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+        }
+
+        .first-md {
+          -webkit-box-ordinal-group: 0;
+          -ms-flex-order: -1;
+          order: -1;
+        }
+
+        .last-md {
+          -webkit-box-ordinal-group: 2;
+          -ms-flex-order: 1;
+          order: 1;
+        }
+      }
+
+      @media only screen and (min-width: 75em) {
+        .container {
+          width: 76rem;
+        }
+
+        .col-lg,
+        .col-lg-1,
+        .col-lg-2,
+        .col-lg-3,
+        .col-lg-4,
+        .col-lg-5,
+        .col-lg-6,
+        .col-lg-7,
+        .col-lg-8,
+        .col-lg-9,
+        .col-lg-10,
+        .col-lg-11,
+        .col-lg-12,
+        .col-lg-offset-0,
+        .col-lg-offset-1,
+        .col-lg-offset-2,
+        .col-lg-offset-3,
+        .col-lg-offset-4,
+        .col-lg-offset-5,
+        .col-lg-offset-6,
+        .col-lg-offset-7,
+        .col-lg-offset-8,
+        .col-lg-offset-9,
+        .col-lg-offset-10,
+        .col-lg-offset-11,
+        .col-lg-offset-12 {
+          box-sizing: border-box;
+          -webkit-box-flex: 0;
+          -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+          padding-right: 0.5rem;
+          padding-left: 0.5rem;
+        }
+
+        .col-lg {
+          -webkit-box-flex: 1;
+          -ms-flex-positive: 1;
+          flex-grow: 1;
+          -ms-flex-preferred-size: 0;
+          flex-basis: 0;
+          max-width: 100%;
+        }
+
+        .col-lg-1 {
+          -ms-flex-preferred-size: 8.33333333%;
+          flex-basis: 8.33333333%;
+          max-width: 8.33333333%;
+        }
+
+        .col-lg-2 {
+          -ms-flex-preferred-size: 16.66666667%;
+          flex-basis: 16.66666667%;
+          max-width: 16.66666667%;
+        }
+
+        .col-lg-3 {
+          -ms-flex-preferred-size: 25%;
+          flex-basis: 25%;
+          max-width: 25%;
+        }
+
+        .col-lg-4 {
+          -ms-flex-preferred-size: 33.33333333%;
+          flex-basis: 33.33333333%;
+          max-width: 33.33333333%;
+        }
+
+        .col-lg-5 {
+          -ms-flex-preferred-size: 41.66666667%;
+          flex-basis: 41.66666667%;
+          max-width: 41.66666667%;
+        }
+
+        .col-lg-6 {
+          -ms-flex-preferred-size: 50%;
+          flex-basis: 50%;
+          max-width: 50%;
+        }
+
+        .col-lg-7 {
+          -ms-flex-preferred-size: 58.33333333%;
+          flex-basis: 58.33333333%;
+          max-width: 58.33333333%;
+        }
+
+        .col-lg-8 {
+          -ms-flex-preferred-size: 66.66666667%;
+          flex-basis: 66.66666667%;
+          max-width: 66.66666667%;
+        }
+
+        .col-lg-9 {
+          -ms-flex-preferred-size: 75%;
+          flex-basis: 75%;
+          max-width: 75%;
+        }
+
+        .col-lg-10 {
+          -ms-flex-preferred-size: 83.33333333%;
+          flex-basis: 83.33333333%;
+          max-width: 83.33333333%;
+        }
+
+        .col-lg-11 {
+          -ms-flex-preferred-size: 91.66666667%;
+          flex-basis: 91.66666667%;
+          max-width: 91.66666667%;
+        }
+
+        .col-lg-12 {
+          -ms-flex-preferred-size: 100%;
+          flex-basis: 100%;
+          max-width: 100%;
+        }
+
+        .col-lg-offset-0 {
+          margin-left: 0;
+        }
+
+        .col-lg-offset-1 {
+          margin-left: 8.33333333%;
+        }
+
+        .col-lg-offset-2 {
+          margin-left: 16.66666667%;
+        }
+
+        .col-lg-offset-3 {
+          margin-left: 25%;
+        }
+
+        .col-lg-offset-4 {
+          margin-left: 33.33333333%;
+        }
+
+        .col-lg-offset-5 {
+          margin-left: 41.66666667%;
+        }
+
+        .col-lg-offset-6 {
+          margin-left: 50%;
+        }
+
+        .col-lg-offset-7 {
+          margin-left: 58.33333333%;
+        }
+
+        .col-lg-offset-8 {
+          margin-left: 66.66666667%;
+        }
+
+        .col-lg-offset-9 {
+          margin-left: 75%;
+        }
+
+        .col-lg-offset-10 {
+          margin-left: 83.33333333%;
+        }
+
+        .col-lg-offset-11 {
+          margin-left: 91.66666667%;
+        }
+
+        .start-lg {
+          -webkit-box-pack: start;
+          -ms-flex-pack: start;
+          justify-content: flex-start;
+          text-align: start;
+        }
+
+        .center-lg {
+          -webkit-box-pack: center;
+          -ms-flex-pack: center;
+          justify-content: center;
+          text-align: center;
+        }
+
+        .end-lg {
+          -webkit-box-pack: end;
+          -ms-flex-pack: end;
+          justify-content: flex-end;
+          text-align: end;
+        }
+
+        .top-lg {
+          -webkit-box-align: start;
+          -ms-flex-align: start;
+          align-items: flex-start;
+        }
+
+        .middle-lg {
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+        }
+
+        .bottom-lg {
+          -webkit-box-align: end;
+          -ms-flex-align: end;
+          align-items: flex-end;
+        }
+
+        .around-lg {
+          -ms-flex-pack: distribute;
+          justify-content: space-around;
+        }
+
+        .between-lg {
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+        }
+
+        .first-lg {
+          -webkit-box-ordinal-group: 0;
+          -ms-flex-order: -1;
+          order: -1;
+        }
+
+        .last-lg {
+          -webkit-box-ordinal-group: 2;
+          -ms-flex-order: 1;
+          order: 1;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src='/static/bundle.js'></script>
+  </body>
+</html>

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

@@ -0,0 +1,65 @@
+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'
+    })
+  ],
+  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-matrix/epoch/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "epoch-graphing-spike",
+  "name": "epoch-matrix-spike",
   "private": true,
   "license": "private",
   "main": "server/index.js",