# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1553605554 -3600
# Node ID 49c1570919ae2b864f1fa782f5f5ab7ce8aae9de
# Parent  30a753f51a3c5bcc1c6c737c6f565216ccb681e1
client: spuc8: use new endpoints to fetch year based and longterm waterlevel data

diff -r 30a753f51a3c -r 49c1570919ae client/src/components/gauge/Gauges.vue
--- a/client/src/components/gauge/Gauges.vue	Tue Mar 26 13:03:10 2019 +0100
+++ b/client/src/components/gauge/Gauges.vue	Tue Mar 26 14:05:54 2019 +0100
@@ -235,7 +235,8 @@
         icon: "ruler-vertical",
         closeCallback: () => {
           this.$store.commit("gauges/selectedGaugeISRS", null);
-          this.$store.commit("gauges/meanWaterlevels", []);
+          this.$store.commit("gauges/longtermWaterlevels", []);
+          this.$store.commit("gauges/yearWaterlevels", []);
         },
         expandCallback: () => {
           this.$store.commit("map/moveMap", {
@@ -251,8 +252,13 @@
       this.loading = true;
       this.$store.commit("application/showSplitscreen", true);
 
-      this.$store
-        .dispatch("gauges/loadMeanWaterlevels")
+      Promise.all([
+        this.$store.dispatch("gauges/loadLongtermWaterlevels"),
+        this.$store.dispatch(
+          "gauges/loadYearWaterlevels",
+          new Date().getFullYear()
+        )
+      ])
         .catch(error => {
           const { status, data } = error.response;
           displayError({
diff -r 30a753f51a3c -r 49c1570919ae client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Tue Mar 26 13:03:10 2019 +0100
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Tue Mar 26 14:05:54 2019 +0100
@@ -2,7 +2,7 @@
   <div
     class="d-flex flex-fill justify-content-center align-items-center diagram-container"
   >
-    <div v-if="!meanWaterlevels.length">
+    <div v-if="!longtermWaterlevels.length">
       <translate>No data available.</translate>
     </div>
   </div>
@@ -86,14 +86,9 @@
 
 export default {
   computed: {
-    ...mapState("gauges", ["meanWaterlevels"]),
+    ...mapState("gauges", ["longtermWaterlevels", "yearWaterlevels"]),
     ...mapGetters("gauges", ["selectedGauge", "minMaxWaterlevelForDay"])
   },
-  watch: {
-    meanWaterlevels() {
-      this.drawDiagram();
-    }
-  },
   methods: {
     drawDiagram() {
       // TODO: Optimize code. I'm pretty sure all of this can be done in a much
@@ -102,7 +97,7 @@
       // remove old diagram
       d3.select(".diagram-container svg").remove();
 
-      if (!this.selectedGauge || !this.meanWaterlevels.length) return;
+      if (!this.selectedGauge || !this.longtermWaterlevels.length) return;
 
       // get HDC/LDC/MW of the gauge
       let refWaterLevels = JSON.parse(
@@ -141,7 +136,7 @@
       // including HDC/LDC (+/- 1/8 HDC-LDC)
       let WaterlevelMinMax = d3.extent(
         [
-          ...this.meanWaterlevels,
+          ...this.longtermWaterlevels,
           {
             waterlevel:
               refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8
@@ -261,7 +256,7 @@
       // overall min/max area chart
       mainChart
         .append("path")
-        .datum(this.meanWaterlevels)
+        .datum(this.longtermWaterlevels)
         .attr("class", "area")
         .attr("d", areaChart);
 
@@ -316,25 +311,25 @@
       mainChart
         .append("path")
         .attr("class", "line mean")
-        .datum(this.meanWaterlevels)
+        .datum(this.longtermWaterlevels)
         .attr("d", lineChart("mean"));
       // median waterlevel chart
       mainChart
         .append("path")
         .attr("class", "line median")
-        .datum(this.meanWaterlevels)
+        .datum(this.longtermWaterlevels)
         .attr("d", lineChart("median"));
       // q25 waterlevel chart
       mainChart
         .append("path")
         .attr("class", "line q25")
-        .datum(this.meanWaterlevels)
+        .datum(this.longtermWaterlevels)
         .attr("d", lineChart("q25"));
       // q75 waterlevel chart
       mainChart
         .append("path")
         .attr("class", "line q75")
-        .datum(this.meanWaterlevels)
+        .datum(this.longtermWaterlevels)
         .attr("d", lineChart("q75"));
 
       // DRAWING NAVCHART
@@ -354,7 +349,7 @@
       // overall min/max area chart
       navChart
         .append("path")
-        .datum(this.meanWaterlevels)
+        .datum(this.longtermWaterlevels)
         .attr("class", "area")
         .attr("d", areaChartNav);
 
diff -r 30a753f51a3c -r 49c1570919ae client/src/store/gauges.js
--- a/client/src/store/gauges.js	Tue Mar 26 13:03:10 2019 +0100
+++ b/client/src/store/gauges.js	Tue Mar 26 14:05:54 2019 +0100
@@ -25,7 +25,8 @@
     gauges: [],
     selectedGaugeISRS: null,
     waterlevels: [],
-    meanWaterlevels: [],
+    longtermWaterlevels: [],
+    yearWaterlevels: [],
     nashSutcliffe: null,
     dateFrom: dateFrom,
     dateTo: dateTo
@@ -53,8 +54,11 @@
     waterlevels: (state, data) => {
       state.waterlevels = data;
     },
-    meanWaterlevels: (state, data) => {
-      state.meanWaterlevels = data;
+    longtermWaterlevels: (state, data) => {
+      state.longtermWaterlevels = data;
+    },
+    yearWaterlevels: (state, data) => {
+      state.yearWaterlevels = data;
     },
     nashSutcliffe: (state, data) => {
       state.nashSutcliffe = data;
@@ -139,19 +143,26 @@
           });
       });
     },
-    loadMeanWaterlevels({ state, commit }) {
+    loadLongtermWaterlevels({ state, commit }) {
       return new Promise((resolve, reject) => {
-        HTTP.get(`/data/average-waterlevels/${state.selectedGaugeISRS}`, {
+        HTTP.get(`/data/longterm-waterlevels/${state.selectedGaugeISRS}`, {
           headers: { "X-Gemma-Auth": localStorage.getItem("token") }
         })
           .then(response => {
+            const now = new Date();
             let data = response.data
               .split("\n")
               .filter((wl, i) => wl && i) // remove empty rows and first row
               .map(wl => {
                 wl = wl.split(",");
+                let dayAndMonth = wl[0].split("-").map(n => Number(n));
+                let date = new Date(
+                  now.getFullYear(),
+                  dayAndMonth[1] - 1,
+                  dayAndMonth[0]
+                );
                 return {
-                  date: new Date(wl[0]),
+                  date: date,
                   min: Number(wl[1]),
                   max: Number(wl[2]),
                   mean: Number(wl[3]),
@@ -161,11 +172,49 @@
                 };
               });
             data = data.sort((a, b) => a.date - b.date);
-            commit("meanWaterlevels", data);
+            commit("longtermWaterlevels", data);
             resolve(data);
           })
           .catch(error => {
-            commit("meanWaterlevels", []);
+            commit("longtermWaterlevels", []);
+            reject(error);
+          });
+      });
+    },
+    loadYearWaterlevels({ state, commit }, year) {
+      return new Promise((resolve, reject) => {
+        HTTP.get(`/data/year-waterlevels/${state.selectedGaugeISRS}/${year}`, {
+          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+        })
+          .then(response => {
+            const now = new Date();
+            let data = response.data
+              .split("\n")
+              .filter((wl, i) => wl && i) // remove empty rows and first row
+              .map(wl => {
+                wl = wl.split(",");
+                let dayAndMonth = wl[0].split("-").map(n => Number(n));
+                let date = new Date(
+                  now.getFullYear(),
+                  dayAndMonth[1] - 1,
+                  dayAndMonth[0]
+                );
+                return {
+                  date: date,
+                  min: Number(wl[1]),
+                  max: Number(wl[2]),
+                  mean: Number(wl[3]),
+                  median: Number(wl[4]),
+                  q25: Number(wl[5]),
+                  q75: Number(wl[6])
+                };
+              });
+            data = data.sort((a, b) => a.date - b.date);
+            commit("yearWaterlevels", data);
+            resolve(data);
+          })
+          .catch(error => {
+            commit("yearWaterlevels", []);
             reject(error);
           });
       });