Mercurial > gemma
changeset 4381:275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Thu, 12 Sep 2019 10:53:32 +0200 |
parents | d9ce63cad8da |
children | 7d9376f8a28c |
files | client/src/components/gauge/Waterlevel.vue |
diffstat | 1 files changed, 48 insertions(+), 22 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Thu Sep 12 10:15:25 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Thu Sep 12 10:53:32 2019 +0200 @@ -70,6 +70,17 @@ </button> --> </div> + <div class="btn-group-toggle w-100 mt-2"> + <label + class="btn btn-outline-secondary btn-sm" + :class="{ active: showNSC }" + ><input + type="checkbox" + v-model="showNSC" + autocomplete="off" + />Nash-Sutcliffe + </label> + </div> </DiagramLegend> <div class="d-flex flex-fill justify-content-center align-items-center" @@ -114,6 +125,8 @@ // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked const d3 = Object.assign(d3Base, { lineChunked }); +let temp = null; + export default { mixins: [diagram, pdfgen, templateLoader, refwaterlevels], components: { @@ -134,7 +147,8 @@ height: 297 }, templateData: null, - zoomStore: null + zoomStore: null, + showNSC: true }; }, computed: { @@ -178,6 +192,9 @@ } }, watch: { + showNSC() { + this.drawDiagram({ ...this.zoomStore }); + }, paneSetup() { this.$nextTick(() => this.drawDiagram()); }, @@ -291,7 +308,7 @@ } }; }, - drawDiagram() { + drawDiagram(zoom) { // remove old diagram and exit if necessary data is missing d3.select("#" + this.containerId + " svg").remove(); const elem = document.querySelector("#" + this.containerId); @@ -305,7 +322,8 @@ svgWidth: svgWidth, svgHeight: svgHeight, ...layout - }) + }), + zoomLevel: zoom ? zoom : null }); }, renderTo({ element, dimensions, zoomLevel }) { @@ -398,16 +416,17 @@ // static, don't need updater this.drawNavigationChart({ scale, navigation }); this.drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }); - - updaters.push( - this.drawNashSutcliffe({ hours: 72, diagram, scale, dimensions }) - ); - updaters.push( - this.drawNashSutcliffe({ hours: 48, diagram, scale, dimensions }) - ); - updaters.push( - this.drawNashSutcliffe({ hours: 24, diagram, scale, dimensions }) - ); + if (this.showNSC) { + updaters.push( + this.drawNashSutcliffe({ hours: 72, diagram, scale, dimensions }) + ); + updaters.push( + this.drawNashSutcliffe({ hours: 48, diagram, scale, dimensions }) + ); + updaters.push( + this.drawNashSutcliffe({ hours: 24, diagram, scale, dimensions }) + ); + } // INTERACTIONS @@ -955,14 +974,19 @@ .call(brush.move, scale.x.range().map(t.invertX, t)); }; zoom.on("zoom", () => { - if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") + if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") { return; // ignore zoom-by-brush + } let t = d3.event.transform; + // set the zoom to the passed zoom level. if (zoomLevel) { - const tx = (zoomLevel.x * dimensions.width) / zoomLevel.width; - const k = zoomLevel.k; - const ty = zoomLevel.y; + let tx = (zoomLevel.x * dimensions.width) / zoomLevel.width; + let k = zoomLevel.k; + let ty = zoomLevel.y; t = d3.zoomIdentity.translate(tx, ty).scale(k); + zoomLevel = null; // avoid to stuck at same zoom level after setting the zoom by subsequent zooming. + } else { + temp = { ...d3.event.transform, width: dimensions.width }; } scaleForZoom(t); }); @@ -971,11 +995,13 @@ svg.select(".chart-tooltip").style("opacity", 0); }); // store the zoom level after zomming is ended - if (!zoomLevel) { - zoom.on("end", () => { - this.zoomStore = { ...d3.event.transform, width: dimensions.width }; - }); - } + zoom.on("end", () => { + if (!zoomLevel) { + this.zoomStore = temp + ? temp + : { ...d3.event.transform, width: dimensions.width }; + } + }); navigation .append("g")