Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 4153:7c44af0b9370

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: Waterleveldiagram Since there is no convention for the nameing of reference waterlevels we have to do some guesswork. Levels containing /HDC/ are considered hdc and ldc accordingly are determined by /LDC/. For now, we assume having only a max of one LDC and one HDC. If there are multiple instances of LDC and HDC, LDCs are red and HDCs are green.
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 02 Aug 2019 12:59:23 +0200
parents 40bd6854a294
children d54d86d27e82
comparison
equal deleted inserted replaced
4152:78ec61acf72e 4153:7c44af0b9370
104 import * as d3Base from "d3"; 104 import * as d3Base from "d3";
105 import { lineChunked } from "d3-line-chunked"; 105 import { lineChunked } from "d3-line-chunked";
106 import { endOfDay } from "date-fns"; 106 import { endOfDay } from "date-fns";
107 import debounce from "debounce"; 107 import debounce from "debounce";
108 import { saveAs } from "file-saver"; 108 import { saveAs } from "file-saver";
109 import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; 109 import { diagram, pdfgen, templateLoader, refwaterlevels } from "@/lib/mixins";
110 import { HTTP } from "@/lib/http"; 110 import { HTTP } from "@/lib/http";
111 import { displayError } from "@/lib/errors"; 111 import { displayError } from "@/lib/errors";
112 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; 112 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
113 // we should load only d3 modules we need but for now we'll go with the lazy way 113 // we should load only d3 modules we need but for now we'll go with the lazy way
114 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/ 114 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
115 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked 115 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
116 const d3 = Object.assign(d3Base, { lineChunked }); 116 const d3 = Object.assign(d3Base, { lineChunked });
117 117
118 export default { 118 export default {
119 mixins: [diagram, pdfgen, templateLoader], 119 mixins: [diagram, pdfgen, templateLoader, refwaterlevels],
120 components: { 120 components: {
121 DiagramLegend: () => import("@/components/DiagramLegend") 121 DiagramLegend: () => import("@/components/DiagramLegend")
122 }, 122 },
123 data() { 123 data() {
124 return { 124 return {
452 .selectAll(".line") 452 .selectAll(".line")
453 .selectAll("circle.d3-line-chunked-chunk-predicted-point") 453 .selectAll("circle.d3-line-chunked-chunk-predicted-point")
454 .attr("fill-opacity", 0.6); 454 .attr("fill-opacity", 0.6);
455 455
456 svg 456 svg
457 .selectAll(".hdc-line, .mw-line, .ldc-line, .rn-line") 457 .selectAll(".hdc-line, .mw-line, .ldc-line, .rn-line ")
458 .attr("stroke-width", 1) 458 .attr("stroke-width", 1)
459 .attr("fill", "none") 459 .attr("fill", "none")
460 .attr("clip-path", "url(#waterlevel-clip)"); 460 .attr("clip-path", "url(#waterlevel-clip)");
461 svg.selectAll(".hdc-line").attr("stroke", "red"); 461 svg.selectAll(".hdc-line").attr("stroke", "red");
462 svg.selectAll(".ldc-line").attr("stroke", "green"); 462 svg.selectAll(".ldc-line").attr("stroke", "green");
463
463 svg.selectAll(".mw-line").attr("stroke", "rgb(128,128,128)"); 464 svg.selectAll(".mw-line").attr("stroke", "rgb(128,128,128)");
464 svg.selectAll(".rn-line").attr("stroke", "rgb(128,128,128)"); 465 svg.selectAll(".rn-line").attr("stroke", "rgb(128,128,128)");
465 svg 466 svg
466 .selectAll(".ref-waterlevel-label") 467 .selectAll(".ref-waterlevel-label")
467 .style("font-size", "10px") 468 .style("font-size", "10px")
556 getExtent(refWaterLevels) { 557 getExtent(refWaterLevels) {
557 let rest; 558 let rest;
558 if (refWaterLevels) { 559 if (refWaterLevels) {
559 // set min/max values for the waterlevel axis 560 // set min/max values for the waterlevel axis
560 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC) 561 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
562 const { LDC, HDC } = this.determineLDCHDC(refWaterLevels);
561 rest = [ 563 rest = [
562 { 564 {
563 waterlevel: 565 waterlevel: HDC + (HDC - LDC) / 8
564 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8
565 }, 566 },
566 { 567 {
567 waterlevel: Math.max( 568 waterlevel: Math.max(LDC - (HDC - LDC) / 4, 0)
568 refWaterLevels.LDC -
569 (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
570 0
571 )
572 } 569 }
573 ]; 570 ];
574 } else { 571 } else {
575 rest = []; 572 rest = [];
576 } 573 }
772 }; 769 };
773 }, 770 },
774 drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }) { 771 drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }) {
775 // filling area between HDC and LDC 772 // filling area between HDC and LDC
776 if (refWaterLevels) { 773 if (refWaterLevels) {
777 diagram 774 const { LDC, HDC } = this.determineLDCHDC(refWaterLevels);
778 .append("rect") 775 if (LDC && HDC) {
779 .attr("class", "hdc-ldc-area") 776 diagram
780 .attr("x", 0) 777 .append("rect")
781 .attr("y", scale.y(refWaterLevels.HDC)) 778 .attr("class", "hdc-ldc-area")
782 .attr("width", dimensions.width) 779 .attr("x", 0)
783 .attr( 780 .attr("y", scale.y(HDC))
784 "height", 781 .attr("width", dimensions.width)
785 scale.y(refWaterLevels.LDC) - scale.y(refWaterLevels.HDC) 782 .attr("height", refWaterLevels ? scale.y(LDC) - scale.y(HDC) : 0);
786 ); 783 }
787 } 784 }
788 785
789 const refWaterlevelLine = d3 786 const refWaterlevelLine = d3
790 .line() 787 .line()
791 .x(d => scale.x(d.x)) 788 .x(d => scale.x(d.x))
792 .y(d => scale.y(d.y)); 789 .y(d => scale.y(d.y));
790
791 const levelStyle = name => {
792 if (/HDC/.test(name)) return "hdc-line";
793 if (/LDC/.test(name)) return "ldc-line";
794 return `${name.toLowerCase()}-line`;
795 };
793 796
794 for (let ref in refWaterLevels) { 797 for (let ref in refWaterLevels) {
795 if (refWaterLevels[ref]) { 798 if (refWaterLevels[ref]) {
796 diagram 799 diagram
797 .append("path") 800 .append("path")
798 .datum([ 801 .datum([
799 { x: 0, y: refWaterLevels[ref] }, 802 { x: 0, y: refWaterLevels[ref] },
800 { x: extent.date[1], y: refWaterLevels[ref] } 803 { x: extent.date[1], y: refWaterLevels[ref] }
801 ]) 804 ])
802 .attr("class", ref.toLowerCase() + "-line") 805 .attr("class", levelStyle(ref))
803 .attr("d", refWaterlevelLine); 806 .attr("d", refWaterlevelLine);
804 diagram // label 807 diagram // label
805 .append("rect") 808 .append("rect")
806 .attr("class", "ref-waterlevel-label-background") 809 .attr("class", "ref-waterlevel-label-background")
807 .attr("x", 1) 810 .attr("x", 1)