Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 2792:cfd9ac0c92ee

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