From e50b68b6ee54c6d09f2fc20b74625fee578b312f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Wed, 9 Nov 2016 15:00:30 +0000 Subject: [PATCH] cleanup style and implement windowSize --- .../graphs-matrix/chartjs/client/actions.js | 2 +- spikes/graphs-matrix/chartjs/client/chart.js | 34 +++++++++++++++++-- spikes/graphs-matrix/chartjs/client/index.js | 3 +- spikes/graphs-matrix/chartjs/client/matrix.js | 21 ++++++++---- spikes/graphs-matrix/chartjs/readme.md | 14 ++++---- spikes/graphs-matrix/chartjs/server/metric.js | 2 +- 6 files changed, 59 insertions(+), 17 deletions(-) diff --git a/spikes/graphs-matrix/chartjs/client/actions.js b/spikes/graphs-matrix/chartjs/client/actions.js index 4136fe1e..52f0c0b7 100644 --- a/spikes/graphs-matrix/chartjs/client/actions.js +++ b/spikes/graphs-matrix/chartjs/client/actions.js @@ -6,7 +6,7 @@ const actions = { return { ...state, - [action.subscription]: takeRight(data, 50) + [action.subscription]: takeRight(data, state.windowSize) }; } }; diff --git a/spikes/graphs-matrix/chartjs/client/chart.js b/spikes/graphs-matrix/chartjs/client/chart.js index 1aaf8c66..1e64842d 100644 --- a/spikes/graphs-matrix/chartjs/client/chart.js +++ b/spikes/graphs-matrix/chartjs/client/chart.js @@ -16,22 +16,52 @@ module.exports = React.createClass({ }); }, 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, { type: 'bar', + options: { + scales: { + xAxes: [{ + display: false + }], + yAxes: [{ + display: false + }] + }, + legend: { + display: false + } + }, data: { labels: buildArray(bars.length).map((v, i) => ''), datasets: [{ + borderWidth: 1, + borderColor: border, + backgroundColor: bg, data: bars }] } }); }, 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.datasets[0].backgroundColor = bg; + this._chart.data.datasets[0].borderColor = border; this._chart.data.datasets[0].data = bars; this._chart.update(0); diff --git a/spikes/graphs-matrix/chartjs/client/index.js b/spikes/graphs-matrix/chartjs/client/index.js index 34d1748c..cc89c799 100644 --- a/spikes/graphs-matrix/chartjs/client/index.js +++ b/spikes/graphs-matrix/chartjs/client/index.js @@ -18,7 +18,8 @@ client.connect((err) => { }); const store = Store({ - ws: client + ws: client, + windowSize: 20 }); const render = () => { diff --git a/spikes/graphs-matrix/chartjs/client/matrix.js b/spikes/graphs-matrix/chartjs/client/matrix.js index 84be991e..af1eb755 100644 --- a/spikes/graphs-matrix/chartjs/client/matrix.js +++ b/spikes/graphs-matrix/chartjs/client/matrix.js @@ -15,6 +15,7 @@ const { const mapStateToProps = (state, ownProps) => { return { + windowSize: state.windowSize, data: state[ownProps.id] }; }; @@ -42,24 +43,32 @@ const Graph = connect( }, render: function() { const { - data = [] + data = [], + windowSize } = 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 bg = median > 50 ? 'rgba(205, 54, 54, 0.3)' : 'rgba(54, 74, 205, 0.3)'; - const shadow = median > 50 - ? 'inset 0 1px 0 0 rgba(248, 51, 51, 0.5)' - : 'inset 0 1px 0 0 rgba(54, 73, 205, 0.5)'; + const border = median > 50 + ? 'rgba(248, 51, 51, 0.5)' + : 'rgba(54, 73, 205, 0.5)'; return ( ); diff --git a/spikes/graphs-matrix/chartjs/readme.md b/spikes/graphs-matrix/chartjs/readme.md index ae5ad210..f874b364 100644 --- a/spikes/graphs-matrix/chartjs/readme.md +++ b/spikes/graphs-matrix/chartjs/readme.md @@ -1,12 +1,14 @@ # ChartJS - - [ ] Graphs should maintain aspect ration - - [ ] Graphs should match Antonas' first draft designs - - [ ] Should have 3 Graphs on each row - - [ ] Should be a 3 x 4 matrix of graphs, showing different data - - [ ] Graphs should not jitter, ideally smoothly move across the x axis - - [ ] All graphs should be a bar graph + - [x] Graphs should maintain aspect ration + - [x] Graphs should match Antonas' first draft designs + - [x] Should have 3 Graphs on each row + - [x] Should be a 3 x 4 matrix of graphs, showing different data + - [x] Graphs should not jitter, ideally smoothly move across the x axis + - [x] All graphs should be a bar graph - [ ] Animations when a graph comes into view ## notes + - borderSkipped not working: https://github.com/chartjs/Chart.js/issues/3293 + diff --git a/spikes/graphs-matrix/chartjs/server/metric.js b/spikes/graphs-matrix/chartjs/server/metric.js index 24015f70..62ef4a8e 100644 --- a/spikes/graphs-matrix/chartjs/server/metric.js +++ b/spikes/graphs-matrix/chartjs/server/metric.js @@ -19,7 +19,7 @@ module.exports = (server) => ({ when: new Date().getTime(), cpu: Math.random() * 100 }); - }, 100); + }, 32); cdm[id] = { interval,