commit
0a6a74765d
15
spikes/graphs-fe/c3js/.babelrc
Normal file
15
spikes/graphs-fe/c3js/.babelrc
Normal file
@ -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"
|
||||||
|
}
|
3
spikes/graphs-fe/c3js/.eslintignore
Normal file
3
spikes/graphs-fe/c3js/.eslintignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
29
spikes/graphs-fe/c3js/.eslintrc
Normal file
29
spikes/graphs-fe/c3js/.eslintrc
Normal file
@ -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
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
4
spikes/graphs-fe/c3js/.gitignore
vendored
Normal file
4
spikes/graphs-fe/c3js/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
||||||
|
npm-debug.log
|
43
spikes/graphs-fe/c3js/client/c3js.js
Normal file
43
spikes/graphs-fe/c3js/client/c3js.js
Normal file
@ -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);
|
||||||
|
|
46
spikes/graphs-fe/c3js/client/index.js
Normal file
46
spikes/graphs-fe/c3js/client/index.js
Normal file
@ -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);
|
||||||
|
}
|
24
spikes/graphs-fe/c3js/client/root.js
Normal file
24
spikes/graphs-fe/c3js/client/root.js
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
25
spikes/graphs-fe/c3js/client/store.js
Normal file
25
spikes/graphs-fe/c3js/client/store.js
Normal file
@ -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);
|
||||||
|
};
|
57
spikes/graphs-fe/c3js/package.json
Normal file
57
spikes/graphs-fe/c3js/package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
6
spikes/graphs-fe/c3js/readme.md
Normal file
6
spikes/graphs-fe/c3js/readme.md
Normal file
@ -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
|
29
spikes/graphs-fe/c3js/server/index.js
Normal file
29
spikes/graphs-fe/c3js/server/index.js
Normal file
@ -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}`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
35
spikes/graphs-fe/c3js/server/metric.js
Normal file
35
spikes/graphs-fe/c3js/server/metric.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
15
spikes/graphs-fe/c3js/server/plugins.js
Normal file
15
spikes/graphs-fe/c3js/server/plugins.js
Normal file
@ -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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
11
spikes/graphs-fe/c3js/server/routes/home.js
Normal file
11
spikes/graphs-fe/c3js/server/routes/home.js
Normal file
@ -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'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
18
spikes/graphs-fe/c3js/server/routes/metrics.js
Normal file
18
spikes/graphs-fe/c3js/server/routes/metrics.js
Normal file
@ -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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
15
spikes/graphs-fe/c3js/server/routes/static.js
Normal file
15
spikes/graphs-fe/c3js/server/routes/static.js
Normal file
@ -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
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
18
spikes/graphs-fe/c3js/server/routes/version.js
Normal file
18
spikes/graphs-fe/c3js/server/routes/version.js
Normal file
@ -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)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
181
spikes/graphs-fe/c3js/static/index.html
Normal file
181
spikes/graphs-fe/c3js/static/index.html
Normal file
@ -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>
|
69
spikes/graphs-fe/c3js/webpack.config.js
Normal file
69
spikes/graphs-fe/c3js/webpack.config.js
Normal file
@ -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);
|
15
spikes/graphs-fe/chartjs/.babelrc
Normal file
15
spikes/graphs-fe/chartjs/.babelrc
Normal file
@ -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"
|
||||||
|
}
|
3
spikes/graphs-fe/chartjs/.eslintignore
Normal file
3
spikes/graphs-fe/chartjs/.eslintignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
29
spikes/graphs-fe/chartjs/.eslintrc
Normal file
29
spikes/graphs-fe/chartjs/.eslintrc
Normal file
@ -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
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
4
spikes/graphs-fe/chartjs/.gitignore
vendored
Normal file
4
spikes/graphs-fe/chartjs/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
||||||
|
npm-debug.log
|
65
spikes/graphs-fe/chartjs/client/chart.js
Normal file
65
spikes/graphs-fe/chartjs/client/chart.js
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
const buildArray = require('build-array');
|
||||||
|
const Chart = require('chart.js');
|
||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
connect
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
const Component = 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'
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapStateToProps = ({
|
||||||
|
data
|
||||||
|
}) => {
|
||||||
|
return {
|
||||||
|
data
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = connect(
|
||||||
|
mapStateToProps
|
||||||
|
)(Component);
|
46
spikes/graphs-fe/chartjs/client/index.js
Normal file
46
spikes/graphs-fe/chartjs/client/index.js
Normal file
@ -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);
|
||||||
|
}
|
25
spikes/graphs-fe/chartjs/client/root.js
Normal file
25
spikes/graphs-fe/chartjs/client/root.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const ReactHotLoader = require('react-hot-loader');
|
||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const Chart = require('./chart');
|
||||||
|
|
||||||
|
|
||||||
|
const {
|
||||||
|
AppContainer
|
||||||
|
} = ReactHotLoader;
|
||||||
|
|
||||||
|
const {
|
||||||
|
Provider
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
module.exports = ({
|
||||||
|
store
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<AppContainer>
|
||||||
|
<Provider store={store}>
|
||||||
|
<Chart />
|
||||||
|
</Provider>
|
||||||
|
</AppContainer>
|
||||||
|
);
|
||||||
|
};
|
25
spikes/graphs-fe/chartjs/client/store.js
Normal file
25
spikes/graphs-fe/chartjs/client/store.js
Normal file
@ -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);
|
||||||
|
};
|
57
spikes/graphs-fe/chartjs/package.json
Normal file
57
spikes/graphs-fe/chartjs/package.json
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
{
|
||||||
|
"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",
|
||||||
|
"chart.js": "^2.3.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"
|
||||||
|
}
|
||||||
|
}
|
9
spikes/graphs-fe/chartjs/readme.md
Normal file
9
spikes/graphs-fe/chartjs/readme.md
Normal file
@ -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
|
29
spikes/graphs-fe/chartjs/server/index.js
Normal file
29
spikes/graphs-fe/chartjs/server/index.js
Normal file
@ -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}`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
34
spikes/graphs-fe/chartjs/server/metric.js
Normal file
34
spikes/graphs-fe/chartjs/server/metric.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
15
spikes/graphs-fe/chartjs/server/plugins.js
Normal file
15
spikes/graphs-fe/chartjs/server/plugins.js
Normal file
@ -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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
11
spikes/graphs-fe/chartjs/server/routes/home.js
Normal file
11
spikes/graphs-fe/chartjs/server/routes/home.js
Normal file
@ -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'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
18
spikes/graphs-fe/chartjs/server/routes/metrics.js
Normal file
18
spikes/graphs-fe/chartjs/server/routes/metrics.js
Normal file
@ -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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
15
spikes/graphs-fe/chartjs/server/routes/static.js
Normal file
15
spikes/graphs-fe/chartjs/server/routes/static.js
Normal file
@ -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
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
18
spikes/graphs-fe/chartjs/server/routes/version.js
Normal file
18
spikes/graphs-fe/chartjs/server/routes/version.js
Normal file
@ -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)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
12
spikes/graphs-fe/chartjs/static/index.html
Normal file
12
spikes/graphs-fe/chartjs/static/index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!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" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id='root'></div>
|
||||||
|
<script src='/static/bundle.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
69
spikes/graphs-fe/chartjs/webpack.config.js
Normal file
69
spikes/graphs-fe/chartjs/webpack.config.js
Normal file
@ -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);
|
15
spikes/graphs-fe/epoch/.babelrc
Normal file
15
spikes/graphs-fe/epoch/.babelrc
Normal file
@ -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"
|
||||||
|
}
|
3
spikes/graphs-fe/epoch/.eslintignore
Normal file
3
spikes/graphs-fe/epoch/.eslintignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
29
spikes/graphs-fe/epoch/.eslintrc
Normal file
29
spikes/graphs-fe/epoch/.eslintrc
Normal file
@ -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
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
4
spikes/graphs-fe/epoch/.gitignore
vendored
Normal file
4
spikes/graphs-fe/epoch/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
||||||
|
npm-debug.log
|
212
spikes/graphs-fe/epoch/client/epoch.js
Normal file
212
spikes/graphs-fe/epoch/client/epoch.js
Normal file
@ -0,0 +1,212 @@
|
|||||||
|
// injects into `window` (ikr)
|
||||||
|
require('epoch-charting');
|
||||||
|
|
||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
// Chart: {
|
||||||
|
// Bar
|
||||||
|
// }
|
||||||
|
Time: {
|
||||||
|
Bar
|
||||||
|
}
|
||||||
|
} = window.Epoch;
|
||||||
|
|
||||||
|
const {
|
||||||
|
connect
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
const style = {
|
||||||
|
height: '220px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const EpochGraph = React.createClass({
|
||||||
|
ref: function(name) {
|
||||||
|
this._refs = this._refs || {};
|
||||||
|
|
||||||
|
return (el) => {
|
||||||
|
this._refs[name] = el;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
fromData: function(data) {
|
||||||
|
return (data || []).map((d) => {
|
||||||
|
return {
|
||||||
|
y: d.cpu,
|
||||||
|
time: d.when
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
|
componentDidMount: function() {
|
||||||
|
this.chart = new Bar({
|
||||||
|
el: this._refs.component,
|
||||||
|
type: 'time.bar',
|
||||||
|
data: [{
|
||||||
|
label: 'A',
|
||||||
|
values: []
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// {
|
||||||
|
// time: 1478605670,
|
||||||
|
// y: 2
|
||||||
|
// }, {
|
||||||
|
// time: 1478605671,
|
||||||
|
// y: 1.9876883405951378
|
||||||
|
// }, {
|
||||||
|
// time: 1478605672,
|
||||||
|
// y: 1.9510565162951536
|
||||||
|
// }, {
|
||||||
|
// time: 1478605673,
|
||||||
|
// y: 1.8910065241883678
|
||||||
|
// }, {
|
||||||
|
// time: 1478605674,
|
||||||
|
// y: 1.8090169943749475
|
||||||
|
// }, {
|
||||||
|
// time: 1478605675,
|
||||||
|
// y: 1.7071067811865475
|
||||||
|
// }, {
|
||||||
|
// time: 1478605676,
|
||||||
|
// y: 1.5877852522924731
|
||||||
|
// }, {
|
||||||
|
// time: 1478605677,
|
||||||
|
// y: 1.4539904997395467
|
||||||
|
// }, {
|
||||||
|
// time: 1478605678,
|
||||||
|
// y: 1.3090169943749475
|
||||||
|
// }, {
|
||||||
|
// time: 1478605679,
|
||||||
|
// y: 1.156434465040231
|
||||||
|
// }, {
|
||||||
|
// time: 1478605680,
|
||||||
|
// y: 1
|
||||||
|
// }, {
|
||||||
|
// time: 1478605681,
|
||||||
|
// y: 0.8435655349597694
|
||||||
|
// }, {
|
||||||
|
// time: 1478605682,
|
||||||
|
// y: 0.6909830056250527
|
||||||
|
// }, {
|
||||||
|
// time: 1478605683,
|
||||||
|
// y: 0.5460095002604533
|
||||||
|
// }, {
|
||||||
|
// time: 1478605684,
|
||||||
|
// y: 0.412214747707527
|
||||||
|
// }, {
|
||||||
|
// time: 1478605685,
|
||||||
|
// y: 0.29289321881345254
|
||||||
|
// }, {
|
||||||
|
// time: 1478605686,
|
||||||
|
// y: 0.19098300562505266
|
||||||
|
// }, {
|
||||||
|
// time: 1478605687,
|
||||||
|
// y: 0.10899347581163221
|
||||||
|
// }, {
|
||||||
|
// time: 1478605688,
|
||||||
|
// y: 0.04894348370484647
|
||||||
|
// }, {
|
||||||
|
// time: 1478605689,
|
||||||
|
// y: 0.01231165940486234
|
||||||
|
// }, {
|
||||||
|
// time: 1478605690,
|
||||||
|
// y: 0
|
||||||
|
// }, {
|
||||||
|
// time: 1478605691,
|
||||||
|
// y: 0.01231165940486223
|
||||||
|
// }, {
|
||||||
|
// time: 1478605692,
|
||||||
|
// y: 0.04894348370484625
|
||||||
|
// }, {
|
||||||
|
// time: 1478605693,
|
||||||
|
// y: 0.1089934758116321
|
||||||
|
// }, {
|
||||||
|
// time: 1478605694,
|
||||||
|
// y: 0.19098300562505255
|
||||||
|
// }, {
|
||||||
|
// time: 1478605695,
|
||||||
|
// y: 0.2928932188134523
|
||||||
|
// }, {
|
||||||
|
// time: 1478605696,
|
||||||
|
// y: 0.41221474770752675
|
||||||
|
// }, {
|
||||||
|
// time: 1478605697,
|
||||||
|
// y: 0.546009500260453
|
||||||
|
// }, {
|
||||||
|
// time: 1478605698,
|
||||||
|
// y: 0.6909830056250524
|
||||||
|
// }, {
|
||||||
|
// time: 1478605699,
|
||||||
|
// y: 0.8435655349597689
|
||||||
|
// }, {
|
||||||
|
// time: 1478605700,
|
||||||
|
// y: 0.9999999999999998
|
||||||
|
// }, {
|
||||||
|
// time: 1478605701,
|
||||||
|
// y: 1.1564344650402307
|
||||||
|
// }, {
|
||||||
|
// time: 1478605702,
|
||||||
|
// y: 1.3090169943749472
|
||||||
|
// }, {
|
||||||
|
// time: 1478605703,
|
||||||
|
// y: 1.4539904997395467
|
||||||
|
// }, {
|
||||||
|
// time: 1478605704,
|
||||||
|
// y: 1.587785252292473
|
||||||
|
// }, {
|
||||||
|
// time: 1478605705,
|
||||||
|
// y: 1.7071067811865475
|
||||||
|
// }, {
|
||||||
|
// time: 1478605706,
|
||||||
|
// y: 1.8090169943749475
|
||||||
|
// }, {
|
||||||
|
// time: 1478605707,
|
||||||
|
// y: 1.8910065241883678
|
||||||
|
// }, {
|
||||||
|
// time: 1478605708,
|
||||||
|
// y: 1.9510565162951536
|
||||||
|
// }, {
|
||||||
|
// time: 1478605709,
|
||||||
|
// y: 1.9876883405951378
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// this.chart = new Bar({
|
||||||
|
// el: this._refs.component,
|
||||||
|
// data: [{
|
||||||
|
// values: [{
|
||||||
|
// x: 'A',
|
||||||
|
// y: 20
|
||||||
|
// }, {
|
||||||
|
// x: 'B',
|
||||||
|
// y: 39
|
||||||
|
// }, {
|
||||||
|
// x: 'C',
|
||||||
|
// y: 8
|
||||||
|
// }, ]
|
||||||
|
// }]
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
componentWillReceiveProps: function(nextProps) {
|
||||||
|
this.fromData(this.props.data).forEach((r) => this.chart.push([r]));
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={style}
|
||||||
|
className='epoch epoch-theme-default category20'
|
||||||
|
ref={this.ref('component')}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapStateToProps = ({
|
||||||
|
data
|
||||||
|
}) => {
|
||||||
|
return {
|
||||||
|
data
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = connect(mapStateToProps)(EpochGraph);
|
46
spikes/graphs-fe/epoch/client/index.js
Normal file
46
spikes/graphs-fe/epoch/client/index.js
Normal file
@ -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);
|
||||||
|
}
|
25
spikes/graphs-fe/epoch/client/root.js
Normal file
25
spikes/graphs-fe/epoch/client/root.js
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
25
spikes/graphs-fe/epoch/client/store.js
Normal file
25
spikes/graphs-fe/epoch/client/store.js
Normal file
@ -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);
|
||||||
|
};
|
57
spikes/graphs-fe/epoch/package.json
Normal file
57
spikes/graphs-fe/epoch/package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
6
spikes/graphs-fe/epoch/readme.md
Normal file
6
spikes/graphs-fe/epoch/readme.md
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
# Epoch
|
||||||
|
|
||||||
|
![](http://g.recordit.co/4LVH7PlAJP.gif)
|
||||||
|
|
||||||
|
## summary
|
||||||
|
|
29
spikes/graphs-fe/epoch/server/index.js
Normal file
29
spikes/graphs-fe/epoch/server/index.js
Normal file
@ -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}`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
34
spikes/graphs-fe/epoch/server/metric.js
Normal file
34
spikes/graphs-fe/epoch/server/metric.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
15
spikes/graphs-fe/epoch/server/plugins.js
Normal file
15
spikes/graphs-fe/epoch/server/plugins.js
Normal file
@ -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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
11
spikes/graphs-fe/epoch/server/routes/home.js
Normal file
11
spikes/graphs-fe/epoch/server/routes/home.js
Normal file
@ -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'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
18
spikes/graphs-fe/epoch/server/routes/metrics.js
Normal file
18
spikes/graphs-fe/epoch/server/routes/metrics.js
Normal file
@ -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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
15
spikes/graphs-fe/epoch/server/routes/static.js
Normal file
15
spikes/graphs-fe/epoch/server/routes/static.js
Normal file
@ -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
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
18
spikes/graphs-fe/epoch/server/routes/version.js
Normal file
18
spikes/graphs-fe/epoch/server/routes/version.js
Normal file
@ -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)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
12
spikes/graphs-fe/epoch/static/index.html
Normal file
12
spikes/graphs-fe/epoch/static/index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!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" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id='root'></div>
|
||||||
|
<script src='/static/bundle.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
72
spikes/graphs-fe/epoch/webpack.config.js
Normal file
72
spikes/graphs-fe/epoch/webpack.config.js
Normal file
@ -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);
|
15
spikes/graphs-fe/nvd3/.babelrc
Normal file
15
spikes/graphs-fe/nvd3/.babelrc
Normal file
@ -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"
|
||||||
|
}
|
3
spikes/graphs-fe/nvd3/.eslintignore
Normal file
3
spikes/graphs-fe/nvd3/.eslintignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
29
spikes/graphs-fe/nvd3/.eslintrc
Normal file
29
spikes/graphs-fe/nvd3/.eslintrc
Normal file
@ -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
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
4
spikes/graphs-fe/nvd3/.gitignore
vendored
Normal file
4
spikes/graphs-fe/nvd3/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
||||||
|
npm-debug.log
|
58
spikes/graphs-fe/nvd3/client/chart.js
Normal file
58
spikes/graphs-fe/nvd3/client/chart.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
const NVD3Chart = require('react-nvd3');
|
||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
connect
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
const Component = ({
|
||||||
|
data
|
||||||
|
}) => {
|
||||||
|
const datum = [{
|
||||||
|
key: 'test',
|
||||||
|
values: (data || []).map((v, i) => ({
|
||||||
|
label: `${i}`,
|
||||||
|
value: v.cpu
|
||||||
|
}))
|
||||||
|
}];
|
||||||
|
|
||||||
|
const context = {
|
||||||
|
getColor: (i) => {
|
||||||
|
if (i.value > 50) {
|
||||||
|
return 'red';
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'green';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const color = {
|
||||||
|
name: 'getColor',
|
||||||
|
type: 'function'
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NVD3Chart
|
||||||
|
duration={0}
|
||||||
|
context={context}
|
||||||
|
color={color}
|
||||||
|
type='discreteBarChart'
|
||||||
|
datum={datum}
|
||||||
|
x='label'
|
||||||
|
y='value'
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const mapStateToProps = ({
|
||||||
|
data
|
||||||
|
}) => {
|
||||||
|
return {
|
||||||
|
data
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = connect(
|
||||||
|
mapStateToProps
|
||||||
|
)(Component);
|
46
spikes/graphs-fe/nvd3/client/index.js
Normal file
46
spikes/graphs-fe/nvd3/client/index.js
Normal file
@ -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);
|
||||||
|
}
|
25
spikes/graphs-fe/nvd3/client/root.js
Normal file
25
spikes/graphs-fe/nvd3/client/root.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const ReactHotLoader = require('react-hot-loader');
|
||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const Chart = require('./chart');
|
||||||
|
|
||||||
|
|
||||||
|
const {
|
||||||
|
AppContainer
|
||||||
|
} = ReactHotLoader;
|
||||||
|
|
||||||
|
const {
|
||||||
|
Provider
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
module.exports = ({
|
||||||
|
store
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<AppContainer>
|
||||||
|
<Provider store={store}>
|
||||||
|
<Chart />
|
||||||
|
</Provider>
|
||||||
|
</AppContainer>
|
||||||
|
);
|
||||||
|
};
|
25
spikes/graphs-fe/nvd3/client/store.js
Normal file
25
spikes/graphs-fe/nvd3/client/store.js
Normal file
@ -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);
|
||||||
|
};
|
57
spikes/graphs-fe/nvd3/package.json
Normal file
57
spikes/graphs-fe/nvd3/package.json
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
{
|
||||||
|
"name": "nvd3-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-nvd3": "^0.5.7",
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
9
spikes/graphs-fe/nvd3/readme.md
Normal file
9
spikes/graphs-fe/nvd3/readme.md
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
# NVD3
|
||||||
|
|
||||||
|
![](http://g.recordit.co/BGRyJNZxME.gif)
|
||||||
|
|
||||||
|
## summary
|
||||||
|
|
||||||
|
- [x] customisable via js and css
|
||||||
|
- [x] fast (handles 100ms updates well)
|
||||||
|
- [x] simple react integration
|
29
spikes/graphs-fe/nvd3/server/index.js
Normal file
29
spikes/graphs-fe/nvd3/server/index.js
Normal file
@ -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}`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
34
spikes/graphs-fe/nvd3/server/metric.js
Normal file
34
spikes/graphs-fe/nvd3/server/metric.js
Normal file
@ -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
|
||||||
|
});
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
cdm[id] = {
|
||||||
|
interval,
|
||||||
|
sockets: 1
|
||||||
|
};
|
||||||
|
},
|
||||||
|
off: (id) => {
|
||||||
|
if (!(cdm[id].sockets -= 1)) {
|
||||||
|
clearInterval(cdm[id].interval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
15
spikes/graphs-fe/nvd3/server/plugins.js
Normal file
15
spikes/graphs-fe/nvd3/server/plugins.js
Normal file
@ -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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
11
spikes/graphs-fe/nvd3/server/routes/home.js
Normal file
11
spikes/graphs-fe/nvd3/server/routes/home.js
Normal file
@ -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'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
18
spikes/graphs-fe/nvd3/server/routes/metrics.js
Normal file
18
spikes/graphs-fe/nvd3/server/routes/metrics.js
Normal file
@ -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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
15
spikes/graphs-fe/nvd3/server/routes/static.js
Normal file
15
spikes/graphs-fe/nvd3/server/routes/static.js
Normal file
@ -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
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
18
spikes/graphs-fe/nvd3/server/routes/version.js
Normal file
18
spikes/graphs-fe/nvd3/server/routes/version.js
Normal file
@ -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)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
22
spikes/graphs-fe/nvd3/static/index.html
Normal file
22
spikes/graphs-fe/nvd3/static/index.html
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<!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>
|
||||||
|
.nv-x {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nvd3-svg {
|
||||||
|
width: 1080px;
|
||||||
|
height: 720px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id='root'></div>
|
||||||
|
<script src='/static/bundle.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
69
spikes/graphs-fe/nvd3/webpack.config.js
Normal file
69
spikes/graphs-fe/nvd3/webpack.config.js
Normal file
@ -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);
|
15
spikes/graphs-fe/plotly/.babelrc
Normal file
15
spikes/graphs-fe/plotly/.babelrc
Normal file
@ -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"
|
||||||
|
}
|
3
spikes/graphs-fe/plotly/.eslintignore
Normal file
3
spikes/graphs-fe/plotly/.eslintignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
29
spikes/graphs-fe/plotly/.eslintrc
Normal file
29
spikes/graphs-fe/plotly/.eslintrc
Normal file
@ -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
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
4
spikes/graphs-fe/plotly/.gitignore
vendored
Normal file
4
spikes/graphs-fe/plotly/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
||||||
|
npm-debug.log
|
46
spikes/graphs-fe/plotly/client/index.js
Normal file
46
spikes/graphs-fe/plotly/client/index.js
Normal file
@ -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);
|
||||||
|
}
|
68
spikes/graphs-fe/plotly/client/plotly.js
Normal file
68
spikes/graphs-fe/plotly/client/plotly.js
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
const Plotly = require('react-plotlyjs');
|
||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
connect
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
const PlotlyGraph = 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 graphTypes = [{
|
||||||
|
type: 'bar',
|
||||||
|
marker: {
|
||||||
|
color: 'rgba(205, 54, 54, 0.3)'
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
type: 'bar',
|
||||||
|
marker: {
|
||||||
|
color: 'rgba(54, 74, 205, 0.3)'
|
||||||
|
}
|
||||||
|
}];
|
||||||
|
|
||||||
|
const graphs = graphTypes.map((graphType, i) => {
|
||||||
|
const data = {
|
||||||
|
type: graphType.type,
|
||||||
|
mode: graphType.mode,
|
||||||
|
marker: graphType.marker,
|
||||||
|
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)(PlotlyGraph);
|
25
spikes/graphs-fe/plotly/client/root.js
Normal file
25
spikes/graphs-fe/plotly/client/root.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const ReactHotLoader = require('react-hot-loader');
|
||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const PlotlyGraph = require('./plotly');
|
||||||
|
|
||||||
|
|
||||||
|
const {
|
||||||
|
AppContainer
|
||||||
|
} = ReactHotLoader;
|
||||||
|
|
||||||
|
const {
|
||||||
|
Provider
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
module.exports = ({
|
||||||
|
store
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<AppContainer>
|
||||||
|
<Provider store={store}>
|
||||||
|
<PlotlyGraph />
|
||||||
|
</Provider>
|
||||||
|
</AppContainer>
|
||||||
|
);
|
||||||
|
};
|
25
spikes/graphs-fe/plotly/client/store.js
Normal file
25
spikes/graphs-fe/plotly/client/store.js
Normal file
@ -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);
|
||||||
|
};
|
56
spikes/graphs-fe/plotly/package.json
Normal file
56
spikes/graphs-fe/plotly/package.json
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
{
|
||||||
|
"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",
|
||||||
|
"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-plotlyjs": "^0.3.7",
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
17
spikes/graphs-fe/plotly/readme.md
Normal file
17
spikes/graphs-fe/plotly/readme.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
# Plotly
|
||||||
|
|
||||||
|
![](http://g.recordit.co/FtMgVC8tE3.gif)
|
||||||
|
|
||||||
|
Adding plotly through npm and created a plotly graph components
|
||||||
|
Running three different graph types of the same data on the same page
|
||||||
|
|
||||||
|
## summary
|
||||||
|
|
||||||
|
Pros:
|
||||||
|
- [x] simple and complete api for static graphs
|
||||||
|
|
||||||
|
Cons:
|
||||||
|
- [ ] very slow on consecutive renders (if they happen in short intervals)
|
||||||
|
- [ ] lacking api for real time graphs
|
||||||
|
- [ ] `restyle` or `recalc` are only useful for style changes
|
||||||
|
- [ ] `extendTraces` API is not documented and not obvious
|
29
spikes/graphs-fe/plotly/server/index.js
Normal file
29
spikes/graphs-fe/plotly/server/index.js
Normal file
@ -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}`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
34
spikes/graphs-fe/plotly/server/metric.js
Normal file
34
spikes/graphs-fe/plotly/server/metric.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
15
spikes/graphs-fe/plotly/server/plugins.js
Normal file
15
spikes/graphs-fe/plotly/server/plugins.js
Normal file
@ -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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
11
spikes/graphs-fe/plotly/server/routes/home.js
Normal file
11
spikes/graphs-fe/plotly/server/routes/home.js
Normal file
@ -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'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
18
spikes/graphs-fe/plotly/server/routes/metrics.js
Normal file
18
spikes/graphs-fe/plotly/server/routes/metrics.js
Normal file
@ -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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
15
spikes/graphs-fe/plotly/server/routes/static.js
Normal file
15
spikes/graphs-fe/plotly/server/routes/static.js
Normal file
@ -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
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
18
spikes/graphs-fe/plotly/server/routes/version.js
Normal file
18
spikes/graphs-fe/plotly/server/routes/version.js
Normal file
@ -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)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
11
spikes/graphs-fe/plotly/static/index.html
Normal file
11
spikes/graphs-fe/plotly/static/index.html
Normal file
@ -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>
|
69
spikes/graphs-fe/plotly/webpack.config.js
Normal file
69
spikes/graphs-fe/plotly/webpack.config.js
Normal file
@ -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);
|
15
spikes/graphs-fe/rickshaw/.babelrc
Normal file
15
spikes/graphs-fe/rickshaw/.babelrc
Normal file
@ -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"
|
||||||
|
}
|
3
spikes/graphs-fe/rickshaw/.eslintignore
Normal file
3
spikes/graphs-fe/rickshaw/.eslintignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
29
spikes/graphs-fe/rickshaw/.eslintrc
Normal file
29
spikes/graphs-fe/rickshaw/.eslintrc
Normal file
@ -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
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
4
spikes/graphs-fe/rickshaw/.gitignore
vendored
Normal file
4
spikes/graphs-fe/rickshaw/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
||||||
|
npm-debug.log
|
77
spikes/graphs-fe/rickshaw/client/chart.js
Normal file
77
spikes/graphs-fe/rickshaw/client/chart.js
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
const Rickshaw = require('rickshaw');
|
||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const React = require('react');
|
||||||
|
const style = require('./style.css');
|
||||||
|
|
||||||
|
const {
|
||||||
|
connect
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
const {
|
||||||
|
Graph
|
||||||
|
} = Rickshaw;
|
||||||
|
|
||||||
|
let i = 0;
|
||||||
|
|
||||||
|
const Component = React.createClass({
|
||||||
|
ref: function(name) {
|
||||||
|
this._refs = this._refs || {};
|
||||||
|
|
||||||
|
return (el) => {
|
||||||
|
this._refs[name] = el;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
fromData: function(data) {
|
||||||
|
return (data || []).map((d, i) => {
|
||||||
|
return {
|
||||||
|
y: d.cpu,
|
||||||
|
x: i
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
|
componentDidMount: function() {
|
||||||
|
this._chart = new Graph({
|
||||||
|
element: this._refs.component,
|
||||||
|
renderer: 'bar',
|
||||||
|
width: 500,
|
||||||
|
height: 200,
|
||||||
|
series: [{
|
||||||
|
data: this.fromData(this.props.data)
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
this._chart.render();
|
||||||
|
},
|
||||||
|
componentWillReceiveProps: function(nextProps) {
|
||||||
|
this._chart.series[0].data = this.fromData(this.props.data);
|
||||||
|
this._chart.update();
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
const {
|
||||||
|
data = []
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const className = (data.length && data[data.length - 1].cpu > 50)
|
||||||
|
? style.red
|
||||||
|
: style.blue;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`${style.rickshaw_graph} ${className}`}
|
||||||
|
ref={this.ref('component')}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapStateToProps = ({
|
||||||
|
data
|
||||||
|
}) => {
|
||||||
|
return {
|
||||||
|
data
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = connect(
|
||||||
|
mapStateToProps
|
||||||
|
)(Component);
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user