Breakpoints working!!!!

BottomSpace/BreakpointsBar.js

@@ -1,88 +0,0 @@
-
-function newBreakpointsBar() {
-
-    var thisObject = {
-        container: undefined,
-        draw: draw,
-        getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
-        initialize: initialize
-    };
-
-    var container = newContainer();
-    container.initialize();
-    thisObject.container = container;
-
-    thisObject.container.frame.width = browserCanvasContext.width;
-    thisObject.container.frame.height = 15;
-
-    container.frame.position.x = 0;
-    container.frame.position.y = 0;
-
-    container.isDraggeable = false;
-    container.isClickeable = true;
-
-    let logo;
-    let canDrawLogo = false;
-
-    let datetime;
-    let timePeriod;
-
-    return thisObject;
-
-    function initialize() {
-
-        viewPort.eventHandler.listenToEvent("Zoom Changed", onZoomChanged);
-        timePeriod = INITIAL_TIME_PERIOD;
-
-    }
-
-    function onZoomChanged(event) {
-
-        timePeriod = recalculatePeriod(event.newLevel);
-
-    }
-
-    function setDatetime(pDatetime) {
-
-        datetime = new Date(pDatetime);
-    }
-
-    function getContainer(point) {
-
-        let container;
-
-        /* First we check if this point is inside this object UI. */
-
-        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-
-            return this.container;
-
-        } else {
-
-            /* This point does not belong to this space. */
-
-            return undefined;
-        }
-
-    }
-
-    function draw() {
-
-        let opacity = 1;
-
-        browserCanvasContext.beginPath();
-
-        let zeroPoint = {
-            x: 0,
-            y: 0
-        };
-
-        zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint);
-
-        let breakpointsHeight = 15;
-
-        browserCanvasContext.closePath();
-
-        browserCanvasContext.fill();
-    }
-}

BreakpointsBar.js

@@ -0,0 +1,219 @@
+
+function newBreakpointsBar() {
+
+    var thisObject = {
+        setDatetime: setDatetime,
+        container: undefined,
+        draw: draw,
+        getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+        initialize: initialize
+    };
+
+    var container = newContainer();
+    container.initialize();
+    thisObject.container = container;
+
+    thisObject.container.frame.width = browserCanvasContext.width;
+    thisObject.container.frame.height = 15;
+
+    container.frame.position.x = 0;
+    container.frame.position.y = viewPort.visibleArea.bottomRight.y;
+
+    container.isDraggeable = false;
+    container.isClickeable = true;
+
+    let logo;
+    let canDrawLogo = false;
+
+    let datetime;
+    let timePeriod;
+    let timeLineCoordinateSystem;
+    let chartContainer;
+
+    let breakpointsByTimePeriod = new Map();
+
+    return thisObject;
+
+    function initialize(pChartContainer, pTimeLineCoordinateSystem) {
+
+        timeLineCoordinateSystem = pTimeLineCoordinateSystem;
+        chartContainer = pChartContainer;
+
+        viewPort.eventHandler.listenToEvent("Zoom Changed", onZoomChanged);
+        timePeriod = INITIAL_TIME_PERIOD;
+
+        thisObject.container.eventHandler.listenToEvent("onMouseClick", onClick);
+
+        for (let i = 0; i < marketFilesPeriods.length; i++) {
+
+            let breakpointsMap = new Map();
+            breakpointsByTimePeriod.set(marketFilesPeriods[i][0], breakpointsMap);
+
+        }
+
+        for (let i = 0; i < dailyFilePeriods.length; i++) {
+
+            let breakpointsMap = new Map();
+            breakpointsByTimePeriod.set(dailyFilePeriods[i][0], breakpointsMap);
+
+        }
+    }
+
+    function onClick(pPoint) {
+
+        let point = {
+            x: pPoint.x,
+            y: pPoint.y
+        };
+
+        let miliSeconds = getMilisecondsFromPoint(point, chartContainer, timeLineCoordinateSystem);
+
+        miliSeconds = normalizeX(miliSeconds); // We are now exactly at the middle of the "candle" correspondind to the point clicked.
+
+        let breakpointsMap = breakpointsByTimePeriod.get(timePeriod);
+        let breakpoint = breakpointsMap.get(miliSeconds);
+
+        if (breakpoint === undefined) {
+
+            /* The breakpoint didnt exist, then we create one. */
+            breakpointsMap.set(miliSeconds, 1);
+
+        } else {
+
+            /* The breakpoint existed, so we remove it. */
+            breakpointsMap.set(miliSeconds, undefined);
+
+        }
+    }
+
+    function normalizeX(pX) {
+
+        return Math.trunc(pX / timePeriod) * timePeriod + timePeriod / 2; 
+
+    }
+
+    function onZoomChanged(event) {
+
+        timePeriod = recalculatePeriod(event.newLevel);
+
+    }
+
+    function setDatetime(pDatetime) {
+
+        datetime = new Date(pDatetime);
+    }
+
+    function getContainer(point) {
+
+        let container;
+
+        /* First we check if this point is inside this object UI. */
+
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+
+            return this.container;
+
+        } else {
+
+            /* This point does not belong to this space. */
+
+            return undefined;
+        }
+
+    }
+
+    function draw() {
+
+        /*
+        To draw the breakpoints, we will calculate the miliseconds for the first x pixel of the breakpoint bar, and for the last x pixel. Once we have that
+        we can create an array with all the possible points for breack points. Finally we can see if brealpoints exists at those points. We plot only the ones
+        that exists.
+        */
+
+        let breakpointsMap = breakpointsByTimePeriod.get(timePeriod);
+
+        let beginX = {
+            x: viewPort.visibleArea.bottomLeft.x,
+            y: 0
+        };
+
+        let endX = {
+            x: viewPort.visibleArea.bottomRight.x,
+            y: 0
+        };
+
+        let beginMiliseconds = getMilisecondsFromPoint(beginX, chartContainer, timeLineCoordinateSystem);
+        let endMiliseconds = getMilisecondsFromPoint(endX, chartContainer, timeLineCoordinateSystem);
+
+        beginMiliseconds = normalizeX(beginMiliseconds);
+        endMiliseconds = normalizeX(endMiliseconds);
+
+        AT_BREAKPOINT = false;
+
+        for (let miliSeconds = beginMiliseconds; miliSeconds < endMiliseconds; miliSeconds = miliSeconds + timePeriod) {
+
+            let breakpoint = breakpointsMap.get(miliSeconds);
+
+            if (breakpoint !== undefined) {
+
+                let point1 = {
+                    x: miliSeconds,
+                    y: 0
+                }
+
+                point1 = timeLineCoordinateSystem.transformThisPoint(point1);
+                point1 = transformThisPoint(point1, chartContainer);
+
+                let point2 = {
+                    x: miliSeconds,
+                    y: thisObject.container.frame.height / 2 + 1
+                }
+
+                point2 = thisObject.container.frame.frameThisPoint(point2);
+
+                let point = {
+                    x: point1.x,
+                    y: point2.y
+                }
+
+                let isCurrentRecord = false;
+
+                if (datetime !== undefined) {
+                    let dateValue = datetime.valueOf();
+                    if (dateValue >= miliSeconds - timePeriod / 2 && dateValue <= miliSeconds + timePeriod / 2 - 1) {
+                        isCurrentRecord = true;
+                    }
+                }
+
+                let radius = 5;
+
+                let opacity = '0.5';
+
+                browserCanvasContext.lineWidth = 1;
+
+                /* Outer Circle */
+
+                browserCanvasContext.beginPath();
+
+                browserCanvasContext.strokeStyle = 'rgba(123, 50, 40, ' + opacity + ')';
+
+                if (isCurrentRecord === false) {
+                    browserCanvasContext.fillStyle = 'rgba(223, 70, 60, ' + opacity + ')';
+                } else {
+                    browserCanvasContext.fillStyle = 'rgba(255, 233, 31, ' + opacity + ')';  /* highlight the current record */
+
+                    AT_BREAKPOINT = true; // We are hitting a breakpoint!
+                }
+
+                browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true);
+                browserCanvasContext.closePath();
+
+                if (point.x < viewPort.visibleArea.topLeft.x + 50 || point.x > viewPort.visibleArea.bottomRight.x - 50) {/*we leave this history without fill. */ } else {
+                    browserCanvasContext.fill();
+                }
+
+                browserCanvasContext.stroke();
+            }
+        }
+    }
+}

Canvas.js

@@ -316,7 +316,7 @@ function newCanvas() {
 
         if (container !== undefined && container.isClickeable === true) {
 
-            container.eventHandler.raiseEvent('onMouseClick', event);
+            container.eventHandler.raiseEvent('onMouseClick', point);
             return;
         }
 
@@ -326,7 +326,7 @@ function newCanvas() {
 
         if (container !== undefined && container.isClickeable === true) {
 
-            container.eventHandler.raiseEvent('onMouseClick', event);
+            container.eventHandler.raiseEvent('onMouseClick', point);
             return;
         }
 
@@ -336,7 +336,7 @@ function newCanvas() {
 
         if (container !== undefined && container.isClickeable === true) {
 
-            container.eventHandler.raiseEvent('onMouseClick', event);
+            container.eventHandler.raiseEvent('onMouseClick', point);
             return;
         }
 
@@ -357,7 +357,7 @@ function newCanvas() {
 
         if (container !== undefined && container.isClickeable === true) {
 
-            container.eventHandler.raiseEvent('onMouseClick', event);
+            container.eventHandler.raiseEvent('onMouseClick', point);
             return;
         } 
     }

ChartGrid.js

@@ -1,12 +1,10 @@
 function newChartGrid() {
 
-
-
-    var chartGrid = {
+    let thisObject = {
         draw: draw
     };
 
-    return chartGrid;
+    return thisObject;
 
     function draw(container, timeLineCoordinateSystem) {
 

Dashboard.js

@@ -123,6 +123,7 @@ function convertTimePeriodToName(pTimePeriod) {
 }
 
 let cloudVM = newCloudVM();
+let AT_BREAKPOINT = false;
 
 const DEBUG_START_UP_DELAY = 0 //3000; // This is a waiting time in case there is a need to debug the very first steps of initialization, to be able to hit F12 on time.
 const INITIAL_DEFAULT_MARKET = 2;       // This is the market that will be shown when loading the site for the first time.
@@ -166,7 +167,7 @@ let INITIAL_ZOOM_LEVEL = -26;       // This is the zoom level at the view port i
 let INITIAL_TIME_PERIOD = recalculatePeriod(INITIAL_ZOOM_LEVEL);  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
 
 const TOP_SPACE_HEIGHT = 50;
-const BOTTOM_SPACE_HEIGHT = 65;
+const BOTTOM_SPACE_HEIGHT = 50;
 var viewPort = newViewPort();
 
 

Files/FileCursor.js

@@ -2,7 +2,7 @@
 function newFileCursor() {
 
     const MODULE_NAME = "File Cursor";
-    const INFO_LOG = true;
+    const INFO_LOG = false;
     const ERROR_LOG = true;
     const logger = newWebDebugLog();
     logger.fileName = MODULE_NAME;

Project.njsproj

@@ -34,7 +34,7 @@
     </Compile>
     <Compile Include="Animation.js" />
     <Compile Include="Azure\azure-storage.blob.js" />
-    <Compile Include="BottomSpace\BreakpointsBar.js">
+    <Compile Include="BreakpointsBar.js">
       <SubType>Code</SubType>
     </Compile>
     <Compile Include="CloudVM\CloudRequire.js">

Scripts/AppLoader.js

@@ -21,7 +21,7 @@
 
             /* PlotterPanels */
 
-            "BottomSpace/BreakpointsBar.js",
+            
 
             "TopSpace/PlayStopButton.js",
             "TopSpace/CompanyLogo.js",
@@ -60,6 +60,7 @@
             "CloudVM/WebFS.js",
             "CloudVM/CloudVM.js",
 
+            "BreakpointsBar.js",
             "WebDebugLog.js",
             "Plotter.js",
             "PlotterPanel.js",

Spaces/BottomSpace.js

@@ -5,7 +5,6 @@ function newBottomSpace() {
         container: undefined,
         draw: draw,
         getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
-        breakpointsBar: undefined,
         initialize: initialize
     };
 
@@ -25,8 +24,7 @@ function newBottomSpace() {
 
     function initialize() {
 
-        thisObject.breakpointsBar = newBreakpointsBar();
-        thisObject.breakpointsBar.initialize();
+
 
     }
 
@@ -34,8 +32,7 @@ function newBottomSpace() {
 
         let container;
 
-        container = thisObject.breakpointsBar.getContainer(point);
-        if (container !== undefined) { return container; }
+
 
         /* The point does not belong to any inner container, so we return the current container. */
 
@@ -48,7 +45,7 @@ function newBottomSpace() {
         thisObject.container.frame.draw(false, false);
 
         drawBackground();
-        thisObject.breakpointsBar.draw();
+
     }
 
     function drawBackground() {

TimelineChart.js

@@ -36,6 +36,7 @@
     let level;
 
     let chartGrid;
+    let breakpointsBar;
 
     let initializationReady = false;
 
@@ -63,6 +64,8 @@
             exchangeId = exchange;
 
             chartGrid = newChartGrid();
+            breakpointsBar = newBreakpointsBar();
+            breakpointsBar.initialize(container, timeLineCoordinateSystem);
 
             recalculateScale();
             
@@ -748,6 +751,8 @@
                 competitionPlotter.plotter.setDatetime(datetime);
 
             }
+
+            breakpointsBar.setDatetime(pDatetime);
         }
     }
 
@@ -808,6 +813,8 @@
 
         }
 
+        breakpointsBar.setDatetime(datetime);
+
         thisObject.container.eventHandler.raiseEvent("Datetime Changed", datetime);
   
     }
@@ -818,18 +825,9 @@
 
         let container;
 
-        /* First we check if this point is inside this space. */
+        container = breakpointsBar.getContainer(point);
 
-        if (this.container.frame.isThisPointHere(point) === true) {
-
-            // return this.container;    Currently there is a BUG in which if this is enabled the datetime of the control panel is not recalculated.
-
-        } else {
-
-            /* This point does not belong to this space. */
-
-            return undefined;
-        }
+        return container;
 
     }
 
@@ -911,6 +909,8 @@
                 let competitionPlotter = competitionPlotters[i];
                 competitionPlotter.plotter.draw();
             }
+
+            breakpointsBar.draw();
         }
     }
 

ViewPort.js

@@ -5,7 +5,7 @@ function newViewPort() {
 
     let ANIMATION_INCREMENT = 0.25;
     const TOP_MARGIN = 15 + TOP_SPACE_HEIGHT;
-    const BOTTOM_MARGIN = BOTTOM_SPACE_HEIGHT;
+    const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT;
     const LEFT_MARGIN = 50;
     const RIGHT_MARGIN = 50;