Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 3146:b6cc4838d2c0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: implemented pane mechanic for diagrams regressions: diagrams are currently not collapsible anymore, animations were removed
author Markus Kottlaender <markus@intevation.de>
date Fri, 03 May 2019 10:33:51 +0200
parents 8fdbc524e7b5
children 25c0cbfcc515
comparison
equal deleted inserted replaced
3145:d33a5c1522dc 3146:b6cc4838d2c0
1 <template> 1 <template>
2 <div class="d-flex flex-fill"> 2 <div class="d-flex flex-column flex-fill">
3 <DiagramLegend> 3 <UIBoxHeader
4 <div class="legend"> 4 icon="ruler-vertical"
5 <span style="background-color: steelblue"></span> Waterlevel 5 :title="title"
6 </div> 6 :closeCallback="close"
7 <div class="legend"> 7 class="rounded-0"
8 <span 8 />
9 style="width: 4px; height: 4px; background-color: rgba(70, 130, 180, 0.6); border: solid 4px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;" 9 <div class="d-flex flex-fill">
10 ></span> 10 <DiagramLegend>
11 Prediction 11 <div class="legend">
12 </div> 12 <span style="background-color: steelblue"></span> Waterlevel
13 <div class="legend"> 13 </div>
14 <span style="background-color: rgba(0, 255, 0, 0.1)"></span> Navigable 14 <div class="legend">
15 Range 15 <span
16 </div> 16 style="width: 4px; height: 4px; background-color: rgba(70, 130, 180, 0.6); border: solid 4px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;"
17 <div> 17 ></span>
18 <select 18 Prediction
19 @change="applyChange" 19 </div>
20 v-model="form.template" 20 <div class="legend">
21 class="form-control d-block custom-select-sm w-100" 21 <span style="background-color: rgba(0, 255, 0, 0.1)"></span> Navigable
22 > 22 Range
23 <option 23 </div>
24 v-for="template in templates" 24 <div>
25 :value="template" 25 <select
26 :key="template.name" 26 @change="applyChange"
27 v-model="form.template"
28 class="form-control d-block custom-select-sm w-100"
27 > 29 >
28 {{ template.name }} 30 <option
29 </option> 31 v-for="template in templates"
30 </select> 32 :value="template"
31 <button 33 :key="template.name"
32 @click="downloadPDF" 34 >
33 type="button" 35 {{ template.name }}
34 class="btn btn-sm btn-info d-block w-100 mt-2" 36 </option>
35 > 37 </select>
36 <translate>Export to PDF</translate> 38 <button
37 </button> 39 @click="downloadPDF"
38 </div> 40 type="button"
39 </DiagramLegend> 41 class="btn btn-sm btn-info d-block w-100 mt-2"
40 <div 42 >
41 ref="diagramContainer" 43 <translate>Export to PDF</translate>
42 class="d-flex flex-fill justify-content-center align-items-center diagram-container" 44 </button>
43 > 45 </div>
44 <div v-if="!waterlevels.length"> 46 </DiagramLegend>
45 <translate>No data available.</translate> 47 <div
48 class="d-flex flex-fill justify-content-center align-items-center"
49 :id="containerId"
50 >
51 <div v-if="!waterlevels.length">
52 <translate>No data available.</translate>
53 </div>
46 </div> 54 </div>
47 </div> 55 </div>
48 </div> 56 </div>
49 </template> 57 </template>
50 58
84 components: { 92 components: {
85 DiagramLegend: () => import("@/components/DiagramLegend") 93 DiagramLegend: () => import("@/components/DiagramLegend")
86 }, 94 },
87 data() { 95 data() {
88 return { 96 return {
97 containerId: "waterlevel-diagram-container",
89 svg: null, 98 svg: null,
90 diagram: null, 99 diagram: null,
91 navigation: null, 100 navigation: null,
92 dimensions: null, 101 dimensions: null,
93 extent: null, 102 extent: null,
136 }, 145 },
137 templateData: null 146 templateData: null
138 }; 147 };
139 }, 148 },
140 computed: { 149 computed: {
150 ...mapState("application", ["paneSetup"]),
141 ...mapState("gauges", ["dateFrom", "waterlevels", "nashSutcliffe"]), 151 ...mapState("gauges", ["dateFrom", "waterlevels", "nashSutcliffe"]),
142 ...mapGetters("gauges", ["selectedGauge"]), 152 ...mapGetters("gauges", ["selectedGauge"]),
143 ...mapState("user", ["user"]), 153 ...mapState("user", ["user"]),
154 title() {
155 return this.$gettext("Waterlevel");
156 },
144 dateFrom: { 157 dateFrom: {
145 get() { 158 get() {
146 return this.$store.state.gauges.dateFrom; 159 return this.$store.state.gauges.dateFrom;
147 } 160 }
148 }, 161 },
151 return this.$store.state.gauges.dateTo; 164 return this.$store.state.gauges.dateTo;
152 } 165 }
153 } 166 }
154 }, 167 },
155 watch: { 168 watch: {
169 paneSetup() {
170 this.$nextTick(() => this.drawDiagram());
171 },
156 waterlevels() { 172 waterlevels() {
157 this.drawDiagram(); 173 this.drawDiagram();
158 } 174 }
159 }, 175 },
160 methods: { 176 methods: {
177 close() {
178 this.$store.commit(
179 "application/paneSetup",
180 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
181 ? "GAUGE_HYDROLOGICALCONDITIONS"
182 : "DEFAULT"
183 );
184 },
161 downloadPDF() { 185 downloadPDF() {
162 var svg = this.$refs.diagramContainer.innerHTML; 186 var svg = document.getElementById(this.containerId).innerHTML;
163 if (svg) { 187 if (svg) {
164 svg = svg.replace(/\r?\n|\r/g, "").trim(); 188 svg = svg.replace(/\r?\n|\r/g, "").trim();
165 } 189 }
166 this.pdf.doc = new jsPDF("l", "mm", this.form.paperSize); 190 this.pdf.doc = new jsPDF("l", "mm", this.form.paperSize);
167 var canvas = document.createElement("canvas"); 191 var canvas = document.createElement("canvas");
343 this.pdf.doc.circle(x, y + 5, 0.6, "FD"); 367 this.pdf.doc.circle(x, y + 5, 0.6, "FD");
344 this.pdf.doc.text(x + 3, y + 6, "Prediction"); 368 this.pdf.doc.text(x + 3, y + 6, "Prediction");
345 }, 369 },
346 drawDiagram() { 370 drawDiagram() {
347 // remove old diagram and exit if necessary data is missing 371 // remove old diagram and exit if necessary data is missing
348 d3.select(".diagram-container svg").remove(); 372 d3.select("#" + this.containerId + " svg").remove();
349 if (!this.selectedGauge || !this.waterlevels.length) return; 373 if (!this.selectedGauge || !this.waterlevels.length) return;
350 374
351 // PREPARE HELPERS 375 // PREPARE HELPERS
352 376
353 // HDC/LDC/MW for the selected gauge 377 // HDC/LDC/MW for the selected gauge
379 403
380 // DRAW DIAGRAM/NAVIGATION AREAS 404 // DRAW DIAGRAM/NAVIGATION AREAS
381 405
382 // create svg 406 // create svg
383 this.svg = d3 407 this.svg = d3
384 .select(".diagram-container") 408 .select("#" + this.containerId)
385 .append("svg") 409 .append("svg")
386 .attr("width", "100%") 410 .attr("width", "100%")
387 .attr("height", "100%"); 411 .attr("height", "100%");
388 412
389 // create container for main diagram 413 // create container for main diagram
562 .attr("fill", "666") 586 .attr("fill", "666")
563 .style("font-size", "0.8em"); 587 .style("font-size", "0.8em");
564 }, 588 },
565 getDimensions() { 589 getDimensions() {
566 // dimensions and margins 590 // dimensions and margins
567 const svgWidth = document.querySelector(".diagram-container").clientWidth; 591 const svgWidth = document.querySelector("#" + this.containerId)
568 const svgHeight = document.querySelector(".diagram-container") 592 .clientWidth;
593 const svgHeight = document.querySelector("#" + this.containerId)
569 .clientHeight; 594 .clientHeight;
570 const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 }; 595 const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 };
571 const navMargin = { 596 const navMargin = {
572 top: svgHeight - mainMargin.top - 65, 597 top: svgHeight - mainMargin.top - 65,
573 right: 20, 598 right: 20,