Mercurial > gemma
diff client/src/components/gauge/HydrologicalConditions.vue @ 3025:37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Fri, 12 Apr 2019 11:48:55 +0200 |
parents | 7ee9a3ef90d4 |
children | 3aca036e11f1 |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Fri Apr 12 11:41:24 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Fri Apr 12 11:48:55 2019 +0200 @@ -18,6 +18,15 @@ <span style="background-color: lightsteelblue"></span> Long-term Amplitude </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 class="d-flex flex-fill justify-content-center align-items-center diagram-container" @@ -130,6 +139,8 @@ import * as d3 from "d3"; import debounce from "debounce"; import { startOfYear, endOfYear } from "date-fns"; +import jsPDF from "jspdf"; +import canvg from "canvg"; export default { components: { @@ -155,6 +166,25 @@ ...mapGetters("gauges", ["selectedGauge"]) }, methods: { + downloadPDF() { + var svg = this.svg._groups[0][0].outerHTML; + 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 = window.innerHeight / 2; + canvg(canvas, svg, { + ignoreMouse: true, + ignoreAnimation: true, + ignoreDimensions: true + }); + var imgData = canvas.toDataURL("image/png"); + pdf.addImage(imgData, "PNG", 50, 200); + pdf.save("Hydrological condition Diagram.pdf"); + }, drawDiagram() { // remove old diagram d3.select(".diagram-container svg").remove(); @@ -253,6 +283,80 @@ this.createZoom(updaters, eventRect); this.createTooltips(eventRect); + this.setInlineStyles(); + }, + setInlineStyles() { + this.svg.selectAll(".hide").attr("fill-opacity", 0); + this.svg + .selectAll(".line") + .attr("clip-path", "url(#clip)") + .attr("stroke-width", 2) + .attr("fill", "none"); + this.svg + .selectAll(".line") + .selectAll(".mean") + .attr("stroke", "red"); + this.svg + .selectAll(".line") + .selectAll(".median") + .attr("stroke", "black"); + this.svg + .selectAll(".line") + .selectAll(".q25") + .attr("stroke", "orange"); + this.svg + .selectAll(".line") + .selectAll(".q75") + .attr("stroke", "purple"); + this.svg + .selectAll(".area") + .attr("clip-path", "url(#clip)") + .attr("stroke", "none") + .attr("fill", "lightsteelblue"); + this.svg + .selectAll(".hdc-line, .ldc-line, .mw-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(".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("fill", "#999") + .attr("font-size", "11px"); + 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