Mercurial > gemma
changeset 2710:f393fabfdd35
client: waterlevel diagram: chart extent based on selected dates instead of data
The extent of the chart's x-axis (date) was based on the data that is shown. Now it is based on the fromDate and
toDate set in the Guage dialog box.
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Mon, 18 Mar 2019 17:01:47 +0100 |
| parents | fdc392299ff1 |
| children | 3956de9b6b32 |
| files | client/src/components/gauge/Gauges.vue client/src/components/gauge/Waterlevel.vue client/src/store/gauges.js |
| diffstat | 3 files changed, 43 insertions(+), 25 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Gauges.vue Mon Mar 18 16:54:33 2019 +0100 +++ b/client/src/components/gauge/Gauges.vue Mon Mar 18 17:01:47 2019 +0100 @@ -104,9 +104,7 @@ export default { data() { return { - loading: false, - dateFrom: new Date(), - dateTo: new Date() + loading: false }; }, computed: { @@ -120,6 +118,22 @@ set(isrs) { this.$store.dispatch("gauges/selectedGaugeISRS", isrs); } + }, + dateFrom: { + get() { + return this.$store.state.gauges.dateFrom; + }, + set(date) { + this.$store.commit("gauges/dateFrom", date); + } + }, + dateTo: { + get() { + return this.$store.state.gauges.dateTo; + }, + set(date) { + this.$store.commit("gauges/dateTo", date); + } } }, watch: { @@ -174,10 +188,7 @@ this.loading = true; this.$store.commit("application/showSplitscreen", true); this.$store - .dispatch("gauges/loadWaterlevels", { - from: this.dateFrom, - to: this.toDate - }) + .dispatch("gauges/loadWaterlevels") .catch(error => { const { status, data } = error.response; displayError({ @@ -199,7 +210,6 @@ } }, mounted() { - this.dateFrom.setDate(this.dateFrom.getDate() - 30); this.$store.dispatch("gauges/loadGauges"); } };
--- a/client/src/components/gauge/Waterlevel.vue Mon Mar 18 16:54:33 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Mon Mar 18 17:01:47 2019 +0100 @@ -101,7 +101,7 @@ export default { computed: { - ...mapState("gauges", ["waterlevels"]), + ...mapState("gauges", ["waterlevels", "dateFrom", "dateTo"]), ...mapGetters("gauges", ["selectedGauge"]) }, watch: { @@ -160,7 +160,8 @@ d => d.waterlevel ); // setting the min and max values for the diagram axes - x.domain(d3.extent(this.waterlevels, d => d.date)); + let dateTo = new Date(this.dateTo.getTime() + 86400); + x.domain(d3.extent([this.dateFrom, dateTo])); y.domain(WaterlevelMinMax); x2.domain(x.domain()); y2.domain(y.domain()); @@ -253,13 +254,12 @@ .attr("width", width) .attr("height", y(refWaterLevels.LDC) - y(refWaterLevels.HDC)); - let lastDate = this.waterlevels[this.waterlevels.length - 1].date; // HDC mainChart .append("path") .datum([ { x: 0, y: refWaterLevels.HDC }, - { x: lastDate, y: refWaterLevels.HDC } + { x: dateTo, y: refWaterLevels.HDC } ]) .attr("class", "hdc-line") .attr("d", refWaterlevelLine); @@ -267,14 +267,14 @@ .append("text") .text("HDC") .attr("class", "ref-waterlevel-label") - .attr("x", x(lastDate) - 20) + .attr("x", x(dateTo) - 20) .attr("y", y(refWaterLevels.HDC) - 3); // LDC mainChart .append("path") .datum([ { x: 0, y: refWaterLevels.LDC }, - { x: lastDate, y: refWaterLevels.LDC } + { x: dateTo, y: refWaterLevels.LDC } ]) .attr("class", "ldc-line") .attr("d", refWaterlevelLine); @@ -282,14 +282,14 @@ .append("text") .text("LDC") .attr("class", "ref-waterlevel-label") - .attr("x", x(lastDate) - 20) + .attr("x", x(dateTo) - 20) .attr("y", y(refWaterLevels.LDC) - 3); // MW mainChart .append("path") .datum([ { x: 0, y: refWaterLevels.MW }, - { x: lastDate, y: refWaterLevels.MW } + { x: dateTo, y: refWaterLevels.MW } ]) .attr("class", "mw-line") .attr("d", refWaterlevelLine); @@ -297,7 +297,7 @@ .append("text") .text("MW") .attr("class", "ref-waterlevel-label") - .attr("x", x(lastDate) - 20) + .attr("x", x(dateTo) - 20) .attr("y", y(refWaterLevels.MW) - 3); // waterlevel chart
--- a/client/src/store/gauges.js Mon Mar 18 16:54:33 2019 +0100 +++ b/client/src/store/gauges.js Mon Mar 18 17:01:47 2019 +0100 @@ -14,11 +14,16 @@ import { HTTP } from "@/lib/http"; import { WFS } from "ol/format.js"; +let dateFrom = new Date(); +dateFrom.setDate(dateFrom.getDate() - 30); + const init = () => { return { gauges: [], selectedGaugeISRS: null, - waterlevels: [] + waterlevels: [], + dateFrom: dateFrom, + dateTo: new Date() }; }; @@ -42,6 +47,12 @@ }, waterlevels: (state, data) => { state.waterlevels = data; + }, + dateFrom: (state, dateFrom) => { + state.dateFrom = dateFrom; + }, + dateTo: (state, dateTo) => { + state.dateTo = dateTo; } }, actions: { @@ -78,20 +89,17 @@ }); }); }, - loadWaterlevels({ getters, commit }, { from, to }) { - from = from || new Date(); - to = to || new Date(); - + loadWaterlevels({ state, getters, commit }) { // include the last day - to.setDate(to.getDate() + 1); + let dateTo = new Date(state.dateTo.getTime() + 86400); return new Promise((resolve, reject) => { HTTP.get( `/data/waterlevels/${ getters.selectedGauge.properties.isrs_code - }?from=${from + }?from=${state.dateFrom .toISOString() - .substr(0, 23)}&to=${to.toISOString().substr(0, 23)}`, + .substr(0, 23)}&to=${dateTo.toISOString().substr(0, 23)}`, { headers: { "X-Gemma-Auth": localStorage.getItem("token") } }