Mercurial > gemma

annotate client/src/components/fairway/AvailableFairwayDepth.vue @ 3180:429e28295902

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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
Thomas Junk <thomas.junk@intevation.de>
parents: 3134
diff changeset
27 </div>
Thomas Junk <thomas.junk@intevation.de>
parents: 3134
diff changeset
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
Thomas Junk <thomas.junk@intevation.de>
parents: 3134
diff changeset
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
Thomas Junk <thomas.junk@intevation.de>
parents: 3134
diff changeset
69 fwData: null,
Thomas Junk <thomas.junk@intevation.de>
parents: 3134
diff changeset
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
Thomas Junk <thomas.junk@intevation.de>
parents: 3134
diff changeset
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
Thomas Junk <thomas.junk@intevation.de>
parents: 3134
diff changeset
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
Thomas Junk <thomas.junk@intevation.de>
parents: 3134
diff changeset
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
Thomas Junk <thomas.junk@intevation.de>
parents: 3134
diff changeset
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>