--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Apr 29 18:16:51 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Tue Apr 30 12:05:04 2019 +0200
@@ -2,6 +2,7 @@
   <div>
     <h1>Available Fairway Depth</h1>
     <UISpinnerOverlay v-if="loading" />
+    <div class="diagram-container"></div>
   </div>
 </template>
 
@@ -27,9 +28,13 @@
 export default {
   data() {
     return {
-      loading: false
+      loading: false,
+      colors: ["red", "green", "blue", "purple"]
     };
   },
+  mounted() {
+    this.drawDiagram();
+  },
   computed: {
     availability() {
       return this.plainAvailability;
@@ -45,13 +50,15 @@
         { month: "apr", values: [17, 18, 16, 13] }
       ];
 
+      d3.select(".diagram-container svg").remove();
       const yScale = d3
         .scaleLinear()
         .domain([-30, 30])
         .range([height - 30, 0]);
 
       const diagram = d3
-        .select("svg")
+        .select(".diagram-container")
+        .append("svg")
         .attr("width", width)
         .attr("height", height);
       this.drawBars({ diagram, data, yScale });
@@ -71,7 +78,6 @@
           return `translate(${paddingRight + i * 95} ${paddingTop})`;
         });
       // bars per month
-      const colors = [];
       allBars
         .selectAll("rect")
         .data(d => d.values)
@@ -89,7 +95,7 @@
         })
         .attr("width", 60)
         .attr("fill", (d, i) => {
-          return colors[i];
+          return this.colors[i];
         });
     },
     drawLabel(diagram, height) {

--- a/client/src/router.js	Mon Apr 29 18:16:51 2019 +0200
+++ b/client/src/router.js	Tue Apr 30 12:05:04 2019 +0200
@@ -170,6 +170,14 @@
       }
     },
     {
+      path: "/fairwaydepth",
+      name: "fairwaydepth",
+      component: () => import("./components/fairway/AvailableFairwayDepth"),
+      meta: {
+        requiresAuth: true
+      }
+    },
+    {
       path: "*",
       component: () => import("./components/PageNotFound")
     }