Mercurial > gemma
comparison 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 |
comparison
equal
deleted
inserted
replaced
3936:d859ec6cf2f0 | 3937:de4c557bbc47 |
---|---|
103 import { mapState, mapGetters } from "vuex"; | 103 import { mapState, mapGetters } from "vuex"; |
104 import * as d3 from "d3"; | 104 import * as d3 from "d3"; |
105 import debounce from "debounce"; | 105 import debounce from "debounce"; |
106 import { startOfYear, endOfYear } from "date-fns"; | 106 import { startOfYear, endOfYear } from "date-fns"; |
107 import svg2pdf from "svg2pdf.js"; | 107 import svg2pdf from "svg2pdf.js"; |
108 import { pdfgen, templateLoader } from "@/lib/mixins"; | 108 import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; |
109 import { HTTP } from "@/lib/http"; | 109 import { HTTP } from "@/lib/http"; |
110 import { displayError } from "@/lib/errors"; | 110 import { displayError } from "@/lib/errors"; |
111 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; | 111 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; |
112 | 112 |
113 export default { | 113 export default { |
114 mixins: [pdfgen, templateLoader], | 114 mixins: [diagram, pdfgen, templateLoader], |
115 components: { | 115 components: { |
116 DiagramLegend: () => import("@/components/DiagramLegend") | 116 DiagramLegend: () => import("@/components/DiagramLegend") |
117 }, | 117 }, |
118 data() { | 118 data() { |
119 return { | 119 return { |
225 offScreen.style.height = `${svgHeight}px`; | 225 offScreen.style.height = `${svgHeight}px`; |
226 this.renderTo({ | 226 this.renderTo({ |
227 element: offScreen, | 227 element: offScreen, |
228 dimensions: this.getDimensions({ | 228 dimensions: this.getDimensions({ |
229 svgWidth: svgWidth, | 229 svgWidth: svgWidth, |
230 svgHeight: svgHeight | 230 svgHeight: svgHeight, |
231 main: { top: 20, right: 50, bottom: 110, left: 80 }, | |
232 nav: { | |
233 top: svgHeight - 85, | |
234 right: 20, | |
235 bottom: 30, | |
236 left: 80 | |
237 } | |
231 }) | 238 }) |
232 }); | 239 }); |
233 var svg = offScreen.querySelector("svg"); | 240 var svg = offScreen.querySelector("svg"); |
234 if (["topright", "bottomright"].indexOf(position) !== -1) { | 241 if (["topright", "bottomright"].indexOf(position) !== -1) { |
235 x = this.pdf.width - offset.x - width; | 242 x = this.pdf.width - offset.x - width; |
315 const svgHeight = el.clientHeight; | 322 const svgHeight = el.clientHeight; |
316 this.renderTo({ | 323 this.renderTo({ |
317 element: `#${this.containerId}`, | 324 element: `#${this.containerId}`, |
318 dimensions: this.getDimensions({ | 325 dimensions: this.getDimensions({ |
319 svgWidth: svgWidth, | 326 svgWidth: svgWidth, |
320 svgHeight: svgHeight | 327 svgHeight: svgHeight, |
328 main: { top: 20, right: 50, bottom: 110, left: 80 }, | |
329 nav: { | |
330 top: svgHeight - 85, | |
331 right: 20, | |
332 bottom: 30, | |
333 left: 80 | |
334 } | |
321 }) | 335 }) |
322 }); | 336 }); |
323 }, | 337 }, |
324 renderTo({ element, dimensions }) { | 338 renderTo({ element, dimensions }) { |
325 // PREPARE HELPERS | 339 // PREPARE HELPERS |
528 .attr("height", "0px"); | 542 .attr("height", "0px"); |
529 svg | 543 svg |
530 .selectAll(".chart-tooltip text") | 544 .selectAll(".chart-tooltip text") |
531 .attr("fill", "666") | 545 .attr("fill", "666") |
532 .style("font-size", "0.8em"); | 546 .style("font-size", "0.8em"); |
533 }, | |
534 getDimensions({ svgWidth, svgHeight }) { | |
535 const mainMargin = { top: 20, right: 50, bottom: 110, left: 80 }; | |
536 const navMargin = { | |
537 top: svgHeight - mainMargin.top - 65, | |
538 right: 20, | |
539 bottom: 30, | |
540 left: 80 | |
541 }; | |
542 const width = +svgWidth - mainMargin.left - mainMargin.right; | |
543 const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom; | |
544 const navHeight = +svgHeight - navMargin.top - navMargin.bottom; | |
545 | |
546 return { width, mainHeight, navHeight, mainMargin, navMargin }; | |
547 }, | 547 }, |
548 getExtent(refWaterLevels) { | 548 getExtent(refWaterLevels) { |
549 const waterlevelValues = []; | 549 const waterlevelValues = []; |
550 this.longtermWaterlevels.forEach(wl => { | 550 this.longtermWaterlevels.forEach(wl => { |
551 waterlevelValues.push(wl.min, wl.max); | 551 waterlevelValues.push(wl.min, wl.max); |