Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 2652:a2dd96c305be

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
author Markus Kottlaender <markus@intevation.de>
date Thu, 14 Mar 2019 14:56:40 +0100
parents 4ffae834276e
children 7fd47d9641ac
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <div class="flex-fill diagram-container"></div>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 </template>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 <style lang="sass" scoped>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 .diagram-container
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
7 /deep/
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
8 .line
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
9 stroke: steelblue
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
10 stroke-width: 2
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
11 fill: transparent
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
12 clip-path: url(#clip)
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
13
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
14 .hdc-line,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
15 .ldc-line,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
16 .mw-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
17 stroke-width: 1
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
18 fill: transparent
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
19 clip-path: url(#clip)
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
20 .hdc-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
21 stroke: red
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
22 .ldc-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
23 stroke: green
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
24 .mw-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
25 stroke: grey
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
26 .ref-waterlevel-label
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
27 font-size: 11px
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
28 fill: #999
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
29 .hdc-ldc-area
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
30 fill: rgba(0, 255, 0, 0.15)
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
31
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
32 .tick
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
33 line
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
34 stroke-dasharray: 5
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
35 stroke: #ccc
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
36
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
37 .zoom
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
38 cursor: move
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
39 fill: none
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
40 pointer-events: all
2607
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
41 .brush
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
42 .selection
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
43 stroke: transparent
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
44 fill-opacity: 0.2
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
45 .handle
2646
30697735a7bc client: waterlevel diagram: fixed handle style in navigation chart
Markus Kottlaender <markus@intevation.de>
parents: 2645
diff changeset
46 stroke: rgba($color-info, 0.5)
2607
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
47 fill: rgba($color-info, 0.5)
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 </style>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 <script>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 /* This is Free Software under GNU Affero General Public License v >= 3.0
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 * without warranty, see README.md and license for details.
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 * SPDX-License-Identifier: AGPL-3.0-or-later
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 * License-Filename: LICENSES/AGPL-3.0.txt
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 * Copyright (C) 2018 by via donau
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 * – Österreichische Wasserstraßen-Gesellschaft mbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 * Software engineering by Intevation GmbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 * Author(s):
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 * Markus Kottländer <markus.kottlaender@intevation.de>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 */
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
65 import { mapState, mapGetters } from "vuex";
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 import * as d3 from "d3";
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 import debounce from "debounce";
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 export default {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 computed: {
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
71 ...mapState("gauges", ["waterlevels"]),
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
72 ...mapGetters("gauges", ["selectedGauge"])
2596
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
73 },
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
74 watch: {
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 waterlevels() {
2596
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
76 this.drawDiagram();
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 methods: {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 drawDiagram() {
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
81 if (!this.selectedGauge || !this.waterlevels.length) return;
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
82
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
83 // remove old diagram
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
84 d3.select(".diagram-container svg").remove();
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
85
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
86 // get HDC/LDC/MW of the gauge
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
87 let refWaterLevels = JSON.parse(
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
88 this.selectedGauge.properties.reference_water_levels
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
89 );
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
90
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
91 // CREATE SVG AND SET DIMENSIONS/MARGINS
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
92
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
93 let svgWidth = document.querySelector(".diagram-container").clientWidth;
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
94 let svgHeight = document.querySelector(".diagram-container").clientHeight;
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
95 let svg = d3
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
96 .select(".diagram-container")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
97 .append("svg")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
98 .attr("width", "100%")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
99 .attr("height", "100%");
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
100 let mainMargin = { top: 50, right: 20, bottom: 110, left: 80 },
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
101 navMargin = {
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
102 top: svgHeight - mainMargin.top - 35,
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 right: 20,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 bottom: 30,
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
105 left: 80
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 },
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
107 width = +svgWidth - mainMargin.left - mainMargin.right,
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
108 mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom,
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
109 navHeight = +svgHeight - navMargin.top - navMargin.bottom;
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
110
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
111 // PREPARING AXES/SCALING
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
112
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
113 // scaling helpers to convert real values to pixels
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
114 // based on the diagrams dimensions
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
115 let x = d3.scaleTime().range([0, width]),
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 x2 = d3.scaleTime().range([0, width]),
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
117 y = d3.scaleLinear().range([mainHeight, 0]),
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
118 y2 = d3.scaleLinear().range([navHeight, 0]);
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
119 // find min/max values for the waterlevel axis
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
120 // including hdc/ldc (+/- 100 cm)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
121 let WaterlevelMinMax = d3.extent(
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
122 [
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
123 ...this.waterlevels,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
124 { waterlevel: refWaterLevels.HDC + 100 },
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
125 { waterlevel: Math.max(refWaterLevels.LDC - 100, 0) }
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
126 ],
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
127 d => d.waterlevel
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
128 );
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
129 // setting the min and max values for the diagram axes
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
130 x.domain(d3.extent(this.waterlevels, d => d.date));
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
131 y.domain(WaterlevelMinMax);
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
132 x2.domain(x.domain());
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
133 y2.domain(y.domain());
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
134 // creating the axes based on these scales
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
135 let xAxis = d3
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
136 .axisTop(x)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
137 .tickSizeInner(mainHeight)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
138 .tickSizeOuter(0);
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
139 let xAxis2 = d3.axisBottom(x2);
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
140 let yAxis = d3
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
141 .axisRight(y)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
142 .tickSizeInner(width)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
143 .tickSizeOuter(0);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
144
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
145 // PREPARING CHART FUNCTIONS
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
146
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
147 // waterlevel line in big chart
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
148 let mainLineChart = d3
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
149 .line()
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
150 .curve(d3.curveMonotoneX)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
151 .x(d => x(d.date))
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
152 .y(d => y(d.waterlevel));
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
153 // waterlevel line in small chart
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
154 let navLineChart = d3
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
155 .line()
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
156 .curve(d3.curveMonotoneX)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
157 .x(d => x2(d.date))
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
158 .y(d => y2(d.waterlevel));
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
159 // hdc/ldc/mw
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
160 let refWaterlevelLine = d3
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
161 .line()
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
162 .x(d => x(d.x))
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
163 .y(d => y(d.y));
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
164
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
165 // DRAWING MAINCHART
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
166
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
167 // define visible chart area
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
168 // everything outside this area will be hidden (clipped)
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169 svg
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
170 .append("defs")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
171 .append("clipPath")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
172 .attr("id", "clip")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
173 .append("rect")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
174 .attr("width", width)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
175 .attr("height", mainHeight);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
177 let mainChart = svg
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
178 .append("g")
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
179 .attr("transform", `translate(${mainMargin.left}, ${mainMargin.top})`);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
180
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
181 // axes
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
182 mainChart
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
183 .append("g")
2652
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
184 .attr("class", "axis--x")
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
185 .attr("transform", `translate(0, ${mainHeight})`)
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
186 .call(xAxis)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
187 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
188 .attr("y", 15);
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
189 mainChart // label
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
190 .append("text")
2642
ffef5f89b31c client: waterlevel diagram: changed diagram title and y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2641
diff changeset
191 .text(this.$gettext("Waterlevel [cm]"))
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
192 .attr("text-anchor", "middle")
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
193 .attr("transform", `translate(-45, ${mainHeight / 2}) rotate(-90)`);
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
194 mainChart
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
195 .append("g")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
196 .call(yAxis)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
197 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
198 .attr("x", -25);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
199
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
200 // reference waterlevels
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
201 // filling area between HDC and LDC
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
202 mainChart
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
203 .append("rect")
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
204 .attr("class", "hdc-ldc-area")
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
205 .attr("x", 0)
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
206 .attr("y", y(refWaterLevels.HDC))
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
207 .attr("width", width)
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
208 .attr("height", y(refWaterLevels.LDC) - y(refWaterLevels.HDC));
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
209
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
210 let lastDate = this.waterlevels[this.waterlevels.length - 1].date;
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
211 // HDC
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
212 mainChart
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
213 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
214 .datum([
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
215 { x: 0, y: refWaterLevels.HDC },
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
216 { x: lastDate, y: refWaterLevels.HDC }
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
217 ])
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
218 .attr("class", "hdc-line")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
219 .attr("d", refWaterlevelLine);
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
220 mainChart // label
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
221 .append("text")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
222 .text("HDC")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
223 .attr("class", "ref-waterlevel-label")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
224 .attr("x", x(lastDate) - 20)
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
225 .attr("y", y(refWaterLevels.HDC) - 3);
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
226 // LDC
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
227 mainChart
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
228 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
229 .datum([
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
230 { x: 0, y: refWaterLevels.LDC },
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
231 { x: lastDate, y: refWaterLevels.LDC }
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
232 ])
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
233 .attr("class", "ldc-line")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
234 .attr("d", refWaterlevelLine);
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
235 mainChart // label
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
236 .append("text")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
237 .text("LDC")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
238 .attr("class", "ref-waterlevel-label")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
239 .attr("x", x(lastDate) - 20)
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
240 .attr("y", y(refWaterLevels.LDC) - 3);
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
241 // MW
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
242 mainChart
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
243 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
244 .datum([
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
245 { x: 0, y: refWaterLevels.MW },
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
246 { x: lastDate, y: refWaterLevels.MW }
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
247 ])
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
248 .attr("class", "mw-line")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
249 .attr("d", refWaterlevelLine);
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
250 mainChart // label
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
251 .append("text")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
252 .text("MW")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
253 .attr("class", "ref-waterlevel-label")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
254 .attr("x", x(lastDate) - 20)
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
255 .attr("y", y(refWaterLevels.MW) - 3);
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
256
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
257 // waterlevel chart
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
258 mainChart
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
259 .append("path")
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
260 .datum(this.waterlevels)
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
261 .attr("class", "line")
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
262 .attr("d", mainLineChart);
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
263
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
264 // DRAWING NAVCHART
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
265
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
266 let navChart = svg
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
267 .append("g")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
268 .attr("transform", `translate(${navMargin.left}, ${navMargin.top})`);
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
269
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
270 // axis (nav chart only has y-axis)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
271 navChart
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
272 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
273 .attr("class", "axis axis--x")
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
274 .attr("transform", `translate(0, ${navHeight})`)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
275 .call(xAxis2);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
276
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
277 // waterlevel chart
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
278 navChart
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
279 .append("path")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
280 .datum(this.waterlevels)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
281 .attr("class", "line")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
282 .attr("d", navLineChart);
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
283
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
284 // INTERACTIVITY
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
285
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
286 // selecting time period in nav chart
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
287 let brush = d3
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
288 .brushX()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
289 .handleSize(4)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
290 .extent([[0, 0], [width, navHeight]])
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
291 .on("brush end", () => {
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
292 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
293 return; // ignore brush-by-zoom
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
294 let s = d3.event.selection || x2.range();
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
295 x.domain(s.map(x2.invert, x2));
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
296 mainChart.select(".line").attr("d", mainLineChart);
2652
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
297 mainChart
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
298 .select(".axis--x")
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
299 .call(xAxis)
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
300 .selectAll(".tick text")
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
301 .attr("y", 15);
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
302 svg
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
303 .select(".zoom")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
304 .call(
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
305 zoom.transform,
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
306 d3.zoomIdentity.scale(width / (s[1] - s[0])).translate(-s[0], 0)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
307 );
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
308 });
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
309
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
310 // zooming with mousewheel in main chart
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
311 let zoom = d3
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
312 .zoom()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
313 .scaleExtent([1, Infinity])
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
314 .translateExtent([[0, 0], [width, mainHeight]])
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
315 .extent([[0, 0], [width, mainHeight]])
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
316 .on("zoom", () => {
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
317 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
318 return; // ignore zoom-by-brush
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
319 let t = d3.event.transform;
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
320 x.domain(t.rescaleX(x2).domain());
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
321 mainChart.select(".line").attr("d", mainLineChart);
2652
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
322 mainChart
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
323 .select(".axis--x")
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
324 .call(xAxis)
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
325 .selectAll(".tick text")
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
326 .attr("y", 15);
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
327 navChart
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
328 .select(".brush")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
329 .call(brush.move, x.range().map(t.invertX, t));
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
330 });
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
331
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
332 navChart
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
333 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
334 .attr("class", "brush")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
335 .call(brush)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
336 .call(brush.move, x.range());
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
337
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
338 svg
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
339 .append("rect")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
340 .attr("class", "zoom")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
341 .attr("width", width)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
342 .attr("height", mainHeight)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
343 .attr("transform", `translate(${mainMargin.left}, ${mainMargin.top})`)
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
344 .call(zoom);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
345 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
346 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
347 created() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
348 window.addEventListener("resize", debounce(this.drawDiagram), 100);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
349 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
350 mounted() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
351 this.drawDiagram();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
352 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
353 updated() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
354 this.drawDiagram();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
355 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
356 };
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
357 </script>