use react-plotly
This commit is contained in:
parent
9f5fe02812
commit
b46c467ce1
@ -1,48 +0,0 @@
|
||||
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} />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Plot;
|
@ -1,6 +1,6 @@
|
||||
const Plotly = require('react-plotlyjs');
|
||||
const ReactRedux = require('react-redux');
|
||||
const React = require('react');
|
||||
const Plot = require('./plot');
|
||||
|
||||
const {
|
||||
connect
|
||||
@ -18,23 +18,27 @@ const PlotlyGraph = React.createClass({
|
||||
const graphTypes = [{
|
||||
type: 'scatter',
|
||||
mode: 'lines+markers'
|
||||
}, {
|
||||
type: 'scatter',
|
||||
mode: 'line'
|
||||
}, {
|
||||
type: 'bar'
|
||||
}];
|
||||
|
||||
const graphs = graphTypes.map((graphType, i) => {
|
||||
console.log(cpu, datatime);
|
||||
const data = {
|
||||
type: graphType.type,
|
||||
mode: graphType.mode,
|
||||
x: datatime,
|
||||
y: cpu
|
||||
};
|
||||
|
||||
const layout = {
|
||||
barmode: graphType.mode
|
||||
}
|
||||
|
||||
return (
|
||||
<Plot
|
||||
<Plotly
|
||||
key={i}
|
||||
name={`plot-${i}`}
|
||||
xData={datatime}
|
||||
yData={cpu}
|
||||
type={graphType.type}
|
||||
mode={graphType.mode}
|
||||
layout={layout}
|
||||
data={[data]}
|
||||
/>
|
||||
);
|
||||
});
|
@ -1,7 +1,7 @@
|
||||
const React = require('react');
|
||||
const ReactHotLoader = require('react-hot-loader');
|
||||
const ReactRedux = require('react-redux');
|
||||
const PlotlyGraph = require('./plotly-graph');
|
||||
const PlotlyGraph = require('./plotly');
|
||||
|
||||
|
||||
const {
|
||||
|
@ -16,7 +16,7 @@ const reducer = (state, action) => {
|
||||
|
||||
return {
|
||||
...state,
|
||||
data: takeRight(data, 10)
|
||||
data: takeRight(data, 50)
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -22,13 +22,13 @@
|
||||
"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",
|
||||
"postcss-nested": "^1.0.0",
|
||||
"react": "^15.3.2",
|
||||
"react-dom": "^15.3.2",
|
||||
"react-hot-loader": "^3.0.0-beta.6",
|
||||
"react-plotlyjs": "^0.3.7",
|
||||
"react-redux": "^4.4.5",
|
||||
"redux": "^3.6.0",
|
||||
"require-dir": "^0.3.1",
|
||||
|
@ -19,7 +19,7 @@ module.exports = (server) => ({
|
||||
when: new Date().getTime(),
|
||||
cpu: Math.random() * 100
|
||||
});
|
||||
}, 1000);
|
||||
}, 400);
|
||||
|
||||
cdm[id] = {
|
||||
interval,
|
||||
|
Loading…
Reference in New Issue
Block a user