mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
wip epoch graphing
This commit is contained in:
parent
b46c467ce1
commit
82116aec98
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
|
78
spikes/graphs-fe/epoch/client/epoch.js
Normal file
78
spikes/graphs-fe/epoch/client/epoch.js
Normal file
@ -0,0 +1,78 @@
|
||||
// injects into `window` (ikr)
|
||||
require('epoch-charting');
|
||||
|
||||
const ReactRedux = require('react-redux');
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
Time: {
|
||||
Bar
|
||||
}
|
||||
} = window.Epoch;
|
||||
|
||||
const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
|
||||
const EpochGraph = React.createClass({
|
||||
componentWillMount: function() {
|
||||
const bar = new Bar({
|
||||
el: this._refs.component,
|
||||
data
|
||||
})
|
||||
type: 'time.bar',
|
||||
data: barChartData
|
||||
},
|
||||
render: function() {
|
||||
// const {
|
||||
// data = []
|
||||
// } = this.props;
|
||||
//
|
||||
// const cpu = data.map((d) => Math.floor(d.cpu));
|
||||
// const datatime = data.map((d, i) => i);
|
||||
//
|
||||
// const graphTypes = [{
|
||||
// type: 'scatter',
|
||||
// mode: 'lines+markers'
|
||||
// }, {
|
||||
// type: 'bar'
|
||||
// }];
|
||||
//
|
||||
// const graphs = graphTypes.map((graphType, i) => {
|
||||
// const data = {
|
||||
// type: graphType.type,
|
||||
// mode: graphType.mode,
|
||||
// x: datatime,
|
||||
// y: cpu
|
||||
// };
|
||||
//
|
||||
// const layout = {
|
||||
// barmode: graphType.mode
|
||||
// }
|
||||
//
|
||||
// return (
|
||||
// <Plotly
|
||||
// key={i}
|
||||
// layout={layout}
|
||||
// data={[data]}
|
||||
// />
|
||||
// );
|
||||
// });
|
||||
//
|
||||
// return (
|
||||
// <div>
|
||||
// {graphs}
|
||||
// </div>
|
||||
// )
|
||||
}
|
||||
});
|
||||
|
||||
const mapStateToProps = ({
|
||||
data
|
||||
}) => {
|
||||
return {
|
||||
data
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = connect(mapStateToProps)(EpochGraph);
|
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 @@
|
||||
# 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/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)
|
||||
}
|
||||
});
|
||||
};
|
11
spikes/graphs-fe/epoch/static/index.html
Normal file
11
spikes/graphs-fe/epoch/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>
|
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);
|
7804
spikes/graphs-fe/epoch/yarn.lock
Normal file
7804
spikes/graphs-fe/epoch/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user