From ade18a4502a49a80c1f4fada1e19dc0add6bb86d Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 13 Mar 2020 12:01:26 +0100
Subject: [PATCH] Time Scale finished

---
 ChartingSpace/TimeMachine.js   |  2 +-
 ChartingSpace/TimelineChart.js |  1 -
 Scales/RateScale.js            |  5 ++-
 Scales/TimeScale.js            | 58 ++++++++++++++++++++++++++++++----
 4 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/ChartingSpace/TimeMachine.js b/ChartingSpace/TimeMachine.js
index 30c4dc509..1d99bfeeb 100644
--- a/ChartingSpace/TimeMachine.js
+++ b/ChartingSpace/TimeMachine.js
@@ -541,7 +541,7 @@ function newTimeMachine () {
     drawChartsBackground()
     if (thisObject.container.frame.isInViewPort()) {
       if (drawScales === true) {
-        // if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) { thisObject.timeScale.drawBackground() }
+        if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) { thisObject.timeScale.drawBackground() }
         if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawBackground() }
       }
 
diff --git a/ChartingSpace/TimelineChart.js b/ChartingSpace/TimelineChart.js
index 27caf7181..f827726c0 100644
--- a/ChartingSpace/TimelineChart.js
+++ b/ChartingSpace/TimelineChart.js
@@ -379,7 +379,6 @@ function newTimelineChart () {
   function drawBackground () {
     if (thisObject.container.frame.isInViewPort()) {
       if (drawScales === true) {
-        // if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) { thisObject.timeScale.drawBackground() }
         if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawBackground() }
       }
       drawChartsBackground()
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 36141e714..2c728aa11 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -448,7 +448,7 @@ function newRateScale () {
       }
       let ratePoint2 = {
         x: 0,
-        y: TOP_SPACE_HEIGHT + SEPARATION * (i + 1) - FONT_SIZE
+        y: TOP_SPACE_HEIGHT + SEPARATION * (i + 0)
       }
 
       let rate = getRateFromPointAtBrowserCanvas(ratePoint1, rateCalculationsContainer, coordinateSystem)
@@ -474,8 +474,7 @@ function newRateScale () {
     let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
 
     let backgroundColor = UI_COLOR.BLACK
-    let rate = thisObject.rate
-    let labels = scaleLabels(rate)
+    let labels = scaleLabels(thisObject.rate)
 
     drawScaleDisplay(labels[0], labels[1], labels[2], 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
   }
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index c51840b55..1065fffa3 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -12,6 +12,7 @@ function newTimeScale () {
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
+    drawBackground: drawBackground,
     drawForeground: drawForeground,
     getContainer: getContainer,
     initialize: initialize,
@@ -290,6 +291,44 @@ function newTimeScale () {
     }
   }
 
+  function drawBackground () {
+    drawScale()
+  }
+
+  function drawScale () {
+    const SEPARATION = 150
+    const NUMBER_OF_LABELS = Math.trunc(canvas.chartingSpace.viewport.width / SEPARATION)
+    const FONT_SIZE = 15
+
+    for (let i = 0; i <= NUMBER_OF_LABELS; i++) {
+      let timePoint = {
+        x: SEPARATION * (i + 1),
+        y: 0
+      }
+
+      let time = getDateFromPointAtBrowserCanvas(timePoint, limitingContainer, coordinateSystem)
+      let labels = scaleLabels(time)
+      let labelDisplace = labels[1].length * FONT_SIZE * FONT_ASPECT_RATIO
+
+      let timePoint1 = {
+        x: SEPARATION * (i + 1) - labelDisplace,
+        y: 0
+      }
+      let timePoint2 = {
+        x: SEPARATION * (i + 1) + labelDisplace,
+        y: 0
+      }
+
+      let fitPoint1 = thisObject.fitFunction(timePoint1)
+      let fitPoint2 = thisObject.fitFunction(timePoint2)
+
+      if (fitPoint1.x === timePoint1.x && fitPoint2.x === timePoint2.x) {
+        drawLabel(labels[1], 1 / 2, 0, 0, 17, FONT_SIZE, thisObject.container, UI_COLOR.GREY, timePoint1.x, undefined)
+        drawLabel(labels[2], 1 / 2, 0, 20, 27, 9, thisObject.container, UI_COLOR.GREY, timePoint1.x, undefined)
+      }
+    }
+  }
+
   function draw () {
     drawScaleBox()
     autoScaleButton.draw()
@@ -308,17 +347,22 @@ function newTimeScale () {
   function drawScaleBox () {
     if (thisObject.date === undefined) { return }
 
-    let label = thisObject.date.toUTCString()
+    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+
+    let backgroundColor = UI_COLOR.BLACK
+    let labels = scaleLabels(thisObject.date)
+
+    drawScaleDisplay(labels[0], labels[1], labels[2], 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
+  }
+
+  function scaleLabels (date) {
+    let label = date.toUTCString()
     let labelArray = label.split(' ')
     let label1 = thisObject.payload.node.payload.parentNode.name
     let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
     let label3 = labelArray[4]
 
-    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
-
-    let backgroundColor = UI_COLOR.BLACK
-
-    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
+    return [label1, label2, label3]
   }
 }