Merge pull request #30 from AAMasters/develop

Canvas App Improvements

BottomSpace/ChartAspectRatio.js

@@ -1,115 +0,0 @@
- function newChartAspectRatio () {
-   let thisObject = {
-     aspectRatio: undefined,
-     draw: draw,
-     getContainer: getContainer,
-     initialize: initialize
-   }
-
-   let container = newContainer()
-   container.initialize()
-   thisObject.container = container
-
-   thisObject.container.frame.width = 50
-   thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT
-
-   resize()
-
-   container.isDraggeable = false
-   container.isClickeable = false
-   container.isWheelable = true
-
-   thisObject.aspectRatio = {}
-
-   const INITIAL_Y_ASPECT_RATIO = 5 / 10
-   const MIN_Y_ASPECT_RATIO = 1 / 10
-   const MAX_Y_ASPECT_RATIO = 10 / 10
-
-   thisObject.aspectRatio.x = 1
-   thisObject.aspectRatio.y = INITIAL_Y_ASPECT_RATIO
-
-   canDrawIcon = false
-
-   return thisObject
-
-   function initialize () {
-     icon = new Image()
-
-     icon.onload = onImageLoad
-
-     function onImageLoad () {
-       canDrawIcon = true
-     }
-
-     icon.src = window.canvasApp.urlPrefix + 'Images/Icons/chart-scale.png'
-
-     thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
-
-     window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize)
-   }
-
-   function resize () {
-     container.frame.position.x = viewPort.visibleArea.topRight.x - thisObject.container.frame.width
-     container.frame.position.y = viewPort.visibleArea.bottomLeft.y
-   }
-
-   function onMouseWheel (event) {
-     delta = event.wheelDelta
-
-     if (viewPort.isMinZoom() === false) { return } // We only make this button to work at the min zoom level.
-
-     if (delta < 0) {
-       delta = -0.1
-     } else {
-       delta = 0.1
-     }
-
-     thisObject.aspectRatio.y = thisObject.aspectRatio.y + delta
-     thisObject.aspectRatio.y = Math.round(thisObject.aspectRatio.y * 100) / 100
-
-     if (thisObject.aspectRatio.y < MIN_Y_ASPECT_RATIO) {
-       thisObject.aspectRatio.y = MIN_Y_ASPECT_RATIO
-     }
-
-     if (thisObject.aspectRatio.y > MAX_Y_ASPECT_RATIO) {
-       thisObject.aspectRatio.y = MAX_Y_ASPECT_RATIO
-     }
-
-     thisObject.container.eventHandler.raiseEvent('Chart Aspect Ratio Changed', thisObject.aspectRatio)
-   }
-
-   function getContainer (point) {
-     let container
-
-        /* First we check if this point is inside this object UI. */
-
-     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-       return this.container
-     } else {
-            /* This point does not belong to this space. */
-
-       return undefined
-     }
-   }
-
-   function draw () {
-     thisObject.container.frame.draw(false, false)
-
-     if (canDrawIcon === false) { return }
-     if (viewPort.isMinZoom() === false) { return } // We only show this button at the min zoom level.
-
-     let breakpointsHeight = 15
-
-     let imageHeight = 15
-     let imageWidth = 15
-
-     let imagePoint = {
-       x: 10,
-       y: thisObject.container.frame.height / 2 - imageHeight / 2 + breakpointsHeight
-     }
-
-     imagePoint = thisObject.container.frame.frameThisPoint(imagePoint)
-
-     browserCanvasContext.drawImage(icon, imagePoint.x, imagePoint.y, imageWidth, imageHeight)
-   }
- }

EventHandler.js

@@ -28,6 +28,10 @@ function newEventHandler () {
   }
 
   function stopListening (pEventType, pHandler) {
+    if (pHandler === undefined) {
+      pHandler = 'Anonymous Function'
+    }
+
     if (thisObject.name !== undefined && CONSOLE_LOG === true) {
       console.log('Event Handler named ' + thisObject.name + ' received a request to stop listening to an the event ' + pEventType + ' with this handler: ' + pHandler)
     }
@@ -37,14 +41,24 @@ function newEventHandler () {
       let eventType = record[0]
       let handler = record[1]
 
-      if (pEventType === eventType && pHandler.toString() === handler.toString()) {
-        eventHandlers.splice(i, 1)
+      if (pHandler === 'Anonymous Function') {
+        if (pEventType === eventType) {
+          eventHandlers.splice(i, 1)
 
-        if (thisObject.name !== undefined && CONSOLE_LOG === true) {
-          console.log('Evethandler found and deleted.')
+          if (thisObject.name !== undefined && CONSOLE_LOG === true) {
+            console.log('Evethandler found and deleted.')
+          }
+          return
         }
+      } else {
+        if (pEventType === eventType && pHandler.toString() === handler.toString()) {
+          eventHandlers.splice(i, 1)
 
-        return
+          if (thisObject.name !== undefined && CONSOLE_LOG === true) {
+            console.log('Evethandler found and deleted.')
+          }
+          return
+        }
       }
     }
   }

Panels/ProductsPanel.js

@@ -76,7 +76,7 @@
          let bot = devTeam.bots[j]
 
          if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue }
-         if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== 'AAVikings' && devTeam.codeName !== userTeam.slug)) { continue }
+         if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== userTeam.slug)) { continue }
 
          if (bot.products !== undefined) {
            for (let k = 0; k < bot.products.length; k++) {

PlottersManager.js

@@ -111,36 +111,6 @@ function newPlottersManager () {
 
       initializeCompetitionPlotters(onCompetitionPlottersInitialized)
 
-      canvas.bottomSpace.chartAspectRatio.container.eventHandler.listenToEvent('Chart Aspect Ratio Changed', onAspectRatioChanged)
-
-      function onAspectRatioChanged (pAspectRatio) {
-        thisObject.container.frame.height = TIME_MACHINE_HEIGHT * pAspectRatio.y
-
-                /* First the Product Plotters. */
-
-        for (let i = 0; i < productPlotters.length; i++) {
-          let productPlotter = productPlotters[i]
-          productPlotter.plotter.container.frame.width = thisObject.container.frame.width
-          productPlotter.plotter.container.frame.height = thisObject.container.frame.height
-
-          if (productPlotter.plotter.recalculateScale !== undefined) {
-            productPlotter.plotter.recalculateScale()
-          }
-        }
-
-                /* Then the competition plotters. */
-
-        for (let i = 0; i < competitionPlotters.length; i++) {
-          let competitionPlotter = competitionPlotters[i]
-          competitionPlotter.plotter.container.frame.width = thisObject.container.frame.width
-          competitionPlotter.plotter.container.frame.height = thisObject.container.frame.height
-
-          if (competitionPlotter.plotter.recalculateScale !== undefined) {
-            competitionPlotter.plotter.recalculateScale()
-          }
-        }
-      }
-
       function onCompetitionPlottersInitialized (err) {
         try {
           if (INFO_LOG === true) { logger.write('[INFO] initialize -> onCompetitionPlottersInitialized -> Entering function.') }

Scales/ChartGrid.js

@@ -19,13 +19,10 @@
    container.isDraggeable = false
    container.isClickeable = true
 
-   let rigthScale
-
    return thisObject
 
    function initialize () {
-     rigthScale = newRigthScale()
-     rigthScale.initialize()
+
    }
 
    function getContainer (point) {
@@ -47,6 +44,8 @@
    }
 
    function draw (container, timeLineCoordinateSystem) {
+     return // not for now
+
      rightScaleBackground()
      leftScaleBackground()
 
@@ -56,7 +55,7 @@
 
      const basePeriod = {
        x: 8 * 60 * 60 * 1000,
-       y: timeLineCoordinateSystem.max.y / 1000 / canvas.bottomSpace.chartAspectRatio.aspectRatio.y
+       y: timeLineCoordinateSystem.max.y / 1000
      }
 
      let period = {

Scales/RightScale.js

@@ -1,40 +1,77 @@
  function newRigthScale () {
+   const MODULE_NAME = 'Right Scale'
+   const INFO_LOG = false
+   const INTENSIVE_LOG = false
+   const ERROR_LOG = true
+   const logger = newWebDebugLog()
+   logger.fileName = MODULE_NAME
+
    let thisObject = {
      container: undefined,
      draw: draw,
      getContainer: getContainer,
-     initialize: initialize
+     initialize: initialize,
+     heightPercentage: 100
    }
 
+   const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50
    const RIGHT_MARGIN = 50
+   const STEP_SIZE = 5
 
-   let container = newContainer()
-   container.initialize()
-   thisObject.container = container
+   thisObject.container = newContainer()
+   thisObject.container.initialize(MODULE_NAME)
 
    thisObject.container.frame.width = RIGHT_MARGIN
    thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y
 
-   container.frame.position.x = viewPort.visibleArea.bottomRight.x
-   container.frame.position.y = TOP_SPACE_HEIGHT
+   thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x
+   thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
 
-   container.isDraggeable = false
-   container.isClickeable = false
-   container.isWheelable = true
+   thisObject.container.isDraggeable = false
+   thisObject.container.isClickeable = false
+   thisObject.container.isWheelable = true
+
+   let mouse = {
+     position: {
+       x: 0,
+       y: 0
+     }
+   }
 
    return thisObject
 
    function initialize () {
      thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
+
+     thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME)
+     if (!thisObject.heightPercentage) {
+       thisObject.heightPercentage = HEIGHT_PERCENTAGE_DEFAULT_VALUE
+     } else {
+       thisObject.heightPercentage = JSON.parse(thisObject.heightPercentage)
+     }
+
+     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
+     })
    }
 
    function onMouseWheel (event) {
      delta = event.wheelDelta
      if (delta < 0) {
-       delta = -0.1
+       thisObject.heightPercentage = thisObject.heightPercentage - STEP_SIZE
+       if (thisObject.heightPercentage < STEP_SIZE) { thisObject.heightPercentage = STEP_SIZE }
      } else {
-       delta = 0.1
+       thisObject.heightPercentage = thisObject.heightPercentage + STEP_SIZE
+       if (thisObject.heightPercentage > 100) { thisObject.heightPercentage = 100 }
      }
+     event.heightPercentage = thisObject.heightPercentage
+     thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event)
+
+     window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage)
    }
 
    function getContainer (point) {
@@ -43,7 +80,7 @@
         /* First we check if this point is inside this object UI. */
 
      if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-       return this.container
+       return thisObject.container
      } else {
             /* This point does not belong to this space. */
 
@@ -52,6 +89,55 @@
    }
 
    function draw () {
+     drawBackground()
+     drawLabel()
+   }
 
+   function drawBackground () {
+     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 drawLabel () {
+     let label = '6000'
+     let fontSize = 10
+
+     let ratePoint = {
+       x: 0,
+       y: mouse.position.y
+     }
+
+     // getRateFromPoint(ratePoint)
+
+     let labelPoint = {
+       x: viewPort.visibleArea.topRight.x + 5,
+       y: mouse.position.y - fontSize / 2 + 1
+     }
+
+     let xOffset = 0// label.length / 2 * fontSize * FONT_ASPECT_RATIO
+
+     browserCanvasContext.beginPath()
+
+     browserCanvasContext.rect(labelPoint.x, labelPoint.y, xOffset * 2, fontSize)
+     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'
+     browserCanvasContext.fill()
+
+     browserCanvasContext.closePath()
+
+     browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+     browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
+     browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
    }
  }

Scales/TimeScale.js

@@ -11,42 +11,56 @@ function newTimeScale () {
     draw: draw,
     getContainer: getContainer,
     initialize: initialize,
-    lenghtPercentage: 100
+    lenghtPercentage: undefined
   }
 
+  const LENGHT_PERCENTAGE_DEFAULT_VALUE = 50
   const RIGHT_MARGIN = 50
+  const STEP_SIZE = 5
 
-  let container = newContainer()
-  container.initialize(MODULE_NAME)
-  thisObject.container = container
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
 
   thisObject.container.frame.width = viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x
   thisObject.container.frame.height = 100
 
-  container.frame.position.x = viewPort.visibleArea.bottomRight.x
-  container.frame.position.y = TOP_SPACE_HEIGHT
+  thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x
+  thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
 
-  container.isDraggeable = false
-  container.isClickeable = false
-  container.isWheelable = true
+  thisObject.container.isDraggeable = false
+  thisObject.container.isClickeable = false
+  thisObject.container.isWheelable = true
 
   return thisObject
 
   function initialize () {
     thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
+
+    thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME)
+    if (!thisObject.lenghtPercentage) {
+      thisObject.lenghtPercentage = LENGHT_PERCENTAGE_DEFAULT_VALUE
+    } else {
+      thisObject.lenghtPercentage = JSON.parse(thisObject.lenghtPercentage)
+    }
+
+    event.lenghtPercentage = thisObject.lenghtPercentage
+    thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
   }
 
   function onMouseWheel (event) {
     delta = event.wheelDelta
     if (delta < 0) {
-      thisObject.lenghtPercentage = thisObject.lenghtPercentage - 10
-      if (thisObject.lenghtPercentage < 10) { thisObject.lenghtPercentage = 10 }
+      thisObject.lenghtPercentage = thisObject.lenghtPercentage - STEP_SIZE
+      if (thisObject.lenghtPercentage < STEP_SIZE) { thisObject.lenghtPercentage = STEP_SIZE }
     } else {
-      thisObject.lenghtPercentage = thisObject.lenghtPercentage + 10
+      thisObject.lenghtPercentage = thisObject.lenghtPercentage + STEP_SIZE
       if (thisObject.lenghtPercentage > 100) { thisObject.lenghtPercentage = 100 }
     }
+
     event.lenghtPercentage = thisObject.lenghtPercentage
     thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
+
+    window.localStorage.setItem(MODULE_NAME, thisObject.lenghtPercentage)
   }
 
   function getContainer (point) {
@@ -55,7 +69,7 @@ function newTimeScale () {
        /* First we check if this point is inside this object UI. */
 
     if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) {
-      return this.container
+      return thisObject.container
     } else {
            /* This point does not belong to this space. */
 

Spaces/BottomSpace.js

@@ -2,7 +2,6 @@
 function newBottomSpace () {
   var thisObject = {
     deleteTradingHistory: undefined,
-    chartAspectRatio: undefined,
     container: undefined,
     draw: draw,
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
@@ -23,9 +22,6 @@ function newBottomSpace () {
     thisObject.deleteTradingHistory = newDeleteTradingHistory()
     thisObject.deleteTradingHistory.initialize()
 
-    thisObject.chartAspectRatio = newChartAspectRatio()
-    thisObject.chartAspectRatio.initialize()
-
     window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize)
   }
 
@@ -43,11 +39,6 @@ function newBottomSpace () {
     container = thisObject.deleteTradingHistory.getContainer(point)
     if (container !== undefined) { return container }
 
-    container = thisObject.chartAspectRatio.getContainer(point)
-    if (container !== undefined) { return container }
-
-        /* The point does not belong to any inner container, so we return the current container. */
-
     return thisObject.container
   }
 
@@ -56,7 +47,6 @@ function newBottomSpace () {
 
     drawBackground()
     thisObject.deleteTradingHistory.draw()
-    thisObject.chartAspectRatio.draw()
   }
 
   function drawBackground () {

Spaces/ChartSpace.js

@@ -25,13 +25,7 @@ function newChartSpace () {
 
   thisObject.container = newContainer()
   thisObject.container.initialize(MODULE_NAME)
-/*
-  thisObject.container.frame.width = TIME_MACHINE_WIDTH
-  thisObject.container.frame.height = TIME_MACHINE_HEIGHT * canvas.bottomSpace.chartAspectRatio.aspectRatio.y
 
-  thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2
-  thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2
-*/
   thisObject.container.isDraggeable = false
 
   return thisObject

TimeMachine.js

@@ -31,7 +31,7 @@ function newTimeMachine () {
   thisObject.container.detectMouseOver = true
 
   thisObject.container.frame.width = TIME_MACHINE_WIDTH
-  thisObject.container.frame.height = TIME_MACHINE_HEIGHT * canvas.bottomSpace.chartAspectRatio.aspectRatio.y
+  thisObject.container.frame.height = TIME_MACHINE_HEIGHT
 
   thisObject.container.frame.position.x = browserCanvas.width / 2 - TIME_MACHINE_WIDTH / 2
   thisObject.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2
@@ -41,6 +41,7 @@ function newTimeMachine () {
   const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5
 
   let timeScale
+  let rigthScale
 
   return thisObject
 
@@ -66,16 +67,6 @@ function newTimeMachine () {
     controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner)
     let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner)
 
-       /* Each Time Machine has a Time Scale. */
-
-    timeScale = newTimeScale()
-    timeScale.initialize()
-
-    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)
-    })
-
       /* 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.
@@ -94,11 +85,7 @@ function newTimeMachine () {
     timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, onDefaultInitialized)
 
     function onDefaultInitialized (err) {
-      if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultInitialized -> Entering function.') }
-
       if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-        if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultInitialized -> Initialization of the only market failed.') }
-
         callBackFunction(err)
         return
       }
@@ -108,6 +95,26 @@ function newTimeMachine () {
       controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined)
       timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime)
 
+      /* Each Time Machine has a Time Scale and a Right Scale. */
+
+      timeScale = newTimeScale()
+
+      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()
+
+      rigthScale = newRigthScale()
+
+      rigthScale.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)
+      })
+
+      rigthScale.initialize()
+
       initializeTheRest()
     }
 
@@ -186,16 +193,28 @@ function newTimeMachine () {
       chart.draw()
     }
 
-    timeScale.draw()
+    if (timeScale !== undefined) { timeScale.draw() }
+    if (rigthScale !== undefined) { rigthScale.draw() }
   }
 
   function getContainer (point, purpose) {
     let container
 
-    container = timeScale.getContainer(point)
-    if (container !== undefined) {
-      if (container.isForThisPurpose(purpose)) {
-        return container
+    if (timeScale !== undefined) {
+      container = timeScale.getContainer(point)
+      if (container !== undefined) {
+        if (container.isForThisPurpose(purpose)) {
+          return container
+        }
+      }
+    }
+
+    if (rigthScale !== undefined) {
+      container = rigthScale.getContainer(point)
+      if (container !== undefined) {
+        if (container.isForThisPurpose(purpose)) {
+          return container
+        }
       }
     }
 

TimelineChart.js

@@ -25,7 +25,7 @@
    thisObject.container.initialize(MODULE_NAME)
    thisObject.container.detectMouseOver = true
 
-   let chartGrid
+   // let chartGrid
    let breakpointsBar
 
    let initializationReady = false
@@ -66,7 +66,7 @@
 
        thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) {
          recalculateScale()
-         moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true, event.mousePosition)
+         moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition)
        })
 
        thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
@@ -116,8 +116,8 @@
        logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png'
        logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png'
 
-       chartGrid = newChartGrid()
-       chartGrid.initialize()
+       // chartGrid = newChartGrid()
+       // chartGrid.initialize()
 
        breakpointsBar = newBreakpointsBar()
        breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem)
@@ -159,13 +159,6 @@
          callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
          return
        }
-
-       canvas.bottomSpace.chartAspectRatio.container.eventHandler.listenToEvent('Chart Aspect Ratio Changed', onAspectRatioChanged)
-
-       function onAspectRatioChanged (pAspectRatio) {
-         thisObject.container.frame.height = TIME_MACHINE_HEIGHT * pAspectRatio.y
-         recalculateScale()
-       }
      } catch (err) {
        if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
        callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
@@ -251,7 +244,7 @@
 
      let container
 
-     container = chartGrid.getContainer(point)
+     // container = chartGrid.getContainer(point)
 
      if (container !== undefined) { return container }
 
@@ -321,7 +314,7 @@
      if (thisObject.container.frame.isInViewPort()) {
        drawChartsBackground()
 
-       chartGrid.draw(thisObject.container, timeLineCoordinateSystem)
+       // chartGrid.draw(thisObject.container, timeLineCoordinateSystem)
 
        plotterManager.draw()