Mercurial > gemma

changeset 3876:0c6ef9e655fc improve-fwa-diagrams

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: available fairway depth diagrams: added second y-axis on the right
author Markus Kottlaender <markus@intevation.de>
date Fri, 21 Jun 2019 08:51:24 +0200
parents 30083005f13e
children d82b5e5868e3
files client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue
diffstat 2 files changed, 46 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jun 21 08:34:07 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jun 21 08:51:24 2019 +0200
@@ -99,6 +99,7 @@
       height: 600,
       labelPaddingBottom: 10,
       scalePaddingLeft: 50,
+      scalePaddingRight: 25,
       paddingTop: 10,
       diagram: null,
       yScale: null,
@@ -250,7 +251,10 @@
     },
     widthPerItem() {
       return Math.min(
-        (this.dimensions.width - this.scalePaddingLeft) / this.fwData.length,
+        (this.dimensions.width -
+          this.scalePaddingLeft -
+          this.scalePaddingRight) /
+          this.fwData.length,
         180
       );
     },
@@ -556,7 +560,7 @@
         .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];
@@ -592,7 +596,7 @@
         })
         .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("fill", this.$options.COLORS.LDC)
@@ -627,7 +631,7 @@
         })
         .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("fill", this.$options.COLORS.HIGHEST);
@@ -653,11 +657,26 @@
         .attr("transform", `translate(0, ${center}), rotate(-90)`);
     },
     drawScale() {
-      const yAxis = d3.axisLeft().scale(this.yScale);
+      const yAxisLeft = d3.axisLeft().scale(this.yScale);
+      const yAxisRight = d3.axisRight().scale(this.yScale);
       this.diagram
         .append("g")
         .attr("transform", `translate(${this.scalePaddingLeft})`)
-        .call(yAxis)
+        .call(yAxisLeft)
+        .selectAll(".tick text")
+        .attr("fill", "black")
+        .select(function() {
+          return this.parentNode;
+        })
+        .selectAll(".tick line")
+        .attr("stroke", "black");
+      this.diagram
+        .append("g")
+        .attr(
+          "transform",
+          `translate(${this.dimensions.width - this.scalePaddingRight})`
+        )
+        .call(yAxisRight)
         .selectAll(".tick text")
         .attr("fill", "black")
         .select(function() {
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri Jun 21 08:34:07 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri Jun 21 08:51:24 2019 +0200
@@ -94,6 +94,7 @@
       loading: false,
       labelPaddingTop: 15,
       scalePaddingLeft: 50,
+      scalePaddingRight: 30,
       paddingTop: 10,
       diagram: null,
       yScale: null,
@@ -237,7 +238,9 @@
     },
     widthPerItem() {
       return Math.min(
-        (this.dimensions.width - this.scalePaddingLeft) /
+        (this.dimensions.width -
+          this.scalePaddingLeft -
+          this.scalePaddingRight) /
           this.fwLNWLData.length,
         180
       );
@@ -628,11 +631,26 @@
         .attr("transform", `translate(0, ${center}), rotate(-90)`);
     },
     drawScale() {
-      const yAxis = d3.axisLeft().scale(this.yScale);
+      const yAxisLeft = d3.axisLeft().scale(this.yScale);
+      const yAxisRight = d3.axisRight().scale(this.yScale);
       this.diagram
         .append("g")
         .attr("transform", `translate(${this.scalePaddingLeft})`)
-        .call(yAxis)
+        .call(yAxisLeft)
+        .selectAll(".tick text")
+        .attr("fill", "black")
+        .select(function() {
+          return this.parentNode;
+        })
+        .selectAll(".tick line")
+        .attr("stroke", "black");
+      this.diagram
+        .append("g")
+        .attr(
+          "transform",
+          `translate(${this.dimensions.width - this.scalePaddingRight})`
+        )
+        .call(yAxisRight)
         .selectAll(".tick text")
         .attr("fill", "black")
         .select(function() {