Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 3212:f87fd173f750

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagrams: fixed tooltip bug Bug was caused by selecting elements by css class instead of id (when multiple diagrams are displayed).
author Markus Kottlaender <markus@intevation.de>
date Thu, 09 May 2019 10:34:09 +0200
parents f76927849ef8
children 83e8e1ea0aff
comparison
equal deleted inserted replaced
3211:f76927849ef8 3212:f87fd173f750
514 // INTERACTIONS 514 // INTERACTIONS
515 515
516 // create rectanlge on the main chart area to capture mouse events 516 // create rectanlge on the main chart area to capture mouse events
517 const eventRect = this.svg 517 const eventRect = this.svg
518 .append("rect") 518 .append("rect")
519 .attr("id", "zoom-waterlevels")
519 .attr("class", "zoom") 520 .attr("class", "zoom")
520 .attr("width", this.dimensions.width) 521 .attr("width", this.dimensions.width)
521 .attr("height", this.dimensions.mainHeight) 522 .attr("height", this.dimensions.mainHeight)
522 .attr( 523 .attr(
523 "transform", 524 "transform",
1039 this.diagram.select(".chart-tooltip").style("opacity", 0); 1040 this.diagram.select(".chart-tooltip").style("opacity", 0);
1040 }) 1041 })
1041 .on("mousemove", () => { 1042 .on("mousemove", () => {
1042 // find data point closest to mouse 1043 // find data point closest to mouse
1043 const x0 = this.scale.x.invert( 1044 const x0 = this.scale.x.invert(
1044 d3.mouse(document.querySelector(".zoom"))[0] 1045 d3.mouse(document.getElementById("zoom-waterlevels"))[0]
1045 ), 1046 ),
1046 i = d3.bisector(d => d.date).left(this.waterlevels, x0, 1), 1047 i = d3.bisector(d => d.date).left(this.waterlevels, x0, 1),
1047 d0 = this.waterlevels[i - 1], 1048 d0 = this.waterlevels[i - 1],
1048 d1 = this.waterlevels[i] || d0, 1049 d1 = this.waterlevels[i] || d0,
1049 d = x0 - d0.date > d1.date - x0 ? d1 : d0; 1050 d = x0 - d0.date > d1.date - x0 ? d1 : d0;