Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 2820:d973d6f04eb6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate
author Markus Kottlaender <markus@intevation.de>
date Wed, 27 Mar 2019 11:18:03 +0100
parents 53c2bd009c68
children f87783a28c34
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>
2701
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
2 <div
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
3 class="d-flex flex-fill justify-content-center align-items-center diagram-container"
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
4 >
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
5 <div v-if="!waterlevels.length">
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
6 <translate>No data available.</translate>
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
7 </div>
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
8 </div>
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 </template>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 <style lang="sass" scoped>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 .diagram-container
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
13 /deep/
2756
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
14 .line
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
15 clip-path: url(#clip)
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
16 path
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
17 stroke: steelblue
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
18 stroke-width: 2
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
19 fill: none
2756
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
20 &.d3-line-chunked-chunk-gap
2794
8791becc40b1 client: waterlevel diagram: don't show dashed lines for missing data
Markus Kottlaender <markus@intevation.de>
parents: 2792
diff changeset
21 stroke-opacity: 0
2756
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
22 circle
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
23 stroke-width: 0
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
24 fill: steelblue
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
25 &.d3-line-chunked-chunk-predicted-point
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
26 fill-opacity: 0.6
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
27
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
28 .hdc-line,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
29 .ldc-line,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
30 .mw-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
31 stroke-width: 1
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
32 fill: none
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
33 clip-path: url(#clip)
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
34 .hdc-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
35 stroke: red
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
36 .ldc-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
37 stroke: green
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
38 .mw-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
39 stroke: grey
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
40 .ref-waterlevel-label
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
41 font-size: 11px
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
42 fill: #999
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
43 .hdc-ldc-area
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
44 fill: rgba(0, 255, 0, 0.1)
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
45 .now-line
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
46 stroke: #999
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
47 stroke-width: 1
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
48 stroke-dasharray: 5, 5
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
49 clip-path: url(#clip)
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
50 .now-line-label
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
51 font-size: 11px
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
52 fill: #999
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
53 .prediction-area
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
54 fill: steelblue
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
55 fill-opacity: 0.2
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
56 clip-path: url(#clip)
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
57
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
58 path.nash-sutcliffe
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
59 fill: none
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
60 stroke: black
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
61 stroke-width: 1
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
62 clip-path: url(#clip)
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
63 &.ns72
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
64 fill: rgba(0, 0, 0, 0.05)
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
65 text.nash-sutcliffe
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
66 font-size: 10px
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
67 clip-path: url(#clip)
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
68 tspan:last-child
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
69 font-size: 9px
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
70 fill: #777
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
71
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
72 .tick
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
73 line
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
74 stroke-dasharray: 5
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
75 stroke: #ccc
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
76
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
77 .zoom
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
78 cursor: move
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
79 fill: none
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
80 pointer-events: all
2607
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
81 .brush
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
82 .selection
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
83 stroke: none
2607
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
84 fill-opacity: 0.2
ee60096c7eb6 client: gauge waterlevel diagram: improved style of time selection
Markus Kottlaender <markus@intevation.de>
parents: 2604
diff changeset
85 .handle
2646
30697735a7bc client: waterlevel diagram: fixed handle style in navigation chart
Markus Kottlaender <markus@intevation.de>
parents: 2645
diff changeset
86 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
87 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
88
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
89 .chart-dots
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
90 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
91 .chart-dot
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
92 fill: steelblue
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
93 stroke: steelblue
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
94 pointer-events: none
2695
04b082a86d50 client: waterlevel diagram: fix tooltip style
Markus Kottlaender <markus@intevation.de>
parents: 2691
diff changeset
95 opacity: 0
2691
023a607c4bcc client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
Markus Kottlaender <markus@intevation.de>
parents: 2689
diff changeset
96 transition: opacity 0.1s
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
97 .chart-tooltip
2695
04b082a86d50 client: waterlevel diagram: fix tooltip style
Markus Kottlaender <markus@intevation.de>
parents: 2691
diff changeset
98 opacity: 0
2691
023a607c4bcc client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
Markus Kottlaender <markus@intevation.de>
parents: 2689
diff changeset
99 transition: opacity 0.3s
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
100 rect
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
101 fill: #fff
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
102 stroke: #ccc
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
103 text
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
104 fill: #666
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
105 font-size: 12px
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 </style>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 <script>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 /* 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
110 * without warranty, see README.md and license for details.
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112 * SPDX-License-Identifier: AGPL-3.0-or-later
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
113 * License-Filename: LICENSES/AGPL-3.0.txt
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 * Copyright (C) 2018 by via donau
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 * – Österreichische Wasserstraßen-Gesellschaft mbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
117 * Software engineering by Intevation GmbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 * Author(s):
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120 * Markus Kottländer <markus.kottlaender@intevation.de>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 */
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
123 import { mapState, mapGetters } from "vuex";
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
124 import * as d3Base from "d3";
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
125 import { lineChunked } from "d3-line-chunked";
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
126 import { startOfDay, endOfDay } from "date-fns";
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 import debounce from "debounce";
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
129 // 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
130 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
131 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
132 const d3 = Object.assign(d3Base, { lineChunked });
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
133
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 export default {
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
135 data() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
136 return {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
137 svg: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
138 diagram: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
139 navigation: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
140 dimensions: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
141 extent: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
142 scale: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
143 axes: null
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
144 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
145 },
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
146 computed: {
2820
d973d6f04eb6 client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate
Markus Kottlaender <markus@intevation.de>
parents: 2819
diff changeset
147 ...mapState("gauges", ["dateFrom", "waterlevels", "nashSutcliffe"]),
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
148 ...mapGetters("gauges", ["selectedGauge"])
2596
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
149 },
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
150 methods: {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
151 drawDiagram() {
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
152 // remove old diagram and exit if necessary data is missing
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
153 d3.select(".diagram-container svg").remove();
2701
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
154 if (!this.selectedGauge || !this.waterlevels.length) return;
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
155
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
156 // PREPARE HELPERS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
157
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
158 // HDC/LDC/MW for the selected gauge
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
159 const refWaterLevels = JSON.parse(
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
160 this.selectedGauge.properties.reference_water_levels
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
161 );
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
162
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
163 // dimensions (widths, heights, margins)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
164 this.dimensions = this.getDimensions();
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
165
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
166 // get min/max values for date and waterlevel axis
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
167 this.extent = this.getExtent(refWaterLevels);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
168
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
169 // scaling helpers
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
170 this.scale = this.getScale();
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
171
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
172 // creating the axes based on the scales
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
173 this.axes = {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
174 x: d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
175 .axisTop(this.scale.x)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
176 .tickSizeInner(this.dimensions.mainHeight)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
177 .tickSizeOuter(0),
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
178 y: d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
179 .axisRight(this.scale.y)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
180 .tickSizeInner(this.dimensions.width)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
181 .tickSizeOuter(0),
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
182 x2: d3.axisBottom(this.scale.x2)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
183 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
184
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
185 // DRAW DIAGRAM/NAVIGATION AREAS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
186
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
187 // create svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
188 this.svg = d3
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
189 .select(".diagram-container")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
190 .append("svg")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
191 .attr("width", "100%")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
192 .attr("height", "100%");
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
193
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
194 // create container for main diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
195 this.diagram = this.svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
196 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
197 .attr("class", "main")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
198 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
199 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
200 `translate(${this.dimensions.mainMargin.left}, ${
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
201 this.dimensions.mainMargin.top
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
202 })`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
203 );
2756
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
204
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
205 // create container for navigation diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
206 this.navigation = this.svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
207 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
208 .attr("class", "nav")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
209 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
210 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
211 `translate(${this.dimensions.navMargin.left}, ${
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
212 this.dimensions.navMargin.top
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
213 })`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
214 );
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
215
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
216 // define visible area, everything outside this area will be hidden
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
217 this.svg
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
218 .append("defs")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
219 .append("clipPath")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
220 .attr("id", "clip")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
221 .append("rect")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
222 .attr("width", this.dimensions.width)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
223 .attr("height", this.dimensions.mainHeight);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
224
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
225 // DRAW DIAGRAM PARTS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
226
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
227 // Each drawSomething function (with the exception of drawRefLines)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
228 // returns a fuction to update the respective chart/area/etc. These
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
229 // updater functions are used by the zoom feature to rescale all elements.
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
230 const updaters = [];
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
231
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
232 // draw
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
233 this.drawRefLines(refWaterLevels); // static, doesn't need an updater
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
234 updaters.push(this.drawAxes());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
235 updaters.push(this.drawWaterlevelCharts());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
236 updaters.push(this.drawNowLines());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
237 updaters.push(this.drawPredictionAreas());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
238 updaters.push(this.drawNashSutcliffe(24));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
239 updaters.push(this.drawNashSutcliffe(48));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
240 updaters.push(this.drawNashSutcliffe(72));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
241
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
242 // INTERACTIONS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
243
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
244 // create rectanlge on the main chart area to capture mouse events
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
245 const eventRect = this.svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
246 .append("rect")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
247 .attr("class", "zoom")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
248 .attr("width", this.dimensions.width)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
249 .attr("height", this.dimensions.mainHeight)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
250 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
251 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
252 `translate(${this.dimensions.mainMargin.left}, ${
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
253 this.dimensions.mainMargin.top
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
254 })`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
255 );
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
256
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
257 this.createZoom(updaters, eventRect);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
258 this.createTooltips(eventRect);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
259 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
260 getDimensions() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
261 // dimensions and margins
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
262 const svgWidth = document.querySelector(".diagram-container").clientWidth;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
263 const svgHeight = document.querySelector(".diagram-container")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
264 .clientHeight;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
265 const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
266 const navMargin = {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
267 top: svgHeight - mainMargin.top - 65,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
268 right: 20,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
269 bottom: 30,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
270 left: 80
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
271 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
272 const width = +svgWidth - mainMargin.left - mainMargin.right;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
273 const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
274 const navHeight = +svgHeight - navMargin.top - navMargin.bottom;
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
275
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
276 return { width, mainHeight, navHeight, mainMargin, navMargin };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
277 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
278 getExtent(refWaterLevels) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
279 return {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
280 // set min/max values for the date axis
2820
d973d6f04eb6 client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate
Markus Kottlaender <markus@intevation.de>
parents: 2819
diff changeset
281 date: [
d973d6f04eb6 client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate
Markus Kottlaender <markus@intevation.de>
parents: 2819
diff changeset
282 startOfDay(this.dateFrom),
d973d6f04eb6 client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate
Markus Kottlaender <markus@intevation.de>
parents: 2819
diff changeset
283 endOfDay(this.waterlevels[this.waterlevels.length - 1].date)
d973d6f04eb6 client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate
Markus Kottlaender <markus@intevation.de>
parents: 2819
diff changeset
284 ],
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
285 // set min/max values for the waterlevel axis
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
286 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
287 waterlevel: d3.extent(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
288 [
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
289 ...this.waterlevels,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
290 {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
291 waterlevel:
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
292 refWaterLevels.HDC +
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
293 (refWaterLevels.HDC - refWaterLevels.LDC) / 8
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
294 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
295 {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
296 waterlevel: Math.max(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
297 refWaterLevels.LDC -
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
298 (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
299 0
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
300 )
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
301 }
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
302 ],
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
303 d => d.waterlevel
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
304 )
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
305 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
306 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
307 getScale() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
308 // scaling helpers to convert real world values into pixels
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
309 const x = d3.scaleTime().range([0, this.dimensions.width]);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
310 const y = d3.scaleLinear().range([this.dimensions.mainHeight, 0]);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
311 const x2 = d3.scaleTime().range([0, this.dimensions.width]);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
312 const y2 = d3.scaleLinear().range([this.dimensions.navHeight, 0]);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
313
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
314 // setting the min and max values for the diagram axes
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
315 x.domain(d3.extent(this.extent.date));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
316 y.domain(this.extent.waterlevel);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
317 x2.domain(x.domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
318 y2.domain(y.domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
319
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
320 return { x, y, x2, y2 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
321 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
322 drawAxes() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
323 this.diagram
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
324 .append("g")
2652
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
325 .attr("class", "axis--x")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
326 .attr("transform", `translate(0, ${this.dimensions.mainHeight})`)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
327 .call(this.axes.x)
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
328 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
329 .attr("y", 15);
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
330 this.diagram // label
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
331 .append("text")
2642
ffef5f89b31c client: waterlevel diagram: changed diagram title and y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2641
diff changeset
332 .text(this.$gettext("Waterlevel [cm]"))
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
333 .attr("text-anchor", "middle")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
334 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
335 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
336 `translate(-45, ${this.dimensions.mainHeight / 2}) rotate(-90)`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
337 );
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
338 this.diagram
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
339 .append("g")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
340 .call(this.axes.y)
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
341 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
342 .attr("x", -25);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
343
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
344 this.navigation
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
345 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
346 .attr("class", "axis axis--x")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
347 .attr("transform", `translate(0, ${this.dimensions.navHeight})`)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
348 .call(this.axes.x2);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
349
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
350 return () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
351 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
352 .select(".axis--x")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
353 .call(this.axes.x)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
354 .selectAll(".tick text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
355 .attr("y", 15);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
356 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
357 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
358 drawWaterlevelCharts() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
359 const waterlevelChartDrawer = isNav => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
360 return d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
361 .lineChunked()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
362 .x(d => this.scale[isNav ? "x2" : "x"](d.date))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
363 .y(d => this.scale[isNav ? "y2" : "y"](d.waterlevel))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
364 .curve(d3.curveLinear)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
365 .isNext(this.isNext(900))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
366 .pointAttrs({ r: isNav ? 1.7 : 2.2 })
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
367 .chunk(d => (d.predicted ? "predicted" : "line"))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
368 .chunkDefinitions({ predicted: {} });
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
369 };
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
370
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
371 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
372 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
373 .attr("class", "line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
374 .datum(this.waterlevels)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
375 .call(waterlevelChartDrawer());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
376
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
377 this.navigation
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
378 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
379 .attr("class", "line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
380 .datum(this.waterlevels)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
381 .call(waterlevelChartDrawer(true));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
382
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
383 return () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
384 this.diagram.select(".line").call(waterlevelChartDrawer());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
385 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
386 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
387 drawNowLines() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
388 const nowLine = d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
389 .line()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
390 .x(d => this.scale.x(d.x))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
391 .y(d => this.scale.y(d.y));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
392
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
393 const nowLabel = selection => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
394 selection.attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
395 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
396 `translate(${this.scale.x(new Date())}, ${this.scale.y(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
397 this.extent.waterlevel[1] - 16
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
398 )})`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
399 );
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
400 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
401
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
402 // draw in main
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
403 this.diagram
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
404 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
405 .datum([
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
406 { x: new Date(), y: this.extent.waterlevel[0] },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
407 { x: new Date(), y: this.extent.waterlevel[1] - 20 }
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
408 ])
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
409 .attr("class", "now-line")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
410 .attr("d", nowLine);
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
411 this.diagram // label
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
412 .append("text")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
413 .text(this.$gettext("Now"))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
414 .attr("class", "now-line-label")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
415 .attr("text-anchor", "middle")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
416 .call(nowLabel);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
417
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
418 // draw in nav
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
419 this.navigation
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
420 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
421 .datum([
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
422 { x: new Date(), y: this.extent.waterlevel[0] },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
423 { x: new Date(), y: this.extent.waterlevel[1] - 20 }
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
424 ])
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
425 .attr("class", "now-line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
426 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
427 "d",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
428 d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
429 .line()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
430 .x(d => this.scale.x2(d.x))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
431 .y(d => this.scale.y2(d.y))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
432 );
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
433
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
434 return () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
435 this.diagram.select(".now-line").attr("d", nowLine);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
436 this.diagram.select(".now-line-label").call(nowLabel);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
437 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
438 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
439 drawPredictionAreas() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
440 const predictionArea = isNav =>
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
441 d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
442 .area()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
443 .defined(d => d.predicted && d.min && d.max)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
444 .x(d => this.scale[isNav ? "x2" : "x"](d.date))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
445 .y0(d => this.scale[isNav ? "y2" : "y"](d.min))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
446 .y1(d => this.scale[isNav ? "y2" : "y"](d.max));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
447
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
448 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
449 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
450 .datum(this.waterlevels)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
451 .attr("class", "prediction-area")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
452 .attr("d", predictionArea());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
453
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
454 this.navigation
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
455 .append("path")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
456 .datum(this.waterlevels)
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
457 .attr("class", "prediction-area")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
458 .attr("d", predictionArea(true));
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
459
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
460 return () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
461 this.diagram.select(".prediction-area").attr("d", predictionArea());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
462 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
463 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
464 drawRefLines(refWaterLevels) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
465 // filling area between HDC and LDC
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
466 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
467 .append("rect")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
468 .attr("class", "hdc-ldc-area")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
469 .attr("x", 0)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
470 .attr("y", this.scale.y(refWaterLevels.HDC))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
471 .attr("width", this.dimensions.width)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
472 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
473 "height",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
474 this.scale.y(refWaterLevels.LDC) - this.scale.y(refWaterLevels.HDC)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
475 );
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
476
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
477 const refWaterlevelLine = d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
478 .line()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
479 .x(d => this.scale.x(d.x))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
480 .y(d => this.scale.y(d.y));
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
481
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
482 // HDC
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
483 this.diagram
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
484 .append("path")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
485 .datum([
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
486 { x: 0, y: refWaterLevels.HDC },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
487 { x: this.extent.date[1], y: refWaterLevels.HDC }
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
488 ])
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
489 .attr("class", "hdc-line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
490 .attr("d", refWaterlevelLine);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
491 this.diagram // label
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
492 .append("text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
493 .text(`HDC (${refWaterLevels.HDC})`)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
494 .attr("class", "ref-waterlevel-label")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
495 .attr("x", 5)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
496 .attr("y", this.scale.y(refWaterLevels.HDC) - 3);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
497 // LDC
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
498 this.diagram
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
499 .append("path")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
500 .datum([
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
501 { x: 0, y: refWaterLevels.LDC },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
502 { x: this.extent.date[1], y: refWaterLevels.LDC }
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
503 ])
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
504 .attr("class", "ldc-line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
505 .attr("d", refWaterlevelLine);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
506 this.diagram // label
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
507 .append("text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
508 .text(`LDC (${refWaterLevels.LDC})`)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
509 .attr("class", "ref-waterlevel-label")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
510 .attr("x", 5)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
511 .attr("y", this.scale.y(refWaterLevels.LDC) - 3);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
512 // MW
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
513 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
514 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
515 .datum([
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
516 { x: 0, y: refWaterLevels.MW },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
517 { x: this.extent.date[1], y: refWaterLevels.MW }
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
518 ])
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
519 .attr("class", "mw-line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
520 .attr("d", refWaterlevelLine);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
521 this.diagram // label
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
522 .append("text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
523 .text(`MW (${refWaterLevels.MW})`)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
524 .attr("class", "ref-waterlevel-label")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
525 .attr("x", 5)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
526 .attr("y", this.scale.y(refWaterLevels.MW) - 3);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
527 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
528 drawNashSutcliffe(hours) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
529 const coeff = this.nashSutcliffe.coeffs.find(c => c.hours === hours);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
530 const dateNow = new Date(this.nashSutcliffe.when);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
531 const dateStart = new Date(dateNow.getTime() - hours * 60 * 60 * 1000);
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
532
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
533 const nashSutcliffeBox = hours => {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
534 return d3
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
535 .area()
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
536 .x(d => this.scale.x(d))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
537 .y0(() => this.dimensions.mainHeight + 0.5)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
538 .y1(() => this.dimensions.mainHeight - 15 * (hours / 24));
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
539 };
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
540
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
541 const nashSutcliffeLabel = (label, date, hours) => {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
542 let days = hours / 24;
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
543 label
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
544 .attr("x", this.scale.x(date) + 3)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
545 .attr("y", this.dimensions.mainHeight - (15 * days + 0.5) + 12);
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
546 };
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
547
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
548 // Show nash-sutcliffe only when x-axis extent is smaller than 35 days
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
549 // (3024000000 ms). Since it shows squares representing 1, 2 and 3 days
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
550 // it does not make sense to show them on a x-axis with hundres of days.
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
551 if (
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
552 coeff.samples &&
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
553 this.scale.x.domain()[1] - this.scale.x.domain()[0] < 3024000000
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
554 ) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
555 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
556 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
557 .datum([dateStart, dateNow])
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
558 .attr("class", "nash-sutcliffe ns" + hours)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
559 .attr("d", nashSutcliffeBox(hours));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
560 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
561 .append("text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
562 .attr("class", "nash-sutcliffe ns" + hours)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
563 .call(nashSutcliffeLabel, dateStart, hours)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
564 .append("tspan")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
565 .text(coeff.value.toFixed(2))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
566 .select(function() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
567 return this.parentNode;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
568 })
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
569 .append("tspan")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
570 .text(` (${coeff.samples})`)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
571 .attr("dy", -1);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
572
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
573 return () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
574 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
575 .select("path.nash-sutcliffe.ns" + hours)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
576 .attr("d", nashSutcliffeBox(hours));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
577 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
578 .select("text.nash-sutcliffe.ns" + hours)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
579 .call(nashSutcliffeLabel, dateStart, hours);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
580 };
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
581 }
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
582 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
583 createZoom(updaters, eventRect) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
584 const brush = d3
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
585 .brushX()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
586 .handleSize(4)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
587 .extent([[0, 0], [this.dimensions.width, this.dimensions.navHeight]]);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
588
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
589 const zoom = d3
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
590 .zoom()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
591 .scaleExtent([1, Infinity])
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
592 .translateExtent([
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
593 [0, 0],
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
594 [this.dimensions.width, this.dimensions.mainHeight]
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
595 ])
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
596 .extent([[0, 0], [this.dimensions.width, this.dimensions.mainHeight]]);
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
597
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
598 brush.on("brush end", () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
599 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
600 return; // ignore brush-by-zoom
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
601 let s = d3.event.selection || this.scale.x2.range();
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
602 this.scale.x.domain(s.map(this.scale.x2.invert, this.scale.x2));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
603 updaters.forEach(u => u && u());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
604 this.svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
605 .select(".zoom")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
606 .call(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
607 zoom.transform,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
608 d3.zoomIdentity
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
609 .scale(this.dimensions.width / (s[1] - s[0]))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
610 .translate(-s[0], 0)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
611 );
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
612 });
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
613
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
614 zoom.on("zoom", () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
615 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
616 return; // ignore zoom-by-brush
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
617 let t = d3.event.transform;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
618 this.scale.x.domain(t.rescaleX(this.scale.x2).domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
619 updaters.forEach(u => u && u());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
620 this.navigation
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
621 .select(".brush")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
622 .call(brush.move, this.scale.x.range().map(t.invertX, t));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
623 });
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
624 zoom.on("start", () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
625 this.svg.select(".chart-dot").style("opacity", 0);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
626 this.svg.select(".chart-tooltip").style("opacity", 0);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
627 });
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
628
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
629 this.navigation
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
630 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
631 .attr("class", "brush")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
632 .call(brush)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
633 .call(brush.move, this.scale.x.range());
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
634
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
635 eventRect.call(zoom);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
636 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
637 createTooltips(eventRect) {
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
638 // create clippable container for the dot
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
639 this.diagram
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
640 .append("g")
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
641 .attr("class", "chart-dots")
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
642 .append("circle")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
643 .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
644 .attr("r", 4);
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
645
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
646 // create container for the tooltip
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
647 const tooltip = this.diagram.append("g").attr("class", "chart-tooltip");
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
648 tooltip
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
649 .append("rect")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
650 .attr("rx", "0.25rem")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
651 .attr("ry", "0.25rem");
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
652
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
653 // create container for multiple text rows
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
654 const tooltipText = tooltip.append("text").attr("text-anchor", "middle");
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
655
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
656 // padding inside the tooltip box and diagram padding to determine left
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
657 // and right offset from the diagram boundaries for the tooltip position.
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
658 const tooltipPadding = 10;
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
659 const diagramPadding = 5;
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
660
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
661 eventRect
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
662 .on("mouseover", () => {
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
663 this.diagram.select(".chart-dot").style("opacity", 1);
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
664 this.diagram.select(".chart-tooltip").style("opacity", 1);
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
665 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
666 .on("mouseout", () => {
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
667 this.diagram.select(".chart-dot").style("opacity", 0);
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
668 this.diagram.select(".chart-tooltip").style("opacity", 0);
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
669 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
670 .on("mousemove", () => {
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
671 // find data point closest to mouse
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
672 const x0 = this.scale.x.invert(
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
673 d3.mouse(document.querySelector(".zoom"))[0]
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
674 ),
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
675 i = d3.bisector(d => d.date).left(this.waterlevels, x0, 1),
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
676 d0 = this.waterlevels[i - 1],
2715
8d96b9254465 client: waterlevel diagram: fixed console error when hovering the chart where no data is available
Markus Kottlaender <markus@intevation.de>
parents: 2710
diff changeset
677 d1 = this.waterlevels[i] || d0,
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
678 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
679
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
680 const coords = {
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
681 x: this.scale.x(d.date),
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
682 y: this.scale.y(d.waterlevel)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
683 };
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
684
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
685 // position the dot
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
686 this.diagram
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
687 .select(".chart-dot")
2691
023a607c4bcc client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
Markus Kottlaender <markus@intevation.de>
parents: 2689
diff changeset
688 .style("opacity", 1)
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
689 .attr("transform", `translate(${coords.x}, ${coords.y})`);
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
690
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
691 // remove current texts
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
692 tooltipText.selectAll("tspan").remove();
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
693
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
694 // write date
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
695 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
696 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
697 .attr("alignment-baseline", "hanging")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
698 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
699 .text(
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
700 d.date.toLocaleString([], {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
701 year: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
702 month: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
703 day: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
704 hour: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
705 minute: "2-digit"
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
706 })
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
707 );
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
708
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
709 if (d.predicted) {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
710 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
711 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
712 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
713 .attr("y", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
714 .attr("dy", "1.3rem")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
715 .attr("alignment-baseline", "hanging")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
716 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
717 .text(d.max + " cm");
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
718 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
719 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
720 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
721 .attr("y", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
722 .attr("dy", "2.3rem")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
723 .attr("alignment-baseline", "hanging")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
724 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
725 .attr("class", "font-weight-bold")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
726 .text(d.waterlevel + " cm");
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
727 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
728 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
729 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
730 .attr("y", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
731 .attr("dy", "3.3rem")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
732 .attr("alignment-baseline", "hanging")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
733 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
734 .text(d.min + " cm");
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
735 } else {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
736 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
737 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
738 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
739 .attr("y", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
740 .attr("dy", "1.3rem")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
741 .attr("alignment-baseline", "hanging")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
742 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
743 .attr("class", "font-weight-bold")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
744 .text(d.waterlevel + " cm");
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
745 }
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
746
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
747 // get text dimensions
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
748 const textBBox = tooltipText.node().getBBox();
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
749 console.log(textBBox);
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
750
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
751 this.diagram
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
752 .selectAll(".chart-tooltip text tspan")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
753 .attr("x", textBBox.width / 2 + tooltipPadding)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
754 .attr("y", tooltipPadding);
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
755
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
756 // position and scale tooltip box
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
757 const xMax =
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
758 this.dimensions.width -
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
759 (textBBox.width + diagramPadding + tooltipPadding * 2);
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
760 const tooltipX = Math.max(
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
761 diagramPadding,
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
762 Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
763 );
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
764 const tooltipY =
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
765 coords.y - (textBBox.height + tooltipPadding * 2) - 10;
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
766 this.diagram
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
767 .select(".chart-tooltip")
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
768 .style("opacity", 1)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
769 .attr("transform", `translate(${tooltipX}, ${tooltipY})`)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
770 .select("rect")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
771 .attr("width", textBBox.width + tooltipPadding * 2)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
772 .attr("height", textBBox.height + tooltipPadding * 2);
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
773 });
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
774 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
775 isNext(seconds) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
776 // helper to check whether points in the chart are "next to each other"
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
777 // for that they need to be exactly the specified amount of seconds apart.
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
778 return (prev, current) => current.date - prev.date === seconds * 1000;
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
779 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
780 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
781 created() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
782 window.addEventListener("resize", debounce(this.drawDiagram), 100);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
783 },
2810
97cf32cf2562 client: waterlevel diagram: draw diagram when component is mounted
Markus Kottlaender <markus@intevation.de>
parents: 2805
diff changeset
784 mounted() {
97cf32cf2562 client: waterlevel diagram: draw diagram when component is mounted
Markus Kottlaender <markus@intevation.de>
parents: 2805
diff changeset
785 this.drawDiagram();
97cf32cf2562 client: waterlevel diagram: draw diagram when component is mounted
Markus Kottlaender <markus@intevation.de>
parents: 2805
diff changeset
786 },
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
787 updated() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
788 this.drawDiagram();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
789 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
790 };
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
791 </script>