Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 2689:8f919fe629f9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
author Markus Kottlaender <markus@intevation.de>
date Fri, 15 Mar 2019 16:41:16 +0100
parents c4da269238a4
children 023a607c4bcc
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/
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
8 .main
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
9 .line
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
10 clip-path: url(#clip)
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
11 .nav
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
12 .line
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
13 stroke: steelblue
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
14 stroke-width: 2
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
15 fill: transparent
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
16 clip-path: url(#clip)
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
17
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
18 .hdc-line,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
19 .ldc-line,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
20 .mw-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
21 stroke-width: 1
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
22 fill: transparent
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
23 clip-path: url(#clip)
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
24 .hdc-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
25 stroke: red
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
26 .ldc-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
27 stroke: green
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
28 .mw-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
29 stroke: grey
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
30 .ref-waterlevel-label
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
31 font-size: 11px
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
32 fill: #999
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
33 .hdc-ldc-area
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
34 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
35
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
36 .tick
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
37 line
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
38 stroke-dasharray: 5
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
39 stroke: #ccc
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
40
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
41 .zoom
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
42 cursor: move
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
43 fill: none
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
44 pointer-events: all
2607
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
45 .brush
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
46 .selection
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
47 stroke: transparent
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
48 fill-opacity: 0.2
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
49 .handle
2646
30697735a7bc client: waterlevel diagram: fixed handle style in navigation chart
Markus Kottlaender <markus@intevation.de>
parents: 2645
diff changeset
50 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
51 fill: rgba($color-info, 0.5)
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
52
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
53 .chart-dots
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
54 clip-path: url(#clip)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
55 .chart-dot
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
56 fill: steelblue
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
57 stroke: steelblue
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
58 pointer-events: none
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
59 .chart-tooltip
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
60 rect
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
61 fill: #fff
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
62 stroke: #ccc
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
63 text
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
64 fill: #666
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
65 font-size: 12px
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 </style>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 <script>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 /* 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
70 * without warranty, see README.md and license for details.
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 * SPDX-License-Identifier: AGPL-3.0-or-later
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 * License-Filename: LICENSES/AGPL-3.0.txt
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 * Copyright (C) 2018 by via donau
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 * – Österreichische Wasserstraßen-Gesellschaft mbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 * Software engineering by Intevation GmbH
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 * Author(s):
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 * Markus Kottländer <markus.kottlaender@intevation.de>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 */
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
83 import { mapState, mapGetters } from "vuex";
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
84 import * as d3Base from "d3";
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
85 import { lineChunked } from "d3-line-chunked";
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 import debounce from "debounce";
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
88 // we should load only d3 modules we need but for now we'll go with the lazy way
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
89 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
90 const d3 = Object.assign(d3Base, { lineChunked });
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
91
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 export default {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 computed: {
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
94 ...mapState("gauges", ["waterlevels"]),
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
95 ...mapGetters("gauges", ["selectedGauge"])
2596
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
96 },
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
97 watch: {
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 waterlevels() {
2596
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
99 this.drawDiagram();
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 methods: {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 drawDiagram() {
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
104 if (!this.selectedGauge || !this.waterlevels.length) return;
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
105
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
106 // remove old diagram
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
107 d3.select(".diagram-container svg").remove();
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
108
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
109 // 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
110 let refWaterLevels = JSON.parse(
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
111 this.selectedGauge.properties.reference_water_levels
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
112 );
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
113
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
114 // CREATE SVG AND SET DIMENSIONS/MARGINS
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
115
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
116 let svgWidth = document.querySelector(".diagram-container").clientWidth;
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
117 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
118 let svg = d3
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
119 .select(".diagram-container")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
120 .append("svg")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
121 .attr("width", "100%")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
122 .attr("height", "100%");
2653
7fd47d9641ac client: waterlevel diagram: made diagram a bit higher
Markus Kottlaender <markus@intevation.de>
parents: 2652
diff changeset
123 let mainMargin = { top: 20, 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
124 navMargin = {
2653
7fd47d9641ac client: waterlevel diagram: made diagram a bit higher
Markus Kottlaender <markus@intevation.de>
parents: 2652
diff changeset
125 top: svgHeight - mainMargin.top - 65,
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 right: 20,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 bottom: 30,
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
128 left: 80
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129 },
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
130 width = +svgWidth - mainMargin.left - mainMargin.right,
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
131 mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom,
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
132 navHeight = +svgHeight - navMargin.top - navMargin.bottom;
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
133
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
134 // PREPARING AXES/SCALING
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
135
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
136 // 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
137 // based on the diagrams dimensions
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
138 let x = d3.scaleTime().range([0, width]),
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 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
140 y = d3.scaleLinear().range([mainHeight, 0]),
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
141 y2 = d3.scaleLinear().range([navHeight, 0]);
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
142 // 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
143 // including hdc/ldc (+/- 100 cm)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
144 let WaterlevelMinMax = d3.extent(
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
145 [
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
146 ...this.waterlevels,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
147 { waterlevel: refWaterLevels.HDC + 100 },
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
148 { waterlevel: Math.max(refWaterLevels.LDC - 100, 0) }
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
149 ],
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
150 d => d.waterlevel
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
151 );
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
152 // 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
153 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
154 y.domain(WaterlevelMinMax);
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
155 x2.domain(x.domain());
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
156 y2.domain(y.domain());
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
157 // 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
158 let xAxis = d3
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
159 .axisTop(x)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
160 .tickSizeInner(mainHeight)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
161 .tickSizeOuter(0);
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
162 let xAxis2 = d3.axisBottom(x2);
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
163 let yAxis = d3
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
164 .axisRight(y)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
165 .tickSizeInner(width)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
166 .tickSizeOuter(0);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
167
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
168 // PREPARING CHART FUNCTIONS
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
170 // waterlevel line in big chart
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
171 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
172 var mainLineChart = d3
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
173 .lineChunked()
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
174 .x(d => x(d.date))
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
175 .y(d => y(d.waterlevel))
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
176 .curve(d3.curveLinear)
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
177 .isNext((prev, current) => {
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
178 // points are "next to each other" when they are exactly 15 minutes apart
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
179 return current.date - prev.date === 15 * 60 * 1000;
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
180 })
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
181 .lineStyles({ stroke: "steelblue" })
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
182 .gapStyles({
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
183 stroke: "steelblue",
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
184 "stroke-opacity": 1,
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
185 "stroke-dasharray": "3 3",
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
186 "stroke-width": 1
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
187 });
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
188 // waterlevel line in small chart
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
189 let navLineChart = d3
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
190 .line()
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
191 .curve(d3.curveMonotoneX)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
192 .x(d => x2(d.date))
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
193 .y(d => y2(d.waterlevel));
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
194 // hdc/ldc/mw
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
195 let refWaterlevelLine = d3
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
196 .line()
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
197 .x(d => x(d.x))
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
198 .y(d => y(d.y));
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
199
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
200 // DRAWING MAINCHART
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
201
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
202 // define visible chart area
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
203 // everything outside this area will be hidden (clipped)
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
204 svg
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
205 .append("defs")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
206 .append("clipPath")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
207 .attr("id", "clip")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
208 .append("rect")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
209 .attr("width", width)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
210 .attr("height", mainHeight);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
211
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
212 let mainChart = svg
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
213 .append("g")
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
214 .attr("class", "main")
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
215 .attr("transform", `translate(${mainMargin.left}, ${mainMargin.top})`);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
216
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
217 // axes
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
218 mainChart
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
219 .append("g")
2652
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
220 .attr("class", "axis--x")
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
221 .attr("transform", `translate(0, ${mainHeight})`)
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
222 .call(xAxis)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
223 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
224 .attr("y", 15);
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
225 mainChart // label
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
226 .append("text")
2642
ffef5f89b31c client: waterlevel diagram: changed diagram title and y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2641
diff changeset
227 .text(this.$gettext("Waterlevel [cm]"))
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
228 .attr("text-anchor", "middle")
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
229 .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
230 mainChart
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
231 .append("g")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
232 .call(yAxis)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
233 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
234 .attr("x", -25);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
235
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
236 // reference waterlevels
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
237 // 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
238 mainChart
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
239 .append("rect")
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
240 .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
241 .attr("x", 0)
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
242 .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
243 .attr("width", width)
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
244 .attr("height", y(refWaterLevels.LDC) - y(refWaterLevels.HDC));
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
245
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
246 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
247 // HDC
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
248 mainChart
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
249 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
250 .datum([
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
251 { x: 0, y: refWaterLevels.HDC },
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
252 { x: lastDate, y: refWaterLevels.HDC }
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
253 ])
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
254 .attr("class", "hdc-line")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
255 .attr("d", refWaterlevelLine);
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
256 mainChart // label
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
257 .append("text")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
258 .text("HDC")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
259 .attr("class", "ref-waterlevel-label")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
260 .attr("x", x(lastDate) - 20)
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
261 .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
262 // LDC
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
263 mainChart
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
264 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
265 .datum([
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
266 { x: 0, y: refWaterLevels.LDC },
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
267 { x: lastDate, y: refWaterLevels.LDC }
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
268 ])
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
269 .attr("class", "ldc-line")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
270 .attr("d", refWaterlevelLine);
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
271 mainChart // label
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
272 .append("text")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
273 .text("LDC")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
274 .attr("class", "ref-waterlevel-label")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
275 .attr("x", x(lastDate) - 20)
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
276 .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
277 // MW
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
278 mainChart
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
279 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
280 .datum([
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
281 { x: 0, y: refWaterLevels.MW },
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
282 { x: lastDate, y: refWaterLevels.MW }
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
283 ])
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
284 .attr("class", "mw-line")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
285 .attr("d", refWaterlevelLine);
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
286 mainChart // label
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
287 .append("text")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
288 .text("MW")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
289 .attr("class", "ref-waterlevel-label")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
290 .attr("x", x(lastDate) - 20)
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
291 .attr("y", y(refWaterLevels.MW) - 3);
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
292
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
293 // waterlevel chart
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
294 mainChart
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
295 .append("g")
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
296 .attr("class", "line")
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
297 .datum(this.waterlevels)
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
298 .transition()
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
299 .duration(1000)
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
300 .call(mainLineChart);
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
301
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
302 // DRAWING NAVCHART
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
303
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
304 let navChart = svg
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
305 .append("g")
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
306 .attr("class", "nav")
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
307 .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
308
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
309 // 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
310 navChart
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
311 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
312 .attr("class", "axis axis--x")
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
313 .attr("transform", `translate(0, ${navHeight})`)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
314 .call(xAxis2);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
315
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
316 // waterlevel chart
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
317 navChart
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
318 .append("path")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
319 .datum(this.waterlevels)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
320 .attr("class", "line")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
321 .attr("d", navLineChart);
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
322
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
323 // INTERACTIVITY
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
324
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
325 // selecting time period in nav chart
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
326 let brush = d3
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
327 .brushX()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
328 .handleSize(4)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
329 .extent([[0, 0], [width, navHeight]])
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
330 .on("brush end", () => {
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
331 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
332 return; // ignore brush-by-zoom
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
333 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
334 x.domain(s.map(x2.invert, x2));
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
335 mainChart.select(".line").call(mainLineChart);
2652
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
336 mainChart
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
337 .select(".axis--x")
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
338 .call(xAxis)
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
339 .selectAll(".tick text")
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
340 .attr("y", 15);
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
341 svg
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
342 .select(".zoom")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
343 .call(
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
344 zoom.transform,
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
345 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
346 );
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
347 });
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
348
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
349 // zooming with mousewheel in main chart
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
350 let zoom = d3
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
351 .zoom()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
352 .scaleExtent([1, Infinity])
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
353 .translateExtent([[0, 0], [width, mainHeight]])
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
354 .extent([[0, 0], [width, mainHeight]])
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
355 .on("zoom", () => {
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
356 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
357 return; // ignore zoom-by-brush
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
358 let t = d3.event.transform;
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
359 x.domain(t.rescaleX(x2).domain());
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
360 mainChart.select(".line").call(mainLineChart);
2652
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
361 mainChart
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
362 .select(".axis--x")
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
363 .call(xAxis)
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
364 .selectAll(".tick text")
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
365 .attr("y", 15);
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
366 navChart
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
367 .select(".brush")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
368 .call(brush.move, x.range().map(t.invertX, t));
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
369 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
370 .on("start", () => {
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
371 svg.select(".chart-dot").style("display", "none");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
372 svg.select(".chart-tooltip").style("display", "none");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
373 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
374 .on("end", () => {
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
375 svg.select(".chart-dot").style("display", null);
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
376 svg.select(".chart-tooltip").style("display", null);
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
377 });
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
378
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
379 navChart
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
380 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
381 .attr("class", "brush")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
382 .call(brush)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
383 .call(brush.move, x.range());
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
384
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
385 let zoomRect = svg
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
386 .append("rect")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
387 .attr("class", "zoom")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
388 .attr("width", width)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
389 .attr("height", mainHeight)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
390 .attr("transform", `translate(${mainMargin.left}, ${mainMargin.top})`)
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
391 .call(zoom);
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
392
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
393 // TOOLTIPS
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
394
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
395 let dots = mainChart.append("g").attr("class", "chart-dots");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
396 dots
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
397 .append("circle")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
398 .attr("class", "chart-dot")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
399 .attr("r", 4);
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
400 let tooltips = mainChart.append("g").attr("class", "chart-tooltip");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
401 tooltips
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
402 .append("rect")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
403 .attr("x", -25)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
404 .attr("y", -25)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
405 .attr("rx", 4)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
406 .attr("ry", 4)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
407 .attr("width", 105)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
408 .attr("height", 40);
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
409 let tooltipText = tooltips.append("text");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
410 tooltipText
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
411 .append("tspan")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
412 .attr("x", -15)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
413 .attr("y", -8);
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
414 tooltipText
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
415 .append("tspan")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
416 .attr("x", 8)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
417 .attr("y", 7)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
418 .style("font-weight", "bold");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
419
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
420 let bisectDate = d3.bisector(d => d.date).left;
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
421 zoomRect
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
422 .on("mouseover", () => {
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
423 svg.select(".chart-dot").style("display", null);
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
424 svg.select(".chart-tooltip").style("display", null);
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
425 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
426 .on("mouseout", () => {
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
427 svg.select(".chart-dot").style("display", "none");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
428 svg.select(".chart-tooltip").style("display", "none");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
429 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
430 .on("mousemove", () => {
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
431 let x0 = x.invert(d3.mouse(document.querySelector(".zoom"))[0]),
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
432 i = bisectDate(this.waterlevels, x0, 1),
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
433 d0 = this.waterlevels[i - 1],
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
434 d1 = this.waterlevels[i],
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
435 d = x0 - d0.date > d1.date - x0 ? d1 : d0;
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
436
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
437 svg
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
438 .select(".chart-dot")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
439 .attr("transform", `translate(${x(d.date)}, ${y(d.waterlevel)})`);
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
440 svg
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
441 .select(".chart-tooltip")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
442 .attr(
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
443 "transform",
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
444 `translate(${x(d.date) - 25}, ${y(d.waterlevel) - 25})`
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
445 );
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
446 svg.select(".chart-tooltip text tspan:first-child").text(
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
447 d.date.toLocaleString([], {
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
448 year: "2-digit",
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
449 month: "2-digit",
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
450 day: "2-digit",
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
451 hour: "2-digit",
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
452 minute: "2-digit"
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
453 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
454 );
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
455 svg
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
456 .select(".chart-tooltip text tspan:last-child")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
457 .text(d.waterlevel + " cm");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
458 });
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
459 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
460 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
461 created() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
462 window.addEventListener("resize", debounce(this.drawDiagram), 100);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
463 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
464 mounted() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
465 this.drawDiagram();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
466 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
467 updated() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
468 this.drawDiagram();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
469 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
470 };
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
471 </script>