Mercurial > gemma
changeset 3348:7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Values/labels will always be displayed now. The boxes indicating the time period are only displayed if applicable.
If the chart extent is > 90 days the boxes are hidden.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 21 May 2019 12:13:16 +0200 |
parents | cd745be63f71 |
children | ac0006f675c0 |
files | client/src/components/gauge/Waterlevel.vue |
diffstat | 1 files changed, 31 insertions(+), 23 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Tue May 21 11:48:15 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Tue May 21 12:13:16 2019 +0200 @@ -593,7 +593,7 @@ this.svg .selectAll("path.nash-sutcliffe") .attr("fill", "none") - .attr("stroke", "black") + .attr("stroke", "darkgrey") .attr("stroke-width", 1) .attr("clip-path", "url(#waterlevel-clip)"); this.svg @@ -603,8 +603,7 @@ .selectAll("text.nash-sutcliffe") .style("font-size", "10px") .attr("clip-path", "url(#waterlevel-clip)") - .selectAll("tspan:last-child") - .style("font-size", "9px") + .selectAll("tspan:last-child, tspan:first-child") .attr("fill", "#555"); this.svg .selectAll(".tick line") @@ -925,6 +924,16 @@ const dateStart = new Date(dateNow.getTime() - hours * 60 * 60 * 1000); const nashSutcliffeBox = hours => { + // show/hide boxes depending on scale of chart (hide if > 90 days) + this.diagram + .selectAll("path.nash-sutcliffe") + .attr( + "stroke-opacity", + this.scale.x.domain()[1] - this.scale.x.domain()[0] > 90 * 86400000 + ? 0 + : 1 + ); + return d3 .area() .x(d => this.scale.x(d)) @@ -935,17 +944,11 @@ const nashSutcliffeLabel = (label, date, hours) => { let days = hours / 24; label - .attr("x", this.scale.x(date) + 3) + .attr("x", Math.min(this.scale.x(date), this.dimensions.width) - 4) .attr("y", this.dimensions.mainHeight - (15 * days + 0.5) + 12); }; - // Show nash-sutcliffe only when x-axis extent is smaller than 35 days - // (3024000000 ms). Since it shows squares representing 1, 2 and 3 days - // it does not make sense to show them on a x-axis with hundres of days. - if ( - coeff.samples && - this.scale.x.domain()[1] - this.scale.x.domain()[0] < 3024000000 - ) { + if (coeff.samples) { this.diagram .append("path") .datum([dateStart, dateNow]) @@ -954,25 +957,30 @@ this.diagram .append("text") .attr("class", "nash-sutcliffe ns" + hours) - .call(nashSutcliffeLabel, dateStart, hours) + .attr("text-anchor", "end") + .call(nashSutcliffeLabel, dateNow, hours) + .append("tspan") + .text(hours + "h: ") + .select(function() { + return this.parentNode; + }) .append("tspan") .text(coeff.value.toFixed(2)) .select(function() { return this.parentNode; }) .append("tspan") - .text(` (${coeff.samples})`) - .attr("dy", -1); + .text(` (${coeff.samples})`); + } - return () => { - this.diagram - .select("path.nash-sutcliffe.ns" + hours) - .attr("d", nashSutcliffeBox(hours)); - this.diagram - .select("text.nash-sutcliffe.ns" + hours) - .call(nashSutcliffeLabel, dateStart, hours); - }; - } + return () => { + this.diagram + .select("path.nash-sutcliffe.ns" + hours) + .attr("d", nashSutcliffeBox(hours)); + this.diagram + .select("text.nash-sutcliffe.ns" + hours) + .call(nashSutcliffeLabel, dateNow, hours); + }; }, createZoom(updaters, eventRect) { const brush = d3