Merge branch 'master' of https://github.com/F1Vis/f1vis

js/diagrams.js

@@ -13,7 +13,6 @@ function createLineGraph(containerId, raceData){
 
   var enhancedLapData = processor.getEnhancedLapDataPerDriver(raceData);
 
-
   // Configuration
   var height = 720;
   var width = 1080;
@@ -21,6 +20,14 @@ function createLineGraph(containerId, raceData){
   var rectSize = 10;
   var amountClickedLines = 0;
 
+  //ElemTypes of this graph
+  var elemTypes = {
+    line: "line",
+    linepoint: "linepoint",
+    pitstoppoint: "pitstoppoint",
+    endpoint: "endpoint"
+  };
+
   // set the dimensions and margins of the graph
   var margin = {top: 50, right: 100, bottom: 50, left: 100},
       width = width - margin.left - margin.right,
@@ -61,6 +68,7 @@ function createLineGraph(containerId, raceData){
           .attr("data-line", driverLapData.driver.driverId)// custom data to Specify the line
           .attr("data-opacitychange", 1)
           .attr("data-highlighted", 0)
+          .attr("data-elemtype", elemTypes.line)
           .attr("stroke", getColorValue(driverIndex, enhancedLapData.length) )
           .attr("d", lineDataDefinition);
 
@@ -69,13 +77,30 @@ function createLineGraph(containerId, raceData){
           .data(driverLapData.laps)
           .enter().append("circle") // Uses the enter().append() method
           .attr("class", "dot linedot") // Assign a class for styling
+          .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
+      svg.selectAll(".invisiblelinepoint")
+          .data(driverLapData.laps)
+          .enter().append("circle") // Uses the enter().append() method
+          .attr("class", "dot linedot") // Assign a class for styling
+          .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("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)
+          .attr("r", linePointSize*2.4)
           .on("click", handleClickOnPoint)
           .on("mouseover", handleMouseOverLinePoint)
           .on("mouseout", handleMouseOutLinePoint)
@@ -87,10 +112,11 @@ function createLineGraph(containerId, raceData){
           svg.selectAll(".pitstoppoint")
               .data([singleLap])
               .enter().append("circle") // Uses the enter().append() method
-              .attr("class", "dot pitstopdot") // Assign a class for styling
+              .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) })
@@ -104,9 +130,7 @@ function createLineGraph(containerId, raceData){
       // 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; });
-      console.log(resultOfDriver);
       if(resultOfDriver.length > 0 && getValidEndingStatusIds().indexOf(resultOfDriver[0].statusId) < 0){
-        console.log("not ended properly");
         var triangle = d3.symbol()
             .type(d3.symbolTriangle)
             .size(25);
@@ -114,15 +138,19 @@ function createLineGraph(containerId, raceData){
         svg.selectAll(".endpoint")
             .data([driverLapData.laps[driverLapData.laps.length - 1]])
             .enter().append("rect") // Uses the enter().append() method
-            .attr("class", "dot pitstopdot") // Assign a class for styling
+            //.attr("class", "endpoint") // Assign a class for styling
             .attr("data-line", driverLapData.driver.driverId)
             .attr("data-opacitychange", 1)
             .attr("data-highlighted", 0)
+            .attr("data-elemtype", elemTypes.endpoint)
             .attr("fill", getColorValue(driverIndex, enhancedLapData.length))
             .attr("x", function(d, i) {return x(d.lap) - rectSize * 1/2 })
             .attr("y", function(d, i) { return y(d.position) - rectSize * 1/2 })
             .attr("height", rectSize)
-            .attr("width", rectSize);
+            .attr("width", rectSize)
+            .on("click", handleClickOnPoint)
+            .on("mouseover", handleMouseOverLinePoint)
+            .on("mouseout", handleMouseOutLinePoint);
 
         /* tried with Cross, didn't work, don't  know why
         svg.selectAll(".endpoint")
@@ -157,13 +185,19 @@ function createLineGraph(containerId, raceData){
         d3.axisRight(y)
           .ticks(raceData.drivers.length)
           .tickFormat(function(d) {
-            return d + " " + getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) ;
+            var driverCode = "";
+            if(getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d)){
+              driverCode = getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d);
+            }else{
+              driverCode = getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size - 1, d);
+            }
+            return d + " " + driverCode ;
           })
       )
       .attr("transform", "translate( " + (width) + ", 0 )");
 
   function handleClickOnPoint(d,i){
-
+      console.log(d);
       //select elements that are highlightable but are not highlighted
       d3.selectAll("[data-opacitychange='" + 1 +"'][data-highlighted='" + 0 +"']")
         .style("opacity", 0.3);
@@ -194,22 +228,28 @@ function createLineGraph(containerId, raceData){
   }
 
   function handleMouseOverLinePoint(d, i) {
-    // Add interactivity
-    // Use D3 to select element, change color and size
-    if(!d.pitStop){
-      d3.select(this)
-        .style("opacity", 1);
-    }else{
-      d3.select(this)
-        .attr("r", linePointSize * 2);
-    }
 
+    var dataType = d3.select(this).attr("data-elemtype");
     //depending on Pitstop and lap different Texts
     var textArr = [];
-    if(d.pitStop){
+    var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
-      textArr = getPitStopTextArray(raceData,d);
+    var circle = d3.select("#" + circleId);
-    }else{
+    
+    // Add interactivity
+    // Use D3 to select element, change color and size
+    if(dataType === elemTypes.linepoint){
+      circle
+        .style("opacity", 1);
       textArr = getLapTextArray(raceData,d);
+    }else if(dataType === elemTypes.pitstoppoint){
+      circle
+        .attr("r", linePointSize * 2);
+      textArr = getPitStopTextArray(raceData,d);
+    }else if(dataType === elemTypes.endpoint){
+      d3.select(this)
+        .attr("height", rectSize * 1.3)
+        .attr("width", rectSize * 1.3);
+      textArr = getEndPointTextArray(raceData,d);
     }
 
     //Necessary to add Text for each Line
@@ -228,22 +268,28 @@ function createLineGraph(containerId, raceData){
   }
 
   function handleMouseOutLinePoint(d, i) {
-    // Use D3 to select element, change color back to normal
-    if(!d.pitStop){
-      d3.select(this)
-        .attr("r", linePointSize)
-        .style("opacity", 0);
-    }else{
-      d3.select(this)
-        .attr("r", linePointSize);
-    }
 
+    var dataType = d3.select(this).attr("data-elemtype");
     //depending on Pitstop and lap different Texts
     var textArr = [];
-    if(d.pitStop){
+    var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
-      textArr = getPitStopTextArray(raceData,d);
+    var circle = d3.select("#" + circleId);
-    }else{
+
+    // Use D3 to select element, change color back to normal
+    if(dataType === elemTypes.linepoint){
+      circle
+        .attr("r", linePointSize)
+        .style("opacity", 0);
       textArr = getLapTextArray(raceData,d);
+    }else if(dataType === elemTypes.pitstoppoint){
+      circle
+        .attr("r", linePointSize);
+      textArr = getPitStopTextArray(raceData,d);
+    }else if(dataType === elemTypes.endpoint){
+      d3.select(this)
+        .attr("height", rectSize)
+        .attr("width", rectSize);
+      textArr = getEndPointTextArray(raceData,d);
     }
 
     textArr.forEach((text, textIndex)=> {
@@ -253,7 +299,7 @@ function createLineGraph(containerId, raceData){
   }
 
   function getLapTextArray(raceData, d){
-    var driverText = getDriverCodeById(raceData,d.driverId)
+    var driverText = getDriverCodeById(raceData,d.driverId);
     var lapText = "Lap: " + d.lap;
     var posText = "Pos: " + d.position;
     var timeText = "Time: " + d.time;
@@ -267,6 +313,24 @@ function createLineGraph(containerId, raceData){
     return lapTextArr;
   }
 
+  function getEndPointTextArray(raceData, d){
+    var status = "";
+    var endTextArr = getLapTextArray(raceData,d);
+    var allStatus = queries.getStatus();
+
+    for(var key in allStatus){
+      if(key === undefined) continue;
+      if(allStatus[key].statusId === d.finished.statusId){
+          status = allStatus[key].status;
+      }
+    }
+
+
+    endTextArr.push("Reason: " + status);
+
+    return endTextArr;
+  }
+
   function getDriverCodeFromPosAndLap(raceData, lapNr, pos){
     var driverCode = "";
     if(lapNr == 0){
@@ -279,7 +343,9 @@ function createLineGraph(containerId, raceData){
         driverCode =  getDriverCodeById(raceData,raceData.results[pos -1].driverId);
       }
     }else{
-      //TODO hier Adden
+      if(raceData.lapTimes.get(lapNr)[pos-1]){
+        driverCode = getDriverCodeById(raceData, raceData.lapTimes.get(lapNr)[pos-1].driverId);
+      }
     }
     return driverCode;
   }