--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jul 12 10:13:00 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jul 12 10:17:09 2019 +0200
@@ -76,7 +76,7 @@
 import { mapState } from "vuex";
 import filters from "@/lib/filters.js";
 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 { FREQUENCIES } from "@/store/fairwayavailability";
@@ -85,7 +85,7 @@
 const hoursInDays = x => x / 24;
 
 export default {
-  mixins: [pdfgen, templateLoader],
+  mixins: [diagram, pdfgen, templateLoader],
   components: {
     DiagramLegend: () => import("@/components/DiagramLegend")
   },
@@ -217,19 +217,6 @@
     }
   },
   methods: {
-    getDimensions({ svgHeight, svgWidth, main, nav }) {
-      const mainMargin = main || { top: 0, right: 20, bottom: 50, left: 20 };
-      const navMargin = nav || {
-        top: svgHeight - mainMargin.top - 65,
-        right: 20,
-        bottom: 30,
-        left: 80
-      };
-      const width = Number(svgWidth) - mainMargin.left - mainMargin.right;
-      const mainHeight = Number(svgHeight) - mainMargin.top - mainMargin.bottom;
-      const navHeight = Number(svgHeight) - navMargin.top - navMargin.bottom;
-      return { width, mainHeight, navHeight, mainMargin, navMargin };
-    },
     applyChange() {
       if (this.form.template.hasOwnProperty("properties")) {
         this.templateData = this.defaultTemplate;
@@ -277,7 +264,14 @@
         element: offScreen,
         dimensions: this.getDimensions({
           svgWidth: svgWidth,
-          svgHeight: svgHeight
+          svgHeight: svgHeight,
+          main: { top: 0, right: 20, bottom: 50, left: 20 },
+          nav: {
+            top: svgHeight - 65,
+            right: 20,
+            bottom: 30,
+            left: 80
+          }
         })
       });
       var svg = offScreen.querySelector("svg");
@@ -347,7 +341,14 @@
       const svgHeight = elem != null ? elem.clientHeight : 0;
       const dimensions = this.getDimensions({
         svgHeight,
-        svgWidth
+        svgWidth,
+        main: { top: 0, right: 20, bottom: 50, left: 20 },
+        nav: {
+          top: svgHeight - 65,
+          right: 20,
+          bottom: 30,
+          left: 80
+        }
       });
       d3.select(".diagram-container svg").remove();
       this.renderTo({ element: ".diagram-container", dimensions });