integrate metrics-server with plotly
This commit is contained in:
Sérgio Ramos
parent
bb82f33b25
commit
9f5fe02812
@ -1,5 +0,0 @@
|
||||
const Storybook = require('@kadira/storybook');
|
||||
|
||||
Storybook.configure(() => {
|
||||
require('../stories');
|
||||
}, module);
|
||||
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);
|
||||
}
|
||||
58
spikes/graphs-fe/plotly/client/plotly-graph/index.js
Normal file
58
spikes/graphs-fe/plotly/client/plotly-graph/index.js
Normal file
@ -0,0 +1,58 @@
|
||||
const ReactRedux = require('react-redux');
|
||||
const React = require('react');
|
||||
const Plot = require('./plot');
|
||||
|
||||
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: 'scatter',
|
||||
mode: 'lines+markers'
|
||||
}, {
|
||||
type: 'scatter',
|
||||
mode: 'line'
|
||||
}, {
|
||||
type: 'bar'
|
||||
}];
|
||||
|
||||
const graphs = graphTypes.map((graphType, i) => {
|
||||
console.log(cpu, datatime);
|
||||
return (
|
||||
<Plot
|
||||
key={i}
|
||||
name={`plot-${i}`}
|
||||
xData={datatime}
|
||||
yData={cpu}
|
||||
type={graphType.type}
|
||||
mode={graphType.mode}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
{graphs}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
const mapStateToProps = ({
|
||||
data
|
||||
}) => {
|
||||
return {
|
||||
data
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = connect(mapStateToProps)(PlotlyGraph);
|
||||
@ -2,7 +2,6 @@ const React = require('react');
|
||||
const Plotly = require('plotly.js');
|
||||
|
||||
const Plot = React.createClass({
|
||||
|
||||
propTypes: {
|
||||
name: React.PropTypes.string.isRequired,
|
||||
xdata: React.PropTypes.object,
|
||||
@ -10,7 +9,6 @@ const Plot = React.createClass({
|
||||
type: React.PropTypes.string,
|
||||
mode: React.PropTypes.string,
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
const {
|
||||
name,
|
||||
@ -36,14 +34,13 @@ const Plot = React.createClass({
|
||||
displayModeBar: false
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
const {
|
||||
name
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<div id={name}></div>
|
||||
<div id={name} />
|
||||
);
|
||||
}
|
||||
});
|
||||
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-graph');
|
||||
|
||||
|
||||
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, 10)
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = (state = Object.freeze({})) => {
|
||||
return createStore(reducer, state);
|
||||
};
|
||||
@ -1,408 +0,0 @@
|
||||
module.exports = {
|
||||
"cols": [
|
||||
"Datetime",
|
||||
"CPU"
|
||||
],
|
||||
"data": [
|
||||
[
|
||||
"13-04-17",
|
||||
26
|
||||
],
|
||||
[
|
||||
"17-06-16",
|
||||
10
|
||||
],
|
||||
[
|
||||
"28-04-16",
|
||||
63
|
||||
],
|
||||
[
|
||||
"01-01-16",
|
||||
7
|
||||
],
|
||||
[
|
||||
"03-03-17",
|
||||
42
|
||||
],
|
||||
[
|
||||
"09-03-16",
|
||||
8
|
||||
],
|
||||
[
|
||||
"31-03-17",
|
||||
57
|
||||
],
|
||||
[
|
||||
"19-03-16",
|
||||
51
|
||||
],
|
||||
[
|
||||
"25-07-17",
|
||||
82
|
||||
],
|
||||
[
|
||||
"18-03-16",
|
||||
23
|
||||
],
|
||||
[
|
||||
"17-06-17",
|
||||
71
|
||||
],
|
||||
[
|
||||
"15-06-17",
|
||||
64
|
||||
],
|
||||
[
|
||||
"25-09-16",
|
||||
70
|
||||
],
|
||||
[
|
||||
"11-06-16",
|
||||
75
|
||||
],
|
||||
[
|
||||
"12-05-16",
|
||||
24
|
||||
],
|
||||
[
|
||||
"09-05-17",
|
||||
48
|
||||
],
|
||||
[
|
||||
"04-01-17",
|
||||
58
|
||||
],
|
||||
[
|
||||
"15-04-17",
|
||||
74
|
||||
],
|
||||
[
|
||||
"31-12-15",
|
||||
46
|
||||
],
|
||||
[
|
||||
"20-06-16",
|
||||
2
|
||||
],
|
||||
[
|
||||
"25-01-16",
|
||||
85
|
||||
],
|
||||
[
|
||||
"25-12-16",
|
||||
96
|
||||
],
|
||||
[
|
||||
"29-11-15",
|
||||
11
|
||||
],
|
||||
[
|
||||
"22-10-17",
|
||||
66
|
||||
],
|
||||
[
|
||||
"19-05-17",
|
||||
79
|
||||
],
|
||||
[
|
||||
"16-03-16",
|
||||
3
|
||||
],
|
||||
[
|
||||
"24-01-17",
|
||||
76
|
||||
],
|
||||
[
|
||||
"19-05-16",
|
||||
59
|
||||
],
|
||||
[
|
||||
"05-03-17",
|
||||
42
|
||||
],
|
||||
[
|
||||
"08-10-16",
|
||||
14
|
||||
],
|
||||
[
|
||||
"04-05-17",
|
||||
83
|
||||
],
|
||||
[
|
||||
"15-06-16",
|
||||
8
|
||||
],
|
||||
[
|
||||
"30-12-16",
|
||||
25
|
||||
],
|
||||
[
|
||||
"10-12-15",
|
||||
90
|
||||
],
|
||||
[
|
||||
"09-12-16",
|
||||
81
|
||||
],
|
||||
[
|
||||
"23-04-16",
|
||||
77
|
||||
],
|
||||
[
|
||||
"14-04-16",
|
||||
12
|
||||
],
|
||||
[
|
||||
"20-05-16",
|
||||
62
|
||||
],
|
||||
[
|
||||
"24-07-16",
|
||||
33
|
||||
],
|
||||
[
|
||||
"21-06-17",
|
||||
41
|
||||
],
|
||||
[
|
||||
"08-04-17",
|
||||
93
|
||||
],
|
||||
[
|
||||
"25-07-16",
|
||||
22
|
||||
],
|
||||
[
|
||||
"24-03-17",
|
||||
27
|
||||
],
|
||||
[
|
||||
"21-03-16",
|
||||
57
|
||||
],
|
||||
[
|
||||
"25-08-16",
|
||||
75
|
||||
],
|
||||
[
|
||||
"06-07-17",
|
||||
96
|
||||
],
|
||||
[
|
||||
"30-11-16",
|
||||
63
|
||||
],
|
||||
[
|
||||
"27-10-16",
|
||||
16
|
||||
],
|
||||
[
|
||||
"27-03-16",
|
||||
23
|
||||
],
|
||||
[
|
||||
"13-09-17",
|
||||
92
|
||||
],
|
||||
[
|
||||
"25-10-17",
|
||||
81
|
||||
],
|
||||
[
|
||||
"07-11-16",
|
||||
71
|
||||
],
|
||||
[
|
||||
"14-10-17",
|
||||
96
|
||||
],
|
||||
[
|
||||
"27-10-17",
|
||||
22
|
||||
],
|
||||
[
|
||||
"13-03-17",
|
||||
86
|
||||
],
|
||||
[
|
||||
"03-11-16",
|
||||
91
|
||||
],
|
||||
[
|
||||
"11-09-16",
|
||||
25
|
||||
],
|
||||
[
|
||||
"14-01-17",
|
||||
19
|
||||
],
|
||||
[
|
||||
"04-06-16",
|
||||
68
|
||||
],
|
||||
[
|
||||
"30-07-17",
|
||||
24
|
||||
],
|
||||
[
|
||||
"15-04-17",
|
||||
60
|
||||
],
|
||||
[
|
||||
"20-03-17",
|
||||
46
|
||||
],
|
||||
[
|
||||
"07-02-17",
|
||||
3
|
||||
],
|
||||
[
|
||||
"02-11-17",
|
||||
68
|
||||
],
|
||||
[
|
||||
"14-08-16",
|
||||
53
|
||||
],
|
||||
[
|
||||
"06-09-17",
|
||||
69
|
||||
],
|
||||
[
|
||||
"12-09-17",
|
||||
51
|
||||
],
|
||||
[
|
||||
"01-05-16",
|
||||
14
|
||||
],
|
||||
[
|
||||
"26-03-17",
|
||||
75
|
||||
],
|
||||
[
|
||||
"05-11-15",
|
||||
86
|
||||
],
|
||||
[
|
||||
"01-02-17",
|
||||
73
|
||||
],
|
||||
[
|
||||
"20-03-17",
|
||||
14
|
||||
],
|
||||
[
|
||||
"20-03-16",
|
||||
81
|
||||
],
|
||||
[
|
||||
"01-06-16",
|
||||
35
|
||||
],
|
||||
[
|
||||
"28-11-16",
|
||||
33
|
||||
],
|
||||
[
|
||||
"20-08-17",
|
||||
50
|
||||
],
|
||||
[
|
||||
"18-05-17",
|
||||
31
|
||||
],
|
||||
[
|
||||
"15-06-16",
|
||||
93
|
||||
],
|
||||
[
|
||||
"17-10-17",
|
||||
81
|
||||
],
|
||||
[
|
||||
"26-08-16",
|
||||
60
|
||||
],
|
||||
[
|
||||
"11-05-17",
|
||||
34
|
||||
],
|
||||
[
|
||||
"11-04-16",
|
||||
12
|
||||
],
|
||||
[
|
||||
"21-07-16",
|
||||
59
|
||||
],
|
||||
[
|
||||
"11-07-17",
|
||||
21
|
||||
],
|
||||
[
|
||||
"20-08-17",
|
||||
13
|
||||
],
|
||||
[
|
||||
"07-05-16",
|
||||
14
|
||||
],
|
||||
[
|
||||
"03-11-16",
|
||||
45
|
||||
],
|
||||
[
|
||||
"23-02-16",
|
||||
30
|
||||
],
|
||||
[
|
||||
"22-03-16",
|
||||
56
|
||||
],
|
||||
[
|
||||
"15-11-15",
|
||||
62
|
||||
],
|
||||
[
|
||||
"26-10-16",
|
||||
26
|
||||
],
|
||||
[
|
||||
"10-12-16",
|
||||
71
|
||||
],
|
||||
[
|
||||
"21-06-17",
|
||||
78
|
||||
],
|
||||
[
|
||||
"25-01-16",
|
||||
26
|
||||
],
|
||||
[
|
||||
"04-06-17",
|
||||
23
|
||||
],
|
||||
[
|
||||
"29-10-17",
|
||||
31
|
||||
],
|
||||
[
|
||||
"17-03-17",
|
||||
50
|
||||
],
|
||||
[
|
||||
"01-02-16",
|
||||
25
|
||||
],
|
||||
[
|
||||
"23-06-16",
|
||||
34
|
||||
],
|
||||
[
|
||||
"18-04-17",
|
||||
55
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -2,16 +2,7 @@
|
||||
"name": "redux-thunks-spike",
|
||||
"private": true,
|
||||
"license": "private",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --open --config webpack.config.js",
|
||||
"lint": "eslint .",
|
||||
"test": "NODE_ENV=test nyc ava test/*.js --fail-fast --verbose --tap",
|
||||
"open": "nyc report --reporter=html & open coverage/index.html",
|
||||
"coverage": "nyc check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"build-storybook": "build-storybook"
|
||||
},
|
||||
"main": "server/index.js",
|
||||
"dependencies": {
|
||||
"autoprefixer": "^6.5.1",
|
||||
"babel-eslint": "^7.0.0",
|
||||
@ -24,7 +15,13 @@
|
||||
"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",
|
||||
"plotly.js": "^1.1.0",
|
||||
"postcss-loader": "^1.0.0",
|
||||
"postcss-modules-values": "^1.2.2",
|
||||
@ -32,15 +29,15 @@
|
||||
"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": {
|
||||
"@kadira/storybook": "^2.24.1",
|
||||
"ava": "^0.16.0",
|
||||
"babel-register": "^6.16.3",
|
||||
"enzyme": "^2.5.1",
|
||||
"eslint": "^3.8.1",
|
||||
"eslint-config-semistandard": "^7.0.0",
|
||||
"eslint-config-standard": "^6.2.0",
|
||||
@ -48,9 +45,7 @@
|
||||
"eslint-plugin-promise": "^3.3.0",
|
||||
"eslint-plugin-react": "^6.4.1",
|
||||
"eslint-plugin-standard": "^2.0.1",
|
||||
"json-loader": "^0.5.4",
|
||||
"nyc": "^8.3.1",
|
||||
"react-addons-test-utils": "^15.3.2"
|
||||
"json-loader": "^0.5.4"
|
||||
},
|
||||
"ava": {
|
||||
"require": [
|
||||
|
||||
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
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
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)
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -1,103 +0,0 @@
|
||||
@value color_primary_dark, font_primary, font_secondary, font_tertiary from "./variables.css";
|
||||
|
||||
.base {
|
||||
:global {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p,
|
||||
li {
|
||||
color: color_primary_dark;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: font_primary;
|
||||
}
|
||||
|
||||
h4,
|
||||
p,
|
||||
li {
|
||||
font-family: font_secondary;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
h5,
|
||||
p,
|
||||
li {
|
||||
& > a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 14px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 10px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 6px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: font_tertiary;
|
||||
font-style: italic;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
letter-spacing: -0.025em;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
select,
|
||||
a {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Removes the grey background when you tap on a link in IOS */
|
||||
button,
|
||||
a {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
const React = require('react');
|
||||
const styles = require('./index.css');
|
||||
|
||||
module.exports = ({
|
||||
children
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.base}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,12 +0,0 @@
|
||||
@value font_primary: "freddiesflowerstitle-webfont", "Times", serif;
|
||||
@value font_secondary: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
@value font_tertiary: Georgia, Times, "Times New Roman", serif;
|
||||
|
||||
@value color_primary: #ccc;
|
||||
@value color_primary_dark: #222;
|
||||
@value color_primary_mid: #959595;
|
||||
@value color_primary_light: #f4f4f4;
|
||||
@value color_warning: #C93F3F;
|
||||
@value color_valid: #547954;
|
||||
@value color_cta_primary: #60b4d6;
|
||||
@value color_cta_secondary: #e5eef2;
|
||||
@ -1,9 +0,0 @@
|
||||
const React = require('react');
|
||||
|
||||
module.exports = (props) => {
|
||||
return (
|
||||
<button>
|
||||
{props.children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@ -1,38 +0,0 @@
|
||||
@value color_background from "../base/variables.css";
|
||||
|
||||
.container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.container::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@media (min-width: 544px) {
|
||||
.container {
|
||||
max-width: 576px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 940px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
const React = require('react');
|
||||
const styles = require('./index.css');
|
||||
|
||||
module.exports = ({
|
||||
children
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,6 +0,0 @@
|
||||
module.exports = {
|
||||
Button: require('./button'),
|
||||
Container: require('./container'),
|
||||
Base: require('./base'),
|
||||
PlotlyGraph: require('./plotlyGraph'),
|
||||
};
|
||||
@ -1,64 +0,0 @@
|
||||
const React = require('react');
|
||||
const Plot = require('./plot');
|
||||
const localData = require('../../../lib/data');
|
||||
|
||||
const PlotlyGraph = React.createClass({
|
||||
|
||||
getInitialState: function() {
|
||||
return this.fetchData(this.props)
|
||||
},
|
||||
|
||||
fetchData: function(data = localData) {
|
||||
let datetime = [];
|
||||
let cpu = [];
|
||||
|
||||
localData.data.forEach( d => {
|
||||
datetime.push(d[0]);
|
||||
cpu.push(d[1]);
|
||||
})
|
||||
|
||||
return {
|
||||
data: localData,
|
||||
cpu,
|
||||
datetime
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
|
||||
const graphTypes = [
|
||||
{
|
||||
type: 'scatter',
|
||||
mode: 'lines+markers'
|
||||
},
|
||||
{
|
||||
type: 'scatter',
|
||||
mode: 'line'
|
||||
},
|
||||
{
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
|
||||
const graphs = graphTypes.map( (graphType, i) => {
|
||||
return (
|
||||
<Plot
|
||||
key={i}
|
||||
name={`plot-${i}`}
|
||||
xData={this.state.datatime}
|
||||
yData={this.state.cpu}
|
||||
type={graphType.type}
|
||||
mode={graphType.mode}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
{graphs}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = PlotlyGraph;
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./components');
|
||||
@ -1,17 +0,0 @@
|
||||
const ReactDOM = require('react-dom');
|
||||
const React = require('react');
|
||||
|
||||
const render = () => {
|
||||
const Root = require('./root');
|
||||
|
||||
ReactDOM.render(
|
||||
<Root />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
};
|
||||
|
||||
render();
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept('./root', render);
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
const React = require('react');
|
||||
const ReactHotLoader = require('react-hot-loader');
|
||||
|
||||
const {
|
||||
Button,
|
||||
Container,
|
||||
Base,
|
||||
PlotlyGraph
|
||||
} = require('../');
|
||||
|
||||
const {
|
||||
AppContainer
|
||||
} = ReactHotLoader;
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<AppContainer>
|
||||
<Base>
|
||||
<Container>
|
||||
<p>Hello</p>
|
||||
<PlotlyGraph />
|
||||
</Container>
|
||||
</Base>
|
||||
</AppContainer>
|
||||
);
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
const React = require('react');
|
||||
const Storybook = require('@kadira/storybook');
|
||||
|
||||
const Home = require('../src/client/containers/home');
|
||||
|
||||
const homeStories = Storybook.storiesOf('Home', module);
|
||||
|
||||
homeStories.add('with nothing', () => (
|
||||
<Home />
|
||||
));
|
||||
@ -1,13 +0,0 @@
|
||||
const test = require('ava');
|
||||
const enzyme = require('enzyme');
|
||||
const React = require('react');
|
||||
|
||||
const {
|
||||
shallow
|
||||
} = enzyme;
|
||||
|
||||
test('renders <Home> without exploding', (t) => {
|
||||
const Home = require('../src/client/containers/home');
|
||||
const wrapper = shallow(<Home />);
|
||||
t.deepEqual(wrapper.length, 1);
|
||||
});
|
||||
@ -3,13 +3,14 @@ const path = require('path');
|
||||
|
||||
const config = {
|
||||
debug: true,
|
||||
devtool: 'eval',
|
||||
context: path.join(__dirname, './src'),
|
||||
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',
|
||||
'./showcase/index.js'
|
||||
'./index.js'
|
||||
],
|
||||
output: {
|
||||
path: path.join(__dirname, './static'),
|
||||
@ -32,21 +33,21 @@ const config = {
|
||||
test: /js?$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, './src')
|
||||
path.join(__dirname, './client')
|
||||
],
|
||||
loaders: ['babel']
|
||||
}, {
|
||||
test: /\.json?$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, './src')
|
||||
path.join(__dirname, './client')
|
||||
],
|
||||
loaders: ['json']
|
||||
}, {
|
||||
test: /\.css$/,
|
||||
exclude: /node_modules/,
|
||||
include: [
|
||||
path.join(__dirname, './src')
|
||||
path.join(__dirname, './client')
|
||||
],
|
||||
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
|
||||
}]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user