nvd3 implementation
This commit is contained in:
parent
904328bfca
commit
4d9e5fb959
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);
|
7804
spikes/graphs-fe/nvd3/yarn.lock
Normal file
7804
spikes/graphs-fe/nvd3/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user