--- a/client/src/store/fairwayavailability.js	Wed May 22 10:47:04 2019 +0200
+++ b/client/src/store/fairwayavailability.js	Wed May 22 11:00:25 2019 +0200
@@ -15,6 +15,18 @@
 import { HTTP } from "@/lib/http";
 import { format, subYears } from "date-fns";
 
+const LNWLDIAGRAMMOCKDATA = {
+  lnwl: [
+    { level: "LDC", value: 162, percent: 40 },
+    { level: "HDC", value: 564, percent: 60 }
+  ],
+  afd: [
+    { value: 200, percent: 30 },
+    { value: 230, percent: 50 },
+    { value: 250, percent: 20 }
+  ]
+};
+
 const FREQUENCIES = {
   MONTHLY: "monthly",
   QUARTERLY: "quarterly",
@@ -86,6 +98,9 @@
     setFwData: (state, fwData) => {
       state.fwData = fwData;
     },
+    setFwLNWLData: (state, fwLNWLData) => {
+      state.fwLNWLData = fwLNWLData;
+    },
     addFwLNWLOverviewData: (state, data) => {
       let existingIndex = state.fwLNWLOverviewData.findIndex(
         d => d.feature.get("id") === data.feature.get("id")
@@ -179,6 +194,21 @@
             reject(error);
           });
       });
+    },
+    loadAvailableFairwayDepthLNWLDiagram: ({ commit, dispatch }, options) => {
+      dispatch("loadAvailableFairwayDepthLNWL", options).then(response => {
+        //const data = response;
+        let data = LNWLDIAGRAMMOCKDATA;
+        Object.keys(data).forEach(diagramComponent => {
+          let sum = 0;
+          data[diagramComponent].map(elem => {
+            elem["translateY"] = Number(elem["percent"]) + sum;
+            sum += Number(elem["percent"]);
+            return elem;
+          });
+        });
+        commit("setFwLNWLData", data);
+      });
     }
   }
 };