# HG changeset patch
# User Bernhard Reiter <bernhard@intevation.de>
# Date 1568041407 -7200
# Node ID 057787583b1274cf7cdd4bba91670cbc056273a4
# Parent  a7196b55c0641a6793f9fa41926b882bdd6b2425
client: add showNumbers option to AvailableFairwayDepthLNWL

 * Add code similiar to AvailableFairwayDepth.vue, but slightly different
   because the bars are drawn differently. Each draw function uses its own
   method to select the svg elements to modify.

diff -r a7196b55c064 -r 057787583b12 client/src/components/fairway/AvailableFairwayDepthLNWL.vue
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Mon Sep 09 16:13:26 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Mon Sep 09 17:03:27 2019 +0200
@@ -42,6 +42,17 @@
             >Download CSV</a
           >
         </div>
+        <div class="btn-group-toggle w-100 mt-2">
+          <label
+            class="btn btn-outline-secondary btn-sm"
+            :class="{ active: showNumbers }"
+            ><input
+              type="checkbox"
+              v-model="showNumbers"
+              autocomplete="off"
+            />Numbers
+          </label>
+        </div>
       </DiagramLegend>
       <div
         ref="diagramContainer"
@@ -69,6 +80,7 @@
  * * Thomas Junk <thomas.junk@intevation.de>
  * * Markus Kottländer <markus.kottlaender@intevation.de>
  * * Fadi Abbud <fadi.abbud@intevation.de>
+ * * Bernhard Reiter <bernhard.reiter@intevation.de>
  */
 import * as d3 from "d3";
 import app from "@/main";
@@ -103,7 +115,8 @@
       },
       templateData: null,
       templates: [],
-      defaultTemplate: defaultDiagramTemplate
+      defaultTemplate: defaultDiagramTemplate,
+      showNumbers: false
     };
   },
   created() {
@@ -477,6 +490,28 @@
         .attr("fill", (d, i) => {
           return this.$options.AFDCOLORS[i];
         });
+      if (this.showNumbers) {
+        afd
+          .selectAll("text")
+          .data([data.above, data.between, data.below])
+          .enter()
+          .append("text")
+          .attr("fill", "black")
+          .attr("text-anchor", "middle")
+          .attr("x", ldcWidth / 2)
+          .attr("y", (d, i) => {
+            let h = d; // i == 0
+            if (i > 0) {
+              h += data.above;
+            }
+            if (i > 1) {
+              h += data.between;
+            }
+            return yScale(h + 0.8) + this.paddingTop;
+          })
+          .text(d => (d > 0 ? Math.round(d) : ""))
+          .attr("font-size", "8");
+      }
     },
     drawLNWL(data, i, diagram, spaceBetween, widthPerItem, ldcWidth, yScale) {
       let lnwl = diagram
@@ -510,17 +545,24 @@
           //d3.event.pageX gives coordinates relative to SVG
           //dy gives offset of svg on page
         })
-        .attr("height", d => {
-          return yScale(0) - yScale(d);
-        })
-        .attr("y", d => {
-          return yScale(d);
-        })
+        .attr("height", d => yScale(0) - yScale(d))
+        .attr("y", d => yScale(d))
         .attr("transform", `translate(0 ${this.paddingTop})`)
         .attr("width", ldcWidth)
         .attr("fill", () => {
           return this.$options.LWNLCOLORS.LDC;
         });
+      if (this.showNumbers) {
+        // we do not need to bind data or a datum as the forEach in drawBars
+        // already brings us only one datum in data
+        lnwl
+          .append("text")
+          .attr("y", yScale(data.ldc + 0.8) + this.paddingTop)
+          .text(data.ldc)
+          .attr("text-anchor", "left")
+          .attr("fill", "black")
+          .attr("font-size", "8");
+      }
     },
     drawScaleLabel({ diagram, dimensions }) {
       diagram
@@ -530,6 +572,7 @@
         .attr("x", 0)
         .attr("y", 0)
         .attr("dy", "20")
+        .attr("fill", "black")
         // translate a few mm to the right to allow for slightly higher letters
         .attr(
           "transform",
@@ -603,6 +646,9 @@
   watch: {
     fwLNWLData() {
       this.drawDiagram();
+    },
+    showNumbers() {
+      this.drawDiagram();
     }
   },
   LEGEND: app.$gettext("Percent"),