Mercurial > gemma

comparison client/src/components/gauge/HydrologicalConditions.vue @ 3403:d7cc5cda82a9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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());