Mercurial > gemma
comparison client/src/components/gauge/Waterlevel.vue @ 2792:cfd9ac0c92ee
client: waterlevel diagram: avoid code duplication
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 25 Mar 2019 12:16:22 +0100 |
parents | 2feb9f8f6c66 |
children | 8791becc40b1 |
comparison
equal
deleted
inserted
replaced
2791:2b79c0871138 | 2792:cfd9ac0c92ee |
---|---|
547 } | 547 } |
548 } | 548 } |
549 | 549 |
550 // INTERACTIVITY | 550 // INTERACTIVITY |
551 | 551 |
552 const updateChart = () => { | |
553 mainChart.select(".line").call(mainLineChart); | |
554 mainChart.select(".now-line").attr("d", nowLine); | |
555 mainChart.select(".now-line-label").call(nowLineLabel); | |
556 mainChart.select(".prediction-area").attr("d", predictionArea); | |
557 mainChart | |
558 .select("path.nash-sutcliffe.ns24") | |
559 .attr("d", nashSutcliffeBox(24)); | |
560 mainChart | |
561 .select("text.nash-sutcliffe.ns24") | |
562 .call(nashSutcliffeLabel, nashSutDate24, 24); | |
563 mainChart | |
564 .select("path.nash-sutcliffe.ns48") | |
565 .attr("d", nashSutcliffeBox(48)); | |
566 mainChart | |
567 .select("text.nash-sutcliffe.ns48") | |
568 .call(nashSutcliffeLabel, nashSutDate48, 48); | |
569 mainChart | |
570 .select("path.nash-sutcliffe.ns72") | |
571 .attr("d", nashSutcliffeBox(72)); | |
572 mainChart | |
573 .select("text.nash-sutcliffe.ns72") | |
574 .call(nashSutcliffeLabel, nashSutDate72, 72); | |
575 mainChart | |
576 .select(".axis--x") | |
577 .call(xAxis) | |
578 .selectAll(".tick text") | |
579 .attr("y", 15); | |
580 }; | |
581 | |
552 // selecting time period in nav chart | 582 // selecting time period in nav chart |
553 let brush = d3 | 583 let brush = d3 |
554 .brushX() | 584 .brushX() |
555 .handleSize(4) | 585 .handleSize(4) |
556 .extent([[0, 0], [width, navHeight]]) | 586 .extent([[0, 0], [width, navHeight]]) |
557 .on("brush end", () => { | 587 .on("brush end", () => { |
558 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") | 588 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") |
559 return; // ignore brush-by-zoom | 589 return; // ignore brush-by-zoom |
560 let s = d3.event.selection || x2.range(); | 590 let s = d3.event.selection || x2.range(); |
561 x.domain(s.map(x2.invert, x2)); | 591 x.domain(s.map(x2.invert, x2)); |
562 mainChart.select(".line").call(mainLineChart); | 592 updateChart(); |
563 mainChart.select(".now-line").attr("d", nowLine); | |
564 mainChart.select(".now-line-label").call(nowLineLabel); | |
565 mainChart.select(".prediction-area").attr("d", predictionArea); | |
566 mainChart | |
567 .select("path.nash-sutcliffe.ns24") | |
568 .attr("d", nashSutcliffeBox(24)); | |
569 mainChart | |
570 .select("text.nash-sutcliffe.ns24") | |
571 .call(nashSutcliffeLabel, nashSutDate24, 24); | |
572 mainChart | |
573 .select("path.nash-sutcliffe.ns48") | |
574 .attr("d", nashSutcliffeBox(48)); | |
575 mainChart | |
576 .select("text.nash-sutcliffe.ns48") | |
577 .call(nashSutcliffeLabel, nashSutDate48, 48); | |
578 mainChart | |
579 .select("path.nash-sutcliffe.ns72") | |
580 .attr("d", nashSutcliffeBox(72)); | |
581 mainChart | |
582 .select("text.nash-sutcliffe.ns72") | |
583 .call(nashSutcliffeLabel, nashSutDate72, 72); | |
584 mainChart | |
585 .select(".axis--x") | |
586 .call(xAxis) | |
587 .selectAll(".tick text") | |
588 .attr("y", 15); | |
589 svg | 593 svg |
590 .select(".zoom") | 594 .select(".zoom") |
591 .call( | 595 .call( |
592 zoom.transform, | 596 zoom.transform, |
593 d3.zoomIdentity.scale(width / (s[1] - s[0])).translate(-s[0], 0) | 597 d3.zoomIdentity.scale(width / (s[1] - s[0])).translate(-s[0], 0) |
603 .on("zoom", () => { | 607 .on("zoom", () => { |
604 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") | 608 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") |
605 return; // ignore zoom-by-brush | 609 return; // ignore zoom-by-brush |
606 let t = d3.event.transform; | 610 let t = d3.event.transform; |
607 x.domain(t.rescaleX(x2).domain()); | 611 x.domain(t.rescaleX(x2).domain()); |
608 mainChart.select(".line").call(mainLineChart); | 612 updateChart(); |
609 mainChart.select(".now-line").attr("d", nowLine); | |
610 mainChart.select(".now-line-label").call(nowLineLabel); | |
611 mainChart.select(".prediction-area").attr("d", predictionArea); | |
612 mainChart | |
613 .select("path.nash-sutcliffe.ns24") | |
614 .attr("d", nashSutcliffeBox(24)); | |
615 mainChart | |
616 .select("text.nash-sutcliffe.ns24") | |
617 .call(nashSutcliffeLabel, nashSutDate24, 24); | |
618 mainChart | |
619 .select("path.nash-sutcliffe.ns48") | |
620 .attr("d", nashSutcliffeBox(48)); | |
621 mainChart | |
622 .select("text.nash-sutcliffe.ns48") | |
623 .call(nashSutcliffeLabel, nashSutDate48, 48); | |
624 mainChart | |
625 .select("path.nash-sutcliffe.ns72") | |
626 .attr("d", nashSutcliffeBox(72)); | |
627 mainChart | |
628 .select("text.nash-sutcliffe.ns72") | |
629 .call(nashSutcliffeLabel, nashSutDate72, 72); | |
630 mainChart | |
631 .select(".axis--x") | |
632 .call(xAxis) | |
633 .selectAll(".tick text") | |
634 .attr("y", 15); | |
635 navChart | 613 navChart |
636 .select(".brush") | 614 .select(".brush") |
637 .call(brush.move, x.range().map(t.invertX, t)); | 615 .call(brush.move, x.range().map(t.invertX, t)); |
638 }) | 616 }) |
639 .on("start", () => { | 617 .on("start", () => { |