# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1561105180 -7200
# Node ID d82b5e5868e3e9c737944f44fd0898b8c942c481
# Parent  0c6ef9e655fc909de78362f5ca3d080cbd061ebc
client: available fairway depth diagrams: draw horizontal scale lines for better readability

diff -r 0c6ef9e655fc -r d82b5e5868e3 client/src/components/fairway/AvailableFairwayDepth.vue
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jun 21 08:51:24 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jun 21 10:19:40 2019 +0200
@@ -486,9 +486,9 @@
         .range([this.dimensions.mainHeight - 30, 0]);
       d3.select(".diagram-container svg").remove();
       this.generateDiagramContainer();
-      this.drawBars();
       this.drawScaleLabel();
       this.drawScale();
+      this.drawBars();
       this.drawTooltip();
     },
     generateDiagramContainer() {
@@ -511,10 +511,11 @@
     },
     drawBars() {
       const everyBar = this.diagram
-        .selectAll("g")
+        .selectAll("g.bars")
         .data(this.fwData)
         .enter()
         .append("g")
+        .attr("class", "bars")
         .attr("transform", (d, i) => {
           const dx = this.scalePaddingLeft + i * this.widthPerItem;
           return `translate(${dx})`;
@@ -529,7 +530,7 @@
     },
     drawLowerLevels(everyBar) {
       everyBar
-        .selectAll("g")
+        .selectAll("g.bars")
         .data(d => d.lowerLevels)
         .enter()
         .append("rect")
@@ -657,33 +658,49 @@
         .attr("transform", `translate(0, ${center}), rotate(-90)`);
     },
     drawScale() {
-      const yAxisLeft = d3.axisLeft().scale(this.yScale);
-      const yAxisRight = d3.axisRight().scale(this.yScale);
-      this.diagram
-        .append("g")
-        .attr("transform", `translate(${this.scalePaddingLeft})`)
-        .call(yAxisLeft)
-        .selectAll(".tick text")
-        .attr("fill", "black")
-        .select(function() {
-          return this.parentNode;
-        })
-        .selectAll(".tick line")
-        .attr("stroke", "black");
+      const yAxisLeft = d3
+        .axisLeft()
+        .tickSizeInner(
+          this.dimensions.width - this.scalePaddingLeft - this.scalePaddingRight
+        )
+        .tickSizeOuter(0)
+        .scale(this.yScale);
+      const yAxisRight = d3
+        .axisRight()
+        .tickSizeInner(
+          this.dimensions.width - this.scalePaddingLeft - this.scalePaddingRight
+        )
+        .tickSizeOuter(0)
+        .scale(this.yScale);
+
       this.diagram
         .append("g")
         .attr(
           "transform",
           `translate(${this.dimensions.width - this.scalePaddingRight})`
         )
-        .call(yAxisRight)
+        .call(yAxisLeft)
         .selectAll(".tick text")
         .attr("fill", "black")
+        .attr("dx", -6)
         .select(function() {
           return this.parentNode;
         })
         .selectAll(".tick line")
-        .attr("stroke", "black");
+        .attr("stroke-dasharray", 5)
+        .attr("stroke", "#ccc");
+      this.diagram
+        .append("g")
+        .attr("transform", `translate(${this.scalePaddingLeft})`)
+        .call(yAxisRight)
+        .selectAll(".tick text")
+        .attr("fill", "black")
+        .attr("dx", 6)
+        .select(function() {
+          return this.parentNode;
+        })
+        .selectAll(".tick line")
+        .attr("stroke", "transparent");
       this.diagram.selectAll(".domain").attr("stroke", "black");
     }
   },
diff -r 0c6ef9e655fc -r d82b5e5868e3 client/src/components/fairway/AvailableFairwayDepthLNWL.vue
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri Jun 21 08:51:24 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri Jun 21 10:19:40 2019 +0200
@@ -477,9 +477,9 @@
         .range([this.dimensions.mainHeight - 30, 0]);
       d3.select(".diagram-container svg").remove();
       this.generateDiagramContainer();
-      this.drawBars();
       this.drawScaleLabel();
       this.drawScale();
+      this.drawBars();
       this.drawTooltip();
     },
     drawTooltip() {
@@ -631,33 +631,49 @@
         .attr("transform", `translate(0, ${center}), rotate(-90)`);
     },
     drawScale() {
-      const yAxisLeft = d3.axisLeft().scale(this.yScale);
-      const yAxisRight = d3.axisRight().scale(this.yScale);
-      this.diagram
-        .append("g")
-        .attr("transform", `translate(${this.scalePaddingLeft})`)
-        .call(yAxisLeft)
-        .selectAll(".tick text")
-        .attr("fill", "black")
-        .select(function() {
-          return this.parentNode;
-        })
-        .selectAll(".tick line")
-        .attr("stroke", "black");
+      const yAxisLeft = d3
+        .axisLeft()
+        .tickSizeInner(
+          this.dimensions.width - this.scalePaddingLeft - this.scalePaddingRight
+        )
+        .tickSizeOuter(0)
+        .scale(this.yScale);
+      const yAxisRight = d3
+        .axisRight()
+        .tickSizeInner(
+          this.dimensions.width - this.scalePaddingLeft - this.scalePaddingRight
+        )
+        .tickSizeOuter(0)
+        .scale(this.yScale);
+
       this.diagram
         .append("g")
         .attr(
           "transform",
           `translate(${this.dimensions.width - this.scalePaddingRight})`
         )
-        .call(yAxisRight)
+        .call(yAxisLeft)
         .selectAll(".tick text")
         .attr("fill", "black")
+        .attr("dx", -6)
         .select(function() {
           return this.parentNode;
         })
         .selectAll(".tick line")
-        .attr("stroke", "black");
+        .attr("stroke-dasharray", 5)
+        .attr("stroke", "#ccc");
+      this.diagram
+        .append("g")
+        .attr("transform", `translate(${this.scalePaddingLeft})`)
+        .call(yAxisRight)
+        .selectAll(".tick text")
+        .attr("fill", "black")
+        .attr("dx", 6)
+        .select(function() {
+          return this.parentNode;
+        })
+        .selectAll(".tick line")
+        .attr("stroke", "transparent");
       this.diagram.selectAll(".domain").attr("stroke", "black");
     }
   },