From 904328bfcacd156ed4f7d559fc5c8b73aa40cc9e Mon Sep 17 00:00:00 2001
From: Tom Gallacher <tomgallacher23@gmail.com>
Date: Tue, 8 Nov 2016 15:18:07 +0000
Subject: [PATCH] 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.
---
 spikes/graphs-fe/plotly/client/plotly.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/spikes/graphs-fe/plotly/client/plotly.js b/spikes/graphs-fe/plotly/client/plotly.js
index 95df4fe1..5b3a09a9 100644
--- a/spikes/graphs-fe/plotly/client/plotly.js
+++ b/spikes/graphs-fe/plotly/client/plotly.js
@@ -16,23 +16,29 @@ const PlotlyGraph = React.createClass({
     const datatime = data.map((d, i) => i);
 
     const graphTypes = [{
-      type: 'scatter',
-      mode: 'lines+markers'
+      type: 'bar',
+      marker: {
+        color: 'rgba(205, 54, 54, 0.3)'
+      }
     }, {
-      type: 'bar'
+      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