# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1557832944 -7200
# Node ID 3a7b6eb162dbf1ac703df606e87e1f089f8ed983
# Parent  fccb28813159e41f35199557a89049775d6707a7
client: waterlevel diagram: separated main chart and navigation drawers

diff -r fccb28813159 -r 3a7b6eb162db client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Tue May 14 12:24:14 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Tue May 14 13:22:24 2019 +0200
@@ -516,13 +516,16 @@
 
       // draw
       updaters.push(this.drawAxes());
-      updaters.push(this.drawWaterlevelCharts());
+      updaters.push(this.drawWaterlevelChart());
       updaters.push(this.drawPredictionAreas());
       updaters.push(this.drawNashSutcliffe(24));
       updaters.push(this.drawNashSutcliffe(48));
       updaters.push(this.drawNashSutcliffe(72));
       updaters.push(this.drawNowLines());
-      this.drawRefLines(refWaterLevels); // static, doesn't need an updater
+
+      // static, don't need updater
+      this.drawNavigationChart();
+      this.drawRefLines(refWaterLevels);
 
       // INTERACTIONS
 
@@ -758,27 +761,26 @@
           .attr("y", 15);
       };
     },
-    drawWaterlevelCharts() {
-      const waterlevelChartDrawer = isNav => {
-        return d3
-          .lineChunked()
-          .defined(
+    drawWaterlevelChart() {
+      const waterlevelChartDrawer = () => {
+        let domainLeft = new Date(this.scale.x.domain()[0].getTime());
+        let domainRight = new Date(this.scale.x.domain()[1].getTime());
+        domainLeft.setDate(domainLeft.getDate() - 1);
+        domainRight.setDate(domainRight.getDate() + 1);
+
+        return (
+          d3
+            .lineChunked()
             // render only data points that are visible in the current scale
-            d => {
-              let domainLeft = new Date(this.scale.x.domain()[0].getTime());
-              domainLeft.setDate(domainLeft.getDate() - 1);
-              let domainRight = new Date(this.scale.x.domain()[1].getTime());
-              domainRight.setDate(domainRight.getDate() + 1);
-              return d.date > domainLeft && d.date < domainRight;
-            }
-          )
-          .x(d => this.scale[isNav ? "x2" : "x"](d.date))
-          .y(d => this.scale[isNav ? "y2" : "y"](d.waterlevel))
-          .curve(d3.curveLinear)
-          .isNext(this.isNext())
-          .pointAttrs({ r: 1.7 })
-          .chunk(d => (d.predicted ? "predicted" : "line"))
-          .chunkDefinitions({ predicted: {} });
+            .defined(d => d.date > domainLeft && d.date < domainRight)
+            .x(d => this.scale.x(d.date))
+            .y(d => this.scale.y(d.waterlevel))
+            .curve(d3.curveLinear)
+            .isNext(this.isNext())
+            .pointAttrs({ r: 1.7 })
+            .chunk(d => (d.predicted ? "predicted" : "line"))
+            .chunkDefinitions({ predicted: {} })
+        );
       };
 
       this.diagram
@@ -787,15 +789,26 @@
         .datum(this.waterlevels)
         .call(waterlevelChartDrawer());
 
+      return () => {
+        this.diagram.select(".line").call(waterlevelChartDrawer());
+      };
+    },
+    drawNavigationChart() {
       this.navigation
         .append("g")
         .attr("class", "line")
         .datum(this.waterlevels)
-        .call(waterlevelChartDrawer(true));
-
-      return () => {
-        this.diagram.select(".line").call(waterlevelChartDrawer());
-      };
+        .call(
+          d3
+            .lineChunked()
+            .x(d => this.scale.x2(d.date))
+            .y(d => this.scale.y2(d.waterlevel))
+            .curve(d3.curveLinear)
+            .isNext(this.isNext())
+            .pointAttrs({ r: 1.7 })
+            .chunk(d => (d.predicted ? "predicted" : "line"))
+            .chunkDefinitions({ predicted: {} })
+        );
     },
     drawNowLines() {
       const nowLine = d3