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