Mercurial > gemma
annotate client/src/components/fairway/AvailableFairwayDepth.vue @ 3180:429e28295902
available_fairway_depth: implement reactivity
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 07 May 2019 14:06:23 +0200 |
parents | 8159bd2aaf93 |
children | 1ba2a7d22fbb |
rev | line source |
---|---|
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
2 <div> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
3 <h1>Available Fairway Depth</h1> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
4 <UISpinnerOverlay v-if="loading" /> |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
5 <div class="d-flex flex-row"> |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
6 <div class="d-flex flex-column mr-auto"> |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
7 <div class="d-flex flex-row"> |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
8 <div class="mr-3 my-auto ml-auto"> |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
9 <select class="form-control mr-3"> |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
10 <option>Monthly</option> |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
11 <option>Quaterly</option> |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
12 <option>Yearly</option> |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
13 </select> |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
14 </div> |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
15 <div class="d-flex flex-row mr-3"> |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
16 <label for="from" class="my-auto mr-3" |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
17 ><translate>from</translate></label |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
18 ><input class="form-control" type="date" /> |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
19 </div> |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
20 <div class="d-flex flex-row mr-auto"> |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
21 <label for="to" class="my-auto mr-3" |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
22 ><translate>to</translate></label |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
23 ><input class="form-control" type="date" /> |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
24 </div> |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
25 </div> |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
26 <div :id="containerId" class="diagram-container"></div> |
3135 | 27 </div> |
28 </div> | |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
29 </div> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
30 </template> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
31 |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
32 <style></style> |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
33 |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
34 <script> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
35 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
36 * without warranty, see README.md and license for details. |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
37 * |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
38 * SPDX-License-Identifier: AGPL-3.0-or-later |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
39 * License-Filename: LICENSES/AGPL-3.0.txt |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
40 * |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
41 * Copyright (C) 2018 by via donau |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
42 * – Österreichische Wasserstraßen-Gesellschaft mbH |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
43 * Software engineering by Intevation GmbH |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
44 * |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
45 * Author(s): |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
46 * Thomas Junk <thomas.junk@intevation.de> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
47 * Markus Kottländer <markus.kottlaender@intevation.de> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
48 */ |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
49 import * as d3 from "d3"; |
3135 | 50 import app from "@/main"; |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
51 import { displayError } from "@/lib/errors"; |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
52 import debounce from "debounce"; |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
53 import { HTTP } from "@/lib/http"; |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
54 import { diagram } from "@/lib/mixins"; |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
55 |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
56 const MOCKDATA = `#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h] |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
57 01-2019, 22.000,1.000, 4.000,6.000, 20.000 |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
58 02-2019, 24.000,0.000,0.000,0.000, 23.000 |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
59 03-2019, 30.000,0.000,0.000,0.000, 30.000 |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
60 04-2019, 30.000,0.000,0.000,0.000, 30.000 |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
61 05-2019, 30.000,0.000,0.000,0.000, 30.000`; |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
62 |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
63 export default { |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
64 mixins: [diagram], |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
65 data() { |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
66 return { |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
67 containerId: "availablefairwaydepth", |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
68 loading: false, |
3135 | 69 fwData: null, |
70 width: 1000, | |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
71 height: 600, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
72 paddingRight: 100, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
73 spaceBetween: 80, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
74 labelPaddingTop: 15, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
75 scalePaddingLeft: 50, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
76 paddingTop: 10, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
77 legend: "", |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
78 diagram: null, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
79 yScale: null, |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
80 barsWidth: 60, |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
81 dimensions: null |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
82 }; |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
83 }, |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
84 created() { |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
85 window.addEventListener("resize", debounce(this.drawDiagram), 100); |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
86 }, |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
87 mounted() { |
3135 | 88 this.loadData(); |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
89 }, |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
90 computed: { |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
91 availability() { |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
92 return this.plainAvailability; |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
93 } |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
94 }, |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
95 methods: { |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
96 prepareLegend(header) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
97 const headerEntries = header.split(","); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
98 headerEntries.shift(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
99 return headerEntries.map(x => { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
100 return x.split("#")[1].trim(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
101 }); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
102 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
103 prepare(data) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
104 const csv = data.split("\n"); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
105 this.legend = this.prepareLegend(csv.shift()); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
106 let transformed = csv.map(e => { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
107 const result = e.split(","); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
108 const label = result.shift(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
109 const ldc = result.shift(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
110 const highestLevel = result.pop(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
111 return { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
112 label: label, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
113 ldc: ldc, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
114 highestLevel: highestLevel, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
115 lowerLevels: result |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
116 }; |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
117 }); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
118 this.fwData = transformed; |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
119 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
120 loadData() { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
121 const URL = |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
122 "/data/bottleneck/fairway-depth/Furt%20Wendeplatz%20Theben?from=2019-01-01T15:04:05%2b00:00&to=2019-05-02T15:04:05%2b07:00&mode=monthly"; |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
123 HTTP.get(URL, { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
124 headers: { "X-Gemma-Auth": localStorage.getItem("token") } |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
125 }) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
126 .then(() => { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
127 // const { data } = response; |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
128 this.prepare(MOCKDATA); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
129 this.drawDiagram(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
130 }) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
131 .catch(error => { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
132 console.log(error); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
133 const { status, data } = error.response; |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
134 displayError({ |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
135 title: this.$gettext("Backend Error"), |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
136 message: `${status}: ${data.message || data}` |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
137 }); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
138 }); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
139 }, |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
140 drawDiagram() { |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
141 this.dimensions = this.getDimensions(); |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
142 this.yScale = d3 |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
143 .scaleLinear() |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
144 .domain([-33, 33]) |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
145 .range([this.dimensions.mainHeight - 30, 0]); |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
146 d3.select(".diagram-container svg").remove(); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
147 this.generateDiagramContainer(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
148 this.drawBars(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
149 this.drawScaleLabel(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
150 this.drawScale(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
151 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
152 generateDiagramContainer() { |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
153 const diagram = d3 |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
154 .select(".diagram-container") |
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
155 .append("svg") |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
156 .attr("width", this.dimensions.width) |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
157 .attr("height", this.dimensions.mainHeight); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
158 this.diagram = diagram |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
159 .append("g") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
160 .attr("transform", `translate(0 ${this.paddingTop})`); |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
161 }, |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
162 drawBars() { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
163 const everyBar = this.diagram |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
164 .selectAll("g") |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
165 .data(this.fwData) |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
166 .enter() |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
167 .append("g") |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
168 .attr("transform", (d, i) => { |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
169 const dx = this.paddingRight + i * this.spaceBetween; |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
170 return `translate(${dx})`; |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
171 }); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
172 this.drawSingleBars(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
173 this.drawLabelPerBar(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
174 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
175 drawSingleBars(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
176 this.drawLDC(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
177 this.drawHighestLevel(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
178 this.drawLowerLevels(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
179 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
180 drawLowerLevels(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
181 everyBar |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
182 .selectAll("g") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
183 .data(d => d.lowerLevels.reverse()) |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
184 .enter() |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
185 .append("rect") |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
186 .attr("y", this.yScale(0)) |
3128
1610d3042bbb
fairway_availability: generative code fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
3125
diff
changeset
|
187 .attr("height", d => { |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
188 return this.yScale(0) - this.yScale(d); |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
189 }) |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
190 .attr("width", this.barsWidth) |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
191 .attr("fill", (d, i) => { |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
192 return this.$options.COLORS.REST[i]; |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
193 }); |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
194 }, |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
195 fnheight(name) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
196 return d => this.yScale(0) - this.yScale(d[name]); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
197 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
198 drawLDC(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
199 const height = this.fnheight("ldc"); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
200 everyBar |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
201 .append("rect") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
202 .attr("y", this.yScale(0)) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
203 .attr("height", height) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
204 .attr("width", this.barsWidth) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
205 .attr("transform", d => `translate(0 ${-1 * height(d)})`) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
206 .attr("fill", this.$options.COLORS.LDC); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
207 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
208 drawHighestLevel(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
209 const height = this.fnheight("highestLevel"); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
210 everyBar |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
211 .append("rect") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
212 .attr("y", this.yScale(0)) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
213 .attr("height", height) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
214 .attr("width", this.barsWidth) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
215 .attr("transform", d => `translate(0 ${-1 * height(d)})`) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
216 .attr("fill", this.$options.COLORS.HIGHEST); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
217 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
218 drawLabelPerBar(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
219 everyBar |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
220 .append("text") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
221 .text(d => d.label) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
222 .attr("y", this.yScale(0) + this.labelPaddingTop); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
223 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
224 drawScaleLabel() { |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
225 const center = this.dimensions.mainHeight / 2; |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
226 this.diagram |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
227 .append("text") |
3135 | 228 .text(this.$options.LEGEND) |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
229 .attr("text-anchor", "middle") |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
230 .attr("x", 0) |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
231 .attr("y", 0) |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
232 .attr("dy", "1em") |
3135 | 233 .attr("transform", `translate(0, ${center}), rotate(-90)`); |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
234 }, |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
235 drawScale() { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
236 const yAxis = d3.axisLeft().scale(this.yScale); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
237 this.diagram |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
238 .append("g") |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
239 .attr("transform", `translate(${this.scalePaddingLeft})`) |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
240 .call(yAxis); |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
241 } |
3135 | 242 }, |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
243 LEGEND: app.$gettext("sum of days / Summe der Tage"), |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
244 COLORS: { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
245 LDC: "#59C6FF", |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
246 HIGHEST: "#2D84B3", |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
247 REST: ["#FF424F", "#FF737C", "#FF99A0"] |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
248 } |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
249 }; |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
250 </script> |