Mercurial > gemma
comparison 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 |
comparison
equal
deleted
inserted
replaced
3024:5470aa3ffb9a | 3025:37cc0d75ad84 |
---|---|
15 <span style="background-color: purple"></span> Q75% | 15 <span style="background-color: purple"></span> Q75% |
16 </div> | 16 </div> |
17 <div class="legend"> | 17 <div class="legend"> |
18 <span style="background-color: lightsteelblue"></span> | 18 <span style="background-color: lightsteelblue"></span> |
19 Long-term Amplitude | 19 Long-term Amplitude |
20 </div> | |
21 <div> | |
22 <button | |
23 @click="downloadPDF" | |
24 type="button" | |
25 class="btn btn-sm btn-info d-block w-100 mt-2" | |
26 > | |
27 <translate>Export to PDF</translate> | |
28 </button> | |
20 </div> | 29 </div> |
21 </DiagramLegend> | 30 </DiagramLegend> |
22 <div | 31 <div |
23 class="d-flex flex-fill justify-content-center align-items-center diagram-container" | 32 class="d-flex flex-fill justify-content-center align-items-center diagram-container" |
24 > | 33 > |
128 | 137 |
129 import { mapState, mapGetters } from "vuex"; | 138 import { mapState, mapGetters } from "vuex"; |
130 import * as d3 from "d3"; | 139 import * as d3 from "d3"; |
131 import debounce from "debounce"; | 140 import debounce from "debounce"; |
132 import { startOfYear, endOfYear } from "date-fns"; | 141 import { startOfYear, endOfYear } from "date-fns"; |
142 import jsPDF from "jspdf"; | |
143 import canvg from "canvg"; | |
133 | 144 |
134 export default { | 145 export default { |
135 components: { | 146 components: { |
136 DiagramLegend: () => import("@/components/DiagramLegend") | 147 DiagramLegend: () => import("@/components/DiagramLegend") |
137 }, | 148 }, |
153 "yearCompare" | 164 "yearCompare" |
154 ]), | 165 ]), |
155 ...mapGetters("gauges", ["selectedGauge"]) | 166 ...mapGetters("gauges", ["selectedGauge"]) |
156 }, | 167 }, |
157 methods: { | 168 methods: { |
169 downloadPDF() { | |
170 var svg = this.svg._groups[0][0].outerHTML; | |
171 console.log(this.svg); | |
172 if (svg) { | |
173 svg = svg.replace(/\r?\n|\r/g, "").trim(); | |
174 } | |
175 var pdf = new jsPDF("p", "pt", "c2"); | |
176 var canvas = document.createElement("canvas"); | |
177 canvas.width = window.innerWidth; | |
178 canvas.height = window.innerHeight / 2; | |
179 canvg(canvas, svg, { | |
180 ignoreMouse: true, | |
181 ignoreAnimation: true, | |
182 ignoreDimensions: true | |
183 }); | |
184 var imgData = canvas.toDataURL("image/png"); | |
185 pdf.addImage(imgData, "PNG", 50, 200); | |
186 pdf.save("Hydrological condition Diagram.pdf"); | |
187 }, | |
158 drawDiagram() { | 188 drawDiagram() { |
159 // remove old diagram | 189 // remove old diagram |
160 d3.select(".diagram-container svg").remove(); | 190 d3.select(".diagram-container svg").remove(); |
161 if (!this.selectedGauge || !this.longtermWaterlevels.length) return; | 191 if (!this.selectedGauge || !this.longtermWaterlevels.length) return; |
162 | 192 |
251 })` | 281 })` |
252 ); | 282 ); |
253 | 283 |
254 this.createZoom(updaters, eventRect); | 284 this.createZoom(updaters, eventRect); |
255 this.createTooltips(eventRect); | 285 this.createTooltips(eventRect); |
286 this.setInlineStyles(); | |
287 }, | |
288 setInlineStyles() { | |
289 this.svg.selectAll(".hide").attr("fill-opacity", 0); | |
290 this.svg | |
291 .selectAll(".line") | |
292 .attr("clip-path", "url(#clip)") | |
293 .attr("stroke-width", 2) | |
294 .attr("fill", "none"); | |
295 this.svg | |
296 .selectAll(".line") | |
297 .selectAll(".mean") | |
298 .attr("stroke", "red"); | |
299 this.svg | |
300 .selectAll(".line") | |
301 .selectAll(".median") | |
302 .attr("stroke", "black"); | |
303 this.svg | |
304 .selectAll(".line") | |
305 .selectAll(".q25") | |
306 .attr("stroke", "orange"); | |
307 this.svg | |
308 .selectAll(".line") | |
309 .selectAll(".q75") | |
310 .attr("stroke", "purple"); | |
311 this.svg | |
312 .selectAll(".area") | |
313 .attr("clip-path", "url(#clip)") | |
314 .attr("stroke", "none") | |
315 .attr("fill", "lightsteelblue"); | |
316 this.svg | |
317 .selectAll(".hdc-line, .ldc-line, .mw-line") | |
318 .attr("stroke-width", 1) | |
319 .attr("fill", "none") | |
320 .attr("clip-path", "url(#clip)"); | |
321 this.svg.selectAll(".hdc-line").attr("stroke", "red"); | |
322 this.svg.selectAll(".ldc-line").attr("stroke", "green"); | |
323 this.svg.selectAll(".mw-line").attr("stroke", "grey"); | |
324 this.svg | |
325 .selectAll(".ref-waterlevel-label") | |
326 .attr("font-size", "11px") | |
327 .attr("fill", "#999"); | |
328 this.svg | |
329 .selectAll(".now-line") | |
330 .attr("stroke", "#999") | |
331 .attr("stroke-width", 1) | |
332 .attr("stroke-dasharray", "5, 5") | |
333 .attr("clip-path", "url(#clip)"); | |
334 this.svg | |
335 .selectAll(".now-line-label") | |
336 .attr("fill", "#999") | |
337 .attr("font-size", "11px"); | |
338 this.svg | |
339 .selectAll(".tick line") | |
340 .attr("stroke-dasharray", 5) | |
341 .attr("stroke", " #ccc"); | |
342 this.svg.selectAll(".tick text").attr("fill", "black"); | |
343 this.svg.selectAll(".domain").attr("stroke", "black"); | |
344 | |
345 this.svg | |
346 .selectAll(".zoom") | |
347 .attr("cursor", "move") | |
348 .attr("fill", "none") | |
349 .attr("pointer-events", "all"); | |
350 this.svg | |
351 .selectAll(".brush") | |
352 .selectAll(".selection") | |
353 .attr("stroke", "none") | |
354 .attr("fill-opacity", 0.2); | |
355 this.svg | |
356 .selectAll(".brush") | |
357 .selectAll(".handle") | |
358 .attr("stroke", "rgba(23, 162, 184, 0.5)") | |
359 .attr("fill", "rgba(23, 162, 184, 0.5)"); | |
256 }, | 360 }, |
257 getDimensions() { | 361 getDimensions() { |
258 // dimensions and margins | 362 // dimensions and margins |
259 const svgWidth = document.querySelector(".diagram-container").clientWidth; | 363 const svgWidth = document.querySelector(".diagram-container").clientWidth; |
260 const svgHeight = document.querySelector(".diagram-container") | 364 const svgHeight = document.querySelector(".diagram-container") |