Mercurial > gemma

comparison client/src/components/gauge/HydrologicalConditions.vue @ 3025:37cc0d75ad84

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