From a7b28aebcfadbe8d0beb4510ac30be143ce57075 Mon Sep 17 00:00:00 2001
From: Pete Harverson <pete@prelert.com>
Date: Thu, 8 Sep 2016 14:51:57 +0100
Subject: [PATCH] Issue #5: Improve styling of labels and lanes when dark theme
 in use.

---
 public/prelert_swimlane_vis.less          | 10 +++++++++-
 public/prelert_swimlane_vis_controller.js | 11 +++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/public/prelert_swimlane_vis.less b/public/prelert_swimlane_vis.less
index cafb9e3..2e6469b 100644
--- a/public/prelert_swimlane_vis.less
+++ b/public/prelert_swimlane_vis.less
@@ -94,5 +94,13 @@
   }
 }
 
-
+.tab-dashboard.theme-dark {
+  .prl-swimlane-vis {
+    color: #cecece;
+  }
+  
+  .flot-tick-label {
+    color: #cecece;
+  }
+}
 
diff --git a/public/prelert_swimlane_vis_controller.js b/public/prelert_swimlane_vis_controller.js
index aa2698b..57112c7 100644
--- a/public/prelert_swimlane_vis_controller.js
+++ b/public/prelert_swimlane_vis_controller.js
@@ -59,7 +59,6 @@ module.controller('PrelertSwimlaneVisController', function($scope, courier) {
   });
 
   $scope.processAggregations = function(aggregations) {
-
     var dataByViewBy = {};
 
     if (aggregations && 
@@ -217,7 +216,7 @@ module.controller('PrelertSwimlaneVisController', function($scope, courier) {
         renderSwimlane();
       }
     });
-
+    
     function renderSwimlane() {
 
       var chartData = scope.metricsData || [];
@@ -274,7 +273,8 @@ module.controller('PrelertSwimlaneVisController', function($scope, courier) {
         // so set the x-axis min to the start of the aggregation interval.
         earliest = moment(bounds.min).startOf(aggInterval.description).valueOf();
         latest = moment(bounds.max).valueOf();
-      }          
+      }       
+      
 
       var options = {
           xaxis: {
@@ -316,6 +316,9 @@ module.controller('PrelertSwimlaneVisController', function($scope, courier) {
           }
       };
 
+      // Set the alternate lane marking color depending on whether Kibana dark theme is being used.
+      var alternateLaneColor = element.closest('.theme-dark').length === 0 ? '#f5f5f5' : "#4a4a4a";
+      
       options.yaxis.max = laneIds.length;
       options.yaxis.ticks = [];
       options.grid.markings = [];
@@ -342,7 +345,7 @@ module.controller('PrelertSwimlaneVisController', function($scope, courier) {
           yaxisMarking = {};
           yaxisMarking.from = i+0.03;
           yaxisMarking.to = i+1;
-          var marking = {yaxis: yaxisMarking, color: "#f5f5f5"};
+          var marking = {yaxis: yaxisMarking, color: alternateLaneColor};
           options.grid.markings.push(marking); 
         }
       });