From 5b5f674d42275c32777545a4e40c75e1fdf95386 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 11 Jun 2018 13:46:06 +0200
Subject: [PATCH] Scales background introduced

---
 ChartGrid.js | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/ChartGrid.js b/ChartGrid.js
index f4a20ee26..1c7e0284f 100644
--- a/ChartGrid.js
+++ b/ChartGrid.js
@@ -8,6 +8,9 @@
 
     function draw(container, timeLineCoordinateSystem) {
 
+        rightScaleBackground();
+        leftScaleBackground();
+
         let periods = [];
         let boxes = [];
         let labels = [];
@@ -493,7 +496,9 @@
                     rightScale();
                     leftScale();
 
-                    function rightScale() {
+                    function rightScale() {                     
+
+                        /* And now the scale. */
 
                         let fontSize = 10;
 
@@ -672,5 +677,43 @@
             browserCanvasContext.closePath();
             browserCanvasContext.fill();
         }
+
+        function rightScaleBackground() {
+
+            const RIGHT_MARGIN = 50;
+
+            /* We will paint some transparent background here. */
+
+            let opacity = "0.95";
+
+            browserCanvasContext.beginPath();
+
+            browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, RIGHT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y);
+            browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')';
+
+            browserCanvasContext.closePath();
+
+            browserCanvasContext.fill();
+
+        }
+
+        function leftScaleBackground() {
+
+            const LEFT_MARGIN = 50;
+
+            /* We will paint some transparent background here. */
+
+            let opacity = "0.95";
+
+            browserCanvasContext.beginPath();
+
+            browserCanvasContext.rect(0, viewPort.visibleArea.topRight.y, LEFT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y);
+            browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')';
+
+            browserCanvasContext.closePath();
+
+            browserCanvasContext.fill();
+
+        }
     }
 }