From 9640fce5f12c77cb655505c316a7872d3d759ed8 Mon Sep 17 00:00:00 2001 From: Marnen Laibow-Koser Date: Tue, 7 Apr 2020 13:46:09 -0400 Subject: [PATCH 1/5] Move data point label background styling into its own class. --- lib/SVG/Graph/Graph.rb | 12 ++++++++---- lib/SVG/Graph/Pie.rb | 7 ++++++- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/lib/SVG/Graph/Graph.rb b/lib/SVG/Graph/Graph.rb index 6e5bb5d..c38b177 100644 --- a/lib/SVG/Graph/Graph.rb +++ b/lib/SVG/Graph/Graph.rb @@ -712,12 +712,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,7 +1211,7 @@ def get_style font-weight: normal; } -.dataPointLabel{ +.dataPointLabel, .dataPointLabelBackground{ fill: #000000; text-anchor:middle; font-size: 10px; @@ -1220,6 +1219,11 @@ def get_style font-weight: normal; } +.dataPointLabelBackground { + stroke: #ffffff; + stroke-width: 2; +} + .staggerGuideLine{ fill: none; stroke: #000000; diff --git a/lib/SVG/Graph/Pie.rb b/lib/SVG/Graph/Pie.rb index 3524519..5c1331e 100644 --- a/lib/SVG/Graph/Pie.rb +++ b/lib/SVG/Graph/Pie.rb @@ -343,7 +343,7 @@ def round val, to def get_css return < Date: Tue, 7 Apr 2020 14:01:58 -0400 Subject: [PATCH 2/5] Move popup styling into its own class. --- lib/SVG/Graph/Graph.rb | 14 ++++++++++---- lib/SVG/Graph/Pie.rb | 10 ++++++++-- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/lib/SVG/Graph/Graph.rb b/lib/SVG/Graph/Graph.rb index c38b177..b7b608e 100644 --- a/lib/SVG/Graph/Graph.rb +++ b/lib/SVG/Graph/Graph.rb @@ -530,10 +530,10 @@ def add_popup( x, y, label, style="" ) t = @foreground.add_element( "text", { "x" => tx.to_s, "y" => (y - font_size).to_s, - "class" => "dataPointLabel", + "class" => "dataPointPopup", "visibility" => "hidden", }) - 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 @@ -1211,7 +1211,7 @@ def get_style font-weight: normal; } -.dataPointLabel, .dataPointLabelBackground{ +.dataPointLabel, .dataPointLabelBackground, .dataPointPopup{ fill: #000000; text-anchor:middle; font-size: 10px; @@ -1219,11 +1219,17 @@ def get_style font-weight: normal; } -.dataPointLabelBackground { +.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 index 5c1331e..5a1dc2b 100644 --- a/lib/SVG/Graph/Pie.rb +++ b/lib/SVG/Graph/Pie.rb @@ -343,7 +343,7 @@ def round val, to def get_css return < Date: Tue, 7 Apr 2020 14:04:24 -0400 Subject: [PATCH 3/5] Remove one more bit of inline styling. --- lib/SVG/Graph/Graph.rb | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/SVG/Graph/Graph.rb b/lib/SVG/Graph/Graph.rb index b7b608e..e2a01bb 100644 --- a/lib/SVG/Graph/Graph.rb +++ b/lib/SVG/Graph/Graph.rb @@ -530,8 +530,7 @@ def add_popup( x, y, label, style="" ) t = @foreground.add_element( "text", { "x" => tx.to_s, "y" => (y - font_size).to_s, - "class" => "dataPointPopup", - "visibility" => "hidden", + "class" => "dataPointPopup" }) t.attributes["style"] = style+ (x+txt_width > @graph_width ? "text-anchor: end;" : "text-anchor: start;") From 811766150dcd713b1e5330ed2c79d64c49cc5db3 Mon Sep 17 00:00:00 2001 From: Marnen Laibow-Koser Date: Tue, 7 Apr 2020 14:16:14 -0400 Subject: [PATCH 4/5] Fix spacing. --- lib/SVG/Graph/Graph.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/SVG/Graph/Graph.rb b/lib/SVG/Graph/Graph.rb index e2a01bb..87d2b6f 100644 --- a/lib/SVG/Graph/Graph.rb +++ b/lib/SVG/Graph/Graph.rb @@ -532,7 +532,7 @@ def add_popup( x, y, label, style="" ) "y" => (y - font_size).to_s, "class" => "dataPointPopup" }) - t.attributes["style"] = 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 From 6c8ae048075b3362fe23c419448b148534218b0d Mon Sep 17 00:00:00 2001 From: Marnen Laibow-Koser Date: Tue, 7 Apr 2020 14:20:06 -0400 Subject: [PATCH 5/5] Fix JS to deal with CSS properties now that we're controlling visibility that way. --- lib/SVG/Graph/Graph.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/SVG/Graph/Graph.rb b/lib/SVG/Graph/Graph.rb index 87d2b6f..c0d6eeb 100644 --- a/lib/SVG/Graph/Graph.rb +++ b/lib/SVG/Graph/Graph.rb @@ -544,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