Mercurial > gemma
changeset 4155:552ea22ed266 improvepdf
merge default into improvepdf
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Fri, 02 Aug 2019 13:30:29 +0200 |
| parents | 4d7569cca5e6 (diff) d54d86d27e82 (current diff) |
| children | a42cd92d5422 |
| files | client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js |
| diffstat | 6 files changed, 79 insertions(+), 59 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Fri Aug 02 13:15:12 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Fri Aug 02 13:30:29 2019 +0200 @@ -331,14 +331,13 @@ close() { this.$store.commit("application/paneSetup", "DEFAULT"); }, - getPrintLayout(svgHeight) { + getPrintLayout(svgHeight, svgWidth) { return { - main: { top: 0, right: 20, bottom: 50, left: 20 }, - nav: { - top: svgHeight - 65, - right: 20, - bottom: 30, - left: 80 + main: { + top: 0, + right: Math.floor(svgWidth * 0.025), + bottom: Math.floor(svgHeight * 0.17), + left: Math.floor(svgWidth * 0.025) } }; }, @@ -346,7 +345,7 @@ const elem = document.querySelector("#" + this.containerId); const svgWidth = elem != null ? elem.clientWidth : 0; const svgHeight = elem != null ? elem.clientHeight : 0; - const layout = this.getPrintLayout(svgHeight); + const layout = this.getPrintLayout(svgHeight, svgWidth); const dimensions = this.getDimensions({ svgHeight, svgWidth,
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Fri Aug 02 13:15:12 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Fri Aug 02 13:30:29 2019 +0200 @@ -320,14 +320,13 @@ close() { this.$store.commit("application/paneSetup", "DEFAULT"); }, - getPrintLayout(svgHeight) { + getPrintLayout(svgHeight, svgWidth) { return { - main: { top: 0, right: 20, bottom: 50, left: 20 }, - nav: { - top: svgHeight - 65, - right: 20, - bottom: 30, - left: 80 + main: { + top: 0, + right: Math.floor(svgWidth * 0.025), + bottom: Math.floor(svgHeight * 0.17), + left: Math.floor(svgWidth * 0.025) } }; }, @@ -335,7 +334,7 @@ const elem = document.querySelector("#" + this.containerId); const svgWidth = elem != null ? elem.clientWidth : 0; const svgHeight = elem != null ? elem.clientHeight : 0; - const layout = this.getPrintLayout(svgHeight); + const layout = this.getPrintLayout(svgHeight, svgWidth); const dimensions = this.getDimensions({ svgHeight, svgWidth,
--- a/client/src/components/fairway/Fairwayprofile.vue Fri Aug 02 13:15:12 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Fri Aug 02 13:30:29 2019 +0200 @@ -112,7 +112,7 @@ height: 0 border-top: dashed 2px #333 position: absolute - bottom: 20px + bottom: 50px left: 115px margin-left: -35px &::after @@ -381,13 +381,13 @@ this.pdf.doc.circle(x, y + 25, 2, "FD"); this.pdf.doc.text(x + 3, y + 26, "Sediment (Compare)"); }, - getPrintLayout() { + getPrintLayout(svgHeight, svgWidth) { return { main: { - top: 20, - right: 80, - bottom: 60, - left: 80 + top: Math.floor(0.08 * svgHeight), + right: Math.floor(0.08 * svgWidth), + bottom: Math.floor(0.2 * svgHeight), + left: Math.floor(0.08 * svgWidth) } }; }, @@ -395,7 +395,7 @@ d3.select(".diagram-container svg").remove(); this.scaleFairwayProfile(); if (!this.height || !this.width) return; // do not try to render when height and width are unknown - const layout = this.getPrintLayout(this.height); + const layout = this.getPrintLayout(this.height, this.width); this.renderTo({ element: ".diagram-container", dimensions: this.getDimensions({ @@ -500,7 +500,7 @@ graph .append("text") .attr("transform", ["rotate(-90)"]) - .attr("y", dimensions.width + 45) + .attr("y", dimensions.width + Math.floor(0.06 * dimensions.width)) .attr("x", -dimensions.mainHeight / 2) .attr("fill", "black") .style("text-anchor", "middle") @@ -508,7 +508,7 @@ graph .append("text") .attr("transform", ["rotate(-90)"]) - .attr("y", -50) + .attr("y", -1 * Math.floor(0.065 * dimensions.width)) .attr("x", -dimensions.mainHeight / 2) .attr("fill", "black") .style("text-anchor", "middle")
--- a/client/src/components/gauge/HydrologicalConditions.vue Fri Aug 02 13:15:12 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Fri Aug 02 13:30:29 2019 +0200 @@ -277,14 +277,19 @@ this.pdf.doc.circle(x, y + 20, 2, "FD"); this.pdf.doc.text(x + padding, y + 21, "Long-term Amplitude"); }, - getPrintLayout(svgHeight) { + getPrintLayout(svgHeight, svgWidth) { return { - main: { top: 20, right: 50, bottom: 110, left: 80 }, + main: { + top: Math.floor(0.05 * svgHeight), + right: Math.floor(0.05 * svgWidth), + bottom: Math.floor(0.32 * svgHeight), + left: Math.floor(0.07 * svgWidth) + }, nav: { - top: svgHeight - 85, - right: 20, - bottom: 30, - left: 80 + top: Math.floor(0.78 * svgHeight), + right: Math.floor(0.013 * svgWidth), + bottom: Math.floor(0.095 * svgHeight), + left: Math.floor(0.07 * svgWidth) } }; }, @@ -296,7 +301,7 @@ return; const svgWidth = el.clientWidth; const svgHeight = el.clientHeight; - const layout = this.getPrintLayout(svgHeight); + const layout = this.getPrintLayout(svgHeight, svgWidth); this.renderTo({ element: `#${this.containerId}`, dimensions: this.getDimensions({ @@ -448,8 +453,8 @@ .attr("clip-path", "url(#hydrocond-clip)"); svg.selectAll(".hdc-line").attr("stroke", "red"); svg.selectAll(".ldc-line").attr("stroke", "green"); - svg.selectAll(".mw-line").attr("stroke", "grey"); - svg.selectAll(".rn-line").attr("stroke", "grey"); + svg.selectAll(".mw-line").attr("stroke", "gray"); + svg.selectAll(".rn-line").attr("stroke", "gray"); svg .selectAll(".ref-waterlevel-label") .style("font-size", "10px") @@ -651,14 +656,16 @@ .attr("transform", `translate(0, ${dimensions.mainHeight})`) .call(axes.x) .selectAll(".tick text") - .attr("y", 15); + .attr("y", Math.floor(0.015 * dimensions.mainHeight)); diagram // label .append("text") .text(this.$gettext("Waterlevel [m]")) .attr("text-anchor", "middle") .attr( "transform", - `translate(-45, ${dimensions.mainHeight / 2}) rotate(-90)` + `translate(${-0.05 * + Math.floor(dimensions.width)}, ${dimensions.mainHeight / + 2}) rotate(-90)` ); diagram .append("g")
--- a/client/src/components/gauge/Waterlevel.vue Fri Aug 02 13:15:12 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Fri Aug 02 13:30:29 2019 +0200 @@ -275,14 +275,19 @@ this.pdf.doc.circle(x, y + 5, 0.6, "FD"); this.pdf.doc.text(x + padding, y + 6, "Prediction"); }, - getPrintLayout(svgHeight) { + getPrintLayout(svgHeight, svgWidth) { return { - main: { top: 20, right: 50, bottom: 110, left: 80 }, + main: { + top: Math.floor(0.05 * svgHeight), + right: Math.floor(0.05 * svgWidth), + bottom: Math.floor(0.32 * svgHeight), + left: Math.floor(0.09 * svgWidth) + }, nav: { - top: svgHeight - 85, - right: 20, - bottom: 30, - left: 80 + top: Math.floor(0.78 * svgHeight), + right: Math.floor(0.013 * svgWidth), + bottom: Math.floor(0.095 * svgHeight), + left: Math.floor(0.09 * svgWidth) } }; }, @@ -292,7 +297,7 @@ const elem = document.querySelector("#" + this.containerId); const svgWidth = elem.clientWidth; const svgHeight = elem.clientHeight; - const layout = this.getPrintLayout(svgHeight); + const layout = this.getPrintLayout(svgHeight, svgWidth); if (!this.selectedGauge || !this.waterlevels.length || !elem) return; this.renderTo({ element: `#${this.containerId}`, @@ -493,7 +498,7 @@ svg .selectAll("path.nash-sutcliffe") .attr("fill", "none") - .attr("stroke", "darkgrey") + .attr("stroke", "gray") .attr("stroke-width", 1) .attr("clip-path", "url(#waterlevel-clip)"); svg @@ -837,19 +842,27 @@ "stroke-opacity", scale.x.domain()[1] - scale.x.domain()[0] > 90 * 86400000 ? 0 : 1 ); - return d3 .area() .x(d => scale.x(d)) .y0(() => dimensions.mainHeight + 0.5) - .y1(() => dimensions.mainHeight - 15 * (hours / 24)); + .y1( + () => + dimensions.mainHeight - + Math.floor(0.06 * dimensions.mainHeight) * (hours / 24) + ); }; const nashSutcliffeLabel = (label, date, hours) => { let days = hours / 24; label .attr("x", Math.min(scale.x(date), dimensions.width) - 4) - .attr("y", dimensions.mainHeight - (15 * days + 0.5) + 12); + .attr( + "y", + dimensions.mainHeight - + (Math.floor(0.06 * dimensions.mainHeight) * days + 0.5) + + 12 + ); }; if (coeff.samples) {
--- a/client/src/lib/mixins.js Fri Aug 02 13:15:12 2019 +0200 +++ b/client/src/lib/mixins.js Fri Aug 02 13:30:29 2019 +0200 @@ -67,16 +67,16 @@ methods: { getDimensions({ svgWidth, svgHeight, main, nav }) { const mainMargin = main || { - top: 20, - right: 80, - bottom: 60, - left: 80 + top: Math.floor(0.08 * svgHeight), + right: Math.floor(0.08 * svgWidth), + bottom: Math.floor(0.2 * svgHeight), + left: Math.floor(0.08 * svgWidth) }; const navMargin = nav || { - top: svgHeight - mainMargin.top - 65, - right: 20, - bottom: 30, - left: 80 + top: Math.floor(0.78 * svgHeight), + right: Math.floor(0.013 * svgWidth), + bottom: Math.floor(0.095 * svgHeight), + left: Math.floor(0.07 * svgWidth) }; const width = Number(svgWidth) - mainMargin.left - mainMargin.right; const mainHeight = Number(svgHeight) - mainMargin.top - mainMargin.bottom; @@ -164,13 +164,14 @@ addDiagram(position, offset, width, height) { let x = offset.x, y = offset.y; - const svgWidth = this.millimeter2pixels(width, 80); - const svgHeight = this.millimeter2pixels(height, 80); + const DPI = 80; + const svgWidth = this.millimeter2pixels(width, DPI); + const svgHeight = this.millimeter2pixels(height, DPI); // draw the diagram in a separated html element to get the full size const offScreen = document.querySelector("#offScreen"); offScreen.style.width = `${svgWidth}px`; offScreen.style.height = `${svgHeight}px`; - const layout = this.getPrintLayout(svgHeight); + const layout = this.getPrintLayout(svgHeight, svgWidth); this.renderTo({ element: offScreen, dimensions: this.getDimensions({ @@ -186,10 +187,11 @@ if (["bottomright", "bottomleft"].indexOf(position) !== -1) { y = this.pdf.height - offset.y - height; } + //debugSVG({ svg, svgWidth, svgHeight }); svg2pdf(svg, this.pdf.doc, { xOffset: x, yOffset: y, - scale: this.pixel2millimeter(1, 80) + scale: this.pixel2millimeter(1, DPI) }); offScreen.removeChild(svg); },