# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1572362969 -3600
# Node ID b6d8570b848065b79421d3202ba7880e3232c00a
# Parent  db450fcc8ed717027d2792ad99db0257bf6920b6
client: image-export: add diagram legend

diff -r db450fcc8ed7 -r b6d8570b8480 client/src/components/fairway/AvailableFairwayDepth.vue
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Tue Oct 29 11:04:14 2019 +0100
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Tue Oct 29 16:29:29 2019 +0100
@@ -255,6 +255,83 @@
     }
   },
   methods: {
+    addLegendToCanvas(ctx, { width, height }) {
+      let x = width / 20,
+        y = height - 35;
+      ctx.font = "14px sans-serif";
+      ctx.textAlign = "start";
+      if (this.legend[3]) {
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.COLORS.LDC;
+        ctx.strokeStyle = this.$options.COLORS.LDC;
+        ctx.rect(x, y, 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legend[0], x + 40, y + 13);
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.COLORS.HIGHEST;
+        ctx.strokeStyle = this.$options.COLORS.HIGHEST;
+        ctx.rect(x, (y += 25), 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legend[1], x + 40, y + 13);
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.COLORS.REST[1];
+        ctx.strokeStyle = this.$options.COLORS.REST[1];
+        ctx.rect(x, (y += 25), 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legend[2], x + 40, y + 13);
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.COLORS.REST[0];
+        ctx.strokeStyle = this.$options.COLORS.REST[0];
+        ctx.rect(x, (y += 25), 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legend[3], x + 40, y + 13);
+        ctx.closePath();
+      } else {
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.COLORS.LDC;
+        ctx.strokeStyle = this.$options.COLORS.LDC;
+        ctx.rect(x, y, 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legend[0], x + 40, y + 13);
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.COLORS.HIGHEST;
+        ctx.strokeStyle = this.$options.COLORS.HIGHEST;
+        ctx.rect(x, (y += 25), 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legend[1], x + 40, y + 13);
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.COLORS.REST[0];
+        ctx.strokeStyle = this.$options.COLORS.REST[0];
+        ctx.rect(x, (y += 25), 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legend[2], x + 40, y + 13);
+        ctx.closePath();
+      }
+    },
     initDiagramValues() {
       this.selectedFairwayAvailabilityFeatureD = this.selectedFairwayAvailabilityFeature;
       this.fromDate = this.from;
diff -r db450fcc8ed7 -r b6d8570b8480 client/src/components/fairway/AvailableFairwayDepthLNWL.vue
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Tue Oct 29 11:04:14 2019 +0100
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Tue Oct 29 16:29:29 2019 +0100
@@ -236,6 +236,83 @@
     }
   },
   methods: {
+    addLegendToCanvas(ctx, { width, height }) {
+      let x = width / 20,
+        y = height - 35;
+      ctx.font = "14px sans-serif";
+      ctx.textAlign = "start";
+      if (this.legendLNWL[3]) {
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.LWNLCOLORS.LDC;
+        ctx.strokeStyle = this.$options.LWNLCOLORS.LDC;
+        ctx.rect(x, y, 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legendLNWL[0], x + 40, y + 13);
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.AFDCOLORS[2];
+        ctx.strokeStyle = this.$options.AFDCOLORS[2];
+        ctx.rect(x, (y += 25), 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legendLNWL[1], x + 40, y + 13);
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.AFDCOLORS[1];
+        ctx.strokeStyle = this.$options.AFDCOLORS[1];
+        ctx.rect(x, (y += 25), 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legendLNWL[2], x + 40, y + 13);
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.AFDCOLORS[0];
+        ctx.strokeStyle = this.$options.AFDCOLORS[0];
+        ctx.rect(x, (y += 25), 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legendLNWL[2], x + 40, y + 13);
+        ctx.closePath();
+      } else {
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.LWNLCOLORS.LDC;
+        ctx.strokeStyle = this.$options.LWNLCOLORS.LDC;
+        ctx.rect(x, y, 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legendLNWL[0], x + 40, y + 13);
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.AFDCOLORS[2];
+        ctx.strokeStyle = this.$options.AFDCOLORS[2];
+        ctx.rect(x, (y += 25), 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legendLNWL[1], x + 40, y + 13);
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.fillStyle = this.$options.AFDCOLORS[0];
+        ctx.strokeStyle = this.$options.AFDCOLORS[0];
+        ctx.rect(x, (y += 25), 35, 20);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "black";
+        ctx.fillText(this.legendLNWL[2], x + 40, y + 13);
+        ctx.closePath();
+      }
+    },
     initDiagramValues() {
       this.selectedFairwayAvailabilityFeatureD = this.selectedFairwayAvailabilityFeature;
       this.fromDate = this.from;
diff -r db450fcc8ed7 -r b6d8570b8480 client/src/components/fairway/Fairwayprofile.vue
--- a/client/src/components/fairway/Fairwayprofile.vue	Tue Oct 29 11:04:14 2019 +0100
+++ b/client/src/components/fairway/Fairwayprofile.vue	Tue Oct 29 16:29:29 2019 +0100
@@ -293,6 +293,77 @@
     }
   },
   methods: {
+    addLegendToCanvas(ctx, { width, height }) {
+      let x = width / 12,
+        y = height - 55;
+      ctx.font = "12px sans-serif";
+      ctx.textAlign = "start";
+
+      ctx.beginPath();
+      ctx.fillStyle = "#5995ff";
+      ctx.strokeStyle = "#5995ff";
+      ctx.arc(x, y, 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Water"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = this.getLayerStyle(2).fillColor;
+      ctx.strokeStyle = this.getLayerStyle(2).strokeColor;
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.setLineDash([0.8], 0);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Fairway (LOS 1)"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = this.getLayerStyle(2).fillColor;
+      ctx.strokeStyle = this.getLayerStyle(2).strokeColor;
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.setLineDash([1.8], 0);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Fairway (LOS 2)"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = this.getLayerStyle(3).fillColor;
+      ctx.strokeStyle = this.getLayerStyle(3).strokeColor;
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.setLineDash([]);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Fairway (LOS 3)"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "#4a2e06";
+      ctx.strokeStyle = "black";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.setLineDash([]);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Sediment"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "rgba(74, 47, 6, 0.6)";
+      ctx.strokeStyle = "#943007";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.setLineDash([]);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Sediment (compare)"), x + 14, y + 5);
+      ctx.closePath();
+    },
     close() {
       this.$store.commit(
         "application/paneSetup",
diff -r db450fcc8ed7 -r b6d8570b8480 client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Tue Oct 29 11:04:14 2019 +0100
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Tue Oct 29 16:29:29 2019 +0100
@@ -222,6 +222,61 @@
     }
   },
   methods: {
+    addLegendToCanvas(ctx, { width, height }) {
+      let x = width / 12,
+        y = height - 25;
+      ctx.font = "12px sans-serif";
+      ctx.textAlign = "start";
+      ctx.beginPath();
+      ctx.fillStyle = "red";
+      ctx.strokeStyle = "red";
+      ctx.arc(x, y, 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.yearCompare, x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "orange";
+      ctx.strokeStyle = "orange";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Q25%"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "black";
+      ctx.strokeStyle = "black";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Median"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "purple";
+      ctx.strokeStyle = "purple";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Q75%"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "lightsteelblue";
+      ctx.strokeStyle = "lightsteelblue";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Long-term Amplitude"), x + 14, y + 5);
+      ctx.closePath();
+    },
     initialDiagramValues() {
       this.selectedGaugeD = this.selectedGauge;
       this.longtermIntervalD = this.longtermInterval;
diff -r db450fcc8ed7 -r b6d8570b8480 client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Tue Oct 29 11:04:14 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Tue Oct 29 16:29:29 2019 +0100
@@ -217,6 +217,49 @@
     }
   },
   methods: {
+    addLegendToCanvas(ctx, { width, height }) {
+      let x = width / 10,
+        y = height - 25;
+      ctx.font = "12px sans-serif";
+      ctx.textAlign = "start";
+
+      ctx.beginPath();
+      ctx.fillStyle = "steelblue";
+      ctx.strokeStyle = "white";
+      ctx.arc(x, y, 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Waterlevel"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "#90b4d2";
+      ctx.strokeStyle = "#90b4d2";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.closePath();
+      ctx.beginPath();
+      ctx.fillStyle = "#4682B4";
+      ctx.strokeStyle = "#4682B4";
+      ctx.arc(x, y, 2, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("prediction"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "rgba(0, 255, 0, 0.1)";
+      ctx.strokeStyle = "rgba(0, 255, 0, 0.1)";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Navigable Range"), x + 14, y + 5);
+      ctx.closePath();
+    },
     initialDiagramValues() {
       this.dateFromD = this.dateFrom;
       this.dateToD = this.dateTo;
diff -r db450fcc8ed7 -r b6d8570b8480 client/src/lib/mixins.js
--- a/client/src/lib/mixins.js	Tue Oct 29 11:04:14 2019 +0100
+++ b/client/src/lib/mixins.js	Tue Oct 29 16:29:29 2019 +0100
@@ -191,7 +191,7 @@
       diagramContainer.querySelector("svg").setAttribute("width", clientWidth);
       diagramContainer
         .querySelector("svg")
-        .setAttribute("height", clientHeight + 70);
+        .setAttribute("height", clientHeight + 180);
       const svg = diagramContainer.querySelector("svg").outerHTML;
       const canvas = document.createElement("canvas");
       canvg(canvas, svg, { offsetY: 70 });
@@ -206,6 +206,11 @@
       ctx.textAlign = "center";
       ctx.fillText(title, clientWidth / 2, 35);
       ctx.closePath();
+      // Add diagramlegend
+      this.addLegendToCanvas(ctx, {
+        height: clientHeight + 100,
+        width: clientWidth
+      });
 
       const imgData = canvas.toDataURL("image/png");
       document.getElementById(elementName).setAttribute("href", imgData);