# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1558608146 -7200
# Node ID d7cc5cda82a927e2b1c05fc4f9782a9a7ec22cca
# Parent  c04b1409a59612b0d4da104a4591e698d40c720c
client: waterlevel diagrams: implemented csv export

diff -r c04b1409a596 -r d7cc5cda82a9 client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Thu May 23 12:27:14 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Thu May 23 12:42:26 2019 +0200
@@ -60,6 +60,13 @@
             <translate>Export to PDF</translate>
           </button>
         </div>
+        <a
+          class="btn btn-sm btn-info d-block w-100 mt-2"
+          :href="csvLink"
+          :download="csvFileName"
+        >
+          <translate>Export as CSV</translate>
+        </a>
       </DiagramLegend>
       <div
         class="d-flex flex-fill justify-content-center align-items-center"
@@ -172,6 +179,36 @@
       return `${this.selectedGauge.properties.objname}: ${this.$gettext(
         "Hydrological Conditions"
       )} (${this.longtermInterval.join(" - ")})`;
+    },
+    csvLink() {
+      return "data:text/csv;charset=utf-8," + encodeURIComponent(this.csvData);
+    },
+    csvFileName() {
+      return `${this.$gettext("hydrological-conditions")}-${
+        this.selectedGauge.properties.objname
+      }-${this.longtermInterval.join(" - ")}.csv`;
+    },
+    csvData() {
+      // 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.
+      let merged = this.longtermWaterlevels
+        .filter(d => d) // copy array, don't mutate original
+        .map(d => {
+          let yearData = this.yearWaterlevels.find(y => {
+            return d.date.getTime() === y.date.getTime();
+          });
+          d[this.yearCompare] = 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]}`;
+        })
+        .join("\n");
+      return `#Interval: ${this.longtermInterval.join(
+        " - "
+      )}\n#date;#min;#max;#mean;#median;#q25;#q75;#${
+        this.yearCompare
+      }\n${merged}`;
     }
   },
   watch: {
diff -r c04b1409a596 -r d7cc5cda82a9 client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Thu May 23 12:27:14 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Thu May 23 12:42:26 2019 +0200
@@ -47,6 +47,13 @@
           >
             <translate>Export to PDF</translate>
           </button>
+          <a
+            class="btn btn-sm btn-info d-block w-100 mt-2"
+            :href="csvLink"
+            :download="csvFileName"
+          >
+            <translate>Export as CSV</translate>
+          </a>
         </div>
       </DiagramLegend>
       <div
@@ -162,7 +169,12 @@
   },
   computed: {
     ...mapState("application", ["paneSetup"]),
-    ...mapState("gauges", ["dateFrom", "waterlevels", "nashSutcliffe"]),
+    ...mapState("gauges", [
+      "dateFrom",
+      "waterlevels",
+      "waterlevelsCSV",
+      "nashSutcliffe"
+    ]),
     ...mapGetters("gauges", ["selectedGauge"]),
     ...mapState("user", ["user"]),
     title() {
@@ -179,6 +191,18 @@
       get() {
         return this.$store.state.gauges.dateTo;
       }
+    },
+    csvLink() {
+      return (
+        "data:text/csv;charset=utf-8," + encodeURIComponent(this.waterlevelsCSV)
+      );
+    },
+    csvFileName() {
+      return `${this.$gettext("waterlevels")}-${
+        this.selectedGauge.properties.objname
+      }-${this.dateFrom.toISOString().split("T")[0]}-${
+        this.dateTo.toISOString().split("T")[0]
+      }.csv`;
     }
   },
   watch: {
diff -r c04b1409a596 -r d7cc5cda82a9 client/src/store/gauges.js
--- a/client/src/store/gauges.js	Thu May 23 12:27:14 2019 +0200
+++ b/client/src/store/gauges.js	Thu May 23 12:42:26 2019 +0200
@@ -25,6 +25,7 @@
     gauges: [],
     selectedGaugeISRS: null,
     waterlevels: [],
+    waterlevelsCSV: "",
     longtermWaterlevels: [],
     longtermInterval: [],
     yearWaterlevels: [],
@@ -56,6 +57,9 @@
     waterlevels: (state, data) => {
       state.waterlevels = data;
     },
+    waterlevelsCSV: (state, data) => {
+      state.waterlevelsCSV = data;
+    },
     longtermWaterlevels: (state, data) => {
       state.longtermWaterlevels = data;
     },
@@ -133,6 +137,7 @@
           }
         )
           .then(response => {
+            commit("waterlevelsCSV", response.data);
             let data = response.data
               .split("\n")
               // remove empty rows and rows starting with #