--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Thu May 16 16:33:29 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Thu May 16 16:37:21 2019 +0200
@@ -76,8 +76,6 @@
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 
-const hoursInDays = x => x / 24;
-
 export default {
   mixins: [diagram, pdfgen],
   components: {
@@ -85,7 +83,7 @@
   },
   data() {
     return {
-      containerId: "availablefairwaydepth",
+      containerId: "availablefairwaydepthlnwl",
       loading: false,
       width: 1000,
       height: 600,
@@ -171,7 +169,7 @@
   computed: {
     ...mapState("fairwayavailability", [
       "selectedFairwayAvailabilityFeature",
-      "fwData",
+      "fwLNWLData",
       "from",
       "to",
       "frequency",
@@ -408,7 +406,7 @@
       });
       this.yScale = d3
         .scaleLinear()
-        .domain([-33, 33])
+        .domain([0, 100])
         .range([this.dimensions.mainHeight - 30, 0]);
       d3.select(".diagram-container svg").remove();
       this.generateDiagramContainer();
@@ -426,69 +424,7 @@
         .append("g")
         .attr("transform", `translate(0 ${this.paddingTop})`);
     },
-    drawBars() {
-      const everyBar = this.diagram
-        .selectAll("g")
-        .data(this.fwData)
-        .enter()
-        .append("g")
-        .attr("transform", (d, i) => {
-          const dx = this.paddingRight + i * this.spaceBetween;
-          return `translate(${dx})`;
-        });
-      this.drawSingleBars(everyBar);
-      this.drawLabelPerBar(everyBar);
-    },
-    drawSingleBars(everyBar) {
-      this.drawLDC(everyBar);
-      this.drawHighestLevel(everyBar);
-      this.drawLowerLevels(everyBar);
-    },
-    drawLowerLevels(everyBar) {
-      everyBar
-        .selectAll("g")
-        .data(d => d.lowerLevels.reverse())
-        .enter()
-        .append("rect")
-        .attr("y", this.yScale(0))
-        .attr("height", d => {
-          return this.yScale(0) - this.yScale(hoursInDays(d));
-        })
-        .attr("width", this.barsWidth)
-        .attr("fill", (d, i) => {
-          return this.$options.COLORS.REST[i];
-        });
-    },
-    fnheight(name) {
-      return d => this.yScale(0) - this.yScale(hoursInDays(d[name]));
-    },
-    drawLDC(everyBar) {
-      const height = this.fnheight("ldc");
-      everyBar
-        .append("rect")
-        .attr("y", this.yScale(0))
-        .attr("height", height)
-        .attr("width", this.barsWidth)
-        .attr("transform", d => `translate(0 ${-1 * height(d)})`)
-        .attr("fill", this.$options.COLORS.LDC)
-        .attr("id", "ldc");
-    },
-    drawHighestLevel(everyBar) {
-      const height = this.fnheight("highestLevel");
-      everyBar
-        .append("rect")
-        .attr("y", this.yScale(0))
-        .attr("height", height)
-        .attr("width", this.barsWidth - 5)
-        .attr("transform", d => `translate(0 ${-1 * height(d)})`)
-        .attr("fill", this.$options.COLORS.HIGHEST);
-    },
-    drawLabelPerBar(everyBar) {
-      everyBar
-        .append("text")
-        .text(d => d.label)
-        .attr("y", this.yScale(0) + this.labelPaddingTop);
-    },
+    drawBars() {},
     drawScaleLabel() {
       const center = this.dimensions.mainHeight / 2;
       this.diagram
@@ -517,11 +453,11 @@
     }
   },
   watch: {
-    fwData() {
+    fwLNWLData() {
       this.drawDiagram();
     }
   },
-  LEGEND: app.$gettext("Sum of days"),
+  LEGEND: app.$gettext("Percent"),
   COLORS: {
     LDC: "#cdcdcd",
     HIGHEST: "#3675ff",

--- a/client/src/store/fairwayavailability.js	Thu May 16 16:33:29 2019 +0200
+++ b/client/src/store/fairwayavailability.js	Thu May 16 16:37:21 2019 +0200
@@ -23,6 +23,7 @@
     from: format(subYears(new Date(), 1), "YYYY-MM-DD"),
     frequency: "monthly",
     fwData: null,
+    fwLNWLData: null,
     legend: null,
     LOS: 3
   };