Mercurial > gemma
comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 3033:c2c1e3e3af1c
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> |