Mercurial > gemma

changeset 3565:f6d67697f158

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve waterlevel diagram * Add export button for raw diagram as SVG. * Add new top-level dependency file-saver to help downloading files. jsPDF already has an elder version as dependency.
author Bernhard Reiter <bernhard@intevation.de>
date Fri, 31 May 2019 17:43:39 +0200
parents f50bde7eed0d
children 4c585b5d4fe8
files client/package.json client/src/components/gauge/Waterlevel.vue client/yarn.lock
diffstat 3 files changed, 24 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- a/client/package.json	Fri May 31 17:33:42 2019 +0200
+++ b/client/package.json	Fri May 31 17:43:39 2019 +0200
@@ -37,6 +37,7 @@
     "d3-line-chunked": "^1.4.1",
     "date-fns": "^1.30.1",
     "debounce": "^1.2.0",
+    "file-saver": "^2.0.2",
     "glob-all": "^3.1.0",
     "jspdf": "^1.5.3",
     "locale2": "^2.2.0",
--- a/client/src/components/gauge/Waterlevel.vue	Fri May 31 17:33:42 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Fri May 31 17:43:39 2019 +0200
@@ -58,6 +58,15 @@
           >
             <translate>Export as CSV</translate>
           </a>
+
+          <button
+            @click="downloadSVG"
+            type="button"
+            class="btn btn-sm btn-info d-block w-100 mt-2"
+            :disabled="!waterlevels.length"
+          >
+            <translate>Export as SVG</translate>
+          </button>
         </div>
       </DiagramLegend>
       <div
@@ -100,6 +109,7 @@
 import debounce from "debounce";
 import jsPDF from "jspdf";
 import canvg from "canvg";
+import { saveAs } from "file-saver";
 import { pdfgen } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
@@ -226,6 +236,14 @@
           : "DEFAULT"
       );
     },
+    downloadSVG() {
+      let svg = document.getElementById(this.containerId).firstElementChild;
+      let svgXML = new XMLSerializer().serializeToString(svg);
+      let blog = new Blob([svgXML], { type: "image/svg+xml;charset=utf-8" });
+      let filename =
+        this.selectedGauge.properties.objname + "-waterlevel-diagram.svg";
+      saveAs(blog, filename);
+    },
     downloadPDF() {
       this.pdf.doc = new jsPDF(
         "l",
--- a/client/yarn.lock	Fri May 31 17:33:42 2019 +0200
+++ b/client/yarn.lock	Fri May 31 17:43:39 2019 +0200
@@ -4873,6 +4873,11 @@
     loader-utils "^1.0.2"
     schema-utils "^1.0.0"
 
+file-saver@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.2.tgz#06d6e728a9ea2df2cce2f8d9e84dfcdc338ec17a"
+  integrity sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==
+
 file-saver@eligrey/FileSaver.js#1.3.8:
   version "1.3.8"
   resolved "https://codeload.github.com/eligrey/FileSaver.js/tar.gz/e865e37af9f9947ddcced76b549e27dc45c1cb2e"