# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1552650210 -3600
# Node ID c4da269238a44fcc7ffb48520720981cdcd22f37
# Parent  bd615f97816412b00a796884b855e84ed2121b0f
client: waterlevel diagram: visualize data gaps

diff -r bd615f978164 -r c4da269238a4 client/package.json
--- a/client/package.json	Fri Mar 15 12:10:47 2019 +0100
+++ b/client/package.json	Fri Mar 15 12:43:30 2019 +0100
@@ -34,6 +34,7 @@
     "axios": "^0.18.0",
     "bootstrap": "^4.1.1",
     "d3": "^5.7.0",
+    "d3-line-chunked": "^1.4.1",
     "debounce": "^1.2.0",
     "font-awesome": "^4.7.0",
     "glob-all": "^3.1.0",
diff -r bd615f978164 -r c4da269238a4 client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Fri Mar 15 12:10:47 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Fri Mar 15 12:43:30 2019 +0100
@@ -5,11 +5,15 @@
 <style lang="sass" scoped>
 .diagram-container
   /deep/
-    .line
-      stroke: steelblue
-      stroke-width: 2
-      fill: transparent
-      clip-path: url(#clip)
+    .main
+      .line
+        clip-path: url(#clip)
+    .nav
+      .line
+        stroke: steelblue
+        stroke-width: 2
+        fill: transparent
+        clip-path: url(#clip)
 
     .hdc-line,
     .ldc-line,
@@ -63,9 +67,14 @@
  */
 
 import { mapState, mapGetters } from "vuex";
-import * as d3 from "d3";
+import * as d3Base from "d3";
+import { lineChunked } from "d3-line-chunked";
 import debounce from "debounce";
 
+// we should load only d3 modules we need but for now we'll go with the lazy way
+// https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
+const d3 = Object.assign(d3Base, { lineChunked });
+
 export default {
   computed: {
     ...mapState("gauges", ["waterlevels"]),
@@ -145,11 +154,23 @@
       // PREPARING CHART FUNCTIONS
 
       // waterlevel line in big chart
-      let mainLineChart = d3
-        .line()
-        .curve(d3.curveMonotoneX)
+      // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
+      var mainLineChart = d3
+        .lineChunked()
         .x(d => x(d.date))
-        .y(d => y(d.waterlevel));
+        .y(d => y(d.waterlevel))
+        .curve(d3.curveLinear)
+        .isNext((prev, current) => {
+          // points are "next to each other" when they are exactly 15 minutes apart
+          return current.date - prev.date === 15 * 60 * 1000;
+        })
+        .lineStyles({ stroke: "steelblue" })
+        .gapStyles({
+          stroke: "steelblue",
+          "stroke-opacity": 1,
+          "stroke-dasharray": "3 3",
+          "stroke-width": 1
+        });
       // waterlevel line in small chart
       let navLineChart = d3
         .line()
@@ -176,6 +197,7 @@
 
       let mainChart = svg
         .append("g")
+        .attr("class", "main")
         .attr("transform", `translate(${mainMargin.left}, ${mainMargin.top})`);
 
       // axes
@@ -256,15 +278,18 @@
 
       // waterlevel chart
       mainChart
-        .append("path")
+        .append("g")
+        .attr("class", "line")
         .datum(this.waterlevels)
-        .attr("class", "line")
-        .attr("d", mainLineChart);
+        .transition()
+        .duration(1000)
+        .call(mainLineChart);
 
       // DRAWING NAVCHART
 
       let navChart = svg
         .append("g")
+        .attr("class", "nav")
         .attr("transform", `translate(${navMargin.left}, ${navMargin.top})`);
 
       // axis (nav chart only has y-axis)
@@ -293,7 +318,7 @@
             return; // ignore brush-by-zoom
           let s = d3.event.selection || x2.range();
           x.domain(s.map(x2.invert, x2));
-          mainChart.select(".line").attr("d", mainLineChart);
+          mainChart.select(".line").call(mainLineChart);
           mainChart
             .select(".axis--x")
             .call(xAxis)
@@ -318,7 +343,7 @@
             return; // ignore zoom-by-brush
           let t = d3.event.transform;
           x.domain(t.rescaleX(x2).domain());
-          mainChart.select(".line").attr("d", mainLineChart);
+          mainChart.select(".line").call(mainLineChart);
           mainChart
             .select(".axis--x")
             .call(xAxis)
diff -r bd615f978164 -r c4da269238a4 client/yarn.lock
--- a/client/yarn.lock	Fri Mar 15 12:10:47 2019 +0100
+++ b/client/yarn.lock	Fri Mar 15 12:43:30 2019 +0100
@@ -3471,7 +3471,7 @@
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
   integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=
 
-d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0:
+d3-array@1, d3-array@^1.0.1, d3-array@^1.1.1, d3-array@^1.2.0:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
   integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
@@ -3578,13 +3578,32 @@
   resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.8.tgz#7a6317bd3ed24e324641b6f1e76e978836b008cc"
   integrity sha512-L+GHMSZNwTpiq4rt9GEsNcpLa4M96lXMR8M/nMG9p5hBE0jy6C+3hWtyZMenPQdwla249iJy7Nx0uKt3n+u9+w==
 
-d3-interpolate@1:
+d3-interpolate-path@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate-path/-/d3-interpolate-path-1.1.1.tgz#5bc07e94a21eeb16e2d15ff703e74080a6bb701c"
+  integrity sha1-W8B+lKIe6xbi0V/3A+dAgKa7cBw=
+  dependencies:
+    d3-interpolate "^1.1.1"
+
+d3-interpolate@1, d3-interpolate@^1.1.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.3.2.tgz#417d3ebdeb4bc4efcc8fd4361c55e4040211fd68"
   integrity sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==
   dependencies:
     d3-color "1"
 
+d3-line-chunked@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/d3-line-chunked/-/d3-line-chunked-1.4.1.tgz#bf531da86cb75c09cce76c814ca9d9dfc4de5e90"
+  integrity sha1-v1MdqGy3XAnM52yBTKnZ38TeXpA=
+  dependencies:
+    d3-array "^1.0.1"
+    d3-interpolate "^1.1.1"
+    d3-interpolate-path "^1.1.0"
+    d3-selection "^1.0.2"
+    d3-shape "^1.0.3"
+    d3-transition "^1.0.2"
+
 d3-path@1:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.7.tgz#8de7cd693a75ac0b5480d3abaccd94793e58aae8"
@@ -3625,12 +3644,12 @@
     d3-time "1"
     d3-time-format "2"
 
-d3-selection@1, d3-selection@^1.1.0:
+d3-selection@1, d3-selection@^1.0.2, d3-selection@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.0.tgz#ab9ac1e664cf967ebf1b479cc07e28ce9908c474"
   integrity sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg==
 
-d3-shape@1:
+d3-shape@1, d3-shape@^1.0.3:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.4.tgz#358e76014645321eecc7c364e188f8ae3d2a07d4"
   integrity sha512-izaz4fOpOnY3CD17hkZWNxbaN70sIGagLR/5jb6RS96Y+6VqX+q1BQf1av6QSBRdfULi3Gb8Js4CzG4+KAPjMg==
@@ -3654,7 +3673,7 @@
   resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.9.tgz#f7bb8c0d597d792ff7131e1c24a36dd471a471ba"
   integrity sha512-rT34J5HnQUHhcLvhSB9GjCkN0Ddd5Y8nCwDBG2u6wQEeYxT/Lf51fTFFkldeib/sE/J0clIe0pnCfs6g/lRbyg==
 
-d3-transition@1:
+d3-transition@1, d3-transition@^1.0.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.2.0.tgz#f538c0e21b2aa1f05f3e965f8567e81284b3b2b8"
   integrity sha512-VJ7cmX/FPIPJYuaL2r1o1EMHLttvoIuZhhuAlRoOxDzogV8iQS6jYulDm3xEU3TqL80IZIhI551/ebmCMrkvhw==