Mercurial > gemma
changeset 3872:a7a75e003b78
hydrological conditions: factor out setting of dimensions
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 09 Jul 2019 17:12:58 +0200 |
parents | 6c2ef463b958 |
children | d62de00e4c28 |
files | client/src/components/gauge/HydrologicalConditions.vue |
diffstat | 1 files changed, 20 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Tue Jul 09 17:00:33 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Tue Jul 09 17:12:58 2019 +0200 @@ -243,12 +243,20 @@ addDiagram(position, offset, width, height) { let x = offset.x, y = offset.y; + const svgWidth = 1550; + const svgHeight = 400; // check if there are tow diagrams on the screen // draw the diagram in a separated html element to get the full size const offScreen = document.querySelector("#offScreen"); - offScreen.style.width = "1550px"; - offScreen.style.height = "400px"; - this.renderTo(offScreen); + offScreen.style.width = `${svgWidth}px`; + offScreen.style.height = `${svgHeight}px`; + this.renderTo({ + element: offScreen, + dimensions: this.getDimensions({ + svgWidth: svgWidth, + svgHeight: svgHeight + }) + }); var svg = offScreen.querySelector("svg"); // use default width,height if they are missing in the template definition if (!width) { @@ -336,9 +344,15 @@ // remove old diagram d3.select("#" + this.containerId + " svg").remove(); if (!this.selectedGauge || !this.longtermWaterlevels.length) return; - this.renderTo("#" + this.containerId); + this.renderTo({ + element: `#${this.containerId}`, + dimensions: this.getDimensions({ + svgWidth: document.querySelector("#" + this.containerId).clientWidth, + svgHeight: document.querySelector("#" + this.containerId).clientHeight + }) + }); }, - renderTo(element) { + renderTo({ element, dimensions }) { // PREPARE HELPERS // HDC/LDC/MW for the selected gauge @@ -347,7 +361,6 @@ ); // dimensions (widths, heights, margins) - const dimensions = this.getDimensions(); // get min/max values for date and waterlevel axis const extent = this.getExtent(refWaterLevels); @@ -544,12 +557,7 @@ .attr("fill", "666") .style("font-size", "0.8em"); }, - getDimensions() { - // dimensions and margins - const svgWidth = document.querySelector("#" + this.containerId) - .clientWidth; - const svgHeight = document.querySelector("#" + this.containerId) - .clientHeight; + getDimensions({ svgWidth, svgHeight }) { const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 }; const navMargin = { top: svgHeight - mainMargin.top - 65,