Mercurial > gemma

changeset 4226:6f0cd9a551b3

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