Mercurial > gemma

changeset 3892:589f308d5802

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
merge with improve-fwa-diagrams
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 10 Jul 2019 14:32:23 +0200
parents 851c0ccba59b (current diff) 77db3d8487c1 (diff)
children 9dfd225b92e8
files
diffstat 2 files changed, 130 insertions(+), 49 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Wed Jul 10 14:06:07 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Wed Jul 10 14:32:23 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>
@@ -93,11 +93,9 @@
       containerId: "availablefairwaydepth",
       resizeListenerFunction: null,
       loading: false,
-      width: 1000,
-      height: 600,
-      labelPaddingBottom: 10,
-      scalePaddingLeft: 50,
-      paddingTop: 10,
+      scalePaddingLeft: 60,
+      scalePaddingRight: 0,
+      paddingTop: 25,
       diagram: null,
       yScale: null,
       dimensions: null,
@@ -203,9 +201,9 @@
       const upperBound = [d[1], w[1]].filter(x => x).join(", ");
       return [
         `> LDC`,
-        `< ${lowerBound}`,
+        `>= ${upperBound}`,
         `< ${upperBound}`,
-        `>= ${upperBound}`
+        `< ${lowerBound}`
       ];
     },
     dataLink() {
@@ -248,7 +246,10 @@
     },
     widthPerItem() {
       return Math.min(
-        (this.dimensions.width - this.scalePaddingLeft) / this.fwData.length,
+        (this.dimensions.width -
+          this.scalePaddingLeft -
+          this.scalePaddingRight) /
+          this.fwData.length,
         180
       );
     },
@@ -356,20 +357,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()
@@ -377,35 +377,34 @@
         .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() {
       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
         .append("text")
-        .text("banane")
+        .text("")
         .attr("font-size", "0.8em")
         .attr("opacity", 0)
         .attr("id", "tooltip");
     },
     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})`;
@@ -420,7 +419,7 @@
     },
     drawLowerLevels(everyBar) {
       everyBar
-        .selectAll("g")
+        .selectAll("g.bars")
         .data(d => d.lowerLevels)
         .enter()
         .append("rect")
@@ -439,19 +438,23 @@
             .getBoundingClientRect().left;
           const value = Number.parseFloat(hoursInDays(d.height)).toFixed(2);
           d3.select("#tooltip")
-            .text(value)
+            .text(Math.round(value))
             .attr("y", y - 10)
             .attr("x", d3.event.pageX - dy);
           //d3.event.pageX gives coordinates relative to SVG
           //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));
         })
-        .attr("x", this.ldcOffset + this.spaceBetween)
+        .attr("x", this.ldcOffset + this.spaceBetween / 2)
         .attr("width", this.widthPerItem - this.ldcOffset - this.spaceBetween)
         .attr("fill", (d, i) => {
           return this.$options.COLORS.REST[i];
@@ -479,7 +482,7 @@
             .getBoundingClientRect().left;
           const value = Number.parseFloat(hoursInDays(d.ldc)).toFixed(2);
           d3.select("#tooltip")
-            .text(value)
+            .text(Math.round(value))
             .attr("y", y - 50)
             .attr("x", d3.event.pageX - dy);
           //d3.event.pageX gives coordinates relative to SVG
@@ -487,9 +490,12 @@
         })
         .attr("y", this.yScale(0))
         .attr("height", height)
-        .attr("x", this.spaceBetween)
+        .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");
     },
@@ -514,7 +520,7 @@
             2
           );
           d3.select("#tooltip")
-            .text(value)
+            .text(Math.round(value))
             .attr("y", y - 50)
             .attr("x", d3.event.pageX - dy);
           //d3.event.pageX gives coordinates relative to SVG
@@ -522,22 +528,24 @@
         })
         .attr("y", this.yScale(0))
         .attr("height", height)
-        .attr("x", this.ldcOffset + this.spaceBetween)
+        .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", "9");
     },
     drawScaleLabel() {
-      const center = this.dimensions.mainHeight / 2;
       this.diagram
         .append("text")
         .text(this.$options.LEGEND)
@@ -545,22 +553,61 @@
         .attr("x", 0)
         .attr("y", 0)
         .attr("dy", "10")
-        // translate a few mm to the right to allow for slightly higher letters
-        .attr("transform", `translate(2, ${center}), rotate(-90)`);
+        .attr(
+          "transform",
+          `translate(2, ${(this.dimensions.mainHeight + this.paddingTop) /
+            2}), rotate(-90)`
+        );
     },
     drawScale() {
-      const yAxis = d3.axisLeft().scale(this.yScale);
+      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.scalePaddingLeft})`)
-        .call(yAxis)
+        .attr(
+          "transform",
+          `translate(${this.dimensions.width - this.scalePaddingRight} ${
+            this.paddingTop
+          })`
+        )
+        .call(yAxisLeft)
         .selectAll(".tick text")
         .attr("fill", "black")
+        .attr("dx", -3)
         .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} ${this.paddingTop})`
+        )
+        .call(yAxisRight)
+        .selectAll(".tick text")
+        .attr("fill", "black")
+        .attr("dx", 3)
+        .select(function() {
+          return this.parentNode;
+        })
+        .selectAll(".tick line")
+        .attr("stroke", "transparent");
       this.diagram.selectAll(".domain").attr("stroke", "black");
     }
   },
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Wed Jul 10 14:06:07 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Wed Jul 10 14:32:23 2019 +0200
@@ -92,6 +92,7 @@
       loading: false,
       labelPaddingTop: 15,
       scalePaddingLeft: 50,
+      scalePaddingRight: 30,
       paddingTop: 10,
       diagram: null,
       yScale: null,
@@ -235,7 +236,9 @@
     },
     widthPerItem() {
       return Math.min(
-        (this.dimensions.width - this.scalePaddingLeft) /
+        (this.dimensions.width -
+          this.scalePaddingLeft -
+          this.scalePaddingRight) /
           this.fwLNWLData.length,
         180
       );
@@ -368,9 +371,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() {
@@ -523,18 +526,49 @@
         .attr("transform", `translate(2, ${center}), rotate(-90)`);
     },
     drawScale() {
-      const yAxis = d3.axisLeft().scale(this.yScale);
+      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.scalePaddingLeft})`)
-        .call(yAxis)
+        .attr(
+          "transform",
+          `translate(${this.dimensions.width - this.scalePaddingRight})`
+        )
+        .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");
     }
   },