Mercurial > gemma

changeset 2756:ee2530ee1c0b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagram: use chunkedLine for nav chart too
author Markus Kottlaender <markus@intevation.de>
date Thu, 21 Mar 2019 14:13:38 +0100
parents 2b4727a32ce6
children 74afcd266249
files client/src/components/gauge/Waterlevel.vue
diffstat 1 files changed, 24 insertions(+), 25 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Thu Mar 21 13:47:57 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Thu Mar 21 14:13:38 2019 +0100
@@ -11,15 +11,19 @@
 <style lang="sass" scoped>
 .diagram-container
   /deep/
-    .main
-      .line
-        clip-path: url(#clip)
-    .nav
-      .line
+    .line
+      clip-path: url(#clip)
+      path
         stroke: steelblue
         stroke-width: 2
         fill: none
-        clip-path: url(#clip)
+        &.d3-line-chunked-chunk-gap
+          stroke-width: 1
+          stroke-dasharray: 4, 4
+          stroke-opacity: 1
+      circle
+        stroke-width: 0
+        fill: steelblue
 
     .hdc-line,
     .ldc-line,
@@ -211,6 +215,10 @@
 
       // PREPARING CHART FUNCTIONS
 
+      // points are "next to each other" when they are exactly 15 minutes apart
+      const isNext = (prev, current) =>
+        current.date - prev.date === 15 * 60 * 1000;
+
       // waterlevel line in big chart
       // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
       var mainLineChart = d3
@@ -218,23 +226,16 @@
         .x(d => x(d.date))
         .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
-        });
+        .isNext(isNext)
+        .pointAttrs({ r: 2.2 });
       // waterlevel line in small chart
       let navLineChart = d3
-        .line()
+        .lineChunked()
+        .x(d => x2(d.date))
+        .y(d => y2(d.waterlevel))
         .curve(d3.curveMonotoneX)
-        .x(d => x2(d.date))
-        .y(d => y2(d.waterlevel));
+        .isNext(isNext)
+        .pointAttrs({ r: 1.7 });
       // hdc/ldc/mw
       let refWaterlevelLine = d3
         .line()
@@ -338,8 +339,6 @@
         .append("g")
         .attr("class", "line")
         .datum(this.waterlevels)
-        .transition()
-        .duration(1000)
         .call(mainLineChart);
 
       // DRAWING NAVCHART
@@ -358,10 +357,10 @@
 
       // waterlevel chart
       navChart
-        .append("path")
+        .append("g")
+        .attr("class", "line")
         .datum(this.waterlevels)
-        .attr("class", "line")
-        .attr("d", navLineChart);
+        .call(navLineChart);
 
       // NASH SUTCLIFFE