From 9f5fe028124614cf045b33d13e1038f5400c2532 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Mon, 7 Nov 2016 14:35:58 +0000 Subject: [PATCH] integrate metrics-server with plotly --- spikes/graphs-fe/plotly/.storybook/config.js | 5 - spikes/graphs-fe/plotly/client/index.js | 46 ++ .../plotly/client/plotly-graph/index.js | 58 +++ .../plotly-graph}/plot.js | 5 +- spikes/graphs-fe/plotly/client/root.js | 25 ++ spikes/graphs-fe/plotly/client/store.js | 25 ++ spikes/graphs-fe/plotly/lib/data.js | 408 ------------------ spikes/graphs-fe/plotly/package.json | 27 +- spikes/graphs-fe/plotly/server/index.js | 29 ++ spikes/graphs-fe/plotly/server/metric.js | 34 ++ spikes/graphs-fe/plotly/server/plugins.js | 15 + spikes/graphs-fe/plotly/server/routes/home.js | 11 + .../graphs-fe/plotly/server/routes/metrics.js | 18 + .../graphs-fe/plotly/server/routes/static.js | 15 + .../graphs-fe/plotly/server/routes/version.js | 18 + .../plotly/src/components/base/index.css | 103 ----- .../plotly/src/components/base/index.js | 12 - .../plotly/src/components/base/variables.css | 12 - .../plotly/src/components/button/index.js | 9 - .../plotly/src/components/container/index.css | 38 -- .../plotly/src/components/container/index.js | 12 - .../graphs-fe/plotly/src/components/index.js | 6 - .../src/components/plotlyGraph/index.js | 64 --- spikes/graphs-fe/plotly/src/index.js | 1 - spikes/graphs-fe/plotly/src/showcase/index.js | 17 - spikes/graphs-fe/plotly/src/showcase/root.js | 26 -- spikes/graphs-fe/plotly/stories/index.js | 10 - spikes/graphs-fe/plotly/test/index.js | 13 - spikes/graphs-fe/plotly/webpack.config.js | 13 +- 29 files changed, 313 insertions(+), 762 deletions(-) delete mode 100644 spikes/graphs-fe/plotly/.storybook/config.js create mode 100644 spikes/graphs-fe/plotly/client/index.js create mode 100644 spikes/graphs-fe/plotly/client/plotly-graph/index.js rename spikes/graphs-fe/plotly/{src/components/plotlyGraph => client/plotly-graph}/plot.js (96%) create mode 100644 spikes/graphs-fe/plotly/client/root.js create mode 100644 spikes/graphs-fe/plotly/client/store.js delete mode 100644 spikes/graphs-fe/plotly/lib/data.js create mode 100644 spikes/graphs-fe/plotly/server/index.js create mode 100644 spikes/graphs-fe/plotly/server/metric.js create mode 100644 spikes/graphs-fe/plotly/server/plugins.js create mode 100644 spikes/graphs-fe/plotly/server/routes/home.js create mode 100644 spikes/graphs-fe/plotly/server/routes/metrics.js create mode 100644 spikes/graphs-fe/plotly/server/routes/static.js create mode 100644 spikes/graphs-fe/plotly/server/routes/version.js delete mode 100644 spikes/graphs-fe/plotly/src/components/base/index.css delete mode 100644 spikes/graphs-fe/plotly/src/components/base/index.js delete mode 100644 spikes/graphs-fe/plotly/src/components/base/variables.css delete mode 100644 spikes/graphs-fe/plotly/src/components/button/index.js delete mode 100644 spikes/graphs-fe/plotly/src/components/container/index.css delete mode 100644 spikes/graphs-fe/plotly/src/components/container/index.js delete mode 100644 spikes/graphs-fe/plotly/src/components/index.js delete mode 100644 spikes/graphs-fe/plotly/src/components/plotlyGraph/index.js delete mode 100644 spikes/graphs-fe/plotly/src/index.js delete mode 100644 spikes/graphs-fe/plotly/src/showcase/index.js delete mode 100644 spikes/graphs-fe/plotly/src/showcase/root.js delete mode 100644 spikes/graphs-fe/plotly/stories/index.js delete mode 100644 spikes/graphs-fe/plotly/test/index.js 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' }]