Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding in graphs and looping ability

Browse Source
This commit is contained in:
Alex Windett 2016-11-03 14:06:25 +00:00 committed by Sérgio Ramos
parent 460e8a3a74
commit 3fbb873235
7 changed files with 8333 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

424
spikes/graphs-fe/plotly/lib/data.js
View File

@ -1,18 +1,408 @@
const data = [
{
type: 'scatter', // all "scatter" attributes: https://plot.ly/javascript/reference/#scatter
x: [1, 2, 3], // more about "x": #scatter-x
y: [6, 2, 3], // #scatter-y
marker: { // marker is an object, valid marker keys: #scatter-marker
color: 'rgb(16, 32, 77)' // more about "marker.color": #scatter-marker-color
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
]
]
}
},
{
type: 'bar', // all "bar" chart attributes: #bar
x: [1, 2, 3], // more about "x": #bar-x
y: [6, 2, 3], // #bar-y
name: 'bar chart example' // #bar-name
}
];
module.exports = data;

2
spikes/graphs-fe/plotly/package.json
View File

@ -25,6 +25,7 @@
"babel-preset-react-hmre": "^1.1.1",
"babel-runtime": "^6.11.6",
"css-loader": "^0.25.0",
"plotly.js": "^1.1.0",
"postcss-loader": "^1.0.0",
"postcss-modules-values": "^1.2.2",
"postcss-nested": "^1.0.0",
@ -47,6 +48,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"
},

63
spikes/graphs-fe/plotly/src/components/graph/index.js Normal file
View File

@ -0,0 +1,63 @@
const React = require('react');
const Plot = require('./plot');
const localData = require('../../../lib/data');
const Graph = 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: 'markers'
},
{
type: 'scatter',
mode: 'line'
},
{
type: 'bar'
}
]
const graphs = graphTypes.map( (graphType, i) => {
return (
<Plot
name={`plot-${i}`}
xData={this.state.datatime}
yData={this.state.cpu}
type={graphType.type}
mode={graphType.mode}
/>
);
});
return (
<div>
{graphs}
</div>
)
}
})
module.exports = Graph;

51
spikes/graphs-fe/plotly/src/components/graph/plot.js Normal file
View File

@ -0,0 +1,51 @@
const React = require('react');
const Plotly = require('plotly.js');
const Plot = React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired,
xdata: React.PropTypes.object,
ydata: React.PropTypes.object,
type: React.PropTypes.string,
mode: React.PropTypes.string,
},
componentDidMount: function() {
const {
name,
xData,
yData,
type = 'scatter',
mode = 'markers'
} = this.props;
Plotly.newPlot(name, [{
x: xData,
y: yData,
mode,
type
}], {
margin: {
t: 0, r: 0, l: 30
},
xaxis: {
gridcolor: 'transparent'
}
}, {
displayModeBar: false
});
},
render: function() {
const {
name
} = this.props
return (
<div id={name}></div>
);
}
});
module.exports = Plot;

3
spikes/graphs-fe/plotly/src/components/index.js
View File

@ -1,5 +1,6 @@
module.exports = {
Button: require('./button'),
Container: require('./container'),
Base: require('./base')
Base: require('./base'),
Graph: require('./graph'),
};

5
spikes/graphs-fe/plotly/src/showcase/root.js
View File

@ -4,7 +4,8 @@ const ReactHotLoader = require('react-hot-loader');
const {
Button,
Container,
Base
Base,
Graph
} = require('../');
const {
@ -17,7 +18,7 @@ module.exports = () => {
<Base>
<Container>
<p>Hello</p>
<Button>Hello</Button>
<Graph />
</Container>
</Base>
</AppContainer>

7804
spikes/graphs-fe/plotly/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff