Merge pull request #23 from marnen/remove-inline-styling

Remove inline styling for data point labels and popups
lumean · Apr 12, 2020 · 962435a · 962435a
2 parents 61cfef4 + 6c8ae04
commit 962435a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/lib/SVG/Graph/Graph.rb b/lib/SVG/Graph/Graph.rb
@@ -530,10 +530,9 @@ def add_popup( x, y, label, style="" )
           t = @foreground.add_element( "text", {
             "x" => tx.to_s,
             "y" => (y - font_size).to_s,
-            "class" => "dataPointLabel",
-            "visibility" => "hidden",
+            "class" => "dataPointPopup"
           })
-          t.attributes["style"] = "stroke-width: 2; fill: #000; #{style}"+
+          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
@@ -545,9 +544,9 @@ def add_popup( x, y, label, style="" )
             "r" => "#{popup_radius}",
             "style" => "opacity: 0",
             "onmouseover" =>
-              "document.getElementById(#{t.object_id}).setAttribute('visibility', 'visible' )",
+              "document.getElementById(#{t.object_id}).style.visibility ='visible'",
             "onmouseout" =>
-              "document.getElementById(#{t.object_id}).setAttribute('visibility', 'hidden' )",
+              "document.getElementById(#{t.object_id}).style.visibility = 'hidden'",
           })
         end # if add_popups
       end # add_popup
@@ -712,12 +711,11 @@ def make_datapoint_text( x, y, value, style="" )
           elsif x > @graph_width - textStr.length/2 * font_size
             style << "text-anchor: end;"
           end
-          # white background for better readability
+          # background for better readability
           @foreground.add_element( "text", {
             "x" => x.to_s,
             "y" => y.to_s,
-            "class" => "dataPointLabel",
-            "style" => "#{style} stroke: #fff; stroke-width: 2;"
+            "class" => "dataPointLabelBackground",
           }).text = textStr
           # actual label
           text = @foreground.add_element( "text", {
@@ -1212,14 +1210,25 @@ def get_style
   font-weight: normal;
 }
 
-.dataPointLabel{
+.dataPointLabel, .dataPointLabelBackground, .dataPointPopup{
   fill: #000000;
   text-anchor:middle;
   font-size: 10px;
   font-family: "Arial", sans-serif;
   font-weight: normal;
 }
 
+.dataPointLabelBackground{
+  stroke: #ffffff;
+  stroke-width: 2;
+}
+
+.dataPointPopup{
+  fill: #000000;
+  visibility: hidden;
+  stroke-width: 2;
+}
+
 .staggerGuideLine{
   fill: none;
   stroke: #000000;

diff --git a/lib/SVG/Graph/Pie.rb b/lib/SVG/Graph/Pie.rb
@@ -343,14 +343,25 @@ def round val, to
 
       def get_css
         return <<EOL
-.dataPointLabel{
+.dataPointLabel, .dataPointLabelBackground, .dataPointPopup{
 	fill: #000000;
 	text-anchor:middle;
 	font-size: #{datapoint_font_size}px;
 	font-family: "Arial", sans-serif;
 	font-weight: normal;
 }
 
+.dataPointLabelBackground{
+  stroke: #ffffff;
+  stroke-width: 2;
+}
+
+.dataPointPopup{
+  fill: #000000;
+  visibility: hidden;
+  stroke-width: 2;
+}
+
 /* key - MUST match fill styles */
 .key1,.fill1{
 	fill: #ff0000;