Mercurial > gemma

annotate client/src/components/fairway/AvailableFairwayDepth.vue @ 3033:c2c1e3e3af1c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Available fairway depth: rudimentary thoughts / prototype. Tbd;
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 12 Apr 2019 13:35:02 +0200
parents
children 383720d8d98e
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" />
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
5 </div>
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
6 </template>
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
7
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
8 <script>
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
9 /* 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
10 * 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
11 *
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
12 * 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
13 * License-Filename: LICENSES/AGPL-3.0.txt
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14 *
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15 * Copyright (C) 2018 by via donau
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 * – Österreichische Wasserstraßen-Gesellschaft mbH
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 * Software engineering by Intevation GmbH
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 *
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 * Author(s):
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 * Thomas Junk <thomas.junk@intevation.de>
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 * Markus Kottländer <markus.kottlaender@intevation.de>
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 */
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 import * as d3 from "d3";
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25 export default {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
26 data() {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
27 return {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
28 plainAvailability: [],
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
29 loading: false
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 },
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 computed: {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 availability() {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
34 return this.plainAvailability;
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 },
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
37 methods: {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
38 /**
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 * aggregates data exceeding certain thresholds
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 *
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
42 * data = [1,2,3,4,5,6,7,8]
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 * treshold = [2,4,6]
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 * structure: treshold: count
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
46 *
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47 * expected result = {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48 * 6: 2,
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
49 * 4: 2
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
50 * 2: 2
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
51 * }
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52 *
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 * 1,2 are dropped, because they do not exceed any of the given tresholds
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54 *
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 */
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 availabeDaysPerMonth(data, tresholds) {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 const DESC = (a, b) => {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58 if (a > b) return -1;
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59 if (a === b) return 0;
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
60 return 1;
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 const groups = tresholds.sort(DESC);
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 const collection = {};
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
64 groups.map(g => {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
65 collection[g + ""] = 0;
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 return this.data.reduce((current, value) => {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 for (let threshold in groups) {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 if (value > threshold) {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
70 return (current[threshold] += 1);
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
71 }
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
72 }
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
73 return current;
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
74 }, collection);
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
75 },
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 drawDiagram() {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 const margin = 60;
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
78 const width = 1000 - 2 * margin;
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
79 const height = 600 - 2 * margin;
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80 const yScale = d3
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 .scaleLinear()
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
82 .range([height, 0])
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
83 .domain([-35, 35]);
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
84 d3.select(".diagram-container svg").remove();
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
85 let svg = d3.select(".diagram-container").append("svg");
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
86 svg.attr("width", "100%");
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
87 svg.attr("height", "100%");
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
88 const chart = svg.attr("transform", `translate(${margin}, ${margin})`);
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
89 chart.append("g").call(d3.axisLeft(yScale));
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
90 const xScale = d3
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
91 .scaleBand()
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
92 .range([0, width])
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
93 .domain([1, 12])
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
94 .padding(0.2);
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
95 chart
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
96 .append("g")
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
97 .attr("transform", `translate(0, ${height})`)
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
98 .call(d3.axisBottom(xScale));
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
99 chart
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
100 .selectAll()
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
101 .data(this.availability)
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
102 .enter()
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
103 .append("rect")
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
104 .attr("x", s => xScale(s.month))
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
105 .attr("y", s => yScale(s.days))
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
106 .attr("height", s => height - yScale(s.days))
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
107 .attr("width", xScale.bandwidth());
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
108 }
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
109 }
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
110 };
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
111 </script>
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
112
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
113 <style></style>