# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1552924907 -3600
# Node ID f393fabfdd35d655b7d4a0d187b7763e5af44e22
# Parent  fdc392299ff1e6883a4bfc725b34d8b6c41b3fb0
client: waterlevel diagram: chart extent based on selected dates instead of data

The extent of the chart's x-axis (date) was based on the data that is shown. Now it is based on the fromDate and
toDate set in the Guage dialog box.

diff -r fdc392299ff1 -r f393fabfdd35 client/src/components/gauge/Gauges.vue
--- a/client/src/components/gauge/Gauges.vue	Mon Mar 18 16:54:33 2019 +0100
+++ b/client/src/components/gauge/Gauges.vue	Mon Mar 18 17:01:47 2019 +0100
@@ -104,9 +104,7 @@
 export default {
   data() {
     return {
-      loading: false,
-      dateFrom: new Date(),
-      dateTo: new Date()
+      loading: false
     };
   },
   computed: {
@@ -120,6 +118,22 @@
       set(isrs) {
         this.$store.dispatch("gauges/selectedGaugeISRS", isrs);
       }
+    },
+    dateFrom: {
+      get() {
+        return this.$store.state.gauges.dateFrom;
+      },
+      set(date) {
+        this.$store.commit("gauges/dateFrom", date);
+      }
+    },
+    dateTo: {
+      get() {
+        return this.$store.state.gauges.dateTo;
+      },
+      set(date) {
+        this.$store.commit("gauges/dateTo", date);
+      }
     }
   },
   watch: {
@@ -174,10 +188,7 @@
       this.loading = true;
       this.$store.commit("application/showSplitscreen", true);
       this.$store
-        .dispatch("gauges/loadWaterlevels", {
-          from: this.dateFrom,
-          to: this.toDate
-        })
+        .dispatch("gauges/loadWaterlevels")
         .catch(error => {
           const { status, data } = error.response;
           displayError({
@@ -199,7 +210,6 @@
     }
   },
   mounted() {
-    this.dateFrom.setDate(this.dateFrom.getDate() - 30);
     this.$store.dispatch("gauges/loadGauges");
   }
 };
diff -r fdc392299ff1 -r f393fabfdd35 client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Mon Mar 18 16:54:33 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Mon Mar 18 17:01:47 2019 +0100
@@ -101,7 +101,7 @@
 
 export default {
   computed: {
-    ...mapState("gauges", ["waterlevels"]),
+    ...mapState("gauges", ["waterlevels", "dateFrom", "dateTo"]),
     ...mapGetters("gauges", ["selectedGauge"])
   },
   watch: {
@@ -160,7 +160,8 @@
         d => d.waterlevel
       );
       // setting the min and max values for the diagram axes
-      x.domain(d3.extent(this.waterlevels, d => d.date));
+      let dateTo = new Date(this.dateTo.getTime() + 86400);
+      x.domain(d3.extent([this.dateFrom, dateTo]));
       y.domain(WaterlevelMinMax);
       x2.domain(x.domain());
       y2.domain(y.domain());
@@ -253,13 +254,12 @@
         .attr("width", width)
         .attr("height", y(refWaterLevels.LDC) - y(refWaterLevels.HDC));
 
-      let lastDate = this.waterlevels[this.waterlevels.length - 1].date;
       // HDC
       mainChart
         .append("path")
         .datum([
           { x: 0, y: refWaterLevels.HDC },
-          { x: lastDate, y: refWaterLevels.HDC }
+          { x: dateTo, y: refWaterLevels.HDC }
         ])
         .attr("class", "hdc-line")
         .attr("d", refWaterlevelLine);
@@ -267,14 +267,14 @@
         .append("text")
         .text("HDC")
         .attr("class", "ref-waterlevel-label")
-        .attr("x", x(lastDate) - 20)
+        .attr("x", x(dateTo) - 20)
         .attr("y", y(refWaterLevels.HDC) - 3);
       // LDC
       mainChart
         .append("path")
         .datum([
           { x: 0, y: refWaterLevels.LDC },
-          { x: lastDate, y: refWaterLevels.LDC }
+          { x: dateTo, y: refWaterLevels.LDC }
         ])
         .attr("class", "ldc-line")
         .attr("d", refWaterlevelLine);
@@ -282,14 +282,14 @@
         .append("text")
         .text("LDC")
         .attr("class", "ref-waterlevel-label")
-        .attr("x", x(lastDate) - 20)
+        .attr("x", x(dateTo) - 20)
         .attr("y", y(refWaterLevels.LDC) - 3);
       // MW
       mainChart
         .append("path")
         .datum([
           { x: 0, y: refWaterLevels.MW },
-          { x: lastDate, y: refWaterLevels.MW }
+          { x: dateTo, y: refWaterLevels.MW }
         ])
         .attr("class", "mw-line")
         .attr("d", refWaterlevelLine);
@@ -297,7 +297,7 @@
         .append("text")
         .text("MW")
         .attr("class", "ref-waterlevel-label")
-        .attr("x", x(lastDate) - 20)
+        .attr("x", x(dateTo) - 20)
         .attr("y", y(refWaterLevels.MW) - 3);
 
       // waterlevel chart
diff -r fdc392299ff1 -r f393fabfdd35 client/src/store/gauges.js
--- a/client/src/store/gauges.js	Mon Mar 18 16:54:33 2019 +0100
+++ b/client/src/store/gauges.js	Mon Mar 18 17:01:47 2019 +0100
@@ -14,11 +14,16 @@
 import { HTTP } from "@/lib/http";
 import { WFS } from "ol/format.js";
 
+let dateFrom = new Date();
+dateFrom.setDate(dateFrom.getDate() - 30);
+
 const init = () => {
   return {
     gauges: [],
     selectedGaugeISRS: null,
-    waterlevels: []
+    waterlevels: [],
+    dateFrom: dateFrom,
+    dateTo: new Date()
   };
 };
 
@@ -42,6 +47,12 @@
     },
     waterlevels: (state, data) => {
       state.waterlevels = data;
+    },
+    dateFrom: (state, dateFrom) => {
+      state.dateFrom = dateFrom;
+    },
+    dateTo: (state, dateTo) => {
+      state.dateTo = dateTo;
     }
   },
   actions: {
@@ -78,20 +89,17 @@
           });
       });
     },
-    loadWaterlevels({ getters, commit }, { from, to }) {
-      from = from || new Date();
-      to = to || new Date();
-
+    loadWaterlevels({ state, getters, commit }) {
       // include the last day
-      to.setDate(to.getDate() + 1);
+      let dateTo = new Date(state.dateTo.getTime() + 86400);
 
       return new Promise((resolve, reject) => {
         HTTP.get(
           `/data/waterlevels/${
             getters.selectedGauge.properties.isrs_code
-          }?from=${from
+          }?from=${state.dateFrom
             .toISOString()
-            .substr(0, 23)}&to=${to.toISOString().substr(0, 23)}`,
+            .substr(0, 23)}&to=${dateTo.toISOString().substr(0, 23)}`,
           {
             headers: { "X-Gemma-Auth": localStorage.getItem("token") }
           }