From 50492892e8c7a2cd8d58d23db323e60db8cfb26f Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Sun, 31 Dec 2017 14:54:52 +0100
Subject: [PATCH] Dynamically calculate tooltip width

---
 js/diagrams.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/js/diagrams.js b/js/diagrams.js
index 96d2b41..ca180e7 100644
--- a/js/diagrams.js
+++ b/js/diagrams.js
@@ -363,6 +363,7 @@ function createLineGraph(containerId, raceData){
     var elemType = d3.select(this).attr("data-elemtype");
     //depending on Pitstop and lap different Texts
     var textArr = [];
+    var textMaxLength = 1;
     // Add interactivity
     // Use D3 to select element, change color and size
     if(elemType === elemTypes.linepoint){
@@ -385,12 +386,19 @@ function createLineGraph(containerId, raceData){
       textArr = getEndPointTextArray(raceData,d);
     }
 
+    // Calculate tooltip width based on text
+    for(var lineI in textArr) {
+      var line = textArr[lineI];
+      if(line.length > textMaxLength) textMaxLength = line.length;
+    }
+    textMaxLength = (2/3) * textMaxLength;
+
     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("width", textMaxLength + "em")
       .attr("height", (textArr.length + 1) + "em")
       .attr("x", function() { return d3.mouse(this)[0] + 10; })
       .attr("y", function() { return d3.mouse(this)[1] + 10; });