Repair missing pit stop dots

js/diagrams.js

@@ -57,7 +57,7 @@ function createLineGraph(containerId, raceData){
   y.domain([raceData.drivers.length, 1]);
 
   var enhancedLapData = processor.getEnhancedLapDataPerDriver(raceData);
-  console.log(["enhancedLapData", enhancedLapData]);
+  //console.log(["enhancedLapData", enhancedLapData]);
 
   // Adds all lines
   enhancedLapData.forEach((driverLapData, driverIndex) => {
@@ -72,6 +72,28 @@ function createLineGraph(containerId, raceData){
           .attr("stroke", getColorValue(driverIndex, enhancedLapData.length) )
           .attr("d", lineDataDefinition);
 
+      driverLapData.laps.forEach((singleLap, singleLapIndex)=> {
+        //console.log(["driverLaps.forEach", singleLap, singleLapIndex]);
+        if(singleLap.pitStop){
+          //Appends a circle for each datapoint
+          svg.selectAll(".pitstoppoint")
+              .data([singleLap])
+              .enter().append("circle") // Uses the enter().append() method
+              .attr("class", "dot pitstopdot") // Assign a class for styling
+              .attr("data-line", driverLapData.driver.driverId)
+              .attr("data-opacitychange", 1)
+              .attr("data-highlighted", 0)
+              .attr("data-elemtype", elemTypes.pitstoppoint)
+              .attr("fill", getColorValue(driverIndex, enhancedLapData.length))
+              .attr("cx", function(d, i) {return x(d.lap) })
+              .attr("cy", function(d, i) { return y(d.position) })
+              .attr("r", linePointSize * 1.2)
+              .on("click", handleClickOnPoint)
+              .on("mouseover", handleMouseOverLinePoint)
+              .on("mouseout", handleMouseOutLinePoint);
+        }
+      });
+
       //Appends a circle for each datapoint
       svg.selectAll(".linepoint")
           .data(driverLapData.laps)
@@ -107,26 +129,7 @@ function createLineGraph(containerId, raceData){
           .on("mouseout", handleMouseOutLinePoint)
           .style("opacity", 0);
 
-      driverLapData.laps.forEach((singleLap, singleLapIndex)=> {
+
-        if(singleLap.pitStop){
-          //Appends a circle for each datapoint
-          svg.selectAll(".pitstoppoint")
-              .data([singleLap])
-              .enter().append("circle") // Uses the enter().append() method
-              .attr("class", "dot pitstoppoint") // Assign a class for styling
-              .attr("data-line", driverLapData.driver.driverId)
-              .attr("data-opacitychange", 1)
-              .attr("data-highlighted", 0)
-              .attr("data-elemtype", elemTypes.pitstoppoint)
-              .attr("fill", getColorValue(driverIndex, enhancedLapData.length))
-              .attr("cx", function(d, i) {return x(d.lap) })
-              .attr("cy", function(d, i) { return y(d.position) })
-              .attr("r", linePointSize * 1.2)
-              .on("click", handleClickOnPoint)
-              .on("mouseover", handleMouseOverLinePoint)
-              .on("mouseout", handleMouseOutLinePoint);
-        }
-      });
 
       // in case the driver ended the race too early, get the status why he quit
       /*TODO: Mouseover for Rectangle*/

js/processor.js

@@ -68,6 +68,7 @@ var processor = {
       lapData.laps.sort((o1,o2) => o1["lap"] - o2["lap"]);
       result.push(lapData);
     });
+
     return result;
   },
 

js/queries.js

@@ -80,10 +80,8 @@ var queries = {
         tempList.push(rawData.pitStops[key]);
       }
     }
-
     tempList.sort((o1,o2) => o1["stop"] - o2["stop"]);
     //var tempList = rawData.pitStops.filter(cur => cur.raceId == raceId);
-
     return tempList;
   },