Mercurial > gemma
annotate client/src/components/fairway/AvailableFairwayDepth.vue @ 3244:b27759d0cdff
Log file and linenumber
author | Tom Gottfried <tom@intevation.de> |
---|---|
date | Fri, 10 May 2019 17:58:49 +0200 |
parents | a7d44d1ae57d |
children | b07b4cca5e34 |
rev | line source |
---|---|
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
3184
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
2 <div class="d-flex flex-column flex-fill"> |
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
3 <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" /> |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
4 <UISpinnerOverlay v-if="loading" /> |
3185
505414dfe3e7
available_fairway_depth: move statistic dialog to store
Thomas Junk <thomas.junk@intevation.de>
parents:
3184
diff
changeset
|
5 <div class="mt-3 d-flex flex-row my-auto"> |
3239
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
6 <div class="my-auto mx-auto"> |
3216
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
7 <ul class="list-group"> |
3239
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
8 <li |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
9 :style="legendStyle(index)" |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
10 class="text-left list-group-item" |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
11 v-for="(entry, index) in legend" |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
12 :key="index" |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
13 > |
3216
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
14 {{ entry }} |
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
15 </li> |
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
16 </ul> |
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
17 </div> |
3239
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
18 <div :id="containerId" class="mx-auto my-auto diagram-container"></div> |
3135 | 19 </div> |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
20 </div> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
21 </template> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
22 |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
23 <style></style> |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
24 |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
25 <script> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
26 /* 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
|
27 * 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
|
28 * |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
29 * 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
|
30 * License-Filename: LICENSES/AGPL-3.0.txt |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
31 * |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
32 * Copyright (C) 2018 by via donau |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
33 * – Österreichische Wasserstraßen-Gesellschaft mbH |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
34 * Software engineering by Intevation GmbH |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
35 * |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
36 * Author(s): |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
37 * Thomas Junk <thomas.junk@intevation.de> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
38 * Markus Kottländer <markus.kottlaender@intevation.de> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
39 */ |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
40 import * as d3 from "d3"; |
3135 | 41 import app from "@/main"; |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
42 import debounce from "debounce"; |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
43 import { diagram } from "@/lib/mixins"; |
3184
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
44 import { mapState } from "vuex"; |
3191
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
45 import filters from "@/lib/filters.js"; |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
46 |
3213
b3a1ecdda797
available_fairway_depth: hours in days
Thomas Junk <thomas.junk@intevation.de>
parents:
3210
diff
changeset
|
47 const hoursInDays = x => x / 24; |
b3a1ecdda797
available_fairway_depth: hours in days
Thomas Junk <thomas.junk@intevation.de>
parents:
3210
diff
changeset
|
48 |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
49 export default { |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
50 mixins: [diagram], |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
51 data() { |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
52 return { |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
53 containerId: "availablefairwaydepth", |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
54 loading: false, |
3135 | 55 width: 1000, |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
56 height: 600, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
57 paddingRight: 100, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
58 spaceBetween: 80, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
59 labelPaddingTop: 15, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
60 scalePaddingLeft: 50, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
61 paddingTop: 10, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
62 diagram: null, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
63 yScale: null, |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
64 barsWidth: 60, |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
65 dimensions: null |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
66 }; |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
67 }, |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
68 created() { |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
69 window.addEventListener("resize", debounce(this.drawDiagram), 100); |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
70 }, |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
71 mounted() { |
3191
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
72 this.drawDiagram(); |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
73 }, |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
74 computed: { |
3210
66e90b48387a
available_fairway-depth: store refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
3192
diff
changeset
|
75 ...mapState("fairwayavailability", [ |
3191
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
76 "selectedFairwayAvailabilityFeature", |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
77 "fwData", |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
78 "from", |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
79 "to", |
3216
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
80 "frequency", |
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
81 "legend" |
3191
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
82 ]), |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
83 fromDate() { |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
84 return this.from; |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
85 }, |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
86 toDate() { |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
87 return this.to; |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
88 }, |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
89 availability() { |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
90 return this.plainAvailability; |
3184
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
91 }, |
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
92 title() { |
3191
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
93 return `Available Fairway Depth: ${ |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
94 this.featureName |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
95 } (${filters.surveyDate(this.fromDate)} - ${filters.surveyDate( |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
96 this.toDate |
3192
cd076b7a2227
available_fairway_depth: translate frequency
Thomas Junk <thomas.junk@intevation.de>
parents:
3191
diff
changeset
|
97 )}) ${this.$gettext(this.frequency)}`; |
3184
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
98 }, |
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
99 featureName() { |
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
100 return this.selectedFairwayAvailabilityFeature.properties.name; |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
101 } |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
102 }, |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
103 methods: { |
3239
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
104 legendStyle(index) { |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
105 if (index == 0) return `background-color: ${this.$options.COLORS.LDC};`; |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
106 if (index < 4) |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
107 return `background-color: ${this.$options.COLORS.REST[index - 1]};`; |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
108 return `background-color: ${this.$options.COLORS.HIGHEST};`; |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
109 }, |
3184
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
110 close() { |
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
111 this.$store.commit("application/paneSetup", "DEFAULT"); |
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
112 }, |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
113 drawDiagram() { |
3235
0c5a28ffe9ee
available_fairway_depth: flexible layouting options
Thomas Junk <thomas.junk@intevation.de>
parents:
3216
diff
changeset
|
114 this.dimensions = this.getDimensions({ |
0c5a28ffe9ee
available_fairway_depth: flexible layouting options
Thomas Junk <thomas.junk@intevation.de>
parents:
3216
diff
changeset
|
115 main: { top: 20, right: 20, bottom: 110, left: 200 } |
0c5a28ffe9ee
available_fairway_depth: flexible layouting options
Thomas Junk <thomas.junk@intevation.de>
parents:
3216
diff
changeset
|
116 }); |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
117 this.yScale = d3 |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
118 .scaleLinear() |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
119 .domain([-33, 33]) |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
120 .range([this.dimensions.mainHeight - 30, 0]); |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
121 d3.select(".diagram-container svg").remove(); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
122 this.generateDiagramContainer(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
123 this.drawBars(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
124 this.drawScaleLabel(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
125 this.drawScale(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
126 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
127 generateDiagramContainer() { |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
128 const diagram = d3 |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
129 .select(".diagram-container") |
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
130 .append("svg") |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
131 .attr("width", this.dimensions.width) |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
132 .attr("height", this.dimensions.mainHeight); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
133 this.diagram = diagram |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
134 .append("g") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
135 .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
|
136 }, |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
137 drawBars() { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
138 const everyBar = this.diagram |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
139 .selectAll("g") |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
140 .data(this.fwData) |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
141 .enter() |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
142 .append("g") |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
143 .attr("transform", (d, i) => { |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
144 const dx = this.paddingRight + i * this.spaceBetween; |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
145 return `translate(${dx})`; |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
146 }); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
147 this.drawSingleBars(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
148 this.drawLabelPerBar(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
149 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
150 drawSingleBars(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
151 this.drawLDC(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
152 this.drawHighestLevel(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
153 this.drawLowerLevels(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
154 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
155 drawLowerLevels(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
156 everyBar |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
157 .selectAll("g") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
158 .data(d => d.lowerLevels.reverse()) |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
159 .enter() |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
160 .append("rect") |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
161 .attr("y", this.yScale(0)) |
3128
1610d3042bbb
fairway_availability: generative code fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
3125
diff
changeset
|
162 .attr("height", d => { |
3213
b3a1ecdda797
available_fairway_depth: hours in days
Thomas Junk <thomas.junk@intevation.de>
parents:
3210
diff
changeset
|
163 return this.yScale(0) - this.yScale(hoursInDays(d)); |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
164 }) |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
165 .attr("width", this.barsWidth) |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
166 .attr("fill", (d, i) => { |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
167 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
|
168 }); |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
169 }, |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
170 fnheight(name) { |
3213
b3a1ecdda797
available_fairway_depth: hours in days
Thomas Junk <thomas.junk@intevation.de>
parents:
3210
diff
changeset
|
171 return d => this.yScale(0) - this.yScale(hoursInDays(d[name])); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
172 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
173 drawLDC(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
174 const height = this.fnheight("ldc"); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
175 everyBar |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
176 .append("rect") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
177 .attr("y", this.yScale(0)) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
178 .attr("height", height) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
179 .attr("width", this.barsWidth) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
180 .attr("transform", d => `translate(0 ${-1 * height(d)})`) |
3216
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
181 .attr("fill", this.$options.COLORS.LDC) |
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
182 .attr("id", "ldc"); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
183 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
184 drawHighestLevel(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
185 const height = this.fnheight("highestLevel"); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
186 everyBar |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
187 .append("rect") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
188 .attr("y", this.yScale(0)) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
189 .attr("height", height) |
3216
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
190 .attr("width", this.barsWidth - 5) |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
191 .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
|
192 .attr("fill", this.$options.COLORS.HIGHEST); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
193 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
194 drawLabelPerBar(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
195 everyBar |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
196 .append("text") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
197 .text(d => d.label) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
198 .attr("y", this.yScale(0) + this.labelPaddingTop); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
199 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
200 drawScaleLabel() { |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
201 const center = this.dimensions.mainHeight / 2; |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
202 this.diagram |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
203 .append("text") |
3135 | 204 .text(this.$options.LEGEND) |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
205 .attr("text-anchor", "middle") |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
206 .attr("x", 0) |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
207 .attr("y", 0) |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
208 .attr("dy", "1em") |
3135 | 209 .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
|
210 }, |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
211 drawScale() { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
212 const yAxis = d3.axisLeft().scale(this.yScale); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
213 this.diagram |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
214 .append("g") |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
215 .attr("transform", `translate(${this.scalePaddingLeft})`) |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
216 .call(yAxis); |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
217 } |
3135 | 218 }, |
3216
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
219 LEGEND: app.$gettext("Sum of days"), |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
220 COLORS: { |
3216
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
221 LDC: "#FF855E", |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
222 HIGHEST: "#2D84B3", |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
223 REST: ["#FF424F", "#FF737C", "#FF99A0"] |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
224 } |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
225 }; |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
226 </script> |