Merge pull request #5 from F1Vis/flo_branch

Added Rectangle Text for Endpoints

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);
 
@@ -73,6 +81,7 @@ function createLineGraph(containerId, raceData){
           .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) })
@@ -103,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) })
@@ -128,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")
@@ -183,7 +197,7 @@ function createLineGraph(containerId, raceData){
       .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);
@@ -214,25 +228,28 @@ function createLineGraph(containerId, raceData){
   }
 
   function handleMouseOverLinePoint(d, i) {
-    var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
-    var circle = d3.select("#" + circleId);
-
-    // Add interactivity
-    // Use D3 to select element, change color and size
-    if(!d.pitStop){
-      circle
-        .style("opacity", 1);
-    }else{
-      circle
-        .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
@@ -251,24 +268,28 @@ function createLineGraph(containerId, raceData){
   }
 
   function handleMouseOutLinePoint(d, i) {
+
+    var dataType = d3.select(this).attr("data-elemtype");
+    //depending on Pitstop and lap different Texts
+    var textArr = [];
     var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
     var circle = d3.select("#" + circleId);
+
     // Use D3 to select element, change color back to normal
-    if(!d.pitStop){
+    if(dataType === elemTypes.linepoint){
       circle
         .attr("r", linePointSize)
         .style("opacity", 0);
-    }else{
+      textArr = getLapTextArray(raceData,d);
+    }else if(dataType === elemTypes.pitstoppoint){
       circle
         .attr("r", linePointSize);
-    }
-
-    //depending on Pitstop and lap different Texts
-    var textArr = [];
-    if(d.pitStop){
       textArr = getPitStopTextArray(raceData,d);
-    }else{
+    }else if(dataType === elemTypes.endpoint){
-      textArr = getLapTextArray(raceData,d);
+      d3.select(this)
+        .attr("height", rectSize)
+        .attr("width", rectSize);
+      textArr = getEndPointTextArray(raceData,d);
     }
 
     textArr.forEach((text, textIndex)=> {
@@ -278,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;
@@ -292,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){