Mercurial > gemma

annotate client/src/components/fairway/AvailableFairwayDepth.vue @ 3131:1a1ec4c98c98

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: resolve linter issues
author Markus Kottlaender <markus@intevation.de>
date Mon, 29 Apr 2019 18:16:51 +0200
parents 2e36267ab50e
children ab00165540fe
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);
3130
2e36267ab50e client: available fairway depth diagram: fixed method calls
Markus Kottlaender <markus@intevation.de>
parents: 3128
diff changeset
57 this.drawBars({ diagram, data, yScale });
2e36267ab50e client: available fairway depth diagram: fixed method calls
Markus Kottlaender <markus@intevation.de>
parents: 3128
diff changeset
58 this.drawLabel(diagram, height);
2e36267ab50e client: available fairway depth diagram: fixed method calls
Markus Kottlaender <markus@intevation.de>
parents: 3128
diff changeset
59 this.drawScale(diagram, yScale);
3125
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;
3131
1a1ec4c98c98 client: resolve linter issues
Markus Kottlaender <markus@intevation.de>
parents: 3130
diff changeset
63 const paddingTop = 10;
3125
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
64
3128
1610d3042bbb fairway_availability: generative code fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 3125
diff changeset
65 const allBars = diagram
3125
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) => {
3131
1a1ec4c98c98 client: resolve linter issues
Markus Kottlaender <markus@intevation.de>
parents: 3130
diff changeset
71 return `translate(${paddingRight + i * 95} ${paddingTop})`;
3125
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
72 });
3131
1a1ec4c98c98 client: resolve linter issues
Markus Kottlaender <markus@intevation.de>
parents: 3130
diff changeset
73 // bars per month
1a1ec4c98c98 client: resolve linter issues
Markus Kottlaender <markus@intevation.de>
parents: 3130
diff changeset
74 const colors = [];
1a1ec4c98c98 client: resolve linter issues
Markus Kottlaender <markus@intevation.de>
parents: 3130
diff changeset
75 allBars
3125
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
76 .selectAll("rect")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
77 .data(d => d.values)
3033
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
78 .enter()
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
79 .append("rect")
3128
1610d3042bbb fairway_availability: generative code fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 3125
diff changeset
80 .attr("x", 0)
1610d3042bbb fairway_availability: generative code fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 3125
diff changeset
81 .attr("y", yScale(0))
1610d3042bbb fairway_availability: generative code fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 3125
diff changeset
82 .attr("height", d => {
1610d3042bbb fairway_availability: generative code fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 3125
diff changeset
83 return Math.abs(yScale(0) - yScale(d));
3125
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
84 })
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
85 .attr("transform", d => {
3128
1610d3042bbb fairway_availability: generative code fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 3125
diff changeset
86 if (d > 0)
1610d3042bbb fairway_availability: generative code fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 3125
diff changeset
87 return "translate(0 -" + Math.abs(yScale(0) - yScale(d)) + ")";
1610d3042bbb fairway_availability: generative code fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 3125
diff changeset
88 return "translate(0 " + 0 + ")";
3125
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
89 })
3128
1610d3042bbb fairway_availability: generative code fixed
Thomas Junk <thomas.junk@intevation.de>
parents: 3125
diff changeset
90 .attr("width", 60)
3125
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
91 .attr("fill", (d, i) => {
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
92 return colors[i];
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 },
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
95 drawLabel(diagram, height) {
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
96 const dy = height / 2;
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
97 diagram
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
98 .append("text")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
99 .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
100 .attr("text-anchor", "middle")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
101 .attr("x", 0)
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
102 .attr("y", 0)
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
103 .attr("dy", "1em")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
104 .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
105 },
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
106 drawScale(diagram, yScale) {
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
107 const paddingLeft = 50;
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
108 const paddingTop = 10;
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
109 const yAxis = d3.axisLeft().scale(yScale);
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
110 diagram
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
111 .append("g")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
112 .attr("transform", "translate(" + paddingLeft + " " + paddingTop + ")")
383720d8d98e fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3033
diff changeset
113 .call(yAxis);
3033
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
114 }
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
115 }
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
116 };
c2c1e3e3af1c Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
117 </script>