--- 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: {