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