Mercurial > gemma

changeset 3007:792d4476d5d5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client:implemented pdf-generation for profiles diagrams * use canvg to render svg on canvas * rewrite some d3 css attributes manually to let canvg including them during the rendering on canvas
author Fadi Abbud <fadi.abbud@intevation.de>
date Thu, 11 Apr 2019 11:55:17 +0200
parents 44493664d40e
children f394e828a6d2
files client/src/components/fairway/Fairwayprofile.vue
diffstat 1 files changed, 48 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue	Thu Apr 11 11:44:11 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Thu Apr 11 11:55:17 2019 +0200
@@ -11,8 +11,18 @@
         <span style="background-color: #4a2f06"></span>
         Ground
       </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="!fairwayData">
@@ -40,6 +50,8 @@
 import * as d3 from "d3";
 import { mapState, mapGetters } from "vuex";
 import debounce from "debounce";
+import jsPDF from "jspdf";
+import canvg from "canvg";
 
 const GROUND_COLOR = "#4A2F06";
 const WATER_COLOR = "#005DFF";
@@ -129,6 +141,24 @@
     }
   },
   methods: {
+    downloadPDF() {
+      var svg = this.$refs.diagramContainer.innerHTML;
+      if (svg) {
+        svg = svg.replace(/\r?\n|\r/g, "").trim();
+      }
+      var pdf = new jsPDF("p", "pt", "c2");
+      var canvas = document.createElement("canvas");
+      canvas.width = 1500;
+      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();
+    },
     calcRelativeDepth(depth) {
       /* takes a depth value and substracts the delta of the relative waterlevel
        * say the reference level is above the current level, the ground is nearer,
@@ -264,11 +294,26 @@
       graph
         .append("g")
         .attr("transform", "translate(0," + height + ")")
-        .call(xAxis.ticks(5));
+        .call(xAxis.ticks(5))
+        .selectAll(".tick text")
+        .attr("fill", "black")
+        .select(function() {
+          return this.parentNode;
+        })
+        .selectAll(".tick line")
+        .attr("stroke", "black");
       graph
         .append("g")
         .attr("transform", "translate(" + width + ",0)")
-        .call(yAxis2);
+        .call(yAxis2)
+        .selectAll(".tick text")
+        .attr("fill", "black")
+        .select(function() {
+          return this.parentNode;
+        })
+        .selectAll(".tick line")
+        .attr("stroke", "black");
+      graph.selectAll(".domain").attr("stroke", "black");
       return { xScale, yScaleRight, graph };
     },
     drawWaterlevel({ graph, xScale, yScaleRight, height }) {
@@ -335,7 +380,7 @@
           .attr("stroke-linecap", "round")
           .attr("stroke-width", 3)
           .attr("stroke-opacity", opacity)
-          .attr("fill-opacity", opacity)
+          .attr("fill-opacity", 0)
           .attr("d", profileLine);
       }
     },