Merge pull request lumean#30 from t12nslookup/master

Add white text behind popup text so that the black text is much more readable
sonota88 · Nov 1, 2020 · ce24d4b · ce24d4b
2 parents 271a42c + f389229
commit ce24d4b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 13 deletions.
diff --git a/lib/SVG/Graph/Graph.rb b/lib/SVG/Graph/Graph.rb
@@ -527,15 +527,31 @@ def add_popup( x, y, label, style="" )
           end
           txt_width = label.length * font_size * 0.6 + 10
           tx = (x+txt_width > @graph_width ? x-5 : x+5)
-          t = @foreground.add_element( "text", {
+          g = Element.new( "g" )
+          g.attributes["id"] = g.object_id.to_s
+          g.attributes["visibility"] = "hidden"
+
+          # First add the mask
+          t = g.add_element( "text", {
+            "x" => tx.to_s,
+            "y" => (y - font_size).to_s,
+            "class" => "dataPointPopupMask"
+          })
+          t.attributes["style"] = style +
+            (x+txt_width > @graph_width ? "text-anchor: end;" : "text-anchor: start;")
+          t.text = label.to_s
+
+          # Then add the text
+          t = g.add_element( "text", {
             "x" => tx.to_s,
             "y" => (y - font_size).to_s,
             "class" => "dataPointPopup"
           })
           t.attributes["style"] = style +
             (x+txt_width > @graph_width ? "text-anchor: end;" : "text-anchor: start;")
           t.text = label.to_s
-          t.attributes["id"] = t.object_id.to_s
+
+          @foreground.add_element( g )
 
           # add a circle to catch the mouseover
           @foreground.add_element( "circle", {
@@ -544,9 +560,9 @@ def add_popup( x, y, label, style="" )
             "r" => "#{popup_radius}",
             "style" => "opacity: 0",
             "onmouseover" =>
-              "document.getElementById(#{t.object_id}).style.visibility ='visible'",
+              "document.getElementById(#{g.object_id.to_s}).style.visibility ='visible'",
             "onmouseout" =>
-              "document.getElementById(#{t.object_id}).style.visibility = 'hidden'",
+              "document.getElementById(#{g.object_id.to_s}).style.visibility = 'hidden'",
           })
         end # if add_popups
       end # add_popup
@@ -1210,7 +1226,7 @@ def get_style
   font-weight: normal;
 }
 
-.dataPointLabel, .dataPointLabelBackground, .dataPointPopup{
+.dataPointLabel, .dataPointLabelBackground, .dataPointPopup, .dataPointPopupMask{
   fill: #000000;
   text-anchor:middle;
   font-size: 10px;
@@ -1223,9 +1239,13 @@ def get_style
   stroke-width: 2;
 }
 
+.dataPointPopupMask{
+  stroke: white;
+  stroke-width: 7;
+}
+
 .dataPointPopup{
-  fill: #000000;
-  visibility: hidden;
+  fill: black;
   stroke-width: 2;
 }
 

diff --git a/lib/SVG/Graph/Plot.rb b/lib/SVG/Graph/Plot.rb
@@ -59,10 +59,10 @@ module Graph
     #
     # = Notes
     #
-    # The default stylesheet handles upto 10 data sets, if you
+    # The default stylesheet handles upto 12 data sets, if you
     # use more you must create your own stylesheet and add the
     # additional settings for the extra data sets. You will know
-    # if you go over 10 data sets as they will have no style and
+    # if you go over 12 data sets as they will have no style and
     # be in black.
     #
     # Unlike the other types of charts, data sets must contain x,y pairs:
@@ -239,14 +239,14 @@ def x_label_range
         min_value = min_x_range
         range = max_value - min_value
         # add some padding on right
-        if range == 0
+        if range == 0 
           max_value += 10
         else
           max_value += range / 20.0
         end
         scale_range = max_value - min_value
 
-        scale_division = scale_x_divisions || (scale_range / 10.0)
+        scale_division = scale_x_divisions || (scale_range / 9.0)
         @x_offset = 0
 
         if scale_x_integers
@@ -298,7 +298,7 @@ def y_label_range
         end
         scale_range = max_value - min_value
 
-        scale_division = scale_y_divisions || (scale_range / 10.0)
+        scale_division = scale_y_divisions || (scale_range / 9.0)
         @y_offset = 0
 
         if scale_y_integers
@@ -314,7 +314,7 @@ def get_y_values
         min_value, max_value, @y_scale_division = y_label_range
         if max_value != min_value
           while (max_value - min_value) < @y_scale_division
-            @y_scale_division /= 10.0
+            @y_scale_division /= 9.0
           end
         end
         rv = []