Mercurial > gemma
changeset 3253:3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 14 May 2019 13:22:24 +0200 |
parents | fccb28813159 |
children | 08b117aca4cc |
files | client/src/components/gauge/Waterlevel.vue |
diffstat | 1 files changed, 40 insertions(+), 27 deletions(-) [+] |
line wrap: on
line diff
--- 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