Mercurial > gemma
changeset 2686:47b789a27618 import-overview-rework
Merged default into import-overview-rework branch.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Fri, 15 Mar 2019 15:49:50 +0100 |
parents | 39a05f8c34e6 (current diff) c4da269238a4 (diff) |
children | 3b98de34de90 |
files | |
diffstat | 3 files changed, 65 insertions(+), 20 deletions(-) [+] |
line wrap: on
line diff
--- a/client/package.json Fri Mar 15 13:42:49 2019 +0100 +++ b/client/package.json Fri Mar 15 15:49:50 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",
--- a/client/src/components/gauge/Waterlevel.vue Fri Mar 15 13:42:49 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Fri Mar 15 15:49:50 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)
--- a/client/yarn.lock Fri Mar 15 13:42:49 2019 +0100 +++ b/client/yarn.lock Fri Mar 15 15:49:50 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==