changeset 4361:8a26225b6133 fa-round-in-backend

client: change AvailableFairwayDepth diagram * Use days from the backend to draw the AvailableFairwayDepth diagram, by removing the hoursInDays() function.
author Bernhard Reiter <bernhard@intevation.de>
date Mon, 09 Sep 2019 17:24:14 +0200
parents 60efb69c4245
children 89d2d9309a38
files client/src/components/fairway/AvailableFairwayDepth.vue
diffstat 1 files changed, 14 insertions(+), 27 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Sep 09 15:17:13 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Sep 09 17:24:14 2019 +0200
@@ -93,15 +93,6 @@
 import { FREQUENCIES } from "@/store/fairwayavailability";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
 
-// FIXME This is a rounding methods that shows that we have fractions,
-// because we are coming from hours.  Users will understand the underlying
-// math better and we can see if this is wanted.
-// With the backend just giving us the summarized hours, we cannot do
-// a classification of each day into a category.
-// (The name of the function is kept to keep the diff more readable and
-// should changed if this is more clarified.)
-const hoursInDays = x => Math.round((x * 10) / 24) / 10;
-
 export default {
   mixins: [diagram, pdfgen, templateLoader],
   components: {
@@ -475,19 +466,15 @@
             .querySelector(".diagram-container")
             .getBoundingClientRect().left;
           d3.select("#tooltip")
-            .text(hoursInDays(d.height))
+            .text(d.height)
             .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 * yScale(0) - yScale(hoursInDays(d.translateY)) + this.paddingTop
-          );
-        })
+        .attr("y", d => 2 * yScale(0) - yScale(d.translateY) + this.paddingTop)
         .attr("height", d => {
-          return yScale(0) - yScale(hoursInDays(d.height));
+          return yScale(0) - yScale(d.height);
         })
         .attr("x", ldcOffset + spaceBetween / 2)
         .attr("width", widthPerItem - ldcOffset - spaceBetween)
@@ -500,19 +487,19 @@
           .selectAll("g.bars")
           .data(d => d.lowerLevels)
           .enter()
-          .filter(d => hoursInDays(d.height) > 0)
+          .filter(d => d.height > 0)
           .insert("text")
           .attr("y", d => {
             return (
               2 * yScale(0) -
-              yScale(hoursInDays(d.translateY)) +
+              yScale(d.translateY) +
               this.paddingTop +
-              (yScale(0) - yScale(hoursInDays(d.height))) +
+              (yScale(0) - yScale(d.height)) +
               (yScale(0) - yScale(1.9)) //instead o alignment-baseline hanging
             );
           })
           .attr("x", widthPerItem / 2)
-          .text(d => hoursInDays(d.height))
+          .text(d => d.height)
           // does not work with svg2pdf .attr("alignment-baseline", "hanging")
           .attr("text-anchor", "middle")
           .attr("font-size", "8")
@@ -520,7 +507,7 @@
       }
     },
     fnheight({ name, yScale }) {
-      return d => yScale(0) - yScale(hoursInDays(d[name]));
+      return d => yScale(0) - yScale(d[name]);
     },
     drawLDC({ everyBar, yScale, widthPerItem, spaceBetween, ldcOffset }) {
       const height = this.fnheight({ name: "ldc", yScale });
@@ -540,7 +527,7 @@
             .querySelector(".diagram-container")
             .getBoundingClientRect().left;
           d3.select("#tooltip")
-            .text(hoursInDays(d.ldc))
+            .text(d.ldc)
             .attr("y", y - 50)
             .attr("x", d3.event.pageX - dy);
           //d3.event.pageX gives coordinates relative to SVG
@@ -558,11 +545,11 @@
         .attr("id", "ldc");
       if (this.showNumbers) {
         everyBar
-          .filter(d => hoursInDays(d.ldc) > 0)
+          .filter(d => d.ldc > 0)
           .append("text")
           .attr("y", yScale(0.5)) // some distance from the bar
           .attr("x", spaceBetween / 2)
-          .text(d => hoursInDays(d.ldc))
+          .text(d => d.ldc)
           .attr("text-anchor", "left")
           .attr("font-size", "8")
           .attr(
@@ -596,7 +583,7 @@
             .querySelector(".diagram-container")
             .getBoundingClientRect().left;
           d3.select("#tooltip")
-            .text(hoursInDays(d.highestLevel))
+            .text(d.highestLevel)
             .attr("y", y - 50)
             .attr("x", d3.event.pageX - dy);
           //d3.event.pageX gives coordinates relative to SVG
@@ -613,11 +600,11 @@
         .attr("fill", this.$options.COLORS.HIGHEST);
       if (this.showNumbers) {
         everyBar
-          .filter(d => hoursInDays(d.highestLevel) > 0)
+          .filter(d => d.highestLevel > 0)
           .append("text")
           .attr("y", yScale(0.5)) // some distance from the bar
           .attr("x", widthPerItem / 2)
-          .text(d => hoursInDays(d.highestLevel))
+          .text(d => d.highestLevel)
           .attr("text-anchor", "middle")
           .attr("font-size", "8")
           .attr(