Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 2691:023a607c4bcc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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(