# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1559573882 -7200
# Node ID 1109a38f7ff1f69ad29638b7c6e05ce3a497d271
# Parent  818cc2deff9828d7a88bfa4c34eb5fc16c9a8990
client: waterlevel format in diagrams changed from cm to m and localized

diff -r 818cc2deff98 -r 1109a38f7ff1 client/src/components/fairway/Fairwayprofile.vue
--- a/client/src/components/fairway/Fairwayprofile.vue	Mon Jun 03 16:20:35 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Mon Jun 03 16:58:02 2019 +0200
@@ -212,7 +212,11 @@
       dates.map(d => this.$options.filters.dateTime(d, true));
       return `${this.$gettext("Fairwayprofile")}: ${
         this.selectedBottleneck
-      } (${dates.join(", ")}) WL: ${waterlevelLabel} (${this.waterlevel} cm)`;
+      } (${dates.join(
+        ", "
+      )}) WL: ${waterlevelLabel} (${this.$options.filters.waterlevel(
+        this.waterlevel
+      )} m)`;
     },
     currentData() {
       if (
@@ -580,7 +584,7 @@
         .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2)
         .attr("fill", "black")
         .style("text-anchor", "middle")
-        .text("Waterlevel [cm]");
+        .text("Waterlevel [m]");
       graph
         .append("text")
         .attr("y", -50)
@@ -621,7 +625,9 @@
 
       let xAxis = d3.axisBottom(xScale).ticks(5);
       let yAxisRight = d3.axisRight(yScaleRight);
-      let yAxisLeft = d3.axisLeft(yScaleLeft);
+      let yAxisLeft = d3
+        .axisLeft(yScaleLeft)
+        .tickFormat(d => this.$options.filters.waterlevel(d));
 
       let graph = svg
         .append("g")
diff -r 818cc2deff98 -r 1109a38f7ff1 client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Mon Jun 03 16:20:35 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Mon Jun 03 16:58:02 2019 +0200
@@ -733,7 +733,8 @@
         y: d3
           .axisRight(this.scale.y)
           .tickSizeInner(this.dimensions.width)
-          .tickSizeOuter(0),
+          .tickSizeOuter(0)
+          .tickFormat(d => this.$options.filters.waterlevel(d)),
         x2: d3.axisBottom(this.scale.x2)
       };
     },
@@ -799,7 +800,7 @@
         .attr("y", 15);
       this.diagram // label
         .append("text")
-        .text(this.$gettext("Waterlevel [cm]"))
+        .text(this.$gettext("Waterlevel [m]"))
         .attr("text-anchor", "middle")
         .attr(
           "transform",
@@ -891,7 +892,11 @@
             .attr("height", 12);
           this.diagram
             .append("text")
-            .text(`${ref} (${refWaterLevels[ref]})`)
+            .text(
+              `${ref} (${this.$options.filters.waterlevel(
+                refWaterLevels[ref]
+              )})`
+            )
             .attr("class", "ref-waterlevel-label")
             .attr("x", 5)
             .attr("y", this.scale.y(refWaterLevels[ref]) - 3);
@@ -1031,7 +1036,7 @@
             .attr("dy", "1.4em")
             .attr("dominant-baseline", "hanging")
             .attr("text-anchor", "middle")
-            .text(`Q75%: ${d.q75} cm`);
+            .text(`Q75%: ${this.$options.filters.waterlevel(d.q75)} m`);
           tooltipText
             .append("tspan")
             .attr("x", 0)
@@ -1039,7 +1044,7 @@
             .attr("dy", "2.6em")
             .attr("dominant-baseline", "hanging")
             .attr("text-anchor", "middle")
-            .text(`Median: ${d.median} cm`);
+            .text(`Median: ${this.$options.filters.waterlevel(d.median)} m`);
           tooltipText
             .append("tspan")
             .attr("x", 0)
@@ -1047,7 +1052,7 @@
             .attr("dy", "3.8em")
             .attr("dominant-baseline", "hanging")
             .attr("text-anchor", "middle")
-            .text(`Q25%: ${d.q25} cm`);
+            .text(`Q25%: ${this.$options.filters.waterlevel(d.q25)} m`);
           tooltipText
             .append("tspan")
             .attr("x", 0)
@@ -1055,7 +1060,7 @@
             .attr("dy", "5em")
             .attr("dominant-baseline", "hanging")
             .attr("text-anchor", "middle")
-            .text(`Max: ${d.max} cm`);
+            .text(`Max: ${this.$options.filters.waterlevel(d.max)} m`);
           tooltipText
             .append("tspan")
             .attr("x", 0)
@@ -1063,7 +1068,7 @@
             .attr("dy", "6.2em")
             .attr("dominant-baseline", "hanging")
             .attr("text-anchor", "middle")
-            .text(`Min: ${d.min} cm`);
+            .text(`Min: ${this.$options.filters.waterlevel(d.min)} m`);
 
           const dYear = this.yearWaterlevels.find(
             ywl => ywl.date.getTime() === d.date.getTime()
diff -r 818cc2deff98 -r 1109a38f7ff1 client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Mon Jun 03 16:20:35 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Mon Jun 03 16:58:02 2019 +0200
@@ -497,7 +497,8 @@
         y: d3
           .axisRight(this.scale.y)
           .tickSizeInner(this.dimensions.width)
-          .tickSizeOuter(0),
+          .tickSizeOuter(0)
+          .tickFormat(d => this.$options.filters.waterlevel(d)),
         x2: d3.axisBottom(this.scale.x2)
       };
 
@@ -774,7 +775,7 @@
         .attr("y", 15);
       this.diagram // label
         .append("text")
-        .text(this.$gettext("Waterlevel [cm]"))
+        .text(this.$gettext("Waterlevel [m]"))
         .attr("text-anchor", "middle")
         .attr(
           "transform",
@@ -963,7 +964,11 @@
             .attr("height", 12);
           this.diagram
             .append("text")
-            .text(`${ref} (${refWaterLevels[ref]})`)
+            .text(
+              `${ref} (${this.$options.filters.waterlevel(
+                refWaterLevels[ref]
+              )})`
+            )
             .attr("class", "ref-waterlevel-label")
             .attr("x", 5)
             .attr("y", this.scale.y(refWaterLevels[ref]) - 3);
@@ -1170,7 +1175,7 @@
               .attr("dy", "1.4em")
               .attr("dominant-baseline", "hanging")
               .attr("text-anchor", "middle")
-              .text(d.max + " cm");
+              .text(this.$options.filters.waterlevel(d.max) + " m");
             tooltipText
               .append("tspan")
               .attr("x", 0)
@@ -1179,7 +1184,7 @@
               .attr("dominant-baseline", "hanging")
               .attr("text-anchor", "middle")
               .attr("class", "font-weight-bold")
-              .text(d.waterlevel + " cm");
+              .text(this.$options.filters.waterlevel(d.waterlevel) + " m");
             tooltipText
               .append("tspan")
               .attr("x", 0)
@@ -1187,7 +1192,7 @@
               .attr("dy", "3.8em")
               .attr("dominant-baseline", "hanging")
               .attr("text-anchor", "middle")
-              .text(d.min + " cm");
+              .text(this.$options.filters.waterlevel(d.min) + " m");
           } else {
             tooltipText
               .append("tspan")
@@ -1197,7 +1202,7 @@
               .attr("dominant-baseline", "hanging")
               .attr("text-anchor", "middle")
               .attr("class", "font-weight-bold")
-              .text(d.waterlevel + " cm");
+              .text(this.$options.filters.waterlevel(d.waterlevel) + " m");
           }
 
           // get text dimensions
diff -r 818cc2deff98 -r 1109a38f7ff1 client/src/lib/filters.js
--- a/client/src/lib/filters.js	Mon Jun 03 16:20:35 2019 +0200
+++ b/client/src/lib/filters.js	Mon Jun 03 16:58:02 2019 +0200
@@ -64,5 +64,12 @@
     }
 
     return sortedData;
+  },
+  // converts cm to m and formats based on locale
+  waterlevel(n) {
+    return (n / 100).toLocaleString(locale2, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
   }
 };