Mercurial > gemma

comparison client/src/components/gauge/HydrologicalConditions.vue @ 3937:de4c557bbc47

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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);