Mercurial > gemma

changeset 3877:d82b5e5868e3 improve-fwa-diagrams

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: available fairway depth diagrams: draw horizontal scale lines for better readability
author Markus Kottlaender <markus@intevation.de>
date Fri, 21 Jun 2019 10:19:40 +0200
parents 0c6ef9e655fc
children 1ff97bb72a24
files client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue
diffstat 2 files changed, 67 insertions(+), 34 deletions(-) [+]
line wrap: on
line diff
--- 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");
     }
   },
--- 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");
     }
   },