From 8d77aea929cd38cde8b3f00d0de3359ce6c6dcf4 Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Fri, 29 Dec 2017 23:23:37 +0100
Subject: [PATCH] Make tooltip readable

---
 js/diagrams.js | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/js/diagrams.js b/js/diagrams.js
index b5bf709..f3aec7e 100644
--- a/js/diagrams.js
+++ b/js/diagrams.js
@@ -255,14 +255,23 @@ function createLineGraph(containerId, raceData){
       textArr = getEndPointTextArray(raceData,d);
     }
 
+    var tooltipGroup = svg.append("g")
+      .attr("id", "t" + d.lap + "-" + d.position + "-" + i); // Unique id so it can be removed later
+
+    tooltipGroup.append("rect")
+      .attr("style", "fill:rgb(225,225,225);stroke:black;stroke-width:2;")
+      .attr("width", "150")
+      .attr("height", "80")
+      .attr("x", function() { return x(d.lap) + 10; })
+      .attr("y", function() { return y(d.position) + 10; });
+
     //Necessary to add Text for each Line
     textArr.forEach((text, textIndex) =>{
       // Specify where to put label of text
-      svg.append("text")
-        .attr("id", "t" + d.lap + "-" + d.position + "-" + i + "-" + textIndex)// Create an id for text so we can select it later for removing on mouseout
-        .attr("x", function() { return x(d.lap) - 70; })
-        .attr("y", function() { return y(d.position) - 15; })
-        .attr("dy", textIndex + "em")
+        tooltipGroup.append("text")
+        .attr("dy", (textIndex + 1) + "em")
+        .attr("x", function() { return x(d.lap) + 15; })
+        .attr("y", function() { return y(d.position) + 15; })
         .text(function() {
           return text;  // Value of the text
         });
@@ -297,22 +306,19 @@ function createLineGraph(containerId, raceData){
 
     textArr.forEach((text, textIndex)=> {
       // Select text by id and then remove
-      d3.select("#t" + d.lap + "-" + d.position + "-" + i + "-" + textIndex).remove();  // Remove text location
+      d3.select("#t" + d.lap + "-" + d.position + "-" + i).remove();  // Remove text location
     });
   }
 
   function getLapTextArray(raceData, d){
-
     var driverText = getDriverCodeById(raceData,d.driverId);
     var lapText = "Lap: " + d.lap;
     var posText = "Pos: " + d.position;
-
     var returnArr = [driverText, lapText, posText];
     if(d.time){
         var timeText = "Time: " + d.time;
         returnArr.push(timeText);
     }
-
     return returnArr;
   }
 
@@ -327,17 +333,13 @@ function createLineGraph(containerId, raceData){
     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;
   }