# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1558016599 -7200
# Node ID fa7dc3f31ef36b01b1c3dcdc4566acd3883f4597
# Parent  a409608dd6b3bd70dfbebe1b3870922a1658039f
available_fairwaydepth_vs_lnwl: POC etd.

diff -r a409608dd6b3 -r fa7dc3f31ef3 client/src/components/Main.vue
--- a/client/src/components/Main.vue	Thu May 16 15:36:11 2019 +0200
+++ b/client/src/components/Main.vue	Thu May 16 16:23:19 2019 +0200
@@ -97,6 +97,12 @@
           : ["w-50 h-100", "w-50 h-100"];
       }
 
+      if (this.paneSetup === "AVAILABLEFAIRWAYDEPTHLNWL") {
+        return [1, 3].includes(this.paneRotate)
+          ? ["w-100 h-50", "w-100 h-50"]
+          : ["w-50 h-100", "w-50 h-100"];
+      }
+
       if (this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE") {
         return [1, 3].includes(this.paneRotate)
           ? ["wh-50", "wh-50", "w-100 h-50"]
diff -r a409608dd6b3 -r fa7dc3f31ef3 client/src/components/Pane.vue
--- a/client/src/components/Pane.vue	Thu May 16 15:36:11 2019 +0200
+++ b/client/src/components/Pane.vue	Thu May 16 16:23:19 2019 +0200
@@ -26,6 +26,8 @@
     Map: () => import("./map/Map"),
     Fairwayprofile: () => import("./fairway/Fairwayprofile"),
     AvailableFairwayDepth: () => import("./fairway/AvailableFairwayDepth"),
+    AvailableFairwayDepthLNWL: () =>
+      import("./fairway/AvailableFairwayDepthLNWL"),
     Waterlevel: () => import("./gauge/Waterlevel"),
     HydrologicalConditions: () => import("./gauge/HydrologicalConditions")
   }
diff -r a409608dd6b3 -r fa7dc3f31ef3 client/src/components/fairway/AvailableFairwayDepthDialogue.vue
--- a/client/src/components/fairway/AvailableFairwayDepthDialogue.vue	Thu May 16 15:36:11 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthDialogue.vue	Thu May 16 16:23:19 2019 +0200
@@ -128,7 +128,16 @@
             :disabled="isComplete"
             class="btn btn-info btn-sm w-100"
           >
-            <translate>Available Fairway Depth</translate>
+            <translate>Available fairway depth</translate>
+          </button>
+        </div>
+        <div class="mt-3">
+          <button
+            @click="openFairwaydepthLNWL"
+            :disabled="isComplete"
+            class="btn btn-info btn-sm w-100"
+          >
+            <translate>Available fairway depth vs LNWL</translate>
           </button>
         </div>
       </div>
@@ -170,6 +179,34 @@
     };
   },
   methods: {
+    openFairwaydepthLNWL() {
+      this.loading = true;
+      this.$store
+        .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
+          feature: this.selectedFairwayAvailabilityFeature,
+          from: this.from,
+          to: this.to,
+          frequency: this.frequency,
+          LOS: this.los
+        })
+        .then(() => {
+          this.$store.commit(
+            "application/paneSetup",
+            "AVAILABLEFAIRWAYDEPTHLNWL"
+          );
+        })
+        .catch(error => {
+          console.log(error);
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
     openFairwaydepth() {
       this.loading = true;
       this.$store
@@ -197,6 +234,7 @@
     },
     close() {
       this.$store.commit("application/showFairwayDepth", false);
+      this.$store.commit("application/showFairwayDepthLNWL", false);
     },
     entrySelected() {
       if (this.type === this.$options.BOTTLENECKS) {
diff -r a409608dd6b3 -r fa7dc3f31ef3 client/src/components/fairway/AvailableFairwayDepthLNWL.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Thu May 16 16:23:19 2019 +0200
@@ -0,0 +1,531 @@
+<template>
+  <div class="d-flex flex-column flex-fill">
+    <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
+    <UISpinnerOverlay v-if="loading" />
+    <div class="d-flex flex-fill">
+      <DiagramLegend>
+        <div v-for="(entry, index) in legend" :key="index" class="legend">
+          <span
+            :style="
+              `${legendStyle(
+                index
+              )}; border-radius: 0.25rem; width: 40px; height: 20px;`
+            "
+          ></span>
+          {{ entry }}
+        </div>
+        <div>
+          <select
+            @change="applyChange"
+            v-model="form.template"
+            class="form-control d-block custom-select-sm w-100 mt-1"
+          >
+            <option
+              v-for="template in templates"
+              :value="template"
+              :key="template.name"
+            >
+              {{ template.name }}
+            </option>
+          </select>
+          <button
+            @click="downloadPDF"
+            type="button"
+            class="btn btn-sm btn-info d-block w-100 mt-1"
+          >
+            <translate>Export to PDF</translate>
+          </button>
+        </div>
+      </DiagramLegend>
+      <div
+        ref="diagramContainer"
+        :id="containerId"
+        class="mx-auto my-auto diagram-container"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style></style>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ * Fadi Abbud <fadi.abbud@intevation.de>
+ */
+import * as d3 from "d3";
+import app from "@/main";
+import debounce from "debounce";
+import { diagram } from "@/lib/mixins";
+import { mapState } from "vuex";
+import filters from "@/lib/filters.js";
+import jsPDF from "jspdf";
+import canvg from "canvg";
+import { pdfgen } from "@/lib/mixins";
+import { HTTP } from "@/lib/http";
+import { displayError } from "@/lib/errors";
+
+const hoursInDays = x => x / 24;
+
+export default {
+  mixins: [diagram, pdfgen],
+  components: {
+    DiagramLegend: () => import("@/components/DiagramLegend")
+  },
+  data() {
+    return {
+      containerId: "availablefairwaydepth",
+      loading: false,
+      width: 1000,
+      height: 600,
+      paddingRight: 100,
+      spaceBetween: 80,
+      labelPaddingTop: 15,
+      scalePaddingLeft: 50,
+      paddingTop: 10,
+      diagram: null,
+      yScale: null,
+      barsWidth: 60,
+      dimensions: null,
+      pdf: {
+        doc: null,
+        width: null,
+        height: null
+      },
+      form: {
+        template: null
+      },
+      templateData: null,
+      templates: [],
+      defaultTemplate: {
+        name: "Default",
+        properties: {
+          paperSize: "a4"
+        },
+        elements: [
+          {
+            type: "diagram",
+            position: "topleft",
+            offset: { x: 20, y: 60 },
+            width: 290,
+            height: 100
+          },
+          {
+            type: "diagramtitle",
+            position: "topleft",
+            offset: { x: 70, y: 20 },
+            fontsize: 20,
+            color: "steelblue"
+          },
+          {
+            type: "diagramlegend",
+            position: "topleft",
+            offset: { x: 30, y: 160 },
+            color: "black"
+          }
+        ]
+      }
+    };
+  },
+  created() {
+    window.addEventListener("resize", debounce(this.drawDiagram), 100);
+  },
+  mounted() {
+    this.drawDiagram();
+    this.templates[0] = this.defaultTemplate;
+    this.form.template = this.templates[0];
+    this.templateData = this.form.template;
+    HTTP.get("/templates/diagram", {
+      headers: {
+        "X-Gemma-Auth": localStorage.getItem("token"),
+        "Content-type": "text/xml; charset=UTF-8"
+      }
+    })
+      .then(response => {
+        if (response.data.length) {
+          this.templates = response.data;
+          this.form.template = this.templates[0];
+          this.templates[this.templates.length] = this.defaultTemplate;
+          this.applyChange();
+        }
+      })
+      .catch(e => {
+        const { status, data } = e.response;
+        displayError({
+          title: this.$gettext("Backend Error"),
+          message: `${status}: ${data.message || data}`
+        });
+      });
+  },
+  computed: {
+    ...mapState("fairwayavailability", [
+      "selectedFairwayAvailabilityFeature",
+      "fwData",
+      "from",
+      "to",
+      "frequency",
+      "legend"
+    ]),
+    ...mapState("user", ["user"]),
+    fromDate() {
+      return this.from;
+    },
+    toDate() {
+      return this.to;
+    },
+    availability() {
+      return this.plainAvailability;
+    },
+    title() {
+      return `Available Fairway Depth vs LNWL: ${
+        this.featureName
+      } (${filters.surveyDate(this.fromDate)} - ${filters.surveyDate(
+        this.toDate
+      )}) ${this.$gettext(this.frequency)}`;
+    },
+    featureName() {
+      return this.selectedFairwayAvailabilityFeature.properties.name;
+    }
+  },
+  methods: {
+    applyChange() {
+      if (this.form.template.hasOwnProperty("properties")) {
+        this.templateData = this.defaultTemplate;
+        return;
+      }
+      if (this.form.template) {
+        HTTP.get("/templates/diagram/" + this.form.template.name, {
+          headers: {
+            "X-Gemma-Auth": localStorage.getItem("token"),
+            "Content-type": "text/xml; charset=UTF-8"
+          }
+        })
+          .then(response => {
+            this.templateData = response.data.template_data;
+          })
+          .catch(e => {
+            const { status, data } = e.response;
+            displayError({
+              title: this.$gettext("Backend Error"),
+              message: `${status}: ${data.message || data}`
+            });
+          });
+      }
+    },
+    downloadPDF() {
+      this.pdf.doc = new jsPDF(
+        "l",
+        "mm",
+        this.templateData.properties.paperSize
+      );
+      // pdf width and height in millimeter (landscape)
+      this.pdf.width =
+        this.templateData.properties.paperSize === "a3" ? 420 : 297;
+      this.pdf.height =
+        this.templateData.properties.paperSize === "a3" ? 297 : 210;
+      if (this.templateData) {
+        // default values if some are missing in template
+        let defaultFontSize = 11,
+          defaultColor = "black",
+          defaultWidth = 70,
+          defaultTextColor = "black",
+          defaultBorderColor = "white",
+          defaultBgColor = "white",
+          defaultRounding = 2,
+          defaultPadding = 2,
+          defaultOffset = { x: 0, y: 0 };
+        this.templateData.elements.forEach(e => {
+          switch (e.type) {
+            case "diagram": {
+              this.addDiagram(
+                e.position,
+                e.offset || defaultOffset,
+                e.width,
+                e.height
+              );
+              break;
+            }
+            case "diagramtitle": {
+              let title = `Available Fairway Depth vs LNWL: ${
+                this.featureName
+              }`;
+              this.addDiagramTitle(
+                e.position,
+                e.offset || defaultOffset,
+                e.fontsize || defaultFontSize,
+                e.color || defaultColor,
+                title
+              );
+              break;
+            }
+            case "diagramlegend": {
+              this.addDiagramLegend(
+                e.position,
+                e.offset || defaultOffset,
+                e.color || defaultColor
+              );
+              break;
+            }
+            case "text": {
+              this.addText(
+                e.position,
+                e.offset || defaultOffset,
+                e.width || defaultWidth,
+                e.fontsize || defaultFontSize,
+                e.color || defaultTextColor,
+                e.text
+              );
+              break;
+            }
+            case "image": {
+              this.addImage(
+                e.url,
+                e.format,
+                e.position,
+                e.offset || defaultOffset,
+                e.width,
+                e.height
+              );
+              break;
+            }
+            case "box": {
+              this.addBox(
+                e.position,
+                e.offset,
+                e.width,
+                e.height,
+                e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
+                e.color || defaultBgColor,
+                e.brcolor || defaultBorderColor
+              );
+              break;
+            }
+            case "textbox": {
+              this.addTextBox(
+                e.position,
+                e.offset || defaultOffset,
+                e.width,
+                e.height,
+                e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
+                e.padding || defaultPadding,
+                e.fontsize || defaultFontSize,
+                e.color || defaultTextColor,
+                e.background || defaultBgColor,
+                e.text,
+                e.brcolor || defaultBorderColor
+              );
+              break;
+            }
+          }
+        });
+      }
+      this.pdf.doc.save(`Available Fairway Depth LNWL: ${this.featureName}`);
+    },
+    addDiagram(position, offset, width, height) {
+      let x = offset.x,
+        y = offset.y;
+      var svg = this.$refs.diagramContainer.innerHTML;
+      if (svg) {
+        svg = svg.replace(/\r?\n|\r/g, "").trim();
+      }
+      if (!width) {
+        width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
+      }
+      if (!height) {
+        height = this.templateData.properties.paperSize === "a3" ? 130 : 100;
+      }
+      if (["topright", "bottomright"].indexOf(position) !== -1) {
+        x = this.pdf.width - offset.x - width;
+      }
+      if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
+        y = this.pdf.height - offset.y - height;
+      }
+      var canvas = document.createElement("canvas");
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight / 2;
+      canvg(canvas, svg, {
+        ignoreMouse: true,
+        ignoreAnimation: true,
+        ignoreDimensions: true
+      });
+      var imgData = canvas.toDataURL("image/png");
+      this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
+    },
+    addDiagramLegend(position, offset, color) {
+      let x = offset.x,
+        y = offset.y;
+
+      this.pdf.doc.setFontSize(10);
+      this.pdf.doc.setTextColor(color);
+      this.pdf.doc.setDrawColor("rgb(255, 133, 94)");
+      this.pdf.doc.setFillColor("rgb(255, 133, 94)");
+      this.pdf.doc.rect(x, y, 8, 4, "FD");
+      this.pdf.doc.text(">= LDC [h]", x + 10, y + 3);
+
+      this.pdf.doc.setDrawColor("rgb(255, 66, 79)");
+      this.pdf.doc.setFillColor("rgb(255, 66, 79)");
+      this.pdf.doc.rect(x, y + 5, 8, 4, "FD");
+      this.pdf.doc.text("< 200.00 [h]", x + 10, y + 8);
+
+      this.pdf.doc.setDrawColor("rgb(255, 115, 124)");
+      this.pdf.doc.setFillColor("rgb(255, 115, 124)");
+      this.pdf.doc.rect(x, y + 10, 8, 4, "FD");
+      this.pdf.doc.text(">= 200.00 [h]", x + 10, y + 13);
+
+      this.pdf.doc.setDrawColor("rgb(255, 153, 160)");
+      this.pdf.doc.setFillColor("rgb(255, 153, 160)");
+      this.pdf.doc.rect(x, y + 15, 8, 4, "FD");
+      this.pdf.doc.text(">= 230.00 [h]", x + 10, y + 18);
+
+      this.pdf.doc.setDrawColor("rgb(45, 132, 179)");
+      this.pdf.doc.setFillColor("rgb(45, 132, 179)");
+      this.pdf.doc.rect(x, y + 20, 8, 4, "FD");
+      this.pdf.doc.text(">= 250.00 [h]", x + 10, y + 23);
+    },
+    legendStyle(index) {
+      if (index == 0) return `background-color: ${this.$options.COLORS.LDC};`;
+      if (index < 4)
+        return `background-color: ${this.$options.COLORS.REST[index - 1]};`;
+      return `background-color: ${this.$options.COLORS.HIGHEST};`;
+    },
+    close() {
+      this.$store.commit("application/paneSetup", "DEFAULT");
+    },
+    drawDiagram() {
+      this.dimensions = this.getDimensions({
+        main: { top: 20, right: 20, bottom: 110, left: 200 }
+      });
+      this.yScale = d3
+        .scaleLinear()
+        .domain([-33, 33])
+        .range([this.dimensions.mainHeight - 30, 0]);
+      d3.select(".diagram-container svg").remove();
+      this.generateDiagramContainer();
+      this.drawBars();
+      this.drawScaleLabel();
+      this.drawScale();
+    },
+    generateDiagramContainer() {
+      const diagram = d3
+        .select(".diagram-container")
+        .append("svg")
+        .attr("width", this.dimensions.width)
+        .attr("height", this.dimensions.mainHeight);
+      this.diagram = diagram
+        .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);
+    },
+    drawScaleLabel() {
+      const center = this.dimensions.mainHeight / 2;
+      this.diagram
+        .append("text")
+        .text(this.$options.LEGEND)
+        .attr("text-anchor", "middle")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("dy", "1em")
+        .attr("transform", `translate(0, ${center}), rotate(-90)`);
+    },
+    drawScale() {
+      const yAxis = d3.axisLeft().scale(this.yScale);
+      this.diagram
+        .append("g")
+        .attr("transform", `translate(${this.scalePaddingLeft})`)
+        .call(yAxis)
+        .selectAll(".tick text")
+        .attr("fill", "black")
+        .select(function() {
+          return this.parentNode;
+        })
+        .selectAll(".tick line")
+        .attr("stroke", "black");
+      this.diagram.selectAll(".domain").attr("stroke", "black");
+    }
+  },
+  watch: {
+    fwData() {
+      this.drawDiagram();
+    }
+  },
+  LEGEND: app.$gettext("Sum of days"),
+  COLORS: {
+    LDC: "#cdcdcd",
+    HIGHEST: "#3675ff",
+    REST: ["#782121", "#ff6c6c", "#ffaaaa"]
+  }
+};
+</script>
diff -r a409608dd6b3 -r fa7dc3f31ef3 client/src/components/paneSetups.js
--- a/client/src/components/paneSetups.js	Thu May 16 15:36:11 2019 +0200
+++ b/client/src/components/paneSetups.js	Thu May 16 16:23:19 2019 +0200
@@ -18,6 +18,14 @@
   }
 };
 
+export const AVAILABLEFAIRWAYDEPTHLNWL = {
+  main,
+  availablefairwaydepth: {
+    id: "availablefairwaydepthlnwl",
+    component: "AvailableFairwayDepthLNWL"
+  }
+};
+
 export const COMPARESURVEYS_FAIRWAYPROFILE = {
   main,
   compare: { id: "compare-survey", component: "Map" },
diff -r a409608dd6b3 -r fa7dc3f31ef3 client/src/store/application.js
--- a/client/src/store/application.js	Thu May 16 15:36:11 2019 +0200
+++ b/client/src/store/application.js	Thu May 16 16:23:19 2019 +0200
@@ -36,6 +36,7 @@
     showProfiles: false,
     showGauges: false,
     showFairwayDepth: false,
+    showFairwayDepthLNWL: false,
     contextBoxContent: null, // bottlenecks, imports, staging
     expandToolbar: false,
     countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"],
@@ -117,6 +118,9 @@
     showFairwayDepth: (state, show) => {
       state.showFairwayDepth = show;
     },
+    showFairwayDepthLNWL: (state, show) => {
+      state.showFairwayDepthLNWL = show;
+    },
     contextBoxContent: (state, context) => {
       state.contextBoxContent = context;
       if (context) {