--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Mon May 20 15:00:26 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Mon May 20 15:52:49 2019 +0200
@@ -454,7 +454,7 @@
     drawLowerLevels(everyBar) {
       everyBar
         .selectAll("g")
-        .data(d => d.lowerLevels.reverse())
+        .data(d => d.lowerLevels)
         .enter()
         .append("rect")
         .attr("y", this.yScale(0))

--- a/client/src/store/fairwayavailability.js	Mon May 20 15:00:26 2019 +0200
+++ b/client/src/store/fairwayavailability.js	Mon May 20 15:52:49 2019 +0200
@@ -21,6 +21,41 @@
   YEARLY: "yearly"
 };
 
+/**
+ * Maximum number of hours:
+ * Month: approx 744/720/672 hours for 31/30/21 days
+ * Quarter: aprrox 2160 per quarter (~90 days)
+ * Yearly: approx 8760 per year (~365 days)
+ */
+const MOCKDATA = {
+  [FREQUENCIES.MONTHLY]: `
+#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h]
+05-2018,670.000,450.000,70.000,50.000,100.000`,
+  // 06-2018,669.000,546.000,0.000,0.000,123.000
+  // 07-2018,671.000,377.000,0.000,0.000,294.000
+  // 08-2018,668.000,168.000,0.000,0.000,500.000
+  // 09-2018,673.000,23.000,0.000,0.000,650.000
+  // 10-2018,670.000,4.000,0.000,0.000,666.000
+  // 11-2018,672.000,1.000,0.000,0.000,671.000
+  // 12-2018,675.000,5.000,0.000,0.000,670.000
+  // 01-2019,677.000,0.000,0.000,0.000,677.000
+  // 02-2019,668.000,43.000,0.000,0.000,625.000
+  // 03-2019,660.000,49.000,0.000,0.000,611.000
+  // 04-2019,620.000,20.000,0.000,0.000,600.000
+  // 05-2019,672.000,42.000,0.000,0.000,630.000`,
+  [FREQUENCIES.QUARTERLY]: `
+#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h]
+Q2-2018,1989.000,0.000,0.000,0.000,1823.000
+Q3-2018,2108.000,0.000,0.000,0.000,1956.000
+Q3-2018,2145.000,0.000,0.000,0.000,2001.000
+Q1-2019,2155.000,0.000,0.000,0.000,2021.000
+Q2-2019,2160.000,0.000,0.000,0.000,1998.000`,
+  [FREQUENCIES.YEARLY]: `
+#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h]
+2018,8360.000,0.000,0.000,0.000,7360.000
+2019,8153.000,0.000,0.000,0.000,7250.000`
+};
+
 const init = () => {
   return {
     type: "bottlenecks",
@@ -84,7 +119,9 @@
           headers: { "X-Gemma-Auth": localStorage.getItem("token") }
         })
           .then(response => {
-            const { data } = response;
+            //const { data } = response;
+            const data = MOCKDATA[frequency];
+            console.log(data);
             const csv = data.split("\n").filter(x => x !== ""); //omit empty lines
             commit("setLegend", csv.shift());
             let transformed = csv.map(e => {
@@ -92,11 +129,17 @@
               const label = result.shift();
               const ldc = result.shift();
               const highestLevel = result.pop();
+              let sum = 0;
+              const lowerLevels = result.map(x => {
+                const result = Number(x) + sum;
+                sum += Number(x);
+                return result;
+              });
               return {
                 label: label,
                 ldc: ldc,
                 highestLevel: highestLevel,
-                lowerLevels: result
+                lowerLevels: lowerLevels
               };
             });
             commit("setFwData", transformed);