diff --git a/spikes/graphs-fe/plotly/.storybook/config.js b/spikes/graphs-fe/plotly/.storybook/config.js
deleted file mode 100644
index d17d412a..00000000
--- a/spikes/graphs-fe/plotly/.storybook/config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const Storybook = require('@kadira/storybook');
-
-Storybook.configure(() => {
- require('../stories');
-}, module);
diff --git a/spikes/graphs-fe/plotly/client/index.js b/spikes/graphs-fe/plotly/client/index.js
new file mode 100644
index 00000000..e4830cde
--- /dev/null
+++ b/spikes/graphs-fe/plotly/client/index.js
@@ -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(
+ ,
+ document.getElementById('root')
+ );
+};
+
+render();
+
+if (module.hot) {
+ module.hot.accept('./root', render);
+}
diff --git a/spikes/graphs-fe/plotly/client/plotly-graph/index.js b/spikes/graphs-fe/plotly/client/plotly-graph/index.js
new file mode 100644
index 00000000..fcca8076
--- /dev/null
+++ b/spikes/graphs-fe/plotly/client/plotly-graph/index.js
@@ -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 (
+
+ );
+ });
+
+ return (
+
+ {graphs}
+
+ )
+ }
+});
+
+const mapStateToProps = ({
+ data
+}) => {
+ return {
+ data
+ };
+};
+
+module.exports = connect(mapStateToProps)(PlotlyGraph);
diff --git a/spikes/graphs-fe/plotly/src/components/plotlyGraph/plot.js b/spikes/graphs-fe/plotly/client/plotly-graph/plot.js
similarity index 96%
rename from spikes/graphs-fe/plotly/src/components/plotlyGraph/plot.js
rename to spikes/graphs-fe/plotly/client/plotly-graph/plot.js
index 4bd200b5..3dc0a01c 100644
--- a/spikes/graphs-fe/plotly/src/components/plotlyGraph/plot.js
+++ b/spikes/graphs-fe/plotly/client/plotly-graph/plot.js
@@ -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 (
-
+
);
}
});
diff --git a/spikes/graphs-fe/plotly/client/root.js b/spikes/graphs-fe/plotly/client/root.js
new file mode 100644
index 00000000..03c853fe
--- /dev/null
+++ b/spikes/graphs-fe/plotly/client/root.js
@@ -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 (
+
+
+
+
+
+ );
+};
diff --git a/spikes/graphs-fe/plotly/client/store.js b/spikes/graphs-fe/plotly/client/store.js
new file mode 100644
index 00000000..57963740
--- /dev/null
+++ b/spikes/graphs-fe/plotly/client/store.js
@@ -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);
+};
diff --git a/spikes/graphs-fe/plotly/lib/data.js b/spikes/graphs-fe/plotly/lib/data.js
deleted file mode 100644
index 538149df..00000000
--- a/spikes/graphs-fe/plotly/lib/data.js
+++ /dev/null
@@ -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
- ]
- ]
-}
diff --git a/spikes/graphs-fe/plotly/package.json b/spikes/graphs-fe/plotly/package.json
index 40eec3d7..dacd4326 100644
--- a/spikes/graphs-fe/plotly/package.json
+++ b/spikes/graphs-fe/plotly/package.json
@@ -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": [
diff --git a/spikes/graphs-fe/plotly/server/index.js b/spikes/graphs-fe/plotly/server/index.js
new file mode 100644
index 00000000..b2a6a529
--- /dev/null
+++ b/spikes/graphs-fe/plotly/server/index.js
@@ -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}`);
+ });
+ });
+});
diff --git a/spikes/graphs-fe/plotly/server/metric.js b/spikes/graphs-fe/plotly/server/metric.js
new file mode 100644
index 00000000..cf3f1394
--- /dev/null
+++ b/spikes/graphs-fe/plotly/server/metric.js
@@ -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);
+ }
+ }
+});
diff --git a/spikes/graphs-fe/plotly/server/plugins.js b/spikes/graphs-fe/plotly/server/plugins.js
new file mode 100644
index 00000000..84944329
--- /dev/null
+++ b/spikes/graphs-fe/plotly/server/plugins.js
@@ -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')
+ }
+ }
+];
diff --git a/spikes/graphs-fe/plotly/server/routes/home.js b/spikes/graphs-fe/plotly/server/routes/home.js
new file mode 100644
index 00000000..48ead969
--- /dev/null
+++ b/spikes/graphs-fe/plotly/server/routes/home.js
@@ -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'));
+ }
+ });
+};
diff --git a/spikes/graphs-fe/plotly/server/routes/metrics.js b/spikes/graphs-fe/plotly/server/routes/metrics.js
new file mode 100644
index 00000000..e6e1c261
--- /dev/null
+++ b/spikes/graphs-fe/plotly/server/routes/metrics.js
@@ -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();
+ }
+ });
+};
diff --git a/spikes/graphs-fe/plotly/server/routes/static.js b/spikes/graphs-fe/plotly/server/routes/static.js
new file mode 100644
index 00000000..5a41f602
--- /dev/null
+++ b/spikes/graphs-fe/plotly/server/routes/static.js
@@ -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
+ // }
+ // }
+ // });
+};
diff --git a/spikes/graphs-fe/plotly/server/routes/version.js b/spikes/graphs-fe/plotly/server/routes/version.js
new file mode 100644
index 00000000..987747cb
--- /dev/null
+++ b/spikes/graphs-fe/plotly/server/routes/version.js
@@ -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)
+ }
+ });
+};
diff --git a/spikes/graphs-fe/plotly/src/components/base/index.css b/spikes/graphs-fe/plotly/src/components/base/index.css
deleted file mode 100644
index 1eda3b18..00000000
--- a/spikes/graphs-fe/plotly/src/components/base/index.css
+++ /dev/null
@@ -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);
- }
- }
-}
diff --git a/spikes/graphs-fe/plotly/src/components/base/index.js b/spikes/graphs-fe/plotly/src/components/base/index.js
deleted file mode 100644
index a08c8138..00000000
--- a/spikes/graphs-fe/plotly/src/components/base/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const React = require('react');
-const styles = require('./index.css');
-
-module.exports = ({
- children
-}) => {
- return (
-
- {children}
-
- );
-};
diff --git a/spikes/graphs-fe/plotly/src/components/base/variables.css b/spikes/graphs-fe/plotly/src/components/base/variables.css
deleted file mode 100644
index eb2fc224..00000000
--- a/spikes/graphs-fe/plotly/src/components/base/variables.css
+++ /dev/null
@@ -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;
diff --git a/spikes/graphs-fe/plotly/src/components/button/index.js b/spikes/graphs-fe/plotly/src/components/button/index.js
deleted file mode 100644
index 9cd63df1..00000000
--- a/spikes/graphs-fe/plotly/src/components/button/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const React = require('react');
-
-module.exports = (props) => {
- return (
-
- );
-};
diff --git a/spikes/graphs-fe/plotly/src/components/container/index.css b/spikes/graphs-fe/plotly/src/components/container/index.css
deleted file mode 100644
index f2157be6..00000000
--- a/spikes/graphs-fe/plotly/src/components/container/index.css
+++ /dev/null
@@ -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;
- }
-}
\ No newline at end of file
diff --git a/spikes/graphs-fe/plotly/src/components/container/index.js b/spikes/graphs-fe/plotly/src/components/container/index.js
deleted file mode 100644
index b4809480..00000000
--- a/spikes/graphs-fe/plotly/src/components/container/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const React = require('react');
-const styles = require('./index.css');
-
-module.exports = ({
- children
-}) => {
- return (
-
- {children}
-
- );
-};
diff --git a/spikes/graphs-fe/plotly/src/components/index.js b/spikes/graphs-fe/plotly/src/components/index.js
deleted file mode 100644
index 60167bd2..00000000
--- a/spikes/graphs-fe/plotly/src/components/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
- Button: require('./button'),
- Container: require('./container'),
- Base: require('./base'),
- PlotlyGraph: require('./plotlyGraph'),
-};
diff --git a/spikes/graphs-fe/plotly/src/components/plotlyGraph/index.js b/spikes/graphs-fe/plotly/src/components/plotlyGraph/index.js
deleted file mode 100644
index 7a22b970..00000000
--- a/spikes/graphs-fe/plotly/src/components/plotlyGraph/index.js
+++ /dev/null
@@ -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 (
-
- );
- });
-
- return (
-
- {graphs}
-
- )
- }
-})
-
-module.exports = PlotlyGraph;
diff --git a/spikes/graphs-fe/plotly/src/index.js b/spikes/graphs-fe/plotly/src/index.js
deleted file mode 100644
index 94017e32..00000000
--- a/spikes/graphs-fe/plotly/src/index.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./components');
diff --git a/spikes/graphs-fe/plotly/src/showcase/index.js b/spikes/graphs-fe/plotly/src/showcase/index.js
deleted file mode 100644
index af547af9..00000000
--- a/spikes/graphs-fe/plotly/src/showcase/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const ReactDOM = require('react-dom');
-const React = require('react');
-
-const render = () => {
- const Root = require('./root');
-
- ReactDOM.render(
- ,
- document.getElementById('root')
- );
-};
-
-render();
-
-if (module.hot) {
- module.hot.accept('./root', render);
-}
diff --git a/spikes/graphs-fe/plotly/src/showcase/root.js b/spikes/graphs-fe/plotly/src/showcase/root.js
deleted file mode 100644
index 70737b42..00000000
--- a/spikes/graphs-fe/plotly/src/showcase/root.js
+++ /dev/null
@@ -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 (
-
-
-
- Hello
-
-
-
-
- );
-};
diff --git a/spikes/graphs-fe/plotly/stories/index.js b/spikes/graphs-fe/plotly/stories/index.js
deleted file mode 100644
index 3b098180..00000000
--- a/spikes/graphs-fe/plotly/stories/index.js
+++ /dev/null
@@ -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', () => (
-
-));
diff --git a/spikes/graphs-fe/plotly/test/index.js b/spikes/graphs-fe/plotly/test/index.js
deleted file mode 100644
index 62cf17c3..00000000
--- a/spikes/graphs-fe/plotly/test/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const test = require('ava');
-const enzyme = require('enzyme');
-const React = require('react');
-
-const {
- shallow
-} = enzyme;
-
-test('renders without exploding', (t) => {
- const Home = require('../src/client/containers/home');
- const wrapper = shallow();
- t.deepEqual(wrapper.length, 1);
-});
diff --git a/spikes/graphs-fe/plotly/webpack.config.js b/spikes/graphs-fe/plotly/webpack.config.js
index fedf3ddc..7295526a 100644
--- a/spikes/graphs-fe/plotly/webpack.config.js
+++ b/spikes/graphs-fe/plotly/webpack.config.js
@@ -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'
}]