Mercurial > gemma
diff client/src/components/gauge/HydrologicalConditions.vue @ 3937:de4c557bbc47
hydrological_conditions: leverage mixin
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 12 Jul 2019 10:03:11 +0200 |
parents | 03f37e64701c |
children | 7b3935a8d9ee |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Fri Jul 12 09:55:03 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Fri Jul 12 10:03:11 2019 +0200 @@ -105,13 +105,13 @@ import debounce from "debounce"; import { startOfYear, endOfYear } from "date-fns"; import svg2pdf from "svg2pdf.js"; -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"; export default { - mixins: [pdfgen, templateLoader], + mixins: [diagram, pdfgen, templateLoader], components: { DiagramLegend: () => import("@/components/DiagramLegend") }, @@ -227,7 +227,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"); @@ -317,7 +324,14 @@ element: `#${this.containerId}`, 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 + } }) }); }, @@ -531,20 +545,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) { const waterlevelValues = []; this.longtermWaterlevels.forEach(wl => {