Mercurial > gemma
annotate client/src/components/gauge/Waterlevel.vue @ 5736:55892008ec96 default tip
Fixed a bunch of corner cases in WG import.
author | Sascha Wilde <wilde@sha-bang.de> |
---|---|
date | Wed, 29 May 2024 19:02:42 +0200 |
parents | de86a96d55c3 |
children |
rev | line source |
---|---|
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
2 <div class="d-flex flex-column flex-fill"> |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
3 <UIBoxHeader |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
4 icon="ruler-vertical" |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
5 :title="title" |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
6 :closeCallback="close" |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
7 class="rounded-0" |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
8 /> |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
9 <div class="d-flex flex-fill"> |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
10 <DiagramLegend id="diagramlegendId"> |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
11 <div class="legend"> |
3323
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3304
diff
changeset
|
12 <span |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3304
diff
changeset
|
13 style="background-color: steelblue; width: 20px; height: 20px;" |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3304
diff
changeset
|
14 ></span> |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
15 <span class="fix-trans-space" style="display:inline;" v-translate |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
16 >Waterlevel</span |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
17 > |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
18 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
19 <div class="legend"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
20 <span |
3323
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3304
diff
changeset
|
21 style="width: 8px; height: 8px; background-color: rgba(70, 130, 180, 0.6); border: solid 7px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;" |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
22 ></span> |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
23 <span class="fix-trans-space" style="display:inline;" v-translate |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
24 >Prediction</span |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
25 > |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
26 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
27 <div class="legend"> |
3323
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3304
diff
changeset
|
28 <span |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3304
diff
changeset
|
29 style="background-color: rgba(0, 255, 0, 0.1); width: 20px; height: 20px;" |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3304
diff
changeset
|
30 ></span> |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
31 <span class="fix-trans-space" style="display:inline;" v-translate |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
32 >Navigable Range</span |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
33 > |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
34 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
35 <div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
36 <select |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
37 @change="applyChange" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
38 v-model="form.template" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
39 class="form-control d-block custom-select-sm w-100" |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
40 > |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
41 <option |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
42 v-for="template in templates" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
43 :value="template" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
44 :key="template.name" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
45 > |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
46 {{ template.name }} |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
47 </option> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
48 </select> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
49 <button |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
50 @click="downloadPDF" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
51 type="button" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
52 class="btn btn-sm btn-info d-block w-100 mt-2" |
3404
0c9467003d14
client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents:
3403
diff
changeset
|
53 :disabled="!waterlevels.length" |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
54 > |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
55 <translate>Export to PDF</translate> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
56 </button> |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
57 <a |
3404
0c9467003d14
client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents:
3403
diff
changeset
|
58 :class="[ |
0c9467003d14
client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents:
3403
diff
changeset
|
59 'btn btn-sm btn-info d-block w-100 mt-2', |
0c9467003d14
client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents:
3403
diff
changeset
|
60 { disabled: !waterlevels.length } |
0c9467003d14
client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents:
3403
diff
changeset
|
61 ]" |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
62 :href="csvLink" |
4794
a2b5021de297
client: waterlevel: improve button style and downloaded file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4792
diff
changeset
|
63 :download="`${fileName}.csv`" |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
64 > |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
65 <translate>Export as CSV</translate> |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
66 </a> |
4792
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
67 <a |
4808
db450fcc8ed7
client: add title for the exported image
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4805
diff
changeset
|
68 @click="downloadImage('waterlevelpng', title)" |
4805
7de099c4824c
client: image-export: improve hyperlink ids for download
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4794
diff
changeset
|
69 id="waterlevelpng" |
4792
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
70 :class="[ |
4794
a2b5021de297
client: waterlevel: improve button style and downloaded file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4792
diff
changeset
|
71 'btn btn-sm btn-info text-white d-block w-100 mt-2', |
4792
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
72 { disabled: !waterlevels.length } |
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
73 ]" |
4794
a2b5021de297
client: waterlevel: improve button style and downloaded file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4792
diff
changeset
|
74 :download="`${fileName}.png`" |
4792
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
75 > |
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
76 <translate>Export as Image</translate> |
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
77 </a> |
3793
d428f283fe10
client: remove `export SVG` button for waterlevel
Bernhard Reiter <bernhard@intevation.de>
parents:
3787
diff
changeset
|
78 <!-- |
3565
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
79 <button |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
80 @click="downloadSVG" |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
81 type="button" |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
82 class="btn btn-sm btn-info d-block w-100 mt-2" |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
83 :disabled="!waterlevels.length" |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
84 > |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
85 <translate>Export as SVG</translate> |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
86 </button> |
3793
d428f283fe10
client: remove `export SVG` button for waterlevel
Bernhard Reiter <bernhard@intevation.de>
parents:
3787
diff
changeset
|
87 --> |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
88 </div> |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
89 <div class="btn-group-toggle w-100 mt-2"> |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
90 <label |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
91 class="btn btn-outline-secondary btn-sm" |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
92 :class="{ active: showNSC }" |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
93 ><input |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
94 type="checkbox" |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
95 v-model="showNSC" |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
96 autocomplete="off" |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
97 />Nash-Sutcliffe |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
98 </label> |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
99 </div> |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
100 </DiagramLegend> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
101 <div |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
102 class="d-flex flex-fill justify-content-center align-items-center" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
103 :id="containerId" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
104 > |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
105 <div v-if="!waterlevels.length"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
106 <translate>No data available.</translate> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
107 </div> |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
108 </div> |
2701
e622689d73bd
client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents:
2695
diff
changeset
|
109 </div> |
e622689d73bd
client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents:
2695
diff
changeset
|
110 </div> |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 </template> |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 <script> |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
114 /* 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
|
115 * without warranty, see README.md and license for details. |
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 * SPDX-License-Identifier: AGPL-3.0-or-later |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 * License-Filename: LICENSES/AGPL-3.0.txt |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
119 * |
3112
e838609bc10d
client: fix license header for waterlevel.vue and hydrologicalconditions.vue
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3110
diff
changeset
|
120 * Copyright (C) 2019 by via donau |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
121 * – Österreichische Wasserstraßen-Gesellschaft mbH |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 * Software engineering by Intevation GmbH |
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 * Author(s): |
3564
f50bde7eed0d
client: improve copyright header for gauge/Waterlevel.vue
Bernhard Reiter <bernhard@intevation.de>
parents:
3563
diff
changeset
|
125 * * Bernhard Reiter <bernhard@intevation.de> |
f50bde7eed0d
client: improve copyright header for gauge/Waterlevel.vue
Bernhard Reiter <bernhard@intevation.de>
parents:
3563
diff
changeset
|
126 * * Markus Kottländer <markus.kottlaender@intevation.de> |
f50bde7eed0d
client: improve copyright header for gauge/Waterlevel.vue
Bernhard Reiter <bernhard@intevation.de>
parents:
3563
diff
changeset
|
127 * * Fadi Abbud <fadi.abbud@intevation.de> |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 */ |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
129 |
4721
b2119cf5c7fb
mark date for translation
Thomas Junk <thomas.junk@intevation.de>
parents:
4713
diff
changeset
|
130 import app from "@/main"; |
2604
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
131 import { mapState, mapGetters } from "vuex"; |
2684
c4da269238a4
client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents:
2653
diff
changeset
|
132 import * as d3Base from "d3"; |
c4da269238a4
client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents:
2653
diff
changeset
|
133 import { lineChunked } from "d3-line-chunked"; |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
134 import debounce from "debounce"; |
3565
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
135 import { saveAs } from "file-saver"; |
4153
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
136 import { diagram, pdfgen, templateLoader, refwaterlevels } from "@/lib/mixins"; |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
137 import { HTTP } from "@/lib/http"; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
138 import { displayError } from "@/lib/errors"; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
139 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; |
4665
c47c8085cc7e
client: translation: implement marking of diagram labels
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4593
diff
changeset
|
140 import { localeDateString } from "@/lib/datelocalization"; |
4792
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
141 |
2684
c4da269238a4
client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents:
2653
diff
changeset
|
142 // 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
|
143 // 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
|
144 // 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
|
145 const d3 = Object.assign(d3Base, { lineChunked }); |
c4da269238a4
client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents:
2653
diff
changeset
|
146 |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
147 let temp = null; |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
148 |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
149 export default { |
4153
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
150 mixins: [diagram, pdfgen, templateLoader, refwaterlevels], |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
151 components: { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
152 DiagramLegend: () => import("@/components/DiagramLegend") |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
153 }, |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
154 data() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
155 return { |
4384
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
156 dateFromD: null, |
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
157 dateToD: null, |
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
158 selectedGaugeD: null, |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
159 containerId: "waterlevel-diagram-container", |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
160 resizeListenerFunction: null, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
161 form: { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
162 template: null |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
163 }, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
164 templates: [], |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
165 defaultTemplate: defaultDiagramTemplate, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
166 pdf: { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
167 doc: null, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
168 width: 420, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
169 height: 297 |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
170 }, |
4225
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
171 templateData: null, |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
172 zoomStore: null, |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
173 showNSC: true |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
174 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
175 }, |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
176 computed: { |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
177 ...mapState("application", ["paneSetup"]), |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
178 ...mapState("gauges", [ |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
179 "dateFrom", |
4384
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
180 "dateTo", |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
181 "waterlevels", |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
182 "waterlevelsCSV", |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
183 "nashSutcliffe" |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
184 ]), |
3049
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
185 ...mapGetters("gauges", ["selectedGauge"]), |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
186 title() { |
4384
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
187 if (!this.selectedGaugeD) return; |
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
188 return `${this.selectedGaugeD.properties.objname}: ${this.$gettext( |
3148
cdfb0093b7b1
client: gauge diagrams: added information to titles
Markus Kottlaender <markus@intevation.de>
parents:
3147
diff
changeset
|
189 "Waterlevel" |
4384
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
190 )} (${this.dateFromD.toLocaleDateString()} - ${this.dateToD.toLocaleDateString()})`; |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
191 }, |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
192 csvLink() { |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
193 return ( |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
194 "data:text/csv;charset=utf-8," + encodeURIComponent(this.waterlevelsCSV) |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
195 ); |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
196 }, |
4794
a2b5021de297
client: waterlevel: improve button style and downloaded file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4792
diff
changeset
|
197 fileName() { |
a2b5021de297
client: waterlevel: improve button style and downloaded file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4792
diff
changeset
|
198 return this.downloadFilename( |
a2b5021de297
client: waterlevel: improve button style and downloaded file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4792
diff
changeset
|
199 this.$gettext("Waterlevel"), |
a2b5021de297
client: waterlevel: improve button style and downloaded file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4792
diff
changeset
|
200 this.selectedGauge.properties.objname |
4677
fa55e48bbca1
client: improve filename generation for downloads
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4665
diff
changeset
|
201 ); |
3618
c03170a1c333
client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3576
diff
changeset
|
202 }, |
c03170a1c333
client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3576
diff
changeset
|
203 hasPredictions() { |
c03170a1c333
client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3576
diff
changeset
|
204 return this.waterlevels.find(d => d.predicted); |
3049
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
205 } |
2596
8774054959a7
client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2590
diff
changeset
|
206 }, |
3068
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
207 watch: { |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
208 showNSC() { |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
209 this.drawDiagram({ ...this.zoomStore }); |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
210 }, |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
211 paneSetup() { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
212 this.$nextTick(() => this.drawDiagram()); |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
213 }, |
3068
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
214 waterlevels() { |
4384
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
215 this.initialDiagramValues(); |
3068
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
216 this.drawDiagram(); |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
217 } |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
218 }, |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
219 methods: { |
4809
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
220 addLegendToCanvas(ctx, { width, height }) { |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
221 let x = width / 10, |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
222 y = height - 25; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
223 ctx.font = "12px sans-serif"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
224 ctx.textAlign = "start"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
225 |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
226 ctx.beginPath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
227 ctx.fillStyle = "steelblue"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
228 ctx.strokeStyle = "white"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
229 ctx.arc(x, y, 8, 0, 2 * Math.PI); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
230 ctx.fill(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
231 ctx.stroke(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
232 ctx.fillStyle = "black"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
233 ctx.fillText(this.$gettext("Waterlevel"), x + 14, y + 5); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
234 ctx.closePath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
235 |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
236 ctx.beginPath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
237 ctx.fillStyle = "#90b4d2"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
238 ctx.strokeStyle = "#90b4d2"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
239 ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
240 ctx.fill(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
241 ctx.stroke(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
242 ctx.closePath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
243 ctx.beginPath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
244 ctx.fillStyle = "#4682B4"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
245 ctx.strokeStyle = "#4682B4"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
246 ctx.arc(x, y, 2, 0, 2 * Math.PI); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
247 ctx.fill(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
248 ctx.stroke(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
249 ctx.fillStyle = "black"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
250 ctx.fillText(this.$gettext("prediction"), x + 14, y + 5); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
251 ctx.closePath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
252 |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
253 ctx.beginPath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
254 ctx.fillStyle = "rgba(0, 255, 0, 0.1)"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
255 ctx.strokeStyle = "rgba(0, 255, 0, 0.1)"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
256 ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
257 ctx.fill(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
258 ctx.stroke(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
259 ctx.fillStyle = "black"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
260 ctx.fillText(this.$gettext("Navigable Range"), x + 14, y + 5); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
261 ctx.closePath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
262 }, |
4384
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
263 initialDiagramValues() { |
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
264 this.dateFromD = this.dateFrom; |
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
265 this.dateToD = this.dateTo; |
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
266 this.selectedGaugeD = this.selectedGauge; |
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
267 }, |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
268 close() { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
269 this.$store.commit( |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
270 "application/paneSetup", |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
271 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
272 ? "GAUGE_HYDROLOGICALCONDITIONS" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
273 : "DEFAULT" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
274 ); |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
275 }, |
3565
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
276 downloadSVG() { |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
277 let svg = document.getElementById(this.containerId).firstElementChild; |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
278 let svgXML = new XMLSerializer().serializeToString(svg); |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
279 let blog = new Blob([svgXML], { type: "image/svg+xml;charset=utf-8" }); |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
280 let filename = |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
281 this.selectedGauge.properties.objname + "-waterlevel-diagram.svg"; |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
282 saveAs(blog, filename); |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
283 }, |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
284 downloadPDF() { |
4456
acb21e7362ce
client: pdf-gen: fix diagram title for pdf (waterlevels, hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4423
diff
changeset
|
285 let diagramTitle = `${this.selectedGaugeD.properties.objname} (${ |
acb21e7362ce
client: pdf-gen: fix diagram title for pdf (waterlevels, hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4423
diff
changeset
|
286 this.isrsInfo(this.selectedGaugeD).orc |
4697
ce55f15e25e0
client: translations: mark strings for translation
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4677
diff
changeset
|
287 }): ${this.$gettext( |
ce55f15e25e0
client: translations: mark strings for translation
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4677
diff
changeset
|
288 "Waterlevel" |
ce55f15e25e0
client: translations: mark strings for translation
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4677
diff
changeset
|
289 )} ${this.dateFromD.toLocaleDateString()} - ${this.dateToD.toLocaleDateString()}`; |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
290 this.generatePDF({ |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
291 templateData: this.templateData, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
292 diagramTitle: diagramTitle |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
293 }); |
4794
a2b5021de297
client: waterlevel: improve button style and downloaded file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4792
diff
changeset
|
294 this.pdf.doc.save(this.fileName + ".pdf"); |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
295 }, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
296 applyChange() { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
297 if (this.form.template.hasOwnProperty("properties")) { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
298 this.templateData = this.defaultTemplate; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
299 return; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
300 } |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
301 if (this.form.template) { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
302 this.loadTemplates("/templates/diagram/" + this.form.template.name) |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
303 .then(response => { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
304 this.prepareImages(response.data.template_data.elements).then( |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
305 values => { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
306 values.forEach(v => { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
307 response.data.template_data.elements[v.index].url = v.url; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
308 }); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
309 this.templateData = response.data.template_data; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
310 } |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
311 ); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
312 }) |
4868
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
313 .catch(error => { |
4869
6b054b91d9b2
backend not reachable as error message etd. Login adjusted
Thomas Junk <thomas.junk@intevation.de>
parents:
4868
diff
changeset
|
314 let message = "Backend not reachable"; |
4868
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
315 if (error.response) { |
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
316 const { status, data } = error.response; |
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
317 message = `${status}: ${data.message || data}`; |
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
318 } |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
319 displayError({ |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
320 title: this.$gettext("Backend Error"), |
4868
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
321 message: message |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
322 }); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
323 }); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
324 } |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
325 }, |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
326 // Diagram legend |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
327 addDiagramLegend(position, offset, color) { |
4109
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4061
diff
changeset
|
328 let x = offset.x + 2, // 2 is the radius of the circle |
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4061
diff
changeset
|
329 y = offset.y, |
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4061
diff
changeset
|
330 padding = 3; |
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4061
diff
changeset
|
331 this.pdf.doc.setFontStyle("normal"); |
3343
13bb0ff62ac8
client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3323
diff
changeset
|
332 this.pdf.doc.setFontSize(10); |
4109
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4061
diff
changeset
|
333 let width = this.pdf.doc.getTextWidth("Navigable Range") + padding; |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
334 if (["topright", "bottomright"].indexOf(position) !== -1) { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
335 x = this.pdf.width - offset.x - width; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
336 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
337 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { |
4109
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4061
diff
changeset
|
338 y = this.pdf.height - offset.y - this.getTextHeight(3); |
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4061
diff
changeset
|
339 } |
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4061
diff
changeset
|
340 if (y < this.getTextHeight(1)) { |
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4061
diff
changeset
|
341 y = y + this.getTextHeight(1) / 2; |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
342 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
343 this.pdf.doc.setTextColor(color); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
344 this.pdf.doc.setDrawColor("white"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
345 this.pdf.doc.setFillColor("steelblue"); |
3853
abc15a3182c7
client: pdf-gen: adjust diagramlegend size (waterlevel diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3820
diff
changeset
|
346 this.pdf.doc.circle(x, y, 2, "FD"); |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
347 this.pdf.doc.text(x + padding, y + 1, this.$gettext("Waterlevel")); |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
348 this.pdf.doc.setFillColor("#dae6f0"); |
3853
abc15a3182c7
client: pdf-gen: adjust diagramlegend size (waterlevel diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3820
diff
changeset
|
349 this.pdf.doc.circle(x, y + 5, 2, "FD"); |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
350 this.pdf.doc.setFillColor("#e5ffe5"); |
3853
abc15a3182c7
client: pdf-gen: adjust diagramlegend size (waterlevel diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3820
diff
changeset
|
351 this.pdf.doc.circle(x, y + 10, 2, "FD"); |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
352 this.pdf.doc.text(x + padding, y + 11, this.$gettext("Navigable Range")); |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
353 this.pdf.doc.setDrawColor("#90b4d2"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
354 this.pdf.doc.setFillColor("#90b4d2"); |
3853
abc15a3182c7
client: pdf-gen: adjust diagramlegend size (waterlevel diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3820
diff
changeset
|
355 this.pdf.doc.circle(x, y + 5, 0.6, "FD"); |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
356 this.pdf.doc.text(x + padding, y + 6, this.$gettext("Prediction")); |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
357 }, |
4139
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
358 getPrintLayout(svgHeight, svgWidth) { |
3941
7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents:
3938
diff
changeset
|
359 return { |
4139
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
360 main: { |
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
361 top: Math.floor(0.05 * svgHeight), |
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
362 right: Math.floor(0.05 * svgWidth), |
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
363 bottom: Math.floor(0.32 * svgHeight), |
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
364 left: Math.floor(0.09 * svgWidth) |
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
365 }, |
3941
7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents:
3938
diff
changeset
|
366 nav: { |
4139
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
367 top: Math.floor(0.78 * svgHeight), |
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
368 right: Math.floor(0.013 * svgWidth), |
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
369 bottom: Math.floor(0.095 * svgHeight), |
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
370 left: Math.floor(0.09 * svgWidth) |
3941
7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents:
3938
diff
changeset
|
371 } |
7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents:
3938
diff
changeset
|
372 }; |
7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents:
3938
diff
changeset
|
373 }, |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
374 drawDiagram(zoom) { |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
375 // remove old diagram and exit if necessary data is missing |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
376 d3.select("#" + this.containerId + " svg").remove(); |
4665
c47c8085cc7e
client: translation: implement marking of diagram labels
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4593
diff
changeset
|
377 d3.timeFormatDefaultLocale(localeDateString); |
3938
b03d54958ccd
warterlevel: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents:
3927
diff
changeset
|
378 const elem = document.querySelector("#" + this.containerId); |
b03d54958ccd
warterlevel: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents:
3927
diff
changeset
|
379 const svgWidth = elem.clientWidth; |
b03d54958ccd
warterlevel: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents:
3927
diff
changeset
|
380 const svgHeight = elem.clientHeight; |
4139
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
381 const layout = this.getPrintLayout(svgHeight, svgWidth); |
3938
b03d54958ccd
warterlevel: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents:
3927
diff
changeset
|
382 if (!this.selectedGauge || !this.waterlevels.length || !elem) return; |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
383 this.renderTo({ |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
384 element: `#${this.containerId}`, |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
385 dimensions: this.getDimensions({ |
3938
b03d54958ccd
warterlevel: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents:
3927
diff
changeset
|
386 svgWidth: svgWidth, |
b03d54958ccd
warterlevel: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents:
3927
diff
changeset
|
387 svgHeight: svgHeight, |
3941
7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents:
3938
diff
changeset
|
388 ...layout |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
389 }), |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
390 zoomLevel: zoom ? zoom : null |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
391 }); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
392 }, |
4225
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
393 renderTo({ element, dimensions, zoomLevel }) { |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
394 // PREPARE HELPERS |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
395 // 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
|
396 const refWaterLevels = JSON.parse( |
2604
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
397 this.selectedGauge.properties.reference_water_levels |
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
398 ); |
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
399 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
400 // get min/max values for date and waterlevel axis |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
401 const extent = this.getExtent(refWaterLevels); |
2805
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 // scaling helpers |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
404 const scale = this.getScale({ dimensions, extent }); |
4712
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
405 const dFormat = date => { |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
406 // make the x-axis label formats dynamic, based on zoom |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
407 // but never display year numbers since they don't make any sense in |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
408 // this diagram |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
409 return (d3.timeSecond(date) < date |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
410 ? d3.timeFormat(".%L") |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
411 : d3.timeMinute(date) < date |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
412 ? d3.timeFormat(":%S") |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
413 : d3.timeHour(date) < date |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
414 ? d3.timeFormat("%H:%M") |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
415 : d3.timeDay(date) < date |
4713
cd9216c073fd
minor fixes date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4712
diff
changeset
|
416 ? d3.timeFormat("%H:%M") |
4712
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
417 : d3.timeMonth(date) < date |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
418 ? d3.timeWeek(date) < date |
4721
b2119cf5c7fb
mark date for translation
Thomas Junk <thomas.junk@intevation.de>
parents:
4713
diff
changeset
|
419 ? d3.timeFormat(app.$gettext("%a %d")) |
b2119cf5c7fb
mark date for translation
Thomas Junk <thomas.junk@intevation.de>
parents:
4713
diff
changeset
|
420 : d3.timeFormat(app.$gettext("%b %d")) |
4712
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
421 : d3.timeYear(date) < date |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
422 ? d3.timeFormat("%B") |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
423 : d3.timeFormat("%Y"))(date); |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
424 }; |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
425 // creating the axes based on the scales |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
426 const axes = { |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
427 x: d3 |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
428 .axisTop(scale.x) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
429 .tickSizeInner(dimensions.mainHeight) |
4712
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
430 .tickSizeOuter(0) |
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
431 .tickFormat(dFormat), |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
432 y: d3 |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
433 .axisRight(scale.y) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
434 .tickSizeInner(dimensions.width) |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
435 .tickSizeOuter(0) |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
436 .tickFormat(d => this.$options.filters.waterlevel(d)), |
3901
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
437 yRight: d3 |
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
438 .axisRight(scale.y) |
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
439 .tickSizeInner(3) |
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
440 .tickSizeOuter(0) |
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
441 .tickFormat(d => this.$options.filters.waterlevel(d)), |
4712
3b5268263c5b
Waterlevel: implement date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4697
diff
changeset
|
442 x2: d3.axisBottom(scale.x2).tickFormat(dFormat) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
443 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
444 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
445 // DRAW DIAGRAM/NAVIGATION AREAS |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
446 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
447 // create svg |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
448 const svg = d3 |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
449 .select(element) |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
450 .append("svg") |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
451 .attr("width", "100%") |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
452 .attr("height", "100%"); |
4792
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
453 // add white background in the size of the svg |
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
454 // to solve alpha-channel problem when using canvg to export image |
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
455 svg |
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
456 .append("g") |
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
457 .append("rect") |
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
458 .attr("width", "100%") |
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
459 .attr("height", "100%") |
9412bc2545e8
client: implement exporting of diagram as image (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
460 .attr("fill", "#ffffff"); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
461 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
462 // create container for main diagram |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
463 const diagram = svg |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
464 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
465 .attr("class", "main") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
466 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
467 "transform", |
5219 | 468 `translate(${dimensions.mainMargin.left}, ${dimensions.mainMargin.top})` |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
469 ); |
2756
ee2530ee1c0b
client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents:
2751
diff
changeset
|
470 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
471 // create container for navigation diagram |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
472 const navigation = svg |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
473 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
474 .attr("class", "nav") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
475 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
476 "transform", |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
477 `translate(${dimensions.navMargin.left}, ${dimensions.navMargin.top})` |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
478 ); |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
479 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
480 // define visible area, everything outside this area will be hidden |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
481 svg |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
482 .append("defs") |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
483 .append("clipPath") |
3147
25c0cbfcc515
client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
484 .attr("id", "waterlevel-clip") |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
485 .append("rect") |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
486 .attr("width", dimensions.width) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
487 .attr("height", dimensions.mainHeight); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
488 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
489 // DRAW DIAGRAM PARTS |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
490 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
491 // 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
|
492 // 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
|
493 // 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
|
494 const updaters = []; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
495 |
3346
83210507aaca
client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
3343
diff
changeset
|
496 // draw (order matters) |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
497 updaters.push(this.drawAxes({ diagram, dimensions, axes, navigation })); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
498 updaters.push(this.drawWaterlevelChart({ scale, diagram })); |
3618
c03170a1c333
client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3576
diff
changeset
|
499 if (this.hasPredictions) { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
500 updaters.push(this.drawPredictionAreas({ scale, diagram, navigation })); |
3618
c03170a1c333
client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3576
diff
changeset
|
501 } |
4295
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
502 updaters.push( |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
503 this.drawNowLines({ scale, extent, diagram, navigation, dimensions }) |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
504 ); |
3253
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
505 |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
506 // static, don't need updater |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
507 this.drawNavigationChart({ scale, navigation }); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
508 this.drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }); |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
509 if (this.showNSC) { |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
510 updaters.push( |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
511 this.drawNashSutcliffe({ hours: 72, diagram, scale, dimensions }) |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
512 ); |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
513 updaters.push( |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
514 this.drawNashSutcliffe({ hours: 48, diagram, scale, dimensions }) |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
515 ); |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
516 updaters.push( |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
517 this.drawNashSutcliffe({ hours: 24, diagram, scale, dimensions }) |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
518 ); |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
519 } |
3346
83210507aaca
client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
3343
diff
changeset
|
520 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
521 // INTERACTIONS |
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 // create rectanlge on the main chart area to capture mouse events |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
524 const eventRect = svg |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
525 .append("rect") |
3212
f87fd173f750
client: waterlevel diagrams: fixed tooltip bug
Markus Kottlaender <markus@intevation.de>
parents:
3211
diff
changeset
|
526 .attr("id", "zoom-waterlevels") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
527 .attr("class", "zoom") |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
528 .attr("width", dimensions.width) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
529 .attr("height", dimensions.mainHeight) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
530 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
531 "transform", |
5219 | 532 `translate(${dimensions.mainMargin.left}, ${dimensions.mainMargin.top})` |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
533 ); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
534 |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
535 this.createZoom({ |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
536 updaters, |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
537 eventRect, |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
538 dimensions, |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
539 scale, |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
540 navigation, |
4225
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
541 svg, |
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
542 zoomLevel |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
543 }); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
544 this.createTooltips({ eventRect, diagram, scale, dimensions }); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
545 this.setInlineStyles(svg); |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
546 }, |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
547 //set the styles of the diagrams to include them in the pdf |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
548 setInlineStyles(svg) { |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
549 svg |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
550 .selectAll(".line") |
3147
25c0cbfcc515
client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
551 .attr("clip-path", "url(#waterlevel-clip)") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
552 .selectAll("path") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
553 .attr("stroke", "steelblue") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
554 .attr("stroke-width", 2) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
555 .attr("fill", "none"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
556 svg |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
557 .selectAll(".line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
558 .selectAll("path.d3-line-chunked-chunk-gap") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
559 .attr("stroke-opacity", 0); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
560 svg |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
561 .selectAll(".line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
562 .selectAll("circle") |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
563 .attr("fill", "steelblue") |
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
564 .attr("stroke-width", 0); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
565 svg |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
566 .selectAll(".line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
567 .selectAll("circle.d3-line-chunked-chunk-predicted-point") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
568 .attr("fill-opacity", 0.6); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
569 |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
570 svg |
4154
d54d86d27e82
client: waterlevel: remove whitespace and add comment
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4153
diff
changeset
|
571 .selectAll(".hdc-line, .mw-line, .ldc-line, .rn-line") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
572 .attr("stroke-width", 1) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
573 .attr("fill", "none") |
3147
25c0cbfcc515
client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
574 .attr("clip-path", "url(#waterlevel-clip)"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
575 svg.selectAll(".hdc-line").attr("stroke", "red"); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
576 svg.selectAll(".ldc-line").attr("stroke", "green"); |
4153
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
577 |
4061
f391497287fb
clinet: pdf-gen: fix RN line does not render on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3992
diff
changeset
|
578 svg.selectAll(".mw-line").attr("stroke", "rgb(128,128,128)"); |
f391497287fb
clinet: pdf-gen: fix RN line does not render on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3992
diff
changeset
|
579 svg.selectAll(".rn-line").attr("stroke", "rgb(128,128,128)"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
580 svg |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
581 .selectAll(".ref-waterlevel-label") |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
582 .style("font-size", "10px") |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
583 .attr("fill", "black"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
584 svg |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
585 .selectAll(".ref-waterlevel-label-background") |
3563
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
586 .attr("fill", "rgb(255, 255, 255)") |
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
587 .attr("fill-opacity", 0.6); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
588 svg |
3563
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
589 .selectAll(".hdc-ldc-area") |
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
590 .attr("fill", "rgb(0, 255, 0)") |
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
591 .attr("fill-opacity", 0.1); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
592 svg |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
593 .selectAll(".now-line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
594 .attr("stroke", "#999") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
595 .attr("stroke-width", 1) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
596 .attr("stroke-dasharray", "5, 5") |
3147
25c0cbfcc515
client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
597 .attr("clip-path", "url(#waterlevel-clip)"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
598 svg |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
599 .selectAll(".now-line-label") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
600 .attr("font-size", "11px") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
601 .attr("fill", "#999"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
602 svg |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
603 .selectAll(".prediction-area") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
604 .attr("fill", "steelblue") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
605 .attr("fill-opacity", 0.2) |
3147
25c0cbfcc515
client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
606 .attr("clip-path", "url(#waterlevel-clip)"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
607 svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
608 .selectAll("path.nash-sutcliffe") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
609 .attr("fill", "none") |
4139
0becdd2812c9
client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
610 .attr("stroke", "gray") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
611 .attr("stroke-width", 1) |
3147
25c0cbfcc515
client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
612 .attr("clip-path", "url(#waterlevel-clip)"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
613 svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
614 .selectAll("path.nash-sutcliffe.ns72") |
3563
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
615 .attr("fill", "rgb(255, 255, 255)") |
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
616 .attr("fill-opacity", 0.5); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
617 svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
618 .selectAll("text.nash-sutcliffe") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
619 .style("font-size", "10px") |
3147
25c0cbfcc515
client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
620 .attr("clip-path", "url(#waterlevel-clip)") |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
621 .selectAll("tspan:last-child, tspan:first-child") |
3346
83210507aaca
client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
3343
diff
changeset
|
622 .attr("fill", "#555"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
623 svg |
3901
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
624 .selectAll(".axis--x .tick line, .axis--y .tick line") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
625 .attr("stroke-dasharray", 5) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
626 .attr("stroke", "#ccc"); |
3901
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
627 svg.selectAll(".axis--y-right .tick line").attr("stroke", "transparent"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
628 svg.selectAll(".tick text").attr("fill", "black"); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
629 svg.selectAll(".domain").attr("stroke", "black"); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
630 svg |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
631 .selectAll(".domain") |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
632 .attr("stroke", "black") |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
633 .attr("fill", "none"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
634 svg |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
635 .selectAll(".zoom") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
636 .attr("cursor", "move") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
637 .attr("fill", "none") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
638 .attr("pointer-events", "all"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
639 svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
640 .selectAll(".brush .selection") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
641 .attr("stroke", "none") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
642 .attr("fill-opacity", 0.2); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
643 svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
644 .selectAll(".brush .handle") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
645 .attr("stroke", "rgba(23, 162, 184, 0.5)") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
646 .attr("fill", "rgba(23, 162, 184, 0.5)"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
647 svg.selectAll(".brush .overlay").attr("fill", "none"); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
648 svg.selectAll(".chart-dots").attr("clip-path", "url(#waterlevel-clip)"); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
649 svg |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
650 .selectAll(".chart-dots .chart-dot") |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
651 .attr("fill", "steelblue") |
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
652 .attr("stroke", "steelblue") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
653 .attr("stroke-opacity", 0) |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
654 .style("pointer-events", "none") |
3046
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
655 .transition() |
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
656 .attr("fill-opacity", "0.1s"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
657 svg |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
658 .selectAll(".chart-tooltip") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
659 .attr("fill-opacity", 0) |
3046
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
660 .transition() |
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
661 .attr("fill-opacity", "0.3s"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
662 svg |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
663 .selectAll(".chart-tooltip rect") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
664 .attr("fill", "#fff") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
665 .attr("stroke", "#ccc"); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
666 svg |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
667 .selectAll(".chart-tooltip text") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
668 .attr("fill", "666") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
669 .style("font-size", "0.8em"); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
670 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
671 getExtent(refWaterLevels) { |
4125
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
672 let rest; |
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
673 if (refWaterLevels) { |
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
674 // set min/max values for the waterlevel axis |
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
675 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC) |
4153
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
676 const { LDC, HDC } = this.determineLDCHDC(refWaterLevels); |
4125
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
677 rest = [ |
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
678 { |
4153
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
679 waterlevel: HDC + (HDC - LDC) / 8 |
4125
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
680 }, |
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
681 { |
4153
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
682 waterlevel: Math.max(LDC - (HDC - LDC) / 4, 0) |
4125
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
683 } |
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
684 ]; |
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
685 } else { |
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
686 rest = []; |
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
687 } |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
688 return { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
689 // set min/max values for the date axis |
4249
0f0628189cd7
waterlevel: use given date range instead of recurring on the min/max date of data
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
690 date: [this.dateFrom, this.dateTo], |
4125
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
691 waterlevel: d3.extent([...this.waterlevels, ...rest], d => d.waterlevel) |
2805
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 }, |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
694 getScale({ dimensions, extent }) { |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
695 // scaling helpers to convert real world values into pixels |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
696 const x = d3.scaleTime().range([0, dimensions.width]); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
697 const y = d3.scaleLinear().range([dimensions.mainHeight, 0]); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
698 const x2 = d3.scaleTime().range([0, dimensions.width]); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
699 const y2 = d3.scaleLinear().range([dimensions.navHeight, 0]); |
4142
2a3bd5f3fc99
waterlevels: drawing now line according to maximum of waterlevels
Thomas Junk <thomas.junk@intevation.de>
parents:
4125
diff
changeset
|
700 const [lo, hi] = extent.waterlevel; |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
701 // setting the min and max values for the diagram axes |
4143 | 702 const dy = Math.ceil(0.15 * (hi - lo)); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
703 x.domain(d3.extent(extent.date)); |
4143 | 704 y.domain([lo - dy, hi + dy]); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
705 x2.domain(x.domain()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
706 y2.domain(y.domain()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
707 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
708 return { x, y, x2, y2 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
709 }, |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
710 drawAxes({ diagram, dimensions, axes, navigation }) { |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
711 diagram |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
712 .append("g") |
2652
a2dd96c305be
client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents:
2648
diff
changeset
|
713 .attr("class", "axis--x") |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
714 .attr("transform", `translate(0, ${dimensions.mainHeight})`) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
715 .call(axes.x) |
2648
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
716 .selectAll(".tick text") |
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
717 .attr("y", 15); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
718 diagram // label |
2641
a735119e4f5c
client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents:
2611
diff
changeset
|
719 .append("text") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
720 .text(this.$gettext("Waterlevel [m]")) |
2641
a735119e4f5c
client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents:
2611
diff
changeset
|
721 .attr("text-anchor", "middle") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
722 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
723 "transform", |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
724 `translate(-45, ${dimensions.mainHeight / 2}) rotate(-90)` |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
725 ); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
726 diagram |
2648
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
727 .append("g") |
3901
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
728 .attr("class", "axis--y") |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
729 .call(axes.y) |
2648
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
730 .selectAll(".tick text") |
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
731 .attr("x", -25); |
3901
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
732 diagram |
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
733 .append("g") |
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
734 .attr("class", "axis--y-right") |
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
735 .attr("transform", `translate(${dimensions.width})`) |
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
736 .call(axes.yRight) |
fe0d62727c41
client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
737 .selectAll(".tick text"); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
738 |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
739 navigation |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
740 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
741 .attr("class", "axis axis--x") |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
742 .attr("transform", `translate(0, ${dimensions.navHeight})`) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
743 .call(axes.x2); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
744 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
745 return () => { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
746 diagram |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
747 .select(".axis--x") |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
748 .call(axes.x) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
749 .selectAll(".tick text") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
750 .attr("y", 15); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
751 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
752 }, |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
753 drawWaterlevelChart({ scale, diagram }) { |
3253
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
754 const waterlevelChartDrawer = () => { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
755 let domainLeft = new Date(scale.x.domain()[0].getTime()); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
756 let domainRight = new Date(scale.x.domain()[1].getTime()); |
3253
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
757 domainLeft.setDate(domainLeft.getDate() - 1); |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
758 domainRight.setDate(domainRight.getDate() + 1); |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
759 |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
760 let lineChunked = d3 |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
761 .lineChunked() |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
762 // render only data points that are visible in the current scale |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
763 .defined(d => d.date > domainLeft && d.date < domainRight) |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
764 .x(d => scale.x(d.date)) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
765 .y(d => scale.y(d.waterlevel)) |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
766 .curve(d3.curveLinear) |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
767 .isNext(this.isNext(scale)) |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
768 .pointAttrs({ r: 1.7 }); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
769 // to avoid creating empty clip-path element |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
770 if (this.hasPredictions) { |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
771 lineChunked |
3253
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
772 .chunk(d => (d.predicted ? "predicted" : "line")) |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
773 .chunkDefinitions({ predicted: {} }); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
774 } |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
775 return lineChunked; |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
776 }; |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
777 |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
778 diagram |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
779 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
780 .attr("class", "line") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
781 .datum(this.waterlevels) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
782 .call(waterlevelChartDrawer()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
783 |
3253
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
784 return () => { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
785 diagram.select(".line").call(waterlevelChartDrawer()); |
3253
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
786 }; |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
787 }, |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
788 drawNavigationChart({ scale, navigation }) { |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
789 let lineChunked = d3 |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
790 .lineChunked() |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
791 .x(d => scale.x2(d.date)) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
792 .y(d => scale.y2(d.waterlevel)) |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
793 .curve(d3.curveLinear) |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
794 .isNext(this.isNext(scale)) |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
795 .pointAttrs({ r: 1.7 }); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
796 // to avoid creating empty clip-path element |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
797 if (this.hasPredictions) { |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
798 lineChunked |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
799 .chunk(d => (d.predicted ? "predicted" : "line")) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
800 .chunkDefinitions({ predicted: {} }); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
801 } |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
802 navigation |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
803 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
804 .attr("class", "line") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
805 .datum(this.waterlevels) |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
806 .call(lineChunked); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
807 }, |
4295
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
808 drawNowLines({ scale, extent, diagram, navigation, dimensions }) { |
4144
737e1199800f
draw now line with fixed delta
Thomas Junk <thomas.junk@intevation.de>
parents:
4143
diff
changeset
|
809 const [lo, hi] = extent.waterlevel; |
737e1199800f
draw now line with fixed delta
Thomas Junk <thomas.junk@intevation.de>
parents:
4143
diff
changeset
|
810 const dy = Math.ceil(0.15 * (hi - lo)); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
811 const nowLine = d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
812 .line() |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
813 .x(d => scale.x(d.x)) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
814 .y(d => scale.y(d.y)); |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
815 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
816 const nowLabel = selection => { |
4295
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
817 selection |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
818 .attr( |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
819 "transform", |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
820 `translate(${scale.x(new Date())}, ${scale.y(hi + dy * 0.4)})` |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
821 ) |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
822 // hide Now label outside the diagram y-axises |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
823 .attr( |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
824 "opacity", |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
825 scale.x(new Date()) >= dimensions.width || scale.x(new Date()) <= 0 |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
826 ? 0 |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
827 : 1 |
0bb735a412af
client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4294
diff
changeset
|
828 ); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
829 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
830 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
831 // draw in main |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
832 diagram |
2604
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
833 .append("path") |
4145
6095e95db454
optical adjustments to nowline and now line label
Thomas Junk <thomas.junk@intevation.de>
parents:
4144
diff
changeset
|
834 .datum([ |
6095e95db454
optical adjustments to nowline and now line label
Thomas Junk <thomas.junk@intevation.de>
parents:
4144
diff
changeset
|
835 { x: new Date(), y: lo - dy }, |
6095e95db454
optical adjustments to nowline and now line label
Thomas Junk <thomas.junk@intevation.de>
parents:
4144
diff
changeset
|
836 { x: new Date(), y: hi + dy * 0.4 } |
6095e95db454
optical adjustments to nowline and now line label
Thomas Junk <thomas.junk@intevation.de>
parents:
4144
diff
changeset
|
837 ]) |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
838 .attr("class", "now-line") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
839 .attr("d", nowLine); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
840 diagram // label |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
841 .append("text") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
842 .text(this.$gettext("Now")) |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
843 .attr("class", "now-line-label") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
844 .attr("text-anchor", "middle") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
845 .call(nowLabel); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
846 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
847 // draw in nav |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
848 navigation |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
849 .append("path") |
5219 | 850 .datum([ |
851 { x: new Date(), y: hi + dy }, | |
852 { x: new Date(), y: lo - dy } | |
853 ]) | |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
854 .attr("class", "now-line") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
855 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
856 "d", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
857 d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
858 .line() |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
859 .x(d => scale.x2(d.x)) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
860 .y(d => scale.y2(d.y)) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
861 ); |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
862 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
863 return () => { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
864 diagram.select(".now-line").attr("d", nowLine); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
865 diagram.select(".now-line-label").call(nowLabel); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
866 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
867 }, |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
868 drawPredictionAreas({ scale, diagram, navigation }) { |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
869 const predictionArea = isNav => |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
870 d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
871 .area() |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
872 .defined(d => d.predicted && d.min && d.max) |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
873 .x(d => scale[isNav ? "x2" : "x"](d.date)) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
874 .y0(d => scale[isNav ? "y2" : "y"](d.min)) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
875 .y1(d => scale[isNav ? "y2" : "y"](d.max)); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
876 |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
877 diagram |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
878 .append("path") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
879 .datum(this.waterlevels) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
880 .attr("class", "prediction-area") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
881 .attr("d", predictionArea()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
882 |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
883 navigation |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
884 .append("path") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
885 .datum(this.waterlevels) |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
886 .attr("class", "prediction-area") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
887 .attr("d", predictionArea(true)); |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
888 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
889 return () => { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
890 diagram.select(".prediction-area").attr("d", predictionArea()); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
891 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
892 }, |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
893 drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }) { |
4125
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
894 if (refWaterLevels) { |
4153
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
895 const { LDC, HDC } = this.determineLDCHDC(refWaterLevels); |
4154
d54d86d27e82
client: waterlevel: remove whitespace and add comment
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4153
diff
changeset
|
896 // filling area between HDC and LDC if both of them are available |
4153
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
897 if (LDC && HDC) { |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
898 diagram |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
899 .append("rect") |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
900 .attr("class", "hdc-ldc-area") |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
901 .attr("x", 0) |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
902 .attr("y", scale.y(HDC)) |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
903 .attr("width", dimensions.width) |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
904 .attr("height", refWaterLevels ? scale.y(LDC) - scale.y(HDC) : 0); |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
905 } |
4125
0f69d256fa12
client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4109
diff
changeset
|
906 } |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
907 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
908 const refWaterlevelLine = d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
909 .line() |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
910 .x(d => scale.x(d.x)) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
911 .y(d => scale.y(d.y)); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
912 |
4153
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
913 const levelStyle = name => { |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
914 if (/HDC/.test(name)) return "hdc-line"; |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
915 if (/LDC/.test(name)) return "ldc-line"; |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
916 return `${name.toLowerCase()}-line`; |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
917 }; |
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
918 |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
919 for (let ref in refWaterLevels) { |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
920 if (refWaterLevels[ref]) { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
921 diagram |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
922 .append("path") |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
923 .datum([ |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
924 { x: 0, y: refWaterLevels[ref] }, |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
925 { x: extent.date[1], y: refWaterLevels[ref] } |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
926 ]) |
4153
7c44af0b9370
client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4150
diff
changeset
|
927 .attr("class", levelStyle(ref)) |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
928 .attr("d", refWaterlevelLine); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
929 diagram // label |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
930 .append("rect") |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
931 .attr("class", "ref-waterlevel-label-background") |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
932 .attr("x", 1) |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
933 .attr("y", scale.y(refWaterLevels[ref]) - 13) |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
934 .attr("width", 55) |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
935 .attr("height", 12); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
936 diagram |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
937 .append("text") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
938 .text( |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
939 `${ref} (${this.$options.filters.waterlevel( |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
940 refWaterLevels[ref] |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
941 )})` |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
942 ) |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
943 .attr("class", "ref-waterlevel-label") |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
944 .attr("x", 5) |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
945 .attr("y", scale.y(refWaterLevels[ref]) - 3); |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
946 } |
3209
5b8916b78cea
client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option
Markus Kottlaender <markus@intevation.de>
parents:
3179
diff
changeset
|
947 } |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
948 }, |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
949 drawNashSutcliffe({ hours, diagram, scale, dimensions }) { |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
950 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
|
951 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
|
952 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
|
953 |
4294
c8b18408cc55
client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4249
diff
changeset
|
954 const nashSutcliffeBox = (hours, date) => { |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
955 // show/hide boxes depending on scale of chart (hide if > 90 days) |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
956 diagram |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
957 .selectAll("path.nash-sutcliffe") |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
958 .attr( |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
959 "stroke-opacity", |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
960 scale.x.domain()[1] - scale.x.domain()[0] > 90 * 86400000 ? 0 : 1 |
4294
c8b18408cc55
client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4249
diff
changeset
|
961 ) |
c8b18408cc55
client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4249
diff
changeset
|
962 // show boxes only if now line in the selected time range |
c8b18408cc55
client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4249
diff
changeset
|
963 .attr("opacity", dimensions.width >= scale.x(date) ? 1 : 0); |
2751
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
964 return d3 |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
965 .area() |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
966 .x(d => scale.x(d)) |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
967 .y0(() => dimensions.mainHeight + 0.5) |
4140
4d7569cca5e6
client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4139
diff
changeset
|
968 .y1( |
4d7569cca5e6
client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4139
diff
changeset
|
969 () => |
4d7569cca5e6
client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4139
diff
changeset
|
970 dimensions.mainHeight - |
4d7569cca5e6
client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4139
diff
changeset
|
971 Math.floor(0.06 * dimensions.mainHeight) * (hours / 24) |
4d7569cca5e6
client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4139
diff
changeset
|
972 ); |
2751
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
973 }; |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
974 |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
975 const nashSutcliffeLabel = (label, date, hours) => { |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
976 let days = hours / 24; |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
977 label |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
978 .attr("x", Math.min(scale.x(date), dimensions.width) - 4) |
4140
4d7569cca5e6
client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4139
diff
changeset
|
979 .attr( |
4d7569cca5e6
client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4139
diff
changeset
|
980 "y", |
4d7569cca5e6
client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4139
diff
changeset
|
981 dimensions.mainHeight - |
4d7569cca5e6
client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4139
diff
changeset
|
982 (Math.floor(0.06 * dimensions.mainHeight) * days + 0.5) + |
4d7569cca5e6
client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4139
diff
changeset
|
983 12 |
4294
c8b18408cc55
client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4249
diff
changeset
|
984 ) |
c8b18408cc55
client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4249
diff
changeset
|
985 // show label only if now line in the selected time range |
c8b18408cc55
client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4249
diff
changeset
|
986 .attr("opacity", dimensions.width >= scale.x(date) ? 1 : 0); |
2751
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
987 }; |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
988 |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
989 if (coeff.samples) { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
990 diagram |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
991 .append("path") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
992 .datum([dateStart, dateNow]) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
993 .attr("class", "nash-sutcliffe ns" + hours) |
4294
c8b18408cc55
client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4249
diff
changeset
|
994 .attr("d", nashSutcliffeBox(hours, dateNow)); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
995 diagram |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
996 .append("text") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
997 .attr("class", "nash-sutcliffe ns" + hours) |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
998 .attr("text-anchor", "end") |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
999 .call(nashSutcliffeLabel, dateNow, hours) |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1000 .append("tspan") |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1001 .text(hours + "h: ") |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1002 .select(function() { |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1003 return this.parentNode; |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1004 }) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1005 .append("tspan") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1006 .text(coeff.value.toFixed(2)) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1007 .select(function() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1008 return this.parentNode; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1009 }) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1010 .append("tspan") |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1011 .text(` (${coeff.samples})`); |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1012 } |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1013 |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1014 return () => { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1015 diagram |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1016 .select("path.nash-sutcliffe.ns" + hours) |
4294
c8b18408cc55
client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4249
diff
changeset
|
1017 .attr("d", nashSutcliffeBox(hours, dateNow)); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1018 diagram |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1019 .select("text.nash-sutcliffe.ns" + hours) |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1020 .call(nashSutcliffeLabel, dateNow, hours); |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1021 }; |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1022 }, |
4225
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1023 createZoom({ |
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1024 updaters, |
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1025 eventRect, |
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1026 dimensions, |
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1027 scale, |
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1028 navigation, |
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1029 svg, |
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1030 zoomLevel |
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1031 }) { |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1032 const brush = d3 |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
1033 .brushX() |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
1034 .handleSize(4) |
5219 | 1035 .extent([ |
1036 [0, 0], | |
1037 [dimensions.width, dimensions.navHeight] | |
1038 ]); | |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1039 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1040 const zoom = d3 |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
1041 .zoom() |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
1042 .scaleExtent([1, Infinity]) |
5219 | 1043 .translateExtent([ |
1044 [0, 0], | |
1045 [dimensions.width, dimensions.mainHeight] | |
1046 ]) | |
1047 .extent([ | |
1048 [0, 0], | |
1049 [dimensions.width, dimensions.mainHeight] | |
1050 ]); | |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
1051 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1052 brush.on("brush end", () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1053 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
|
1054 return; // ignore brush-by-zoom |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1055 let s = d3.event.selection || scale.x2.range(); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1056 scale.x.domain(s.map(scale.x2.invert, scale.x2)); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1057 updaters.forEach(u => u && u()); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1058 this.setInlineStyles(svg); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1059 svg |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1060 .select(".zoom") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1061 .call( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1062 zoom.transform, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1063 d3.zoomIdentity |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1064 .scale(dimensions.width / (s[1] - s[0])) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1065 .translate(-s[0], 0) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1066 ); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1067 }); |
4225
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1068 let scaleForZoom = t => { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1069 scale.x.domain(t.rescaleX(scale.x2).domain()); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1070 updaters.forEach(u => u && u()); |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1071 this.setInlineStyles(svg); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1072 navigation |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1073 .select(".brush") |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1074 .call(brush.move, scale.x.range().map(t.invertX, t)); |
4225
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1075 }; |
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1076 zoom.on("zoom", () => { |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1077 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") { |
4225
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1078 return; // ignore zoom-by-brush |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1079 } |
4225
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1080 let t = d3.event.transform; |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1081 // set the zoom to the passed zoom level. |
4225
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1082 if (zoomLevel) { |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1083 let tx = (zoomLevel.x * dimensions.width) / zoomLevel.width; |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1084 let k = zoomLevel.k; |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1085 let ty = zoomLevel.y; |
4228
b8d578e42b4b
pdfprint: generate a new transform object instead of manipulating the given one.
Thomas Junk <thomas.junk@intevation.de>
parents:
4226
diff
changeset
|
1086 t = d3.zoomIdentity.translate(tx, ty).scale(k); |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1087 zoomLevel = null; // avoid to stuck at same zoom level after setting the zoom by subsequent zooming. |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1088 } else { |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1089 temp = { ...d3.event.transform, width: dimensions.width }; |
4225
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1090 } |
4228
b8d578e42b4b
pdfprint: generate a new transform object instead of manipulating the given one.
Thomas Junk <thomas.junk@intevation.de>
parents:
4226
diff
changeset
|
1091 scaleForZoom(t); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1092 }); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1093 zoom.on("start", () => { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1094 svg.select(".chart-dot").style("opacity", 0); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1095 svg.select(".chart-tooltip").style("opacity", 0); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1096 }); |
4225
92c2f93fef3c
client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4155
diff
changeset
|
1097 // store the zoom level after zomming is ended |
4381
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1098 zoom.on("end", () => { |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1099 if (!zoomLevel) { |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1100 this.zoomStore = temp |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1101 ? temp |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1102 : { ...d3.event.transform, width: dimensions.width }; |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1103 } |
275220c82026
client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4295
diff
changeset
|
1104 }); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1105 |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1106 navigation |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1107 .append("g") |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1108 .attr("class", "brush") |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1109 .call(brush) |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1110 .call(brush.move, scale.x.range()); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1111 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1112 eventRect.call(zoom); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1113 }, |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1114 createTooltips({ eventRect, diagram, scale, dimensions }) { |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1115 // create clippable container for the dot |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1116 diagram |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1117 .append("g") |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1118 .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
|
1119 .append("circle") |
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1120 .attr("class", "chart-dot") |
4150
40bd6854a294
waterlevel_diagram: make dot initially invisible
Thomas Junk <thomas.junk@intevation.de>
parents:
4145
diff
changeset
|
1121 .attr("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
|
1122 .attr("r", 4); |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1123 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1124 // create container for the tooltip |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1125 const tooltip = diagram.append("g").attr("class", "chart-tooltip"); |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1126 tooltip |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1127 .append("rect") |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1128 .attr("rx", "0.25em") |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
1129 .attr("ry", "0.25em") |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1130 .attr("width", "0px") |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1131 .attr("height", "0px"); |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1132 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1133 // create container for multiple text rows |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1134 const tooltipText = tooltip.append("text").attr("text-anchor", "middle"); |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1135 |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1136 // padding inside the tooltip box and diagram padding to determine left |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1137 // and right offset from the diagram boundaries for the tooltip position. |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1138 const tooltipPadding = 10; |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1139 const diagramPadding = 5; |
2689
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1140 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1141 eventRect |
2689
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1142 .on("mouseover", () => { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1143 diagram.select(".chart-dot").style("opacity", 1); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1144 diagram.select(".chart-tooltip").style("opacity", 1); |
2689
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1145 }) |
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1146 .on("mouseout", () => { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1147 diagram.select(".chart-dot").style("opacity", 0); |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1148 diagram.select(".chart-tooltip").style("opacity", 0); |
2689
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1149 }) |
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1150 .on("mousemove", () => { |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1151 // find data point closest to mouse |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1152 const x0 = scale.x.invert( |
3212
f87fd173f750
client: waterlevel diagrams: fixed tooltip bug
Markus Kottlaender <markus@intevation.de>
parents:
3211
diff
changeset
|
1153 d3.mouse(document.getElementById("zoom-waterlevels"))[0] |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1154 ), |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1155 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
|
1156 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
|
1157 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
|
1158 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
|
1159 |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1160 const coords = { |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1161 x: scale.x(d.date), |
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1162 y: scale.y(d.waterlevel) |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1163 }; |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1164 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1165 // position the dot |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1166 diagram |
2689
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1167 .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
|
1168 .style("opacity", 1) |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1169 .attr("transform", `translate(${coords.x}, ${coords.y})`); |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1170 |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1171 // remove current texts |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1172 tooltipText.selectAll("tspan").remove(); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1173 |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1174 // write date |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1175 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1176 .append("tspan") |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1177 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1178 .attr("text-anchor", "middle") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1179 .text( |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1180 d.date.toLocaleString([], { |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1181 year: "2-digit", |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1182 month: "2-digit", |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1183 day: "2-digit", |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1184 hour: "2-digit", |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1185 minute: "2-digit" |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1186 }) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1187 ); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1188 |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1189 if (d.predicted) { |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1190 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1191 .append("tspan") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1192 .attr("x", 0) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1193 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1194 .attr("dy", "1.4em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1195 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1196 .attr("text-anchor", "middle") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
1197 .text(this.$options.filters.waterlevel(d.max) + " m"); |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1198 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1199 .append("tspan") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1200 .attr("x", 0) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1201 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1202 .attr("dy", "2.6em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1203 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1204 .attr("text-anchor", "middle") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1205 .attr("class", "font-weight-bold") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
1206 .text(this.$options.filters.waterlevel(d.waterlevel) + " m"); |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1207 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1208 .append("tspan") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1209 .attr("x", 0) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1210 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1211 .attr("dy", "3.8em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1212 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1213 .attr("text-anchor", "middle") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
1214 .text(this.$options.filters.waterlevel(d.min) + " m"); |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1215 } else { |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1216 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1217 .append("tspan") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1218 .attr("x", 0) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1219 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1220 .attr("dy", "1.4em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1221 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1222 .attr("text-anchor", "middle") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1223 .attr("class", "font-weight-bold") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
1224 .text(this.$options.filters.waterlevel(d.waterlevel) + " m"); |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1225 } |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1226 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1227 // get text dimensions |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1228 const textBBox = tooltipText.node().getBBox(); |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1229 |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1230 diagram |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1231 .selectAll(".chart-tooltip text tspan") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1232 .attr("x", textBBox.width / 2 + tooltipPadding) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1233 .attr("y", tooltipPadding); |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1234 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1235 // position and scale tooltip box |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1236 const xMax = |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1237 dimensions.width - |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1238 (textBBox.width + diagramPadding + tooltipPadding * 2); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1239 const tooltipX = Math.max( |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1240 diagramPadding, |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1241 Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1242 ); |
2824
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1243 let tooltipY = coords.y - (textBBox.height + tooltipPadding * 2) - 10; |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1244 if (coords.y < textBBox.height + tooltipPadding * 2) { |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1245 tooltipY = coords.y + 10; |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1246 } |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1247 |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1248 diagram |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1249 .select(".chart-tooltip") |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1250 .style("opacity", 1) |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1251 .attr("transform", `translate(${tooltipX}, ${tooltipY})`) |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1252 .select("rect") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1253 .attr("width", textBBox.width + tooltipPadding * 2) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1254 .attr("height", textBBox.height + tooltipPadding * 2); |
2689
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1255 }); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1256 }, |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1257 isNext(scale) { |
3252
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1258 // Check whether points in the chart can be considered "next to each other". |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1259 // For that they need to be exactly 15 minutes apart (for automatically |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1260 // imported gauge measurements). If the chart shows more than 15 days then |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1261 // 1 hour is also valid (for approved gauge measurements). |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1262 return (prev, current) => { |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1263 let difference = (current.date - prev.date) / 1000; |
3885
d42158f77841
waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3853
diff
changeset
|
1264 if ((scale.x.domain()[1] - scale.x.domain()[0]) / 86400000 > 15) |
3252
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1265 return [900, 3600].includes(difference); |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1266 return difference === 900; |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1267 }; |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1268 } |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1269 }, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1270 created() { |
4462
2793893bc7f5
clinet: Waterlevels: fix resizing problem for diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4456
diff
changeset
|
1271 this.resizeListenerFunction = debounce(() => { |
2793893bc7f5
clinet: Waterlevels: fix resizing problem for diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4456
diff
changeset
|
1272 this.zoomStore // restore last zoom level |
2793893bc7f5
clinet: Waterlevels: fix resizing problem for diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4456
diff
changeset
|
1273 ? this.drawDiagram({ ...this.zoomStore }) |
2793893bc7f5
clinet: Waterlevels: fix resizing problem for diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4456
diff
changeset
|
1274 : this.drawDiagram(); |
2793893bc7f5
clinet: Waterlevels: fix resizing problem for diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4456
diff
changeset
|
1275 }, 100); |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1276 window.addEventListener("resize", this.resizeListenerFunction); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1277 }, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1278 mounted() { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1279 // Nasty but necessary if we don't want to use the updated hook to re-draw |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1280 // the diagram because this would re-draw it also for irrelevant reasons. |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1281 // In this case we need to wait for the child component (DiagramLegend) to |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1282 // render. According to the docs (https://vuejs.org/v2/api/#mounted) this |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1283 // should be possible with $nextTick() but it doesn't work because it does |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1284 // not guarantee that the DOM is not only updated but also re-painted on the |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1285 // screen. |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1286 setTimeout(this.drawDiagram, 150); |
4384
b146d3c648f8
gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents:
4381
diff
changeset
|
1287 this.initialDiagramValues(); |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1288 this.templates[0] = this.defaultTemplate; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1289 this.form.template = this.templates[0]; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1290 this.templateData = this.form.template; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1291 HTTP.get("/templates/diagram", { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1292 headers: { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1293 "X-Gemma-Auth": localStorage.getItem("token"), |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1294 "Content-type": "text/xml; charset=UTF-8" |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1295 } |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1296 }) |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1297 .then(response => { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1298 if (response.data.length) { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1299 this.templates = response.data; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1300 this.form.template = this.templates[0]; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1301 this.templates[this.templates.length] = this.defaultTemplate; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1302 this.applyChange(); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1303 } |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1304 }) |
4868
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
1305 .catch(error => { |
4869
6b054b91d9b2
backend not reachable as error message etd. Login adjusted
Thomas Junk <thomas.junk@intevation.de>
parents:
4868
diff
changeset
|
1306 let message = "Backend not reachable"; |
4868
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
1307 if (error.response) { |
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
1308 const { status, data } = error.response; |
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
1309 message = `${status}: ${data.message || data}`; |
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
1310 } |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1311 displayError({ |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1312 title: this.$gettext("Backend Error"), |
4868
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
1313 message: message |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1314 }); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1315 }); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1316 }, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1317 destroyed() { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1318 window.removeEventListener("resize", this.resizeListenerFunction); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1319 } |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1320 }; |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1321 </script> |