Mercurial > gemma
changeset 3565:f6d67697f158
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"