Mercurial > gemma

changeset 2829:4a1211727d5f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: spuc8: implemented year controls
author Markus Kottlaender <markus@intevation.de>
date Wed, 27 Mar 2019 14:30:09 +0100
parents c2b90cb426ed
children 0632d543a427
files client/src/components/gauge/Gauges.vue client/src/components/gauge/HydrologicalConditions.vue client/src/store/gauges.js
diffstat 3 files changed, 48 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Gauges.vue	Wed Mar 27 14:20:00 2019 +0100
+++ b/client/src/components/gauge/Gauges.vue	Wed Mar 27 14:30:09 2019 +0100
@@ -67,7 +67,20 @@
           >
             <translate>Show Waterlevels</translate>
           </button>
-          <hr />
+          <hr class="mb-1" />
+          <div class="row no-gutters mb-2">
+            <small class="text-muted">
+              <translate>Compare to</translate>:
+            </small>
+            <input
+              type="number"
+              step="1"
+              min="1900"
+              :max="new Date().getFullYear()"
+              class="form-control form-control-sm small"
+              v-model="yearCompare"
+            />
+          </div>
           <button
             @click="showHydrologicalConditionsDiagram()"
             class="btn btn-sm btn-info d-block w-100 mt-2"
@@ -145,6 +158,14 @@
       set(date) {
         this.$store.commit("gauges/dateTo", date);
       }
+    },
+    yearCompare: {
+      get() {
+        return this.$store.state.gauges.yearCompare;
+      },
+      set(year) {
+        this.$store.commit("gauges/yearCompare", year);
+      }
     }
   },
   watch: {
@@ -254,10 +275,7 @@
 
       Promise.all([
         this.$store.dispatch("gauges/loadLongtermWaterlevels"),
-        this.$store.dispatch(
-          "gauges/loadYearWaterlevels",
-          new Date().getFullYear()
-        )
+        this.$store.dispatch("gauges/loadYearWaterlevels")
       ])
         .catch(error => {
           const { status, data } = error.response;
--- a/client/src/components/gauge/HydrologicalConditions.vue	Wed Mar 27 14:20:00 2019 +0100
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Wed Mar 27 14:30:09 2019 +0100
@@ -123,7 +123,11 @@
     };
   },
   computed: {
-    ...mapState("gauges", ["longtermWaterlevels", "yearWaterlevels"]),
+    ...mapState("gauges", [
+      "longtermWaterlevels",
+      "yearWaterlevels",
+      "yearCompare"
+    ]),
     ...mapGetters("gauges", ["selectedGauge"])
   },
   methods: {
@@ -622,7 +626,7 @@
             .attr("dy", "1.3rem")
             .attr("alignment-baseline", "hanging")
             .attr("text-anchor", "middle")
-            .text("Q75%: " + d.q75 + " cm");
+            .text(`Q75%: ${d.q75} cm`);
           tooltipText
             .append("tspan")
             .attr("x", 0)
@@ -630,7 +634,7 @@
             .attr("dy", "2.3rem")
             .attr("alignment-baseline", "hanging")
             .attr("text-anchor", "middle")
-            .text("Median: " + d.median + " cm");
+            .text(`Median: ${d.median} cm`);
           tooltipText
             .append("tspan")
             .attr("x", 0)
@@ -638,7 +642,7 @@
             .attr("dy", "3.3rem")
             .attr("alignment-baseline", "hanging")
             .attr("text-anchor", "middle")
-            .text("Q25%: " + d.q25 + " cm");
+            .text(`Q25%: ${d.q25} cm`);
           tooltipText
             .append("tspan")
             .attr("x", 0)
@@ -646,7 +650,7 @@
             .attr("dy", "4.3rem")
             .attr("alignment-baseline", "hanging")
             .attr("text-anchor", "middle")
-            .text("Max: " + d.max + " cm");
+            .text(`Max: ${d.max} cm`);
           tooltipText
             .append("tspan")
             .attr("x", 0)
@@ -654,7 +658,7 @@
             .attr("dy", "5.3rem")
             .attr("alignment-baseline", "hanging")
             .attr("text-anchor", "middle")
-            .text("Min: " + d.min + " cm");
+            .text(`Min: ${d.min} cm`);
 
           const dYear = this.yearWaterlevels.find(
             ywl => ywl.date.getTime() === d.date.getTime()
@@ -667,7 +671,7 @@
               .attr("dy", "6.3rem")
               .attr("alignment-baseline", "hanging")
               .attr("text-anchor", "middle")
-              .text("Year: " + dYear.mean.toFixed(1) + " cm");
+              .text(`${this.yearCompare}: ${dYear.mean.toFixed(1)} cm`);
           }
 
           // get text dimensions
--- a/client/src/store/gauges.js	Wed Mar 27 14:20:00 2019 +0100
+++ b/client/src/store/gauges.js	Wed Mar 27 14:30:09 2019 +0100
@@ -29,7 +29,8 @@
     yearWaterlevels: [],
     nashSutcliffe: null,
     dateFrom: dateFrom,
-    dateTo: dateTo
+    dateTo: dateTo,
+    yearCompare: new Date().getFullYear()
   };
 };
 
@@ -68,6 +69,9 @@
     },
     dateTo: (state, dateTo) => {
       state.dateTo = dateTo;
+    },
+    yearCompare: (state, year) => {
+      state.yearCompare = year;
     }
   },
   actions: {
@@ -183,11 +187,16 @@
           });
       });
     },
-    loadYearWaterlevels({ state, commit }, year) {
+    loadYearWaterlevels({ state, commit }) {
       return new Promise((resolve, reject) => {
-        HTTP.get(`/data/year-waterlevels/${state.selectedGaugeISRS}/${year}`, {
-          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-        })
+        HTTP.get(
+          `/data/year-waterlevels/${state.selectedGaugeISRS}/${
+            state.yearCompare
+          }`,
+          {
+            headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+          }
+        )
           .then(response => {
             const now = new Date();
             let data = response.data