Mercurial > gemma

comparison client/src/components/gauge/HydrologicalConditions.vue @ 3209:5b8916b78cea

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option
author Markus Kottlaender <markus@intevation.de>
date Thu, 09 May 2019 09:27:34 +0200
parents 9d38df37c1f8
children f76927849ef8
comparison
equal deleted inserted replaced
3208:3bba82bcb6a6 3209:5b8916b78cea
522 .selectAll(".area") 522 .selectAll(".area")
523 .attr("clip-path", "url(#hydrocond-clip)") 523 .attr("clip-path", "url(#hydrocond-clip)")
524 .attr("stroke", "none") 524 .attr("stroke", "none")
525 .attr("fill", "lightsteelblue"); 525 .attr("fill", "lightsteelblue");
526 this.svg 526 this.svg
527 .selectAll(".hdc-line, .ldc-line, .mw-line") 527 .selectAll(".hdc-line, .ldc-line, .mw-line, .rn-line")
528 .attr("stroke-width", 1) 528 .attr("stroke-width", 1)
529 .attr("fill", "none") 529 .attr("fill", "none")
530 .attr("clip-path", "url(#hydrocond-clip)"); 530 .attr("clip-path", "url(#hydrocond-clip)");
531 this.svg.selectAll(".hdc-line").attr("stroke", "red"); 531 this.svg.selectAll(".hdc-line").attr("stroke", "red");
532 this.svg.selectAll(".ldc-line").attr("stroke", "green"); 532 this.svg.selectAll(".ldc-line").attr("stroke", "green");
533 this.svg.selectAll(".mw-line").attr("stroke", "grey"); 533 this.svg.selectAll(".mw-line").attr("stroke", "grey");
534 this.svg.selectAll(".rn-line").attr("stroke", "grey");
534 this.svg 535 this.svg
535 .selectAll(".ref-waterlevel-label") 536 .selectAll(".ref-waterlevel-label")
536 .style("font-size", "11px") 537 .style("font-size", "11px")
537 .attr("fill", "#999"); 538 .attr("fill", "#999");
538 this.svg 539 this.svg
810 .line() 811 .line()
811 .x(d => this.scale.x(d.x)) 812 .x(d => this.scale.x(d.x))
812 .y(d => this.scale.y(d.y)); 813 .y(d => this.scale.y(d.y));
813 814
814 // HDC 815 // HDC
815 this.diagram 816 if (refWaterLevels.HDC) {
816 .append("path") 817 this.diagram
817 .datum([ 818 .append("path")
818 { x: 0, y: refWaterLevels.HDC }, 819 .datum([
819 { x: this.extent.date[1], y: refWaterLevels.HDC } 820 { x: 0, y: refWaterLevels.HDC },
820 ]) 821 { x: this.extent.date[1], y: refWaterLevels.HDC }
821 .attr("class", "hdc-line") 822 ])
822 .attr("d", refWaterlevelLine); 823 .attr("class", "hdc-line")
823 this.diagram // label 824 .attr("d", refWaterlevelLine);
824 .append("text") 825 this.diagram // label
825 .text(`HDC (${refWaterLevels.HDC})`) 826 .append("text")
826 .attr("class", "ref-waterlevel-label") 827 .text(`HDC (${refWaterLevels.HDC})`)
827 .attr("x", 5) 828 .attr("class", "ref-waterlevel-label")
828 .attr("y", this.scale.y(refWaterLevels.HDC) - 3); 829 .attr("x", 5)
830 .attr("y", this.scale.y(refWaterLevels.HDC) - 3);
831 }
829 // LDC 832 // LDC
830 this.diagram 833 if (refWaterLevels.LDC) {
831 .append("path") 834 this.diagram
832 .datum([ 835 .append("path")
833 { x: 0, y: refWaterLevels.LDC }, 836 .datum([
834 { x: this.extent.date[1], y: refWaterLevels.LDC } 837 { x: 0, y: refWaterLevels.LDC },
835 ]) 838 { x: this.extent.date[1], y: refWaterLevels.LDC }
836 .attr("class", "ldc-line") 839 ])
837 .attr("d", refWaterlevelLine); 840 .attr("class", "ldc-line")
838 this.diagram // label 841 .attr("d", refWaterlevelLine);
839 .append("text") 842 this.diagram // label
840 .text(`LDC (${refWaterLevels.LDC})`) 843 .append("text")
841 .attr("class", "ref-waterlevel-label") 844 .text(`LDC (${refWaterLevels.LDC})`)
842 .attr("x", 5) 845 .attr("class", "ref-waterlevel-label")
843 .attr("y", this.scale.y(refWaterLevels.LDC) - 3); 846 .attr("x", 5)
847 .attr("y", this.scale.y(refWaterLevels.LDC) - 3);
848 }
844 // MW 849 // MW
845 this.diagram 850 if (refWaterLevels.MW) {
846 .append("path") 851 this.diagram
847 .datum([ 852 .append("path")
848 { x: 0, y: refWaterLevels.MW }, 853 .datum([
849 { x: this.extent.date[1], y: refWaterLevels.MW } 854 { x: 0, y: refWaterLevels.MW },
850 ]) 855 { x: this.extent.date[1], y: refWaterLevels.MW }
851 .attr("class", "mw-line") 856 ])
852 .attr("d", refWaterlevelLine); 857 .attr("class", "mw-line")
853 this.diagram // label 858 .attr("d", refWaterlevelLine);
854 .append("text") 859 this.diagram // label
855 .text(`MW (${refWaterLevels.MW})`) 860 .append("text")
856 .attr("class", "ref-waterlevel-label") 861 .text(`MW (${refWaterLevels.MW})`)
857 .attr("x", 5) 862 .attr("class", "ref-waterlevel-label")
858 .attr("y", this.scale.y(refWaterLevels.MW) - 3); 863 .attr("x", 5)
864 .attr("y", this.scale.y(refWaterLevels.MW) - 3);
865 }
866 // RN
867 if (refWaterLevels.RN) {
868 this.diagram
869 .append("path")
870 .datum([
871 { x: 0, y: refWaterLevels.RN },
872 { x: this.extent.date[1], y: refWaterLevels.RN }
873 ])
874 .attr("class", "rn-line")
875 .attr("d", refWaterlevelLine);
876 this.diagram // label
877 .append("text")
878 .text(`RN (${refWaterLevels.RN})`)
879 .attr("class", "ref-waterlevel-label")
880 .attr("x", 5)
881 .attr("y", this.scale.y(refWaterLevels.RN) - 3);
882 }
859 }, 883 },
860 createZoom(updaters, eventRect) { 884 createZoom(updaters, eventRect) {
861 const brush = d3 885 const brush = d3
862 .brushX() 886 .brushX()
863 .handleSize(4) 887 .handleSize(4)