Mercurial > gemma
changeset 3209:5b8916b78cea
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 | 3bba82bcb6a6 |
| children | 66e90b48387a |
| files | client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue |
| diffstat | 2 files changed, 134 insertions(+), 86 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Wed May 08 17:53:08 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Thu May 09 09:27:34 2019 +0200 @@ -524,13 +524,14 @@ .attr("stroke", "none") .attr("fill", "lightsteelblue"); this.svg - .selectAll(".hdc-line, .ldc-line, .mw-line") + .selectAll(".hdc-line, .ldc-line, .mw-line, .rn-line") .attr("stroke-width", 1) .attr("fill", "none") .attr("clip-path", "url(#hydrocond-clip)"); this.svg.selectAll(".hdc-line").attr("stroke", "red"); this.svg.selectAll(".ldc-line").attr("stroke", "green"); this.svg.selectAll(".mw-line").attr("stroke", "grey"); + this.svg.selectAll(".rn-line").attr("stroke", "grey"); this.svg .selectAll(".ref-waterlevel-label") .style("font-size", "11px") @@ -812,50 +813,73 @@ .y(d => this.scale.y(d.y)); // HDC - this.diagram - .append("path") - .datum([ - { x: 0, y: refWaterLevels.HDC }, - { x: this.extent.date[1], y: refWaterLevels.HDC } - ]) - .attr("class", "hdc-line") - .attr("d", refWaterlevelLine); - this.diagram // label - .append("text") - .text(`HDC (${refWaterLevels.HDC})`) - .attr("class", "ref-waterlevel-label") - .attr("x", 5) - .attr("y", this.scale.y(refWaterLevels.HDC) - 3); + if (refWaterLevels.HDC) { + this.diagram + .append("path") + .datum([ + { x: 0, y: refWaterLevels.HDC }, + { x: this.extent.date[1], y: refWaterLevels.HDC } + ]) + .attr("class", "hdc-line") + .attr("d", refWaterlevelLine); + this.diagram // label + .append("text") + .text(`HDC (${refWaterLevels.HDC})`) + .attr("class", "ref-waterlevel-label") + .attr("x", 5) + .attr("y", this.scale.y(refWaterLevels.HDC) - 3); + } // LDC - this.diagram - .append("path") - .datum([ - { x: 0, y: refWaterLevels.LDC }, - { x: this.extent.date[1], y: refWaterLevels.LDC } - ]) - .attr("class", "ldc-line") - .attr("d", refWaterlevelLine); - this.diagram // label - .append("text") - .text(`LDC (${refWaterLevels.LDC})`) - .attr("class", "ref-waterlevel-label") - .attr("x", 5) - .attr("y", this.scale.y(refWaterLevels.LDC) - 3); + if (refWaterLevels.LDC) { + this.diagram + .append("path") + .datum([ + { x: 0, y: refWaterLevels.LDC }, + { x: this.extent.date[1], y: refWaterLevels.LDC } + ]) + .attr("class", "ldc-line") + .attr("d", refWaterlevelLine); + this.diagram // label + .append("text") + .text(`LDC (${refWaterLevels.LDC})`) + .attr("class", "ref-waterlevel-label") + .attr("x", 5) + .attr("y", this.scale.y(refWaterLevels.LDC) - 3); + } // MW - this.diagram - .append("path") - .datum([ - { x: 0, y: refWaterLevels.MW }, - { x: this.extent.date[1], y: refWaterLevels.MW } - ]) - .attr("class", "mw-line") - .attr("d", refWaterlevelLine); - this.diagram // label - .append("text") - .text(`MW (${refWaterLevels.MW})`) - .attr("class", "ref-waterlevel-label") - .attr("x", 5) - .attr("y", this.scale.y(refWaterLevels.MW) - 3); + if (refWaterLevels.MW) { + this.diagram + .append("path") + .datum([ + { x: 0, y: refWaterLevels.MW }, + { x: this.extent.date[1], y: refWaterLevels.MW } + ]) + .attr("class", "mw-line") + .attr("d", refWaterlevelLine); + this.diagram // label + .append("text") + .text(`MW (${refWaterLevels.MW})`) + .attr("class", "ref-waterlevel-label") + .attr("x", 5) + .attr("y", this.scale.y(refWaterLevels.MW) - 3); + } + // RN + if (refWaterLevels.RN) { + this.diagram + .append("path") + .datum([ + { x: 0, y: refWaterLevels.RN }, + { x: this.extent.date[1], y: refWaterLevels.RN } + ]) + .attr("class", "rn-line") + .attr("d", refWaterlevelLine); + this.diagram // label + .append("text") + .text(`RN (${refWaterLevels.RN})`) + .attr("class", "ref-waterlevel-label") + .attr("x", 5) + .attr("y", this.scale.y(refWaterLevels.RN) - 3); + } }, createZoom(updaters, eventRect) { const brush = d3
--- a/client/src/components/gauge/Waterlevel.vue Wed May 08 17:53:08 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Thu May 09 09:27:34 2019 +0200 @@ -554,13 +554,14 @@ .attr("fill-opacity", 0.6); this.svg - .selectAll(".hdc-line, .mw-line, .ldc-line") + .selectAll(".hdc-line, .mw-line, .ldc-line, .rn-line") .attr("stroke-width", 1) .attr("fill", "none") .attr("clip-path", "url(#waterlevel-clip)"); this.svg.selectAll(".hdc-line").attr("stroke", "red"); this.svg.selectAll(".ldc-line").attr("stroke", "green"); this.svg.selectAll(".mw-line").attr("stroke", "grey"); + this.svg.selectAll(".rn-line").attr("stroke", "grey"); this.svg .selectAll(".ref-waterlevel-label") .style("font-size", "11px") @@ -865,50 +866,73 @@ .y(d => this.scale.y(d.y)); // HDC - this.diagram - .append("path") - .datum([ - { x: 0, y: refWaterLevels.HDC }, - { x: this.extent.date[1], y: refWaterLevels.HDC } - ]) - .attr("class", "hdc-line") - .attr("d", refWaterlevelLine); - this.diagram // label - .append("text") - .text(`HDC (${refWaterLevels.HDC})`) - .attr("class", "ref-waterlevel-label") - .attr("x", 5) - .attr("y", this.scale.y(refWaterLevels.HDC) - 3); + if (refWaterLevels.HDC) { + this.diagram + .append("path") + .datum([ + { x: 0, y: refWaterLevels.HDC }, + { x: this.extent.date[1], y: refWaterLevels.HDC } + ]) + .attr("class", "hdc-line") + .attr("d", refWaterlevelLine); + this.diagram // label + .append("text") + .text(`HDC (${refWaterLevels.HDC})`) + .attr("class", "ref-waterlevel-label") + .attr("x", 5) + .attr("y", this.scale.y(refWaterLevels.HDC) - 3); + } // LDC - this.diagram - .append("path") - .datum([ - { x: 0, y: refWaterLevels.LDC }, - { x: this.extent.date[1], y: refWaterLevels.LDC } - ]) - .attr("class", "ldc-line") - .attr("d", refWaterlevelLine); - this.diagram // label - .append("text") - .text(`LDC (${refWaterLevels.LDC})`) - .attr("class", "ref-waterlevel-label") - .attr("x", 5) - .attr("y", this.scale.y(refWaterLevels.LDC) - 3); + if (refWaterLevels.LDC) { + this.diagram + .append("path") + .datum([ + { x: 0, y: refWaterLevels.LDC }, + { x: this.extent.date[1], y: refWaterLevels.LDC } + ]) + .attr("class", "ldc-line") + .attr("d", refWaterlevelLine); + this.diagram // label + .append("text") + .text(`LDC (${refWaterLevels.LDC})`) + .attr("class", "ref-waterlevel-label") + .attr("x", 5) + .attr("y", this.scale.y(refWaterLevels.LDC) - 3); + } // MW - this.diagram - .append("path") - .datum([ - { x: 0, y: refWaterLevels.MW }, - { x: this.extent.date[1], y: refWaterLevels.MW } - ]) - .attr("class", "mw-line") - .attr("d", refWaterlevelLine); - this.diagram // label - .append("text") - .text(`MW (${refWaterLevels.MW})`) - .attr("class", "ref-waterlevel-label") - .attr("x", 5) - .attr("y", this.scale.y(refWaterLevels.MW) - 3); + if (refWaterLevels.MW) { + this.diagram + .append("path") + .datum([ + { x: 0, y: refWaterLevels.MW }, + { x: this.extent.date[1], y: refWaterLevels.MW } + ]) + .attr("class", "mw-line") + .attr("d", refWaterlevelLine); + this.diagram // label + .append("text") + .text(`MW (${refWaterLevels.MW})`) + .attr("class", "ref-waterlevel-label") + .attr("x", 5) + .attr("y", this.scale.y(refWaterLevels.MW) - 3); + } + // RN + if (refWaterLevels.RN) { + this.diagram + .append("path") + .datum([ + { x: 0, y: refWaterLevels.RN }, + { x: this.extent.date[1], y: refWaterLevels.RN } + ]) + .attr("class", "rn-line") + .attr("d", refWaterlevelLine); + this.diagram // label + .append("text") + .text(`RN (${refWaterLevels.RN})`) + .attr("class", "ref-waterlevel-label") + .attr("x", 5) + .attr("y", this.scale.y(refWaterLevels.RN) - 3); + } }, drawNashSutcliffe(hours) { const coeff = this.nashSutcliffe.coeffs.find(c => c.hours === hours);