Mercurial > gemma
comparison client/src/components/gauge/HydrologicalConditions.vue @ 3798:e008197e2215 yworks-svg2pdf
client: improve pdf generation
* Use generatePDF() from HydrologicalConditions.vue to unify code.
* Split out formatting of gaugeInfo, used from Waterlevel.vue
and HydrologicalConditions.vue.
* Make paper width and size setting in generatePDF() more readable
by grouping the conditions more logically.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 04 Jul 2019 10:15:46 +0200 |
parents | c66cdde873b5 |
children | 9b9140c65a96 |
comparison
equal
deleted
inserted
replaced
3797:20c1ac8ab8a2 | 3798:e008197e2215 |
---|---|
106 | 106 |
107 import { mapState, mapGetters } from "vuex"; | 107 import { mapState, mapGetters } from "vuex"; |
108 import * as d3 from "d3"; | 108 import * as d3 from "d3"; |
109 import debounce from "debounce"; | 109 import debounce from "debounce"; |
110 import { startOfYear, endOfYear } from "date-fns"; | 110 import { startOfYear, endOfYear } from "date-fns"; |
111 import jsPDF from "jspdf-yworks"; | |
112 import canvg from "canvg"; | 111 import canvg from "canvg"; |
113 import { pdfgen } from "@/lib/mixins"; | 112 import { pdfgen } from "@/lib/mixins"; |
114 import { HTTP } from "@/lib/http"; | 113 import { HTTP } from "@/lib/http"; |
115 import { displayError } from "@/lib/errors"; | 114 import { displayError } from "@/lib/errors"; |
116 | 115 |
235 ? "GAUGE_WATERLEVEL" | 234 ? "GAUGE_WATERLEVEL" |
236 : "DEFAULT" | 235 : "DEFAULT" |
237 ); | 236 ); |
238 }, | 237 }, |
239 downloadPDF() { | 238 downloadPDF() { |
240 if (this.templateData) { | 239 let diagramTitle = |
241 this.pdf.doc = new jsPDF( | 240 this.gaugeInfo(this.selectedGauge) + |
242 "l", | 241 ": Hydrological Conditions " + |
243 "mm", | 242 this.longtermInterval.join(" - "); |
244 this.templateData.properties.paperSize | 243 |
245 ); | 244 this.generatePDF({ |
246 // pdf width and height in millimeter (landscape) | 245 templateData: this.templateData, |
247 this.pdf.width = | 246 diagramTitle: diagramTitle |
248 this.templateData.properties.paperSize === "a3" ? 420 : 297; | 247 }); |
249 this.pdf.height = | 248 |
250 this.templateData.properties.paperSize === "a3" ? 297 : 210; | |
251 // default values if some are missing in template | |
252 let defaultFontSize = 11, | |
253 defaultColor = "black", | |
254 defaultWidth = 70, | |
255 defaultTextColor = "black", | |
256 defaultBorderColor = "white", | |
257 defaultBgColor = "white", | |
258 defaultRounding = 2, | |
259 defaultPadding = 2, | |
260 defaultOffset = { x: 0, y: 0 }; | |
261 this.templateData.elements.forEach(e => { | |
262 switch (e.type) { | |
263 case "diagram": { | |
264 this.addDiagram( | |
265 e.position, | |
266 e.offset || defaultOffset, | |
267 e.width, | |
268 e.height | |
269 ); | |
270 break; | |
271 } | |
272 case "diagramtitle": { | |
273 let gaugeInfo = | |
274 this.selectedGauge.properties.objname + | |
275 " (" + | |
276 this.selectedGauge.id | |
277 .split(".")[1] | |
278 .replace(/[()]/g, "") | |
279 .split(",")[3] + | |
280 "): Hydrological Conditions " + | |
281 this.longtermInterval.join(" - "); | |
282 this.addDiagramTitle( | |
283 e.position, | |
284 e.offset || defaultOffset, | |
285 e.fontsize || defaultFontSize, | |
286 e.color || defaultColor, | |
287 gaugeInfo | |
288 ); | |
289 break; | |
290 } | |
291 case "diagramlegend": { | |
292 this.addDiagramLegend( | |
293 e.position, | |
294 e.offset || defaultOffset, | |
295 e.color || defaultColor | |
296 ); | |
297 break; | |
298 } | |
299 case "image": { | |
300 this.addImage( | |
301 e.url, | |
302 e.format || "", | |
303 e.position, | |
304 e.offset || defaultOffset, | |
305 e.width || 90, | |
306 e.height || 60 | |
307 ); | |
308 break; | |
309 } | |
310 case "text": { | |
311 this.addText( | |
312 e.position, | |
313 e.offset || defaultOffset, | |
314 e.width || defaultWidth, | |
315 e.fontsize || defaultFontSize, | |
316 e.color || defaultTextColor, | |
317 e.text || "" | |
318 ); | |
319 break; | |
320 } | |
321 case "box": { | |
322 this.addBox( | |
323 e.position, | |
324 e.offset || defaultOffset, | |
325 e.width || 90, | |
326 e.height || 60, | |
327 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding, | |
328 e.color || defaultBgColor, | |
329 e.brcolor || defaultBorderColor | |
330 ); | |
331 | |
332 break; | |
333 } | |
334 case "textbox": { | |
335 this.addTextBox( | |
336 e.position, | |
337 e.offset || defaultOffset, | |
338 e.width, | |
339 e.height, | |
340 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding, | |
341 e.padding || defaultPadding, | |
342 e.fontsize || defaultFontSize, | |
343 e.color || defaultTextColor, | |
344 e.background || defaultBgColor, | |
345 e.text || "", | |
346 e.brcolor || defaultBorderColor | |
347 ); | |
348 break; | |
349 } | |
350 } | |
351 }); | |
352 } | |
353 this.pdf.doc.save( | 249 this.pdf.doc.save( |
354 this.selectedGauge.properties.objname + | 250 this.selectedGauge.properties.objname + |
355 " Hydrological-condition Diagram.pdf" | 251 " Hydrological-condition Diagram.pdf" |
356 ); | 252 ); |
357 }, | 253 }, |