Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 2792:cfd9ac0c92ee

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagram: avoid code duplication
author Markus Kottlaender <markus@intevation.de>
date Mon, 25 Mar 2019 12:16:22 +0100
parents 2feb9f8f6c66
children 8791becc40b1
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
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
21 stroke-width: 1
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
22 stroke-dasharray: 4, 4
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
23 stroke-opacity: 1
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
24 circle
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
25 stroke-width: 0
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
26 fill: steelblue
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
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
106 tspan:last-child
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
107 font-weight: bold
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 </style>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
110 <script>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 /* 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
112 * without warranty, see README.md and license for details.
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
113 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 * SPDX-License-Identifier: AGPL-3.0-or-later
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 * License-Filename: LICENSES/AGPL-3.0.txt
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
117 * Copyright (C) 2018 by via donau
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118 * – Österreichische Wasserstraßen-Gesellschaft mbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 * Software engineering by Intevation GmbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 * Author(s):
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 * Markus Kottländer <markus.kottlaender@intevation.de>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 */
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
125 import { mapState, mapGetters } from "vuex";
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
126 import * as d3Base from "d3";
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
127 import { lineChunked } from "d3-line-chunked";
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 import debounce from "debounce";
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
130 // 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
131 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
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 {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 computed: {
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
136 ...mapState("gauges", [
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
137 "waterlevels",
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
138 "dateFrom",
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
139 "dateTo",
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
140 "nashSutcliffe"
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
141 ]),
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
142 ...mapGetters("gauges", ["selectedGauge"])
2596
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
143 },
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
144 watch: {
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
145 waterlevels() {
2596
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
146 this.drawDiagram();
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
147 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
148 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
149 methods: {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
150 drawDiagram() {
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
151 // TODO: Optimize code. I'm pretty sure all of this can be done in a much
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
152 // more elegant way and with less lines of code.
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
153
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
154 // remove old diagram
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
155 d3.select(".diagram-container svg").remove();
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
156
2701
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
157 if (!this.selectedGauge || !this.waterlevels.length) return;
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
158
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
159 // get HDC/LDC/MW of the gauge
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
160 let refWaterLevels = JSON.parse(
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
161 this.selectedGauge.properties.reference_water_levels
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
162 );
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
163
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
164 // CREATE SVG AND SET DIMENSIONS/MARGINS
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
165
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
166 let svgWidth = document.querySelector(".diagram-container").clientWidth;
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
167 let svgHeight = document.querySelector(".diagram-container").clientHeight;
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
168 let svg = d3
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
169 .select(".diagram-container")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
170 .append("svg")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
171 .attr("width", "100%")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
172 .attr("height", "100%");
2653
7fd47d9641ac client: waterlevel diagram: made diagram a bit higher
Markus Kottlaender <markus@intevation.de>
parents: 2652
diff changeset
173 let mainMargin = { top: 20, right: 20, bottom: 110, left: 80 },
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
174 navMargin = {
2653
7fd47d9641ac client: waterlevel diagram: made diagram a bit higher
Markus Kottlaender <markus@intevation.de>
parents: 2652
diff changeset
175 top: svgHeight - mainMargin.top - 65,
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176 right: 20,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
177 bottom: 30,
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
178 left: 80
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
179 },
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
180 width = +svgWidth - mainMargin.left - mainMargin.right,
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
181 mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom,
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
182 navHeight = +svgHeight - navMargin.top - navMargin.bottom;
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
183
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
184 // PREPARING AXES/SCALING
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
185
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
186 // scaling helpers to convert real values to pixels
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
187 // based on the diagrams dimensions
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
188 let x = d3.scaleTime().range([0, width]),
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
189 x2 = d3.scaleTime().range([0, width]),
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
190 y = d3.scaleLinear().range([mainHeight, 0]),
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
191 y2 = d3.scaleLinear().range([navHeight, 0]);
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
192 // find min/max values for the waterlevel axis
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents: 2756
diff changeset
193 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
194 let WaterlevelMinMax = d3.extent(
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
195 [
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
196 ...this.waterlevels,
2728
18dc704e637e client: waterlevel diagram: calculate y-axis offset of HDC/LDC as percentage
Markus Kottlaender <markus@intevation.de>
parents: 2715
diff changeset
197 {
18dc704e637e client: waterlevel diagram: calculate y-axis offset of HDC/LDC as percentage
Markus Kottlaender <markus@intevation.de>
parents: 2715
diff changeset
198 waterlevel:
18dc704e637e client: waterlevel diagram: calculate y-axis offset of HDC/LDC as percentage
Markus Kottlaender <markus@intevation.de>
parents: 2715
diff changeset
199 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8
18dc704e637e client: waterlevel diagram: calculate y-axis offset of HDC/LDC as percentage
Markus Kottlaender <markus@intevation.de>
parents: 2715
diff changeset
200 },
18dc704e637e client: waterlevel diagram: calculate y-axis offset of HDC/LDC as percentage
Markus Kottlaender <markus@intevation.de>
parents: 2715
diff changeset
201 {
18dc704e637e client: waterlevel diagram: calculate y-axis offset of HDC/LDC as percentage
Markus Kottlaender <markus@intevation.de>
parents: 2715
diff changeset
202 waterlevel: Math.max(
18dc704e637e client: waterlevel diagram: calculate y-axis offset of HDC/LDC as percentage
Markus Kottlaender <markus@intevation.de>
parents: 2715
diff changeset
203 refWaterLevels.LDC -
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
204 (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
2728
18dc704e637e client: waterlevel diagram: calculate y-axis offset of HDC/LDC as percentage
Markus Kottlaender <markus@intevation.de>
parents: 2715
diff changeset
205 0
18dc704e637e client: waterlevel diagram: calculate y-axis offset of HDC/LDC as percentage
Markus Kottlaender <markus@intevation.de>
parents: 2715
diff changeset
206 )
18dc704e637e client: waterlevel diagram: calculate y-axis offset of HDC/LDC as percentage
Markus Kottlaender <markus@intevation.de>
parents: 2715
diff changeset
207 }
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
208 ],
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
209 d => d.waterlevel
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
210 );
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
211 // setting the min and max values for the diagram axes
2710
f393fabfdd35 client: waterlevel diagram: chart extent based on selected dates instead of data
Markus Kottlaender <markus@intevation.de>
parents: 2701
diff changeset
212 let dateTo = new Date(this.dateTo.getTime() + 86400);
f393fabfdd35 client: waterlevel diagram: chart extent based on selected dates instead of data
Markus Kottlaender <markus@intevation.de>
parents: 2701
diff changeset
213 x.domain(d3.extent([this.dateFrom, dateTo]));
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
214 y.domain(WaterlevelMinMax);
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
215 x2.domain(x.domain());
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
216 y2.domain(y.domain());
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
217 // creating the axes based on these scales
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
218 let xAxis = d3
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
219 .axisTop(x)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
220 .tickSizeInner(mainHeight)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
221 .tickSizeOuter(0);
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
222 let xAxis2 = d3.axisBottom(x2);
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
223 let yAxis = d3
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
224 .axisRight(y)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
225 .tickSizeInner(width)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
226 .tickSizeOuter(0);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
227
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
228 // PREPARING CHART FUNCTIONS
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
229
2756
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
230 // points are "next to each other" when they are exactly 15 minutes apart
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
231 const isNext = (prev, current) =>
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
232 current.date - prev.date === 15 * 60 * 1000;
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
233
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
234 const preditionStyle = {
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
235 predicted: {
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
236 pointStyles: {
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
237 fill: "steelblue",
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
238 "fill-opacity": 0.6
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
239 }
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
240 }
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
241 };
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
242
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
243 // waterlevel line in big chart
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
244 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
245 var mainLineChart = d3
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
246 .lineChunked()
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
247 .x(d => x(d.date))
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
248 .y(d => y(d.waterlevel))
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
249 .curve(d3.curveLinear)
2756
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
250 .isNext(isNext)
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
251 .pointAttrs({ r: 2.2 })
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
252 .chunk(d => (d.predicted ? "predicted" : "line"))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
253 .chunkDefinitions(preditionStyle);
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
254 // waterlevel line in small chart
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
255 let navLineChart = d3
2756
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
256 .lineChunked()
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
257 .x(d => x2(d.date))
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
258 .y(d => y2(d.waterlevel))
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
259 .curve(d3.curveMonotoneX)
2756
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
260 .isNext(isNext)
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
261 .pointAttrs({ r: 1.7 })
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
262 .chunk(d => (d.predicted ? "predicted" : "line"))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
263 .chunkDefinitions(preditionStyle);
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
264 // hdc/ldc/mw
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
265 let refWaterlevelLine = d3
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
266 .line()
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
267 .x(d => x(d.x))
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
268 .y(d => y(d.y));
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
269 // now
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
270 let nowLine = d3
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
271 .line()
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
272 .x(d => x(d.x))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
273 .y(d => y(d.y));
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
274 let nowLineNav = d3
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
275 .line()
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
276 .x(d => x2(d.x))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
277 .y(d => y2(d.y));
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
278 let nowLineLabel = selection => {
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
279 selection.attr(
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
280 "transform",
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
281 `translate(${x(new Date())}, ${y(WaterlevelMinMax[1] - 16)})`
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
282 );
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
283 };
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
284 // prediction area
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
285 let predictionArea = d3
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
286 .area()
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
287 .defined(d => d.predicted && d.min && d.max)
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
288 .x(d => x(d.date))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
289 .y0(d => y(d.min))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
290 .y1(d => y(d.max));
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
291 let predictionAreaNav = d3
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
292 .area()
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
293 .defined(d => d.predicted && d.min && d.max)
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
294 .x(d => x2(d.date))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
295 .y0(d => y2(d.min))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
296 .y1(d => y2(d.max));
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
297
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
298 // DRAWING MAINCHART
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
299
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
300 // define visible chart area
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
301 // everything outside this area will be hidden (clipped)
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
302 svg
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
303 .append("defs")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
304 .append("clipPath")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
305 .attr("id", "clip")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
306 .append("rect")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
307 .attr("width", width)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
308 .attr("height", mainHeight);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
309
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
310 let mainChart = svg
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
311 .append("g")
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
312 .attr("class", "main")
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
313 .attr("transform", `translate(${mainMargin.left}, ${mainMargin.top})`);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
314
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
315 // axes
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
316 mainChart
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
317 .append("g")
2652
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
318 .attr("class", "axis--x")
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
319 .attr("transform", `translate(0, ${mainHeight})`)
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
320 .call(xAxis)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
321 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
322 .attr("y", 15);
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
323 mainChart // label
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
324 .append("text")
2642
ffef5f89b31c client: waterlevel diagram: changed diagram title and y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2641
diff changeset
325 .text(this.$gettext("Waterlevel [cm]"))
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
326 .attr("text-anchor", "middle")
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
327 .attr("transform", `translate(-45, ${mainHeight / 2}) rotate(-90)`);
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
328 mainChart
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
329 .append("g")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
330 .call(yAxis)
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
331 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
332 .attr("x", -25);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
333
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
334 // reference waterlevels
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
335 // filling area between HDC and LDC
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
336 mainChart
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
337 .append("rect")
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
338 .attr("class", "hdc-ldc-area")
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
339 .attr("x", 0)
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
340 .attr("y", y(refWaterLevels.HDC))
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
341 .attr("width", width)
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
342 .attr("height", y(refWaterLevels.LDC) - y(refWaterLevels.HDC));
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
343
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
344 // HDC
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
345 mainChart
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
346 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
347 .datum([
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
348 { x: 0, y: refWaterLevels.HDC },
2710
f393fabfdd35 client: waterlevel diagram: chart extent based on selected dates instead of data
Markus Kottlaender <markus@intevation.de>
parents: 2701
diff changeset
349 { x: dateTo, y: refWaterLevels.HDC }
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
350 ])
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
351 .attr("class", "hdc-line")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
352 .attr("d", refWaterlevelLine);
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
353 mainChart // label
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
354 .append("text")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
355 .text("HDC")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
356 .attr("class", "ref-waterlevel-label")
2710
f393fabfdd35 client: waterlevel diagram: chart extent based on selected dates instead of data
Markus Kottlaender <markus@intevation.de>
parents: 2701
diff changeset
357 .attr("x", x(dateTo) - 20)
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
358 .attr("y", y(refWaterLevels.HDC) - 3);
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
359 // LDC
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
360 mainChart
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
361 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
362 .datum([
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
363 { x: 0, y: refWaterLevels.LDC },
2710
f393fabfdd35 client: waterlevel diagram: chart extent based on selected dates instead of data
Markus Kottlaender <markus@intevation.de>
parents: 2701
diff changeset
364 { x: dateTo, y: refWaterLevels.LDC }
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
365 ])
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
366 .attr("class", "ldc-line")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
367 .attr("d", refWaterlevelLine);
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
368 mainChart // label
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
369 .append("text")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
370 .text("LDC")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
371 .attr("class", "ref-waterlevel-label")
2710
f393fabfdd35 client: waterlevel diagram: chart extent based on selected dates instead of data
Markus Kottlaender <markus@intevation.de>
parents: 2701
diff changeset
372 .attr("x", x(dateTo) - 20)
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
373 .attr("y", y(refWaterLevels.LDC) - 3);
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
374 // MW
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
375 mainChart
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
376 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
377 .datum([
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
378 { x: 0, y: refWaterLevels.MW },
2710
f393fabfdd35 client: waterlevel diagram: chart extent based on selected dates instead of data
Markus Kottlaender <markus@intevation.de>
parents: 2701
diff changeset
379 { x: dateTo, y: refWaterLevels.MW }
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
380 ])
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
381 .attr("class", "mw-line")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
382 .attr("d", refWaterlevelLine);
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
383 mainChart // label
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
384 .append("text")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
385 .text("MW")
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
386 .attr("class", "ref-waterlevel-label")
2710
f393fabfdd35 client: waterlevel diagram: chart extent based on selected dates instead of data
Markus Kottlaender <markus@intevation.de>
parents: 2701
diff changeset
387 .attr("x", x(dateTo) - 20)
2611
e8c97481438f client: waterlevel diagram: added labels for reference water levels
Markus Kottlaender <markus@intevation.de>
parents: 2610
diff changeset
388 .attr("y", y(refWaterLevels.MW) - 3);
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
389
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
390 // now
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
391 mainChart
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
392 .append("path")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
393 .datum([
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
394 { x: new Date(), y: WaterlevelMinMax[0] },
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
395 { x: new Date(), y: WaterlevelMinMax[1] - 20 }
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
396 ])
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
397 .attr("class", "now-line")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
398 .attr("d", nowLine);
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
399 mainChart // label
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
400 .append("text")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
401 .text(this.$gettext("Now"))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
402 .attr("class", "now-line-label")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
403 .attr("text-anchor", "middle")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
404 .call(nowLineLabel);
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
405
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
406 // prediction area
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
407 mainChart
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
408 .append("path")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
409 .datum(this.waterlevels)
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
410 .attr("class", "prediction-area")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
411 .attr("d", predictionArea);
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
412
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
413 // waterlevel chart
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
414 mainChart
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
415 .append("g")
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
416 .attr("class", "line")
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
417 .datum(this.waterlevels)
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
418 .call(mainLineChart);
2645
6374fc404fdc client: waterlevel diagram: draw filled area between HDC and LDC
Markus Kottlaender <markus@intevation.de>
parents: 2642
diff changeset
419
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
420 // DRAWING NAVCHART
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
421
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
422 let navChart = svg
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
423 .append("g")
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
424 .attr("class", "nav")
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
425 .attr("transform", `translate(${navMargin.left}, ${navMargin.top})`);
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
426
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
427 // axis (nav chart only has x-axis)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
428 navChart
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
429 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
430 .attr("class", "axis axis--x")
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
431 .attr("transform", `translate(0, ${navHeight})`)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
432 .call(xAxis2);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
433
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
434 // now
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
435 navChart
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
436 .append("path")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
437 .datum([
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
438 { x: new Date(), y: WaterlevelMinMax[0] },
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
439 { x: new Date(), y: WaterlevelMinMax[1] - 20 }
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
440 ])
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
441 .attr("class", "now-line")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
442 .attr("d", nowLineNav);
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
443
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
444 // prediction area
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
445 navChart
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
446 .append("path")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
447 .datum(this.waterlevels)
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
448 .attr("class", "prediction-area")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
449 .attr("d", predictionAreaNav);
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
450
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
451 // waterlevel chart
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
452 navChart
2756
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
453 .append("g")
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
454 .attr("class", "line")
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
455 .datum(this.waterlevels)
2756
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
456 .call(navLineChart);
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
457
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
458 // NASH SUTCLIFFE
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
459
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
460 let nashSut24 = this.nashSutcliffe.coeffs.find(c => c.hours === 24);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
461 let nashSut48 = this.nashSutcliffe.coeffs.find(c => c.hours === 48);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
462 let nashSut72 = this.nashSutcliffe.coeffs.find(c => c.hours === 72);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
463
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
464 let nashSutDateNow = new Date(this.nashSutcliffe.when);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
465 let nashSutDate24 = new Date(this.nashSutcliffe.when);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
466 let nashSutDate48 = new Date(this.nashSutcliffe.when);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
467 let nashSutDate72 = new Date(this.nashSutcliffe.when);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
468 nashSutDate24.setDate(nashSutDate24.getDate() - 1);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
469 nashSutDate48.setDate(nashSutDate48.getDate() - 2);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
470 nashSutDate72.setDate(nashSutDate72.getDate() - 3);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
471
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
472 const nashSutcliffeBox = hours => {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
473 return d3
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
474 .area()
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
475 .x(d => x(d))
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
476 .y0(() => mainHeight + 0.5)
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
477 .y1(() => mainHeight - 15 * (hours / 24));
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
478 };
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
479
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
480 const nashSutcliffeLabel = (label, date, hours) => {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
481 let days = hours / 24;
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
482 label
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
483 .attr("x", x(date) + 3)
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
484 .attr("y", mainHeight - (15 * days + 0.5) + 12);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
485 };
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
486
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
487 // 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
488 // (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
489 // it does not make sense to show them on a x-axis with hundres of days.
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
490 if (this.nashSutcliffe && x.domain()[1] - x.domain()[0] < 3024000000) {
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
491 if (nashSut24.samples) {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
492 mainChart
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
493 .append("path")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
494 .datum([nashSutDate24, nashSutDateNow])
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
495 .attr("class", "nash-sutcliffe ns24")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
496 .attr("d", nashSutcliffeBox(24));
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
497 mainChart
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
498 .append("text")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
499 .attr("class", "nash-sutcliffe ns24")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
500 .call(nashSutcliffeLabel, nashSutDate24, 24)
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
501 .append("tspan")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
502 .text(nashSut24.value.toFixed(2))
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
503 .select(function() {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
504 return this.parentNode;
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
505 })
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
506 .append("tspan")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
507 .text(` (${nashSut24.samples})`)
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
508 .attr("dy", -1);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
509 }
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
510 if (nashSut48.samples) {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
511 mainChart
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
512 .append("path")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
513 .datum([nashSutDate48, nashSutDateNow])
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
514 .attr("class", "nash-sutcliffe ns48")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
515 .attr("d", nashSutcliffeBox(48));
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
516 mainChart
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
517 .append("text")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
518 .attr("class", "nash-sutcliffe ns48")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
519 .call(nashSutcliffeLabel, nashSutDate48, 48)
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
520 .append("tspan")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
521 .text(nashSut48.value.toFixed(2))
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
522 .select(function() {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
523 return this.parentNode;
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
524 })
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
525 .append("tspan")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
526 .text(` (${nashSut48.samples})`)
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
527 .attr("dy", -1);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
528 }
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
529 if (nashSut72.samples) {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
530 mainChart
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
531 .append("path")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
532 .datum([nashSutDate72, nashSutDateNow])
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
533 .attr("class", "nash-sutcliffe ns72")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
534 .attr("d", nashSutcliffeBox(72));
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
535 mainChart
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
536 .append("text")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
537 .attr("class", "nash-sutcliffe ns72")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
538 .call(nashSutcliffeLabel, nashSutDate72, 72)
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
539 .append("tspan")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
540 .text(nashSut72.value.toFixed(2))
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
541 .select(function() {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
542 return this.parentNode;
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
543 })
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
544 .append("tspan")
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
545 .text(` (${nashSut72.samples})`)
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
546 .attr("dy", -1);
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
547 }
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
548 }
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
549
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
550 // INTERACTIVITY
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
551
2792
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
552 const updateChart = () => {
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
553 mainChart.select(".line").call(mainLineChart);
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
554 mainChart.select(".now-line").attr("d", nowLine);
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
555 mainChart.select(".now-line-label").call(nowLineLabel);
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
556 mainChart.select(".prediction-area").attr("d", predictionArea);
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
557 mainChart
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
558 .select("path.nash-sutcliffe.ns24")
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
559 .attr("d", nashSutcliffeBox(24));
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
560 mainChart
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
561 .select("text.nash-sutcliffe.ns24")
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
562 .call(nashSutcliffeLabel, nashSutDate24, 24);
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
563 mainChart
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
564 .select("path.nash-sutcliffe.ns48")
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
565 .attr("d", nashSutcliffeBox(48));
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
566 mainChart
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
567 .select("text.nash-sutcliffe.ns48")
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
568 .call(nashSutcliffeLabel, nashSutDate48, 48);
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
569 mainChart
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
570 .select("path.nash-sutcliffe.ns72")
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
571 .attr("d", nashSutcliffeBox(72));
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
572 mainChart
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
573 .select("text.nash-sutcliffe.ns72")
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
574 .call(nashSutcliffeLabel, nashSutDate72, 72);
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
575 mainChart
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
576 .select(".axis--x")
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
577 .call(xAxis)
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
578 .selectAll(".tick text")
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
579 .attr("y", 15);
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
580 };
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
581
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
582 // selecting time period in nav chart
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
583 let brush = d3
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
584 .brushX()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
585 .handleSize(4)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
586 .extent([[0, 0], [width, navHeight]])
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
587 .on("brush end", () => {
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
588 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
589 return; // ignore brush-by-zoom
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
590 let s = d3.event.selection || x2.range();
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
591 x.domain(s.map(x2.invert, x2));
2792
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
592 updateChart();
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
593 svg
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
594 .select(".zoom")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
595 .call(
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
596 zoom.transform,
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
597 d3.zoomIdentity.scale(width / (s[1] - s[0])).translate(-s[0], 0)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
598 );
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
599 });
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
600
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
601 // zooming with mousewheel in main chart
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
602 let zoom = d3
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
603 .zoom()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
604 .scaleExtent([1, Infinity])
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
605 .translateExtent([[0, 0], [width, mainHeight]])
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
606 .extent([[0, 0], [width, mainHeight]])
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
607 .on("zoom", () => {
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
608 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
609 return; // ignore zoom-by-brush
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
610 let t = d3.event.transform;
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
611 x.domain(t.rescaleX(x2).domain());
2792
cfd9ac0c92ee client: waterlevel diagram: avoid code duplication
Markus Kottlaender <markus@intevation.de>
parents: 2775
diff changeset
612 updateChart();
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
613 navChart
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
614 .select(".brush")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
615 .call(brush.move, x.range().map(t.invertX, t));
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
616 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
617 .on("start", () => {
2691
023a607c4bcc client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
Markus Kottlaender <markus@intevation.de>
parents: 2689
diff changeset
618 svg.select(".chart-dot").style("opacity", 0);
023a607c4bcc client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
Markus Kottlaender <markus@intevation.de>
parents: 2689
diff changeset
619 svg.select(".chart-tooltip").style("opacity", 0);
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
620 });
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
621
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
622 navChart
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
623 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
624 .attr("class", "brush")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
625 .call(brush)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
626 .call(brush.move, x.range());
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
627
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
628 let zoomRect = svg
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
629 .append("rect")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
630 .attr("class", "zoom")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
631 .attr("width", width)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
632 .attr("height", mainHeight)
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
633 .attr("transform", `translate(${mainMargin.left}, ${mainMargin.top})`)
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
634 .call(zoom);
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
635
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
636 // TOOLTIPS
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
637
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
638 let dots = mainChart.append("g").attr("class", "chart-dots");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
639 dots
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
640 .append("circle")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
641 .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
642 .attr("r", 4);
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
643 let tooltips = mainChart.append("g").attr("class", "chart-tooltip");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
644 tooltips
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
645 .append("rect")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
646 .attr("x", -25)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
647 .attr("y", -25)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
648 .attr("rx", 4)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
649 .attr("ry", 4)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
650 .attr("width", 105)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
651 .attr("height", 40);
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
652 let tooltipText = tooltips.append("text");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
653 tooltipText
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
654 .append("tspan")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
655 .attr("x", -15)
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
656 .attr("y", -8);
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
657 tooltipText
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
658 .append("tspan")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
659 .attr("x", 8)
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
660 .attr("y", 8);
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
661
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
662 let bisectDate = d3.bisector(d => d.date).left;
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
663 zoomRect
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
664 .on("mouseover", () => {
2691
023a607c4bcc client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
Markus Kottlaender <markus@intevation.de>
parents: 2689
diff changeset
665 svg.select(".chart-dot").style("opacity", 1);
023a607c4bcc client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
Markus Kottlaender <markus@intevation.de>
parents: 2689
diff changeset
666 svg.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
667 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
668 .on("mouseout", () => {
2691
023a607c4bcc client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
Markus Kottlaender <markus@intevation.de>
parents: 2689
diff changeset
669 svg.select(".chart-dot").style("opacity", 0);
023a607c4bcc client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
Markus Kottlaender <markus@intevation.de>
parents: 2689
diff changeset
670 svg.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
671 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
672 .on("mousemove", () => {
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
673 let x0 = x.invert(d3.mouse(document.querySelector(".zoom"))[0]),
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
674 i = bisectDate(this.waterlevels, x0, 1),
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
675 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
676 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
677 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
678
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
679 svg
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
680 .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
681 .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
682 .attr("transform", `translate(${x(d.date)}, ${y(d.waterlevel)})`);
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
683 svg
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
684 .select(".chart-tooltip")
2691
023a607c4bcc client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
Markus Kottlaender <markus@intevation.de>
parents: 2689
diff changeset
685 .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
686 .attr(
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
687 "transform",
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
688 `translate(${x(d.date) - 25}, ${y(d.waterlevel) - 25})`
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
689 );
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
690 svg.select(".chart-tooltip text tspan:first-child").text(
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
691 d.date.toLocaleString([], {
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
692 year: "2-digit",
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
693 month: "2-digit",
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
694 day: "2-digit",
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
695 hour: "2-digit",
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
696 minute: "2-digit"
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
697 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
698 );
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
699 svg
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
700 .select(".chart-tooltip text tspan:last-child")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
701 .text(d.waterlevel + " cm");
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
702 });
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
703 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
704 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
705 created() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
706 window.addEventListener("resize", debounce(this.drawDiagram), 100);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
707 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
708 mounted() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
709 this.drawDiagram();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
710 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
711 updated() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
712 this.drawDiagram();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
713 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
714 };
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
715 </script>