Mercurial > gemma
changeset 1038:e8ebfbc2aa05
feat: additional surveydata WIP
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 24 Oct 2018 16:41:51 +0200 |
parents | a04126989d91 |
children | c576b5d59c58 |
files | client/src/fairway/Fairwayprofile.vue client/src/fairway/store.js |
diffstat | 2 files changed, 56 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/fairway/Fairwayprofile.vue Wed Oct 24 16:21:44 2018 +0200 +++ b/client/src/fairway/Fairwayprofile.vue Wed Oct 24 16:41:51 2018 +0200 @@ -79,6 +79,7 @@ */ import * as d3 from "d3"; import { mapState } from "vuex"; +import { displayError } from "../application/lib/errors.js"; const GROUND_COLOR = "#4A2F06"; @@ -110,6 +111,9 @@ const currentSurveyDate = this.selectedMorph.date_info; return this.currentProfile[currentSurveyDate]; }, + additionalData() { + return this.currentProfile[this.additionalSurvey]; + }, waterColor() { const result = this.waterLevels.find( x => x.level === this.selectedWaterLevel @@ -119,11 +123,12 @@ }, data() { return { - additionalSurvey: "" + additionalSurvey: "", + wait: false }; }, watch: { - currentProfile() { + currentData() { this.drawDiagram(); }, width() { @@ -144,7 +149,27 @@ }, methods: { selectAdditionalSurveyData() { - // + if (!this.additionalSurvey || this.wait) return; + this.$store + .dispatch("fairwayprofile/loadProfile", this.additionalSurvey) + .then(() => { + this.wait = false; + this.drawDiagram(); + }) + .catch(error => { + this.wait = false; + let status = "ERROR"; + let data = error; + const response = error.response; + if (response) { + status = response.status; + data = response.data; + } + displayError({ + title: "Backend Error", + message: `${status}: ${data.message || data}` + }); + }); }, drawDiagram() { const chartDiv = document.querySelector(".fairwayprofile"); @@ -155,6 +180,7 @@ const width = this.width - this.margin.right - 1.5 * this.margin.left; const height = this.height - this.margin.top - 2 * this.margin.bottom; const currentData = this.currentData; + const additionalData = this.additionalData; const { xScale, yScaleRight, @@ -174,8 +200,22 @@ yScaleRight, currentData, height, - width + width, + color: GROUND_COLOR, + strokeColor: "black" }); + if (additionalData) { + this.drawProfile({ + graph, + xScale, + yScaleRight, + additionalData, + height, + width, + color: "green", + strokeColor: "green" + }); + } this.drawLabels({ graph, xScale, @@ -290,7 +330,15 @@ .attr("stroke", this.waterColor) .attr("d", waterArea); }, - drawProfile({ graph, xScale, yScaleRight, currentData, height }) { + drawProfile({ + graph, + xScale, + yScaleRight, + currentData, + height, + color, + strokeColor + }) { for (let part of currentData) { let profileLine = d3 .line() @@ -312,15 +360,15 @@ graph .append("path") .datum(part) - .attr("fill", GROUND_COLOR) - .attr("stroke", GROUND_COLOR) + .attr("fill", color) + .attr("stroke", color) .attr("stroke-width", 3) .attr("d", profileArea); graph .append("path") .datum(part) .attr("fill", "none") - .attr("stroke", "black") + .attr("stroke", strokeColor) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 3)