Mercurial > gemma

changeset 3909:2e7f191bba27

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
available_fairwaydepth: factor out side-effects from diagram rendering
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 11 Jul 2019 10:02:35 +0200
parents 976c83b6f479
children 29b294e77a5c
files client/src/components/fairway/AvailableFairwayDepth.vue
diffstat 1 files changed, 96 insertions(+), 72 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Thu Jul 11 09:18:59 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Thu Jul 11 10:02:35 2019 +0200
@@ -96,9 +96,6 @@
       scalePaddingLeft: 60,
       scalePaddingRight: 0,
       paddingTop: 25,
-      diagram: null,
-      yScale: null,
-      dimensions: null,
       pdf: {
         doc: null,
         width: null,
@@ -243,21 +240,6 @@
     featureName() {
       if (this.selectedFairwayAvailabilityFeature == null) return "";
       return this.selectedFairwayAvailabilityFeature.properties.name;
-    },
-    widthPerItem() {
-      return Math.min(
-        (this.dimensions.width -
-          this.scalePaddingLeft -
-          this.scalePaddingRight) /
-          this.fwData.length,
-        180
-      );
-    },
-    spaceBetween() {
-      return this.widthPerItem * 0.2;
-    },
-    ldcOffset() {
-      return this.widthPerItem * 0.1;
     }
   },
   methods: {
@@ -368,19 +350,19 @@
       this.$store.commit("application/paneSetup", "DEFAULT");
     },
     drawDiagram() {
-      this.dimensions = this.getDimensions({
+      const dimensions = this.getDimensions({
         main: { top: 0, right: 20, bottom: 75, left: 200 }
       });
-      this.yScale = d3
+      const yScale = d3
         .scaleLinear()
         .domain(this.frequencyToRange)
-        .range([this.dimensions.mainHeight - 30, 0]);
+        .range([dimensions.mainHeight - 30, 0]);
       d3.select(".diagram-container svg").remove();
-      this.generateDiagramContainer();
-      this.drawScaleLabel();
-      this.drawScale();
-      this.drawBars();
-      this.drawTooltip();
+      const diagram = this.generateDiagramContainer();
+      this.drawScaleLabel({ diagram, dimensions });
+      this.drawScale({ diagram, dimensions, yScale });
+      this.drawBars({ diagram, yScale, dimensions });
+      this.drawTooltip(diagram);
     },
     generateDiagramContainer() {
       const diagram = d3
@@ -388,36 +370,74 @@
         .append("svg")
         .attr("width", "100%")
         .attr("height", "100%");
-      this.diagram = diagram.append("g");
+      return diagram.append("g");
     },
-    drawTooltip() {
-      this.diagram
+    drawTooltip(diagram) {
+      diagram
         .append("text")
         .text("")
         .attr("font-size", "0.8em")
         .attr("opacity", 0)
         .attr("id", "tooltip");
     },
-    drawBars() {
-      const everyBar = this.diagram
+    drawBars({ diagram, yScale, dimensions }) {
+      const widthPerItem = Math.min(
+        (dimensions.width - this.scalePaddingLeft - this.scalePaddingRight) /
+          this.fwData.length,
+        180
+      );
+      const spaceBetween = widthPerItem * 0.2;
+      const ldcOffset = widthPerItem * 0.1;
+      const everyBar = diagram
         .selectAll("g.bars")
         .data(this.fwData)
         .enter()
         .append("g")
         .attr("class", "bars")
         .attr("transform", (d, i) => {
-          const dx = this.scalePaddingLeft + i * this.widthPerItem;
+          const dx = this.scalePaddingLeft + i * widthPerItem;
           return `translate(${dx})`;
         });
-      this.drawSingleBars(everyBar);
-      this.drawLabelPerBar(everyBar);
+      this.drawSingleBars({
+        everyBar,
+        yScale,
+        dimensions,
+        widthPerItem,
+        spaceBetween,
+        ldcOffset
+      });
+      this.drawLabelPerBar({ everyBar, dimensions, widthPerItem });
     },
-    drawSingleBars(everyBar) {
-      this.drawLDC(everyBar);
-      this.drawHighestLevel(everyBar);
-      this.drawLowerLevels(everyBar);
+    drawSingleBars({
+      everyBar,
+      yScale,
+      widthPerItem,
+      spaceBetween,
+      ldcOffset
+    }) {
+      this.drawLDC({ everyBar, yScale, widthPerItem, spaceBetween, ldcOffset });
+      this.drawHighestLevel({
+        everyBar,
+        yScale,
+        widthPerItem,
+        spaceBetween,
+        ldcOffset
+      });
+      this.drawLowerLevels({
+        everyBar,
+        yScale,
+        widthPerItem,
+        spaceBetween,
+        ldcOffset
+      });
     },
-    drawLowerLevels(everyBar) {
+    drawLowerLevels({
+      everyBar,
+      yScale,
+      widthPerItem,
+      spaceBetween,
+      ldcOffset
+    }) {
       everyBar
         .selectAll("g.bars")
         .data(d => d.lowerLevels)
@@ -446,25 +466,23 @@
         })
         .attr("y", d => {
           return (
-            2 * this.yScale(0) -
-            this.yScale(hoursInDays(d.translateY)) +
-            this.paddingTop
+            2 * yScale(0) - yScale(hoursInDays(d.translateY)) + this.paddingTop
           );
         })
         .attr("height", d => {
-          return this.yScale(0) - this.yScale(hoursInDays(d.height));
+          return yScale(0) - yScale(hoursInDays(d.height));
         })
-        .attr("x", this.ldcOffset + this.spaceBetween / 2)
-        .attr("width", this.widthPerItem - this.ldcOffset - this.spaceBetween)
+        .attr("x", ldcOffset + spaceBetween / 2)
+        .attr("width", widthPerItem - ldcOffset - spaceBetween)
         .attr("fill", (d, i) => {
           return this.$options.COLORS.REST[i];
         });
     },
-    fnheight(name) {
-      return d => this.yScale(0) - this.yScale(hoursInDays(d[name]));
+    fnheight({ name, yScale }) {
+      return d => yScale(0) - yScale(hoursInDays(d[name]));
     },
-    drawLDC(everyBar) {
-      const height = this.fnheight("ldc");
+    drawLDC({ everyBar, yScale, widthPerItem, spaceBetween }) {
+      const height = this.fnheight({ name: "ldc", yScale });
       everyBar
         .append("rect")
         .on("mouseover", function() {
@@ -488,10 +506,10 @@
           //d3.event.pageX gives coordinates relative to SVG
           //dy gives offset of svg on page
         })
-        .attr("y", this.yScale(0))
+        .attr("y", yScale(0))
         .attr("height", height)
-        .attr("x", this.spaceBetween / 2)
-        .attr("width", this.widthPerItem - this.spaceBetween)
+        .attr("x", spaceBetween / 2)
+        .attr("width", widthPerItem - spaceBetween)
         .attr(
           "transform",
           d => `translate(0 ${this.paddingTop + -1 * height(d)})`
@@ -499,8 +517,14 @@
         .attr("fill", this.$options.COLORS.LDC)
         .attr("id", "ldc");
     },
-    drawHighestLevel(everyBar) {
-      const height = this.fnheight("highestLevel");
+    drawHighestLevel({
+      everyBar,
+      yScale,
+      widthPerItem,
+      spaceBetween,
+      ldcOffset
+    }) {
+      const height = this.fnheight({ name: "highestLevel", yScale });
       everyBar
         .append("rect")
         .on("mouseover", function() {
@@ -526,27 +550,27 @@
           //d3.event.pageX gives coordinates relative to SVG
           //dy gives offset of svg on page
         })
-        .attr("y", this.yScale(0))
+        .attr("y", yScale(0))
         .attr("height", height)
-        .attr("x", this.ldcOffset + this.spaceBetween / 2)
-        .attr("width", this.widthPerItem - this.ldcOffset - this.spaceBetween)
+        .attr("x", ldcOffset + spaceBetween / 2)
+        .attr("width", widthPerItem - ldcOffset - spaceBetween)
         .attr(
           "transform",
           d => `translate(0 ${this.paddingTop + -1 * height(d)})`
         )
         .attr("fill", this.$options.COLORS.HIGHEST);
     },
-    drawLabelPerBar(everyBar) {
+    drawLabelPerBar({ everyBar, dimensions, widthPerItem }) {
       everyBar
         .append("text")
         .text(d => d.label)
-        .attr("y", this.dimensions.mainHeight + this.paddingTop - 5)
-        .attr("x", this.widthPerItem / 2)
+        .attr("y", dimensions.mainHeight + this.paddingTop - 5)
+        .attr("x", widthPerItem / 2)
         .attr("text-anchor", "middle")
         .attr("font-size", "9");
     },
-    drawScaleLabel() {
-      this.diagram
+    drawScaleLabel({ diagram, dimensions }) {
+      diagram
         .append("text")
         .text(this.$options.LEGEND)
         .attr("text-anchor", "middle")
@@ -555,31 +579,31 @@
         .attr("dy", "20")
         .attr(
           "transform",
-          `translate(2, ${(this.dimensions.mainHeight + this.paddingTop) /
+          `translate(2, ${(dimensions.mainHeight + this.paddingTop) /
             2}), rotate(-90)`
         );
     },
-    drawScale() {
+    drawScale({ diagram, dimensions, yScale }) {
       const yAxisLeft = d3
         .axisLeft()
         .tickSizeInner(
-          this.dimensions.width - this.scalePaddingLeft - this.scalePaddingRight
+          dimensions.width - this.scalePaddingLeft - this.scalePaddingRight
         )
         .tickSizeOuter(0)
-        .scale(this.yScale);
+        .scale(yScale);
       const yAxisRight = d3
         .axisRight()
         .tickSizeInner(
-          this.dimensions.width - this.scalePaddingLeft - this.scalePaddingRight
+          dimensions.width - this.scalePaddingLeft - this.scalePaddingRight
         )
         .tickSizeOuter(0)
-        .scale(this.yScale);
+        .scale(yScale);
 
-      this.diagram
+      diagram
         .append("g")
         .attr(
           "transform",
-          `translate(${this.dimensions.width - this.scalePaddingRight} ${
+          `translate(${dimensions.width - this.scalePaddingRight} ${
             this.paddingTop
           })`
         )
@@ -599,7 +623,7 @@
         .filter(d => d === 0)
         .selectAll(".tick line")
         .attr("stroke", "#333");
-      this.diagram
+      diagram
         .append("g")
         .attr(
           "transform",
@@ -614,7 +638,7 @@
         })
         .selectAll(".tick line")
         .attr("stroke", "transparent");
-      this.diagram.selectAll(".domain").attr("stroke", "black");
+      diagram.selectAll(".domain").attr("stroke", "black");
     }
   },
   watch: {