Box and whiskers, with no whiskers

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

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

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

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

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

@@ -0,0 +1,82 @@
+const take = require('lodash.take');
+
+const actions = {
+  'UPDATE_STATS': (state, action) => {
+    const data = (state[action.subscription] || {
+      cpu: [],
+      mem: [],
+      disk: []
+    });
+
+    const newData = ['cpu'].reduce((sum, key) => {
+      const item = {
+        ...action.payload.stats[key],
+        when: action.payload.when
+      };
+
+      const prepended = [item].concat(data[key]);
+
+      return {
+        ...sum,
+        [key]: take(prepended, state.windowSize)
+      };
+    }, {});
+
+    return {
+      ...state,
+      [action.subscription]: newData
+    };
+  }
+};
+
+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({
+    type: '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({
+    type: 'UNSUBSCRIBE',
+    payload: p
+  });
+};

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

@@ -0,0 +1,71 @@
+const buildArray = require('build-array');
+const Chart = require('chart.js');
+const React = require('react');
+const whisker = require('../whisker');
+whisker(Chart);
+
+module.exports = React.createClass({
+  ref: function(name) {
+    this._refs = this._refs || {};
+
+    return (el) => {
+      this._refs[name] = el;
+    };
+  },
+  componentDidMount: function() {
+    const {
+      datasets = [],
+      labels = 0,
+      stacked = false,
+      xAxe = false,
+      yAxe = false,
+      legend = false
+    } = this.props;
+
+    const _labels = !Array.isArray(labels)
+      ? buildArray(labels).map((v, i) => '')
+      : labels;
+
+    this._chart = new Chart(this._refs.component, {
+      type: 'whisker',
+      responsive: true,
+      options: {
+        scales: {
+          xAxes: [{
+          }],
+          yAxes: [{
+            ticks: {
+              min: 0,
+              max: 100
+            },
+          }]
+        },
+        legend: {
+          display: true
+        }
+      },
+      data: {
+        labels: _labels,
+        datasets: datasets
+      }
+    });
+  },
+  componentWillReceiveProps: function(nextProps) {
+    const {
+      datasets = [],
+      labels = 0
+    } = this.props;
+    this._chart.data.datasets = datasets;
+    this._chart.data.labels = buildArray(labels).map((v, i) => '');
+    this._chart.update(0);
+  },
+  render: function() {
+    return (
+      <canvas
+        ref={this.ref('component')}
+        width='400'
+        height='400'
+      />
+    );
+  }
+});

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

@@ -0,0 +1,32 @@
+const buildArray = require('build-array');
+const Chart = require('./base');
+const React = require('react');
+
+const colors = {
+  user: 'rgb(255, 99, 132)',
+  sys: 'rgb(255, 159, 64)',
+  perc: 'rgba(54, 74, 205, 0.2)'
+};
+
+module.exports = ({
+  data = {},
+  windowSize
+}) => {
+  const datasets = ['perc'].map((key) => {
+    return {
+      label: key,
+      backgroundColor: colors[key],
+      data: buildArray(windowSize).map((v, i) => ((data[i] || {})[key] || { firstQuartile: 0, thirdQuartile: 0, median: 0, max: 0, min: 0 }))
+    };
+  });
+
+  return (
+    <Chart
+      datasets={datasets}
+      stacked={true}
+      labels={datasets[0].data.length}
+      legend={true}
+    />
+  );
+};
+

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

@@ -0,0 +1,35 @@
+const pretty = require('prettysize');
+const buildArray = require('build-array');
+const Chart = require('./base');
+const React = require('react');
+
+const colors = {
+  user: 'rgb(255, 99, 132)',
+  sys: 'rgb(255, 159, 64)'
+};
+
+module.exports = ({
+  data = [],
+  windowSize
+}) => {
+  const datasets = [{
+    label: 'disk',
+    backgroundColor: 'rgb(255, 159, 64)',
+    data: buildArray(windowSize).map((v, i) => {
+      return data[i] ? (data[i].total - data[i].free) : 0;
+    })
+  }];
+
+  const labels = buildArray(windowSize).map((v, i) => {
+    return data[i] ? pretty(datasets[0].data[i]) : '';
+  });
+
+  return (
+    <Chart
+      datasets={datasets}
+      labels={labels}
+      legend={true}
+    />
+  );
+};
+

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

@@ -0,0 +1,8 @@
+module.exports = {
+  CPU: require('./cpu'),
+  cpu: require('./cpu'),
+  Mem: require('./mem'),
+  mem: require('./mem'),
+  Disk: require('./disk'),
+  disk: require('./disk')
+};

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

@@ -0,0 +1,28 @@
+const buildArray = require('build-array');
+const Chart = require('./base');
+const React = require('react');
+
+const colors = {
+  user: 'rgb(255, 99, 132)',
+  sys: 'rgb(255, 159, 64)'
+};
+
+module.exports = ({
+  data = [],
+  windowSize
+}) => {
+  const datasets = [{
+    label: 'mem',
+    backgroundColor: 'rgb(255, 99, 132)',
+    data: buildArray(windowSize).map((v, i) => ((data[i] || {}).used || 0))
+  }];
+
+  return (
+    <Chart
+      datasets={datasets}
+      labels={datasets[0].data.length}
+      legend={true}
+    />
+  );
+};
+

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

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

@@ -0,0 +1,89 @@
+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 {
+    windowSize: state.windowSize,
+    data: state[ownProps.id]
+  };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    subscribe: () => {
+      return dispatch(subscribe(ownProps.id));
+    },
+    unsubscribe: () => {
+      return unsubscribe(ownProps.id);
+    }
+  }
+};
+
+const Row = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(React.createClass({
+  componentWillMount: function() {
+    this.props.subscribe();
+  },
+  componentWillUnmount: function() {
+    this.props.unsubscribe();
+  },
+  render: function() {
+    const {
+      data = {},
+      windowSize
+    } = this.props;
+
+    const charts = Object.keys(data).map((key, i, arr) => {
+      if (!Chart[key]) {
+        return null;
+      }
+
+      const chart = React.createElement(Chart[key], {
+        data: data[key],
+        windowSize
+      });
+
+      return (
+        <div key={key} className={`col-xs-${12 / arr.length}`}>
+          {chart}
+        </div>
+      );
+    });
+
+    return (
+      <div className='row'>
+        {charts}
+      </div>
+    );
+  }
+}));
+
+module.exports = ({
+  rows
+}) => {
+  const _rows = buildArray(rows).map((v, i) => {
+    return (
+      <Row id={i} key={i} />
+    );
+  });
+
+  return (
+    <div>
+      {_rows}
+    </div>
+  );
+};

spikes/graphs-matrix/chartjs-whiskers/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 rows={4} />
+      </Provider>
+    </AppContainer>
+  );
+};

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

@@ -0,0 +1,21 @@
+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({
+      predicate: (getState, action) => action.type !== 'UPDATE_STATS'
+    }),
+    promiseMiddleware(),
+    thunk
+  ));
+};

spikes/graphs-matrix/chartjs-whiskers/client/whisker.js

@@ -0,0 +1,231 @@
+module.exports = function(Chart) {
+  var helpers = Chart.helpers;
+
+  Chart.defaults.whisker = {
+    hover: {
+      mode: 'label'
+    },
+
+    scales: {
+      xAxes: [{
+        type: 'category',
+
+        // Specific to Bar Controller
+        categoryPercentage: 0.8,
+        barPercentage: 0.9,
+
+        // grid line settings
+        gridLines: {
+          offsetGridLines: true
+        }
+      }],
+      yAxes: [{
+        type: 'linear'
+      }]
+    }
+  };
+
+  Chart.controllers.whisker = Chart.DatasetController.extend({
+
+    dataElementType: Chart.Element.extend(Chart.elements.Rectangle.prototype),
+
+    initialize: function(chart, datasetIndex) {
+      Chart.DatasetController.prototype.initialize.call(this, chart, datasetIndex);
+
+      // Use this to indicate that this is a bar dataset.
+      this.getMeta().bar = true;
+    },
+
+    // Get the number of datasets that display bars. We use this to correctly calculate the bar width
+    getBarCount: function() {
+      var me = this;
+      var barCount = 0;
+      helpers.each(me.chart.data.datasets, function(dataset, datasetIndex) {
+        var meta = me.chart.getDatasetMeta(datasetIndex);
+        if (meta.bar && me.chart.isDatasetVisible(datasetIndex)) {
+          ++barCount;
+        }
+      }, me);
+      return barCount;
+    },
+
+    update: function(reset) {
+      var me = this;
+      helpers.each(me.getMeta().data, function(rectangle, index) {
+        me.updateElement(rectangle, index, reset);
+      }, me);
+    },
+
+    updateElement: function(rectangle, index, reset) {
+      var me = this;
+      var meta = me.getMeta();
+      var xScale = me.getScaleForId(meta.xAxisID);
+      var yScale = me.getScaleForId(meta.yAxisID);
+      var scaleBase = yScale.getBasePixel();
+      var rectangleElementOptions = me.chart.options.elements.rectangle;
+      var custom = rectangle.custom || {};
+      var dataset = me.getDataset();
+
+      rectangle._xScale = xScale;
+      rectangle._yScale = yScale;
+      rectangle._datasetIndex = me.index;
+      rectangle._index = index;
+
+      var ruler = me.getRuler(index);
+      rectangle._model = {
+        x: me.calculateBarX(index, me.index, ruler),
+        y: reset ? scaleBase : me.boxTopValue(index, me.index),
+
+        // Tooltip
+        label: me.chart.data.labels[index],
+        datasetLabel: dataset.label,
+
+        // Appearance
+        base: reset ? scaleBase : me.boxBottomValue(me.index, index),
+        width: me.calculateBarWidth(ruler),
+        backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor),
+        borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped,
+        borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor),
+        borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth)
+      };
+
+      rectangle.pivot();
+    },
+
+    boxBottomValue: function(datasetIndex, index) {
+      var me = this;
+      var meta = me.getMeta();
+      var yScale = me.getScaleForId(meta.yAxisID);
+      var obj = me.getDataset().data[index];
+      var value = Number(obj.firstQuartile);
+
+      return yScale.getPixelForValue(value);
+    },
+
+    boxTopValue: function(index, datasetIndex) {
+      var me = this;
+      var meta = me.getMeta();
+      var yScale = me.getScaleForId(meta.yAxisID);
+      var obj = me.getDataset().data[index];
+      var value = Number(obj.thirdQuartile);
+
+      return yScale.getPixelForValue(value);
+    },
+
+    getRuler: function(index) {
+      var me = this;
+      var meta = me.getMeta();
+      var xScale = me.getScaleForId(meta.xAxisID);
+      var datasetCount = me.getBarCount();
+
+      var tickWidth;
+
+      if (xScale.options.type === 'category') {
+        tickWidth = xScale.getPixelForTick(index + 1) - xScale.getPixelForTick(index);
+      } else {
+        // Average width
+        tickWidth = xScale.width / xScale.ticks.length;
+      }
+      var categoryWidth = tickWidth * xScale.options.categoryPercentage;
+      var categorySpacing = (tickWidth - (tickWidth * xScale.options.categoryPercentage)) / 2;
+      var fullBarWidth = categoryWidth / datasetCount;
+
+      if (xScale.ticks.length !== me.chart.data.labels.length) {
+        var perc = xScale.ticks.length / me.chart.data.labels.length;
+        fullBarWidth = fullBarWidth * perc;
+      }
+
+      var barWidth = fullBarWidth * xScale.options.barPercentage;
+      var barSpacing = fullBarWidth - (fullBarWidth * xScale.options.barPercentage);
+
+      return {
+        datasetCount: datasetCount,
+        tickWidth: tickWidth,
+        categoryWidth: categoryWidth,
+        categorySpacing: categorySpacing,
+        fullBarWidth: fullBarWidth,
+        barWidth: barWidth,
+        barSpacing: barSpacing
+      };
+    },
+
+    calculateBarWidth: function(ruler) {
+      var xScale = this.getScaleForId(this.getMeta().xAxisID);
+      if (xScale.options.barThickness) {
+        return xScale.options.barThickness;
+      }
+      return ruler.barWidth;
+    },
+
+    // Get bar index from the given dataset index accounting for the fact that not all bars are visible
+    getBarIndex: function(datasetIndex) {
+      var barIndex = 0;
+      var meta;
+      var j;
+
+      for (j = 0; j < datasetIndex; ++j) {
+        meta = this.chart.getDatasetMeta(j);
+        if (meta.bar && this.chart.isDatasetVisible(j)) {
+          ++barIndex;
+        }
+      }
+
+      return barIndex;
+    },
+
+    calculateBarX: function(index, datasetIndex, ruler) {
+      var me = this;
+      var meta = me.getMeta();
+      var xScale = me.getScaleForId(meta.xAxisID);
+      var barIndex = me.getBarIndex(datasetIndex);
+      var leftTick = xScale.getPixelForValue(null, index, datasetIndex, me.chart.isCombo);
+      leftTick -= me.chart.isCombo ? (ruler.tickWidth / 2) : 0;
+
+      return leftTick +
+        (ruler.barWidth / 2) +
+        ruler.categorySpacing +
+        (ruler.barWidth * barIndex) +
+        (ruler.barSpacing / 2) +
+        (ruler.barSpacing * barIndex);
+    },
+
+    draw: function(ease) {
+      var me = this;
+      var easingDecimal = ease || 1;
+      var metaData = me.getMeta().data;
+      var dataset = me.getDataset();
+      var i, len;
+
+      for (i = 0, len = metaData.length; i < len; ++i) {
+        var d = dataset.data[i];
+        if (d !== null && d !== undefined && typeof d === 'object' && !isNaN(d.median)) {
+          metaData[i].transition(easingDecimal).draw();
+        }
+      }
+    },
+
+    setHoverStyle: function(rectangle) {
+      var dataset = this.chart.data.datasets[rectangle._datasetIndex];
+      var index = rectangle._index;
+
+      var custom = rectangle.custom || {};
+      var model = rectangle._model;
+      model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
+      model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor));
+      model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
+    },
+
+    removeHoverStyle: function(rectangle) {
+      var dataset = this.chart.data.datasets[rectangle._datasetIndex];
+      var index = rectangle._index;
+      var custom = rectangle.custom || {};
+      var model = rectangle._model;
+      var rectangleElementOptions = this.chart.options.elements.rectangle;
+
+      model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor);
+      model.borderColor = custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor);
+      model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth);
+    }
+
+  });
+};

spikes/graphs-matrix/chartjs-whiskers/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "chartjs-matrix-spike",
+  "private": true,
+  "license": "private",
+  "main": "server/index.js",
+  "dependencies": {
+    "async": "^2.1.2",
+    "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",
+    "cpu-percent": "^2.0.1",
+    "css-loader": "^0.25.0",
+    "d3": "^4.3.0",
+    "diskusage": "^0.1.5",
+    "hapi": "^15.2.0",
+    "hapi-webpack-dev-plugin": "^1.1.4",
+    "inert": "^4.0.2",
+    "lodash.take": "^4.1.1",
+    "metrics-os": "^1.0.1",
+    "nes": "^6.3.1",
+    "os-utils": "^0.0.14",
+    "pidusage": "^1.1.0",
+    "postcss-loader": "^1.0.0",
+    "postcss-modules-values": "^1.2.2",
+    "postcss-nested": "^1.0.0",
+    "prettysize": "0.0.3",
+    "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",
+    "simple-statistics": "^2.2.0",
+    "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-whiskers/readme.md

@@ -0,0 +1,14 @@
+# ChartJS
+
+ - [x] Graphs should maintain aspect ration
+ - [x] 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
+
+ - borderSkipped not working: https://github.com/chartjs/Chart.js/issues/3293
+

spikes/graphs-matrix/chartjs-whiskers/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-whiskers/server/metric.js

@@ -0,0 +1,89 @@
+const async = require('async');
+const disk = require('diskusage');
+const os = require('os');
+
+const cdm = {};
+
+const osutils = require('os-utils');
+const statistics = require('simple-statistics');
+
+const getCPU = (fn) => {
+  return fn(null, {
+    user: os.cpus().reduce((sum, cpu) => sum + cpu.times.user, 0),
+    sys: os.cpus().reduce((sum, cpu) => sum + cpu.times.sys, 0)
+  });
+};
+
+const getPerc = (fn) => {
+  async.timesSeries(10, (n, next) => {
+    osutils.cpuUsage((p) => {
+      const percentage = p * 100;
+      next(null, percentage);
+    });
+  }, (err, sample) => {
+    fn(err, {
+      perc: {
+        firstQuartile: statistics.quantile(sample, 0.25),
+        median: statistics.median(sample),
+        thirdQuartile: statistics.quantile(sample, 0.75),
+        max: statistics.max(sample),
+        min: statistics.min(sample)
+      }
+    });
+  });
+};
+
+const getMem = (fn) => {
+  const free = os.freemem();
+  const total = os.totalmem();
+  const using = total - free;
+  const perc = (using / total) * 100;
+
+  return fn(null, {
+    used: perc
+  });
+};
+
+const getDisk = (fn) => {
+  disk.check('/', fn);
+};
+
+const getStats = (fn) => {
+  async.parallel({
+    cpu: getPerc,
+    mem: getMem,
+    disk: getDisk
+  }, fn);
+};
+
+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}`);
+
+      getStats((err, stats) => {
+        server.publish(`/stats/${id}`, {
+          when: new Date().getTime(),
+          stats
+        });
+      });
+    }, 1000);
+
+    cdm[id] = {
+      interval,
+      sockets: 1
+    };
+  },
+  off: (id) => {
+    if (!(cdm[id].sockets -= 1)) {
+      clearInterval(cdm[id].interval);
+    }
+  }
+});

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

@@ -0,0 +1,973 @@
+<!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>
+      .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-whiskers/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);