Mercurial > gemma
comparison client/src/components/gauge/HydrologicalConditions.vue @ 3403:d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 23 May 2019 12:42:26 +0200 |
parents | 8da2f7b9a04b |
children | 0c9467003d14 |
comparison
equal
deleted
inserted
replaced
3402:c04b1409a596 | 3403:d7cc5cda82a9 |
---|---|
58 class="btn btn-sm btn-info d-block w-100 mt-2" | 58 class="btn btn-sm btn-info d-block w-100 mt-2" |
59 > | 59 > |
60 <translate>Export to PDF</translate> | 60 <translate>Export to PDF</translate> |
61 </button> | 61 </button> |
62 </div> | 62 </div> |
63 <a | |
64 class="btn btn-sm btn-info d-block w-100 mt-2" | |
65 :href="csvLink" | |
66 :download="csvFileName" | |
67 > | |
68 <translate>Export as CSV</translate> | |
69 </a> | |
63 </DiagramLegend> | 70 </DiagramLegend> |
64 <div | 71 <div |
65 class="d-flex flex-fill justify-content-center align-items-center" | 72 class="d-flex flex-fill justify-content-center align-items-center" |
66 :id="containerId" | 73 :id="containerId" |
67 > | 74 > |
170 ...mapGetters("gauges", ["selectedGauge"]), | 177 ...mapGetters("gauges", ["selectedGauge"]), |
171 title() { | 178 title() { |
172 return `${this.selectedGauge.properties.objname}: ${this.$gettext( | 179 return `${this.selectedGauge.properties.objname}: ${this.$gettext( |
173 "Hydrological Conditions" | 180 "Hydrological Conditions" |
174 )} (${this.longtermInterval.join(" - ")})`; | 181 )} (${this.longtermInterval.join(" - ")})`; |
182 }, | |
183 csvLink() { | |
184 return "data:text/csv;charset=utf-8," + encodeURIComponent(this.csvData); | |
185 }, | |
186 csvFileName() { | |
187 return `${this.$gettext("hydrological-conditions")}-${ | |
188 this.selectedGauge.properties.objname | |
189 }-${this.longtermInterval.join(" - ")}.csv`; | |
190 }, | |
191 csvData() { | |
192 // We cannot directly use the csv data provided by the backend because the | |
193 // diagram uses data from two endpoints, longterm- and yearWaterlevels. | |
194 // So we need to merge them here to have them in one csv export. | |
195 let merged = this.longtermWaterlevels | |
196 .filter(d => d) // copy array, don't mutate original | |
197 .map(d => { | |
198 let yearData = this.yearWaterlevels.find(y => { | |
199 return d.date.getTime() === y.date.getTime(); | |
200 }); | |
201 d[this.yearCompare] = yearData ? yearData.mean : ""; | |
202 return `${d.date.getMonth() + 1}-${d.date.getDate()};${d.min};${ | |
203 d.max | |
204 };${d.mean};${d.median};${d.q25};${d.q75};${d[this.yearCompare]}`; | |
205 }) | |
206 .join("\n"); | |
207 return `#Interval: ${this.longtermInterval.join( | |
208 " - " | |
209 )}\n#date;#min;#max;#mean;#median;#q25;#q75;#${ | |
210 this.yearCompare | |
211 }\n${merged}`; | |
175 } | 212 } |
176 }, | 213 }, |
177 watch: { | 214 watch: { |
178 paneSetup() { | 215 paneSetup() { |
179 this.$nextTick(() => this.drawDiagram()); | 216 this.$nextTick(() => this.drawDiagram()); |