mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
cleanup style and implement windowSize
This commit is contained in:
parent
06c2922a57
commit
e50b68b6ee
@ -6,7 +6,7 @@ const actions = {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
[action.subscription]: takeRight(data, 50)
|
[action.subscription]: takeRight(data, state.windowSize)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -16,22 +16,52 @@ module.exports = React.createClass({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
const bars = this.fromData(this.props.data);
|
const {
|
||||||
|
data = [],
|
||||||
|
bg,
|
||||||
|
border
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const bars = this.fromData(data);
|
||||||
|
|
||||||
this._chart = new Chart(this._refs.component, {
|
this._chart = new Chart(this._refs.component, {
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
display: false
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
display: false
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
},
|
||||||
data: {
|
data: {
|
||||||
labels: buildArray(bars.length).map((v, i) => ''),
|
labels: buildArray(bars.length).map((v, i) => ''),
|
||||||
datasets: [{
|
datasets: [{
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: border,
|
||||||
|
backgroundColor: bg,
|
||||||
data: bars
|
data: bars
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
componentWillReceiveProps: function(nextProps) {
|
componentWillReceiveProps: function(nextProps) {
|
||||||
const bars = this.fromData(this.props.data);
|
const {
|
||||||
|
data = [],
|
||||||
|
bg,
|
||||||
|
border
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const bars = this.fromData(data);
|
||||||
|
|
||||||
this._chart.data.labels = buildArray(bars.length).map((v, i) => '');
|
this._chart.data.labels = buildArray(bars.length).map((v, i) => '');
|
||||||
|
this._chart.data.datasets[0].backgroundColor = bg;
|
||||||
|
this._chart.data.datasets[0].borderColor = border;
|
||||||
this._chart.data.datasets[0].data = bars;
|
this._chart.data.datasets[0].data = bars;
|
||||||
|
|
||||||
this._chart.update(0);
|
this._chart.update(0);
|
||||||
|
@ -18,7 +18,8 @@ client.connect((err) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const store = Store({
|
const store = Store({
|
||||||
ws: client
|
ws: client,
|
||||||
|
windowSize: 20
|
||||||
});
|
});
|
||||||
|
|
||||||
const render = () => {
|
const render = () => {
|
||||||
|
@ -15,6 +15,7 @@ const {
|
|||||||
|
|
||||||
const mapStateToProps = (state, ownProps) => {
|
const mapStateToProps = (state, ownProps) => {
|
||||||
return {
|
return {
|
||||||
|
windowSize: state.windowSize,
|
||||||
data: state[ownProps.id]
|
data: state[ownProps.id]
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
@ -42,24 +43,32 @@ const Graph = connect(
|
|||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
const {
|
const {
|
||||||
data = []
|
data = [],
|
||||||
|
windowSize
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
|
const _data = buildArray(windowSize).map((v, i) => {
|
||||||
|
return data[i] ? data[i] : {
|
||||||
|
cpu: 0,
|
||||||
|
when: new Date().getTime()
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
const median = data.reduce((sum, v) => (sum + v.cpu), 0) / data.length;
|
const median = data.reduce((sum, v) => (sum + v.cpu), 0) / data.length;
|
||||||
|
|
||||||
const bg = median > 50
|
const bg = median > 50
|
||||||
? 'rgba(205, 54, 54, 0.3)'
|
? 'rgba(205, 54, 54, 0.3)'
|
||||||
: 'rgba(54, 74, 205, 0.3)';
|
: 'rgba(54, 74, 205, 0.3)';
|
||||||
|
|
||||||
const shadow = median > 50
|
const border = median > 50
|
||||||
? 'inset 0 1px 0 0 rgba(248, 51, 51, 0.5)'
|
? 'rgba(248, 51, 51, 0.5)'
|
||||||
: 'inset 0 1px 0 0 rgba(54, 73, 205, 0.5)';
|
: 'rgba(54, 73, 205, 0.5)';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Chart
|
<Chart
|
||||||
data={this.props.data}
|
data={_data}
|
||||||
bg={bg}
|
bg={bg}
|
||||||
shadow={shadow}
|
border={border}
|
||||||
median={median}
|
median={median}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -1,12 +1,14 @@
|
|||||||
# ChartJS
|
# ChartJS
|
||||||
|
|
||||||
- [ ] Graphs should maintain aspect ration
|
- [x] Graphs should maintain aspect ration
|
||||||
- [ ] Graphs should match Antonas' first draft designs
|
- [x] Graphs should match Antonas' first draft designs
|
||||||
- [ ] Should have 3 Graphs on each row
|
- [x] Should have 3 Graphs on each row
|
||||||
- [ ] Should be a 3 x 4 matrix of graphs, showing different data
|
- [x] Should be a 3 x 4 matrix of graphs, showing different data
|
||||||
- [ ] Graphs should not jitter, ideally smoothly move across the x axis
|
- [x] Graphs should not jitter, ideally smoothly move across the x axis
|
||||||
- [ ] All graphs should be a bar graph
|
- [x] All graphs should be a bar graph
|
||||||
- [ ] Animations when a graph comes into view
|
- [ ] Animations when a graph comes into view
|
||||||
|
|
||||||
## notes
|
## notes
|
||||||
|
|
||||||
|
- borderSkipped not working: https://github.com/chartjs/Chart.js/issues/3293
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@ module.exports = (server) => ({
|
|||||||
when: new Date().getTime(),
|
when: new Date().getTime(),
|
||||||
cpu: Math.random() * 100
|
cpu: Math.random() * 100
|
||||||
});
|
});
|
||||||
}, 100);
|
}, 32);
|
||||||
|
|
||||||
cdm[id] = {
|
cdm[id] = {
|
||||||
interval,
|
interval,
|
||||||
|
Loading…
Reference in New Issue
Block a user