Mercurial > gemma
changeset 3377:ccb5455f0713
available_fairway_depthLNWL: tooltips added
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 22 May 2019 15:11:58 +0200 |
parents | 70b7078b4516 |
children | ff79a9b6707f |
files | client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/store/fairwayavailability.js |
diffstat | 2 files changed, 36 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Wed May 22 15:03:30 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Wed May 22 15:11:58 2019 +0200 @@ -410,6 +410,15 @@ this.drawBars(); this.drawScaleLabel(); this.drawScale(); + this.drawTooltip(); + }, + drawTooltip() { + this.diagram + .append("text") + .text("banane") + .attr("font-size", "0.8em") + .attr("opacity", 0) + .attr("id", "tooltip"); }, generateDiagramContainer() { const diagram = d3 @@ -433,6 +442,27 @@ .data(this.fwLNWLData.lnwl) .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 = d.percent; + 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("height", d => { return this.yScale(0) - this.yScale(d.percent); })
--- a/client/src/store/fairwayavailability.js Wed May 22 15:03:30 2019 +0200 +++ b/client/src/store/fairwayavailability.js Wed May 22 15:11:58 2019 +0200 @@ -16,6 +16,8 @@ import { format, subYears, + startOfMonth, + endOfMonth, startOfYear, endOfYear, startOfQuarter, @@ -43,7 +45,10 @@ const getIntervallBorders = (start, end, frequency) => { switch (frequency) { case FREQUENCIES.MONTHLY: - return [start, end]; + return [ + format(startOfMonth(start), "YYYY-MM-DD"), + format(endOfMonth(end), "YYYY-MM-DD") + ]; case FREQUENCIES.YEARLY: return [ format(startOfYear(start), "YYYY-MM-DD"),