TOP SPACE added

Animation.js

@@ -107,7 +107,7 @@ function newAnimation() {
 
     function animationLoop(callBackFunction) {
 
-        //try {
+        try {
 
             if (INFO_LOG === true) { logger.write("[INFO] animationLoop -> Entering function."); }
 
@@ -127,14 +127,14 @@ function newAnimation() {
 
             animationLoopHandle = window.requestAnimationFrame(animationLoop);
 
-       // } catch (err) {
+        } catch (err) {
 
-        //    if (ERROR_LOG === true) { logger.write("[ERROR] animationLoop -> err = " + err); }
+            if (ERROR_LOG === true) { logger.write("[ERROR] animationLoop -> err = " + err); }
 
-        //    if (callBackFunction !== undefined) {       // When the loop is called by the browser there will be no callBackFunction.
-        //        callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE);
-       //     } 
-      //  }
+            if (callBackFunction !== undefined) {       // When the loop is called by the browser there will be no callBackFunction.
+                callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE);
+            } 
+        }
     }
 
     function clearBrowserCanvas() {

Canvas.js

@@ -1,19 +1,24 @@
 
 /*
 
-Whithin this sub-system, the canvas object represents a layer on top of the browser canvas object.
+The canvas object represents a layer on top of the browser canvas object.
 
-Graphically, this sub-system has 3 spaces:
+Graphically, thiscanvas object has 4 spaces:
 
-1) The "Chart Space": It is where the charts are plotted.
+1) The "Top Space": It is where Team and User information is displayed.
 
-2) The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow.  
+2) The "Chart Space": It is where the charts are plotted.
 
-3) The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space.  
+3) The "Floating Space": It is where floating elements live. There is a physics engine for this layer that allows these elements to flow.  
+
+4) The "Panels Space": It is where panels live. --> This space has yet to be develop, currently pannels are somehow at the Chart Space.  
 
 All these spaces are child objects of the Canvas object.
 
 Canvas
+  |
+  |
+  ---> topSpace
   |
   |
   ---> chartSpace
@@ -60,6 +65,7 @@ function newCanvas() {
 
     let thisObject = {
         eventHandler: undefined,
+        topSpace: undefined,
         chartSpace: undefined,
         floatingSpace: undefined,
         panelsSpace: undefined,
@@ -83,25 +89,22 @@ function newCanvas() {
 
         /* Instantiate all the children of Canvas object */ 
 
-        let panelsSpace = newPanelsSpace();
-        panelsSpace.initialize();
+        thisObject.panelsSpace = newPanelsSpace();
+        thisObject.panelsSpace.initialize();
 
-        thisObject.panelsSpace = panelsSpace;
+        thisObject.floatingSpace = newFloatingSpace();
+        thisObject.floatingSpace.initialize();
 
-        let floatingSpace = newFloatingSpace();
-        floatingSpace.initialize();
-
-        thisObject.floatingSpace = floatingSpace;
-
-        let chartSpace = newChartSpace();
-        chartSpace.initialize(onCharSpaceInitialized);
-
-        thisObject.chartSpace = chartSpace;
+        thisObject.chartSpace = newChartSpace();
+        thisObject.chartSpace.initialize(onCharSpaceInitialized);
 
         function onCharSpaceInitialized(err) {
             viewPort.raiseEvents(); // These events will impacts on objects just initialized.
         }
 
+        thisObject.topSpace = newTopSpace();
+        thisObject.topSpace.initialize();
+
         /* Splash Screen */
 
         splashScreen = newSplashScreen();
@@ -116,6 +119,7 @@ function newCanvas() {
 
             /* Here we add all the functions that will be called during the animation cycle. */
 
+            animation.addCallBackFunction("Top Space", thisObject.topSpace.draw, 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);

ChartGrid.js

@@ -669,8 +669,8 @@
 
             browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
             browserCanvasContext.beginPath();
-            browserCanvasContext.rect(0, 0, viewPort.visibleArea.topLeft.x, viewPort.visibleArea.topLeft.y);
-            browserCanvasContext.rect(viewPort.visibleArea.topRight.x, 0, 500, viewPort.visibleArea.topLeft.y);
+            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();
         }

Dashboard.js

@@ -132,6 +132,7 @@ const CHART_ASPECT_RATIO = 1 / 10;
 let INITIAL_ZOOM_LEVEL = -26;       // This is the zoom level at the view port in which the APP starts.
 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 = 100;
 var viewPort = newViewPort();
 
 

Panels/ProductsPanel.js

@@ -36,7 +36,7 @@
 
         var position = {
             x: viewPort.visibleArea.topLeft.x,
-            y: 0
+            y: viewPort.visibleArea.topLeft.y
         };
 
         thisObject.container.frame.position = position;

Panels/TimeControlPanel.js

@@ -36,7 +36,7 @@ function newTimeControlPanel() {
 
         let position = {
             x: (viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x) / 2 - thisObject.container.frame.width / 2,
-            y: 0
+            y: viewPort.visibleArea.topLeft.y
         };
 
         thisObject.container.frame.position = position;

Project.njsproj

@@ -79,6 +79,9 @@
     <Compile Include="ImageButton.js">
       <SubType>Code</SubType>
     </Compile>
+    <Compile Include="Spaces\TopSpace.js">
+      <SubType>Code</SubType>
+    </Compile>
     <Compile Include="WebDebugLog.js">
       <SubType>Code</SubType>
     </Compile>
@@ -154,9 +157,6 @@
     <Compile Include="ProductStorage.js">
       <SubType>Code</SubType>
     </Compile>
-    <Compile Include="TempExosystem.js">
-      <SubType>Code</SubType>
-    </Compile>
     <Compile Include="TextButton.js" />
     <Compile Include="TimelineChart.js" />
     <Compile Include="TimeMachine.js" />

Scripts/AppLoader.js

@@ -24,6 +24,7 @@
             "Panels/TimeControlPanel.js",
             "Panels/ProductsPanel.js",
 
+            "Spaces/TopSpace.js",
             "Spaces/PanelsSpace.js",
             "Spaces/ChartSpace.js",
             "Spaces/FloatingSpace.js",

Spaces/TopSpace.js

@@ -0,0 +1,76 @@
+
+function newTopSpace() {
+
+    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 = browserCanvas.width;
+    thisObject.container.frame.height = TOP_SPACE_HEIGHT;
+
+    container.displacement.containerName = "Top Space";
+    container.frame.containerName = "Top Space";
+
+    container.frame.position.x = 0;
+    container.frame.position.y = 0;
+
+    container.isDraggeable = false;
+
+    return thisObject;
+
+    function initialize() {
+
+       
+    }
+
+    function getContainer(point) {
+
+        let container;
+
+        for (let i = 0; i < thisObject.panels.length; i++) {
+
+            container = thisObject.panels[i].getContainer(point);
+
+            if (container !== undefined) {
+
+                /* We found an inner container which has the point. We return it. */
+
+                return container;
+            }
+        }
+
+        /* The point does not belong to any inner container, so we return the current container. */
+
+        return thisObject.container;
+
+    }
+
+    function draw() {
+
+        thisObject.container.frame.draw(false, false);
+
+        drawBackground();
+    }
+
+    function drawBackground() {
+
+        let opacity = 1;
+
+        browserCanvasContext.beginPath();
+
+        browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height);
+        browserCanvasContext.fillStyle = 'rgba(0, 0, 0, ' + opacity + ')';
+
+        browserCanvasContext.closePath();
+
+        browserCanvasContext.fill();
+
+    }
+}

SplashScreen.js

@@ -6,7 +6,7 @@ The Splash Screen is to show some 'loading...' controls while the app is being l
 
 function newSplashScreen() {
 
-    var splashScreen = {
+    var thisObject = {
         container: undefined,
         draw: draw,
         timeMachines: [],
@@ -17,10 +17,10 @@ function newSplashScreen() {
 
     var container = newContainer();
     container.initialize();
-    splashScreen.container = container;
+    thisObject.container = container;
 
-    splashScreen.container.frame.width = browserCanvas.width;
-    splashScreen.container.frame.height = browserCanvas.height;
+    thisObject.container.frame.width = browserCanvas.width;
+    thisObject.container.frame.height = browserCanvas.height;
 
     container.displacement.containerName = "Splash Screen";
     container.frame.containerName = "Splash Screen";
@@ -34,7 +34,7 @@ function newSplashScreen() {
     let fadeOutCounter = 0;
     let opacity = 1;
 
-    return splashScreen;
+    return thisObject;
 
     function initialize() {
 
@@ -58,7 +58,7 @@ function newSplashScreen() {
 
         }
 
-        splashScreen.container.frame.draw(false, false);
+        thisObject.container.frame.draw(false, false);
 
         let label = '' + Math.trunc(stepsInitializationCounter)  + ' %';
         stepsInitializationCounter = stepsInitializationCounter + 1;
@@ -72,13 +72,13 @@ function newSplashScreen() {
         let fontSize = 50;
 
         let labelPoint = {
-            x: splashScreen.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO  -30,
-            y: splashScreen.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 200
+            x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO  -30,
+            y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 200
         };
 
         browserCanvasContext.beginPath();
 
-        browserCanvasContext.rect(0, 0, splashScreen.container.frame.width, splashScreen.container.frame.height);
+        browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height);
         browserCanvasContext.fillStyle = 'rgba(255, 255, 255, ' + opacity + ')';
 
         browserCanvasContext.closePath();
@@ -99,8 +99,8 @@ function newSplashScreen() {
         title = "Advanced"
 
         titlePoint = {
-            x: splashScreen.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 230,
-            y: splashScreen.container.frame.height / 2 - fontSize * 2 + 50
+            x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 230,
+            y: thisObject.container.frame.height / 2 - fontSize * 2 + 50
         };
 
         browserCanvasContext.font = fontSize + 'px Verdana';
@@ -115,8 +115,8 @@ function newSplashScreen() {
         title = "Algos"
 
         titlePoint = {
-            x: splashScreen.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO + 230,
-            y: splashScreen.container.frame.height / 2 - fontSize * 2 + 50
+            x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO + 230,
+            y: thisObject.container.frame.height / 2 - fontSize * 2 + 50
         };
 
         browserCanvasContext.font = fontSize + 'px Verdana';
@@ -135,8 +135,8 @@ function newSplashScreen() {
         title = "Algobots Competitions"
 
         titlePoint = {
-            x: splashScreen.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO + 0,
-            y: splashScreen.container.frame.height / 2 - fontSize * 2 + 150
+            x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO + 0,
+            y: thisObject.container.frame.height / 2 - fontSize * 2 + 150
         };
 
         browserCanvasContext.font = fontSize + 'px Verdana';

TempExosystem.js

@@ -1,322 +0,0 @@
-{
-    codeName: "AACharly",
-        displayName: "Charly",
-            type: "Extract",
-                version: {
-        number: "1.0.0",
-            status: "Mantained", // Discontinued
-                            },
-    products: [{
-
-        product: {
-            codeName: "Trades",
-            displayName: "Trades",
-            description: "Each file contains trades records of one market at one exchange in a period of time of one minute.",
-            storageAccount: "aacharly",
-            filePath: "@Exchange/Output/Trades/@Year/@Month/@Date/@Hour/@Minute",
-            fileName: "@AssetA_@AssetB.json",
-            exchangeList: [{
-                exchange: {
-                    name: "Poloniex",
-                    datetimeRange: {
-                        minDatetime: "2017-02-19 19:15:00.000 GMT+0000",
-                        maxDatetime: "2018-02-13 10:10:00.000 GMT+0000"
-                    }
-                }
-            }]
-            ,
-            layers: [{
-                layer: {
-                    codeName: "Trades",
-                    displayName: "Trades",
-                    exchangeList: ["Poloniex"],
-                    validPeriods: ["01-min"],
-                    plotter: {
-                        devTeam: "AAMasters",
-                        repo: "AACharly-Plotter",
-                        moduleName: "TradeList",
-                        target: "Timeline"
-                    }
-                }
-            }]
-        }
-    }]
-        ,
-        processes:
-    [{
-        process: {
-            name: "Poloniex-Live-Trades",
-            description: "Retrieves the trades done at the current minute and the previous minute and saves them at the storage account."
-        }
-    }, {
-        process: {
-            name: "Poloniex-Historic-Trades",
-            description: "Retrieves and saves the historical trades in batches going backwards from the current time until reaching the begining of the market."
-        }
-    }, {
-        process: {
-            name: "Poloniex-Hole-Fixing",
-            description: "Scans the trades saved by the Live Trades and Historic Trades processes searching for missing records. Once a hole is found on the data set, it patches it by retrieving the missing records from the exchange."
-        }
-    }]
-        ,
-        directDependencies: { },
-    directDependents: [{
-        bot: {
-            devTeam: "AAMasters",
-            codeName: "AABruce"
-        }
-    }, {
-        bot: {
-            devTeam: "AAMasters",
-            codeName: "AAOlivia"
-        }
-    }]
-        ,
-        collaboratorsList: [],
-            github: {
-        org: "AAMasters",
-            repos: [{
-                repo: {
-                    name: "AACharly-Bot",
-                    description: "Produces a data-set of all trades of every market in multiple exchanges.",
-                    openIssues: 0,
-                    openPullRequests: 0,
-                    contributors: 1
-                }
-            }, {
-                repo: {
-                    name: "AACharly-Plotter",
-                    description: "Plotters plug-ins to browse trades at the AA Web Platform.",
-                    openIssues: 0,
-                    openPullRequests: 0,
-                    contributors: 1
-                }
-            }]
-    },
-    storage: {
-        sas: '?sv=2017-04-17&ss=f&srt=sco&sp=rc&se=2018-12-31T02:33:36Z&st=2018-02-01T18:33:36Z&spr=https&sig=xFTcopdKq0f60wl2iuukbtIpcLwxZVKzlw5BzpJfo5g%3D',
-            fileUri: 'https://' + 'aacharly' + '.file.core.windows.net'
-    }
-},
-{
-    codeName: "AACarol",
-        displayName: "Carol",
-            type: "Extract",
-                version: {
-        number: "1.0.0",
-            status: "Mantained", // Discontinued
-                            },
-    products: [
-        {
-            product: {
-                codeName: "Order Book",
-                displayName: "Order Book",
-                description: "Each file contains the bids and asks positions at each market at a certain moment in time.",
-                storageAccount: "aacarol",
-                filePath: "@Exchange/Output/Order-Books/@Year/@Month/@Date/@Hour/@Minute",
-                fileName: "@AssetA_@AssetB.json",
-                exchangeList: [{
-                    exchange: {
-                        name: "Poloniex",
-                        datetimeRange: {
-                            minDatetime: "2017-02-19 19:15:00.000 GMT+0000",
-                            maxDatetime: "2018-02-13 10:10:00.000 GMT+0000"
-                        }
-                    }
-                }],
-                layers: {
-                    layer: {
-                        codeName: "Order Book",
-                        displayName: "Order Book",
-                        exchangeList: ["Poloniex"],
-                        validPeriods: ["06-hs", "03-hs", "01-hs", "30-min", "10-min", "05-min", "01-min"],
-                        plotter: {
-                            devTeam: "AAMasters",
-                            repo: "AACarol-Plotter",
-                            moduleName: "OrderBook",
-                            target: "Panel"
-                        }
-                    }
-                }
-            }
-        },
-        {
-            product: {
-                codeName: "Order Books",
-                displayName: "Order Books",
-                description: "Each file contains the sumarized bids and asks positions at each market at a certain moment in time. Agreggation makes the dataset optimal for different time periods.",
-                storageAccount: "aacarol",
-                filePath: "@Exchange/Output/Aggregated-Order-Books/@Period/@Year/@Month/@Date/@Hour/@Minute",
-                fileName: "@AssetA_@AssetB.json",
-                exchangeList: [{
-                    exchange: {
-                        name: "Poloniex",
-                        datetimeRange: {
-                            minDatetime: "2017-02-19 19:15:00.000 GMT+0000",
-                            maxDatetime: "2018-02-13 10:10:00.000 GMT+0000"
-                        }
-                    }
-                }],
-                layers: {
-                    layer: {
-                        codeName: "Order Books",
-                        displayName: "Order Books",
-                        exchangeList: ["Poloniex"],
-                        validPeriods: ["06-hs", "03-hs", "01-hs", "30-min", "10-min", "05-min", "01-min"],
-                        plotter: {
-                            devTeam: "AAMasters",
-                            repo: "AACarol-Plotter",
-                            moduleName: "OrderBooks",
-                            target: "Timeline"
-                        }
-                    }
-                }
-            }
-        }
-    ],
-        processes: [{
-            process: {
-                name: "Poloniex-Order-Books",
-                description: "Retrieves the order books at the current minute and saves them at the storage account."
-            }
-        }, {
-            process: {
-                name: "Aggregated-Order-Books",
-                description: "Aggregates the order books information to be viewed at different time periods."
-            }
-        }
-        ],
-            directDependencies: [],
-                directDependents: [],
-                    collaboratorsList: [],
-                        github: {
-        org: "AAMasters",
-            repos: [{
-                repo: {
-                    name: "AACarol",
-                    description: "Produces a data-set with a snapshot of all markets order books every minute.",
-                    openIssues: 0,
-                    openPullRequests: 0,
-                    contributors: 1
-                }
-            }
-            ]
-    },
-    storage: {
-        sas: '?sv=2017-04-17&ss=f&srt=sco&sp=r&se=2018-12-01T00:09:44Z&st=2017-12-01T13:09:44Z&spr=https,http&sig=J60UlQuUqh9Hd1Pm0PqIF6yari3D3TkGEz1fSNQJWks%3D',
-            fileUri: 'https://' + 'aadata' + '.file.core.windows.net'
-    }
-}
-{
-    codeName: "AABruce",
-        displayName: "Bruce",
-            type: "Indicator",
-                version: {
-        number: "1.0.0",
-            status: "Mantained", // Discontinued
-                            },
-    products: {
-        product: [{
-            codeName: "Candles",
-            displayName: "One Minute Candles in Daily Files",
-            description: "Each file contains the candles of one whole day on a one minute time period.",
-            storageAccount: "aabruce",
-            filePath: "@Exchange/Output/Candles/One-Min/@Year/@Month/@Date",
-            fileName: "@AssetA_@AssetB.json",
-            exchangeList: [{
-                exchange: {
-                    name: "Poloniex",
-                    datetimeRange: {
-                        minDatetime: "2017-02-19 19:15:00.000 GMT+0000",
-                        maxDatetime: "2018-02-13 10:10:00.000 GMT+0000"
-                    }
-                }
-            }],
-            layers: {
-                layer: {
-                    codeName: "Candles",
-                    displayName: "Candlesticks",
-                    exchangeList: ["Poloniex"],
-                    validPeriods: ["30-min", "10-min", "05-min", "01-min"],
-                    plotter: {
-                        devTeam: "AAMasters",
-                        repo: "AABruce-Plotter",
-                        moduleName: "Candlesticks",
-                        target: "Timeline",
-                        dependencies: {
-                            dependency: {
-                                devTeam: "AAMasters",
-                                repo: "Plotters-Utilities",
-                                moduleName: "Candlesticks"
-                            }
-                        }
-                    }
-                }
-            }
-        }, {
-            codeName: "Volumes",
-            displayName: "One Minute Volumes in Daily Files",
-            description: "Each file contains the volumes of one whole day on a one minute time period.",
-            storageAccount: "aabruce",
-            filePath: "@Exchange/Output/Volumes/One-Min/@Year/@Month/@Date",
-            fileName: "@AssetA_@AssetB.json",
-            exchangeList: [{
-                exchange: {
-                    name: "Poloniex",
-                    datetimeRange: {
-                        minDatetime: "2017-02-19 19:15:00.000 GMT+0000",
-                        maxDatetime: "2018-02-13 10:10:00.000 GMT+0000"
-                    }
-                }
-            }],
-            layers: {
-                layer: {
-                    codeName: "Volumes",
-                    displayName: "Sell and Buy Volumes",
-                    exchangeList: ["Poloniex"],
-                    validPeriods: ["06-hs", "03-hs", "01-hs", "30-min", "10-min", "05-min", "01-min"],
-                    plotter: {
-                        devTeam: "AAMasters",
-                        repo: "AABruce-Plotter",
-                        moduleName: "Volumes",
-                        target: "Timeline",
-                        dependencies: {
-                            dependency: {
-                                devTeam: "AAMasters",
-                                repo: "Plotters-Utilities",
-                                moduleName: "Volumes"
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        ]
-            ,
-            processes:
-        {
-            process: [{
-                name: "One-Min-Daily-Candles-Volumes",
-                description: "Read trades files and generates one minute candles and volumes files for each day."
-            }]
-        },
-        directDependencies: [],
-            directDependents: [],
-                collaboratorsList: [],
-                    github: {
-            org: "AAMasters",
-                repos: {
-                repo: [{
-                    name: "AABruce",
-                    description: "Produces two data-sets with candles and volumes for all markets at all exchanges.",
-                    openIssues: 0,
-                    openPullRequests: 0,
-                    contributors: 1
-                }]
-            }
-        },
-        storage: {
-            sas: '?sv=2017-04-17&ss=f&srt=sco&sp=r&se=2018-12-31T02:32:04Z&st=2018-02-01T18:32:04Z&spr=https&sig=SbZI6bvAE1MBxna2NOvfgMroPFZNjAyaHUsAPvh11hg%3D',
-                fileUri: 'https://' + 'aabruce' + '.file.core.windows.net'
-        }

ViewPort.js

@@ -4,7 +4,7 @@ function newViewPort() {
     const CONSOLE_LOG = true;
 
     let ANIMATION_INCREMENT = 0.25;
-    const TOP_MARGIN = 15;
+    const TOP_MARGIN = 15 + TOP_SPACE_HEIGHT;
     const BOTTOM_MARGIN = 0;
     const LEFT_MARGIN = 50;
     const RIGHT_MARGIN = 50;