Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 3160:94935895e6d7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: add diagram-element to template (waterlevel) * add the diagram as an element to template and add the ability to definewidth, height and position of the exported diagram to pdf
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 06 May 2019 13:05:49 +0200
parents b6c10b30d6bd
children 6ddd3755350c
comparison
equal deleted inserted replaced
3159:4f4905b57fcf 3160:94935895e6d7
113 paperSize: "a4", 113 paperSize: "a4",
114 resolution: "80" 114 resolution: "80"
115 }, 115 },
116 elements: [ 116 elements: [
117 { 117 {
118 type: "diagram",
119 position: "topleft",
120 offset: { x: 15, y: 50 },
121 width: 290,
122 height: 100
123 },
124 {
118 type: "diagramlegend", 125 type: "diagramlegend",
119 position: "topleft", 126 position: "topleft",
120 offset: { x: 30, y: 150 }, 127 offset: { x: 30, y: 150 },
121 color: "black" 128 color: "black"
122 }, 129 },
183 ? "GAUGE_HYDROLOGICALCONDITIONS" 190 ? "GAUGE_HYDROLOGICALCONDITIONS"
184 : "DEFAULT" 191 : "DEFAULT"
185 ); 192 );
186 }, 193 },
187 downloadPDF() { 194 downloadPDF() {
188 var svg = document.getElementById(this.containerId).innerHTML;
189 if (svg) {
190 svg = svg.replace(/\r?\n|\r/g, "").trim();
191 }
192 this.pdf.doc = new jsPDF("l", "mm", this.form.paperSize); 195 this.pdf.doc = new jsPDF("l", "mm", this.form.paperSize);
193 var canvas = document.createElement("canvas");
194 canvas.width = window.innerWidth;
195 canvas.height = window.innerHeight / 2;
196 canvg(canvas, svg, {
197 ignoreMouse: true,
198 ignoreAnimation: true,
199 ignoreDimensions: true
200 });
201 var imgData = canvas.toDataURL("image/png");
202 // landscape format is used for both a3,a4 papersize
203 let xDiagram = this.form.paperSize === "a3" ? 40 : 15,
204 yDiagram = this.form.paperSize === "a3" ? 60 : 50,
205 widthDiagram = this.form.paperSize === "a3" ? 380 : 290,
206 heightDiagram = this.form.paperSize === "a3" ? 130 : 100;
207 this.pdf.width = this.form.paperSize === "a3" ? 420 : 297; 196 this.pdf.width = this.form.paperSize === "a3" ? 420 : 297;
208 this.pdf.height = this.form.paperSize === "a3" ? 297 : 210; 197 this.pdf.height = this.form.paperSize === "a3" ? 297 : 210;
209 this.pdf.doc.addImage(
210 imgData,
211 "PNG",
212 xDiagram,
213 yDiagram,
214 widthDiagram,
215 heightDiagram
216 );
217 // check the template element 198 // check the template element
218 if (this.templateData) { 199 if (this.templateData) {
219 let defaultFontSize = 11, 200 let defaultFontSize = 11,
220 defaultColor = "black", 201 defaultColor = "black",
221 defaultWidth = 70, 202 defaultWidth = 70,
225 defaultRounding = 2, 206 defaultRounding = 2,
226 defaultPadding = 2, 207 defaultPadding = 2,
227 defaultOffset = { x: 0, y: 0 }; 208 defaultOffset = { x: 0, y: 0 };
228 this.templateData.elements.forEach(e => { 209 this.templateData.elements.forEach(e => {
229 switch (e.type) { 210 switch (e.type) {
211 case "diagram": {
212 this.addDiagram(
213 e.position,
214 e.offset || defaultOffset,
215 e.width,
216 e.height
217 );
218 break;
219 }
230 case "diagramlegend": { 220 case "diagramlegend": {
231 this.addDiagramLegend( 221 this.addDiagramLegend(
232 e.position, 222 e.position,
233 e.offset || defaultOffset, 223 e.offset || defaultOffset,
234 e.color || defaultColor 224 e.color || defaultColor
319 message: `${status}: ${data.message || data}` 309 message: `${status}: ${data.message || data}`
320 }); 310 });
321 }); 311 });
322 } 312 }
323 }, 313 },
314 addDiagram(position, offset, width, height) {
315 let x = offset.x,
316 y = offset.y;
317 var svg = document.getElementById(this.containerId).innerHTML;
318 if (svg) {
319 svg = svg.replace(/\r?\n|\r/g, "").trim();
320 }
321 var canvas = document.createElement("canvas");
322 canvas.width = window.innerWidth;
323 canvas.height = window.innerHeight / 2;
324 canvg(canvas, svg, {
325 ignoreMouse: true,
326 ignoreAnimation: true,
327 ignoreDimensions: true
328 });
329 var imgData = canvas.toDataURL("image/png");
330 // landscape format is used for both a3,a4 papersize
331 if (!width) {
332 width = this.form.paperSize === "a3" ? 380 : 290;
333 }
334 if (!height) {
335 height = this.form.paperSize === "a3" ? 130 : 100;
336 }
337 if (["topright", "bottomright"].indexOf(position) !== -1) {
338 x = this.pdf.width - offset.x - width;
339 }
340 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
341 y = this.pdf.height - offset.y - height;
342 }
343 this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
344 },
324 // Gauge info as a title for pdf 345 // Gauge info as a title for pdf
325 addDiagramTitle(position, offset, size, color) { 346 addDiagramTitle(position, offset, size, color) {
326 let gaugeInfo = 347 let gaugeInfo =
327 this.selectedGauge.properties.objname + 348 this.selectedGauge.properties.objname +
328 " (" + 349 " (" +