From 449949c592af3711a167e298d8fda969facfcb6d Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Sun, 31 Dec 2017 15:12:02 +0100
Subject: [PATCH] Move tooltip to left side of cursor on right side of diagram

---
 js/diagrams.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/js/diagrams.js b/js/diagrams.js
index ca180e7..ce02cef 100644
--- a/js/diagrams.js
+++ b/js/diagrams.js
@@ -359,7 +359,7 @@ function createLineGraph(containerId, raceData){
       }
   }
 
-  function handleMouseOverLinePoint(d, i) {
+  function handleMouseOverLinePoint(d, i, e) {
     var elemType = d3.select(this).attr("data-elemtype");
     //depending on Pitstop and lap different Texts
     var textArr = [];
@@ -393,6 +393,11 @@ function createLineGraph(containerId, raceData){
     }
     textMaxLength = (2/3) * textMaxLength;
 
+    // Figure out relative tooltip position on x axis
+    var cxValue = d3.select(e[i]).attr("cx");
+    var xValue = (cxValue === null) ? d3.select(e[i]).attr("x") : cxValue;
+    var xRatio = xValue / svgWidth;
+
     var tooltipGroup = svg.append("g")
       .attr("id", "t" + d.lap + "-" + d.position + "-" + i); // Unique id so it can be removed later
 
@@ -400,7 +405,7 @@ function createLineGraph(containerId, raceData){
       .attr("style", "fill:rgb(225,225,225);stroke:black;stroke-width:2;")
       .attr("width", textMaxLength + "em")
       .attr("height", (textArr.length + 1) + "em")
-      .attr("x", function() { return d3.mouse(this)[0] + 10; })
+      .attr("x", function() { if(xRatio < 0.70) return d3.mouse(this)[0] + 10; else return d3.mouse(this)[0] - 130; })
       .attr("y", function() { return d3.mouse(this)[1] + 10; });
 
     //Necessary to add Text for each Line
@@ -408,7 +413,7 @@ function createLineGraph(containerId, raceData){
       // Specify where to put label of text
         tooltipGroup.append("text")
         .attr("dy", (textIndex + 1) + "em")
-        .attr("x", function() { return d3.mouse(this)[0] + 15; })
+        .attr("x", function() { if(xRatio < 0.70) return d3.mouse(this)[0] + 15; else return d3.mouse(this)[0] - 125; })
         .attr("y", function() { return d3.mouse(this)[1] + 15; })
         .text(function() {
           return text;  // Value of the text