Commit 372b4d89 authored by flothoni's avatar flothoni

graph.js; add tooltip on mouseover of timeline label

link to #4370
parent 12b996c3
Pipeline #153421 failed with stages
in 20 seconds
......@@ -2272,3 +2272,26 @@ form .form_label {
.list_lock_on {
color: #839496;
}
div.tooltip {
position: absolute;
text-align: left;
height: 48px;
padding: 2px;
font: 14px sans-serif;
color: #ffffff;
background: #444343;
border: 0px;
border-radius: 3px;
pointer-events: none;
}
.labelFocusMinor {
color: grey;
opacity: 0.7;
font-size: 12px;
}
.labelFocusMajor {
color: black;
opacity: 1;
font-weight: bold;
font-size: 16px;
}
......@@ -2273,3 +2273,26 @@ form .form_label {
.list_lock_on {
color: #657b83;
}
div.tooltip {
position: absolute;
text-align: left;
height: 48px;
padding: 2px;
font: 14px sans-serif;
color: #ffffff;
background: #444343;
border: 0px;
border-radius: 3px;
pointer-events: none;
}
.labelFocusMinor {
color: grey;
opacity: 0.7;
font-size: 12px;
}
.labelFocusMajor {
color: black;
opacity: 1;
font-weight: bold;
font-size: 16px;
}
......@@ -2616,4 +2616,30 @@ form {
}
.list_lock_on {
color: @default;
}
div.tooltip {
position: absolute;
text-align: left;
height: 48px;
padding: 2px;
font: 14px sans-serif;
color: #ffffff;
background: #444343;
border: 0px;
border-radius: 3px;
pointer-events: none;
}
.labelFocusMinor {
color: grey;
opacity: 0.7;
font-size: 12px;
}
.labelFocusMajor {
color: black;
opacity: 1;
font-weight: bold;
font-size: 16px;
}
\ No newline at end of file
......@@ -360,11 +360,16 @@ Graph.prototype = {
list_content.appendChild(line_content_text)
// Add all descripion of sample keys as tooltip
var tooltip = this.m.getStrTime(i, "names")
tooltip += String.fromCharCode(13) + this.m.getStrTime(i, "sampling_date")
tooltip += String.fromCharCode(13) + this.m.getStrTime(i, "delta_date")
var tooltip = this.getTooltip(i, false, false)
list_content.title = tooltip
list_content.onmouseover = function() {
self.graphListFocus(this.dataset.time)
};
list_content.onmouseout = function() {
self.graphListFocus(undefined)
};
table.appendChild(list_content)
}
......@@ -549,6 +554,7 @@ Graph.prototype = {
speed = typeof speed !== 'undefined' ? speed : 500;
this.updateListElemSelected();
this.updateCountActiveSample();
this.graphListFocus(undefined)
if (this.m.samples.number > 1){
this.updateList()
}
......@@ -1431,6 +1437,13 @@ Graph.prototype = {
return d['class']
})
if (document.getElementById(this.id + "_tooltip") == null){
d3.select("body").append("div")
.attr("class", "tooltip")
.attr("id", this.id + "_tooltip")
.style("opacity", 0);
}
this.text_container.selectAll("text")
.on("click", function (d) {
if (d.type == "axis_v" || d.type == "axis_v2") return self.m.changeTime(d.time)
......@@ -1451,7 +1464,24 @@ Graph.prototype = {
}
})
.on("mouseover", function(d) {
var div = d3.select("#"+self.id + "_tooltip")
var time = d.time
var tooltip = self.getTooltip(time, true, true)
div.transition()
.duration(200)
.style("opacity", 1);
div .html(tooltip)
.style("left", (d3.event.pageX + 24) + "px")
.style("top", (d3.event.pageY - 32) + "px");
})
.on("mouseout", function(d) {
var div = d3.select("#"+self.id + "_tooltip")
div.transition()
.duration(500)
.style("opacity", 0);
});
return this
},
......@@ -1596,6 +1626,37 @@ Graph.prototype = {
this.init();
this.smartUpdate();
this.resize();
},
getTooltip: function(time, htmlFormat, includeName){
if (htmlFormat){
var breakChar = "<br/>"
} else {
var breakChar = String.fromCharCode(13)
}
var tooltip = "";
tooltip += this.m.getStrTime(time, "names")
tooltip += breakChar + this.m.getStrTime(time, "sampling_date")
tooltip += breakChar + this.m.getStrTime(time, "delta_date")
return tooltip
},
graphListFocus: function(timeFocus){
var div;
for (var time = 0; time < this.m.samples.number; time++) {
div = document.getElementById("time"+time)
if (div != null){ // at init of graph, these div could be not already created
div.classList.remove("labelFocusMinor")
div.classList.remove("labelFocusMajor")
if (timeFocus != undefined ){
if (timeFocus == time){
div.classList.add("labelFocusMajor")
} else {
div.classList.add("labelFocusMinor")
}
}
}
}
}
......
......@@ -197,6 +197,43 @@ class TestGraph < BrowserTest
end
def test_08_mouseover
# Use show all and hide all button
$b.div(:id => 'visu2_menu').click
$b.update_icon.wait_while(&:present?) # wait update
$b.td(:id => 'visu2_listElem_showAll').click
$b.update_icon.wait_while(&:present?) # wait update
# Hover the sample in graphList. Label in graph should be changed in size
menu = $b.div(:id => 'visu2_menu')
$b.td(:id => "visu2_listElem_text_0").hover
assert ( $b.element(tag_name: 'text', :id => 'time0').style('font-size') == "16px" ), "sample 0 have correct label size when hover 0 in graphlist"
assert ( $b.element(tag_name: 'text', :id => 'time1').style('font-size') == "12px" ), "sample 1 have correct label size when hover 1 in graphlist"
$b.td(:id => "visu2_listElem_text_1").hover
assert ( $b.element(tag_name: 'text', :id => 'time1').style('font-size') == "16px" ), "sample 1 have correct label size when hover 1 in graphlist"
assert ( $b.element(tag_name: 'text', :id => 'time0').style('font-size') == "12px" ), "sample 0 have correct label size when hover 0 in graphlist"
$b.clone_in_list('4').click
$b.update_icon.wait_while(&:present?) # wait update
# Correct font-size value, but didn't work in assert...
# assert ( $b.element(tag_name: 'text', :id => 'time0').style('font-size') == "6px" ), "sample 0 have correct label size when no hover in graphlist"
# assert ( $b.element(tag_name: 'text', :id => 'time1').style('font-size') == "13px" ), "sample 1 have correct label size when no hover in graphlist"
assert ( $b.graph_x_legend('0', :class => 'graph_time2').exists? ), "sample 1 have correct label size when no hover in graphlist (bold as select)"
# Hover graph Label to show tooltip
tooltip = $b.div(:id => "visu2_tooltip")
# before hover, tooltip should be hidden
assert ( tooltip.style('opacity') == "0" ), "correct opacity of tooltip when label is NOT hover"
$b.graph_x_legend('1').hover
sleep 0.3 # no update icon in this case; so whould use a fixed time
# after hover, tooltip should be show
assert ( tooltip.style('opacity') == "1" ), "correct opacity of tooltip when label is hover"
# todo; text content
end
# Not really a test
def test_zz_close
close_everything
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment