spike of c3js

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);