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

69 lines
1.1 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: 'bar',
marker: {
color: 'rgba(205, 54, 54, 0.3)'
}
2016-11-07 16:35:58 +02:00
}, {
type: 'bar',
marker: {
color: 'rgba(54, 74, 205, 0.3)'
}
2016-11-07 16:35:58 +02:00
}];
const graphs = graphTypes.map((graphType, i) => {
2016-11-07 17:17:19 +02:00
const data = {
type: graphType.type,
mode: graphType.mode,
marker: graphType.marker,
2016-11-07 17:17:19 +02:00
x: datatime,
y: cpu
};
const layout = {
barmode: graphType.mode
};
2016-11-07 17:17:19 +02:00
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);