Mercurial > gemma
comparison client/src/components/gauge/Waterlevel.vue @ 2691:023a607c4bcc
client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
and added fade animation
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 15 Mar 2019 16:59:15 +0100 |
parents | 8f919fe629f9 |
children | 04b082a86d50 |
comparison
equal
deleted
inserted
replaced
2690:ef59a4255670 | 2691:023a607c4bcc |
---|---|
54 clip-path: url(#clip) | 54 clip-path: url(#clip) |
55 .chart-dot | 55 .chart-dot |
56 fill: steelblue | 56 fill: steelblue |
57 stroke: steelblue | 57 stroke: steelblue |
58 pointer-events: none | 58 pointer-events: none |
59 transition: opacity 0.1s | |
59 .chart-tooltip | 60 .chart-tooltip |
61 transition: opacity 0.3s | |
60 rect | 62 rect |
61 fill: #fff | 63 fill: #fff |
62 stroke: #ccc | 64 stroke: #ccc |
63 text | 65 text |
64 fill: #666 | 66 fill: #666 |
366 navChart | 368 navChart |
367 .select(".brush") | 369 .select(".brush") |
368 .call(brush.move, x.range().map(t.invertX, t)); | 370 .call(brush.move, x.range().map(t.invertX, t)); |
369 }) | 371 }) |
370 .on("start", () => { | 372 .on("start", () => { |
371 svg.select(".chart-dot").style("display", "none"); | 373 svg.select(".chart-dot").style("opacity", 0); |
372 svg.select(".chart-tooltip").style("display", "none"); | 374 svg.select(".chart-tooltip").style("opacity", 0); |
373 }) | |
374 .on("end", () => { | |
375 svg.select(".chart-dot").style("display", null); | |
376 svg.select(".chart-tooltip").style("display", null); | |
377 }); | 375 }); |
378 | 376 |
379 navChart | 377 navChart |
380 .append("g") | 378 .append("g") |
381 .attr("class", "brush") | 379 .attr("class", "brush") |
412 .attr("x", -15) | 410 .attr("x", -15) |
413 .attr("y", -8); | 411 .attr("y", -8); |
414 tooltipText | 412 tooltipText |
415 .append("tspan") | 413 .append("tspan") |
416 .attr("x", 8) | 414 .attr("x", 8) |
417 .attr("y", 7) | 415 .attr("y", 8) |
418 .style("font-weight", "bold"); | 416 .style("font-weight", "bold"); |
419 | 417 |
420 let bisectDate = d3.bisector(d => d.date).left; | 418 let bisectDate = d3.bisector(d => d.date).left; |
421 zoomRect | 419 zoomRect |
422 .on("mouseover", () => { | 420 .on("mouseover", () => { |
423 svg.select(".chart-dot").style("display", null); | 421 svg.select(".chart-dot").style("opacity", 1); |
424 svg.select(".chart-tooltip").style("display", null); | 422 svg.select(".chart-tooltip").style("opacity", 1); |
425 }) | 423 }) |
426 .on("mouseout", () => { | 424 .on("mouseout", () => { |
427 svg.select(".chart-dot").style("display", "none"); | 425 svg.select(".chart-dot").style("opacity", 0); |
428 svg.select(".chart-tooltip").style("display", "none"); | 426 svg.select(".chart-tooltip").style("opacity", 0); |
429 }) | 427 }) |
430 .on("mousemove", () => { | 428 .on("mousemove", () => { |
431 let x0 = x.invert(d3.mouse(document.querySelector(".zoom"))[0]), | 429 let x0 = x.invert(d3.mouse(document.querySelector(".zoom"))[0]), |
432 i = bisectDate(this.waterlevels, x0, 1), | 430 i = bisectDate(this.waterlevels, x0, 1), |
433 d0 = this.waterlevels[i - 1], | 431 d0 = this.waterlevels[i - 1], |
434 d1 = this.waterlevels[i], | 432 d1 = this.waterlevels[i], |
435 d = x0 - d0.date > d1.date - x0 ? d1 : d0; | 433 d = x0 - d0.date > d1.date - x0 ? d1 : d0; |
436 | 434 |
437 svg | 435 svg |
438 .select(".chart-dot") | 436 .select(".chart-dot") |
437 .style("opacity", 1) | |
439 .attr("transform", `translate(${x(d.date)}, ${y(d.waterlevel)})`); | 438 .attr("transform", `translate(${x(d.date)}, ${y(d.waterlevel)})`); |
440 svg | 439 svg |
441 .select(".chart-tooltip") | 440 .select(".chart-tooltip") |
441 .style("opacity", 1) | |
442 .attr( | 442 .attr( |
443 "transform", | 443 "transform", |
444 `translate(${x(d.date) - 25}, ${y(d.waterlevel) - 25})` | 444 `translate(${x(d.date) - 25}, ${y(d.waterlevel) - 25})` |
445 ); | 445 ); |
446 svg.select(".chart-tooltip text tspan:first-child").text( | 446 svg.select(".chart-tooltip text tspan:first-child").text( |