Implement d3 avg rendering in react

This is an initial implement that at the moment constructs the required
SVG layout to be used by D3.

spikes/architecture/react-d3/.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/architecture/react-d3/.eslintignore

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

spikes/architecture/react-d3/.eslintrc

@@ -0,0 +1,30 @@
+{
+  "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
+    }],
+    "operator-linebreak": 0
+  }
+}

spikes/architecture/react-d3/.gitignore

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

spikes/architecture/react-d3/client/graph.js

@@ -0,0 +1,26 @@
+const ReactRedux = require('react-redux');
+const React = require('react');
+const Links = require('./links');
+const Nodes = require('./nodes');
+
+const {
+  connect
+} = ReactRedux;
+
+const Component = (props) =>
+  <svg width='960' height='600'>
+    <Links {...props}/>
+    <Nodes {...props}/>
+  </svg>;
+
+const mapStateToProps = ({
+  data
+}) => {
+  return {
+    data
+  };
+};
+
+module.exports = connect(
+  mapStateToProps
+)(Component);

spikes/architecture/react-d3/client/index.js

@@ -0,0 +1,18 @@
+const ReactDOM = require('react-dom');
+const React = require('react');
+const store = require('./store')();
+
+const render = () => {
+  const Root = require('./root');
+
+  ReactDOM.render(
+    <Root store={store} />,
+    document.getElementById('root')
+  );
+};
+
+render();
+
+if (module.hot) {
+  module.hot.accept('./root', render);
+}

spikes/architecture/react-d3/client/links.js

@@ -0,0 +1,10 @@
+const React = require('react');
+
+const renderLines = (props) => {
+  return () => <line strokeWidth={2}></line>;
+};
+
+module.exports = (props) =>
+  <g className='links'>
+    { props.data.links.map(renderLines()) }
+  </g>;

spikes/architecture/react-d3/client/nodes.js

@@ -0,0 +1,75 @@
+const React = require('react');
+
+function rightRoundedRect(x, y, width, height, radius) {
+  return 'M' + x + ',' + y // Move to (absolute)
+       + 'h ' + (width - radius) // Horizontal line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
+       + 'v ' + (height - 2 * radius) // Vertical line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arch
+       + 'h ' + (radius - width) // Horizontal lint to (relative)
+       + 'z '; // path back to start
+}
+
+function leftRoundedRect(x, y, width, height, radius) {
+  return 'M' + (x + width) + ',' + y // Move to (absolute) start at top-right
+       + 'v ' + height // Vertical line to (relative)
+       + 'h ' + (radius - width) // Horizontal line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
+       + 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arch
+       + 'z '; // path back to start
+}
+
+const InfoBoxContainer = () =>
+  <g>
+    <path className='node_info'
+          d={leftRoundedRect('0', '0', 48, 48, 4)}
+          stroke='#bc3e35'
+          strokeWidth={1}
+          fill='#d6534a'
+    ></path>
+    <path className='node'
+          d={rightRoundedRect('48', '0', 112, 48, 4)}
+          stroke='#343434'
+          strokeWidth={1}
+          fill='#464646'
+    ></path>
+  </g>;
+
+const InfoBoxAlert = () =>
+  <g>
+    <circle className='alert'
+            cx={24}
+            cy={24}
+            strokeWidth={0}
+            fill='#fffff'
+            r={9}
+    ></circle>
+    <text className='exclamation'
+          x={24}
+          y={30}
+          textAnchor='middle'
+          fill='#d75148'
+    >{'!'}</text>
+  </g>;
+
+const InfoBoxText = (props) =>
+  <text className='info_text'
+        x={100}
+        y={30}
+        textAnchor='middle'
+        fill='#fff'
+  >{props.id}</text>;
+
+module.exports = (props) => (
+  <g className='groups'>
+    { props.data.nodes.map(node =>
+        <g className='node_group'>
+          <InfoBoxContainer/>
+          <InfoBoxAlert/>
+          <InfoBoxText {...node}/>
+        </g>
+      )
+    }
+  </g>
+);

spikes/architecture/react-d3/client/root.js

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

spikes/architecture/react-d3/client/services.json

@@ -0,0 +1,15 @@
+{
+  "nodes": [
+    {"id": "Nginx", "group": 1},
+    {"id": "Wordpress", "group": 1},
+    {"id": "Memcached", "group": 1},
+    {"id": "Percona", "group": 1},
+    {"id": "NFS", "group": 1}
+  ],
+  "links": [
+    {"source": "Nginx", "target": "Wordpress", "value": 1},
+    {"source": "Wordpress", "target": "Memcached", "value": 8},
+    {"source": "Wordpress", "target": "NFS", "value": 8},
+    {"source": "Wordpress", "target": "Percona", "value": 8}
+  ]
+}

spikes/architecture/react-d3/client/store.js

@@ -0,0 +1,17 @@
+const redux = require('redux');
+const services = require('./services');
+
+const {
+  createStore
+} = redux;
+
+const reducer = (state, action) => {
+  return {
+    ...state,
+    data: services
+  };
+};
+
+module.exports = (state = Object.freeze({})) => {
+  return createStore(reducer, state);
+};

spikes/architecture/react-d3/package.json

@@ -0,0 +1,56 @@
+{
+  "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",
+    "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/architecture/react-d3/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/architecture/react-d3/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/architecture/react-d3/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/architecture/react-d3/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/architecture/react-d3/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/architecture/react-d3/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/architecture/react-d3/static/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang='en-US'>
+  <head>
+    <title>D3 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/architecture/react-d3/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);