Mercurial > gemma
changeset 3403:d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 23 May 2019 12:42:26 +0200 |
parents | c04b1409a596 |
children | 0c9467003d14 |
files | client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue client/src/store/gauges.js |
diffstat | 3 files changed, 67 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Thu May 23 12:27:14 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Thu May 23 12:42:26 2019 +0200 @@ -60,6 +60,13 @@ <translate>Export to PDF</translate> </button> </div> + <a + class="btn btn-sm btn-info d-block w-100 mt-2" + :href="csvLink" + :download="csvFileName" + > + <translate>Export as CSV</translate> + </a> </DiagramLegend> <div class="d-flex flex-fill justify-content-center align-items-center" @@ -172,6 +179,36 @@ return `${this.selectedGauge.properties.objname}: ${this.$gettext( "Hydrological Conditions" )} (${this.longtermInterval.join(" - ")})`; + }, + csvLink() { + return "data:text/csv;charset=utf-8," + encodeURIComponent(this.csvData); + }, + csvFileName() { + return `${this.$gettext("hydrological-conditions")}-${ + this.selectedGauge.properties.objname + }-${this.longtermInterval.join(" - ")}.csv`; + }, + csvData() { + // We cannot directly use the csv data provided by the backend because the + // diagram uses data from two endpoints, longterm- and yearWaterlevels. + // So we need to merge them here to have them in one csv export. + let merged = this.longtermWaterlevels + .filter(d => d) // copy array, don't mutate original + .map(d => { + let yearData = this.yearWaterlevels.find(y => { + return d.date.getTime() === y.date.getTime(); + }); + d[this.yearCompare] = yearData ? yearData.mean : ""; + return `${d.date.getMonth() + 1}-${d.date.getDate()};${d.min};${ + d.max + };${d.mean};${d.median};${d.q25};${d.q75};${d[this.yearCompare]}`; + }) + .join("\n"); + return `#Interval: ${this.longtermInterval.join( + " - " + )}\n#date;#min;#max;#mean;#median;#q25;#q75;#${ + this.yearCompare + }\n${merged}`; } }, watch: {
--- a/client/src/components/gauge/Waterlevel.vue Thu May 23 12:27:14 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Thu May 23 12:42:26 2019 +0200 @@ -47,6 +47,13 @@ > <translate>Export to PDF</translate> </button> + <a + class="btn btn-sm btn-info d-block w-100 mt-2" + :href="csvLink" + :download="csvFileName" + > + <translate>Export as CSV</translate> + </a> </div> </DiagramLegend> <div @@ -162,7 +169,12 @@ }, computed: { ...mapState("application", ["paneSetup"]), - ...mapState("gauges", ["dateFrom", "waterlevels", "nashSutcliffe"]), + ...mapState("gauges", [ + "dateFrom", + "waterlevels", + "waterlevelsCSV", + "nashSutcliffe" + ]), ...mapGetters("gauges", ["selectedGauge"]), ...mapState("user", ["user"]), title() { @@ -179,6 +191,18 @@ get() { return this.$store.state.gauges.dateTo; } + }, + csvLink() { + return ( + "data:text/csv;charset=utf-8," + encodeURIComponent(this.waterlevelsCSV) + ); + }, + csvFileName() { + return `${this.$gettext("waterlevels")}-${ + this.selectedGauge.properties.objname + }-${this.dateFrom.toISOString().split("T")[0]}-${ + this.dateTo.toISOString().split("T")[0] + }.csv`; } }, watch: {
--- a/client/src/store/gauges.js Thu May 23 12:27:14 2019 +0200 +++ b/client/src/store/gauges.js Thu May 23 12:42:26 2019 +0200 @@ -25,6 +25,7 @@ gauges: [], selectedGaugeISRS: null, waterlevels: [], + waterlevelsCSV: "", longtermWaterlevels: [], longtermInterval: [], yearWaterlevels: [], @@ -56,6 +57,9 @@ waterlevels: (state, data) => { state.waterlevels = data; }, + waterlevelsCSV: (state, data) => { + state.waterlevelsCSV = data; + }, longtermWaterlevels: (state, data) => { state.longtermWaterlevels = data; }, @@ -133,6 +137,7 @@ } ) .then(response => { + commit("waterlevelsCSV", response.data); let data = response.data .split("\n") // remove empty rows and rows starting with #