Mercurial > gemma

comparison 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
comparison
equal deleted inserted replaced
3031:f99f0cbb843f 3033:c2c1e3e3af1c
1 <template>
2 <div>
3 <h1>Available Fairway Depth</h1>
4 <UISpinnerOverlay v-if="loading" />
5 </div>
6 </template>
7
8 <script>
9 /* This is Free Software under GNU Affero General Public License v >= 3.0
10 * without warranty, see README.md and license for details.
11 *
12 * SPDX-License-Identifier: AGPL-3.0-or-later
13 * License-Filename: LICENSES/AGPL-3.0.txt
14 *
15 * Copyright (C) 2018 by via donau
16 * – Österreichische Wasserstraßen-Gesellschaft mbH
17 * Software engineering by Intevation GmbH
18 *
19 * Author(s):
20 * Thomas Junk <thomas.junk@intevation.de>
21 * Markus Kottländer <markus.kottlaender@intevation.de>
22 */
23 import * as d3 from "d3";
24
25 export default {
26 data() {
27 return {
28 plainAvailability: [],
29 loading: false
30 };
31 },
32 computed: {
33 availability() {
34 return this.plainAvailability;
35 }
36 },
37 methods: {
38 /**
39 *
40 * aggregates data exceeding certain thresholds
41 *
42 * data = [1,2,3,4,5,6,7,8]
43 * treshold = [2,4,6]
44 *
45 * structure: treshold: count
46 *
47 * expected result = {
48 * 6: 2,
49 * 4: 2
50 * 2: 2
51 * }
52 *
53 * 1,2 are dropped, because they do not exceed any of the given tresholds
54 *
55 */
56 availabeDaysPerMonth(data, tresholds) {
57 const DESC = (a, b) => {
58 if (a > b) return -1;
59 if (a === b) return 0;
60 return 1;
61 };
62 const groups = tresholds.sort(DESC);
63 const collection = {};
64 groups.map(g => {
65 collection[g + ""] = 0;
66 });
67 return this.data.reduce((current, value) => {
68 for (let threshold in groups) {
69 if (value > threshold) {
70 return (current[threshold] += 1);
71 }
72 }
73 return current;
74 }, collection);
75 },
76 drawDiagram() {
77 const margin = 60;
78 const width = 1000 - 2 * margin;
79 const height = 600 - 2 * margin;
80 const yScale = d3
81 .scaleLinear()
82 .range([height, 0])
83 .domain([-35, 35]);
84 d3.select(".diagram-container svg").remove();
85 let svg = d3.select(".diagram-container").append("svg");
86 svg.attr("width", "100%");
87 svg.attr("height", "100%");
88 const chart = svg.attr("transform", `translate(${margin}, ${margin})`);
89 chart.append("g").call(d3.axisLeft(yScale));
90 const xScale = d3
91 .scaleBand()
92 .range([0, width])
93 .domain([1, 12])
94 .padding(0.2);
95 chart
96 .append("g")
97 .attr("transform", `translate(0, ${height})`)
98 .call(d3.axisBottom(xScale));
99 chart
100 .selectAll()
101 .data(this.availability)
102 .enter()
103 .append("rect")
104 .attr("x", s => xScale(s.month))
105 .attr("y", s => yScale(s.days))
106 .attr("height", s => height - yScale(s.days))
107 .attr("width", xScale.bandwidth());
108 }
109 }
110 };
111 </script>
112
113 <style></style>