1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-14 15:20:06 +02:00
copilot/spikes/graphs-fe/plotly/client/plotly.js
Tom Gallacher 904328bfca spikes: plotly customisation
It seems that customising plotly can become difficult once introducing
more unique properties to the style of a graph. In this case changing
the colour of a graph was easy, but adding a border to the top of the
graph only becomes cumberson.
2016-11-08 15:18:07 +00: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);