Mercurial > gemma

comparison client/src/components/gauge/HydrologicalConditions.vue @ 3798:e008197e2215 yworks-svg2pdf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 },