Mercurial > gemma
changeset 4225:92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 19 Aug 2019 12:55:23 +0200 |
parents | bb66e144dece |
children | 6f0cd9a551b3 |
files | client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js |
diffstat | 2 files changed, 42 insertions(+), 11 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Mon Aug 19 12:27:19 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Mon Aug 19 12:55:23 2019 +0200 @@ -134,7 +134,8 @@ width: 420, height: 297 }, - templateData: null + templateData: null, + zoomStore: null }; }, computed: { @@ -308,9 +309,8 @@ }) }); }, - renderTo({ element, dimensions }) { + renderTo({ element, dimensions, zoomLevel }) { // PREPARE HELPERS - // HDC/LDC/MW for the selected gauge const refWaterLevels = JSON.parse( this.selectedGauge.properties.reference_water_levels @@ -430,7 +430,8 @@ dimensions, scale, navigation, - svg + svg, + zoomLevel }); this.createTooltips({ eventRect, diagram, scale, dimensions }); this.setInlineStyles(svg); @@ -899,7 +900,15 @@ .call(nashSutcliffeLabel, dateNow, hours); }; }, - createZoom({ updaters, eventRect, dimensions, scale, navigation, svg }) { + createZoom({ + updaters, + eventRect, + dimensions, + scale, + navigation, + svg, + zoomLevel + }) { const brush = d3 .brushX() .handleSize(4) @@ -927,22 +936,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 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")
--- a/client/src/lib/mixins.js Mon Aug 19 12:27:19 2019 +0200 +++ b/client/src/lib/mixins.js Mon Aug 19 12:55:23 2019 +0200 @@ -171,6 +171,7 @@ const offScreen = document.querySelector("#offScreen"); offScreen.style.width = `${svgWidth}px`; offScreen.style.height = `${svgHeight}px`; + let zoomLevel = this.zoomStore; const layout = this.getPrintLayout(svgHeight, svgWidth); this.renderTo({ element: offScreen, @@ -178,7 +179,8 @@ svgWidth: svgWidth, svgHeight: svgHeight, ...layout - }) + }), + zoomLevel // passing the zoom level to draw the diagram on pdf at this point }); var svg = offScreen.querySelector("svg"); if (["topright", "bottomright"].indexOf(position) !== -1) {