Mercurial > gemma

comparison client/src/components/fairway/Fairwayprofile.vue @ 4804:75e6ec39a0b7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: fairwayprofile: implement image-export
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 28 Oct 2019 11:25:25 +0100
parents af83ff003ebf
children 7cd40008124b
comparison
equal deleted inserted replaced
4803:b3f65cff13e8 4804:75e6ec39a0b7
88 type="button" 88 type="button"
89 class="btn btn-sm btn-info d-block w-100 mt-2" 89 class="btn btn-sm btn-info d-block w-100 mt-2"
90 > 90 >
91 <translate>Export to PDF</translate> 91 <translate>Export to PDF</translate>
92 </button> 92 </button>
93 <a
94 @click="exportImage"
95 id="downloadimage"
96 class="btn btn-sm btn-info text-white d-block w-100 mt-2"
97 :download="`${fileName}.png`"
98 >
99 <translate>Export as Image</translate>
100 </a>
93 </div> 101 </div>
94 </DiagramLegend> 102 </DiagramLegend>
95 <div 103 <div
96 ref="pdfContainer"
97 id="pdfContainer" 104 id="pdfContainer"
98 class="d-flex flex-fill justify-content-center align-items-center diagram-container position-relative" 105 class="d-flex flex-fill justify-content-center align-items-center diagram-container position-relative"
99 > 106 >
100 <div class="direction-indicator"></div> 107 <div class="direction-indicator"></div>
101 <div v-if="!fairwayData"> 108 <div v-if="!fairwayData">
151 import debounce from "debounce"; 158 import debounce from "debounce";
152 import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; 159 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
153 import { HTTP } from "@/lib/http"; 160 import { HTTP } from "@/lib/http";
154 import { displayError } from "@/lib/errors"; 161 import { displayError } from "@/lib/errors";
155 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; 162 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
163 import canvg from "canvg";
156 164
157 const GROUND_COLOR = "#4A2F06"; 165 const GROUND_COLOR = "#4A2F06";
158 const WATER_COLOR = "#005DFF"; 166 const WATER_COLOR = "#005DFF";
159 167
160 export default { 168 export default {
242 : this.bottleneck.get("gm_waterlevel"); 250 : this.bottleneck.get("gm_waterlevel");
243 }, 251 },
244 refWaterlevel() { 252 refWaterlevel() {
245 if (!this.selectedSurvey) return 0; 253 if (!this.selectedSurvey) return 0;
246 return this.selectedSurvey.waterlevel_value; 254 return this.selectedSurvey.waterlevel_value;
255 },
256 fileName() {
257 return this.downloadFilename(
258 this.$gettext("Fairwayprofile"),
259 this.selectedBottleneck
260 );
247 } 261 }
248 }, 262 },
249 watch: { 263 watch: {
250 depth() { 264 depth() {
251 if (!this.useCustomDepth) return; 265 if (!this.useCustomDepth) return;
278 selectedBottleneck() { 292 selectedBottleneck() {
279 this.$store.commit("application/paneSetup", "DEFAULT"); 293 this.$store.commit("application/paneSetup", "DEFAULT");
280 } 294 }
281 }, 295 },
282 methods: { 296 methods: {
297 exportImage() {
298 const diagramContainer = document.getElementById("pdfContainer");
299 const { clientHeight, clientWidth } = diagramContainer;
300 const svg = document.querySelector("#pdfContainer>svg");
301 svg.setAttribute("height", clientHeight);
302 svg.setAttribute("width", clientWidth);
303 const canvas = document.createElement("canvas");
304 canvg(canvas, svg.outerHTML);
305 const imgData = canvas.toDataURL("image/png");
306 document.getElementById("downloadimage").setAttribute("href", imgData);
307 },
283 close() { 308 close() {
284 this.$store.commit( 309 this.$store.commit(
285 "application/paneSetup", 310 "application/paneSetup",
286 this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE" 311 this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE"
287 ? "COMPARESURVEYS" 312 ? "COMPARESURVEYS"
330 this.selectedBottleneck + " (" + this.selectedSurvey.date_info + ")"; 355 this.selectedBottleneck + " (" + this.selectedSurvey.date_info + ")";
331 this.generatePDF({ 356 this.generatePDF({
332 templateData: this.templateData, 357 templateData: this.templateData,
333 diagramTitle: fairwayInfo 358 diagramTitle: fairwayInfo
334 }); 359 });
335 this.pdf.doc.save( 360 this.pdf.doc.save(this.fileName + ".pdf");
336 this.downloadFilename(
337 this.$gettext("Fairwayprofile"),
338 this.selectedBottleneck
339 ) + ".pdf"
340 );
341 }, 361 },
342 362
343 // Diagram legend 363 // Diagram legend
344 addDiagramLegend(position, offset, color) { 364 addDiagramLegend(position, offset, color) {
345 let x = offset.x, 365 let x = offset.x,
433 }, 453 },
434 renderTo({ element, dimensions }) { 454 renderTo({ element, dimensions }) {
435 let svg = d3.select(element).append("svg"); 455 let svg = d3.select(element).append("svg");
436 svg.attr("width", "100%"); 456 svg.attr("width", "100%");
437 svg.attr("height", "100%"); 457 svg.attr("height", "100%");
458 svg
459 .append("g")
460 .append("rect")
461 .attr("width", "100%")
462 .attr("height", "100%")
463 .attr("fill", "#ffffff");
438 const width = dimensions.width; 464 const width = dimensions.width;
439 const height = dimensions.mainHeight; 465 const height = dimensions.mainHeight;
440 const offsetY = 15; 466 const offsetY = 15;
441 const currentData = this.currentData; 467 const currentData = this.currentData;
442 const additionalData = this.additionalData; 468 const additionalData = this.additionalData;