# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1553512582 -3600
# Node ID cfd9ac0c92ee8a1b4055db3eb563cfa530b7647b
# Parent  2b79c08711384628c1971a78ef164977027f4255
client: waterlevel diagram: avoid code duplication

diff -r 2b79c0871138 -r cfd9ac0c92ee client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Mon Mar 25 12:07:00 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Mon Mar 25 12:16:22 2019 +0100
@@ -549,6 +549,36 @@
 
       // INTERACTIVITY
 
+      const updateChart = () => {
+        mainChart.select(".line").call(mainLineChart);
+        mainChart.select(".now-line").attr("d", nowLine);
+        mainChart.select(".now-line-label").call(nowLineLabel);
+        mainChart.select(".prediction-area").attr("d", predictionArea);
+        mainChart
+          .select("path.nash-sutcliffe.ns24")
+          .attr("d", nashSutcliffeBox(24));
+        mainChart
+          .select("text.nash-sutcliffe.ns24")
+          .call(nashSutcliffeLabel, nashSutDate24, 24);
+        mainChart
+          .select("path.nash-sutcliffe.ns48")
+          .attr("d", nashSutcliffeBox(48));
+        mainChart
+          .select("text.nash-sutcliffe.ns48")
+          .call(nashSutcliffeLabel, nashSutDate48, 48);
+        mainChart
+          .select("path.nash-sutcliffe.ns72")
+          .attr("d", nashSutcliffeBox(72));
+        mainChart
+          .select("text.nash-sutcliffe.ns72")
+          .call(nashSutcliffeLabel, nashSutDate72, 72);
+        mainChart
+          .select(".axis--x")
+          .call(xAxis)
+          .selectAll(".tick text")
+          .attr("y", 15);
+      };
+
       // selecting time period in nav chart
       let brush = d3
         .brushX()
@@ -559,33 +589,7 @@
             return; // ignore brush-by-zoom
           let s = d3.event.selection || x2.range();
           x.domain(s.map(x2.invert, x2));
-          mainChart.select(".line").call(mainLineChart);
-          mainChart.select(".now-line").attr("d", nowLine);
-          mainChart.select(".now-line-label").call(nowLineLabel);
-          mainChart.select(".prediction-area").attr("d", predictionArea);
-          mainChart
-            .select("path.nash-sutcliffe.ns24")
-            .attr("d", nashSutcliffeBox(24));
-          mainChart
-            .select("text.nash-sutcliffe.ns24")
-            .call(nashSutcliffeLabel, nashSutDate24, 24);
-          mainChart
-            .select("path.nash-sutcliffe.ns48")
-            .attr("d", nashSutcliffeBox(48));
-          mainChart
-            .select("text.nash-sutcliffe.ns48")
-            .call(nashSutcliffeLabel, nashSutDate48, 48);
-          mainChart
-            .select("path.nash-sutcliffe.ns72")
-            .attr("d", nashSutcliffeBox(72));
-          mainChart
-            .select("text.nash-sutcliffe.ns72")
-            .call(nashSutcliffeLabel, nashSutDate72, 72);
-          mainChart
-            .select(".axis--x")
-            .call(xAxis)
-            .selectAll(".tick text")
-            .attr("y", 15);
+          updateChart();
           svg
             .select(".zoom")
             .call(
@@ -605,33 +609,7 @@
             return; // ignore zoom-by-brush
           let t = d3.event.transform;
           x.domain(t.rescaleX(x2).domain());
-          mainChart.select(".line").call(mainLineChart);
-          mainChart.select(".now-line").attr("d", nowLine);
-          mainChart.select(".now-line-label").call(nowLineLabel);
-          mainChart.select(".prediction-area").attr("d", predictionArea);
-          mainChart
-            .select("path.nash-sutcliffe.ns24")
-            .attr("d", nashSutcliffeBox(24));
-          mainChart
-            .select("text.nash-sutcliffe.ns24")
-            .call(nashSutcliffeLabel, nashSutDate24, 24);
-          mainChart
-            .select("path.nash-sutcliffe.ns48")
-            .attr("d", nashSutcliffeBox(48));
-          mainChart
-            .select("text.nash-sutcliffe.ns48")
-            .call(nashSutcliffeLabel, nashSutDate48, 48);
-          mainChart
-            .select("path.nash-sutcliffe.ns72")
-            .attr("d", nashSutcliffeBox(72));
-          mainChart
-            .select("text.nash-sutcliffe.ns72")
-            .call(nashSutcliffeLabel, nashSutDate72, 72);
-          mainChart
-            .select(".axis--x")
-            .call(xAxis)
-            .selectAll(".tick text")
-            .attr("y", 15);
+          updateChart();
           navChart
             .select(".brush")
             .call(brush.move, x.range().map(t.invertX, t));