Mercurial > gemma
changeset 4385:610773d34e4f
hydrological_conditions: decouple diagram from dialogue
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 12 Sep 2019 15:06:53 +0200 |
parents | b146d3c648f8 |
children | bad093433899 |
files | client/src/components/gauge/HydrologicalConditions.vue |
diffstat | 1 files changed, 36 insertions(+), 18 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Thu Sep 12 13:48:19 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Thu Sep 12 15:06:53 2019 +0200 @@ -12,7 +12,7 @@ <span style="background-color: red; width: 20px; height: 20px;" ></span> - {{ yearCompare }} + {{ yearCompareD }} </div> <div class="legend"> <span @@ -116,6 +116,9 @@ }, data() { return { + selectedGaugeD: null, + longtermIntervalD: null, + yearCompareD: null, zoomStore: null, containerId: "hydrologicalconditions-diagram-container", resizeListenerFunction: null, @@ -143,19 +146,22 @@ ]), ...mapGetters("gauges", ["selectedGauge"]), title() { - return `${this.selectedGauge.properties.objname}: ${this.$gettext( + if (!this.selectedGaugeD || !this.longtermIntervalD) return; + return `${this.selectedGaugeD.properties.objname}: ${this.$gettext( "Hydrological Conditions" - )} (${this.longtermInterval.join(" - ")})`; + )} (${this.longtermIntervalD.join(" - ")})`; }, csvLink() { return "data:text/csv;charset=utf-8," + encodeURIComponent(this.csvData); }, csvFileName() { + if (!this.selectedGaugeD || !this.longtermIntervalD) return; return `${this.$gettext("hydrological-conditions")}-${ - this.selectedGauge.properties.objname - }-${this.longtermInterval.join(" - ")}.csv`; + this.selectedGaugeD.properties.objname + }-${this.longtermIntervalD.join(" - ")}.csv`; }, csvData() { + if (!this.longtermIntervalD || !this.yearCompareD) return; // We cannot directly use the csv data provided by the backend because the // diagram uses data from two endpoints, longterm- and yearWaterlevels. // So we need to merge them here to have them in one csv export. @@ -165,31 +171,41 @@ let yearData = this.yearWaterlevels.find(y => { return d.date.getTime() === y.date.getTime(); }); - d[this.yearCompare] = yearData ? yearData.mean : ""; + d[this.yearCompareD] = yearData ? yearData.mean : ""; return `${d.date.getMonth() + 1}-${d.date.getDate()};${d.min};${ d.max - };${d.mean};${d.median};${d.q25};${d.q75};${d[this.yearCompare]}`; + };${d.mean};${d.median};${d.q25};${d.q75};${d[this.yearCompareD]}`; }) .join("\n"); - return `#Interval: ${this.longtermInterval.join( + return `#Interval: ${this.longtermIntervalD.join( " - " )}\n#date;#min;#max;#mean;#median;#q25;#q75;#${ - this.yearCompare + this.yearCompareD }\n${merged}`; } }, watch: { paneSetup() { - this.$nextTick(() => this.drawDiagram()); + this.$nextTick(() => { + this.initialDiagramValues(); + this.drawDiagram(); + }); }, longtermWaterlevels() { + this.initialDiagramValues(); this.drawDiagram(); }, yearWaterlevels() { + this.initialDiagramValues(); this.drawDiagram(); } }, methods: { + initialDiagramValues() { + this.selectedGaugeD = this.selectedGauge; + this.longtermIntervalD = this.longtermInterval; + this.yearCompareD = this.yearCompare; + }, close() { this.$store.commit( "application/paneSetup", @@ -200,9 +216,9 @@ }, downloadPDF() { let diagramTitle = - this.gaugeInfo(this.selectedGauge) + + this.gaugeInfo(this.selectedGaugeD) + ": Hydrological Conditions " + - this.longtermInterval.join(" - "); + this.longtermIntervalD.join(" - "); this.generatePDF({ templateData: this.templateData, @@ -210,7 +226,7 @@ }); this.pdf.doc.save( - this.selectedGauge.properties.objname + + this.selectedGaugeD.properties.objname + " Hydrological-condition Diagram.pdf" ); }, @@ -242,6 +258,7 @@ }, // Diagram legend addDiagramLegend(position, offset, color) { + if (!this.yearCompareD) return; let x = offset.x + 2, // 2 is the radius of the circle y = offset.y, padding = 3; @@ -263,7 +280,7 @@ this.pdf.doc.setDrawColor("white"); this.pdf.doc.setFillColor("red"); this.pdf.doc.circle(x, y, 2, "FD"); - this.pdf.doc.text(x + padding, y + 1, "" + this.yearCompare); + this.pdf.doc.text(x + padding, y + 1, "" + this.yearCompareD); this.pdf.doc.setFillColor("orange"); this.pdf.doc.circle(x, y + 5, 2, "FD"); this.pdf.doc.text(x + padding, y + 6, "Q25%"); @@ -297,7 +314,7 @@ // remove old diagram d3.select("#" + this.containerId + " svg").remove(); const el = document.querySelector("#" + this.containerId); - if (!this.selectedGauge || !this.longtermWaterlevels.length || !el) + if (!this.selectedGaugeD || !this.longtermWaterlevels.length || !el) return; const svgWidth = el.clientWidth; const svgHeight = el.clientHeight; @@ -316,7 +333,7 @@ // HDC/LDC/MW for the selected gauge const refWaterLevels = JSON.parse( - this.selectedGauge.properties.reference_water_levels + this.selectedGaugeD.properties.reference_water_levels ); // dimensions (widths, heights, margins) @@ -962,6 +979,7 @@ ywl => ywl.date.getTime() === d.date.getTime() ); if (dYear) { + if (!this.yearCompareD) return; tooltipText .append("tspan") .attr("x", 0) @@ -969,7 +987,7 @@ .attr("dy", "7.4em") .attr("dominant-baseline", "hanging") .attr("text-anchor", "middle") - .text(`${this.yearCompare}: ${dYear.mean.toFixed(1)} cm`); + .text(`${this.yearCompareD}: ${dYear.mean.toFixed(1)} cm`); } // get text dimensions @@ -1016,7 +1034,7 @@ // not guarantee that the DOM is not only updated but also re-painted on the // screen. setTimeout(this.drawDiagram, 150); - + this.initialDiagramValues(); this.templates[0] = this.defaultTemplate; this.form.template = this.templates[0]; this.templateData = this.form.template;