# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1554993794 -7200
# Node ID fe88a9b151ca9aceda6015eb9cbd304fb0ffc296
# Parent  5a3ac4d3dbbbb2d9a765474bd4dd50d469dbf481
client: implemented pdf-generation for waterlevel diagram
	* implement the export of diagram to pdf
	* rewrite the diagram styles to include them in generate pdf

diff -r 5a3ac4d3dbbb -r fe88a9b151ca client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Thu Apr 11 16:34:58 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Thu Apr 11 16:43:14 2019 +0200
@@ -14,8 +14,18 @@
         <span style="background-color: rgba(0, 255, 0, 0.1)"></span> Navigable
         Range
       </div>
+      <div>
+        <button
+          @click="downloadPDF"
+          type="button"
+          class="btn btn-sm btn-info d-block w-100 mt-2"
+        >
+          <translate>Export to PDF</translate>
+        </button>
+      </div>
     </DiagramLegend>
     <div
+      ref="diagramContainer"
       class="d-flex flex-fill justify-content-center align-items-center diagram-container"
     >
       <div v-if="!waterlevels.length">
@@ -90,7 +100,6 @@
       line
         stroke-dasharray: 5
         stroke: #ccc
-
     .zoom
       cursor: move
       fill: none
@@ -142,6 +151,8 @@
 import { lineChunked } from "d3-line-chunked";
 import { startOfDay, endOfDay } from "date-fns";
 import debounce from "debounce";
+import jsPDF from "jspdf";
+import canvg from "canvg";
 
 // we should load only d3 modules we need but for now we'll go with the lazy way
 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
@@ -168,6 +179,25 @@
     ...mapGetters("gauges", ["selectedGauge"])
   },
   methods: {
+    downloadPDF() {
+      var svg = this.$refs.diagramContainer.innerHTML;
+      console.log(this.svg);
+      if (svg) {
+        svg = svg.replace(/\r?\n|\r/g, "").trim();
+      }
+      var pdf = new jsPDF("p", "pt", "c2");
+      var canvas = document.createElement("canvas");
+      canvas.width = window.innerWidth;
+      canvas.height = 500;
+      canvg(canvas, svg, {
+        ignoreMouse: true,
+        ignoreAnimation: true,
+        ignoreDimensions: true
+      });
+      var imgData = canvas.toDataURL("image/png");
+      pdf.addImage(imgData, "PNG", 50, 200);
+      pdf.save("waterlevel-Diagram.pdf");
+    },
     drawDiagram() {
       // remove old diagram and exit if necessary data is missing
       d3.select(".diagram-container svg").remove();
@@ -276,6 +306,102 @@
 
       this.createZoom(updaters, eventRect);
       this.createTooltips(eventRect);
+      this.setInlineStyles();
+    },
+    //set the styles of the diagrams to include them in the pdf
+    setInlineStyles() {
+      this.svg
+        .selectAll(".line")
+        .attr("clip-path", "url(#clip)")
+        .selectAll("path")
+        .attr("stroke", "steelblue")
+        .attr("stroke-width", 2)
+        .attr("fill", "none");
+      this.svg
+        .selectAll(".line")
+        .selectAll("path.d3-line-chunked-chunk-gap")
+        .attr("stroke-opacity", 0);
+      this.svg
+        .selectAll(".line")
+        .selectAll("circle")
+        .attr("stroke", "steelblue")
+        .attr("stroke-width", 2);
+      this.svg
+        .selectAll(".line")
+        .selectAll("circle.d3-line-chunked-chunk-predicted-point")
+        .attr("fill-opacity", 0.6);
+
+      this.svg
+        .selectAll(".hdc-line, .mw-line, .ldc-line")
+        .attr("stroke-width", 1)
+        .attr("fill", "none")
+        .attr("clip-path", "url(#clip)");
+      this.svg.selectAll(".hdc-line").attr("stroke", "red");
+      this.svg.selectAll(".ldc-line").attr("stroke", "green");
+      this.svg.selectAll(".mw-line").attr("stroke", "grey");
+      this.svg
+        .selectAll(".ref-waterlevel-label")
+        .attr("font-size", "11px")
+        .attr("fill", "#999");
+      this.svg.selectAll(".hdc-ldc-area").attr("fill", "rgba(0, 255, 0, 0.1)");
+      this.svg
+        .selectAll(".now-line")
+        .attr("stroke", "#999")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "5, 5")
+        .attr("clip-path", "url(#clip)");
+      this.svg
+        .selectAll(".now-line-label")
+        .attr("font-size", "11px")
+        .attr("fill", "#999");
+      this.svg
+        .selectAll(".prediction-area")
+        .attr("fill", "steelblue")
+        .attr("fill-opacity", 0.2)
+        .attr("clip-path", "url(#clip)");
+
+      this.svg
+        .selectAll("path")
+        .selectAll(".nash-sutcliffe")
+        .attr("fill", "none")
+        .attr("stroke", "black")
+        .attr("stroke-width", 1)
+        .attr("clip-path", "url(#clip)");
+      this.svg
+        .selectAll("path")
+        .selectAll(".nash-sutcliffe")
+        .selectAll(".ns72")
+        .attr("fill", "rgba(0, 0, 0, 0.05)");
+      this.svg
+        .selectAll("text")
+        .selectAll(".nash-sutcliffe")
+        .attr("font-size", "10px")
+        .attr("clip-path", "url(#clip)")
+        .selectAll("tspan:last-child")
+        .attr("font-size", "9px")
+        .attr(" fill", "#777");
+
+      this.svg
+        .selectAll(".tick line")
+        .attr("stroke-dasharray", 5)
+        .attr("stroke", "#ccc");
+      this.svg.selectAll(".tick text").attr("fill", "black");
+      this.svg.selectAll(".domain").attr("stroke", "black");
+      this.svg
+        .selectAll(".zoom")
+        .attr("cursor", "move")
+        .attr("fill", "none")
+        .attr("pointer-events", "all");
+      this.svg
+        .selectAll(".brush")
+        .selectAll(".selection")
+        .attr("stroke", "none")
+        .attr("fill-opacity", 0.2);
+      this.svg
+        .selectAll(".brush")
+        .selectAll(".handle")
+        .attr("stroke", "rgba(23, 162, 184, 0.5)")
+        .attr("fill", "rgba(23, 162, 184, 0.5)");
     },
     getDimensions() {
       // dimensions and margins