--- a/client/src/lib/mixins.js	Tue May 07 13:08:03 2019 +0200
+++ b/client/src/lib/mixins.js	Tue May 07 14:06:23 2019 +0200
@@ -12,7 +12,7 @@
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import locale2 from "locale2";
-const sortTable = {
+export const sortTable = {
   data() {
     return {
       sortColumn: "",
@@ -29,7 +29,30 @@
   }
 };
 
-const pane = {
+export const diagram = {
+  methods: {
+    getDimensions() {
+      //dimensions and margins
+      const svgWidth = document.querySelector("#" + this.containerId)
+        .clientWidth;
+      const svgHeight = document.querySelector("#" + this.containerId)
+        .clientHeight;
+      const mainMargin = { top: 20, right: 20, 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 };
+    }
+  }
+};
+
+export const pane = {
   computed: {
     paneId() {
       return this.$parent.pane.id;
@@ -37,7 +60,7 @@
   }
 };
 
-const pdfgen = {
+export const pdfgen = {
   methods: {
     addText(position, offset, width, fontSize, color, text) {
       text = this.replacePlaceholders(text);
@@ -171,5 +194,3 @@
     }
   }
 };
-
-export { sortTable, pane, pdfgen };