# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1572255672 -3600
# Node ID b3f65cff13e8f97745eda3b8b431fb7e49d62592
# Parent  2ce5c727b465423b8c6481f3f96029bbe294b20a
client: FWD,FWDVsLNWL: implement image-export

diff -r 2ce5c727b465 -r b3f65cff13e8 client/src/components/fairway/AvailableFairwayDepth.vue
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Oct 28 10:20:24 2019 +0100
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Oct 28 10:41:12 2019 +0100
@@ -37,10 +37,18 @@
           </button>
           <a
             :href="dataLink"
-            :download="csvFileName"
+            :download="`${fileName}.csv`"
             class="mt-2 btn btn-sm btn-info w-100"
             ><translate>Download CSV</translate></a
           >
+          <a
+            @click="downloadImage"
+            id="downloadimage"
+            class="btn btn-sm btn-info text-white d-block w-100 mt-2"
+            :download="`${fileName}.png`"
+          >
+            <translate>Download Image</translate>
+          </a>
         </div>
         <div class="btn-group-toggle w-100 mt-2">
           <label
@@ -205,6 +213,13 @@
     dataLink() {
       return `data:text/csv;charset=utf-8, ${encodeURIComponent(this.csv)}`;
     },
+    fileName() {
+      if (!this.frequencyD) return;
+      return this.downloadFilename(
+        this.$gettext("FairwayAvailability"),
+        this.featureName
+      );
+    },
     csvFileName() {
       if (!this.frequencyD) return;
       return (
@@ -284,12 +299,7 @@
         templateData: this.templateData,
         diagramTitle: title
       });
-      this.pdf.doc.save(
-        this.downloadFilename(
-          this.$gettext("FairwayAvailability"),
-          this.featureName
-        ) + ".pdf"
-      );
+      this.pdf.doc.save(this.fileName + ".pdf");
     },
     addDiagramLegend(position, offset, color) {
       let x = offset.x,
@@ -397,6 +407,12 @@
         .attr("width", "100%")
         .attr("height", "100%");
       diagram.append("g");
+      diagram
+        .append("g")
+        .append("rect")
+        .attr("width", "100%")
+        .attr("height", "100%")
+        .attr("fill", "#ffffff");
       const yScale = d3
         .scaleLinear()
         .domain(this.frequencyToRange)
diff -r 2ce5c727b465 -r b3f65cff13e8 client/src/components/fairway/AvailableFairwayDepthLNWL.vue
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Mon Oct 28 10:20:24 2019 +0100
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Mon Oct 28 10:41:12 2019 +0100
@@ -37,10 +37,18 @@
           </button>
           <a
             :href="dataLink"
-            :download="csvFileName"
+            :download="`${fileName}.csv`"
             class="mt-2 btn btn-sm btn-info w-100"
             ><translate>Download CSV</translate></a
           >
+          <a
+            @click="downloadImage"
+            id="downloadimage"
+            class=" btn btn-sm btn-info text-white d-block w-100 mt-2"
+            :download="`${fileName}.png`"
+          >
+            <translate>Download Image</translate>
+          </a>
         </div>
         <div class="btn-group-toggle w-100 mt-2">
           <label
@@ -204,13 +212,11 @@
     dataLink() {
       return `data:text/csv;charset=utf-8, ${encodeURIComponent(this.csv)}`;
     },
-    csvFileName() {
+    fileName() {
       if (!this.frequencyD) return;
-      return (
-        this.downloadFilename(
-          this.$gettext("FairwayAvailabilityVsLNWL"),
-          this.featureName
-        ) + ".csv"
+      return this.downloadFilename(
+        this.$gettext("FairwayAvailabilityVsLNWL"),
+        this.featureName
       );
     },
     availability() {
@@ -395,6 +401,12 @@
         .attr("width", "100%")
         .attr("height", "100%");
       diagram = diagram.append("g");
+      diagram
+        .append("g")
+        .append("rect")
+        .attr("width", "100%")
+        .attr("height", "100%")
+        .attr("fill", "#ffffff");
       const yScale = d3
         .scaleLinear()
         .domain([0, 100])