Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 2611:e8c97481438f

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