joyent-portal/spikes/graphs-fe/plotly/client/plotly.js

63 lines
1.0 KiB
JavaScript
Raw Normal View History

2016-11-07 17:17:19 +02:00
const Plotly = require('react-plotlyjs');
2016-11-07 16:35:58 +02:00
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: 'scatter',
mode: 'lines+markers'
}, {
type: 'bar'
}];
const graphs = graphTypes.map((graphType, i) => {
2016-11-07 17:17:19 +02:00
const data = {
type: graphType.type,
mode: graphType.mode,
x: datatime,
y: cpu
};
const layout = {
barmode: graphType.mode
}
2016-11-07 16:35:58 +02:00
return (
2016-11-07 17:17:19 +02:00
<Plotly
2016-11-07 16:35:58 +02:00
key={i}
2016-11-07 17:17:19 +02:00
layout={layout}
data={[data]}
2016-11-07 16:35:58 +02:00
/>
);
});
return (
<div>
{graphs}
</div>
)
}
});
const mapStateToProps = ({
data
}) => {
return {
data
};
};
module.exports = connect(mapStateToProps)(PlotlyGraph);