From e50b68b6ee54c6d09f2fc20b74625fee578b312f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
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 (
       <Chart
-        data={this.props.data}
+        data={_data}
         bg={bg}
-        shadow={shadow}
+        border={border}
         median={median}
       />
     );
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,