joyent-portal/legacy/spikes/graphs-fe/plotly/client/plotly.js
Sérgio Ramos 8295bd6882 chore: initial lerna setup
this shall be a progressive process
2017-05-25 10:56:50 +01:00

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);