Mercurial > gemma
changeset 3938:b03d54958ccd
warterlevel: leverage mixin
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 12 Jul 2019 10:13:00 +0200 |
parents | de4c557bbc47 |
children | f9de2ea2706e |
files | client/src/components/gauge/Waterlevel.vue |
diffstat | 1 files changed, 23 insertions(+), 20 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Fri Jul 12 10:03:11 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Fri Jul 12 10:13:00 2019 +0200 @@ -111,7 +111,7 @@ import debounce from "debounce"; import svg2pdf from "svg2pdf.js"; import { saveAs } from "file-saver"; -import { pdfgen, templateLoader } from "@/lib/mixins"; +import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; @@ -121,7 +121,7 @@ const d3 = Object.assign(d3Base, { lineChunked }); export default { - mixins: [pdfgen, templateLoader], + mixins: [diagram, pdfgen, templateLoader], components: { DiagramLegend: () => import("@/components/DiagramLegend") }, @@ -269,7 +269,14 @@ element: offScreen, dimensions: this.getDimensions({ svgWidth: svgWidth, - svgHeight: svgHeight + svgHeight: svgHeight, + main: { top: 20, right: 50, bottom: 110, left: 80 }, + nav: { + top: svgHeight - 85, + right: 20, + bottom: 30, + left: 80 + } }) }); var svg = offScreen.querySelector("svg"); @@ -319,12 +326,22 @@ drawDiagram() { // remove old diagram and exit if necessary data is missing d3.select("#" + this.containerId + " svg").remove(); - if (!this.selectedGauge || !this.waterlevels.length) return; + const elem = document.querySelector("#" + this.containerId); + const svgWidth = elem.clientWidth; + const svgHeight = elem.clientHeight; + if (!this.selectedGauge || !this.waterlevels.length || !elem) return; this.renderTo({ element: `#${this.containerId}`, dimensions: this.getDimensions({ - svgWidth: document.querySelector("#" + this.containerId).clientWidth, - svgHeight: document.querySelector("#" + this.containerId).clientHeight + svgWidth: svgWidth, + svgHeight: svgHeight, + main: { top: 20, right: 50, bottom: 110, left: 80 }, + nav: { + top: svgHeight - 85, + right: 20, + bottom: 30, + left: 80 + } }) }); }, @@ -578,20 +595,6 @@ .attr("fill", "666") .style("font-size", "0.8em"); }, - getDimensions({ svgWidth, svgHeight }) { - const mainMargin = { top: 20, right: 50, bottom: 110, left: 80 }; - const navMargin = { - top: svgHeight - mainMargin.top - 65, - right: 20, - bottom: 30, - left: 80 - }; - const width = +svgWidth - mainMargin.left - mainMargin.right; - const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom; - const navHeight = +svgHeight - navMargin.top - navMargin.bottom; - - return { width, mainHeight, navHeight, mainMargin, navMargin }; - }, getExtent(refWaterLevels) { return { // set min/max values for the date axis