Mercurial > gemma
changeset 2756:ee2530ee1c0b
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