Mercurial > gemma

comparison client/src/components/gauge/HydrologicalConditions.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 136b86794453
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: red"></span> 5 :title="title"
6 {{ yearCompare }} 6 :closeCallback="close"
7 </div> 7 class="rounded-0"
8 <div class="legend"> 8 />
9 <span style="background-color: orange"></span> Q25% 9 <div class="d-flex flex-fill">
10 </div> 10 <DiagramLegend>
11 <div class="legend"> 11 <div class="legend">
12 <span style="background-color: black"></span> Median 12 <span style="background-color: red"></span>
13 </div> 13 {{ yearCompare }}
14 <div class="legend"> 14 </div>
15 <span style="background-color: purple"></span> Q75% 15 <div class="legend">
16 </div> 16 <span style="background-color: orange"></span> Q25%
17 <div class="legend"> 17 </div>
18 <span style="background-color: lightsteelblue"></span> 18 <div class="legend">
19 Long-term Amplitude 19 <span style="background-color: black"></span> Median
20 </div> 20 </div>
21 <div> 21 <div class="legend">
22 <button 22 <span style="background-color: purple"></span> Q75%
23 @click="downloadPDF" 23 </div>
24 type="button" 24 <div class="legend">
25 class="btn btn-sm btn-info d-block w-100 mt-2" 25 <span style="background-color: lightsteelblue"></span>
26 > 26 Long-term Amplitude
27 <translate>Export to PDF</translate> 27 </div>
28 </button> 28 <div>
29 </div> 29 <button
30 </DiagramLegend> 30 @click="downloadPDF"
31 <div 31 type="button"
32 class="d-flex flex-fill justify-content-center align-items-center diagram-container" 32 class="btn btn-sm btn-info d-block w-100 mt-2"
33 > 33 >
34 <div v-if="!longtermWaterlevels.length"> 34 <translate>Export to PDF</translate>
35 <translate>No data available.</translate> 35 </button>
36 </div>
37 </DiagramLegend>
38 <div
39 class="d-flex flex-fill justify-content-center align-items-center"
40 :id="containerId"
41 >
42 <div v-if="!longtermWaterlevels.length">
43 <translate>No data available.</translate>
44 </div>
36 </div> 45 </div>
37 </div> 46 </div>
38 </div> 47 </div>
39 </template> 48 </template>
40 49
65 components: { 74 components: {
66 DiagramLegend: () => import("@/components/DiagramLegend") 75 DiagramLegend: () => import("@/components/DiagramLegend")
67 }, 76 },
68 data() { 77 data() {
69 return { 78 return {
79 containerId: "hydrologicalconditions-diagram-container",
70 svg: null, 80 svg: null,
71 diagram: null, 81 diagram: null,
72 navigation: null, 82 navigation: null,
73 dimensions: null, 83 dimensions: null,
74 extent: null, 84 extent: null,
75 scale: null, 85 scale: null,
76 axes: null 86 axes: null
77 }; 87 };
78 }, 88 },
79 computed: { 89 computed: {
90 ...mapState("application", ["paneSetup"]),
80 ...mapState("gauges", [ 91 ...mapState("gauges", [
81 "longtermWaterlevels", 92 "longtermWaterlevels",
82 "yearWaterlevels", 93 "yearWaterlevels",
83 "yearCompare", 94 "yearCompare",
84 "longtermInterval" 95 "longtermInterval"
85 ]), 96 ]),
86 ...mapGetters("gauges", ["selectedGauge"]) 97 ...mapGetters("gauges", ["selectedGauge"]),
98 title() {
99 return this.$gettext("Hydrological Conditions");
100 }
87 }, 101 },
88 watch: { 102 watch: {
103 paneSetup() {
104 this.$nextTick(() => this.drawDiagram());
105 },
89 longtermWaterlevels() { 106 longtermWaterlevels() {
90 this.drawDiagram(); 107 this.drawDiagram();
91 }, 108 },
92 yearWaterlevels() { 109 yearWaterlevels() {
93 this.drawDiagram(); 110 this.drawDiagram();
94 } 111 }
95 }, 112 },
96 methods: { 113 methods: {
114 close() {
115 this.$store.commit(
116 "application/paneSetup",
117 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
118 ? "GAUGE_WATERLEVEL"
119 : "DEFAULT"
120 );
121 },
97 downloadPDF() { 122 downloadPDF() {
98 var svg = this.svg._groups[0][0].outerHTML; 123 var svg = document.getElementById(this.containerId).innerHTML;
99 if (svg) { 124 if (svg) {
100 svg = svg.replace(/\r?\n|\r/g, "").trim(); 125 svg = svg.replace(/\r?\n|\r/g, "").trim();
101 } 126 }
102 var pdf = new jsPDF("l", "mm", "a3"); 127 var pdf = new jsPDF("l", "mm", "a3");
103 var canvas = document.createElement("canvas"); 128 var canvas = document.createElement("canvas");
154 pdf.circle(x, y + 20, 2, "FD"); 179 pdf.circle(x, y + 20, 2, "FD");
155 pdf.text(x + 3, y + 21, "Long-term Amplitude"); 180 pdf.text(x + 3, y + 21, "Long-term Amplitude");
156 }, 181 },
157 drawDiagram() { 182 drawDiagram() {
158 // remove old diagram 183 // remove old diagram
159 d3.select(".diagram-container svg").remove(); 184 d3.select("#" + this.containerId + " svg").remove();
160 if (!this.selectedGauge || !this.longtermWaterlevels.length) return; 185 if (!this.selectedGauge || !this.longtermWaterlevels.length) return;
161
162 // PREPARE HELPERS 186 // PREPARE HELPERS
163 187
164 // HDC/LDC/MW for the selected gauge 188 // HDC/LDC/MW for the selected gauge
165 const refWaterLevels = JSON.parse( 189 const refWaterLevels = JSON.parse(
166 this.selectedGauge.properties.reference_water_levels 190 this.selectedGauge.properties.reference_water_levels
180 204
181 // DRAW DIAGRAM/NAVIGATION AREAS 205 // DRAW DIAGRAM/NAVIGATION AREAS
182 206
183 // create svg 207 // create svg
184 this.svg = d3 208 this.svg = d3
185 .select(".diagram-container") 209 .select("#" + this.containerId)
186 .append("svg") 210 .append("svg")
187 .attr("width", "100%") 211 .attr("width", "100%")
188 .attr("height", "100%"); 212 .attr("height", "100%");
189 213
190 // create container for main diagram 214 // create container for main diagram
336 .attr("fill", "666") 360 .attr("fill", "666")
337 .style("font-size", "0.8em"); 361 .style("font-size", "0.8em");
338 }, 362 },
339 getDimensions() { 363 getDimensions() {
340 // dimensions and margins 364 // dimensions and margins
341 const svgWidth = document.querySelector(".diagram-container").clientWidth; 365 const svgWidth = document.querySelector("#" + this.containerId)
342 const svgHeight = document.querySelector(".diagram-container") 366 .clientWidth;
367 const svgHeight = document.querySelector("#" + this.containerId)
343 .clientHeight; 368 .clientHeight;
344 const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 }; 369 const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 };
345 const navMargin = { 370 const navMargin = {
346 top: svgHeight - mainMargin.top - 65, 371 top: svgHeight - mainMargin.top - 65,
347 right: 20, 372 right: 20,