Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 4225:92c2f93fef3c

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(waterlevels)
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 19 Aug 2019 12:55:23 +0200
parents 552ea22ed266
children 6f0cd9a551b3
comparison
equal deleted inserted replaced
4224:bb66e144dece 4225:92c2f93fef3c
132 pdf: { 132 pdf: {
133 doc: null, 133 doc: null,
134 width: 420, 134 width: 420,
135 height: 297 135 height: 297
136 }, 136 },
137 templateData: null 137 templateData: null,
138 zoomStore: null
138 }; 139 };
139 }, 140 },
140 computed: { 141 computed: {
141 ...mapState("application", ["paneSetup"]), 142 ...mapState("application", ["paneSetup"]),
142 ...mapState("gauges", [ 143 ...mapState("gauges", [
306 svgHeight: svgHeight, 307 svgHeight: svgHeight,
307 ...layout 308 ...layout
308 }) 309 })
309 }); 310 });
310 }, 311 },
311 renderTo({ element, dimensions }) { 312 renderTo({ element, dimensions, zoomLevel }) {
312 // PREPARE HELPERS 313 // PREPARE HELPERS
313
314 // HDC/LDC/MW for the selected gauge 314 // HDC/LDC/MW for the selected gauge
315 const refWaterLevels = JSON.parse( 315 const refWaterLevels = JSON.parse(
316 this.selectedGauge.properties.reference_water_levels 316 this.selectedGauge.properties.reference_water_levels
317 ); 317 );
318 318
428 updaters, 428 updaters,
429 eventRect, 429 eventRect,
430 dimensions, 430 dimensions,
431 scale, 431 scale,
432 navigation, 432 navigation,
433 svg 433 svg,
434 zoomLevel
434 }); 435 });
435 this.createTooltips({ eventRect, diagram, scale, dimensions }); 436 this.createTooltips({ eventRect, diagram, scale, dimensions });
436 this.setInlineStyles(svg); 437 this.setInlineStyles(svg);
437 }, 438 },
438 //set the styles of the diagrams to include them in the pdf 439 //set the styles of the diagrams to include them in the pdf
897 diagram 898 diagram
898 .select("text.nash-sutcliffe.ns" + hours) 899 .select("text.nash-sutcliffe.ns" + hours)
899 .call(nashSutcliffeLabel, dateNow, hours); 900 .call(nashSutcliffeLabel, dateNow, hours);
900 }; 901 };
901 }, 902 },
902 createZoom({ updaters, eventRect, dimensions, scale, navigation, svg }) { 903 createZoom({
904 updaters,
905 eventRect,
906 dimensions,
907 scale,
908 navigation,
909 svg,
910 zoomLevel
911 }) {
903 const brush = d3 912 const brush = d3
904 .brushX() 913 .brushX()
905 .handleSize(4) 914 .handleSize(4)
906 .extent([[0, 0], [dimensions.width, dimensions.navHeight]]); 915 .extent([[0, 0], [dimensions.width, dimensions.navHeight]]);
907 916
925 d3.zoomIdentity 934 d3.zoomIdentity
926 .scale(dimensions.width / (s[1] - s[0])) 935 .scale(dimensions.width / (s[1] - s[0]))
927 .translate(-s[0], 0) 936 .translate(-s[0], 0)
928 ); 937 );
929 }); 938 });
930 939 let scaleForZoom = t => {
931 zoom.on("zoom", () => {
932 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
933 return; // ignore zoom-by-brush
934 let t = d3.event.transform;
935 scale.x.domain(t.rescaleX(scale.x2).domain()); 940 scale.x.domain(t.rescaleX(scale.x2).domain());
936 updaters.forEach(u => u && u()); 941 updaters.forEach(u => u && u());
937 this.setInlineStyles(svg); 942 this.setInlineStyles(svg);
938 navigation 943 navigation
939 .select(".brush") 944 .select(".brush")
940 .call(brush.move, scale.x.range().map(t.invertX, t)); 945 .call(brush.move, scale.x.range().map(t.invertX, t));
946 };
947 zoom.on("zoom", () => {
948 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
949 return; // ignore zoom-by-brush
950 let t = d3.event.transform;
951 // Set the last zoom level and recalculate x for pdf-export
952 if (zoomLevel) {
953 t.x = (zoomLevel.x * dimensions.width) / zoomLevel.width;
954 t.k = zoomLevel.k;
955 t.y = zoomLevel.y;
956 scaleForZoom(t);
957 // reset zoomming after drawing for pdf
958 t.k = 1;
959 t.x = 0;
960 t.y = 0;
961 } else {
962 scaleForZoom(t);
963 }
941 }); 964 });
942 zoom.on("start", () => { 965 zoom.on("start", () => {
943 svg.select(".chart-dot").style("opacity", 0); 966 svg.select(".chart-dot").style("opacity", 0);
944 svg.select(".chart-tooltip").style("opacity", 0); 967 svg.select(".chart-tooltip").style("opacity", 0);
945 }); 968 });
969 // store the zoom level after zomming is ended
970 if (!zoomLevel) {
971 zoom.on("end", () => {
972 this.zoomStore = { ...d3.event.transform, width: dimensions.width };
973 });
974 }
946 975
947 navigation 976 navigation
948 .append("g") 977 .append("g")
949 .attr("class", "brush") 978 .attr("class", "brush")
950 .call(brush) 979 .call(brush)