Mercurial > gemma
changeset 4294:c8b18408cc55
client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Fri, 30 Aug 2019 16:11:15 +0200 |
parents | dbd8d2416da7 |
children | 0bb735a412af |
files | client/src/components/gauge/Waterlevel.vue |
diffstat | 1 files changed, 9 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Fri Aug 30 13:36:18 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Fri Aug 30 16:11:15 2019 +0200 @@ -831,14 +831,16 @@ const dateNow = new Date(this.nashSutcliffe.when); const dateStart = new Date(dateNow.getTime() - hours * 60 * 60 * 1000); - const nashSutcliffeBox = hours => { + const nashSutcliffeBox = (hours, date) => { // show/hide boxes depending on scale of chart (hide if > 90 days) diagram .selectAll("path.nash-sutcliffe") .attr( "stroke-opacity", scale.x.domain()[1] - scale.x.domain()[0] > 90 * 86400000 ? 0 : 1 - ); + ) + // show boxes only if now line in the selected time range + .attr("opacity", dimensions.width >= scale.x(date) ? 1 : 0); return d3 .area() .x(d => scale.x(d)) @@ -859,7 +861,9 @@ dimensions.mainHeight - (Math.floor(0.06 * dimensions.mainHeight) * days + 0.5) + 12 - ); + ) + // show label only if now line in the selected time range + .attr("opacity", dimensions.width >= scale.x(date) ? 1 : 0); }; if (coeff.samples) { @@ -867,7 +871,7 @@ .append("path") .datum([dateStart, dateNow]) .attr("class", "nash-sutcliffe ns" + hours) - .attr("d", nashSutcliffeBox(hours)); + .attr("d", nashSutcliffeBox(hours, dateNow)); diagram .append("text") .attr("class", "nash-sutcliffe ns" + hours) @@ -890,7 +894,7 @@ return () => { diagram .select("path.nash-sutcliffe.ns" + hours) - .attr("d", nashSutcliffeBox(hours)); + .attr("d", nashSutcliffeBox(hours, dateNow)); diagram .select("text.nash-sutcliffe.ns" + hours) .call(nashSutcliffeLabel, dateNow, hours);