Mercurial > gemma

comparison client/src/components/fairway/Fairwayprofile.vue @ 3968:ea4e1ea04e44 diagram-cleanup

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: fairway profile diagram: inlined scaleFairwayProfile method to be more in line with other diagrams
author Markus Kottlaender <markus@intevation.de>
date Fri, 12 Jul 2019 16:18:49 +0200
parents 2aaa1948b525
children 2f024d6189ca
comparison
equal deleted inserted replaced
3967:5c896dee852b 3968:ea4e1ea04e44
154 154
155 export default { 155 export default {
156 mixins: [diagram, pdfgen, templateLoader], 156 mixins: [diagram, pdfgen, templateLoader],
157 data() { 157 data() {
158 return { 158 return {
159 containerId: "fairwayprofile-diagram-container", 159 containerId: "fairwayprofile-diagram-container"
160 width: null,
161 height: null
162 }; 160 };
163 }, 161 },
164 computed: { 162 computed: {
165 ...mapGetters("map", ["openLayersMap"]), 163 ...mapGetters("map", ["openLayersMap"]),
166 ...mapGetters("fairwayprofile", ["totalLength"]), 164 ...mapGetters("fairwayprofile", ["totalLength"]),
325 return { 323 return {
326 main: { top: 20, right: 80, bottom: 60, left: 80 } 324 main: { top: 20, right: 80, bottom: 60, left: 80 }
327 }; 325 };
328 }, 326 },
329 drawDiagram() { 327 drawDiagram() {
328 // remove old diagram and exit if necessary data is missing
330 d3.select("#" + this.containerId + " svg").remove(); 329 d3.select("#" + this.containerId + " svg").remove();
331 this.scaleFairwayProfile(); 330 const elem = document.querySelector("#" + this.containerId);
332 if (!this.height || !this.width) return; // do not try to render when height and width are unknown 331 const svgWidth = elem.clientWidth;
333 const layout = this.getPrintLayout(this.height); 332 const svgHeight = elem.clientHeight;
333 const layout = this.getPrintLayout();
334 this.renderTo({ 334 this.renderTo({
335 element: "#" + this.containerId, 335 element: "#" + this.containerId,
336 dimensions: this.getDimensions({ 336 dimensions: this.getDimensions({
337 svgWidth: this.width, 337 svgWidth: svgWidth,
338 svgHeight: this.height, 338 svgHeight: svgHeight,
339 ...layout 339 ...layout
340 }) 340 })
341 }); 341 });
342 }, 342 },
343 renderTo({ element, dimensions }) { 343 renderTo({ element, dimensions }) {
605 .attr("stroke-width", 3) 605 .attr("stroke-width", 3)
606 .attr("stroke-opacity", opacity) 606 .attr("stroke-opacity", opacity)
607 .attr("fill-opacity", 0) 607 .attr("fill-opacity", 0)
608 .attr("d", profileLine); 608 .attr("d", profileLine);
609 } 609 }
610 },
611 scaleFairwayProfile() {
612 if (!document.querySelector("#" + this.containerId)) return;
613 const clientHeight = document.querySelector("#" + this.containerId)
614 .clientHeight;
615 const clientWidth = document.querySelector("#" + this.containerId)
616 .clientWidth;
617 if (!clientHeight || !clientWidth) return;
618 this.height = clientHeight;
619 this.width = clientWidth;
620 } 610 }
621 } 611 }
622 }; 612 };
623 </script> 613 </script>