rateScale at timelineChart ported

ChartsSpace/CoordinateSystem.js

@@ -7,7 +7,7 @@ The scale on the Y axis depends on the data that wants to be plotted. Usually we
 
 */
 
-function newTimeLineCoordinateSystem () {
+function newCoordinateSystem () {
   let thisObject = {
     min: undefined,
     max: undefined,
@@ -126,4 +126,3 @@ function newTimeLineCoordinateSystem () {
     return point
   }
 }
-

ChartsSpace/TimeMachine.js

@@ -31,9 +31,7 @@ function newTimeMachine () {
     finalize: finalize
   }
 
-  const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5
-
-  let timeLineCoordinateSystem = newTimeLineCoordinateSystem()
+  let timeMachineCoordinateSystem = newCoordinateSystem()
 
   let mouse = {
     position: {
@@ -125,7 +123,7 @@ function newTimeMachine () {
 
   function initialize (callBackFunction) {
     timeFrame = INITIAL_TIME_PERIOD
-    recalculateScale()
+    recalculateCoordinateSystem()
 
     onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
 
@@ -171,12 +169,12 @@ function newTimeMachine () {
 
     timeScaleEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
       thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100
-      recalculateScale()
-      moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true, event.mousePosition, false, true)
+      recalculateCoordinateSystem()
+      moveToUserPosition(thisObject.container, timeMachineCoordinateSystem, false, true, event.mousePosition, false, true)
       thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
     })
 
-    thisObject.timeScale.initialize(timeLineCoordinateSystem, thisObject.container)
+    thisObject.timeScale.initialize(timeMachineCoordinateSystem, thisObject.container)
 
     timeScaleMouseOverEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('onMouseOver', timeScaleMouseOver)
 
@@ -192,12 +190,12 @@ function newTimeMachine () {
 
     rateScaleEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
       thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100
-      recalculateScale()
-      moveToUserPosition(thisObject.container, timeLineCoordinateSystem, true, false, event.mousePosition, false, true)
+      recalculateCoordinateSystem()
+      moveToUserPosition(thisObject.container, timeMachineCoordinateSystem, true, false, event.mousePosition, false, true)
       thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
     })
 
-    thisObject.rateScale.initialize(timeLineCoordinateSystem, thisObject.container)
+    thisObject.rateScale.initialize(timeMachineCoordinateSystem, thisObject.container)
 
     rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOver', rateScaleMouseOver)
 
@@ -225,7 +223,7 @@ function newTimeMachine () {
       }
     })
 
-    thisObject.timeFrameScale.initialize(timeLineCoordinateSystem, thisObject.container)
+    thisObject.timeFrameScale.initialize(timeMachineCoordinateSystem, thisObject.container)
 
     timeFrameScaleMouseOverEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('onMouseOver', timeFrameScaleMouseOver)
 
@@ -292,6 +290,12 @@ function newTimeMachine () {
   }
 
   function syncWithDesignerScales () {
+    if (thisObject.payload.node === undefined) {
+      finalizeTimeScale()
+      finalizeRateScale()
+      finalizeTimeFrameScale()
+      return
+    }
     if (thisObject.payload.node.timeScale === undefined && thisObject.timeScale !== undefined) {
       finalizeTimeScale()
     }
@@ -355,7 +359,7 @@ function newTimeMachine () {
       timelineChart.container.frame.height = thisObject.container.frame.height
       timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2
       timelineChart.container.frame.position.y = 0
-      timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, timeLineCoordinateSystem, onTimelineChartInitialized)
+      timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, timeMachineCoordinateSystem, onTimelineChartInitialized)
 
       /* we will store the event suscription id as a property of the timelineChart, to avoid keeping it an a separate array */
       timelineChart.onChildrenMouseOverEventSuscriptionId = timelineChart.container.eventHandler.listenToEvent('onChildrenMouseOver', onChildrenMouseOver)
@@ -384,7 +388,7 @@ function newTimeMachine () {
       y: 0
     }
 
-    let cornerDate = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem)
+    let cornerDate = getDateFromPoint(point, thisObject.container, timeMachineCoordinateSystem)
     cornerDate = new Date(cornerDate)
     window.localStorage.setItem('Date @ Screen Corner', cornerDate.toUTCString())
   }
@@ -430,7 +434,7 @@ function newTimeMachine () {
     }
   }
 
-  function recalculateScale () {
+  function recalculateCoordinateSystem () {
     let minValue = {
       x: MIN_PLOTABLE_DATE.valueOf(),
       y: 0
@@ -441,7 +445,7 @@ function newTimeMachine () {
       y: nextPorwerOf10(USDT_BTC_HTH) / 4
     }
 
-    timeLineCoordinateSystem.initialize(
+    timeMachineCoordinateSystem.initialize(
           minValue,
           maxValue,
           thisObject.container.frame.width,

ChartsSpace/TimelineChart.js

@@ -6,14 +6,13 @@ function newTimelineChart () {
   const logger = newWebDebugLog()
   logger.fileName = MODULE_NAME
 
-  let timeLineCoordinateSystem
-
   let timeFrame = INITIAL_TIME_PERIOD
   let datetime = NEW_SESSION_INITIAL_DATE
 
   let thisObject = {
     container: undefined,
     fitFunction: undefined,
+    rateScale: undefined,
     timeFrameScale: undefined,
     payload: undefined,
     plotterManager: undefined,
@@ -28,6 +27,9 @@ function newTimelineChart () {
 
   thisObject.fitFunction = canvas.chartSpace.fitIntoVisibleArea
 
+  let timeMachineCoordinateSystem
+  let timelineChartCoordinateSystem = newCoordinateSystem()
+
   let initializationReady = false
 
   let productsPanel
@@ -61,6 +63,10 @@ function newTimelineChart () {
   }
 
   function finalize () {
+    if (thisObject.rateScale !== undefined) {
+      finalizeRateScale()
+    }
+
     if (thisObject.timeFrameScale !== undefined) {
       finalizeTimeFrameScale()
     }
@@ -93,19 +99,29 @@ function newTimelineChart () {
     }
   }
 
-  function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) {
+  function finalizeRateScale () {
+    thisObject.rateScale.container.eventHandler.stopListening(rateScaleEventSuscriptionId)
+    thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId)
+    thisObject.rateScale.finalize()
+    thisObject.rateScale = undefined
+
+    /* Resets the local container with the dimessions of its parent, the Time Machine */
+    thisObject.container.frame.position.position.y = 0
+    thisObject.container.frame.position.height = thisObject.container.parentContainer.frame.height
+  }
+
+  function initialize (pExchange, pMarket, pTimeMachineCoordinateSystem, callBackFunction) {
     try {
        /* We load the logow we will need for the background. */
       exchange = pExchange
       market = pMarket
-      timeLineCoordinateSystem = pTimeLineCoordinateSystem
+      timeMachineCoordinateSystem = pTimeMachineCoordinateSystem
 
       let panelOwner = exchange + ' ' + market.quotedAsset + '/' + market.baseAsset
       productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner)
       let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner)
       productsPanel.initialize(exchange, market)
 
-      // moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true)
       timeFrame = INITIAL_TIME_PERIOD
       datetime = NEW_SESSION_INITIAL_DATE
 
@@ -137,6 +153,11 @@ function newTimelineChart () {
 
         function onMouseOver (event) {
           /* This event gets to the timelinechart container because it inherits it from the time machine container, which is the one raising Mouse Over and Mouse not Over Events to its children. */
+          if (thisObject.rateScale !== undefined) {
+            thisObject.rateScale.onMouseOverSomeTimeMachineContainer(event)
+            thisObject.rateScale.visible = true
+          }
+
           if (thisObject.timeFrameScale !== undefined) {
             thisObject.timeFrameScale.visible = true
             thisObject.timeFrameScale.onMouseOverSomeTimeMachineContainer(event)
@@ -145,13 +166,16 @@ function newTimelineChart () {
           mouse.position.x = event.x
           mouse.position.y = event.y
 
-          saveUserPosition(thisObject.container, timeLineCoordinateSystem, event)
+          saveUserPosition(thisObject.container, timeMachineCoordinateSystem, event)
         }
 
         onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
         function onMouseNotOver (event) {
           /* This event is inherited from the Time Machine */
+          if (thisObject.rateScale !== undefined) {
+            thisObject.rateScale.visible = false
+          }
           if (thisObject.timeFrameScale !== undefined) {
             thisObject.timeFrameScale.visible = false
           }
@@ -167,6 +191,27 @@ function newTimelineChart () {
     }
   }
 
+  function initializeRateScale () {
+    thisObject.rateScale = newRateScale()
+    thisObject.rateScale.fitFunction = thisObject.fitFunction
+    thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload
+
+    rateScaleEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
+      thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100
+      recalculateCoordinateSystem()
+      moveToUserPosition(thisObject.container, timelineChartCoordinateSystem, true, false, event.mousePosition, false, true)
+      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
+    })
+
+    thisObject.rateScale.initialize(timelineChartCoordinateSystem, thisObject.container)
+
+    rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOver', rateScaleMouseOver)
+
+    function rateScaleMouseOver (event) {
+      thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event)
+    }
+  }
+
   function initializeTimeFrameScale () {
     thisObject.timeFrameScale = newTimeFrameScale()
     thisObject.timeFrameScale.fitFunction = thisObject.fitFunction
@@ -180,14 +225,14 @@ function newTimelineChart () {
       }
     })
 
-    thisObject.timeFrameScale.initialize(timeLineCoordinateSystem, thisObject.container)
+    thisObject.timeFrameScale.initialize(timeMachineCoordinateSystem, thisObject.container)
 
     timeFrameScaleMouseOverEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('onMouseOver', timeFrameScaleMouseOver)
 
     function timeFrameScaleMouseOver (event) {
       thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event)
 
-      saveUserPosition(thisObject.container, timeLineCoordinateSystem, event)
+      saveUserPosition(thisObject.container, timeMachineCoordinateSystem, event)
     }
   }
 
@@ -195,7 +240,7 @@ function newTimelineChart () {
     if (initializationReady === true) {
       recalculateCurrentDatetime()
 
-      // saveUserPosition(thisObject.container, timeLineCoordinateSystem)
+      // saveUserPosition(thisObject.container, timeMachineCoordinateSystem)
     }
   }
 
@@ -203,7 +248,7 @@ function newTimelineChart () {
     if (initializationReady === true) {
       if (thisObject.container.frame.isInViewPort()) {
         recalculateCurrentDatetime()
-        // saveUserPosition(thisObject.container, timeLineCoordinateSystem)
+        // saveUserPosition(thisObject.container, timeMachineCoordinateSystem)
       }
     }
   }
@@ -222,7 +267,11 @@ function newTimelineChart () {
     }
 
     center = unTransformThisPoint(center, thisObject.container)
-    center = timeLineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height)
+    if (thisObject.rateScale === undefined) {
+      center = timeMachineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height)
+    } else {
+      center = timelineChartCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height)
+    }
 
     let newDate = new Date(0)
     newDate.setUTCSeconds(center.x / 1000)
@@ -235,6 +284,15 @@ function newTimelineChart () {
   function getContainer (point, purpose) {
     let container
 
+    if (thisObject.rateScale !== undefined) {
+      container = thisObject.rateScale.getContainer(point)
+      if (container !== undefined) {
+        if (container.isForThisPurpose(purpose)) {
+          return container
+        }
+      }
+    }
+
     if (thisObject.timeFrameScale !== undefined) {
       container = thisObject.timeFrameScale.getContainer(point)
       if (container !== undefined) {
@@ -258,6 +316,17 @@ function newTimelineChart () {
   }
 
   function syncWithDesignerScales () {
+    if (thisObject.payload.node === undefined) {
+      finalizeRateScale()
+      finalizeTimeFrameScale()
+      return
+    }
+    if (thisObject.payload.node.rateScale === undefined && thisObject.rateScale !== undefined) {
+      finalizeRateScale()
+    }
+    if (thisObject.payload.node.rateScale !== undefined && thisObject.rateScale === undefined) {
+      initializeRateScale()
+    }
     if (thisObject.payload.node.timeFrameScale === undefined && thisObject.timeFrameScale !== undefined) {
       finalizeTimeFrameScale()
     }
@@ -267,6 +336,9 @@ function newTimelineChart () {
   }
 
   function childrenPhysics () {
+    if (thisObject.rateScale !== undefined) {
+      thisObject.rateScale.physics()
+    }
     if (thisObject.timeFrameScale !== undefined) {
       thisObject.timeFrameScale.physics()
     }
@@ -300,9 +372,8 @@ function newTimelineChart () {
 
   function draw () {
     if (thisObject.container.frame.isInViewPort()) {
-      if (thisObject.timeFrameScale !== undefined) {
-        thisObject.timeFrameScale.draw()
-      }
+      if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() }
+      if (thisObject.timeFrameScale !== undefined) { thisObject.timeFrameScale.draw() }
     }
   }
 
@@ -336,4 +407,23 @@ function newTimelineChart () {
 
     browserCanvasContext.fill()
   }
+
+  function recalculateCoordinateSystem () {
+    let minValue = {
+      x: MIN_PLOTABLE_DATE.valueOf(),
+      y: 0
+    }
+
+    let maxValue = {
+      x: MAX_PLOTABLE_DATE.valueOf(),
+      y: nextPorwerOf10(USDT_BTC_HTH) / 4
+    }
+
+    timelineChartCoordinateSystem.initialize(
+          minValue,
+          maxValue,
+          thisObject.container.frame.width,
+          thisObject.container.frame.height
+      )
+  }
 }

Plotter.js

@@ -31,7 +31,7 @@ function newPlotter () {
   container.initialize()
   thisObject.container = container
 
-  let timeLineCoordinateSystem = newTimeLineCoordinateSystem()        // Needed to be able to plot on the timeline.
+  let coordinateSystem = newCoordinateSystem()        // Needed to be able to plot on the timeline.
   let slotCoordinateSystem                                            // Needed to be able to plot on a slot over the timeline.
   let plotterModuleConfig
   let slotHeight = (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 10  // This is the amount of slots available
@@ -84,7 +84,7 @@ function newPlotter () {
       marketFile = undefined
       fileCursor = undefined
 
-      timeLineCoordinateSystem = undefined
+      coordinateSystem = undefined
       slotCoordinateSystem = undefined
       plotterModuleConfig = undefined
       slotHeight = undefined
@@ -353,8 +353,8 @@ function newPlotter () {
 
       let daysOnSides = getSideDays(timeFrame)
 
-      let leftDate = getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem)
-      let rightDate = getDateFromPoint(viewPort.visibleArea.topRight, thisObject.container, timeLineCoordinateSystem)
+      let leftDate = getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, coordinateSystem)
+      let rightDate = getDateFromPoint(viewPort.visibleArea.topRight, thisObject.container, coordinateSystem)
 
       let dateDiff = rightDate.valueOf() - leftDate.valueOf()
 
@@ -406,8 +406,8 @@ function newPlotter () {
 
       let daysOnSides = getSideDays(timeFrame)
 
-      let leftDate = getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem)
-      let rightDate = getDateFromPoint(viewPort.visibleArea.topRight, thisObject.container, timeLineCoordinateSystem)
+      let leftDate = getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, coordinateSystem)
+      let rightDate = getDateFromPoint(viewPort.visibleArea.topRight, thisObject.container, coordinateSystem)
 
       let dateDiff = rightDate.valueOf() - leftDate.valueOf()
 
@@ -441,7 +441,7 @@ function newPlotter () {
 
   function recalculateScale () {
     try {
-      if (timeLineCoordinateSystem.maxValue > 0) { return } // Already calculated.
+      if (coordinateSystem.maxValue > 0) { return } // Already calculated.
       /* First we calculate the default scale */
       let minValue = {
         x: MIN_PLOTABLE_DATE.valueOf(),
@@ -453,7 +453,7 @@ function newPlotter () {
         y: nextPorwerOf10(USDT_BTC_HTH) / 4 // TODO: This 4 is temporary
       }
 
-      timeLineCoordinateSystem.initialize(
+      coordinateSystem.initialize(
                 minValue,
                 maxValue,
                 thisObject.container.frame.width,
@@ -465,7 +465,7 @@ function newPlotter () {
       plotterModuleConfig = productDefinition.referenceParent.code
       if (plotterModuleConfig.slot === undefined) { return }
 
-      slotCoordinateSystem = newTimeLineCoordinateSystem()
+      slotCoordinateSystem = newCoordinateSystem()
 
       minValue.y = plotterModuleConfig.slot.minValue
       maxValue.y = plotterModuleConfig.slot.maxValue
@@ -511,8 +511,8 @@ function newPlotter () {
           y: 0
         }
 
-        beginPoint = timeLineCoordinateSystem.transformThisPoint(beginPoint)
-        endPoint = timeLineCoordinateSystem.transformThisPoint(endPoint)
+        beginPoint = coordinateSystem.transformThisPoint(beginPoint)
+        endPoint = coordinateSystem.transformThisPoint(endPoint)
 
         beginPoint = transformThisPoint(beginPoint, thisObject.container)
         endPoint = transformThisPoint(endPoint, thisObject.container)
@@ -565,7 +565,7 @@ function newPlotter () {
               The information we store in files is independent from the charing system and its coordinate systems.
               That means that the first thing we allways need to do is to trasform these points to the coordinate system of the timeline.
               */
-                dataPoint = timeLineCoordinateSystem.transformThisPoint(dataPoint)
+                dataPoint = coordinateSystem.transformThisPoint(dataPoint)
 
               /*
               The browser canvas object does not care about our timeline and its coordinate system. In order to draw on a html canvas we

Scales/RateScale.js

@@ -144,6 +144,24 @@ function newRateScale () {
     upCorner = limitingContainer.fitFunction(upCorner, true)
     bottonCorner = limitingContainer.fitFunction(bottonCorner, true)
 
+    /* We will check if we need to change the bottom because of being one of many scales of the same type */
+    let displaceFactor = 0
+    if (thisObject.payload.parentNode === undefined) { return } // This happens when in the process of deleting the scale, timeline chart or time machine.
+    if (thisObject.payload.parentNode.type === 'Timeline Chart') {
+      if (thisObject.payload.parentNode.payload.parentNode.rateScale !== undefined) {
+        displaceFactor++
+      }
+      for (let i = 0; i < thisObject.payload.parentNode.payload.parentNode.timelineCharts.length; i++) {
+        let timelineChart = thisObject.payload.parentNode.payload.parentNode.timelineCharts[i]
+        if (thisObject.payload.node.id !== timelineChart.rateScale.id) {
+          displaceFactor++
+        } else {
+          break
+        }
+      }
+    }
+    bottonCorner.x = bottonCorner.x - thisObject.container.frame.width * displaceFactor
+
     /* Mouse Position Rate Calculation */
     let ratePoint = {
       x: 0,

Scales/TimeFrameScale.js

@@ -112,22 +112,22 @@ function newTimeFrameScale () {
     bottonCorner = limitingContainer.fitFunction(bottonCorner, true)
 
     /* We will check if we need to change the bottom because of being one of many scales of the same type */
-    let levelsUp = 0
+    let displaceFactor = 0
     if (thisObject.payload.parentNode === undefined) { return } // This happens when in the process of deleting the scale, timeline chart or time machine.
     if (thisObject.payload.parentNode.type === 'Timeline Chart') {
       if (thisObject.payload.parentNode.payload.parentNode.timeFrameScale !== undefined) {
-        levelsUp++
+        displaceFactor++
       }
       for (let i = 0; i < thisObject.payload.parentNode.payload.parentNode.timelineCharts.length; i++) {
         let timelineChart = thisObject.payload.parentNode.payload.parentNode.timelineCharts[i]
         if (thisObject.payload.node.id !== timelineChart.timeFrameScale.id) {
-          levelsUp++
+          displaceFactor++
         } else {
           break
         }
       }
     }
-    bottonCorner.y = bottonCorner.y - thisObject.container.frame.height * levelsUp
+    bottonCorner.y = bottonCorner.y - thisObject.container.frame.height * displaceFactor
 
     /* Positioning */
     timePoint = {