Added simple Statistic structure.

index.html

@@ -80,6 +80,8 @@
 
           <div class="content-box chart-box">
             <div id="lineGraphBox"></div>
+            <div id="race-statistics">
+            </div>
           </div>
 
         </div> <!-- card-body -->
@@ -117,6 +119,7 @@
     <script type="text/javascript" src="js/queries.js"></script>
     <script type="text/javascript" src="js/diagrams.js"></script>
     <script type="text/javascript" src="js/main.js"></script>
+    <script type="text/javascript" src="js/statistics.js"></script>
 
   </body>
 </html>

js/diagrams.js

@@ -13,6 +13,8 @@ function createLineGraph(containerId, raceData){
 
   var enhancedLapData = processor.getEnhancedLapDataPerDriver(raceData);
 
+  attachRaceStatistics(enhancedLapData, raceData);
+
   // Configuration
   var height = 720;
   var width = 1080;

js/statistics.js

@@ -0,0 +1,38 @@
+"use strict";
+
+function attachRaceStatistics(enhancedLapData, raceData){
+  var statisticsContainer = "#race-statistics";
+  var avgSymbol = "Ø";
+  var textArr = [];
+  var statisticsPerRow = 3;
+
+  //console.log(raceData);
+  //console.log(enhancedLapData);
+
+  textArr.push(avgSymbol + " Pitstop time: " + getAvgPitStopTime(raceData) + " sec");
+  // TODO: Addd more statistics
+
+  textArr.forEach((elem, i) =>{
+    if(i % statisticsPerRow == 0){
+        $(statisticsContainer).append($('<div></div>')
+            .addClass("row")
+        );
+    }
+
+    $(statisticsContainer + " .row").last().append($('<div></div>')
+        .addClass("col")
+        .html(elem)
+    );
+  });
+
+
+}
+
+function getAvgPitStopTime(raceData){
+  if(raceData.pitStops.length > 0){
+    var sumAllPitStops = 0;
+    raceData.pitStops.map((current) => sumAllPitStops += current.milliseconds);
+    var avgPitStopTimes = sumAllPitStops / raceData.pitStops.length;
+    return ((avgPitStopTimes % 60000) / 1000).toFixed(2);
+  }
+}