From f2fbc10520606c07a09f37899cd316a161a4685f Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 16 May 2019 07:44:39 +0200
Subject: [PATCH 1/9] Time Period Display Improved

---
 Scales/TimePeriodScale.js | 92 ++++++++++++++++++++-------------------
 1 file changed, 48 insertions(+), 44 deletions(-)

diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js
index 705e4fafe..5c57b5430 100644
--- a/Scales/TimePeriodScale.js
+++ b/Scales/TimePeriodScale.js
@@ -129,6 +129,32 @@ function newTimePeriodScale () {
     }
   }
 
+  function saveObjectState () {
+    objectStorage.filePeriodIndex = filePeriodIndex
+    objectStorage.timePeriodIndex = timePeriodIndex
+    window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage))
+  }
+
+  function readObjectState () {
+    let objectStorageString = window.localStorage.getItem(MODULE_NAME)
+    if (objectStorageString !== null && objectStorageString !== '') {
+      objectStorage = JSON.parse(objectStorageString)
+      filePeriodIndex = objectStorage.filePeriodIndex
+      timePeriodIndex = objectStorage.timePeriodIndex
+    }
+  }
+
+  function newTimePeriod () {
+    let timePeriodArray = timePeriodsMasterArray[filePeriodIndex]
+    thisObject.timePeriod = timePeriodArray[timePeriodIndex][0]
+    timePeriodLabel = timePeriodArray[timePeriodIndex][1]
+
+    let event = {}
+    event.timePeriod = thisObject.timePeriod
+    thisObject.container.eventHandler.raiseEvent('Time Period Changed', event)
+    window.localStorage.setItem('Current Time Period', JSON.stringify({filePeriodIndex: filePeriodIndex, timePeriodIndex: timePeriodIndex}))
+  }
+
   function draw () {
     if (visible === false) { return }
 
@@ -214,41 +240,45 @@ to be visible at the top of the viewPort. */
     let label = timePeriodLabel.split('-')
     let label1 = label[0]
     let label2 = label[1].toUpperCase()
-    let fontSize1 = 25
+    let fontSize1 = 20
     let fontSize2 = 10
 
   /* We draw the circle container */
 
     const RED_LINE_HIGHT = 5
-    const RADIUS = 25
     const OPACITY = 1
 
     let centerPoint = {
       x: mouse.position.x,
-      y: point1.y + viewPort.margins.BOTTOM - 5
+      y: point1.y + viewPort.margins.BOTTOM
     }
 
-    browserCanvasContext.beginPath()
-    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI)
-    browserCanvasContext.closePath()
+    let container = newContainer()
+    container.initialize('Visible Time Scale')
+    container.frame.width = 60
+    container.frame.height = 25
+    container.frame.position.x = centerPoint.x - container.frame.width / 2
+    container.frame.position.y = centerPoint.y - container.frame.height / 2
 
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
-    browserCanvasContext.fill()
+    let params = {
+      cornerRadius: 3,
+      lineWidth: RED_LINE_HIGHT,
+      container: container,
+      borderColor: UI_COLOR.RUSTED_RED,
+      castShadow: false,
+      backgroundColor: UI_COLOR.DARK,
+      opacity: OPACITY
+    }
 
-    browserCanvasContext.beginPath()
-    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS, 0.0 * Math.PI, 2.0 * Math.PI)
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
-    browserCanvasContext.fill()
+    roundedCornersBackground(params)
 
     /* Place the Text */
 
     let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO
 
     let labelPoint1 = {
-      x: mouse.position.x - xOffset1 / 2 - 3,
-      y: point1.y + viewPort.margins.BOTTOM
+      x: mouse.position.x - xOffset1 / 2 - 14,
+      y: point1.y + viewPort.margins.BOTTOM + 6
     }
 
     browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY
@@ -259,8 +289,8 @@ to be visible at the top of the viewPort. */
     let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO
 
     let labelPoint2 = {
-      x: mouse.position.x - xOffset2 / 2 - 3,
-      y: point1.y + viewPort.margins.BOTTOM + fontSize2
+      x: mouse.position.x - xOffset2 / 2 - 3 + 14,
+      y: point1.y + viewPort.margins.BOTTOM + 6
     }
 
     browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY
@@ -268,31 +298,5 @@ to be visible at the top of the viewPort. */
 
     browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y)
   }
-
-  function saveObjectState () {
-    objectStorage.filePeriodIndex = filePeriodIndex
-    objectStorage.timePeriodIndex = timePeriodIndex
-    window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage))
-  }
-
-  function readObjectState () {
-    let objectStorageString = window.localStorage.getItem(MODULE_NAME)
-    if (objectStorageString !== null && objectStorageString !== '') {
-      objectStorage = JSON.parse(objectStorageString)
-      filePeriodIndex = objectStorage.filePeriodIndex
-      timePeriodIndex = objectStorage.timePeriodIndex
-    }
-  }
-
-  function newTimePeriod () {
-    let timePeriodArray = timePeriodsMasterArray[filePeriodIndex]
-    thisObject.timePeriod = timePeriodArray[timePeriodIndex][0]
-    timePeriodLabel = timePeriodArray[timePeriodIndex][1]
-
-    let event = {}
-    event.timePeriod = thisObject.timePeriod
-    thisObject.container.eventHandler.raiseEvent('Time Period Changed', event)
-    window.localStorage.setItem('Current Time Period', JSON.stringify({filePeriodIndex: filePeriodIndex, timePeriodIndex: timePeriodIndex}))
-  }
 }
 

From c4eb7dbdac4ee948ebbd09c9404238db2e0e5479 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 16 May 2019 08:24:11 +0200
Subject: [PATCH 2/9] time scale upgraded

---
 Scales/TimePeriodScale.js |  2 -
 Scales/TimeScale.js       | 80 +++++++++++++++++++++++++--------------
 2 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js
index 5c57b5430..7ffce22f1 100644
--- a/Scales/TimePeriodScale.js
+++ b/Scales/TimePeriodScale.js
@@ -243,8 +243,6 @@ to be visible at the top of the viewPort. */
     let fontSize1 = 20
     let fontSize2 = 10
 
-  /* We draw the circle container */
-
     const RED_LINE_HIGHT = 5
     const OPACITY = 1
 
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 631cdb697..721fc4e10 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -164,21 +164,6 @@ to be visible at the top of the viewPort. */
       point4.y = point2.y + MIN_HEIGHT
     }
 
-    /* Lets start the drawing. */
-/*
-    browserCanvasContext.beginPath()
-    browserCanvasContext.moveTo(point1.x, point1.y - viewPort.margins.TOP)
-    browserCanvasContext.lineTo(point2.x, point2.y - viewPort.margins.TOP)
-    browserCanvasContext.lineTo(point3.x, point3.y - viewPort.margins.TOP)
-    browserCanvasContext.lineTo(point4.x, point4.y - viewPort.margins.TOP)
-    browserCanvasContext.lineTo(point1.x, point1.y - viewPort.margins.TOP)
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)'
-    browserCanvasContext.lineWidth = 1
-    browserCanvasContext.stroke()
-*/
-
     thisObject.container.frame.position.x = point1.x
     thisObject.container.frame.position.y = point1.y
 
@@ -194,28 +179,65 @@ to be visible at the top of the viewPort. */
     date = new Date(date)
 
     let label = date.toUTCString()
-    let fontSize = 10
+    let labelArray = label.split(' ')
+    let label1 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
+    let label2 = labelArray[4]
 
-    let xOffset = label.length * fontSize * FONT_ASPECT_RATIO
+    let fontSize1 = 20
+    let fontSize2 = 10
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)'
+    const RED_LINE_HIGHT = 5
+    const OPACITY = 1
 
-    if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return }
+    let centerPoint = {
+      x: mouse.position.x,
+      y: point1.y + viewPort.margins.BOTTOM
+    }
 
-    browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 7)
+    let container = newContainer()
+    container.initialize('Visible Time Scale')
+    container.frame.width = 190
+    container.frame.height = 25
+    container.frame.position.x = centerPoint.x - container.frame.width / 2
+    container.frame.position.y = centerPoint.y - container.frame.height / 2
 
-    browserCanvasContext.beginPath()
+    let params = {
+      cornerRadius: 3,
+      lineWidth: RED_LINE_HIGHT,
+      container: container,
+      borderColor: UI_COLOR.RUSTED_RED,
+      castShadow: false,
+      backgroundColor: UI_COLOR.DARK,
+      opacity: OPACITY
+    }
 
-    browserCanvasContext.moveTo(point.x, point1.y)
-    browserCanvasContext.lineTo(point.x, point5.y)
+    roundedCornersBackground(params)
 
-    browserCanvasContext.closePath()
+    /* Place the Text */
 
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)'
-    browserCanvasContext.lineWidth = 0.2
-    browserCanvasContext.setLineDash([1, 5])
-    browserCanvasContext.stroke()
+    let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO
+
+    let labelPoint1 = {
+      x: mouse.position.x - xOffset1 + 15,
+      y: point1.y + viewPort.margins.BOTTOM + 6
+    }
+
+    browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+
+    browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y)
+
+    let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO
+
+    let labelPoint2 = {
+      x: mouse.position.x - xOffset2 / 2 - 3 + 70,
+      y: point1.y + viewPort.margins.BOTTOM + 6
+    }
+
+    browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+
+    browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y)
   }
 }
 

From b6623191a234d2be28af53d4b6a2e13d9fa3c1f0 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 16 May 2019 10:58:21 +0200
Subject: [PATCH 3/9] timeScale working again

---
 ChartsSpace/TimeMachine.js | 101 +++++++++++++++++++-----
 Scales/RateScale.js        |  29 +++----
 Scales/TimePeriodScale.js  |   8 +-
 Scales/TimeScale.js        | 157 ++++++-------------------------------
 Spaces/ChartSpace.js       |  15 ++--
 5 files changed, 136 insertions(+), 174 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index b511509aa..a46e5d0c6 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -16,6 +16,8 @@ function newTimeMachine () {
 
   let thisObject = {
     container: undefined,
+    timeScale: undefined,
+    rateScale: undefined,
     charts: [],
     physics: physics,
     drawBackground: drawBackground,
@@ -40,11 +42,15 @@ function newTimeMachine () {
                                    // ... also to request a reference to the object for the cases we need it.
   const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5
 
-  let timeScale
-  let rateScale
-
   let timeLineCoordinateSystem = newTimeLineCoordinateSystem()
 
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+
   return thisObject
 
   function finalize () {
@@ -52,6 +58,14 @@ function newTimeMachine () {
       let chart = thisObject.charts[i]
       chart.finalize()
     }
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
+
+    thisObject.timeScale.finalize()
+    thisObject.timeScale = undefined
+    thisObject.rateScale.finalize()
+    thisObject.rateScale = undefined
   }
 
   function initialize (callBackFunction) {
@@ -97,27 +111,39 @@ function newTimeMachine () {
 
      /* Each Time Machine has a Time Scale and a Right Scale. */
 
-      timeScale = newTimeScale()
-      timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
-      timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
+      thisObject.timeScale = newTimeScale()
+
+      thisObject.timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
         thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
       })
 
-      timeScale.initialize(timeLineCoordinateSystem)
+      thisObject.timeScale.initialize()
 
-      rateScale = newRateScale()
-      rateScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
-      rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
+      thisObject.rateScale = newRateScale()
+
+      thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
         thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
       })
 
-      rateScale.initialize(timeLineCoordinateSystem)
+      thisObject.rateScale.initialize(timeLineCoordinateSystem)
+
+      thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
 
       initializeTheRest()
     }
 
+    function onMouseOver (event) {
+      thisObject.timeScale.visible = true
+      thisObject.rateScale.visible = true
+
+      mouse.position.x = event.x
+      mouse.position.y = event.y
+
+      thisObject.rateScale.setMousePosition(event)
+    }
+
     function initializeTheRest () {
       let leftToInitialize = SUPPORTED_EXCHANGES.length * SUPPORTED_MARKETS.length - 1 // The default exchange and market was already initialized.
       let alreadyInitialized = 0
@@ -175,8 +201,8 @@ function newTimeMachine () {
   function getContainer (point, purpose) {
     let container
 
-    if (timeScale !== undefined) {
-      container = timeScale.getContainer(point)
+    if (thisObject.timeScale !== undefined) {
+      container = thisObject.timeScale.getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
@@ -184,8 +210,8 @@ function newTimeMachine () {
       }
     }
 
-    if (rateScale !== undefined) {
-      container = rateScale.getContainer(point)
+    if (thisObject.rateScale !== undefined) {
+      container = thisObject.rateScale.getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
@@ -209,6 +235,8 @@ function newTimeMachine () {
     } else {
       if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) {
         thisObject.container.eventHandler.raiseEvent('onMouseNotOver')
+        thisObject.timeScale.visible = false
+        thisObject.rateScale.visible = false
       }
       return
     }
@@ -220,16 +248,50 @@ function newTimeMachine () {
   }
 
   function thisObjectPhysics () {
+    /* Mouse Position Date Calculation */
 
+    let datePoint = {
+      x: mouse.position.x,
+      y: 0
+    }
+
+    let mouseDate = getDateFromPoint(datePoint, thisObject.container, timeLineCoordinateSystem)
+
+    thisObject.timeScale.date = new Date(mouseDate)
+
+    /* Screen Corner Date Calculation */
+
+    let point = {
+      x: 0,
+      y: 0
+    }
+
+    let cornerDate = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem)
+    cornerDate = new Date(cornerDate)
+    window.localStorage.setItem('Date @ Screen Corner', cornerDate.toUTCString())
   }
 
   function childrenPhysics () {
-    timeScale.physics()
-    rateScale.physics()
+    thisObject.timeScale.physics()
+    thisObject.rateScale.physics()
     for (let i = 0; i < thisObject.charts.length; i++) {
       let chart = thisObject.charts[i]
       chart.physics()
     }
+
+/* timeScale Positioning */
+
+    thisObject.timeScale.container.frame.position.x = mouse.position.x - thisObject.timeScale.container.frame.width / 2
+
+    let point = {
+      x: 0,
+      y: thisObject.container.frame.height / 10
+    }
+
+    point = transformThisPoint(point, thisObject.container.frame.container)
+    point = viewPort.fitIntoVisibleArea(point)
+
+    thisObject.timeScale.container.frame.position.y = point.y + 6
   }
 
   function drawBackground () {
@@ -250,8 +312,8 @@ function newTimeMachine () {
         chart.draw()
       }
 
-      if (timeScale !== undefined) { timeScale.draw() }
-      if (rateScale !== undefined) { rateScale.draw() }
+      if (thisObject.timeScale !== undefined) { thisObject.timeScale.draw() }
+      // if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() }
 
      // thisObject.container.frame.draw(false, true, false)
     }
@@ -291,3 +353,4 @@ function newTimeMachine () {
       )
   }
 }
+
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 4d5a08252..e57f9f746 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -4,10 +4,13 @@ function newRateScale () {
   let thisObject = {
     heightPercentage: 100,
     container: undefined,
+    visible: true,
+    setMousePosition: setMousePosition,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
-    initialize: initialize
+    initialize: initialize,
+    finalize: finalize
   }
 
   const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50
@@ -34,11 +37,15 @@ function newRateScale () {
     }
   }
 
-  let visible = true
   let timeLineCoordinateSystem
 
   return thisObject
 
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+  }
+
   function initialize (pTimeLineCoordinateSystem) {
     timeLineCoordinateSystem = pTimeLineCoordinateSystem
 
@@ -54,17 +61,11 @@ function newRateScale () {
     let event = {}
     event.heightPercentage = thisObject.heightPercentage
     thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event)
+  }
 
-    thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
-      mouse.position.x = event.x
-      mouse.position.y = event.y
-
-      visible = true
-    })
-
-    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) {
-      visible = false
-    })
+  function setMousePosition (point) {
+    mouse.position.x = point.x
+    mouse.position.y = point.y
   }
 
   function onMouseWheel (event) {
@@ -107,10 +108,10 @@ function newRateScale () {
   }
 
   function draw () {
-    if (visible === false) { return }
+    if (thisObject.visible === false) { return }
 
 /* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still
-to be visible at the top of the viewPort. */
+to be thisObject.visible at the top of the viewPort. */
 
     let frame = thisObject.container.parentContainer.frame
     let point1
diff --git a/Scales/TimePeriodScale.js b/Scales/TimePeriodScale.js
index 7ffce22f1..25d94cf15 100644
--- a/Scales/TimePeriodScale.js
+++ b/Scales/TimePeriodScale.js
@@ -2,11 +2,12 @@ function newTimePeriodScale () {
   const MODULE_NAME = 'Time Period Scale'
 
   let thisObject = {
+    timePeriod: undefined,
     container: undefined,
     draw: draw,
     getContainer: getContainer,
     initialize: initialize,
-    timePeriod: undefined
+    finalize: finalize
   }
 
   const FILES_PERIOD_DEFAULT_VALUE = 0
@@ -37,6 +38,11 @@ function newTimePeriodScale () {
 
   return thisObject
 
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+  }
+
   function initialize (pTimeLineCoordinateSystem) {
     timeLineCoordinateSystem = pTimeLineCoordinateSystem
 
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 721fc4e10..57bc83243 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -4,10 +4,13 @@ function newTimeScale () {
   let thisObject = {
     lenghtPercentage: undefined,
     container: undefined,
+    date: undefined,
+    visible: true,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
-    initialize: initialize
+    initialize: initialize,
+    finalize: finalize
   }
 
   const LENGHT_PERCENTAGE_DEFAULT_VALUE = 5
@@ -21,21 +24,17 @@ function newTimeScale () {
   thisObject.container.isClickeable = false
   thisObject.container.isWheelable = true
 
-  let mouse = {
-    position: {
-      x: 0,
-      y: 0
-    }
-  }
-
-  let visible = true
-  let timeLineCoordinateSystem
+  thisObject.container.frame.width = 190
+  thisObject.container.frame.height = 25
 
   return thisObject
 
-  function initialize (pTimeLineCoordinateSystem) {
-    timeLineCoordinateSystem = pTimeLineCoordinateSystem
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+  }
 
+  function initialize () {
     thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
 
     thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME)
@@ -47,18 +46,8 @@ function newTimeScale () {
 
     let event = {}
     event.lenghtPercentage = thisObject.lenghtPercentage
+
     thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
-
-    thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
-      mouse.position.x = event.x
-      mouse.position.y = event.y
-
-      visible = true
-    })
-
-    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) {
-      visible = false
-    })
   }
 
   function onMouseWheel (event) {
@@ -77,108 +66,20 @@ function newTimeScale () {
     window.localStorage.setItem(MODULE_NAME, thisObject.lenghtPercentage)
   }
 
-  function getContainer (pPoint) {
-    let container
-
-/* In this case we manually frame this point since we do a very special treatment of the position of this scale. */
-    let point = {
-      x: 0,
-      y: 0
-    }
-    point.x = pPoint.x - thisObject.container.frame.position.x
-    point.y = pPoint.y - thisObject.container.frame.position.y + viewPort.margins.TOP
-
-    if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) {
+  function getContainer (point) {
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
       return thisObject.container
-    } else {
-           /* This point does not belong to this space. */
-
-      return undefined
     }
   }
 
   function physics () {
-    let point = {
-      x: 0,
-      y: 0
-    }
 
-    let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem)
-    date = new Date(date)
-    window.localStorage.setItem('Date @ Screen Corner', date.toUTCString())
   }
 
   function draw () {
-    if (visible === false) { return }
+    if (thisObject.visible === false || thisObject.date === undefined) { return }
 
-/* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still
-to be visible at the top of the viewPort. */
-
-    let frame = thisObject.container.parentContainer.frame
-    let point1
-    let point2
-    let point3
-    let point4
-
-    point1 = {
-      x: 0,
-      y: 0
-    }
-
-    point2 = {
-      x: frame.width,
-      y: 0
-    }
-
-    point3 = {
-      x: frame.width,
-      y: frame.height / 10
-    }
-
-    point4 = {
-      x: 0,
-      y: frame.height / 10
-    }
-
-    point5 = {
-      x: 0,
-      y: frame.height
-    }
-
-        /* Now the transformations. */
-
-    point1 = transformThisPoint(point1, frame.container)
-    point2 = transformThisPoint(point2, frame.container)
-    point3 = transformThisPoint(point3, frame.container)
-    point4 = transformThisPoint(point4, frame.container)
-    point5 = transformThisPoint(point5, frame.container)
-
-    point1 = viewPort.fitIntoVisibleArea(point1)
-    point2 = viewPort.fitIntoVisibleArea(point2)
-    point3 = viewPort.fitIntoVisibleArea(point3)
-    point4 = viewPort.fitIntoVisibleArea(point4)
-    point5 = viewPort.fitIntoVisibleArea(point5)
-
-    if (point3.y - point2.y < MIN_HEIGHT) {
-      point3.y = point2.y + MIN_HEIGHT
-      point4.y = point2.y + MIN_HEIGHT
-    }
-
-    thisObject.container.frame.position.x = point1.x
-    thisObject.container.frame.position.y = point1.y
-
-    thisObject.container.frame.width = point2.x - point1.x
-    thisObject.container.frame.height = point3.y - point2.y
-
-    let point = {
-      x: mouse.position.x,
-      y: point1.y - viewPort.margins.TOP
-    }
-
-    let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem)
-    date = new Date(date)
-
-    let label = date.toUTCString()
+    let label = thisObject.date.toUTCString()
     let labelArray = label.split(' ')
     let label1 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
     let label2 = labelArray[4]
@@ -189,22 +90,10 @@ to be visible at the top of the viewPort. */
     const RED_LINE_HIGHT = 5
     const OPACITY = 1
 
-    let centerPoint = {
-      x: mouse.position.x,
-      y: point1.y + viewPort.margins.BOTTOM
-    }
-
-    let container = newContainer()
-    container.initialize('Visible Time Scale')
-    container.frame.width = 190
-    container.frame.height = 25
-    container.frame.position.x = centerPoint.x - container.frame.width / 2
-    container.frame.position.y = centerPoint.y - container.frame.height / 2
-
     let params = {
       cornerRadius: 3,
       lineWidth: RED_LINE_HIGHT,
-      container: container,
+      container: thisObject.container,
       borderColor: UI_COLOR.RUSTED_RED,
       castShadow: false,
       backgroundColor: UI_COLOR.DARK,
@@ -218,10 +107,12 @@ to be visible at the top of the viewPort. */
     let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO
 
     let labelPoint1 = {
-      x: mouse.position.x - xOffset1 + 15,
-      y: point1.y + viewPort.margins.BOTTOM + 6
+      x: thisObject.container.frame.width / 2 - xOffset1 + 15,
+      y: thisObject.container.frame.height / 2 + 6
     }
 
+    labelPoint1 = thisObject.container.frame.frameThisPoint(labelPoint1)
+
     browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
 
@@ -230,10 +121,12 @@ to be visible at the top of the viewPort. */
     let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO
 
     let labelPoint2 = {
-      x: mouse.position.x - xOffset2 / 2 - 3 + 70,
-      y: point1.y + viewPort.margins.BOTTOM + 6
+      x: thisObject.container.frame.width / 2 - xOffset2 / 2 - 3 + 60,
+      y: thisObject.container.frame.height / 2 + 6
     }
 
+    labelPoint2 = thisObject.container.frame.frameThisPoint(labelPoint2)
+
     browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
 
diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js
index 96aaa7bbc..e4242795a 100644
--- a/Spaces/ChartSpace.js
+++ b/Spaces/ChartSpace.js
@@ -15,12 +15,12 @@ function newChartSpace () {
   let thisObject = {
     visible: true,
     container: undefined,
+    timeMachines: [],
     fitIntoVisibleArea: fitIntoVisibleArea,
     isThisPointVisible: isThisPointVisible,
     physics: physics,
     drawBackground: drawBackground,
     draw: draw,
-    timeMachines: [],
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
     initialize: initialize,
     finalize: finalize
@@ -35,14 +35,13 @@ function newChartSpace () {
   return thisObject
 
   function finalize () {
-    try {
-      for (let i = 0; i < thisObject.timeMachines.length; i++) {
-        let timeMachine = thisObject.timeMachines[i]
-        timeMachine.finalize()
-      }
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
+    for (let i = 0; i < thisObject.timeMachines.length; i++) {
+      let timeMachine = thisObject.timeMachines[i]
+      timeMachine.finalize()
     }
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
   }
 
   function initialize (callBackFunction) {

From 261815113519c8b52bdf2d1d5482a5d57105c4da Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 16 May 2019 11:46:57 +0200
Subject: [PATCH 4/9] Time Scale with arrows finished

---
 Scales/TimeScale.js | 118 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 117 insertions(+), 1 deletion(-)

diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 57bc83243..1a4d6ca7f 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -23,10 +23,12 @@ function newTimeScale () {
   thisObject.container.isDraggeable = false
   thisObject.container.isClickeable = false
   thisObject.container.isWheelable = true
+  thisObject.container.detectMouseOver = true
 
   thisObject.container.frame.width = 190
   thisObject.container.frame.height = 25
 
+  let isMouseOver
   return thisObject
 
   function finalize () {
@@ -36,6 +38,8 @@ function newTimeScale () {
 
   function initialize () {
     thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
     thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME)
     if (!thisObject.lenghtPercentage) {
@@ -50,6 +54,14 @@ function newTimeScale () {
     thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
   }
 
+  function onMouseOver () {
+    isMouseOver = true
+  }
+
+  function onMouseNotOver () {
+    isMouseOver = false
+  }
+
   function onMouseWheel (event) {
     delta = event.wheelDelta
     if (delta < 0) {
@@ -77,6 +89,111 @@ function newTimeScale () {
   }
 
   function draw () {
+    drawTime()
+    drawArrows()
+  }
+
+  function drawArrows () {
+    if (isMouseOver !== true) { return }
+
+    const X_OFFSET = thisObject.container.frame.width / 2
+    const Y_OFFSET = thisObject.container.frame.height / 2 - 10
+    const HEIGHT = 18
+    const WIDTH = 6
+    const LINE_WIDTH = 3
+    const OPACITY = 0.2
+    const MIN_DISTANCE_FROM_CENTER = 110
+    const CURRENT_VALUE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.lenghtPercentage
+    const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 100
+    let DISTANCE_BETWEEN_ARROWS = 9
+    let ARROW_DIRECTION = 0
+
+    ARROW_DIRECTION = -1
+    drawTwoArrows()
+    ARROW_DIRECTION = 1
+    drawTwoArrows()
+
+    function drawTwoArrows () {
+      point1 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET - 0
+      }
+
+      point2 = {
+        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT / 2
+      }
+
+      point3 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT
+      }
+
+      point1 = thisObject.container.frame.frameThisPoint(point1)
+      point2 = thisObject.container.frame.frameThisPoint(point2)
+      point3 = thisObject.container.frame.frameThisPoint(point3)
+
+      point4 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET - 0
+      }
+
+      point5 = {
+        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT / 2
+      }
+
+      point6 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT
+      }
+
+      point4 = thisObject.container.frame.frameThisPoint(point4)
+      point5 = thisObject.container.frame.frameThisPoint(point5)
+      point6 = thisObject.container.frame.frameThisPoint(point6)
+
+      point7 = {
+        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
+        y: Y_OFFSET - 0
+      }
+
+      point8 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT / 2
+      }
+
+      point9 = {
+        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT
+      }
+
+      point7 = thisObject.container.frame.frameThisPoint(point7)
+      point8 = thisObject.container.frame.frameThisPoint(point8)
+      point9 = thisObject.container.frame.frameThisPoint(point9)
+
+      browserCanvasContext.setLineDash([0, 0])
+
+      browserCanvasContext.beginPath()
+
+      browserCanvasContext.moveTo(point1.x, point1.y)
+      browserCanvasContext.lineTo(point2.x, point2.y)
+      browserCanvasContext.lineTo(point3.x, point3.y)
+
+      browserCanvasContext.moveTo(point4.x, point4.y)
+      browserCanvasContext.lineTo(point5.x, point5.y)
+      browserCanvasContext.lineTo(point6.x, point6.y)
+
+      browserCanvasContext.moveTo(point7.x, point7.y)
+      browserCanvasContext.lineTo(point8.x, point8.y)
+      browserCanvasContext.lineTo(point9.x, point9.y)
+
+      browserCanvasContext.lineWidth = LINE_WIDTH
+      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
+      browserCanvasContext.stroke()
+    }
+  }
+
+  function drawTime () {
     if (thisObject.visible === false || thisObject.date === undefined) { return }
 
     let label = thisObject.date.toUTCString()
@@ -133,4 +250,3 @@ function newTimeScale () {
     browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y)
   }
 }
-

From 41e95ca1a85671581f82ca9d25e72b5008769892 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 16 May 2019 12:09:33 +0200
Subject: [PATCH 5/9] Final BUGS on timeScale fixed

---
 ChartsSpace/TimeMachine.js | 3 ++-
 Scales/TimeScale.js        | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index a46e5d0c6..86660f227 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -79,7 +79,6 @@ function newTimeMachine () {
 
     thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) {
       recalculateScale()
-      moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition)
     })
 
      /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */
@@ -116,6 +115,7 @@ function newTimeMachine () {
       thisObject.timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
         thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
+        moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true, event.mousePosition)
       })
 
       thisObject.timeScale.initialize()
@@ -125,6 +125,7 @@ function newTimeMachine () {
       thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
         thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
+        moveToUserPosition(thisObject.container, timeLineCoordinateSystem, true, false, event.mousePosition)
       })
 
       thisObject.rateScale.initialize(timeLineCoordinateSystem)
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 1a4d6ca7f..6c0b9d59d 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -102,10 +102,11 @@ function newTimeScale () {
     const WIDTH = 6
     const LINE_WIDTH = 3
     const OPACITY = 0.2
+    const DISTANCE_BETWEEN_ARROWS = 10
     const MIN_DISTANCE_FROM_CENTER = 110
     const CURRENT_VALUE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.lenghtPercentage
-    const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 100
-    let DISTANCE_BETWEEN_ARROWS = 9
+    const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 100 + DISTANCE_BETWEEN_ARROWS
+
     let ARROW_DIRECTION = 0
 
     ARROW_DIRECTION = -1
@@ -250,3 +251,4 @@ function newTimeScale () {
     browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y)
   }
 }
+

From 439dd28ca1d379c663724da19e0bff4485d9ac4c Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 16 May 2019 12:25:18 +0200
Subject: [PATCH 6/9] Now is really working (timeScale)

---
 ChartsSpace/TimeMachine.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 86660f227..54e99edc8 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -61,7 +61,6 @@ function newTimeMachine () {
 
     thisObject.container.finalize()
     thisObject.container = undefined
-
     thisObject.timeScale.finalize()
     thisObject.timeScale = undefined
     thisObject.rateScale.finalize()
@@ -286,13 +285,13 @@ function newTimeMachine () {
 
     let point = {
       x: 0,
-      y: thisObject.container.frame.height / 10
+      y: 0
     }
 
     point = transformThisPoint(point, thisObject.container.frame.container)
-    point = viewPort.fitIntoVisibleArea(point)
+    point = thisObject.container.fitFunction(point)
 
-    thisObject.timeScale.container.frame.position.y = point.y + 6
+    thisObject.timeScale.container.frame.position.y = point.y
   }
 
   function drawBackground () {

From abe3c89c96736d76da1cc41e5b4826f8b36cdb0f Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 16 May 2019 13:04:35 +0200
Subject: [PATCH 7/9] BUG fixed: when zoomed in timeScale not worked

---
 ChartsSpace/TimeMachine.js | 11 ++++-------
 ChartsSpace/ViewPort.js    | 23 ++++++++++++-----------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 54e99edc8..322147780 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -76,10 +76,6 @@ function newTimeMachine () {
 
     recalculateScale()
 
-    thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) {
-      recalculateScale()
-    })
-
      /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */
 
     let position = 0 // This defines the position of each chart respect to each other.
@@ -113,8 +109,9 @@ function newTimeMachine () {
 
       thisObject.timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
         thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100
-        thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
+        recalculateScale()
         moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true, event.mousePosition)
+        thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
       })
 
       thisObject.timeScale.initialize()
@@ -123,8 +120,9 @@ function newTimeMachine () {
 
       thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
         thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100
-        thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
+        recalculateScale()
         moveToUserPosition(thisObject.container, timeLineCoordinateSystem, true, false, event.mousePosition)
+        thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
       })
 
       thisObject.rateScale.initialize(timeLineCoordinateSystem)
@@ -353,4 +351,3 @@ function newTimeMachine () {
       )
   }
 }
-
diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js
index 264c5b07b..358f3a1e6 100644
--- a/ChartsSpace/ViewPort.js
+++ b/ChartsSpace/ViewPort.js
@@ -1,4 +1,4 @@
- 
+
 function newViewPort () {
   const MODULE_NAME = 'Viewport'
   const INFO_LOG = false
@@ -11,8 +11,8 @@ function newViewPort () {
 
   let ANIMATION_INCREMENT = 0.25
 
-  let TOP_MARGIN = 15 + TOP_SPACE_HEIGHT
-  let BOTTOM_MARGIN = 20 + COCKPIT_SPACE_HEIGHT
+  let TOP_MARGIN = 30 + TOP_SPACE_HEIGHT
+  let BOTTOM_MARGIN = 30 + COCKPIT_SPACE_HEIGHT
   let LEFT_MARGIN = 50
   let RIGHT_MARGIN = 50
   let MARGINS = {
@@ -83,8 +83,8 @@ function newViewPort () {
   }
 
   function resize () {
-    TOP_MARGIN = 15 + TOP_SPACE_HEIGHT
-    BOTTOM_MARGIN = 20 + browserCanvas.height - COCKPIT_SPACE_POSITION
+    TOP_MARGIN = 30 + TOP_SPACE_HEIGHT
+    BOTTOM_MARGIN = 30 + browserCanvas.height - COCKPIT_SPACE_POSITION
     LEFT_MARGIN = 50
     RIGHT_MARGIN = 50
     MARGINS = {
@@ -142,7 +142,7 @@ function newViewPort () {
       if (Math.trunc(Math.abs(targetOffset.y - offset.y) * 1000) >= Math.trunc(Math.abs(offsetIncrement.y) * 1000)) {
         offset.y = offset.y + offsetIncrement.y
 
-               // console.log("offset.y changed to " + offset.y)
+              // console.log("offset.y changed to " + offset.y)
       } else {
         offsetIncrement.y = 0
       }
@@ -161,7 +161,7 @@ function newViewPort () {
 
     thisObject.eventHandler.raiseEvent('Offset Changed', event)
 
-       // console.log("displace produced new Offset x = " + offset.x + " y = " + offset.y);
+      // console.log("displace produced new Offset x = " + offset.x + " y = " + offset.y);
   }
 
   function displaceTarget (displaceVector) {
@@ -173,7 +173,7 @@ function newViewPort () {
       y: (targetOffset.y - offset.y) / 10
     }
 
-       // console.log("displaceTarget x = " + targetOffset.x + " y = " + targetOffset.y);
+      // console.log("displaceTarget x = " + targetOffset.x + " y = " + targetOffset.y);
   }
 
   function newZoomLevel (level) {
@@ -196,13 +196,13 @@ function newViewPort () {
   }
 
   function isMinZoom () {
-       /* returns true is we are currently at the min zoom level. */
+      /* returns true is we are currently at the min zoom level. */
 
     if (thisObject.zoomTargetLevel === MIN_ZOOM_LEVEL) { return true } else { return false }
   }
 
   function applyZoom (amount) {
-        // console.log("applyZoom amount: " + amount);
+       // console.log("applyZoom amount: " + amount);
 
     if (amount > 0) {
       if (thisObject.zoomTargetLevel > -5) {
@@ -300,7 +300,7 @@ function newViewPort () {
   }
 
   function fitIntoVisibleArea (point) {
-        /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
+       /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
 
     if (point.x > thisObject.visibleArea.bottomRight.x + 1) {
       point.x = thisObject.visibleArea.bottomRight.x + 1
@@ -453,3 +453,4 @@ function newViewPort () {
     }
   }
 }
+

From fc2fd805a29041c91878cb98239c41d6a9f8ecbe Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 16 May 2019 13:19:49 +0200
Subject: [PATCH 8/9] Another bug corrected. Arrows painted when control is not
 visible.

---
 Scales/TimeScale.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 6c0b9d59d..14b85566a 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -95,6 +95,7 @@ function newTimeScale () {
 
   function drawArrows () {
     if (isMouseOver !== true) { return }
+    if (thisObject.visible === false || thisObject.date === undefined) { return }
 
     const X_OFFSET = thisObject.container.frame.width / 2
     const Y_OFFSET = thisObject.container.frame.height / 2 - 10

From 74d58f8dcba5d22bf7ba76106981c7b77f7682ca Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 16 May 2019 14:51:04 +0200
Subject: [PATCH 9/9] rateScale redesigned

---
 ChartsSpace/TimeMachine.js |  64 ++++++---
 Scales/Commons.js          |  50 +++++++
 Scales/RateScale.js        | 260 ++++++++++++++++++-------------------
 Scales/TimeScale.js        |  49 +------
 4 files changed, 220 insertions(+), 203 deletions(-)
 create mode 100644 Scales/Commons.js

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 322147780..4ef15162d 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -125,7 +125,7 @@ function newTimeMachine () {
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
       })
 
-      thisObject.rateScale.initialize(timeLineCoordinateSystem)
+      thisObject.rateScale.initialize()
 
       thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
 
@@ -138,8 +138,6 @@ function newTimeMachine () {
 
       mouse.position.x = event.x
       mouse.position.y = event.y
-
-      thisObject.rateScale.setMousePosition(event)
     }
 
     function initializeTheRest () {
@@ -246,17 +244,6 @@ function newTimeMachine () {
   }
 
   function thisObjectPhysics () {
-    /* Mouse Position Date Calculation */
-
-    let datePoint = {
-      x: mouse.position.x,
-      y: 0
-    }
-
-    let mouseDate = getDateFromPoint(datePoint, thisObject.container, timeLineCoordinateSystem)
-
-    thisObject.timeScale.date = new Date(mouseDate)
-
     /* Screen Corner Date Calculation */
 
     let point = {
@@ -272,24 +259,61 @@ function newTimeMachine () {
   function childrenPhysics () {
     thisObject.timeScale.physics()
     thisObject.rateScale.physics()
+
     for (let i = 0; i < thisObject.charts.length; i++) {
       let chart = thisObject.charts[i]
       chart.physics()
     }
 
-/* timeScale Positioning */
+    /* Mouse Position Date Calculation */
+
+    let timePoint = {
+      x: mouse.position.x,
+      y: 0
+    }
+
+    let mouseDate = getDateFromPoint(timePoint, thisObject.container, timeLineCoordinateSystem)
+
+    thisObject.timeScale.date = new Date(mouseDate)
+
+    /* Mouse Position Rate Calculation */
+
+    let ratePoint = {
+      x: 0,
+      y: mouse.position.y
+    }
+
+    let mouseRate = getRateFromPoint(ratePoint, thisObject.container, timeLineCoordinateSystem)
+
+    thisObject.rateScale.rate = mouseRate
+
+    /* timeScale Positioning */
 
     thisObject.timeScale.container.frame.position.x = mouse.position.x - thisObject.timeScale.container.frame.width / 2
 
-    let point = {
+    timePoint = {
       x: 0,
       y: 0
     }
 
-    point = transformThisPoint(point, thisObject.container.frame.container)
-    point = thisObject.container.fitFunction(point)
+    timePoint = transformThisPoint(timePoint, thisObject.container.frame.container)
+    timePoint = thisObject.container.fitFunction(timePoint)
 
-    thisObject.timeScale.container.frame.position.y = point.y
+    thisObject.timeScale.container.frame.position.y = timePoint.y
+
+    /* rateScale Positioning */
+
+    thisObject.rateScale.container.frame.position.y = mouse.position.y - thisObject.rateScale.container.frame.height / 2
+
+    ratePoint = {
+      x: 10000000000000,
+      y: 0
+    }
+
+    ratePoint = transformThisPoint(ratePoint, thisObject.container.frame.container)
+    ratePoint = thisObject.container.fitFunction(ratePoint)
+
+    thisObject.rateScale.container.frame.position.x = ratePoint.x - thisObject.rateScale.container.frame.width
   }
 
   function drawBackground () {
@@ -311,7 +335,7 @@ function newTimeMachine () {
       }
 
       if (thisObject.timeScale !== undefined) { thisObject.timeScale.draw() }
-      // if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() }
+      if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() }
 
      // thisObject.container.frame.draw(false, true, false)
     }
diff --git a/Scales/Commons.js b/Scales/Commons.js
new file mode 100644
index 000000000..b8497ca08
--- /dev/null
+++ b/Scales/Commons.js
@@ -0,0 +1,50 @@
+
+function drawScaleDisplay (label1, label2, xExtraOffSet1, xExtraOffSet2, container) {
+  let fontSize1 = 20
+  let fontSize2 = 10
+
+  const RED_LINE_HIGHT = 5
+  const OPACITY = 1
+
+  let params = {
+    cornerRadius: 3,
+    lineWidth: RED_LINE_HIGHT,
+    container: container,
+    borderColor: UI_COLOR.RUSTED_RED,
+    castShadow: false,
+    backgroundColor: UI_COLOR.DARK,
+    opacity: OPACITY
+  }
+
+  roundedCornersBackground(params)
+
+  /* Place the Text */
+
+  let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO
+
+  let labelPoint1 = {
+    x: container.frame.width / 2 - xOffset1 + xExtraOffSet1,
+    y: container.frame.height / 2 + 6
+  }
+
+  labelPoint1 = container.frame.frameThisPoint(labelPoint1)
+
+  browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY
+  browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+
+  browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y)
+
+  let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO
+
+  let labelPoint2 = {
+    x: container.frame.width / 2 - xOffset2 / 2 - 3 + xExtraOffSet2,
+    y: container.frame.height / 2 + 6
+  }
+
+  labelPoint2 = container.frame.frameThisPoint(labelPoint2)
+
+  browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY
+  browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+
+  browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y)
+}
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index e57f9f746..10b6c14e1 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -4,8 +4,8 @@ function newRateScale () {
   let thisObject = {
     heightPercentage: 100,
     container: undefined,
+    rate: undefined,
     visible: true,
-    setMousePosition: setMousePosition,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
@@ -20,25 +20,15 @@ function newRateScale () {
   thisObject.container = newContainer()
   thisObject.container.initialize(MODULE_NAME)
 
-  thisObject.container.frame.width = viewPort.margins.RIGHT
-  thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y
-
-  thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x
-  thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
-
   thisObject.container.isDraggeable = false
   thisObject.container.isClickeable = false
   thisObject.container.isWheelable = true
+  thisObject.container.detectMouseOver = true
 
-  let mouse = {
-    position: {
-      x: 0,
-      y: 0
-    }
-  }
-
-  let timeLineCoordinateSystem
+  thisObject.container.frame.width = 110
+  thisObject.container.frame.height = 25
 
+  let isMouseOver
   return thisObject
 
   function finalize () {
@@ -46,10 +36,10 @@ function newRateScale () {
     thisObject.container = undefined
   }
 
-  function initialize (pTimeLineCoordinateSystem) {
-    timeLineCoordinateSystem = pTimeLineCoordinateSystem
-
+  function initialize () {
     thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
     thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME)
     if (!thisObject.heightPercentage) {
@@ -63,9 +53,12 @@ function newRateScale () {
     thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event)
   }
 
-  function setMousePosition (point) {
-    mouse.position.x = point.x
-    mouse.position.y = point.y
+  function onMouseOver () {
+    isMouseOver = true
+  }
+
+  function onMouseNotOver () {
+    isMouseOver = false
   }
 
   function onMouseWheel (event) {
@@ -83,23 +76,9 @@ function newRateScale () {
     window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage)
   }
 
-  function getContainer (pPoint) {
-    let container
-
-/* In this case we manually frame this point since we do a very special treatment of the position of this scale. */
-    let point = {
-      x: 0,
-      y: 0
-    }
-    point.x = pPoint.x - thisObject.container.frame.position.x - viewPort.margins.RIGHT
-    point.y = pPoint.y - thisObject.container.frame.position.y
-
-    if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) {
+  function getContainer (point) {
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
       return thisObject.container
-    } else {
-           /* This point does not belong to this space. */
-
-      return undefined
     }
   }
 
@@ -108,110 +87,121 @@ function newRateScale () {
   }
 
   function draw () {
-    if (thisObject.visible === false) { return }
+    drawRate()
+    drawArrows()
+  }
 
-/* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still
-to be thisObject.visible at the top of the viewPort. */
+  function drawArrows () {
+    if (isMouseOver !== true) { return }
+    if (thisObject.visible === false || thisObject.rate === undefined) { return }
 
-    let frame = thisObject.container.parentContainer.frame
-    let point1
-    let point2
-    let point3
-    let point4
+    const X_OFFSET = thisObject.container.frame.width / 2
+    const Y_OFFSET = thisObject.container.frame.height / 2
+    const HEIGHT = 6
+    const WIDTH = 18
+    const LINE_WIDTH = 3
+    const OPACITY = 0.2
+    const DISTANCE_BETWEEN_ARROWS = 10
+    const MIN_DISTANCE_FROM_CENTER = 30
+    const CURRENT_VALUE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.heightPercentage
+    const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 115 + DISTANCE_BETWEEN_ARROWS
 
-    point1 = {
-      x: frame.width - frame.width / 10,
-      y: 0
+    let ARROW_DIRECTION = 0
+
+    ARROW_DIRECTION = -1
+    drawTwoArrows()
+    ARROW_DIRECTION = 1
+    drawTwoArrows()
+
+    function drawTwoArrows () {
+      point1 = {
+        x: X_OFFSET - WIDTH / 2,
+        y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION
+      }
+
+      point2 = {
+        x: X_OFFSET,
+        y: Y_OFFSET + HEIGHT * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION
+      }
+
+      point3 = {
+        x: X_OFFSET + WIDTH / 2,
+        y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION
+      }
+
+      point1 = thisObject.container.frame.frameThisPoint(point1)
+      point2 = thisObject.container.frame.frameThisPoint(point2)
+      point3 = thisObject.container.frame.frameThisPoint(point3)
+
+      point4 = {
+        x: X_OFFSET - WIDTH / 2,
+        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION
+      }
+
+      point5 = {
+        x: X_OFFSET,
+        y: Y_OFFSET + HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION
+      }
+
+      point6 = {
+        x: X_OFFSET + WIDTH / 2,
+        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION
+      }
+
+      point4 = thisObject.container.frame.frameThisPoint(point4)
+      point5 = thisObject.container.frame.frameThisPoint(point5)
+      point6 = thisObject.container.frame.frameThisPoint(point6)
+
+      point7 = {
+        x: X_OFFSET - WIDTH / 2,
+        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
+      }
+
+      point8 = {
+        x: X_OFFSET,
+        y: Y_OFFSET - HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
+      }
+
+      point9 = {
+        x: X_OFFSET + WIDTH / 2,
+        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
+      }
+
+      point7 = thisObject.container.frame.frameThisPoint(point7)
+      point8 = thisObject.container.frame.frameThisPoint(point8)
+      point9 = thisObject.container.frame.frameThisPoint(point9)
+
+      browserCanvasContext.setLineDash([0, 0])
+
+      browserCanvasContext.beginPath()
+
+      browserCanvasContext.moveTo(point1.x, point1.y)
+      browserCanvasContext.lineTo(point2.x, point2.y)
+      browserCanvasContext.lineTo(point3.x, point3.y)
+
+      browserCanvasContext.moveTo(point4.x, point4.y)
+      browserCanvasContext.lineTo(point5.x, point5.y)
+      browserCanvasContext.lineTo(point6.x, point6.y)
+
+      browserCanvasContext.moveTo(point7.x, point7.y)
+      browserCanvasContext.lineTo(point8.x, point8.y)
+      browserCanvasContext.lineTo(point9.x, point9.y)
+
+      browserCanvasContext.lineWidth = LINE_WIDTH
+      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
+      browserCanvasContext.stroke()
     }
+  }
 
-    point2 = {
-      x: frame.width,
-      y: 0
-    }
+  function drawRate () {
+    if (thisObject.visible === false || thisObject.rate === undefined) { return }
 
-    point3 = {
-      x: frame.width,
-      y: frame.height
-    }
+    let label = (thisObject.rate - Math.trunc(thisObject.rate)).toFixed(2)
+    let labelArray = label.split('.')
+    let label1 = (Math.trunc(thisObject.rate)).toLocaleString()
+    let label2 = labelArray[1]
 
-    point4 = {
-      x: frame.width - frame.width / 10,
-      y: frame.height
-    }
-
-    point5 = {
-      x: 0,
-      y: 0
-    }
-
-        /* Now the transformations. */
-
-    point1 = transformThisPoint(point1, frame.container)
-    point2 = transformThisPoint(point2, frame.container)
-    point3 = transformThisPoint(point3, frame.container)
-    point4 = transformThisPoint(point4, frame.container)
-    point5 = transformThisPoint(point5, frame.container)
-
-    point1 = viewPort.fitIntoVisibleArea(point1)
-    point2 = viewPort.fitIntoVisibleArea(point2)
-    point3 = viewPort.fitIntoVisibleArea(point3)
-    point4 = viewPort.fitIntoVisibleArea(point4)
-    point5 = viewPort.fitIntoVisibleArea(point5)
-
-    if (point2.x - point1.x < MIN_WIDTH) {
-      point1.x = point2.x - MIN_WIDTH
-      point4.x = point2.x - MIN_WIDTH
-    }
-
-    /* Lets start the drawing. */
-/*
-    browserCanvasContext.beginPath()
-    browserCanvasContext.moveTo(point1.x, point1.y)
-    browserCanvasContext.lineTo(point2.x + viewPort.margins.RIGHT, point2.y)
-    browserCanvasContext.lineTo(point3.x + viewPort.margins.RIGHT, point3.y)
-    browserCanvasContext.lineTo(point4.x, point4.y)
-    browserCanvasContext.lineTo(point1.x, point1.y)
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)'
-    browserCanvasContext.lineWidth = 1
-    browserCanvasContext.stroke()
-*/
-    thisObject.container.frame.position.x = point1.x
-    thisObject.container.frame.position.y = point1.y
-
-    thisObject.container.frame.width = point2.x - point1.x
-    thisObject.container.frame.height = point3.y - point2.y
-
-    let point = {
-      x: point5.x + viewPort.margins.RIGHT,
-      y: mouse.position.y
-    }
-
-    let rate = getRateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem)
-
-    let label = rate.toFixed(2)
-    let fontSize = 10
-
-    let xOffset = label.length * fontSize * FONT_ASPECT_RATIO
-
-    if (point.y + fontSize / 2 > point3.y || point.y - fontSize / 2 < point1.y) { return }
-
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)'
-
-    browserCanvasContext.fillText(label, point1.x + viewPort.margins.RIGHT, point.y + fontSize / 2)
-
-    browserCanvasContext.beginPath()
-
-    browserCanvasContext.moveTo(point.x, point.y)
-    browserCanvasContext.lineTo(point1.x + viewPort.margins.RIGHT, point.y)
-
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)'
-    browserCanvasContext.lineWidth = 0.2
-    browserCanvasContext.setLineDash([1, 5])
-    browserCanvasContext.stroke()
+    drawScaleDisplay(label1, label2, 10, 40, thisObject.container)
   }
 }
+
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 14b85566a..fc0a5c2bd 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -50,7 +50,6 @@ function newTimeScale () {
 
     let event = {}
     event.lenghtPercentage = thisObject.lenghtPercentage
-
     thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
   }
 
@@ -203,53 +202,7 @@ function newTimeScale () {
     let label1 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
     let label2 = labelArray[4]
 
-    let fontSize1 = 20
-    let fontSize2 = 10
-
-    const RED_LINE_HIGHT = 5
-    const OPACITY = 1
-
-    let params = {
-      cornerRadius: 3,
-      lineWidth: RED_LINE_HIGHT,
-      container: thisObject.container,
-      borderColor: UI_COLOR.RUSTED_RED,
-      castShadow: false,
-      backgroundColor: UI_COLOR.DARK,
-      opacity: OPACITY
-    }
-
-    roundedCornersBackground(params)
-
-    /* Place the Text */
-
-    let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO
-
-    let labelPoint1 = {
-      x: thisObject.container.frame.width / 2 - xOffset1 + 15,
-      y: thisObject.container.frame.height / 2 + 6
-    }
-
-    labelPoint1 = thisObject.container.frame.frameThisPoint(labelPoint1)
-
-    browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-
-    browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y)
-
-    let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO
-
-    let labelPoint2 = {
-      x: thisObject.container.frame.width / 2 - xOffset2 / 2 - 3 + 60,
-      y: thisObject.container.frame.height / 2 + 6
-    }
-
-    labelPoint2 = thisObject.container.frame.frameThisPoint(labelPoint2)
-
-    browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-
-    browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y)
+    drawScaleDisplay(label1, label2, 10, 60, thisObject.container)
   }
 }