Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 3211:f76927849ef8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
author Markus Kottlaender <markus@intevation.de>
date Thu, 09 May 2019 10:08:49 +0200
parents 5b8916b78cea
children f87fd173f750
comparison
equal deleted inserted replaced
3210:66e90b48387a 3211:f76927849ef8
500 // returns a fuction to update the respective chart/area/etc. These 500 // returns a fuction to update the respective chart/area/etc. These
501 // updater functions are used by the zoom feature to rescale all elements. 501 // updater functions are used by the zoom feature to rescale all elements.
502 const updaters = []; 502 const updaters = [];
503 503
504 // draw 504 // draw
505 this.drawRefLines(refWaterLevels); // static, doesn't need an updater
506 updaters.push(this.drawAxes()); 505 updaters.push(this.drawAxes());
507 updaters.push(this.drawWaterlevelCharts()); 506 updaters.push(this.drawWaterlevelCharts());
508 updaters.push(this.drawNowLines());
509 updaters.push(this.drawPredictionAreas()); 507 updaters.push(this.drawPredictionAreas());
510 updaters.push(this.drawNashSutcliffe(24)); 508 updaters.push(this.drawNashSutcliffe(24));
511 updaters.push(this.drawNashSutcliffe(48)); 509 updaters.push(this.drawNashSutcliffe(48));
512 updaters.push(this.drawNashSutcliffe(72)); 510 updaters.push(this.drawNashSutcliffe(72));
511 updaters.push(this.drawNowLines());
512 this.drawRefLines(refWaterLevels); // static, doesn't need an updater
513 513
514 // INTERACTIONS 514 // INTERACTIONS
515 515
516 // create rectanlge on the main chart area to capture mouse events 516 // create rectanlge on the main chart area to capture mouse events
517 const eventRect = this.svg 517 const eventRect = this.svg
562 this.svg.selectAll(".ldc-line").attr("stroke", "green"); 562 this.svg.selectAll(".ldc-line").attr("stroke", "green");
563 this.svg.selectAll(".mw-line").attr("stroke", "grey"); 563 this.svg.selectAll(".mw-line").attr("stroke", "grey");
564 this.svg.selectAll(".rn-line").attr("stroke", "grey"); 564 this.svg.selectAll(".rn-line").attr("stroke", "grey");
565 this.svg 565 this.svg
566 .selectAll(".ref-waterlevel-label") 566 .selectAll(".ref-waterlevel-label")
567 .style("font-size", "11px") 567 .style("font-size", "10px")
568 .attr("fill", "#999"); 568 .attr("fill", "black");
569 this.svg
570 .selectAll(".ref-waterlevel-label-background")
571 .attr("fill", "rgba(255, 255, 255, 0.6)");
569 this.svg.selectAll(".hdc-ldc-area").attr("fill", "rgba(0, 255, 0, 0.1)"); 572 this.svg.selectAll(".hdc-ldc-area").attr("fill", "rgba(0, 255, 0, 0.1)");
570 this.svg 573 this.svg
571 .selectAll(".now-line") 574 .selectAll(".now-line")
572 .attr("stroke", "#999") 575 .attr("stroke", "#999")
573 .attr("stroke-width", 1) 576 .attr("stroke-width", 1)
863 const refWaterlevelLine = d3 866 const refWaterlevelLine = d3
864 .line() 867 .line()
865 .x(d => this.scale.x(d.x)) 868 .x(d => this.scale.x(d.x))
866 .y(d => this.scale.y(d.y)); 869 .y(d => this.scale.y(d.y));
867 870
868 // HDC 871 for (let ref in refWaterLevels) {
869 if (refWaterLevels.HDC) { 872 if (refWaterLevels[ref]) {
870 this.diagram 873 this.diagram
871 .append("path") 874 .append("path")
872 .datum([ 875 .datum([
873 { x: 0, y: refWaterLevels.HDC }, 876 { x: 0, y: refWaterLevels[ref] },
874 { x: this.extent.date[1], y: refWaterLevels.HDC } 877 { x: this.extent.date[1], y: refWaterLevels[ref] }
875 ]) 878 ])
876 .attr("class", "hdc-line") 879 .attr("class", ref.toLowerCase() + "-line")
877 .attr("d", refWaterlevelLine); 880 .attr("d", refWaterlevelLine);
878 this.diagram // label 881 this.diagram // label
879 .append("text") 882 .append("rect")
880 .text(`HDC (${refWaterLevels.HDC})`) 883 .attr("class", "ref-waterlevel-label-background")
881 .attr("class", "ref-waterlevel-label") 884 .attr("x", 1)
882 .attr("x", 5) 885 .attr("y", this.scale.y(refWaterLevels[ref]) - 13)
883 .attr("y", this.scale.y(refWaterLevels.HDC) - 3); 886 .attr("width", 55)
884 } 887 .attr("height", 12);
885 // LDC 888 this.diagram
886 if (refWaterLevels.LDC) { 889 .append("text")
887 this.diagram 890 .text(`${ref} (${refWaterLevels[ref]})`)
888 .append("path") 891 .attr("class", "ref-waterlevel-label")
889 .datum([ 892 .attr("x", 5)
890 { x: 0, y: refWaterLevels.LDC }, 893 .attr("y", this.scale.y(refWaterLevels[ref]) - 3);
891 { x: this.extent.date[1], y: refWaterLevels.LDC } 894 }
892 ])
893 .attr("class", "ldc-line")
894 .attr("d", refWaterlevelLine);
895 this.diagram // label
896 .append("text")
897 .text(`LDC (${refWaterLevels.LDC})`)
898 .attr("class", "ref-waterlevel-label")
899 .attr("x", 5)
900 .attr("y", this.scale.y(refWaterLevels.LDC) - 3);
901 }
902 // MW
903 if (refWaterLevels.MW) {
904 this.diagram
905 .append("path")
906 .datum([
907 { x: 0, y: refWaterLevels.MW },
908 { x: this.extent.date[1], y: refWaterLevels.MW }
909 ])
910 .attr("class", "mw-line")
911 .attr("d", refWaterlevelLine);
912 this.diagram // label
913 .append("text")
914 .text(`MW (${refWaterLevels.MW})`)
915 .attr("class", "ref-waterlevel-label")
916 .attr("x", 5)
917 .attr("y", this.scale.y(refWaterLevels.MW) - 3);
918 }
919 // RN
920 if (refWaterLevels.RN) {
921 this.diagram
922 .append("path")
923 .datum([
924 { x: 0, y: refWaterLevels.RN },
925 { x: this.extent.date[1], y: refWaterLevels.RN }
926 ])
927 .attr("class", "rn-line")
928 .attr("d", refWaterlevelLine);
929 this.diagram // label
930 .append("text")
931 .text(`RN (${refWaterLevels.RN})`)
932 .attr("class", "ref-waterlevel-label")
933 .attr("x", 5)
934 .attr("y", this.scale.y(refWaterLevels.RN) - 3);
935 } 895 }
936 }, 896 },
937 drawNashSutcliffe(hours) { 897 drawNashSutcliffe(hours) {
938 const coeff = this.nashSutcliffe.coeffs.find(c => c.hours === hours); 898 const coeff = this.nashSutcliffe.coeffs.find(c => c.hours === hours);
939 const dateNow = new Date(this.nashSutcliffe.when); 899 const dateNow = new Date(this.nashSutcliffe.when);