# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1568293613 -7200
# Node ID 610773d34e4f0952b91e170a0017ed04727228d8
# Parent  b146d3c648f8c579c9e387a291c2b73045ae8477
hydrological_conditions: decouple diagram from dialogue

diff -r b146d3c648f8 -r 610773d34e4f client/src/components/gauge/HydrologicalConditions.vue
--- 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;