Everything connected and implemented

ProductCard.js

@@ -8,10 +8,17 @@
         bot: undefined,
         product: undefined,
         code: undefined,
+        onFileLoaded: onFileLoaded, 
         getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
         initialize: initialize
     };
 
+    let progressBar = {
+        value: 100,
+        fillStyle = 'rgba(226, 226, 226, 1)',
+        strokeStyle = 'rgba(86, 86, 86, 1)'
+    };
+
     return thisObject;
 
     function initialize() {
@@ -80,6 +87,28 @@
 
     }
 
+    function onFileLoaded(event) {
+
+        if (event.totalValue === event.totalValue) {
+
+            progressBar = {
+                value: 100,
+                fillStyle = 'rgba((56, 209, 6, 1)',
+                strokeStyle = 'rgba(40, 99, 21, 1)'
+            };
+
+        } else {
+
+            progressBar = {
+                value: event.totalValue * 100 / event.totalValue,
+                fillStyle = 'rgba(234, 143, 23, 1)',
+                strokeStyle = 'rgba(122, 79, 23, 1)'
+            };
+
+        }
+
+    }
+
     function buttonPressed(event) {
 
         switch (thisObject.status) {
@@ -104,11 +133,11 @@
 
     function draw() {
 
-        drawIcon();
+        drawProductCard();
 
     }
 
-    function drawIcon() {
+    function drawProductCard() {
 
         centerPoint = {
             x: 7,
@@ -205,5 +234,48 @@
         browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
+        /* We draw here the progress bar. */
+
+        point1 = {
+            x: 0,
+            y: thisObject.container.frame.height - 1
+        };
+
+        point2 = {
+            x: thisObject.container.frame.width * progressBar.value / 100,
+            y: thisObject.container.frame.height - 1
+        };
+
+        point3 = {
+            x: thisObject.container.frame.width * progressBar.value / 100,
+            y: thisObject.container.frame.height - 5
+        };
+
+        point4 = {
+            x: 0,
+            y: thisObject.container.frame.height - 5
+        };
+
+        /* Now the transformations. */
+
+        point1 = thisObject.container.frame.frameThisPoint(point1);
+        point2 = thisObject.container.frame.frameThisPoint(point2);
+        point3 = thisObject.container.frame.frameThisPoint(point3);
+        point4 = thisObject.container.frame.frameThisPoint(point4);
+
+        browserCanvasContext.beginPath();
+        browserCanvasContext.moveTo(point1.x, point1.y);
+        browserCanvasContext.moveTo(point2.x, point2.y);
+        browserCanvasContext.moveTo(point3.x, point3.y);
+        browserCanvasContext.moveTo(point4.x, point4.y);
+        browserCanvasContext.closePath();
+
+        browserCanvasContext.fillStyle = progressBar.fillStyle;
+        browserCanvasContext.strokeStyle = progressBar.strokeStyle;
+
+        browserCanvasContext.fill();
+        browserCanvasContext.lineWidth = 1;
+        browserCanvasContext.stroke();
+
     }
 }

Storage.js

@@ -78,7 +78,7 @@ function initialize(pDevTeam, pBot, pProduct, pExchange, pMarket, pDatetime, pTi
             currentValue: thisObject.fileCache.getFilesLoaded()
         }
 
-        thisObject.eventHandler.raiseEvent('Storage File Ready', event);
+        thisObject.eventHandler.raiseEvent('Storage File Loaded', event);
 
         if (event.currentValue === event.totalValue) {
 
@@ -95,7 +95,7 @@ function initialize(pDevTeam, pBot, pProduct, pExchange, pMarket, pDatetime, pTi
             currentValue: thisObject.fileCursorCache.getFilesLoaded()
         }
 
-        thisObject.eventHandler.raiseEvent('Storage File Ready', event);
+        thisObject.eventHandler.raiseEvent('Storage File Loaded', event);
 
         if (event.currentValue === event.totalValue) {
 
@@ -112,7 +112,7 @@ function initialize(pDevTeam, pBot, pProduct, pExchange, pMarket, pDatetime, pTi
             currentValue: 1
         }
 
-        thisObject.eventHandler.raiseEvent('Storage File Ready', event);
+        thisObject.eventHandler.raiseEvent('Storage File Loaded', event);
 
         if (event.currentValue === event.totalValue) {
 

TimelineChart.js

@@ -1,6 +1,8 @@
 
 function newTimelineChart() {
 
+    const CONSOLE_LOG = false;
+
     let activePlotters = [];
 
     let plotArea = newPlotArea();
@@ -114,41 +116,65 @@ function newTimelineChart() {
 
     function initializePlotter(pProductCard) {
 
-        let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.repo, pProductCard.product.plotter.moduleName);
+        /* Before Initializing a Plotter, we need the Storage it will use, loaded with the files it will initially need. */
 
-        plotter.container.displacement.parentDisplacement = timelineChart.container.displacement;
-        plotter.container.zoom.parentZoom = timelineChart.container.zoom;
-        plotter.container.frame.parentFrame = timelineChart.container.frame;
+        let storage = newStorage();
 
-        plotter.container.parentContainer = timelineChart.container;
+        /*
 
-        plotter.container.frame.width = timelineChart.container.frame.width * 1;
-        plotter.container.frame.height = timelineChart.container.frame.height * 1;
+        Before Initializing the Storage, we will put put the Product Card to listen to the events the storage will raise every time a file is loaded,
+        so that the UI can somehow show this.
 
-        plotter.container.frame.position.x = timelineChart.container.frame.width / 2 - plotter.container.frame.width / 2;
-        plotter.container.frame.position.y = timelineChart.container.frame.height / 2 - plotter.container.frame.height / 2;
+        */
 
-        plotter.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, datetime, timePeriod, onInizialized);
+        storage.eventHandler.listenToEvent('Storage File Loaded', pProductCard.onFileLoaded);
 
-        function onInizialized() {
+        storage.initialize(pProductCard.devTeam, pProductCard..bot, pProductCard.product, DEFAULT_EXCHANGE, DEFAULT_MARKET, datetime, timePeriod, onStorageInitialized) ;
 
-            console.log(pProductCard.product.plotter.devTeam + '->' + pProductCard.product.plotter.repo + '->' + pProductCard.product.plotter.moduleName + " Initialized. ");
+        function onStorageInitialized() {
+
+            /* Now we have all the initial data loaded and ready to be delivered to the new instance of the plotter. */
+
+            let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.repo, pProductCard.product.plotter.moduleName);
+
+            plotter.container.displacement.parentDisplacement = timelineChart.container.displacement;
+            plotter.container.zoom.parentZoom = timelineChart.container.zoom;
+            plotter.container.frame.parentFrame = timelineChart.container.frame;
+
+            plotter.container.parentContainer = timelineChart.container;
+
+            plotter.container.frame.width = timelineChart.container.frame.width * 1;
+            plotter.container.frame.height = timelineChart.container.frame.height * 1;
+
+            plotter.container.frame.position.x = timelineChart.container.frame.width / 2 - plotter.container.frame.width / 2;
+            plotter.container.frame.position.y = timelineChart.container.frame.height / 2 - plotter.container.frame.height / 2;
+
+            plotter.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, datetime, timePeriod, onPlotterInizialized);
+
+            function onPlotterInizialized() {
+
+                if (CONSOLE_LOG === true) {
+
+                    console.log(pProductCard.product.plotter.devTeam + '->' + pProductCard.product.plotter.repo + '->' + pProductCard.product.plotter.moduleName + " Initialized. ");
+
+                }
+
+                try {
+                    plotter.positionAtDatetime(INITIAL_DATE);
+                } catch (err) {
+                    // If the plotter does not implement this function its ok.
+                }
+
+                let activePlotter = {
+                    productCard: pProductCard,
+                    plotter: plotter
+                };
+
+                /* Add the new Active Protter to the Array */
+
+                activePlotters.push(activePlotter);
 
-            try {
-                plotter.positionAtDatetime(INITIAL_DATE);
-            } catch (err) {
-                // If the plotter does not implement this function its ok.
             }
-
-            let activePlotter = {
-                productCard: pProductCard,
-                plotter: plotter
-            };
-
-            /* Add the new Active Protter to the Array */
-
-            activePlotters.push(activePlotter);
-
         }
     }