Merge pull request #38 from Superalgos/develop

Charts improvements

Canvas.js

@@ -159,13 +159,13 @@ function newCanvas () {
 
                    /* Here we add all the functions that will be called during the animation cycle. */
 
+          animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded)
           animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded)
           animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded)
           animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded)
           animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded)
-          animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded)
           animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded)
           animation.start(onStart)

ChartUtilities.js

@@ -139,4 +139,5 @@ function recalculatePeriod (zoomLevel) {
   if (zoomLevel <= -28) {
     return ONE_DAY_IN_MILISECONDS
   }
+  return ONE_DAY_IN_MILISECONDS
 }

Container.js

@@ -45,6 +45,7 @@ function newContainer () {
     thisObject.parentContainer = parentContainer
     thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged)
     thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
     if (connectedToParentWidth) {
       thisObject.frame.width = thisObject.parentContainer.frame.width
@@ -74,6 +75,10 @@ function newContainer () {
     thisObject.eventHandler.raiseEvent('onMouseOver', event)
   }
 
+  function onMouseNotOver (event) {
+    thisObject.eventHandler.raiseEvent('onMouseNotOver', event)
+  }
+
   function isForThisPurpose (purpose) {
     if (purpose !== undefined) {
       switch (purpose) {

Dashboard.js

@@ -2,8 +2,6 @@
 let canvas
 let markets
 let ecosystem = newEcosystem()
-let INITIAL_ZOOM_LEVEL = -26       // This is the zoom level at the view port in which the APP starts.
-let INITIAL_TIME_PERIOD = recalculatePeriod(MIN_ZOOM_LEVEL)  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
 let viewPort = newViewPort()
 
 function newDashboard () {

Frame.js

@@ -397,6 +397,11 @@ function newFrame () {
   function borders () {
         /* Lest get the important points of the drawing so as to apply the needed transformations. */
 
+    let point1
+    let point2
+    let point3
+    let point4
+
     point1 = {
       x: 0,
       y: 0

Globals.js

@@ -117,6 +117,8 @@ function convertTimePeriodToName(pTimePeriod) {
 
 window.AT_BREAKPOINT = false;
 
+
+
 const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line.
 
 const WIDHTER_VOLUME_BAR_BASE_FACTOR = 2.5;
@@ -143,7 +145,16 @@ const _3_MINUTES_IN_MILISECONDS = 3 * 60 * 1000;
 const _2_MINUTES_IN_MILISECONDS = 2 * 60 * 1000;
 const _1_MINUTE_IN_MILISECONDS = 1 * 60 * 1000;
 
-const EARLIEST_DATE = new Date(2014, 0, 18, 4, 26, 8);
+let NEW_SESSION_INITIAL_DATE = new Date();  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
+let INITIAL_ZOOM_LEVEL = -28.25       // This is the zoom level at the view port in which the APP starts.
+let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
+
+let maxDate = new Date();
+maxDate.setMilliseconds(0);
+maxDate.setDate(maxDate.getDate() + 365 * 1);  // We might have charts that projects data into the future. 
+
+const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0);
+const MAX_PLOTABLE_DATE = maxDate;
 
 const TOP_SPACE_HEIGHT = 5;
 const BOTTOM_SPACE_HEIGHT = 35;
@@ -167,13 +178,9 @@ const PERIOD_10_MIN = "10-min";
 const PERIOD_05_MIN = "05-min";
 const PERIOD_01_MIN = "01-min";
 
-let INITIAL_DATE = new Date();  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
 
-var maxDate = new Date();
-maxDate.setMilliseconds(0);
-maxDate.setDate(maxDate.getDate() + 10);
 
-const MAX_PLOTABLE_DATE = maxDate;
+
 
 /*
 We define here the size of the chartSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space.

Panels/ProductsPanel.js

@@ -81,7 +81,7 @@
          if (bot.products !== undefined) {
            for (let k = 0; k < bot.products.length; k++) {
              let product = bot.products[k]
-
+             if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue }
                         /* Now we create Product objects */
 
              let productCard = newProductCard()

Panels/TimeControlPanel.js

@@ -37,7 +37,7 @@ function newTimeControlPanel () {
     panelTabButton.container.frame.parentFrame = thisObject.container.frame
     panelTabButton.initialize()
 
-    let datetime = INITIAL_DATE
+    let datetime = NEW_SESSION_INITIAL_DATE
 
     let datetimeDisplay = {
       currentDatetime: datetime,
@@ -92,6 +92,7 @@ function newTimeControlPanel () {
   }
 
   function draw () {
+    return
     thisObject.container.frame.draw(false, false, true)
     thisObject.datetimeDisplay.draw()
     panelTabButton.draw()

PlottersManager.js

@@ -10,7 +10,7 @@ function newPlottersManager () {
   let competitionPlotters = []
 
   let timePeriod = INITIAL_TIME_PERIOD
-  let datetime = INITIAL_DATE
+  let datetime = NEW_SESSION_INITIAL_DATE
 
   let thisObject = {
     setDatetime: setDatetime,
@@ -476,7 +476,7 @@ function newPlottersManager () {
               if (INFO_LOG === true) { logger.write('[INFO] initializeProductPlotter -> onProductStorageInitialized -> onPlotterInizialized -> key = ' + pProductCard.product.plotter.devTeam + '-' + pProductCard.product.plotter.codeName + '-' + pProductCard.product.plotter.moduleName) }
 
               try {
-                                // plotter.positionAtDatetime(INITIAL_DATE);
+                                // plotter.positionAtDatetime(NEW_SESSION_INITIAL_DATE);
               } catch (err) {
                                 // If the plotter does not implement this function its ok.
               }

ProductCard.js

@@ -70,7 +70,7 @@ function newProductCard () {
   }
 
   let timePeriod = INITIAL_TIME_PERIOD
-  let datetime = INITIAL_DATE
+  let datetime = NEW_SESSION_INITIAL_DATE
 
    /* TODO We are in a transition period in which bots and teams images might be located at different places.
    What we are going to do then is to try to load them from both places and use the variable that finally gets an

ProductStorage.js

@@ -186,7 +186,8 @@ function newProductStorage (pName) {
 
             let event = {
               totalValue: pCaller.getExpectedFiles(),
-              currentValue: pCaller.getFilesLoaded()
+              currentValue: pCaller.getFilesLoaded(),
+              filesNotLoaded: pCaller.getFilesNotLoaded()
             }
 
             thisObject.eventHandler.raiseEvent('Market File Loaded', event)
@@ -194,7 +195,7 @@ function newProductStorage (pName) {
             if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> event.currentValue = ' + event.currentValue) }
             if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> event.totalValue = ' + event.totalValue) }
 
-            if (event.currentValue === event.totalValue) {
+            if (event.currentValue + event.filesNotLoaded === event.totalValue) {
               dataSetsLoaded++
 
               if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> dataSetsLoaded = ' + dataSetsLoaded) }
@@ -424,4 +425,3 @@ function newProductStorage (pName) {
     }
   }
 }
-

Scales/ChartGrid.js

@@ -1,713 +0,0 @@
- function newChartGrid () {
-   let thisObject = {
-     container: undefined,
-     draw: draw,
-     getContainer: getContainer,
-     initialize: initialize
-   }
-
-   let container = newContainer()
-   container.initialize()
-   thisObject.container = container
-
-   thisObject.container.frame.width = 0
-   thisObject.container.frame.height = 0
-
-   container.frame.position.x = 0
-   container.frame.position.y = 0
-
-   container.isDraggeable = false
-   container.isClickeable = true
-
-   return thisObject
-
-   function initialize () {
-
-   }
-
-   function getContainer (point) {
-     let container
-
-     container = rigthScale.getContainer(point)
-
-     if (container !== undefined) {
-       return container
-     }
-
-     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-       return this.container
-     } else {
-            /* This point does not belong to this space. */
-
-       return undefined
-     }
-   }
-
-   function draw (container, timeLineCoordinateSystem) {
-     return // not for now
-
-     rightScaleBackground()
-     leftScaleBackground()
-
-     let periods = []
-     let boxes = []
-     let labels = []
-
-     const basePeriod = {
-       x: 8 * 60 * 60 * 1000,
-       y: timeLineCoordinateSystem.max.y / 1000
-     }
-
-     let period = {
-       x: basePeriod.x,
-       y: basePeriod.y
-     }
-
-     calculateTimeLabels()
-     printLabels(1000, 10000)
-
-     function calculateTimeLabels () {
-       periods.push(period)  // 0
-
-       period = {
-         x: basePeriod.x / 8,
-         y: basePeriod.y / 10
-       }
-
-       periods.push(period)  // 1
-
-       period = {
-         x: basePeriod.x / 8 / 6,
-         y: basePeriod.y / 100
-       }
-
-       periods.push(period)  // 2
-
-       period = {
-         x: basePeriod.x * 3,
-         y: basePeriod.y * 10
-       }
-
-       periods.push(period)  // 3
-
-       period = {
-         x: basePeriod.x * 3 * 7,
-         y: basePeriod.y * 100
-       }
-
-       periods.push(period)  // 4
-
-            /* Period #2 Plotting */
-
-       boxes = []
-       plotGrid(periods[2])
-       labels = []
-
-            /* Label Calculation */
-
-       for (let i = 0; i < boxes.length; i++) {
-         const UPPER_PERIOD = 1
-
-         let box = boxes[i]
-         let currentValue = box.topLeft
-
-         currentValue = unTransformThisPoint(currentValue, container)
-         currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height)
-
-                /* We must compare the current value on the current period, against the next period, to know which cell we are in. */
-
-         let distanceToNextPeriod = Math.trunc((currentValue.x / periods[UPPER_PERIOD].x - Math.trunc(currentValue.x / periods[UPPER_PERIOD].x)) * 1000)
-
-         switch (distanceToNextPeriod) {
-           case 0: {
-             labels.push('0')
-             break
-           }
-           case Math.trunc(1 / 6 * 1000): {
-
-           }
-             labels.push('10')
-             break
-           case Math.trunc(2 / 6 * 1000): {
-
-           }
-             labels.push('20')
-             break
-
-           case Math.trunc(3 / 6 * 1000): {
-
-           }
-             labels.push('30')
-             break
-
-           case Math.trunc(4 / 6 * 1000): {
-
-           }
-             labels.push('40')
-             break
-
-           case Math.trunc(5 / 6 * 1000): {
-
-           }
-             labels.push('50')
-             break
-
-         }
-       }
-
-       printLabels(1, 150)
-
-            /* Period #1 Plotting */
-
-       boxes = []
-       plotGrid(periods[1])
-       labels = []
-
-            /* Label Calculation */
-
-       for (let i = 0; i < boxes.length; i++) {
-         const UPPER_PERIOD = 3
-
-         let box = boxes[i]
-         let currentValue = box.topLeft
-
-         currentValue = unTransformThisPoint(currentValue, container)
-         currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height)
-
-                /* We must compare the current value on the current period, against the next period, to know which cell we are in. */
-
-         let distanceToNextPeriod = Math.trunc((currentValue.x / periods[UPPER_PERIOD].x - Math.trunc(currentValue.x / periods[UPPER_PERIOD].x)) * 1000)
-
-         switch (distanceToNextPeriod) {
-           case 0: {
-             labels.push('0 Hs')
-             break
-           }
-           case Math.trunc(1 / 24 * 1000): {
-
-           }
-             labels.push('1 Hs')
-             break
-           case Math.trunc(2 / 24 * 1000): {
-
-           }
-             labels.push('2 Hs')
-             break
-
-           case Math.trunc(3 / 24 * 1000): {
-
-           }
-             labels.push('3 Hs')
-             break
-
-           case Math.trunc(4 / 24 * 1000): {
-
-           }
-             labels.push('4 Hs')
-             break
-
-           case Math.trunc(5 / 24 * 1000): {
-
-           }
-             labels.push('5 Hs')
-             break
-
-           case Math.trunc(6 / 24 * 1000): {
-
-           }
-             labels.push('6 Hs')
-             break
-
-           case Math.trunc(7 / 24 * 1000): {
-
-           }
-             labels.push('7 Hs')
-             break
-
-           case Math.trunc(8 / 24 * 1000): {
-
-           }
-             labels.push('8 Hs')
-             break
-
-           case Math.trunc(9 / 24 * 1000): {
-
-           }
-             labels.push('9 Hs')
-             break
-
-           case Math.trunc(10 / 24 * 1000): {
-
-           }
-             labels.push('10 Hs')
-             break
-
-           case Math.trunc(11 / 24 * 1000): {
-
-           }
-             labels.push('11 Hs')
-             break
-
-           case Math.trunc(12 / 24 * 1000): {
-
-           }
-             labels.push('12 Hs')
-             break
-
-           case Math.trunc(13 / 24 * 1000): {
-
-           }
-             labels.push('13 Hs')
-             break
-
-           case Math.trunc(14 / 24 * 1000): {
-
-           }
-             labels.push('14 Hs')
-             break
-
-           case Math.trunc(15 / 24 * 1000): {
-
-           }
-             labels.push('15 Hs')
-             break
-
-           case Math.trunc(16 / 24 * 1000): {
-
-           }
-             labels.push('16 Hs')
-             break
-
-           case Math.trunc(17 / 24 * 1000): {
-
-           }
-             labels.push('17 Hs')
-             break
-
-           case Math.trunc(18 / 24 * 1000): {
-
-           }
-             labels.push('18 Hs')
-             break
-
-           case Math.trunc(19 / 24 * 1000): {
-
-           }
-             labels.push('19 Hs')
-             break
-
-           case Math.trunc(20 / 24 * 1000): {
-
-           }
-             labels.push('20 Hs')
-             break
-
-           case Math.trunc(21 / 24 * 1000): {
-
-           }
-             labels.push('21 Hs')
-             break
-
-           case Math.trunc(22 / 24 * 1000): {
-
-           }
-             labels.push('22 Hs')
-             break
-
-           case Math.trunc(23 / 24 * 1000): {
-
-           }
-             labels.push('23 Hs')
-             break
-         }
-       }
-
-       printLabels(5, 250)
-
-            /* Period #0 Plotting */
-
-       boxes = []
-       plotGrid(periods[0])
-       labels = []
-
-            /* Label Calculation */
-
-       for (let i = 0; i < boxes.length; i++) {
-         const UPPER_PERIOD = 3
-
-         let box = boxes[i]
-         let currentValue = box.topLeft
-
-         currentValue = unTransformThisPoint(currentValue, container)
-         currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height)
-
-                /* We must compare the current value on the current period, against the next period, to know which cell we are in. */
-
-         let distanceToNextPeriod = Math.trunc((currentValue.x / periods[UPPER_PERIOD].x - Math.trunc(currentValue.x / periods[UPPER_PERIOD].x)) * 1000)
-
-         switch (distanceToNextPeriod) {
-           case 0: {
-             labels.push('Morning')
-             break
-           }
-           case Math.trunc(1 / 3 * 1000): {
-
-           }
-             labels.push('Afternoon')
-             break
-           case Math.trunc(2 / 3 * 1000): {
-
-           }
-             labels.push('Evening')
-             break
-         }
-       }
-
-       printLabels(15, 50)
-
-            /* Period #3 Plotting */
-
-       boxes = []
-       plotGrid(periods[3])
-       labels = []
-
-            /* Label Calculation */
-
-       for (let i = 0; i < boxes.length; i++) {
-         const UPPER_PERIOD = 1
-
-         let box = boxes[i]
-         let currentValue = box.topLeft
-
-         currentValue = unTransformThisPoint(currentValue, container)
-         currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height)
-
-         let date = new Date(currentValue.x)
-
-         labels.push(date.toDateString())
-       }
-
-       printLabels(100, 2250)
-
-            /* Period #4 Plotting */
-
-       boxes = []
-       plotGrid(periods[4])
-       labels = []
-
-            /* Label Calculation */
-
-       for (let i = 0; i < boxes.length; i++) {
-         const UPPER_PERIOD = 1
-
-         let box = boxes[i]
-         let currentValue = box.topLeft
-
-         currentValue = unTransformThisPoint(currentValue, container)
-         currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height)
-
-         let date = new Date(currentValue.x)
-
-         var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-         labels.push(monthNames[date.getMonth()] + ' ' + date.getFullYear())
-       }
-     }
-
-     function plotGrid (period) {
-       return
-
-       let periodWidth = period.x
-       let periodHeight = period.y
-
-       let visiblePoint1 = {
-         x: viewPort.visibleArea.topLeft.x,
-         y: viewPort.visibleArea.bottomLeft.y
-       }
-
-       visiblePoint1 = unTransformThisPoint(visiblePoint1, container)
-       visiblePoint1 = timeLineCoordinateSystem.unInverseTransform(visiblePoint1, container.frame.height)
-
-       let visiblePoint2 = {
-         x: viewPort.visibleArea.bottomRight.x,
-         y: viewPort.visibleArea.topRight.y
-       }
-
-       visiblePoint2 = unTransformThisPoint(visiblePoint2, container)
-       visiblePoint2 = timeLineCoordinateSystem.unInverseTransform(visiblePoint2, container.frame.height)
-
-       startingPoint = {
-         x: Math.trunc(visiblePoint1.x / periodWidth) * periodWidth,
-         y: Math.round(Math.trunc(visiblePoint1.y / periodHeight) * periodHeight * 100000) / 100000
-       }
-
-       endingPoint = {
-         x: Math.trunc(visiblePoint2.x / periodWidth) * periodWidth,
-         y: Math.trunc(visiblePoint2.y / periodHeight) * periodHeight
-       }
-
-       let lineWidth
-
-       if (viewPort.zoomLevel > 0) {
-         lineWidth = period.x / basePeriod.x + period.x / basePeriod.x * viewPort.zoomLevel / 20
-       } else {
-         lineWidth = period.x / basePeriod.x + period.x / basePeriod.x * viewPort.zoomLevel / 80
-       }
-
-       if (lineWidth < 0.7) {
-         return
-       }
-
-       if (lineWidth > 1.4) {
-         lineWidth = 1.4
-       }
-
-       browserCanvasContext.beginPath()
-
-       let y1
-       let y2
-
-       let lastRightLabelPosition = {
-         x: 0,
-         y: 0
-       }
-
-       let lastLeftLabelPosition = {
-         x: 0,
-         y: 0
-       }
-
-       for (var j = startingPoint.y; j <= endingPoint.y + periodHeight; j = j + periodHeight) {
-         if (j >= 0 && j <= timeLineCoordinateSystem.max.y) {
-           let point1 = {
-             x: visiblePoint1.x,
-             y: j
-           }
-
-           let point2 = {
-             x: visiblePoint2.x,
-             y: j
-           }
-
-           point1 = timeLineCoordinateSystem.transformThisPoint(point1)
-           point2 = timeLineCoordinateSystem.transformThisPoint(point2)
-
-           point1 = transformThisPoint(point1, container)
-           point2 = transformThisPoint(point2, container)
-
-           if (point1.y >= viewPort.visibleArea.topLeft.y) {
-                        /* Here we keep the last two positive valued of y */
-
-             y2 = y1
-             y1 = point1.y
-           }
-
-           point1 = viewPort.fitIntoVisibleArea(point1)
-           point2 = viewPort.fitIntoVisibleArea(point2)
-
-           browserCanvasContext.moveTo(point1.x, point1.y)
-           browserCanvasContext.lineTo(point2.x, point2.y)
-
-                    /* Now we put the scale on the right side of the chart */
-
-           drawRigthScale()
-           drawLeftScale()
-
-           function drawRigthScale () {
-                        /* And now the scale. */
-
-             let fontSize = 10
-
-             let label = ' ' + Math.round(j * 1) / 1
-             label = Number(label).toLocaleString()
-
-             let labelPoint = {
-               x: viewPort.visibleArea.bottomRight.x + 5,
-               y: point1.y + fontSize / 2 * FONT_ASPECT_RATIO
-             }
-
-             if (Math.abs(lastRightLabelPosition.y - labelPoint.y > fontSize || lastRightLabelPosition.y === 0)) {
-               if (labelPoint.y > viewPort.visibleArea.topLeft.y + fontSize && labelPoint.y < viewPort.visibleArea.bottomRight.y - fontSize) {
-                 browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-                 browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
-                 browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-               }
-             }
-
-             lastRightLabelPosition.x = labelPoint.x
-             lastRightLabelPosition.y = labelPoint.y
-           }
-
-           function drawLeftScale () {
-             let fontSize = 10
-
-                        /*
-                        j is a value between 0 and the max y on the scale of the products.
-                        If we want to convert j to the scale of profits we need to apply the following formula:
-                        */
-
-             let labelValue = (j - timeLineCoordinateSystem.max.y / 2) * 200 / timeLineCoordinateSystem.max.y
-             labelValue = Math.round(labelValue * 100) / 100
-             if (labelValue > 0) { labelValue = '+' + labelValue }
-             if (parseInt(labelValue) > -10 && parseInt(labelValue) < 10) { labelValue = ' ' + labelValue }
-             if (parseInt(labelValue) === 0) { labelValue = ' ' + labelValue }
-             let label = ' ' + pad(labelValue, 3) + '%'
-
-             let labelPoint = {
-               x: 0,
-               y: point1.y + fontSize / 2 * FONT_ASPECT_RATIO
-             }
-
-             if (Math.abs(lastLeftLabelPosition.y - labelPoint.y > fontSize || lastLeftLabelPosition.y === 0)) {
-               if (labelPoint.y > viewPort.visibleArea.topLeft.y + fontSize && labelPoint.y < viewPort.visibleArea.bottomRight.y - fontSize) {
-                 browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-                 browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
-                 browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-               }
-             }
-
-             lastLeftLabelPosition.x = labelPoint.x
-             lastLeftLabelPosition.y = labelPoint.y
-           }
-         }
-       }
-
-       let x1
-       let x2
-
-       for (var i = startingPoint.x; i <= endingPoint.x + periodWidth; i = i + periodWidth) {
-         let point3 = {
-           x: i,
-           y: 0
-         }
-
-         let point4 = {
-           x: i,
-           y: timeLineCoordinateSystem.max.y
-         }
-
-         point3 = timeLineCoordinateSystem.transformThisPoint(point3)
-         point4 = timeLineCoordinateSystem.transformThisPoint(point4)
-
-         point3 = transformThisPoint(point3, container)
-         point4 = transformThisPoint(point4, container)
-
-                /* Here we keep the last two positive valued of y */
-
-         x2 = x1
-         x1 = point3.x
-
-         if (x2 !== undefined) {
-           let topLeft = {
-             x: x2,
-             y: y1
-           }
-
-           let bottomRight = {
-             x: x1,
-             y: y2
-           }
-
-           let box = {
-             topLeft: topLeft,
-             bottomRight: bottomRight
-           }
-           boxes.push(box)
-         }
-
-                /* Painting the lines */
-
-         point3 = viewPort.fitIntoVisibleArea(point3)
-         point4 = viewPort.fitIntoVisibleArea(point4)
-
-         browserCanvasContext.moveTo(point3.x, point3.y)
-         browserCanvasContext.lineTo(point4.x, point4.y)
-       }
-
-       browserCanvasContext.closePath()
-       browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.05' + Math.trunc(lineWidth + 1) + ')'
-
-       browserCanvasContext.lineWidth = lineWidth
-
-       browserCanvasContext.stroke()
-     }
-
-     function printLabels (baseZoomFilter, maxZoom) {
-       let zoomFilter = viewPort.zoomFontSize(baseZoomFilter)
-
-       if (zoomFilter < 7 || zoomFilter > maxZoom) {
-         return
-       }
-
-       for (let i = 0; i < boxes.length; i++) {
-         let label = labels[i]
-
-         if (label === undefined) {
-           label = 'undefined'
-         }
-
-         let fontSize = 10
-
-         let labelPoint = {
-           x: boxes[i].topLeft.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-           y: viewPort.visibleArea.topLeft.y - fontSize / 2 + 1
-         }
-
-         let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
-
-         browserCanvasContext.beginPath()
-
-         browserCanvasContext.rect(labelPoint.x, labelPoint.y - fontSize, xOffset * 2, fontSize)
-         browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 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)
-       }
-
-       browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-       browserCanvasContext.beginPath()
-       browserCanvasContext.rect(0, TOP_SPACE_HEIGHT, viewPort.visibleArea.topLeft.x, viewPort.visibleArea.topLeft.y - TOP_SPACE_HEIGHT)
-       browserCanvasContext.rect(viewPort.visibleArea.topRight.x, TOP_SPACE_HEIGHT, 500, viewPort.visibleArea.topLeft.y - TOP_SPACE_HEIGHT)
-       browserCanvasContext.closePath()
-       browserCanvasContext.fill()
-     }
-
-     function rightScaleBackground () {
-       const RIGHT_MARGIN = 50
-
-            /* We will paint some transparent background here. */
-
-       let opacity = '0.95'
-
-       browserCanvasContext.beginPath()
-
-       browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, RIGHT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y)
-       browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
-
-       browserCanvasContext.closePath()
-
-       browserCanvasContext.fill()
-     }
-
-     function leftScaleBackground () {
-       const LEFT_MARGIN = 50
-
-            /* We will paint some transparent background here. */
-
-       let opacity = '0.95'
-
-       browserCanvasContext.beginPath()
-
-       browserCanvasContext.rect(0, viewPort.visibleArea.topRight.y, LEFT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y)
-       browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
-
-       browserCanvasContext.closePath()
-
-       browserCanvasContext.fill()
-     }
-   }
- }

Scales/RateScale.js

@@ -0,0 +1,216 @@
+function newRateScale () {
+  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,
+    heightPercentage: 100
+  }
+
+  const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50
+  const STEP_SIZE = 5
+  const MIN_WIDTH = 50
+
+  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
+
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+
+  let visible = false
+  let timeLineCoordinateSystem
+
+  return thisObject
+
+  function initialize (pTimeLineCoordinateSystem) {
+    timeLineCoordinateSystem = pTimeLineCoordinateSystem
+
+    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)
+    }
+
+    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 onMouseWheel (event) {
+    delta = event.wheelDelta
+    if (delta < 0) {
+      thisObject.heightPercentage = thisObject.heightPercentage - STEP_SIZE
+      if (thisObject.heightPercentage < STEP_SIZE) { thisObject.heightPercentage = STEP_SIZE }
+    } else {
+      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 (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) {
+      return thisObject.container
+    } else {
+           /* This point does not belong to this space. */
+
+      return undefined
+    }
+  }
+
+  function draw () {
+    if (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. */
+
+    let frame = thisObject.container.parentContainer.frame
+    let point1
+    let point2
+    let point3
+    let point4
+
+    point1 = {
+      x: frame.width - frame.width / 10,
+      y: 0
+    }
+
+    point2 = {
+      x: frame.width,
+      y: 0
+    }
+
+    point3 = {
+      x: frame.width,
+      y: frame.height
+    }
+
+    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()
+  }
+}

Scales/RightScale.js

@@ -1,144 +0,0 @@
- 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,
-     heightPercentage: 100
-   }
-
-   const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50
-   const RIGHT_MARGIN = 50
-   const STEP_SIZE = 5
-
-   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
-
-   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
-
-   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)
-     }
-
-     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
-     })
-   }
-
-   function onMouseWheel (event) {
-     delta = event.wheelDelta
-     if (delta < 0) {
-       thisObject.heightPercentage = thisObject.heightPercentage - STEP_SIZE
-       if (thisObject.heightPercentage < STEP_SIZE) { thisObject.heightPercentage = STEP_SIZE }
-     } else {
-       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) {
-     let container
-
-        /* First we check if this point is inside this object UI. */
-
-     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-       return thisObject.container
-     } else {
-            /* This point does not belong to this space. */
-
-       return undefined
-     }
-   }
-
-   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/TimePeriodScale.js

@@ -0,0 +1,271 @@
+function newTimePeriodScale () {
+  const MODULE_NAME = 'Time Period 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,
+    timePeriod: undefined
+  }
+
+  const FILES_PERIOD_DEFAULT_VALUE = 0
+  const TIME_PERIOD_DEFAULT_VALUE = 0
+  const MIN_HEIGHT = 50
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
+
+  thisObject.container.isDraggeable = false
+  thisObject.container.isClickeable = false
+  thisObject.container.isWheelable = true
+
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+
+  let visible = false
+  let timeLineCoordinateSystem
+  let objectStorage = {}
+  let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE
+  let timePeriodIndex = TIME_PERIOD_DEFAULT_VALUE
+  let timePeriodsMasterArray = [marketFilesPeriods, dailyFilePeriods]
+  let timePeriodLabel = ''
+
+  return thisObject
+
+  function initialize (pTimeLineCoordinateSystem) {
+    timeLineCoordinateSystem = pTimeLineCoordinateSystem
+
+    thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
+
+    readObjectState()
+    newTimePeriod()
+
+    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
+    })
+
+    viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged)
+  }
+
+  function onZoomChanged (event) {
+    let currentTimePeriod = thisObject.timePeriod
+    let timePeriod = recalculatePeriod(event.newLevel)
+    if (timePeriod !== currentTimePeriod) {
+      for (let i = 0; i < timePeriodsMasterArray.length; i++) {
+        let timePeriodArray = timePeriodsMasterArray[i]
+        for (let j = 0; j < timePeriodArray.length; j++) {
+          let record = timePeriodArray[j]
+          if (timePeriod === record[0]) {
+            filePeriodIndex = i
+            timePeriodIndex = j
+          }
+        }
+      }
+      newTimePeriod()
+    }
+  }
+
+  function onMouseWheel (event) {
+    delta = event.wheelDelta
+    if (delta < 0) {
+      timePeriodIndex--
+      if (timePeriodIndex < 0) {
+        filePeriodIndex--
+        if (filePeriodIndex < 0) {
+          filePeriodIndex = 0
+          timePeriodIndex = 0
+        } else {
+          timePeriodIndex = timePeriodsMasterArray[filePeriodIndex].length - 1
+        }
+      }
+    } else {
+      timePeriodIndex++
+      if (timePeriodIndex > timePeriodsMasterArray[filePeriodIndex].length - 1) {
+        filePeriodIndex++
+        if (filePeriodIndex > timePeriodsMasterArray.length - 1) {
+          filePeriodIndex = timePeriodsMasterArray.length - 1
+          timePeriodIndex = timePeriodsMasterArray[filePeriodIndex].length - 1
+        } else {
+          timePeriodIndex = 0
+        }
+      }
+    }
+
+    saveObjectState()
+    newTimePeriod()
+  }
+
+  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
+
+    if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) {
+      return thisObject.container
+    } else {
+           /* This point does not belong to this space. */
+
+      return undefined
+    }
+  }
+
+  function draw () {
+    if (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. */
+
+    let frame = thisObject.container.parentContainer.frame
+    let point1
+    let point2
+    let point3
+    let point4
+
+    point1 = {
+      x: 0,
+      y: frame.height - frame.height / 10
+    }
+
+    point2 = {
+      x: frame.width,
+      y: frame.height - frame.height / 10
+    }
+
+    point3 = {
+      x: frame.width,
+      y: frame.height
+    }
+
+    point4 = {
+      x: 0,
+      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 (point3.y - point2.y < MIN_HEIGHT) {
+      point1.y = point3.y - MIN_HEIGHT
+      point2.y = point3.y - MIN_HEIGHT
+    }
+
+    /* Lets start the drawing. */
+
+    let displacement = viewPort.margins.BOTTOM - BOTTOM_SPACE_HEIGHT
+
+    /*
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(point1.x, point1.y + displacement)
+    browserCanvasContext.lineTo(point2.x, point2.y + displacement)
+    browserCanvasContext.lineTo(point3.x, point3.y + displacement)
+    browserCanvasContext.lineTo(point4.x, point4.y + displacement)
+    browserCanvasContext.lineTo(point1.x, point1.y + displacement)
+    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 + displacement
+
+    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.BOTTOM
+    }
+
+    let label = timePeriodLabel
+    let fontSize = 10
+
+    let xOffset = label.length * fontSize * FONT_ASPECT_RATIO
+
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)'
+
+    if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return }
+
+    browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 1)
+/*
+    browserCanvasContext.beginPath()
+
+    browserCanvasContext.moveTo(point.x, point1.y)
+    browserCanvasContext.lineTo(point.x, point5.y)
+
+    browserCanvasContext.closePath()
+
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)'
+    browserCanvasContext.lineWidth = 0.2
+    browserCanvasContext.setLineDash([1, 5])
+    browserCanvasContext.stroke()
+*/
+  }
+
+  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)
+  }
+}

Scales/TimeScale.js

@@ -14,26 +14,32 @@ function newTimeScale () {
     lenghtPercentage: undefined
   }
 
-  const LENGHT_PERCENTAGE_DEFAULT_VALUE = 50
-  const RIGHT_MARGIN = 50
+  const LENGHT_PERCENTAGE_DEFAULT_VALUE = 5
   const STEP_SIZE = 5
+  const MIN_HEIGHT = 50
 
   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
-
-  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
 
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+
+  let visible = false
+  let timeLineCoordinateSystem
+
   return thisObject
 
-  function initialize () {
+  function initialize (pTimeLineCoordinateSystem) {
+    timeLineCoordinateSystem = pTimeLineCoordinateSystem
+
     thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
 
     thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME)
@@ -46,6 +52,17 @@ 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) {
@@ -64,10 +81,16 @@ function newTimeScale () {
     window.localStorage.setItem(MODULE_NAME, thisObject.lenghtPercentage)
   }
 
-  function getContainer (point) {
+  function getContainer (pPoint) {
     let container
 
-       /* First we check if this point is inside this object UI. */
+/* 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) {
       return thisObject.container
@@ -79,6 +102,112 @@ function newTimeScale () {
   }
 
   function draw () {
+    if (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. */
+
+    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
+    }
+
+    /* 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
+
+    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, timeLineCoordinateSystem)
+    date = new Date(date)
+
+    let label = date.toUTCString()
+    let fontSize = 10
+
+    let xOffset = label.length * fontSize * FONT_ASPECT_RATIO
+
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)'
+
+    if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return }
+
+    browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 7)
+
+    browserCanvasContext.beginPath()
+
+    browserCanvasContext.moveTo(point.x, point1.y)
+    browserCanvasContext.lineTo(point.x, point5.y)
+
+    browserCanvasContext.closePath()
+
+    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)'
+    browserCanvasContext.lineWidth = 0.2
+    browserCanvasContext.setLineDash([1, 5])
+    browserCanvasContext.stroke()
   }
 }

Spaces/PanelsSpace.js

@@ -98,8 +98,6 @@ function newPanelsSpace () {
   function draw () {
     thisObject.container.frame.draw(false, false)
 
-        /* When we draw a time machine, that means also to draw all the charts in it. */
-
     thisObject.panels = panelsMap.get('Global')
     if (thisObject.panels != undefined) {
       for (var i = 0; i < thisObject.panels.length; i++) {

TimeMachine.js

@@ -43,6 +43,8 @@ function newTimeMachine () {
   let timeScale
   let rigthScale
 
+  let timeLineCoordinateSystem = newTimeLineCoordinateSystem()
+
   return thisObject
 
   function finalize () {
@@ -67,6 +69,13 @@ function newTimeMachine () {
     controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner)
     let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner)
 
+    recalculateScale()
+
+    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. */
 
     let position = 0 // This defines the position of each chart respect to each other.
@@ -74,7 +83,6 @@ function newTimeMachine () {
     let timelineChart = newTimelineChart()
 
     timelineChart.container.connectToParent(thisObject.container, true, true)
-
     timelineChart.container.frame.height = thisObject.container.frame.height
 
     timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2
@@ -82,7 +90,7 @@ function newTimeMachine () {
 
     position++
 
-    timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, onDefaultInitialized)
+    timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, timeLineCoordinateSystem, onDefaultInitialized)
 
     function onDefaultInitialized (err) {
       if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
@@ -98,22 +106,22 @@ function newTimeMachine () {
       /* Each Time Machine has a Time Scale and a Right Scale. */
 
       timeScale = newTimeScale()
-
+      timeScale.container.connectToParent(thisObject.container, false, false)
       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()
+      timeScale.initialize(timeLineCoordinateSystem)
 
+      rigthScale = newRateScale()
+      rigthScale.container.connectToParent(thisObject.container, false, false)
       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()
+      rigthScale.initialize(timeLineCoordinateSystem)
 
       initializeTheRest()
     }
@@ -158,7 +166,7 @@ function newTimeMachine () {
 
         position++
 
-        timelineChart.initialize(exchange, market, finalSteps)
+        timelineChart.initialize(exchange, market, timeLineCoordinateSystem, finalSteps)
 
         function finalSteps () {
           if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRest -> initializeTimelineChart -> finalSteps -> Entering function.') }
@@ -186,15 +194,17 @@ function newTimeMachine () {
   }
 
   function draw () {
-    // this.container.frame.draw(false, false)
+    if (thisObject.container.frame.isInViewPort()) {
+      for (let i = 0; i < this.charts.length; i++) {
+        let chart = this.charts[i]
+        chart.draw()
+      }
 
-    for (let i = 0; i < this.charts.length; i++) {
-      let chart = this.charts[i]
-      chart.draw()
+      if (timeScale !== undefined) { timeScale.draw() }
+      if (rigthScale !== undefined) { rigthScale.draw() }
+
+      // thisObject.container.frame.draw(false, true, false)
     }
-
-    if (timeScale !== undefined) { timeScale.draw() }
-    if (rigthScale !== undefined) { rigthScale.draw() }
   }
 
   function getContainer (point, purpose) {
@@ -226,6 +236,35 @@ function newTimeMachine () {
         }
       }
     }
-    return this.container
+
+    if (thisObject.container.frame.isThisPointHere(point) === true) {
+      return thisObject.container
+    } else {
+      if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) {
+        thisObject.container.eventHandler.raiseEvent('onMouseNotOver')
+      }
+      return
+    }
+  }
+
+  function recalculateScale () {
+    if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') }
+
+    let minValue = {
+      x: MIN_PLOTABLE_DATE.valueOf(),
+      y: 0
+    }
+
+    let maxValue = {
+      x: MAX_PLOTABLE_DATE.valueOf(),
+      y: nextPorwerOf10(USDT_BTC_HTH) / 4
+    }
+
+    timeLineCoordinateSystem.initialize(
+           minValue,
+           maxValue,
+           thisObject.container.frame.width,
+           thisObject.container.frame.height
+       )
   }
 }

TimelineChart.js

@@ -6,10 +6,10 @@
    const logger = newWebDebugLog()
    logger.fileName = MODULE_NAME
 
-   let timeLineCoordinateSystem = newTimeLineCoordinateSystem()
+   let timeLineCoordinateSystem
 
    let timePeriod = INITIAL_TIME_PERIOD
-   let datetime = INITIAL_DATE
+   let datetime = NEW_SESSION_INITIAL_DATE
 
    let thisObject = {
      setDatetime: setDatetime,
@@ -47,6 +47,7 @@
    let market
 
    let productsPanelHandle
+   let timePeriodScale
 
    return thisObject
 
@@ -60,22 +61,18 @@
      }
    }
 
-   function initialize (pExchange, pMarket, callBackFunction) {
+   function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) {
      try {
        if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
 
-       thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) {
-         recalculateScale()
-         moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition)
-       })
-
-       thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
-         saveUserPosition(thisObject.container, timeLineCoordinateSystem, event)
-       })
-
             /* We load the logow we will need for the background. */
        exchange = pExchange
        market = pMarket
+       timeLineCoordinateSystem = pTimeLineCoordinateSystem
+
+       thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
+         saveUserPosition(thisObject.container, timeLineCoordinateSystem, event)
+       })
 
        let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA
        productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner)
@@ -116,17 +113,12 @@
        logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png'
        logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png'
 
-       // chartGrid = newChartGrid()
-       // chartGrid.initialize()
-
        breakpointsBar = newBreakpointsBar()
        breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem)
 
-       recalculateScale()
-
-       moveToUserPosition(thisObject.container, timeLineCoordinateSystem)
+       // moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true)
        timePeriod = INITIAL_TIME_PERIOD
-       datetime = INITIAL_DATE
+       datetime = NEW_SESSION_INITIAL_DATE
 
             /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */
 
@@ -155,6 +147,18 @@
            return
          }
 
+         timePeriodScale = newTimePeriodScale()
+         timePeriodScale.container.connectToParent(thisObject.container, false, false)
+         timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) {
+           let currentTimePeriod = timePeriod
+           timePeriod = event.timePeriod
+           if (timePeriod !== currentTimePeriod) {
+             plotterManager.setTimePeriod(timePeriod)
+           }
+         })
+
+         timePeriodScale.initialize(timeLineCoordinateSystem)
+
          initializationReady = true
          callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
          return
@@ -169,16 +173,6 @@
      if (INFO_LOG === true) { logger.write('[INFO] onZoomChanged -> Entering function.') }
 
      if (initializationReady === true) {
-       let currentTimePeriod = timePeriod
-
-       timePeriod = recalculatePeriod(event.newLevel)
-
-            /* If the period changes, we need to spread the word in cascade towards all the depending objects. */
-
-       if (timePeriod !== currentTimePeriod) {
-         plotterManager.setTimePeriod(timePeriod)
-       }
-
        recalculateCurrentDatetime()
 
        // saveUserPosition(thisObject.container, timeLineCoordinateSystem)
@@ -244,7 +238,7 @@
 
      let container
 
-     // container = chartGrid.getContainer(point)
+     container = timePeriodScale.getContainer(point)
 
      if (container !== undefined) { return container }
 
@@ -253,27 +247,6 @@
      return container
    }
 
-   function recalculateScale () {
-     if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') }
-
-     let minValue = {
-       x: EARLIEST_DATE.valueOf(),
-       y: 0
-     }
-
-     let maxValue = {
-       x: MAX_PLOTABLE_DATE.valueOf(),
-       y: nextPorwerOf10(USDT_BTC_HTH) / 4
-     }
-
-     timeLineCoordinateSystem.initialize(
-            minValue,
-            maxValue,
-            thisObject.container.frame.width,
-            thisObject.container.frame.height
-        )
-   }
-
    function tooTiny () {
      if (INTENSIVE_LOG === true) { logger.write('[INFO] tooTiny -> Entering function.') }
 
@@ -301,8 +274,6 @@
        if (window.CHART_ON_FOCUS === '') {
          window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA
 
-         this.container.frame.draw()
-
          drawChartsBackgroundImages()
        }
      }
@@ -316,8 +287,8 @@
 
        // chartGrid.draw(thisObject.container, timeLineCoordinateSystem)
 
+       timePeriodScale.draw()
        plotterManager.draw()
-
        breakpointsBar.draw()
      }
    }
@@ -333,7 +304,7 @@
      }
 
      let toPoint = {
-       x: 0,
+       x: thisObject.container.frame.width,
        y: thisObject.container.frame.height
      }
 
@@ -342,7 +313,7 @@
 
      browserCanvasContext.beginPath()
 
-     browserCanvasContext.rect(viewPort.visibleArea.topLeft.x, fromPoint.y, viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x, toPoint.y - fromPoint.y)
+     browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y)
      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
 
      browserCanvasContext.closePath()
@@ -355,6 +326,23 @@
 
      if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return }
 
+     /* Fist we calculate the corners of the current frame so as not to draw imaages ourside of it */
+
+     let fromPoint = {
+       x: 0,
+       y: 0
+     }
+
+     let toPoint = {
+       x: thisObject.container.frame.width,
+       y: thisObject.container.frame.height
+     }
+
+     fromPoint = transformThisPoint(fromPoint, thisObject.container)
+     toPoint = transformThisPoint(toPoint, thisObject.container)
+
+     /* Second we calculate the points for the images themselves */
+
      let backgroundLogoPoint1
      let backgroundLogoPoint2
 
@@ -398,6 +386,10 @@
      imagePoint = transformThisPoint(imagePoint, thisObject.container)
 
      let offSet = 0
+     let imagePosition = {
+       x: 0,
+       y: 0
+     }
 
      for (let j = 0; j < MAX_ROWS; j++) {
        if (offSet === -imageWidth * 8) {
@@ -409,7 +401,17 @@
        for (let i = 0; i < MAX_COLUMNS; i = i + 4) {
          let logo = logoA
 
-         browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight)
+         imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet
+         imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN
+
+         if (
+           imagePosition.x > fromPoint.x &&
+           imagePosition.x + imageWidth < toPoint.x &&
+           imagePosition.y > fromPoint.y &&
+           imagePosition.y + imageHeight < toPoint.y
+         ) {
+           browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight)
+         }
        }
      }
 
@@ -425,7 +427,17 @@
        for (let i = 1; i < MAX_COLUMNS; i = i + 4) {
          let logo = logoB
 
-         browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight)
+         imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet
+         imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN
+
+         if (
+           imagePosition.x > fromPoint.x &&
+           imagePosition.x + imageWidth < toPoint.x &&
+           imagePosition.y > fromPoint.y &&
+           imagePosition.y + imageHeight < toPoint.y
+         ) {
+           browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight)
+         }
        }
      }
 
@@ -441,7 +453,17 @@
        for (let i = 2; i < MAX_COLUMNS; i = i + 4) {
          let logo = logoExchange
 
-         browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight)
+         imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet
+         imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN
+
+         if (
+           imagePosition.x > fromPoint.x &&
+           imagePosition.x + imageWidth < toPoint.x &&
+           imagePosition.y > fromPoint.y &&
+           imagePosition.y + imageHeight < toPoint.y
+         ) {
+           browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight)
+         }
        }
      }
 
@@ -457,7 +479,17 @@
        for (let i = 3; i < MAX_COLUMNS; i = i + 4) {
          let logo = logoAA
 
-         browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight)
+         imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet
+         imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN
+
+         if (
+           imagePosition.x > fromPoint.x &&
+           imagePosition.x + imageWidth < toPoint.x &&
+           imagePosition.y > fromPoint.y &&
+           imagePosition.y + imageHeight < toPoint.y
+         ) {
+           browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight)
+         }
        }
      }
    }

Utilities.js

@@ -100,12 +100,15 @@ function getUserPosition (timeLineCoordinateSystem) {
   return userPosition
 }
 
-function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY, center) {
+function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY, center, considerZoom) {
   let userPosition = getUserPosition(timeLineCoordinateSystem)
 
-  viewPort.newZoomLevel(userPosition.zoom)
+  if (considerZoom === true) {
+    viewPort.newZoomLevel(userPosition.zoom)
+  }
+
   INITIAL_TIME_PERIOD = recalculatePeriod(userPosition.zoom)
-  INITIAL_DATE = new Date(userPosition.date)
+  NEW_SESSION_INITIAL_DATE = new Date(userPosition.date)
 
   let targetPoint = {
     x: (new Date(userPosition.date)).valueOf(),
@@ -150,4 +153,3 @@ function removeTime (datetime) {
 
   return dateOnly
 }
-

ViewPort.js

@@ -1,5 +1,12 @@
  
 function newViewPort () {
+  const MODULE_NAME = 'Viewport'
+  const INFO_LOG = false
+  const INTENSIVE_LOG = false
+  const ERROR_LOG = true
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
   const CONSOLE_LOG = true
 
   let ANIMATION_INCREMENT = 0.25
@@ -7,6 +14,12 @@ function newViewPort () {
   const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT
   const LEFT_MARGIN = 50
   const RIGHT_MARGIN = 50
+  const MARGINS = {
+    TOP: TOP_MARGIN,
+    BOTTOM: BOTTOM_MARGIN,
+    LEFT: LEFT_MARGIN,
+    RIGHT: RIGHT_MARGIN
+  }
 
   let thisObject = {
     visibleArea: undefined,
@@ -14,6 +27,7 @@ function newViewPort () {
     zoomTargetLevel: undefined,
     zoomLevel: undefined,
     mousePosition: undefined,
+    margins: MARGINS,
     getDisplacement: getDisplacement,
     newZoomLevel: newZoomLevel,
     applyZoom: applyZoom,
@@ -55,6 +69,8 @@ function newViewPort () {
 
   thisObject.eventHandler = newEventHandler()
 
+  let objectStorage = {}
+
   return thisObject
 
   function initialize () {
@@ -64,6 +80,8 @@ function newViewPort () {
       bottomRight: { x: browserCanvas.width - RIGHT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN},
       bottomLeft: { x: LEFT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN}
     }
+
+    readObjectState()
   }
 
   function getDisplacement () {
@@ -99,17 +117,6 @@ function newViewPort () {
       changeZoom(thisObject.zoomLevel + ANIMATION_INCREMENT, thisObject.zoomLevel)
     }
 
- /*
-       if (offsetIncrement.x !== 0) {
-
-           if (Math.trunc(Math.abs(targetOffset.x - offset.x) * 1000) >= Math.trunc(Math.abs(offsetIncrement.x) * 1000)) {
-               offset.x = offset.x + offsetIncrement.x;
-           } else {
-               offsetIncrement.x = 0;
-           }
-       }
-*/
-
     if (offsetIncrement.y !== 0) {
       if (Math.trunc(Math.abs(targetOffset.y - offset.y) * 1000) >= Math.trunc(Math.abs(offsetIncrement.y) * 1000)) {
         offset.y = offset.y + offsetIncrement.y
@@ -125,6 +132,8 @@ function newViewPort () {
     offset.x = offset.x + displaceVector.x
     offset.y = offset.y + displaceVector.y
 
+    saveObjectState()
+
     let event = {
       newOffset: offset
     }
@@ -150,6 +159,8 @@ function newViewPort () {
     thisObject.zoomTargetLevel = level
     thisObject.zoomLevel = level
 
+    saveObjectState()
+
     ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) / 3
 
     let event = {
@@ -244,6 +255,8 @@ function newViewPort () {
     offset.x = offset.x - newMouse.x + thisObject.mousePosition.x
     offset.y = offset.y - newMouse.y + thisObject.mousePosition.y
 
+    saveObjectState()
+
     targetOffset.x = offset.x
     targetOffset.y = offset.y
 
@@ -332,22 +345,21 @@ function newViewPort () {
   }
 
   function draw () {
-/*
-        drawGrid(10);
-        drawGrid(1);
-        drawGrid(0.1);
-*/
+    drawGrid(0.1)
   }
 
   function drawGrid (step) {
+    if (thisObject.zoomLevel > -17) { return }
+
     let squareWidth = (thisObject.visibleArea.bottomRight.x - thisObject.visibleArea.bottomLeft.x) / step
     squareWidth = squareWidth + squareWidth * increment * thisObject.zoomLevel
 
     let startingX = offset.x - Math.trunc(offset.x / squareWidth) * squareWidth
     let startingY = offset.y - Math.trunc(offset.y / squareWidth) * squareWidth
-    let lineWidth = 10 / step + 10 / step * increment * thisObject.zoomLevel
+    let lineWidth = 0.4 + thisObject.zoomLevel / 100
+    lineWidth = lineWidth.toFixed(2)
 
-    if (lineWidth < 0.5) {
+    if (lineWidth < 0.1) {
       return
     }
 
@@ -357,40 +369,66 @@ function newViewPort () {
 
     browserCanvasContext.beginPath()
 
-    for (var i = startingX; i < thisObject.visibleArea.bottomRight.x; i = i + squareWidth) {
-      for (var j = startingY; j < thisObject.visibleArea.bottomRight.y; j = j + squareWidth) {
+    let CROSS_SIZE = 4
+
+    for (var i = startingX; i < thisObject.visibleArea.bottomRight.x + RIGHT_MARGIN; i = i + squareWidth) {
+      for (var j = startingY; j < thisObject.visibleArea.bottomRight.y + BOTTOM_MARGIN; j = j + squareWidth) {
         let point1 = {
-          x: thisObject.visibleArea.bottomLeft.x,
-          y: j
+          x: Math.trunc(i - CROSS_SIZE),
+          y: Math.trunc(j)
         }
 
         let point2 = {
-          x: thisObject.visibleArea.bottomRight.x,
-          y: j
+          x: Math.trunc(i + CROSS_SIZE),
+          y: Math.trunc(j)
         }
 
         browserCanvasContext.moveTo(point1.x, point1.y)
         browserCanvasContext.lineTo(point2.x, point2.y)
-      }
 
-      let point3 = {
-        x: i,
-        y: thisObject.visibleArea.topLeft.y
-      }
+        let point3 = {
+          x: Math.trunc(i),
+          y: Math.trunc(j - CROSS_SIZE)
+        }
 
-      let point4 = {
-        x: i,
-        y: thisObject.visibleArea.bottomLeft.y
-      }
+        let point4 = {
+          x: Math.trunc(i),
+          y: Math.trunc(j + CROSS_SIZE)
+        }
 
-      browserCanvasContext.moveTo(point3.x, point3.y)
-      browserCanvasContext.lineTo(point4.x, point4.y)
+        browserCanvasContext.moveTo(point3.x, point3.y)
+        browserCanvasContext.lineTo(point4.x, point4.y)
+      }
     }
     browserCanvasContext.closePath()
-    browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.' + Math.trunc(lineWidth + 1) + ')'
+    browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 0.5)'
 
-    browserCanvasContext.lineWidth = lineWidth
+    browserCanvasContext.lineWidth = 1
 
     browserCanvasContext.stroke()
   }
+
+  function saveObjectState () {
+    objectStorage.offset = offset
+    objectStorage.zoomLevel = thisObject.zoomLevel
+    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)
+      offset = objectStorage.offset
+      thisObject.zoomLevel = objectStorage.zoomLevel
+      thisObject.zoomTargetLevel = objectStorage.zoomLevel
+      INITIAL_TIME_PERIOD = recalculatePeriod(thisObject.zoomLevel)
+    } else { // Setting default values for first session
+      offset = {
+        x: 0,
+        y: 0
+      }
+      thisObject.zoomLevel = MIN_ZOOM_LEVEL
+      thisObject.zoomTargetLevel = MIN_ZOOM_LEVEL
+    }
+  }
 }