Mercurial > gemma
changeset 4153:7c44af0b9370
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 | 78ec61acf72e |
children | d54d86d27e82 |
files | client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js |
diffstat | 2 files changed, 39 insertions(+), 21 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Fri Aug 02 12:00:15 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Fri Aug 02 12:59:23 2019 +0200 @@ -106,7 +106,7 @@ import { endOfDay } from "date-fns"; import debounce from "debounce"; import { saveAs } from "file-saver"; -import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; +import { diagram, pdfgen, templateLoader, refwaterlevels } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; @@ -116,7 +116,7 @@ const d3 = Object.assign(d3Base, { lineChunked }); export default { - mixins: [diagram, pdfgen, templateLoader], + mixins: [diagram, pdfgen, templateLoader, refwaterlevels], components: { DiagramLegend: () => import("@/components/DiagramLegend") }, @@ -454,12 +454,13 @@ .attr("fill-opacity", 0.6); svg - .selectAll(".hdc-line, .mw-line, .ldc-line, .rn-line") + .selectAll(".hdc-line, .mw-line, .ldc-line, .rn-line ") .attr("stroke-width", 1) .attr("fill", "none") .attr("clip-path", "url(#waterlevel-clip)"); svg.selectAll(".hdc-line").attr("stroke", "red"); svg.selectAll(".ldc-line").attr("stroke", "green"); + svg.selectAll(".mw-line").attr("stroke", "rgb(128,128,128)"); svg.selectAll(".rn-line").attr("stroke", "rgb(128,128,128)"); svg @@ -558,17 +559,13 @@ if (refWaterLevels) { // set min/max values for the waterlevel axis // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC) + const { LDC, HDC } = this.determineLDCHDC(refWaterLevels); rest = [ { - waterlevel: - refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8 + waterlevel: HDC + (HDC - LDC) / 8 }, { - waterlevel: Math.max( - refWaterLevels.LDC - - (refWaterLevels.HDC - refWaterLevels.LDC) / 4, - 0 - ) + waterlevel: Math.max(LDC - (HDC - LDC) / 4, 0) } ]; } else { @@ -774,16 +771,16 @@ drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }) { // filling area between HDC and LDC if (refWaterLevels) { - diagram - .append("rect") - .attr("class", "hdc-ldc-area") - .attr("x", 0) - .attr("y", scale.y(refWaterLevels.HDC)) - .attr("width", dimensions.width) - .attr( - "height", - scale.y(refWaterLevels.LDC) - scale.y(refWaterLevels.HDC) - ); + const { LDC, HDC } = this.determineLDCHDC(refWaterLevels); + if (LDC && HDC) { + diagram + .append("rect") + .attr("class", "hdc-ldc-area") + .attr("x", 0) + .attr("y", scale.y(HDC)) + .attr("width", dimensions.width) + .attr("height", refWaterLevels ? scale.y(LDC) - scale.y(HDC) : 0); + } } const refWaterlevelLine = d3 @@ -791,6 +788,12 @@ .x(d => scale.x(d.x)) .y(d => scale.y(d.y)); + const levelStyle = name => { + if (/HDC/.test(name)) return "hdc-line"; + if (/LDC/.test(name)) return "ldc-line"; + return `${name.toLowerCase()}-line`; + }; + for (let ref in refWaterLevels) { if (refWaterLevels[ref]) { diagram @@ -799,7 +802,7 @@ { x: 0, y: refWaterLevels[ref] }, { x: extent.date[1], y: refWaterLevels[ref] } ]) - .attr("class", ref.toLowerCase() + "-line") + .attr("class", levelStyle(ref)) .attr("d", refWaterlevelLine); diagram // label .append("rect")
--- a/client/src/lib/mixins.js Fri Aug 02 12:00:15 2019 +0200 +++ b/client/src/lib/mixins.js Fri Aug 02 12:59:23 2019 +0200 @@ -47,6 +47,21 @@ } } }; +/** + * Since the names of LDC and HDC aren't normalized, we have to do guesswork + * best fit is key with HDC or LDC in it + */ +export const refwaterlevels = { + methods: { + determineLDCHDC(refWaterLevels) { + let HDC = + refWaterLevels[Object.keys(refWaterLevels).find(e => /HDC/.test(e))]; + let LDC = + refWaterLevels[Object.keys(refWaterLevels).find(e => /LDC/.test(e))]; + return { LDC, HDC }; + } + } +}; export const diagram = { methods: {