Mercurial > gemma
changeset 4226:6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 19 Aug 2019 14:19:59 +0200 |
parents | 92c2f93fef3c |
children | 849d5ca7cc03 |
files | client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue |
diffstat | 2 files changed, 39 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Mon Aug 19 12:55:23 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Mon Aug 19 14:19:59 2019 +0200 @@ -116,6 +116,7 @@ }, data() { return { + zoomStore: null, containerId: "hydrologicalconditions-diagram-container", resizeListenerFunction: null, templateData: null, @@ -311,7 +312,7 @@ }) }); }, - renderTo({ element, dimensions }) { + renderTo({ element, dimensions, zoomLevel }) { // PREPARE HELPERS // HDC/LDC/MW for the selected gauge @@ -425,7 +426,8 @@ dimensions, scale, svg, - navigation + navigation, + zoomLevel }); this.createTooltips({ eventRect, diagram, scale, dimensions }); this.setInlineStyles(svg); @@ -771,7 +773,15 @@ } } }, - createZoom({ updaters, eventRect, dimensions, scale, svg, navigation }) { + createZoom({ + updaters, + eventRect, + dimensions, + scale, + svg, + navigation, + zoomLevel + }) { const brush = d3 .brushX() .handleSize(4) @@ -799,23 +809,42 @@ .translate(-s[0], 0) ); }); - - zoom.on("zoom", () => { - if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") - return; // ignore zoom-by-brush - let t = d3.event.transform; + let scaleForZoom = t => { scale.x.domain(t.rescaleX(scale.x2).domain()); updaters.forEach(u => u && u()); this.setInlineStyles(svg); navigation .select(".brush") .call(brush.move, scale.x.range().map(t.invertX, t)); + }; + zoom.on("zoom", () => { + if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") + return; // ignore zoom-by-brush + let t = d3.event.transform; + // Set the last zoom level and recalculate x,y for pdf-export + if (zoomLevel) { + t.x = (zoomLevel.x * dimensions.width) / zoomLevel.width; + t.k = zoomLevel.k; + t.y = zoomLevel.y; + scaleForZoom(t); + // reset zoomming after drawing for pdf + t.k = 1; + t.x = 0; + t.y = 0; + } else { + scaleForZoom(t); + } }); zoom.on("start", () => { svg.select(".chart-dot").style("opacity", 0); svg.select(".chart-tooltip").style("opacity", 0); }); - + // store the zoom level after zomming is ended + if (!zoomLevel) { + zoom.on("end", () => { + this.zoomStore = { ...d3.event.transform, width: dimensions.width }; + }); + } navigation .append("g") .attr("class", "brush")
--- a/client/src/components/gauge/Waterlevel.vue Mon Aug 19 12:55:23 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Mon Aug 19 14:19:59 2019 +0200 @@ -948,7 +948,7 @@ if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush let t = d3.event.transform; - // Set the last zoom level and recalculate x for pdf-export + // Set the last zoom level and recalculate x,y for pdf-export if (zoomLevel) { t.x = (zoomLevel.x * dimensions.width) / zoomLevel.width; t.k = zoomLevel.k;