wip epoch graphing

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,78 @@
+// injects into `window` (ikr)
+require('epoch-charting');
+
+const ReactRedux = require('react-redux');
+const React = require('react');
+
+const {
+  Time: {
+    Bar
+  }
+} = window.Epoch;
+
+const {
+  connect
+} = ReactRedux;
+
+const EpochGraph = React.createClass({
+  componentWillMount: function() {
+    const bar = new Bar({
+      el: this._refs.component,
+      data
+    })
+    type: 'time.bar',
+    data: barChartData
+  },
+  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: 'scatter',
+    //   mode: 'lines+markers'
+    // }, {
+    //   type: 'bar'
+    // }];
+    //
+    // const graphs = graphTypes.map((graphType, i) => {
+    //   const data = {
+    //     type: graphType.type,
+    //     mode: graphType.mode,
+    //     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)(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 @@
+# 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/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,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/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);