From e66c41a64e8ebc56f9f044e88c45e8e96691951f Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Sun, 31 Dec 2017 14:46:34 +0100
Subject: [PATCH] Put pitstop points over generic linepoints

---
 js/diagrams.js | 74 +++++++++++++++++++++++++-------------------------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/js/diagrams.js b/js/diagrams.js
index c903666..e2305de 100644
--- a/js/diagrams.js
+++ b/js/diagrams.js
@@ -154,6 +154,43 @@ function createLineGraph(containerId, raceData){
           .attr("stroke", getColorValue(driverIndex, enhancedLapData.length) )
           .attr("d", lineDataDefinitionSmall);
 
+      //Appends a circle for each datapoint
+      focus.selectAll(".linepoint")
+          .data(driverLapData.laps)
+          .enter().append("circle") // Uses the enter().append() method
+          .attr("class", "linedot") // Assign a class for styling
+		  .attr("clip-path","url(#clip)")
+          .attr("id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
+          .attr("data-line", driverLapData.driver.driverId)
+          .attr("data-opacitychange", 0)
+          .attr("data-highlighted", 0)
+          .attr("data-elemtype", elemTypes.linepoint)
+          .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)
+          .style("opacity", 0);
+
+      //Appends a circle for each datapoint
+      focus.selectAll(".invisiblelinepoint")
+          .data(driverLapData.laps)
+          .enter().append("circle") // Uses the enter().append() method
+          .attr("class", "linedot") // Assign a class for styling
+		  .attr("clip-path","url(#clip)")
+          .attr("circle-id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
+          .attr("data-line", driverLapData.driver.driverId)
+          .attr("data-opacitychange", 0)
+          .attr("data-highlighted", 0)
+          .attr("data-elemtype", elemTypes.linepoint)
+          .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*2.4)
+          .on("click", handleClickOnPoint)
+          .on("mouseover", handleMouseOverLinePoint)
+          .on("mouseout", handleMouseOutLinePoint)
+          .style("opacity", 0);
+
       driverLapData.laps.forEach((singleLap, singleLapIndex)=> {
         //console.log(["driverLaps.forEach", singleLap, singleLapIndex]);
         if(singleLap.pitStop){
@@ -193,43 +230,6 @@ function createLineGraph(containerId, raceData){
         }
       });
 
-      //Appends a circle for each datapoint
-      focus.selectAll(".linepoint")
-          .data(driverLapData.laps)
-          .enter().append("circle") // Uses the enter().append() method
-          .attr("class", "linedot") // Assign a class for styling
-		  .attr("clip-path","url(#clip)")
-          .attr("id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
-          .attr("data-line", driverLapData.driver.driverId)
-          .attr("data-opacitychange", 0)
-          .attr("data-highlighted", 0)
-          .attr("data-elemtype", elemTypes.linepoint)
-          .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)
-          .style("opacity", 0);
-
-      //Appends a circle for each datapoint
-      focus.selectAll(".invisiblelinepoint")
-          .data(driverLapData.laps)
-          .enter().append("circle") // Uses the enter().append() method
-          .attr("class", "linedot") // Assign a class for styling
-		  .attr("clip-path","url(#clip)")
-          .attr("circle-id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
-          .attr("data-line", driverLapData.driver.driverId)
-          .attr("data-opacitychange", 0)
-          .attr("data-highlighted", 0)
-          .attr("data-elemtype", elemTypes.linepoint)
-          .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*2.4)
-          .on("click", handleClickOnPoint)
-          .on("mouseover", handleMouseOverLinePoint)
-          .on("mouseout", handleMouseOutLinePoint)
-          .style("opacity", 0);
-
       // in case the driver ended the race too early, get the status why he quit
       /*TODO: Mouseover for Rectangle*/
       var resultOfDriver = raceData.results.filter((result) =>  { return result.driverId == driverLapData.driver.driverId; });