Mercurial > gemma
changeset 3360:b2ccfebd5616
available_fairway_depth: tooltips
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 21 May 2019 17:38:54 +0200 |
parents | af6d8020b4a6 |
children | bda4034304b1 |
files | client/src/components/fairway/AvailableFairwayDepth.vue |
diffstat | 1 files changed, 72 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Tue May 21 17:11:39 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Tue May 21 17:38:54 2019 +0200 @@ -432,6 +432,7 @@ this.drawBars(); this.drawScaleLabel(); this.drawScale(); + this.drawTooltip(); }, generateDiagramContainer() { const diagram = d3 @@ -443,6 +444,14 @@ .append("g") .attr("transform", `translate(0 ${this.paddingTop})`); }, + drawTooltip() { + this.diagram + .append("text") + .text("banane") + .attr("font-size", "0.8em") + .attr("opacity", 0) + .attr("id", "tooltip"); + }, drawBars() { const everyBar = this.diagram .selectAll("g") @@ -467,6 +476,27 @@ .data(d => d.lowerLevels) .enter() .append("rect") + .on("mouseover", function() { + d3.select(this).attr("opacity", "0.8"); + d3.select("#tooltip").attr("opacity", 1); + }) + .on("mouseout", function() { + d3.select(this).attr("opacity", 1); + d3.select("#tooltip").attr("opacity", 0); + }) + .on("mousemove", function(d) { + let y = d3.mouse(this)[1]; + const dy = document + .querySelector(".diagram-container") + .getBoundingClientRect().left; + const value = Number.parseFloat(hoursInDays(d.height)).toFixed(2); + d3.select("#tooltip") + .text(value) + .attr("y", y - 10) + .attr("x", d3.event.pageX - dy); + //d3.event.pageX gives coordinates relative to SVG + //dy gives offset of svg on page + }) .attr("y", d => { return 2 * this.yScale(0) - this.yScale(hoursInDays(d.translateY)); }) @@ -485,6 +515,27 @@ const height = this.fnheight("ldc"); everyBar .append("rect") + .on("mouseover", function() { + d3.select(this).attr("opacity", "0.8"); + d3.select("#tooltip").attr("opacity", 1); + }) + .on("mouseout", function() { + d3.select(this).attr("opacity", 1); + d3.select("#tooltip").attr("opacity", 0); + }) + .on("mousemove", function(d) { + let y = d3.mouse(this)[1]; + const dy = document + .querySelector(".diagram-container") + .getBoundingClientRect().left; + const value = Number.parseFloat(hoursInDays(d.height)).toFixed(2); + d3.select("#tooltip") + .text(value) + .attr("y", y - 10) + .attr("x", d3.event.pageX - dy); + //d3.event.pageX gives coordinates relative to SVG + //dy gives offset of svg on page + }) .attr("y", this.yScale(0)) .attr("height", height) .attr("width", this.barsWidth) @@ -496,6 +547,27 @@ const height = this.fnheight("highestLevel"); everyBar .append("rect") + .on("mouseover", function() { + d3.select(this).attr("opacity", "0.8"); + d3.select("#tooltip").attr("opacity", 1); + }) + .on("mouseout", function() { + d3.select(this).attr("opacity", 1); + d3.select("#tooltip").attr("opacity", 0); + }) + .on("mousemove", function(d) { + let y = d3.mouse(this)[1]; + const dy = document + .querySelector(".diagram-container") + .getBoundingClientRect().left; + const value = Number.parseFloat(hoursInDays(d.height)).toFixed(2); + d3.select("#tooltip") + .text(value) + .attr("y", y - 10) + .attr("x", d3.event.pageX - dy); + //d3.event.pageX gives coordinates relative to SVG + //dy gives offset of svg on page + }) .attr("y", this.yScale(0)) .attr("height", height) .attr("width", this.barsWidth - 5)