chartjs matrix implementation
This commit is contained in:
parent
0a1f8d2f66
commit
286304136a
15
spikes/graphs-matrix/chartjs/.babelrc
Normal file
15
spikes/graphs-matrix/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-matrix/chartjs/.eslintignore
Normal file
3
spikes/graphs-matrix/chartjs/.eslintignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
29
spikes/graphs-matrix/chartjs/.eslintrc
Normal file
29
spikes/graphs-matrix/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-matrix/chartjs/.gitignore
vendored
Normal file
4
spikes/graphs-matrix/chartjs/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/node_modules
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
||||||
|
npm-debug.log
|
64
spikes/graphs-matrix/chartjs/client/actions.js
Normal file
64
spikes/graphs-matrix/chartjs/client/actions.js
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
const takeRight = require('lodash.takeright');
|
||||||
|
|
||||||
|
const actions = {
|
||||||
|
'UPDATE_STATS': (state, action) => {
|
||||||
|
const data = (state[action.subscription] || []).concat([action.payload]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
[action.subscription]: takeRight(data, 50)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = (state, action) => {
|
||||||
|
return !actions[action.type] ? state : actions[action.type](state, action);
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports.subscribe = (id) => (dispatch, getState) => {
|
||||||
|
const {
|
||||||
|
ws
|
||||||
|
} = getState();
|
||||||
|
|
||||||
|
const p = new Promise((resolve, reject) => {
|
||||||
|
ws.subscribe(`/stats/${id}`, (update, flag) => {
|
||||||
|
dispatch({
|
||||||
|
type: 'UPDATE_STATS',
|
||||||
|
payload: update,
|
||||||
|
subscription: id
|
||||||
|
});
|
||||||
|
}, (err) => {
|
||||||
|
if (err) {
|
||||||
|
return reject(err);
|
||||||
|
}
|
||||||
|
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return dispatch({
|
||||||
|
action: 'SUBSCRIBE',
|
||||||
|
payload: p
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports.unsubscribe = (id) => (dispatch, getState) => {
|
||||||
|
const {
|
||||||
|
ws
|
||||||
|
} = getState();
|
||||||
|
|
||||||
|
const p = new Promise((resolve, reject) => {
|
||||||
|
ws.unsubscribe(`/stats/${id}`, null, (err) => {
|
||||||
|
if (err) {
|
||||||
|
return reject(err);
|
||||||
|
}
|
||||||
|
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return dispatch({
|
||||||
|
action: 'UNSUBSCRIBE',
|
||||||
|
payload: p
|
||||||
|
});
|
||||||
|
};
|
48
spikes/graphs-matrix/chartjs/client/chart.js
Normal file
48
spikes/graphs-matrix/chartjs/client/chart.js
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
const buildArray = require('build-array');
|
||||||
|
const Chart = require('chart.js');
|
||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
module.exports = 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'
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
37
spikes/graphs-matrix/chartjs/client/index.js
Normal file
37
spikes/graphs-matrix/chartjs/client/index.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
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');
|
||||||
|
});
|
||||||
|
|
||||||
|
const store = Store({
|
||||||
|
ws: client
|
||||||
|
});
|
||||||
|
|
||||||
|
const render = () => {
|
||||||
|
const Root = require('./root');
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<Root store={store} />,
|
||||||
|
document.getElementById('root')
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
render();
|
||||||
|
|
||||||
|
if (module.hot) {
|
||||||
|
module.hot.accept('./root', render);
|
||||||
|
}
|
95
spikes/graphs-matrix/chartjs/client/matrix.js
Normal file
95
spikes/graphs-matrix/chartjs/client/matrix.js
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
const React = require('react');
|
||||||
|
const buildArray = require('build-array');
|
||||||
|
const ReactRedux = require('react-redux');
|
||||||
|
const Chart = require('./chart');
|
||||||
|
const actions = require('./actions');
|
||||||
|
|
||||||
|
const {
|
||||||
|
connect
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
const {
|
||||||
|
subscribe,
|
||||||
|
unsubscribe
|
||||||
|
} = actions;
|
||||||
|
|
||||||
|
const mapStateToProps = (state, ownProps) => {
|
||||||
|
return {
|
||||||
|
data: state[ownProps.id]
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch, ownProps) => {
|
||||||
|
return {
|
||||||
|
subscribe: () => {
|
||||||
|
return dispatch(subscribe(ownProps.id));
|
||||||
|
},
|
||||||
|
unsubscribe: () => {
|
||||||
|
return unsubscribe(ownProps.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const Graph = connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps,
|
||||||
|
)(React.createClass({
|
||||||
|
componentWillMount: function() {
|
||||||
|
this.props.subscribe();
|
||||||
|
},
|
||||||
|
componentWillUnmount: function() {
|
||||||
|
this.props.unsubscribe();
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
const {
|
||||||
|
data = []
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const median = data.reduce((sum, v) => (sum + v.cpu), 0) / data.length;
|
||||||
|
|
||||||
|
const bg = median > 50
|
||||||
|
? 'rgba(205, 54, 54, 0.3)'
|
||||||
|
: 'rgba(54, 74, 205, 0.3)';
|
||||||
|
|
||||||
|
const shadow = median > 50
|
||||||
|
? 'inset 0 1px 0 0 rgba(248, 51, 51, 0.5)'
|
||||||
|
: 'inset 0 1px 0 0 rgba(54, 73, 205, 0.5)';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Chart
|
||||||
|
data={this.props.data}
|
||||||
|
bg={bg}
|
||||||
|
shadow={shadow}
|
||||||
|
median={median}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
module.exports = ({
|
||||||
|
x,
|
||||||
|
y
|
||||||
|
}) => {
|
||||||
|
const m = buildArray(y).map((v, i) => {
|
||||||
|
const m = buildArray(x).map((v, y) => {
|
||||||
|
const id = `${i}${y}`;
|
||||||
|
return (
|
||||||
|
<div className={`col-xs-${12/x}`}>
|
||||||
|
<Graph key={id} id={id} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='row'>
|
||||||
|
{m}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{m}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
24
spikes/graphs-matrix/chartjs/client/root.js
Normal file
24
spikes/graphs-matrix/chartjs/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 Matrix = require('./matrix');
|
||||||
|
|
||||||
|
const {
|
||||||
|
AppContainer
|
||||||
|
} = ReactHotLoader;
|
||||||
|
|
||||||
|
const {
|
||||||
|
Provider
|
||||||
|
} = ReactRedux;
|
||||||
|
|
||||||
|
module.exports = ({
|
||||||
|
store
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<AppContainer>
|
||||||
|
<Provider store={store}>
|
||||||
|
<Matrix x={3} y={4} />
|
||||||
|
</Provider>
|
||||||
|
</AppContainer>
|
||||||
|
);
|
||||||
|
};
|
19
spikes/graphs-matrix/chartjs/client/store.js
Normal file
19
spikes/graphs-matrix/chartjs/client/store.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
const createLogger = require('redux-logger');
|
||||||
|
const promiseMiddleware = require('redux-promise-middleware').default;
|
||||||
|
const thunk = require('redux-thunk').default;
|
||||||
|
const redux = require('redux');
|
||||||
|
const reducer = require('./actions');
|
||||||
|
|
||||||
|
const {
|
||||||
|
createStore,
|
||||||
|
compose,
|
||||||
|
applyMiddleware
|
||||||
|
} = redux;
|
||||||
|
|
||||||
|
module.exports = (state = Object.freeze({})) => {
|
||||||
|
return createStore(reducer, state, applyMiddleware(
|
||||||
|
createLogger(),
|
||||||
|
promiseMiddleware(),
|
||||||
|
thunk
|
||||||
|
));
|
||||||
|
};
|
62
spikes/graphs-matrix/chartjs/package.json
Normal file
62
spikes/graphs-matrix/chartjs/package.json
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
{
|
||||||
|
"name": "epoch-matrix-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",
|
||||||
|
"classnames": "^2.2.5",
|
||||||
|
"component-emitter": "^1.2.1",
|
||||||
|
"css-loader": "^0.25.0",
|
||||||
|
"d3": "^4.3.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",
|
||||||
|
"redux-logger": "^2.7.4",
|
||||||
|
"redux-promise-middleware": "^4.1.0",
|
||||||
|
"redux-thunk": "^2.1.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"
|
||||||
|
}
|
||||||
|
}
|
15
spikes/graphs-matrix/chartjs/readme.md
Normal file
15
spikes/graphs-matrix/chartjs/readme.md
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
# Epoch
|
||||||
|
|
||||||
|
- [x] Graphs should maintain aspect ration
|
||||||
|
- [ ] Graphs should match Antonas' first draft designs
|
||||||
|
- [x] Should have 3 Graphs on each row
|
||||||
|
- [x] Should be a 3 x 4 matrix of graphs, showing different data
|
||||||
|
- [x] Graphs should not jitter, ideally smoothly move across the x axis
|
||||||
|
- [x] All graphs should be a bar graph
|
||||||
|
- [ ] Animations when a graph comes into view
|
||||||
|
|
||||||
|
## notes
|
||||||
|
|
||||||
|
- Epoch is not responsive. Even though they maintain aspect ratio, using a responsive grid they get cluttered between each other
|
||||||
|
- With short update intervals, the graphs start using to much cpu and can't handle it
|
||||||
|
- Even looking at the [documentation](https://epochjs.github.io/epoch/styles), it's not obvious how styling works and I wasn't able to make it work.
|
29
spikes/graphs-matrix/chartjs/server/index.js
Normal file
29
spikes/graphs-matrix/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-matrix/chartjs/server/metric.js
Normal file
34
spikes/graphs-matrix/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-matrix/chartjs/server/plugins.js
Normal file
15
spikes/graphs-matrix/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-matrix/chartjs/server/routes/home.js
Normal file
11
spikes/graphs-matrix/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-matrix/chartjs/server/routes/metrics.js
Normal file
18
spikes/graphs-matrix/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-matrix/chartjs/server/routes/static.js
Normal file
15
spikes/graphs-matrix/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-matrix/chartjs/server/routes/version.js
Normal file
18
spikes/graphs-matrix/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)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
983
spikes/graphs-matrix/chartjs/static/index.html
Normal file
983
spikes/graphs-matrix/chartjs/static/index.html
Normal file
@ -0,0 +1,983 @@
|
|||||||
|
<!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>
|
||||||
|
.epoch.red canvas {
|
||||||
|
fill: rgba(205, 54, 54, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.epoch.blue canvas {
|
||||||
|
fill: rgba(54, 74, 205, 0.3);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.container-fluid,
|
||||||
|
.container {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-fluid {
|
||||||
|
padding-right: 2rem;
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 1 auto;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-right: -0.5rem;
|
||||||
|
margin-left: -0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row.reverse {
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-direction: reverse;
|
||||||
|
-ms-flex-direction: row-reverse;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col.reverse {
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: reverse;
|
||||||
|
-ms-flex-direction: column-reverse;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs,
|
||||||
|
.col-xs-1,
|
||||||
|
.col-xs-2,
|
||||||
|
.col-xs-3,
|
||||||
|
.col-xs-4,
|
||||||
|
.col-xs-5,
|
||||||
|
.col-xs-6,
|
||||||
|
.col-xs-7,
|
||||||
|
.col-xs-8,
|
||||||
|
.col-xs-9,
|
||||||
|
.col-xs-10,
|
||||||
|
.col-xs-11,
|
||||||
|
.col-xs-12,
|
||||||
|
.col-xs-offset-0,
|
||||||
|
.col-xs-offset-1,
|
||||||
|
.col-xs-offset-2,
|
||||||
|
.col-xs-offset-3,
|
||||||
|
.col-xs-offset-4,
|
||||||
|
.col-xs-offset-5,
|
||||||
|
.col-xs-offset-6,
|
||||||
|
.col-xs-offset-7,
|
||||||
|
.col-xs-offset-8,
|
||||||
|
.col-xs-offset-9,
|
||||||
|
.col-xs-offset-10,
|
||||||
|
.col-xs-offset-11,
|
||||||
|
.col-xs-offset-12 {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-ms-flex-positive: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
-ms-flex-preferred-size: 0;
|
||||||
|
flex-basis: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-1 {
|
||||||
|
-ms-flex-preferred-size: 8.33333333%;
|
||||||
|
flex-basis: 8.33333333%;
|
||||||
|
max-width: 8.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-2 {
|
||||||
|
-ms-flex-preferred-size: 16.66666667%;
|
||||||
|
flex-basis: 16.66666667%;
|
||||||
|
max-width: 16.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-3 {
|
||||||
|
-ms-flex-preferred-size: 25%;
|
||||||
|
flex-basis: 25%;
|
||||||
|
max-width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-4 {
|
||||||
|
-ms-flex-preferred-size: 33.33333333%;
|
||||||
|
flex-basis: 33.33333333%;
|
||||||
|
max-width: 33.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-5 {
|
||||||
|
-ms-flex-preferred-size: 41.66666667%;
|
||||||
|
flex-basis: 41.66666667%;
|
||||||
|
max-width: 41.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-6 {
|
||||||
|
-ms-flex-preferred-size: 50%;
|
||||||
|
flex-basis: 50%;
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-7 {
|
||||||
|
-ms-flex-preferred-size: 58.33333333%;
|
||||||
|
flex-basis: 58.33333333%;
|
||||||
|
max-width: 58.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-8 {
|
||||||
|
-ms-flex-preferred-size: 66.66666667%;
|
||||||
|
flex-basis: 66.66666667%;
|
||||||
|
max-width: 66.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-9 {
|
||||||
|
-ms-flex-preferred-size: 75%;
|
||||||
|
flex-basis: 75%;
|
||||||
|
max-width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-10 {
|
||||||
|
-ms-flex-preferred-size: 83.33333333%;
|
||||||
|
flex-basis: 83.33333333%;
|
||||||
|
max-width: 83.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-11 {
|
||||||
|
-ms-flex-preferred-size: 91.66666667%;
|
||||||
|
flex-basis: 91.66666667%;
|
||||||
|
max-width: 91.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-12 {
|
||||||
|
-ms-flex-preferred-size: 100%;
|
||||||
|
flex-basis: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-offset-0 {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-offset-1 {
|
||||||
|
margin-left: 8.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-offset-2 {
|
||||||
|
margin-left: 16.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-offset-3 {
|
||||||
|
margin-left: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-offset-4 {
|
||||||
|
margin-left: 33.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-offset-5 {
|
||||||
|
margin-left: 41.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-offset-6 {
|
||||||
|
margin-left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-offset-7 {
|
||||||
|
margin-left: 58.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-offset-8 {
|
||||||
|
margin-left: 66.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-offset-9 {
|
||||||
|
margin-left: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-offset-10 {
|
||||||
|
margin-left: 83.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-offset-11 {
|
||||||
|
margin-left: 91.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-xs {
|
||||||
|
-webkit-box-pack: start;
|
||||||
|
-ms-flex-pack: start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-xs {
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end-xs {
|
||||||
|
-webkit-box-pack: end;
|
||||||
|
-ms-flex-pack: end;
|
||||||
|
justify-content: flex-end;
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-xs {
|
||||||
|
-webkit-box-align: start;
|
||||||
|
-ms-flex-align: start;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-xs {
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-xs {
|
||||||
|
-webkit-box-align: end;
|
||||||
|
-ms-flex-align: end;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.around-xs {
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.between-xs {
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-xs {
|
||||||
|
-webkit-box-ordinal-group: 0;
|
||||||
|
-ms-flex-order: -1;
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.last-xs {
|
||||||
|
-webkit-box-ordinal-group: 2;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 48em) {
|
||||||
|
.container {
|
||||||
|
width: 49rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm,
|
||||||
|
.col-sm-1,
|
||||||
|
.col-sm-2,
|
||||||
|
.col-sm-3,
|
||||||
|
.col-sm-4,
|
||||||
|
.col-sm-5,
|
||||||
|
.col-sm-6,
|
||||||
|
.col-sm-7,
|
||||||
|
.col-sm-8,
|
||||||
|
.col-sm-9,
|
||||||
|
.col-sm-10,
|
||||||
|
.col-sm-11,
|
||||||
|
.col-sm-12,
|
||||||
|
.col-sm-offset-0,
|
||||||
|
.col-sm-offset-1,
|
||||||
|
.col-sm-offset-2,
|
||||||
|
.col-sm-offset-3,
|
||||||
|
.col-sm-offset-4,
|
||||||
|
.col-sm-offset-5,
|
||||||
|
.col-sm-offset-6,
|
||||||
|
.col-sm-offset-7,
|
||||||
|
.col-sm-offset-8,
|
||||||
|
.col-sm-offset-9,
|
||||||
|
.col-sm-offset-10,
|
||||||
|
.col-sm-offset-11,
|
||||||
|
.col-sm-offset-12 {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-ms-flex-positive: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
-ms-flex-preferred-size: 0;
|
||||||
|
flex-basis: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-1 {
|
||||||
|
-ms-flex-preferred-size: 8.33333333%;
|
||||||
|
flex-basis: 8.33333333%;
|
||||||
|
max-width: 8.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-2 {
|
||||||
|
-ms-flex-preferred-size: 16.66666667%;
|
||||||
|
flex-basis: 16.66666667%;
|
||||||
|
max-width: 16.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-3 {
|
||||||
|
-ms-flex-preferred-size: 25%;
|
||||||
|
flex-basis: 25%;
|
||||||
|
max-width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-4 {
|
||||||
|
-ms-flex-preferred-size: 33.33333333%;
|
||||||
|
flex-basis: 33.33333333%;
|
||||||
|
max-width: 33.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-5 {
|
||||||
|
-ms-flex-preferred-size: 41.66666667%;
|
||||||
|
flex-basis: 41.66666667%;
|
||||||
|
max-width: 41.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-6 {
|
||||||
|
-ms-flex-preferred-size: 50%;
|
||||||
|
flex-basis: 50%;
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-7 {
|
||||||
|
-ms-flex-preferred-size: 58.33333333%;
|
||||||
|
flex-basis: 58.33333333%;
|
||||||
|
max-width: 58.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-8 {
|
||||||
|
-ms-flex-preferred-size: 66.66666667%;
|
||||||
|
flex-basis: 66.66666667%;
|
||||||
|
max-width: 66.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-9 {
|
||||||
|
-ms-flex-preferred-size: 75%;
|
||||||
|
flex-basis: 75%;
|
||||||
|
max-width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-10 {
|
||||||
|
-ms-flex-preferred-size: 83.33333333%;
|
||||||
|
flex-basis: 83.33333333%;
|
||||||
|
max-width: 83.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-11 {
|
||||||
|
-ms-flex-preferred-size: 91.66666667%;
|
||||||
|
flex-basis: 91.66666667%;
|
||||||
|
max-width: 91.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-12 {
|
||||||
|
-ms-flex-preferred-size: 100%;
|
||||||
|
flex-basis: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-offset-0 {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-offset-1 {
|
||||||
|
margin-left: 8.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-offset-2 {
|
||||||
|
margin-left: 16.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-offset-3 {
|
||||||
|
margin-left: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-offset-4 {
|
||||||
|
margin-left: 33.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-offset-5 {
|
||||||
|
margin-left: 41.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-offset-6 {
|
||||||
|
margin-left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-offset-7 {
|
||||||
|
margin-left: 58.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-offset-8 {
|
||||||
|
margin-left: 66.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-offset-9 {
|
||||||
|
margin-left: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-offset-10 {
|
||||||
|
margin-left: 83.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-sm-offset-11 {
|
||||||
|
margin-left: 91.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-sm {
|
||||||
|
-webkit-box-pack: start;
|
||||||
|
-ms-flex-pack: start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-sm {
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end-sm {
|
||||||
|
-webkit-box-pack: end;
|
||||||
|
-ms-flex-pack: end;
|
||||||
|
justify-content: flex-end;
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-sm {
|
||||||
|
-webkit-box-align: start;
|
||||||
|
-ms-flex-align: start;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-sm {
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-sm {
|
||||||
|
-webkit-box-align: end;
|
||||||
|
-ms-flex-align: end;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.around-sm {
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.between-sm {
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-sm {
|
||||||
|
-webkit-box-ordinal-group: 0;
|
||||||
|
-ms-flex-order: -1;
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.last-sm {
|
||||||
|
-webkit-box-ordinal-group: 2;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 64em) {
|
||||||
|
.container {
|
||||||
|
width: 65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md,
|
||||||
|
.col-md-1,
|
||||||
|
.col-md-2,
|
||||||
|
.col-md-3,
|
||||||
|
.col-md-4,
|
||||||
|
.col-md-5,
|
||||||
|
.col-md-6,
|
||||||
|
.col-md-7,
|
||||||
|
.col-md-8,
|
||||||
|
.col-md-9,
|
||||||
|
.col-md-10,
|
||||||
|
.col-md-11,
|
||||||
|
.col-md-12,
|
||||||
|
.col-md-offset-0,
|
||||||
|
.col-md-offset-1,
|
||||||
|
.col-md-offset-2,
|
||||||
|
.col-md-offset-3,
|
||||||
|
.col-md-offset-4,
|
||||||
|
.col-md-offset-5,
|
||||||
|
.col-md-offset-6,
|
||||||
|
.col-md-offset-7,
|
||||||
|
.col-md-offset-8,
|
||||||
|
.col-md-offset-9,
|
||||||
|
.col-md-offset-10,
|
||||||
|
.col-md-offset-11,
|
||||||
|
.col-md-offset-12 {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-ms-flex-positive: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
-ms-flex-preferred-size: 0;
|
||||||
|
flex-basis: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-1 {
|
||||||
|
-ms-flex-preferred-size: 8.33333333%;
|
||||||
|
flex-basis: 8.33333333%;
|
||||||
|
max-width: 8.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-2 {
|
||||||
|
-ms-flex-preferred-size: 16.66666667%;
|
||||||
|
flex-basis: 16.66666667%;
|
||||||
|
max-width: 16.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-3 {
|
||||||
|
-ms-flex-preferred-size: 25%;
|
||||||
|
flex-basis: 25%;
|
||||||
|
max-width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-4 {
|
||||||
|
-ms-flex-preferred-size: 33.33333333%;
|
||||||
|
flex-basis: 33.33333333%;
|
||||||
|
max-width: 33.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-5 {
|
||||||
|
-ms-flex-preferred-size: 41.66666667%;
|
||||||
|
flex-basis: 41.66666667%;
|
||||||
|
max-width: 41.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-6 {
|
||||||
|
-ms-flex-preferred-size: 50%;
|
||||||
|
flex-basis: 50%;
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-7 {
|
||||||
|
-ms-flex-preferred-size: 58.33333333%;
|
||||||
|
flex-basis: 58.33333333%;
|
||||||
|
max-width: 58.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-8 {
|
||||||
|
-ms-flex-preferred-size: 66.66666667%;
|
||||||
|
flex-basis: 66.66666667%;
|
||||||
|
max-width: 66.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-9 {
|
||||||
|
-ms-flex-preferred-size: 75%;
|
||||||
|
flex-basis: 75%;
|
||||||
|
max-width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-10 {
|
||||||
|
-ms-flex-preferred-size: 83.33333333%;
|
||||||
|
flex-basis: 83.33333333%;
|
||||||
|
max-width: 83.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-11 {
|
||||||
|
-ms-flex-preferred-size: 91.66666667%;
|
||||||
|
flex-basis: 91.66666667%;
|
||||||
|
max-width: 91.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-12 {
|
||||||
|
-ms-flex-preferred-size: 100%;
|
||||||
|
flex-basis: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-offset-0 {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-offset-1 {
|
||||||
|
margin-left: 8.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-offset-2 {
|
||||||
|
margin-left: 16.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-offset-3 {
|
||||||
|
margin-left: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-offset-4 {
|
||||||
|
margin-left: 33.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-offset-5 {
|
||||||
|
margin-left: 41.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-offset-6 {
|
||||||
|
margin-left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-offset-7 {
|
||||||
|
margin-left: 58.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-offset-8 {
|
||||||
|
margin-left: 66.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-offset-9 {
|
||||||
|
margin-left: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-offset-10 {
|
||||||
|
margin-left: 83.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-md-offset-11 {
|
||||||
|
margin-left: 91.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-md {
|
||||||
|
-webkit-box-pack: start;
|
||||||
|
-ms-flex-pack: start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-md {
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end-md {
|
||||||
|
-webkit-box-pack: end;
|
||||||
|
-ms-flex-pack: end;
|
||||||
|
justify-content: flex-end;
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-md {
|
||||||
|
-webkit-box-align: start;
|
||||||
|
-ms-flex-align: start;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-md {
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-md {
|
||||||
|
-webkit-box-align: end;
|
||||||
|
-ms-flex-align: end;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.around-md {
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.between-md {
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-md {
|
||||||
|
-webkit-box-ordinal-group: 0;
|
||||||
|
-ms-flex-order: -1;
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.last-md {
|
||||||
|
-webkit-box-ordinal-group: 2;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 75em) {
|
||||||
|
.container {
|
||||||
|
width: 76rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg,
|
||||||
|
.col-lg-1,
|
||||||
|
.col-lg-2,
|
||||||
|
.col-lg-3,
|
||||||
|
.col-lg-4,
|
||||||
|
.col-lg-5,
|
||||||
|
.col-lg-6,
|
||||||
|
.col-lg-7,
|
||||||
|
.col-lg-8,
|
||||||
|
.col-lg-9,
|
||||||
|
.col-lg-10,
|
||||||
|
.col-lg-11,
|
||||||
|
.col-lg-12,
|
||||||
|
.col-lg-offset-0,
|
||||||
|
.col-lg-offset-1,
|
||||||
|
.col-lg-offset-2,
|
||||||
|
.col-lg-offset-3,
|
||||||
|
.col-lg-offset-4,
|
||||||
|
.col-lg-offset-5,
|
||||||
|
.col-lg-offset-6,
|
||||||
|
.col-lg-offset-7,
|
||||||
|
.col-lg-offset-8,
|
||||||
|
.col-lg-offset-9,
|
||||||
|
.col-lg-offset-10,
|
||||||
|
.col-lg-offset-11,
|
||||||
|
.col-lg-offset-12 {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-ms-flex-positive: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
-ms-flex-preferred-size: 0;
|
||||||
|
flex-basis: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-1 {
|
||||||
|
-ms-flex-preferred-size: 8.33333333%;
|
||||||
|
flex-basis: 8.33333333%;
|
||||||
|
max-width: 8.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-2 {
|
||||||
|
-ms-flex-preferred-size: 16.66666667%;
|
||||||
|
flex-basis: 16.66666667%;
|
||||||
|
max-width: 16.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-3 {
|
||||||
|
-ms-flex-preferred-size: 25%;
|
||||||
|
flex-basis: 25%;
|
||||||
|
max-width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-4 {
|
||||||
|
-ms-flex-preferred-size: 33.33333333%;
|
||||||
|
flex-basis: 33.33333333%;
|
||||||
|
max-width: 33.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-5 {
|
||||||
|
-ms-flex-preferred-size: 41.66666667%;
|
||||||
|
flex-basis: 41.66666667%;
|
||||||
|
max-width: 41.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-6 {
|
||||||
|
-ms-flex-preferred-size: 50%;
|
||||||
|
flex-basis: 50%;
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-7 {
|
||||||
|
-ms-flex-preferred-size: 58.33333333%;
|
||||||
|
flex-basis: 58.33333333%;
|
||||||
|
max-width: 58.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-8 {
|
||||||
|
-ms-flex-preferred-size: 66.66666667%;
|
||||||
|
flex-basis: 66.66666667%;
|
||||||
|
max-width: 66.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-9 {
|
||||||
|
-ms-flex-preferred-size: 75%;
|
||||||
|
flex-basis: 75%;
|
||||||
|
max-width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-10 {
|
||||||
|
-ms-flex-preferred-size: 83.33333333%;
|
||||||
|
flex-basis: 83.33333333%;
|
||||||
|
max-width: 83.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-11 {
|
||||||
|
-ms-flex-preferred-size: 91.66666667%;
|
||||||
|
flex-basis: 91.66666667%;
|
||||||
|
max-width: 91.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-12 {
|
||||||
|
-ms-flex-preferred-size: 100%;
|
||||||
|
flex-basis: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-offset-0 {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-offset-1 {
|
||||||
|
margin-left: 8.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-offset-2 {
|
||||||
|
margin-left: 16.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-offset-3 {
|
||||||
|
margin-left: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-offset-4 {
|
||||||
|
margin-left: 33.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-offset-5 {
|
||||||
|
margin-left: 41.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-offset-6 {
|
||||||
|
margin-left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-offset-7 {
|
||||||
|
margin-left: 58.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-offset-8 {
|
||||||
|
margin-left: 66.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-offset-9 {
|
||||||
|
margin-left: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-offset-10 {
|
||||||
|
margin-left: 83.33333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-offset-11 {
|
||||||
|
margin-left: 91.66666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-lg {
|
||||||
|
-webkit-box-pack: start;
|
||||||
|
-ms-flex-pack: start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-lg {
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end-lg {
|
||||||
|
-webkit-box-pack: end;
|
||||||
|
-ms-flex-pack: end;
|
||||||
|
justify-content: flex-end;
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-lg {
|
||||||
|
-webkit-box-align: start;
|
||||||
|
-ms-flex-align: start;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-lg {
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-lg {
|
||||||
|
-webkit-box-align: end;
|
||||||
|
-ms-flex-align: end;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.around-lg {
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.between-lg {
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-lg {
|
||||||
|
-webkit-box-ordinal-group: 0;
|
||||||
|
-ms-flex-order: -1;
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.last-lg {
|
||||||
|
-webkit-box-ordinal-group: 2;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id='root'></div>
|
||||||
|
<script src='/static/bundle.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
65
spikes/graphs-matrix/chartjs/webpack.config.js
Normal file
65
spikes/graphs-matrix/chartjs/webpack.config.js
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
const webpack = require('webpack');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
debug: true,
|
||||||
|
devtool: 'source-map',
|
||||||
|
context: path.join(__dirname, './client'),
|
||||||
|
app: path.join(__dirname, './client/index.js'),
|
||||||
|
entry: [
|
||||||
|
'webpack-dev-server/client?http://localhost:8080',
|
||||||
|
'webpack/hot/only-dev-server',
|
||||||
|
'react-hot-loader/patch',
|
||||||
|
'./index.js'
|
||||||
|
],
|
||||||
|
output: {
|
||||||
|
path: path.join(__dirname, './static'),
|
||||||
|
publicPath: '/static/',
|
||||||
|
filename: 'bundle.js'
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new webpack.HotModuleReplacementPlugin(),
|
||||||
|
new webpack.NoErrorsPlugin(),
|
||||||
|
new webpack.ProvidePlugin({
|
||||||
|
'd3': 'd3'
|
||||||
|
})
|
||||||
|
],
|
||||||
|
module: {
|
||||||
|
loaders: [{
|
||||||
|
test: /js?$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
include: [
|
||||||
|
path.join(__dirname, './client')
|
||||||
|
],
|
||||||
|
loaders: ['babel']
|
||||||
|
}, {
|
||||||
|
test: /\.json?$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
include: [
|
||||||
|
path.join(__dirname, './client')
|
||||||
|
],
|
||||||
|
loaders: ['json']
|
||||||
|
}, {
|
||||||
|
test: /\.css$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
include: [
|
||||||
|
path.join(__dirname, './client')
|
||||||
|
],
|
||||||
|
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const devServer = {
|
||||||
|
hot: true,
|
||||||
|
compress: true,
|
||||||
|
lazy: false,
|
||||||
|
publicPath: config.output.publicPath,
|
||||||
|
historyApiFallback: {
|
||||||
|
index: './static/index.html'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Object.assign({
|
||||||
|
devServer
|
||||||
|
}, config);
|
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "epoch-graphing-spike",
|
"name": "epoch-matrix-spike",
|
||||||
"private": true,
|
"private": true,
|
||||||
"license": "private",
|
"license": "private",
|
||||||
"main": "server/index.js",
|
"main": "server/index.js",
|
||||||
|
Loading…
Reference in New Issue
Block a user