Mercurial > gemma

comparison client/src/components/gauge/HydrologicalConditions.vue @ 3915:f7f09f32d6e0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
hydrological conditions: omit rendering, when container isn't visible
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 11 Jul 2019 13:51:26 +0200
parents 29b294e77a5c
children 50a0b6d3b032
comparison
equal deleted inserted replaced
3914:9440d2922097 3915:f7f09f32d6e0
332 this.pdf.doc.text(x + 3, y + 21, "Long-term Amplitude"); 332 this.pdf.doc.text(x + 3, y + 21, "Long-term Amplitude");
333 }, 333 },
334 drawDiagram() { 334 drawDiagram() {
335 // remove old diagram 335 // remove old diagram
336 d3.select("#" + this.containerId + " svg").remove(); 336 d3.select("#" + this.containerId + " svg").remove();
337 if (!this.selectedGauge || !this.longtermWaterlevels.length) return; 337 const el = document.querySelector("#" + this.containerId);
338 if (!this.selectedGauge || !this.longtermWaterlevels.length || !el)
339 return;
340 const svgWidth = el.clientWidth;
341 const svgHeight = el.clientHeight;
338 this.renderTo({ 342 this.renderTo({
339 element: `#${this.containerId}`, 343 element: `#${this.containerId}`,
340 dimensions: this.getDimensions({ 344 dimensions: this.getDimensions({
341 svgWidth: document.querySelector("#" + this.containerId).clientWidth, 345 svgWidth: svgWidth,
342 svgHeight: document.querySelector("#" + this.containerId).clientHeight 346 svgHeight: svgHeight
343 }) 347 })
344 }); 348 });
345 }, 349 },
346 renderTo({ element, dimensions }) { 350 renderTo({ element, dimensions }) {
347 // PREPARE HELPERS 351 // PREPARE HELPERS