Mercurial > gemma

annotate client/src/components/fairway/AvailableFairwayDepth.vue @ 3125:383720d8d98e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fairway_availability: generative code for diagram added
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 29 Apr 2019 13:27:50 +0200
parents c2c1e3e3af1c
children 1610d3042bbb
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
3125
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
8 <style></style>
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
9
3033
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
10 <script>
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
11 /* 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
12 * 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
13 *
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14 * 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
15 * License-Filename: LICENSES/AGPL-3.0.txt
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 *
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 * Copyright (C) 2018 by via donau
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 * – Österreichische Wasserstraßen-Gesellschaft mbH
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 * Software engineering by Intevation GmbH
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 *
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 * Author(s):
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 * Thomas Junk <thomas.junk@intevation.de>
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 * Markus Kottländer <markus.kottlaender@intevation.de>
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 import * as d3 from "d3";
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 export default {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
28 data() {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
29 return {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
30 loading: false
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 },
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 computed: {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
34 availability() {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
35 return this.plainAvailability;
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 },
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
38 methods: {
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
39 drawDiagram() {
3125
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
40 const width = 1000;
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
41 const height = 600;
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
42 const data = [
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
43 { month: "feb", values: [30, 20, 10, 0] },
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
44 { month: "mar", values: [25, 23, 0, 0] },
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
45 { month: "apr", values: [17, 18, 16, 13] }
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
46 ];
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
47
3033
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48 const yScale = d3
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
49 .scaleLinear()
3125
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
50 .domain([-30, 30])
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
51 .range([height - 30, 0]);
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
52
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
53 const diagram = d3
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
54 .select("svg")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
55 .attr("width", width)
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
56 .attr("height", height);
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
57 drawBars({ diagram, data, yScale });
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
58 drawLabel(diagram, height);
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
59 drawScale(diagram, yScale);
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
60 },
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
61 drawBars({ diagram, data, yScale }) {
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
62 const paddingRight = 100;
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
63 const paddingTop = 30;
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
64
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
65 const bars = diagram
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
66 .selectAll("g")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
67 .data(data)
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
68 .enter()
3033
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 .append("g")
3125
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
70 .attr("transform", (d, i) => {
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
71 return (
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
72 "translate(" + (paddingRight + i * 60) + "," + yScale(-1) + ")"
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
73 );
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
74 });
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
75 const bar = bars.append("g");
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
76
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
77 bar
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
78 .selectAll("rect")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
79 .data(d => d.values)
3033
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80 .enter()
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 .append("rect")
3125
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
82 .attr("width", 30)
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
83 .attr("height", (d, i) => {
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
84 console.log(d);
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
85 return yScale(0) - yScale(d);
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
86 })
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
87 .attr("transform", d => {
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
88 return "translate(0 -" + (yScale(0) - yScale(d)) + ")";
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
89 })
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
90 .attr("fill", (d, i) => {
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
91 return colors[i];
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
92 });
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
93
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
94 bars
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
95 .append("text")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
96 .text((d, i) => {
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
97 return d.month;
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
98 })
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
99 .attr("text-anchor", "middle")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
100 .attr("x", 15)
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
101 .attr("y", 0)
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
102 .attr("dy", "1em");
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
103 },
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
104 drawLabel(diagram, height) {
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
105 const dy = height / 2;
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
106 diagram
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
107 .append("text")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
108 .text("sum of days / Summe der Tage")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
109 .attr("text-anchor", "middle")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
110 .attr("x", 0)
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
111 .attr("y", 0)
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
112 .attr("dy", "1em")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
113 .attr("transform", "translate(0, " + dy + "), rotate(-90)");
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
114 },
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
115 drawScale(diagram, yScale) {
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
116 const paddingLeft = 50;
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
117 const paddingTop = 10;
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
118 const yAxis = d3.axisLeft().scale(yScale);
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
119 diagram
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
120 .append("g")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
121 .attr("transform", "translate(" + paddingLeft + " " + paddingTop + ")")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
122 .call(yAxis);
3033
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
123 }
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
124 }
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
125 };
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
126 </script>