Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove inline styling for data point labels and popups #23

Merged
merged 5 commits into from
Apr 12, 2020
Merged

Remove inline styling for data point labels and popups #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9640fce
Move data point label background styling into its own class.
marnen Apr 7, 2020
b7e789a
Move popup styling into its own class.
marnen Apr 7, 2020
e0a9903
Remove one more bit of inline styling.
marnen Apr 7, 2020
8117661
Fix spacing.
marnen Apr 7, 2020
6c8ae04
Fix JS to deal with CSS properties now that we're controlling visibil…
marnen Apr 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 18 additions & 9 deletions lib/SVG/Graph/Graph.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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", {
Expand Down Expand Up @@ -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;
Expand Down
13 changes: 12 additions & 1 deletion lib/SVG/Graph/Pie.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down