69 lines
1.1 KiB
JavaScript
69 lines
1.1 KiB
JavaScript
const Plotly = require('react-plotlyjs');
|
|
const ReactRedux = require('react-redux');
|
|
const React = require('react');
|
|
|
|
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: 'bar',
|
|
marker: {
|
|
color: 'rgba(205, 54, 54, 0.3)'
|
|
}
|
|
}, {
|
|
type: 'bar',
|
|
marker: {
|
|
color: 'rgba(54, 74, 205, 0.3)'
|
|
}
|
|
}];
|
|
|
|
const graphs = graphTypes.map((graphType, i) => {
|
|
const data = {
|
|
type: graphType.type,
|
|
mode: graphType.mode,
|
|
marker: graphType.marker,
|
|
x: datatime,
|
|
y: cpu
|
|
};
|
|
|
|
const layout = {
|
|
barmode: graphType.mode
|
|
};
|
|
|
|
return (
|
|
<Plotly
|
|
key={i}
|
|
layout={layout}
|
|
data={[data]}
|
|
/>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
{graphs}
|
|
</div>
|
|
)
|
|
}
|
|
});
|
|
|
|
const mapStateToProps = ({
|
|
data
|
|
}) => {
|
|
return {
|
|
data
|
|
};
|
|
};
|
|
|
|
module.exports = connect(mapStateToProps)(PlotlyGraph);
|