# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1561364881 -7200
# Node ID 20be498adaf737c6d121c4a340e8c269ce25ed9c
# Parent  1ff97bb72a2450f02a107391e08ce83dac67214a
client: available fairway depth diagram: use available space

diff -r 1ff97bb72a24 -r 20be498adaf7 client/src/components/fairway/AvailableFairwayDepth.vue
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jun 21 10:59:15 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Jun 24 10:28:01 2019 +0200
@@ -46,7 +46,7 @@
       <div
         ref="diagramContainer"
         :id="containerId"
-        class="mx-auto my-auto diagram-container"
+        class="diagram-container flex-fill"
       ></div>
     </div>
   </div>
@@ -95,12 +95,9 @@
       containerId: "availablefairwaydepth",
       resizeListenerFunction: null,
       loading: false,
-      width: 1000,
-      height: 600,
-      labelPaddingBottom: 10,
-      scalePaddingLeft: 50,
-      scalePaddingRight: 30,
-      paddingTop: 10,
+      scalePaddingLeft: 60,
+      scalePaddingRight: 0,
+      paddingTop: 25,
       diagram: null,
       yScale: null,
       dimensions: null,
@@ -206,9 +203,9 @@
       const upperBound = [d[1], w[1]].filter(x => x).join(", ");
       return [
         `> LDC`,
-        `< ${lowerBound}`,
+        `>= ${upperBound}`,
         `< ${upperBound}`,
-        `>= ${upperBound}`
+        `< ${lowerBound}`
       ];
     },
     dataLink() {
@@ -465,20 +462,19 @@
       this.pdf.doc.text(this.legend[3], x + 12, y + 18);
     },
     legendStyle(index) {
-      const style = {
-        0: `background-color: ${this.$options.COLORS.LDC};`,
-        1: `background-color: ${this.$options.COLORS.REST[0]};`,
-        2: `background-color: ${this.$options.COLORS.REST[1]};`,
-        3: `background-color: ${this.$options.COLORS.HIGHEST};`
-      };
-      return style[index];
+      return [
+        `background-color: ${this.$options.COLORS.LDC};`,
+        `background-color: ${this.$options.COLORS.HIGHEST};`,
+        `background-color: ${this.$options.COLORS.REST[1]};`,
+        `background-color: ${this.$options.COLORS.REST[0]};`
+      ][index];
     },
     close() {
       this.$store.commit("application/paneSetup", "DEFAULT");
     },
     drawDiagram() {
       this.dimensions = this.getDimensions({
-        main: { top: 20, right: 20, bottom: 110, left: 200 }
+        main: { top: 0, right: 20, bottom: 75, left: 200 }
       });
       this.yScale = d3
         .scaleLinear()
@@ -495,11 +491,9 @@
       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})`);
+        .attr("width", "100%")
+        .attr("height", "100%");
+      this.diagram = diagram.append("g");
     },
     drawTooltip() {
       this.diagram
@@ -556,7 +550,11 @@
           //dy gives offset of svg on page
         })
         .attr("y", d => {
-          return 2 * this.yScale(0) - this.yScale(hoursInDays(d.translateY));
+          return (
+            2 * this.yScale(0) -
+            this.yScale(hoursInDays(d.translateY)) +
+            this.paddingTop
+          );
         })
         .attr("height", d => {
           return this.yScale(0) - this.yScale(hoursInDays(d.height));
@@ -599,7 +597,10 @@
         .attr("height", height)
         .attr("x", this.spaceBetween / 2)
         .attr("width", this.widthPerItem - this.spaceBetween)
-        .attr("transform", d => `translate(0 ${-1 * height(d)})`)
+        .attr(
+          "transform",
+          d => `translate(0 ${this.paddingTop + -1 * height(d)})`
+        )
         .attr("fill", this.$options.COLORS.LDC)
         .attr("id", "ldc");
     },
@@ -634,28 +635,34 @@
         .attr("height", height)
         .attr("x", this.ldcOffset + this.spaceBetween / 2)
         .attr("width", this.widthPerItem - this.ldcOffset - this.spaceBetween)
-        .attr("transform", d => `translate(0 ${-1 * height(d)})`)
+        .attr(
+          "transform",
+          d => `translate(0 ${this.paddingTop + -1 * height(d)})`
+        )
         .attr("fill", this.$options.COLORS.HIGHEST);
     },
     drawLabelPerBar(everyBar) {
       everyBar
         .append("text")
         .text(d => d.label)
-        .attr("y", this.dimensions.mainHeight - this.labelPaddingBottom)
+        .attr("y", this.dimensions.mainHeight + this.paddingTop - 5)
         .attr("x", this.widthPerItem / 2)
         .attr("text-anchor", "middle")
         .attr("font-size", "smaller");
     },
     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)`);
+        .attr("dy", "1.5em")
+        .attr(
+          "transform",
+          `translate(0, ${(this.dimensions.mainHeight + this.paddingTop) /
+            2}), rotate(-90)`
+        );
     },
     drawScale() {
       const yAxisLeft = d3
@@ -677,7 +684,9 @@
         .append("g")
         .attr(
           "transform",
-          `translate(${this.dimensions.width - this.scalePaddingRight})`
+          `translate(${this.dimensions.width - this.scalePaddingRight} ${
+            this.paddingTop
+          })`
         )
         .call(yAxisLeft)
         .selectAll(".tick text")
@@ -691,7 +700,10 @@
         .attr("stroke", "#ccc");
       this.diagram
         .append("g")
-        .attr("transform", `translate(${this.scalePaddingLeft})`)
+        .attr(
+          "transform",
+          `translate(${this.scalePaddingLeft} ${this.paddingTop})`
+        )
         .call(yAxisRight)
         .selectAll(".tick text")
         .attr("fill", "black")