Mercurial > gemma
changeset 2813:49c1570919ae
client: spuc8: use new endpoints to fetch year based and longterm waterlevel data
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Tue, 26 Mar 2019 14:05:54 +0100 |
| parents | 30a753f51a3c |
| children | 6f435a9558f2 |
| files | client/src/components/gauge/Gauges.vue client/src/components/gauge/HydrologicalConditions.vue client/src/store/gauges.js |
| diffstat | 3 files changed, 76 insertions(+), 26 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Gauges.vue Tue Mar 26 13:03:10 2019 +0100 +++ b/client/src/components/gauge/Gauges.vue Tue Mar 26 14:05:54 2019 +0100 @@ -235,7 +235,8 @@ icon: "ruler-vertical", closeCallback: () => { this.$store.commit("gauges/selectedGaugeISRS", null); - this.$store.commit("gauges/meanWaterlevels", []); + this.$store.commit("gauges/longtermWaterlevels", []); + this.$store.commit("gauges/yearWaterlevels", []); }, expandCallback: () => { this.$store.commit("map/moveMap", { @@ -251,8 +252,13 @@ this.loading = true; this.$store.commit("application/showSplitscreen", true); - this.$store - .dispatch("gauges/loadMeanWaterlevels") + Promise.all([ + this.$store.dispatch("gauges/loadLongtermWaterlevels"), + this.$store.dispatch( + "gauges/loadYearWaterlevels", + new Date().getFullYear() + ) + ]) .catch(error => { const { status, data } = error.response; displayError({
--- a/client/src/components/gauge/HydrologicalConditions.vue Tue Mar 26 13:03:10 2019 +0100 +++ b/client/src/components/gauge/HydrologicalConditions.vue Tue Mar 26 14:05:54 2019 +0100 @@ -2,7 +2,7 @@ <div class="d-flex flex-fill justify-content-center align-items-center diagram-container" > - <div v-if="!meanWaterlevels.length"> + <div v-if="!longtermWaterlevels.length"> <translate>No data available.</translate> </div> </div> @@ -86,14 +86,9 @@ export default { computed: { - ...mapState("gauges", ["meanWaterlevels"]), + ...mapState("gauges", ["longtermWaterlevels", "yearWaterlevels"]), ...mapGetters("gauges", ["selectedGauge", "minMaxWaterlevelForDay"]) }, - watch: { - meanWaterlevels() { - this.drawDiagram(); - } - }, methods: { drawDiagram() { // TODO: Optimize code. I'm pretty sure all of this can be done in a much @@ -102,7 +97,7 @@ // remove old diagram d3.select(".diagram-container svg").remove(); - if (!this.selectedGauge || !this.meanWaterlevels.length) return; + if (!this.selectedGauge || !this.longtermWaterlevels.length) return; // get HDC/LDC/MW of the gauge let refWaterLevels = JSON.parse( @@ -141,7 +136,7 @@ // including HDC/LDC (+/- 1/8 HDC-LDC) let WaterlevelMinMax = d3.extent( [ - ...this.meanWaterlevels, + ...this.longtermWaterlevels, { waterlevel: refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8 @@ -261,7 +256,7 @@ // overall min/max area chart mainChart .append("path") - .datum(this.meanWaterlevels) + .datum(this.longtermWaterlevels) .attr("class", "area") .attr("d", areaChart); @@ -316,25 +311,25 @@ mainChart .append("path") .attr("class", "line mean") - .datum(this.meanWaterlevels) + .datum(this.longtermWaterlevels) .attr("d", lineChart("mean")); // median waterlevel chart mainChart .append("path") .attr("class", "line median") - .datum(this.meanWaterlevels) + .datum(this.longtermWaterlevels) .attr("d", lineChart("median")); // q25 waterlevel chart mainChart .append("path") .attr("class", "line q25") - .datum(this.meanWaterlevels) + .datum(this.longtermWaterlevels) .attr("d", lineChart("q25")); // q75 waterlevel chart mainChart .append("path") .attr("class", "line q75") - .datum(this.meanWaterlevels) + .datum(this.longtermWaterlevels) .attr("d", lineChart("q75")); // DRAWING NAVCHART @@ -354,7 +349,7 @@ // overall min/max area chart navChart .append("path") - .datum(this.meanWaterlevels) + .datum(this.longtermWaterlevels) .attr("class", "area") .attr("d", areaChartNav);
--- a/client/src/store/gauges.js Tue Mar 26 13:03:10 2019 +0100 +++ b/client/src/store/gauges.js Tue Mar 26 14:05:54 2019 +0100 @@ -25,7 +25,8 @@ gauges: [], selectedGaugeISRS: null, waterlevels: [], - meanWaterlevels: [], + longtermWaterlevels: [], + yearWaterlevels: [], nashSutcliffe: null, dateFrom: dateFrom, dateTo: dateTo @@ -53,8 +54,11 @@ waterlevels: (state, data) => { state.waterlevels = data; }, - meanWaterlevels: (state, data) => { - state.meanWaterlevels = data; + longtermWaterlevels: (state, data) => { + state.longtermWaterlevels = data; + }, + yearWaterlevels: (state, data) => { + state.yearWaterlevels = data; }, nashSutcliffe: (state, data) => { state.nashSutcliffe = data; @@ -139,19 +143,26 @@ }); }); }, - loadMeanWaterlevels({ state, commit }) { + loadLongtermWaterlevels({ state, commit }) { return new Promise((resolve, reject) => { - HTTP.get(`/data/average-waterlevels/${state.selectedGaugeISRS}`, { + HTTP.get(`/data/longterm-waterlevels/${state.selectedGaugeISRS}`, { headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) .then(response => { + const now = new Date(); let data = response.data .split("\n") .filter((wl, i) => wl && i) // remove empty rows and first row .map(wl => { wl = wl.split(","); + let dayAndMonth = wl[0].split("-").map(n => Number(n)); + let date = new Date( + now.getFullYear(), + dayAndMonth[1] - 1, + dayAndMonth[0] + ); return { - date: new Date(wl[0]), + date: date, min: Number(wl[1]), max: Number(wl[2]), mean: Number(wl[3]), @@ -161,11 +172,49 @@ }; }); data = data.sort((a, b) => a.date - b.date); - commit("meanWaterlevels", data); + commit("longtermWaterlevels", data); resolve(data); }) .catch(error => { - commit("meanWaterlevels", []); + commit("longtermWaterlevels", []); + reject(error); + }); + }); + }, + loadYearWaterlevels({ state, commit }, year) { + return new Promise((resolve, reject) => { + HTTP.get(`/data/year-waterlevels/${state.selectedGaugeISRS}/${year}`, { + headers: { "X-Gemma-Auth": localStorage.getItem("token") } + }) + .then(response => { + const now = new Date(); + let data = response.data + .split("\n") + .filter((wl, i) => wl && i) // remove empty rows and first row + .map(wl => { + wl = wl.split(","); + let dayAndMonth = wl[0].split("-").map(n => Number(n)); + let date = new Date( + now.getFullYear(), + dayAndMonth[1] - 1, + dayAndMonth[0] + ); + return { + date: date, + min: Number(wl[1]), + max: Number(wl[2]), + mean: Number(wl[3]), + median: Number(wl[4]), + q25: Number(wl[5]), + q75: Number(wl[6]) + }; + }); + data = data.sort((a, b) => a.date - b.date); + commit("yearWaterlevels", data); + resolve(data); + }) + .catch(error => { + commit("yearWaterlevels", []); reject(error); }); });