Mercurial > gemma
annotate client/src/components/gauge/HydrologicalConditions.vue @ 5072:51b30f7c64a2 time-sliding
Timeslider proper rescale
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 11 Mar 2020 16:45:13 +0100 |
parents | 6b054b91d9b2 |
children | de86a96d55c3 |
rev | line source |
---|---|
2761
71e7237110ba
client: spuc8: prepared 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:
3129
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:
3129
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:
3129
diff
changeset
|
11 <div class="legend"> |
3323
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
12 <span |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
13 style="background-color: red; width: 20px; height: 20px;" |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
14 ></span> |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
15 {{ yearCompareD }} |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
16 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
17 <div class="legend"> |
3323
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
18 <span |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
19 style="background-color: orange; width: 20px; height: 20px;" |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
20 ></span> |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
21 <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
|
22 >Q25%</span |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
23 > |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
24 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
25 <div class="legend"> |
3323
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
26 <span |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
27 style="background-color: black; width: 20px; height: 20px;" |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
28 ></span> |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
29 <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
|
30 >Median</span |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
31 > |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
32 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
33 <div class="legend"> |
3323
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
34 <span |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
35 style="background-color: purple; width: 20px; height: 20px;" |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
36 ></span> |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
37 <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
|
38 >Q75%</span |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
39 > |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
40 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
41 <div class="legend"> |
3323
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
42 <span |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
43 style="background-color: lightsteelblue; width: 20px; height: 20px;" |
de0d0685a17b
client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3285
diff
changeset
|
44 ></span> |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
45 <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
|
46 >Long-term Amplitude</span |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
47 > |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
48 </div> |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
49 <select |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
50 @change="applyChange" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
51 v-model="form.template" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
52 class="form-control d-block custom-select-sm w-100" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
53 > |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
54 <option |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
55 v-for="template in templates" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
56 :value="template" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
57 :key="template.name" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
58 > |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
59 {{ template.name }} |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
60 </option> |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
61 </select> |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
62 <div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
63 <button |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
64 @click="downloadPDF" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
65 type="button" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
66 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
|
67 :disabled="!longtermWaterlevels.length" |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
68 > |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
69 <translate>Export to PDF</translate> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
70 </button> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
71 </div> |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
72 <a |
3404
0c9467003d14
client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents:
3403
diff
changeset
|
73 :class="[ |
0c9467003d14
client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents:
3403
diff
changeset
|
74 '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
|
75 { disabled: !longtermWaterlevels.length } |
0c9467003d14
client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents:
3403
diff
changeset
|
76 ]" |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
77 :href="csvLink" |
4802
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
78 :download="`${fileName}.csv`" |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
79 > |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
80 <translate>Export as CSV</translate> |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
81 </a> |
4802
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
82 <a |
4808
db450fcc8ed7
client: add title for the exported image
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4805
diff
changeset
|
83 @click="downloadImage('hydrologicalpng', title)" |
4805
7de099c4824c
client: image-export: improve hyperlink ids for download
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4802
diff
changeset
|
84 id="hydrologicalpng" |
4802
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
85 :class="[ |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
86 'btn btn-sm btn-info text-white d-block w-100 mt-2', |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
87 { disabled: !longtermWaterlevels.length } |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
88 ]" |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
89 :download="`${fileName}.png`" |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
90 > |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
91 <translate>Export as Image</translate> |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
92 </a> |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
93 </DiagramLegend> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
94 <div |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
95 class="d-flex flex-fill justify-content-center align-items-center" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
96 :id="containerId" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
97 > |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
98 <div v-if="!longtermWaterlevels.length"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
99 <translate>No data available.</translate> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
100 </div> |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2829
diff
changeset
|
101 </div> |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 </div> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 </div> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 </template> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 <script> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 * without warranty, see README.md and license for details. |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 * |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 * SPDX-License-Identifier: AGPL-3.0-or-later |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 * License-Filename: LICENSES/AGPL-3.0.txt |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 * |
3112
e838609bc10d
client: fix license header for waterlevel.vue and hydrologicalconditions.vue
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3111
diff
changeset
|
113 * Copyright (C) 2019 by via donau |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
114 * – Österreichische Wasserstraßen-Gesellschaft mbH |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 * Software engineering by Intevation GmbH |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 * |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 * Author(s): |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 * Markus Kottländer <markus.kottlaender@intevation.de> |
3112
e838609bc10d
client: fix license header for waterlevel.vue and hydrologicalconditions.vue
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3111
diff
changeset
|
119 * Fadi Abbud <fadi.abbud@intevation.de> |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
120 */ |
4721
b2119cf5c7fb
mark date for translation
Thomas Junk <thomas.junk@intevation.de>
parents:
4720
diff
changeset
|
121 import app from "@/main"; |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 import { mapState, mapGetters } from "vuex"; |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
123 import * as d3 from "d3"; |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
124 import debounce from "debounce"; |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 import { startOfYear, endOfYear } from "date-fns"; |
3937
de4c557bbc47
hydrological_conditions: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents:
3927
diff
changeset
|
126 import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
127 import { HTTP } from "@/lib/http"; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
128 import { displayError } from "@/lib/errors"; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
129 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; |
4665
c47c8085cc7e
client: translation: implement marking of diagram labels
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4593
diff
changeset
|
130 import { localeDateString } from "@/lib/datelocalization"; |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
131 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
132 export default { |
3937
de4c557bbc47
hydrological_conditions: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents:
3927
diff
changeset
|
133 mixins: [diagram, pdfgen, templateLoader], |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
134 components: { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
135 DiagramLegend: () => import("@/components/DiagramLegend") |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
136 }, |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
137 data() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
138 return { |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
139 selectedGaugeD: null, |
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
140 longtermIntervalD: null, |
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
141 yearCompareD: null, |
4226
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
142 zoomStore: null, |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
143 containerId: "hydrologicalconditions-diagram-container", |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
144 resizeListenerFunction: null, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
145 templateData: null, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
146 form: { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
147 template: null, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
148 form: null |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
149 }, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
150 templates: [], |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
151 defaultTemplate: defaultDiagramTemplate, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
152 pdf: { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
153 doc: null, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
154 width: 420, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
155 height: 297 |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
156 } |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
157 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
158 }, |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
159 computed: { |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
160 ...mapState("application", ["paneSetup"]), |
2829
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
161 ...mapState("gauges", [ |
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
162 "longtermWaterlevels", |
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
163 "yearWaterlevels", |
3058
7a1a33fcec64
client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
164 "yearCompare", |
7a1a33fcec64
client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
165 "longtermInterval" |
2829
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
166 ]), |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
167 ...mapGetters("gauges", ["selectedGauge"]), |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
168 title() { |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
169 if (!this.selectedGaugeD || !this.longtermIntervalD) return; |
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
170 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
|
171 "Hydrological Conditions" |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
172 )} (${this.longtermIntervalD.join(" - ")})`; |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
173 }, |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
174 csvLink() { |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
175 return "data:text/csv;charset=utf-8," + encodeURIComponent(this.csvData); |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
176 }, |
4802
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
177 fileName() { |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
178 if (!this.selectedGaugeD || !this.longtermIntervalD) return; |
4802
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
179 return this.downloadFilename( |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
180 this.$gettext("HydrologicalCondition"), |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
181 this.selectedGaugeD.properties.objname |
4677
fa55e48bbca1
client: improve filename generation for downloads
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4665
diff
changeset
|
182 ); |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
183 }, |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
184 csvData() { |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
185 if (!this.longtermIntervalD || !this.yearCompareD) return; |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
186 // We cannot directly use the csv data provided by the backend because the |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
187 // diagram uses data from two endpoints, longterm- and yearWaterlevels. |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
188 // So we need to merge them here to have them in one csv export. |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
189 let merged = this.longtermWaterlevels |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
190 .filter(d => d) // copy array, don't mutate original |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
191 .map(d => { |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
192 let yearData = this.yearWaterlevels.find(y => { |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
193 return d.date.getTime() === y.date.getTime(); |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
194 }); |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
195 d[this.yearCompareD] = yearData ? yearData.mean : ""; |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
196 return `${d.date.getMonth() + 1}-${d.date.getDate()};${d.min};${ |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
197 d.max |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
198 };${d.mean};${d.median};${d.q25};${d.q75};${d[this.yearCompareD]}`; |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
199 }) |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
200 .join("\n"); |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
201 return `#Interval: ${this.longtermIntervalD.join( |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
202 " - " |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
203 )}\n#date;#min;#max;#mean;#median;#q25;#q75;#${ |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
204 this.yearCompareD |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
205 }\n${merged}`; |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
206 } |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
207 }, |
3068
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
208 watch: { |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
209 paneSetup() { |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
210 this.$nextTick(() => { |
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
211 this.initialDiagramValues(); |
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
212 this.drawDiagram(); |
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
213 }); |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
214 }, |
3068
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
215 longtermWaterlevels() { |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
216 this.initialDiagramValues(); |
3068
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
217 this.drawDiagram(); |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
218 }, |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
219 yearWaterlevels() { |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
220 this.initialDiagramValues(); |
3068
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
221 this.drawDiagram(); |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
222 } |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
223 }, |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
224 methods: { |
4809
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
225 addLegendToCanvas(ctx, { width, height }) { |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
226 let x = width / 12, |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
227 y = height - 25; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
228 ctx.font = "12px sans-serif"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
229 ctx.textAlign = "start"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
230 ctx.beginPath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
231 ctx.fillStyle = "red"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
232 ctx.strokeStyle = "red"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
233 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
|
234 ctx.fill(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
235 ctx.stroke(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
236 ctx.fillStyle = "black"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
237 ctx.fillText(this.yearCompare, x + 14, y + 5); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
238 ctx.closePath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
239 |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
240 ctx.beginPath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
241 ctx.fillStyle = "orange"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
242 ctx.strokeStyle = "orange"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
243 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
|
244 ctx.fill(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
245 ctx.stroke(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
246 ctx.fillStyle = "black"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
247 ctx.fillText(this.$gettext("Q25%"), x + 14, y + 5); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
248 ctx.closePath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
249 |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
250 ctx.beginPath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
251 ctx.fillStyle = "black"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
252 ctx.strokeStyle = "black"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
253 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
|
254 ctx.fill(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
255 ctx.stroke(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
256 ctx.fillStyle = "black"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
257 ctx.fillText(this.$gettext("Median"), x + 14, y + 5); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
258 ctx.closePath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
259 |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
260 ctx.beginPath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
261 ctx.fillStyle = "purple"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
262 ctx.strokeStyle = "purple"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
263 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
|
264 ctx.fill(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
265 ctx.stroke(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
266 ctx.fillStyle = "black"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
267 ctx.fillText(this.$gettext("Q75%"), x + 14, y + 5); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
268 ctx.closePath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
269 |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
270 ctx.beginPath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
271 ctx.fillStyle = "lightsteelblue"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
272 ctx.strokeStyle = "lightsteelblue"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
273 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
|
274 ctx.fill(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
275 ctx.stroke(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
276 ctx.fillStyle = "black"; |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
277 ctx.fillText(this.$gettext("Long-term Amplitude"), x + 14, y + 5); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
278 ctx.closePath(); |
b6d8570b8480
client: image-export: add diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4808
diff
changeset
|
279 }, |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
280 initialDiagramValues() { |
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
281 this.selectedGaugeD = this.selectedGauge; |
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
282 this.longtermIntervalD = this.longtermInterval; |
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
283 this.yearCompareD = this.yearCompare; |
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
284 }, |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
285 close() { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
286 this.$store.commit( |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
287 "application/paneSetup", |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
288 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
289 ? "GAUGE_WATERLEVEL" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
290 : "DEFAULT" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
291 ); |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
292 }, |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
293 downloadPDF() { |
4456
acb21e7362ce
client: pdf-gen: fix diagram title for pdf (waterlevels, hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4385
diff
changeset
|
294 let diagramTitle = `${this.selectedGaugeD.properties.objname} (${ |
acb21e7362ce
client: pdf-gen: fix diagram title for pdf (waterlevels, hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4385
diff
changeset
|
295 this.isrsInfo(this.selectedGaugeD).orc |
4697
ce55f15e25e0
client: translations: mark strings for translation
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4677
diff
changeset
|
296 }): ${this.$gettext( |
ce55f15e25e0
client: translations: mark strings for translation
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4677
diff
changeset
|
297 "Hydrological Conditions" |
ce55f15e25e0
client: translations: mark strings for translation
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4677
diff
changeset
|
298 )} ${this.longtermIntervalD.join(" - ")}`; |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
299 this.generatePDF({ |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
300 templateData: this.templateData, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
301 diagramTitle: diagramTitle |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
302 }); |
4802
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
303 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
|
304 }, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
305 applyChange() { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
306 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
|
307 this.templateData = this.defaultTemplate; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
308 return; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
309 } |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
310 if (this.form.template) { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
311 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
|
312 .then(response => { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
313 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
|
314 values => { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
315 values.forEach(v => { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
316 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
|
317 }); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
318 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
|
319 } |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
320 ); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
321 }) |
4868
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
322 .catch(error => { |
4869
6b054b91d9b2
backend not reachable as error message etd. Login adjusted
Thomas Junk <thomas.junk@intevation.de>
parents:
4868
diff
changeset
|
323 let message = "Backend not reachable"; |
4868
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
324 if (error.response) { |
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
325 const { status, data } = error.response; |
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
326 message = `${status}: ${data.message || data}`; |
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
327 } |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
328 displayError({ |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
329 title: this.$gettext("Backend Error"), |
4868
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
330 message: message |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
331 }); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
332 }); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
333 } |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
334 }, |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
335 // Diagram legend |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
336 addDiagramLegend(position, offset, color) { |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
337 if (!this.yearCompareD) return; |
4109
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3992
diff
changeset
|
338 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:
3992
diff
changeset
|
339 y = offset.y, |
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3992
diff
changeset
|
340 padding = 3; |
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3992
diff
changeset
|
341 this.pdf.doc.setFontStyle("normal"); |
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3992
diff
changeset
|
342 this.pdf.doc.setFontSize(10); |
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3992
diff
changeset
|
343 let width = this.pdf.doc.getTextWidth("Long-term Amplitude") + padding; |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
344 // if position is on the right, x needs to be calculate with pdf width and |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
345 // the size of the element |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
346 if (["topright", "bottomright"].indexOf(position) !== -1) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
347 x = this.pdf.width - offset.x - width; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
348 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
349 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { |
4109
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3992
diff
changeset
|
350 y = this.pdf.height - offset.y - this.getTextHeight(5) - 2; |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
351 } |
4109
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3992
diff
changeset
|
352 if (y < this.getTextHeight(1)) { |
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3992
diff
changeset
|
353 y = y + this.getTextHeight(1) / 2; |
5317ae66f654
clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3992
diff
changeset
|
354 } |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
355 this.pdf.doc.setTextColor(color); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
356 this.pdf.doc.setDrawColor("white"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
357 this.pdf.doc.setFillColor("red"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
358 this.pdf.doc.circle(x, y, 2, "FD"); |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
359 this.pdf.doc.text(x + padding, y + 1, "" + this.yearCompareD); |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
360 this.pdf.doc.setFillColor("orange"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
361 this.pdf.doc.circle(x, y + 5, 2, "FD"); |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
362 this.pdf.doc.text(x + padding, y + 6, this.$gettext("Q25%")); |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
363 this.pdf.doc.setFillColor("black"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
364 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
|
365 this.pdf.doc.text(x + 3, y + 11, this.$gettext("Median")); |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
366 this.pdf.doc.setFillColor("purple"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
367 this.pdf.doc.circle(x, y + 15, 2, "FD"); |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
368 this.pdf.doc.text(x + padding, y + 16, this.$gettext("Q75%")); |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
369 this.pdf.doc.setFillColor("lightsteelblue"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
370 this.pdf.doc.circle(x, y + 20, 2, "FD"); |
4593
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
371 this.pdf.doc.text( |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
372 x + padding, |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
373 y + 21, |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
374 this.$gettext("Long-term Amplitude") |
3632cfc44b69
client: mark diagram strings for translations(waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4473
diff
changeset
|
375 ); |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
376 }, |
4135
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
377 getPrintLayout(svgHeight, svgWidth) { |
3941
7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents:
3937
diff
changeset
|
378 return { |
4135
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
379 main: { |
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
380 top: Math.floor(0.05 * svgHeight), |
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
381 right: Math.floor(0.05 * svgWidth), |
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
382 bottom: Math.floor(0.32 * svgHeight), |
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
383 left: Math.floor(0.07 * svgWidth) |
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
384 }, |
3941
7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents:
3937
diff
changeset
|
385 nav: { |
4135
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
386 top: Math.floor(0.78 * svgHeight), |
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
387 right: Math.floor(0.013 * svgWidth), |
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
388 bottom: Math.floor(0.095 * svgHeight), |
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
389 left: Math.floor(0.07 * svgWidth) |
3941
7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents:
3937
diff
changeset
|
390 } |
7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents:
3937
diff
changeset
|
391 }; |
7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents:
3937
diff
changeset
|
392 }, |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
393 drawDiagram() { |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
394 // remove old diagram |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
395 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
|
396 d3.timeFormatDefaultLocale(localeDateString); |
3915
f7f09f32d6e0
hydrological conditions: omit rendering, when container isn't visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3910
diff
changeset
|
397 const el = document.querySelector("#" + this.containerId); |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
398 if (!this.selectedGaugeD || !this.longtermWaterlevels.length || !el) |
3915
f7f09f32d6e0
hydrological conditions: omit rendering, when container isn't visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3910
diff
changeset
|
399 return; |
f7f09f32d6e0
hydrological conditions: omit rendering, when container isn't visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3910
diff
changeset
|
400 const svgWidth = el.clientWidth; |
f7f09f32d6e0
hydrological conditions: omit rendering, when container isn't visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3910
diff
changeset
|
401 const svgHeight = el.clientHeight; |
4135
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
402 const layout = this.getPrintLayout(svgHeight, svgWidth); |
3872
a7a75e003b78
hydrological conditions: factor out setting of dimensions
Thomas Junk <thomas.junk@intevation.de>
parents:
3869
diff
changeset
|
403 this.renderTo({ |
a7a75e003b78
hydrological conditions: factor out setting of dimensions
Thomas Junk <thomas.junk@intevation.de>
parents:
3869
diff
changeset
|
404 element: `#${this.containerId}`, |
a7a75e003b78
hydrological conditions: factor out setting of dimensions
Thomas Junk <thomas.junk@intevation.de>
parents:
3869
diff
changeset
|
405 dimensions: this.getDimensions({ |
3915
f7f09f32d6e0
hydrological conditions: omit rendering, when container isn't visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3910
diff
changeset
|
406 svgWidth: svgWidth, |
3937
de4c557bbc47
hydrological_conditions: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents:
3927
diff
changeset
|
407 svgHeight: svgHeight, |
3941
7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents:
3937
diff
changeset
|
408 ...layout |
3872
a7a75e003b78
hydrological conditions: factor out setting of dimensions
Thomas Junk <thomas.junk@intevation.de>
parents:
3869
diff
changeset
|
409 }) |
a7a75e003b78
hydrological conditions: factor out setting of dimensions
Thomas Junk <thomas.junk@intevation.de>
parents:
3869
diff
changeset
|
410 }); |
3857
6ce80daf8413
Hydrological conditions: render svg in offscreen element
Thomas Junk <thomas.junk@intevation.de>
parents:
3849
diff
changeset
|
411 }, |
4226
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
412 renderTo({ element, dimensions, zoomLevel }) { |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
413 // PREPARE HELPERS |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
414 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
415 // HDC/LDC/MW for the selected gauge |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
416 const refWaterLevels = JSON.parse( |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
417 this.selectedGaugeD.properties.reference_water_levels |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
418 ); |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
419 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
420 // dimensions (widths, heights, margins) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
421 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
422 // get min/max values for date and waterlevel axis |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
423 const extent = this.getExtent(refWaterLevels); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
424 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
425 // scaling helpers |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
426 const scale = this.getScale({ dimensions, extent }); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
427 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
428 // creating the axes based on the scales |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
429 const axes = this.getAxes({ scale, dimensions }); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
430 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
431 // DRAW DIAGRAM/NAVIGATION AREAS |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
432 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
433 // create svg |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
434 const svg = d3 |
3857
6ce80daf8413
Hydrological conditions: render svg in offscreen element
Thomas Junk <thomas.junk@intevation.de>
parents:
3849
diff
changeset
|
435 .select(element) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
436 .append("svg") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
437 .attr("width", "100%") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
438 .attr("height", "100%"); |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
439 |
4802
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
440 svg |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
441 .append("g") |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
442 .append("rect") |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
443 .attr("width", "100%") |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
444 .attr("height", "100%") |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
445 .attr("fill", "#ffffff"); |
2ce5c727b465
client: hydrologicalcondition: implement image-export and improve file naming
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4721
diff
changeset
|
446 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
447 // create container for main diagram |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
448 const diagram = svg |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
449 .append("g") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
450 .attr("class", "main") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
451 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
452 "transform", |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
453 `translate(${dimensions.mainMargin.left}, ${ |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
454 dimensions.mainMargin.top |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
455 })` |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
456 ); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
457 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
458 // create container for navigation diagram |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
459 const navigation = svg |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
460 .append("g") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
461 .attr("class", "nav") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
462 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
463 "transform", |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
464 `translate(${dimensions.navMargin.left}, ${dimensions.navMargin.top})` |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
465 ); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
466 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
467 // define visible area, everything outside this area will be hidden |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
468 svg |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
469 .append("defs") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
470 .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
|
471 .attr("id", "hydrocond-clip") |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
472 .append("rect") |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
473 .attr("width", dimensions.width) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
474 .attr("height", dimensions.mainHeight); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
475 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
476 // DRAW DIAGRAM PARTS |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
477 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
478 // Each drawSomething function (with the exception of drawRefLines) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
479 // returns a fuction to update the respective chart/area/etc. These |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
480 // updater functions are used by the zoom feature to rescale all elements. |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
481 const updaters = []; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
482 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
483 // draw |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
484 updaters.push(this.drawAxes({ diagram, dimensions, axes, navigation })); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
485 updaters.push( |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
486 this.drawWaterlevelMinMaxAreaChart({ scale, diagram, navigation }) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
487 ); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
488 updaters.push( |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
489 this.drawWaterlevelLineChart({ type: "median", scale, diagram }) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
490 ); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
491 updaters.push( |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
492 this.drawWaterlevelLineChart({ type: "q25", scale, diagram }) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
493 ); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
494 updaters.push( |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
495 this.drawWaterlevelLineChart({ type: "q75", scale, diagram }) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
496 ); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
497 updaters.push( |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
498 this.drawWaterlevelLineChart({ |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
499 type: "mean", |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
500 data: this.yearWaterlevels, |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
501 scale, |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
502 diagram |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
503 }) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
504 ); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
505 updaters.push(this.drawNowLines({ extent, diagram, scale, navigation })); |
3726
be939dcdfdfd
client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents:
3724
diff
changeset
|
506 |
3722
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
507 if (refWaterLevels) { |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
508 this.drawRefLines({ refWaterLevels, scale, diagram, extent }); // static, doesn't need an updater |
3722
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
509 } |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
510 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
511 // INTERACTIONS |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
512 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
513 // create rectanlge on the main chart area to capture mouse events |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
514 const eventRect = svg |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
515 .append("rect") |
3212
f87fd173f750
client: waterlevel diagrams: fixed tooltip bug
Markus Kottlaender <markus@intevation.de>
parents:
3211
diff
changeset
|
516 .attr("id", "zoom-hydrocond") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
517 .attr("class", "zoom") |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
518 .attr("width", dimensions.width) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
519 .attr("height", dimensions.mainHeight) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
520 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
521 "transform", |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
522 `translate(${dimensions.mainMargin.left}, ${ |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
523 dimensions.mainMargin.top |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
524 })` |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
525 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
526 |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
527 this.createZoom({ |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
528 updaters, |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
529 eventRect, |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
530 dimensions, |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
531 scale, |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
532 svg, |
4226
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
533 navigation, |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
534 zoomLevel |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
535 }); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
536 this.createTooltips({ eventRect, diagram, scale, dimensions }); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
537 this.setInlineStyles(svg); |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
538 }, |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
539 setInlineStyles(svg) { |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
540 svg.selectAll(".hide").attr("fill-opacity", 0); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
541 svg |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
542 .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
|
543 .attr("clip-path", "url(#hydrocond-clip)") |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
544 .attr("stroke-width", 2) |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
545 .attr("fill", "none"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
546 svg.selectAll(".line.mean").attr("stroke", "red"); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
547 svg.selectAll(".line.median").attr("stroke", "black"); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
548 svg.selectAll(".line.q25").attr("stroke", "orange"); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
549 svg.selectAll(".line.q75").attr("stroke", "purple"); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
550 svg |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
551 .selectAll(".area") |
3147
25c0cbfcc515
client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
552 .attr("clip-path", "url(#hydrocond-clip)") |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
553 .attr("stroke", "none") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
554 .attr("fill", "lightsteelblue"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
555 svg |
3209
5b8916b78cea
client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option
Markus Kottlaender <markus@intevation.de>
parents:
3197
diff
changeset
|
556 .selectAll(".hdc-line, .ldc-line, .mw-line, .rn-line") |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
557 .attr("stroke-width", 1) |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
558 .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
|
559 .attr("clip-path", "url(#hydrocond-clip)"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
560 svg.selectAll(".hdc-line").attr("stroke", "red"); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
561 svg.selectAll(".ldc-line").attr("stroke", "green"); |
4135
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
562 svg.selectAll(".mw-line").attr("stroke", "gray"); |
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
563 svg.selectAll(".rn-line").attr("stroke", "gray"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
564 svg |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
565 .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
|
566 .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
|
567 .attr("fill", "black"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
568 svg |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
569 .selectAll(".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
|
570 .attr("fill", "rgba(255, 255, 255, 0.6)"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
571 svg |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
572 .selectAll(".now-line") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
573 .attr("stroke", "#999") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
574 .attr("stroke-width", 1) |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
575 .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
|
576 .attr("clip-path", "url(#hydrocond-clip)"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
577 svg |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
578 .selectAll(".now-line-label") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
579 .attr("fill", "#999") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
580 .style("font-size", "11px"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
581 svg |
3902
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
582 .selectAll(".axis--x .tick line, .axis--y .tick line") |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
583 .attr("stroke-dasharray", 5) |
3842
22f7677337a5
client:pdf-gen: fix drawing of axises on pdf (hydrologicalconditions diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3820
diff
changeset
|
584 .attr("stroke", "#ccc"); |
3902
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
585 svg.selectAll(".axis--y-right .tick line").attr("stroke", "transparent"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
586 svg.selectAll(".tick text").attr("fill", "black"); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
587 svg.selectAll(".domain").attr("stroke", "black"); |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
588 |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
589 svg |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
590 .selectAll(".zoom") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
591 .attr("cursor", "move") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
592 .attr("fill", "none") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
593 .attr("pointer-events", "all"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
594 svg |
3111
f269bd001e78
client: remove css classes and adjust styles for hydrological-diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
595 .selectAll(".brush .selection") |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
596 .attr("stroke", "none") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
597 .attr("fill-opacity", 0.2); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
598 svg |
3111
f269bd001e78
client: remove css classes and adjust styles for hydrological-diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
599 .selectAll(".brush .handle") |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
600 .attr("stroke", "rgba(23, 162, 184, 0.5)") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
601 .attr("fill", "rgba(23, 162, 184, 0.5)"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
602 svg.selectAll(".chart-dots").attr("clip-path", "url(#hydrocond-clip)"); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
603 svg |
3111
f269bd001e78
client: remove css classes and adjust styles for hydrological-diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
604 .selectAll(".chart-dots .chart-dot") |
f269bd001e78
client: remove css classes and adjust styles for hydrological-diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
605 .attr("fill", "black") |
f269bd001e78
client: remove css classes and adjust styles for hydrological-diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
606 .attr("stroke", "black") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
607 .attr("stroke-opacity", 0) |
3111
f269bd001e78
client: remove css classes and adjust styles for hydrological-diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
608 .style("pointer-events", "none") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
609 .attr("fill-opacity", 0) |
3046
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
610 .transition() |
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
611 .attr("fill-opacity", "0.1s"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
612 svg |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
613 .selectAll(".chart-tooltip") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
614 .attr("fill-opacity", 0) |
3046
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
615 .transition() |
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
616 .attr("fill-opacity", "0.3s"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
617 svg |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
618 .selectAll(".chart-tooltip rect") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
619 .attr("fill", "#fff") |
3884
db24b4347604
client: pdf-gen: fix bug of not rendering some elements on pdf(hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3872
diff
changeset
|
620 .attr("stroke", "#ccc") |
db24b4347604
client: pdf-gen: fix bug of not rendering some elements on pdf(hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3872
diff
changeset
|
621 // set width,height attributes for rect element in case d3 does not |
db24b4347604
client: pdf-gen: fix bug of not rendering some elements on pdf(hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3872
diff
changeset
|
622 // generate them to let svg2pdf continue rendernig of the following elements |
db24b4347604
client: pdf-gen: fix bug of not rendering some elements on pdf(hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3872
diff
changeset
|
623 .attr("width", "0px") |
db24b4347604
client: pdf-gen: fix bug of not rendering some elements on pdf(hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3872
diff
changeset
|
624 .attr("height", "0px"); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
625 svg |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
626 .selectAll(".chart-tooltip text") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
627 .attr("fill", "666") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
628 .style("font-size", "0.8em"); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
629 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
630 getExtent(refWaterLevels) { |
3722
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
631 const waterlevelValues = []; |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
632 this.longtermWaterlevels.forEach(wl => { |
3722
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
633 waterlevelValues.push(wl.min, wl.max); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
634 }); |
3722
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
635 if (refWaterLevels) { |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
636 waterlevelValues.push( |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
637 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8, |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
638 Math.max( |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
639 refWaterLevels.LDC - (refWaterLevels.HDC - refWaterLevels.LDC) / 4, |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
640 0 |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
641 ) |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
642 ); |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
643 } else { |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
644 let delta = d3.max(waterlevelValues) - d3.min(waterlevelValues); |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
645 waterlevelValues.push( |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
646 d3.max(waterlevelValues) + delta * 0.1, |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
647 d3.min(waterlevelValues) - delta * 0.1 |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
648 ); |
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
649 } |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
650 return { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
651 // set min/max values for the date axis |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
652 date: [startOfYear(new Date()), endOfYear(new Date())], |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
653 // set min/max values for the waterlevel axis |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
654 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC) |
3722
f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
3691
diff
changeset
|
655 waterlevel: d3.extent(waterlevelValues) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
656 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
657 }, |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
658 getScale({ dimensions, extent }) { |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
659 // scaling helpers to convert real world values into pixels |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
660 const x = d3.scaleTime().range([0, dimensions.width]); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
661 const y = d3.scaleLinear().range([dimensions.mainHeight, 0]); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
662 const x2 = d3.scaleTime().range([0, dimensions.width]); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
663 const y2 = d3.scaleLinear().range([dimensions.navHeight, 0]); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
664 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
665 // setting the min and max values for the diagram axes |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
666 x.domain(d3.extent(extent.date)); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
667 y.domain(extent.waterlevel); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
668 x2.domain(x.domain()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
669 y2.domain(y.domain()); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
670 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
671 return { x, y, x2, y2 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
672 }, |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
673 getAxes({ scale, dimensions }) { |
4711
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
674 const dFormat = date => { |
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
675 // make the x-axis label formats dynamic, based on zoom |
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
676 // but never display year numbers since they don't make any sense in |
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
677 // this diagram |
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
678 return (d3.timeSecond(date) < date |
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
679 ? d3.timeFormat(".%L") |
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
680 : d3.timeMinute(date) < date |
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
681 ? d3.timeFormat(":%S") |
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
682 : d3.timeHour(date) < date |
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
683 ? d3.timeFormat("%H:%M") |
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
684 : d3.timeDay(date) < date |
4713
cd9216c073fd
minor fixes date localization
Thomas Junk <thomas.junk@intevation.de>
parents:
4711
diff
changeset
|
685 ? d3.timeFormat("%H:%M") |
4711
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
686 : d3.timeMonth(date) < date |
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
687 ? d3.timeWeek(date) < date |
4721
b2119cf5c7fb
mark date for translation
Thomas Junk <thomas.junk@intevation.de>
parents:
4720
diff
changeset
|
688 ? d3.timeFormat(app.$gettext("%a %d")) |
b2119cf5c7fb
mark date for translation
Thomas Junk <thomas.junk@intevation.de>
parents:
4720
diff
changeset
|
689 : d3.timeFormat(app.$gettext("%b %d")) |
4711
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
690 : d3.timeFormat("%B"))(date); |
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
691 }; |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
692 return { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
693 x: d3 |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
694 .axisTop(scale.x) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
695 .tickSizeInner(dimensions.mainHeight) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
696 .tickSizeOuter(0) |
4711
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
697 .tickFormat(dFormat), |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
698 y: d3 |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
699 .axisRight(scale.y) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
700 .tickSizeInner(dimensions.width) |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
701 .tickSizeOuter(0) |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
702 .tickFormat(d => this.$options.filters.waterlevel(d)), |
3902
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
703 yRight: d3 |
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
704 .axisRight(scale.y) |
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
705 .tickSizeInner(3) |
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
706 .tickSizeOuter(0) |
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
707 .tickFormat(d => this.$options.filters.waterlevel(d)), |
4711
13575ffb8c1f
hydrological_conditions: unify localization for brush and diagram
Thomas Junk <thomas.junk@intevation.de>
parents:
4710
diff
changeset
|
708 x2: d3.axisBottom(scale.x2).tickFormat(dFormat) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
709 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
710 }, |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
711 drawNowLines({ extent, diagram, scale, navigation }) { |
3726
be939dcdfdfd
client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents:
3724
diff
changeset
|
712 const now = new Date(); |
be939dcdfdfd
client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents:
3724
diff
changeset
|
713 const nowCoords = [ |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
714 { x: now, y: extent.waterlevel[0] }, |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
715 { x: now, y: extent.waterlevel[1] } |
3726
be939dcdfdfd
client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents:
3724
diff
changeset
|
716 ]; |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
717 const nowLine = d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
718 .line() |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
719 .x(d => scale.x(d.x)) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
720 .y(d => scale.y(d.y)); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
721 const nowLabel = selection => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
722 selection.attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
723 "transform", |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
724 `translate(${scale.x(now)}, ${scale.y(extent.waterlevel[1])})` |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
725 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
726 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
727 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
728 // draw in main |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
729 diagram |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
730 .append("path") |
3726
be939dcdfdfd
client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents:
3724
diff
changeset
|
731 .datum(nowCoords) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
732 .attr("class", "now-line") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
733 .attr("d", nowLine); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
734 diagram // label |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
735 .append("text") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
736 .text(this.$gettext("Now")) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
737 .attr("class", "now-line-label") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
738 .attr("text-anchor", "middle") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
739 .call(nowLabel); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
740 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
741 // draw in nav |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
742 navigation |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
743 .append("path") |
3726
be939dcdfdfd
client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents:
3724
diff
changeset
|
744 .datum(nowCoords) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
745 .attr("class", "now-line") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
746 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
747 "d", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
748 d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
749 .line() |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
750 .x(d => scale.x2(d.x)) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
751 .y(d => scale.y2(d.y)) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
752 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
753 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
754 return () => { |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
755 diagram.select(".now-line").attr("d", nowLine); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
756 diagram.select(".now-line-label").call(nowLabel); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
757 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
758 }, |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
759 drawAxes({ diagram, dimensions, axes, navigation }) { |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
760 diagram |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
761 .append("g") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
762 .attr("class", "axis--x") |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
763 .attr("transform", `translate(0, ${dimensions.mainHeight})`) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
764 .call(axes.x) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
765 .selectAll(".tick text") |
4135
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
766 .attr("y", Math.floor(0.015 * dimensions.mainHeight)); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
767 diagram // label |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
768 .append("text") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
769 .text(this.$gettext("Waterlevel [m]")) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
770 .attr("text-anchor", "middle") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
771 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
772 "transform", |
4135
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
773 `translate(${-0.05 * |
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
774 Math.floor(dimensions.width)}, ${dimensions.mainHeight / |
a6eda41e7724
hydrological_conditions: use offsets relative to svgwidth and svgheight
Thomas Junk <thomas.junk@intevation.de>
parents:
4109
diff
changeset
|
775 2}) rotate(-90)` |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
776 ); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
777 diagram |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
778 .append("g") |
3902
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
779 .attr("class", "axis--y") |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
780 .call(axes.y) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
781 .selectAll(".tick text") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
782 .attr("x", -25); |
3902
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
783 diagram |
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
784 .append("g") |
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
785 .attr("class", "axis--y-right") |
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
786 .attr("transform", `translate(${dimensions.width})`) |
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
787 .call(axes.yRight) |
0149b68a4f7e
client: hydrological conditions diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents:
3894
diff
changeset
|
788 .selectAll(".tick text"); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
789 |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
790 navigation |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
791 .append("g") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
792 .attr("class", "axis axis--x") |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
793 .attr("transform", `translate(0, ${dimensions.navHeight})`) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
794 .call(axes.x2); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
795 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
796 return () => { |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
797 diagram |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
798 .select(".axis--x") |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
799 .call(axes.x) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
800 .selectAll(".tick text") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
801 .attr("y", 15); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
802 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
803 }, |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
804 drawWaterlevelMinMaxAreaChart({ scale, diagram, navigation }) { |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
805 const areaChart = isNav => |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
806 d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
807 .area() |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
808 .x(d => scale[isNav ? "x2" : "x"](d.date)) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
809 .y0(d => scale[isNav ? "y2" : "y"](d.min)) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
810 .y1(d => scale[isNav ? "y2" : "y"](d.max)); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
811 |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
812 diagram |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
813 .append("path") |
2813
49c1570919ae
client: spuc8: use new endpoints to fetch year based and longterm waterlevel data
Markus Kottlaender <markus@intevation.de>
parents:
2791
diff
changeset
|
814 .datum(this.longtermWaterlevels) |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
815 .attr("class", "area") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
816 .attr("d", areaChart()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
817 |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
818 navigation |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
819 .append("path") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
820 .datum(this.longtermWaterlevels) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
821 .attr("class", "area") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
822 .attr("d", areaChart(true)); |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
823 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
824 return () => { |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
825 diagram.select(".area").attr("d", areaChart()); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
826 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
827 }, |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
828 drawWaterlevelLineChart({ type, data, scale, diagram }) { |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
829 const lineChart = type => |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
830 d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
831 .line() |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
832 .x(d => scale.x(d.date)) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
833 .y(d => scale.y(d[type])) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
834 .curve(d3.curveLinear); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
835 diagram |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
836 .append("path") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
837 .attr("class", "line " + type) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
838 .datum(data || this.longtermWaterlevels) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
839 .attr("d", lineChart(type)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
840 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
841 return () => { |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
842 diagram.select(".line." + type).attr("d", lineChart(type)); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
843 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
844 }, |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
845 drawRefLines({ refWaterLevels, scale, diagram, extent }) { |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
846 const refWaterlevelLine = d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
847 .line() |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
848 .x(d => scale.x(d.x)) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
849 .y(d => scale.y(d.y)); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
850 |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
851 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
|
852 if (refWaterLevels[ref]) { |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
853 diagram |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
854 .append("path") |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
855 .datum([ |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
856 { x: extent.date[0], y: refWaterLevels[ref] }, |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
857 { 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
|
858 ]) |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
859 .attr("class", ref.toLowerCase() + "-line") |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
860 .attr("d", refWaterlevelLine); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
861 diagram // label |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
862 .append("rect") |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
863 .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
|
864 .attr("x", 1) |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
865 .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
|
866 .attr("width", 55) |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
867 .attr("height", 12); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
868 diagram |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
869 .append("text") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
870 .text( |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
871 `${ref} (${this.$options.filters.waterlevel( |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
872 refWaterLevels[ref] |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
873 )})` |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
874 ) |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
875 .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
|
876 .attr("x", 5) |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
877 .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
|
878 } |
3209
5b8916b78cea
client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option
Markus Kottlaender <markus@intevation.de>
parents:
3197
diff
changeset
|
879 } |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
880 }, |
4226
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
881 createZoom({ |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
882 updaters, |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
883 eventRect, |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
884 dimensions, |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
885 scale, |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
886 svg, |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
887 navigation, |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
888 zoomLevel |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
889 }) { |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
890 const brush = d3 |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
891 .brushX() |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
892 .handleSize(4) |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
893 .extent([[0, 0], [dimensions.width, dimensions.navHeight]]); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
894 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
895 const zoom = d3 |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
896 .zoom() |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
897 .scaleExtent([1, Infinity]) |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
898 .translateExtent([[0, 0], [dimensions.width, dimensions.mainHeight]]) |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
899 .extent([[0, 0], [dimensions.width, dimensions.mainHeight]]); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
900 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
901 brush.on("brush end", () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
902 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
903 return; // ignore brush-by-zoom |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
904 let s = d3.event.selection || scale.x2.range(); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
905 scale.x.domain(s.map(scale.x2.invert, scale.x2)); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
906 updaters.forEach(u => u && u()); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
907 this.setInlineStyles(svg); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
908 svg |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
909 .select(".zoom") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
910 .call( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
911 zoom.transform, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
912 d3.zoomIdentity |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
913 .scale(dimensions.width / (s[1] - s[0])) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
914 .translate(-s[0], 0) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
915 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
916 }); |
4226
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
917 let scaleForZoom = t => { |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
918 scale.x.domain(t.rescaleX(scale.x2).domain()); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
919 updaters.forEach(u => u && u()); |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
920 this.setInlineStyles(svg); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
921 navigation |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
922 .select(".brush") |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
923 .call(brush.move, scale.x.range().map(t.invertX, t)); |
4226
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
924 }; |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
925 zoom.on("zoom", () => { |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
926 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
927 return; // ignore zoom-by-brush |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
928 let t = d3.event.transform; |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
929 // Set the last zoom level and recalculate x,y for pdf-export |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
930 if (zoomLevel) { |
4228
b8d578e42b4b
pdfprint: generate a new transform object instead of manipulating the given one.
Thomas Junk <thomas.junk@intevation.de>
parents:
4227
diff
changeset
|
931 const tx = (zoomLevel.x * dimensions.width) / zoomLevel.width; |
b8d578e42b4b
pdfprint: generate a new transform object instead of manipulating the given one.
Thomas Junk <thomas.junk@intevation.de>
parents:
4227
diff
changeset
|
932 const k = zoomLevel.k; |
b8d578e42b4b
pdfprint: generate a new transform object instead of manipulating the given one.
Thomas Junk <thomas.junk@intevation.de>
parents:
4227
diff
changeset
|
933 const ty = zoomLevel.y; |
b8d578e42b4b
pdfprint: generate a new transform object instead of manipulating the given one.
Thomas Junk <thomas.junk@intevation.de>
parents:
4227
diff
changeset
|
934 t = d3.zoomIdentity.translate(tx, ty).scale(k); |
4226
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
935 } |
4228
b8d578e42b4b
pdfprint: generate a new transform object instead of manipulating the given one.
Thomas Junk <thomas.junk@intevation.de>
parents:
4227
diff
changeset
|
936 scaleForZoom(t); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
937 }); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
938 zoom.on("start", () => { |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
939 svg.select(".chart-dot").style("opacity", 0); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
940 svg.select(".chart-tooltip").style("opacity", 0); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
941 }); |
4226
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
942 // store the zoom level after zomming is ended |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
943 if (!zoomLevel) { |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
944 zoom.on("end", () => { |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
945 this.zoomStore = { ...d3.event.transform, width: dimensions.width }; |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
946 }); |
6f0cd9a551b3
client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
4135
diff
changeset
|
947 } |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
948 navigation |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
949 .append("g") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
950 .attr("class", "brush") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
951 .call(brush) |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
952 .call(brush.move, scale.x.range()); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
953 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
954 eventRect.call(zoom); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
955 }, |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
956 createTooltips({ eventRect, diagram, scale, dimensions }) { |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
957 // create clippable container for the dot |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
958 diagram |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
959 .append("g") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
960 .attr("class", "chart-dots") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
961 .append("circle") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
962 .attr("class", "chart-dot") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
963 .attr("r", 4); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
964 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
965 // create container for the tooltip |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
966 const tooltip = diagram.append("g").attr("class", "chart-tooltip"); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
967 tooltip |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
968 .append("rect") |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
969 .attr("rx", "0.25em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
970 .attr("ry", "0.25em"); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
971 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
972 // create container for multiple text rows |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
973 const tooltipText = tooltip.append("text").attr("text-anchor", "middle"); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
974 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
975 // padding inside the tooltip box and diagram padding to determine left |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
976 // and right offset from the diagram boundaries for the tooltip position. |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
977 const tooltipPadding = 10; |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
978 const diagramPadding = 5; |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
979 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
980 eventRect |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
981 .on("mouseover", () => { |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
982 diagram.select(".chart-dot").style("opacity", 1); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
983 diagram.select(".chart-tooltip").style("opacity", 1); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
984 }) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
985 .on("mouseout", () => { |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
986 diagram.select(".chart-dot").style("opacity", 0); |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
987 diagram.select(".chart-tooltip").style("opacity", 0); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
988 }) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
989 .on("mousemove", () => { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
990 // find data point closest to mouse |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
991 const x0 = scale.x.invert( |
3212
f87fd173f750
client: waterlevel diagrams: fixed tooltip bug
Markus Kottlaender <markus@intevation.de>
parents:
3211
diff
changeset
|
992 d3.mouse(document.getElementById("zoom-hydrocond"))[0] |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
993 ), |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
994 i = d3.bisector(d => d.date).left(this.longtermWaterlevels, x0, 1), |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
995 d0 = this.longtermWaterlevels[i - 1], |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
996 d1 = this.longtermWaterlevels[i] || d0, |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
997 d = x0 - d0.date > d1.date - x0 ? d1 : d0; |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
998 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
999 const coords = { |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
1000 x: scale.x(d.date), |
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
1001 y: scale.y(d.median) |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1002 }; |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1003 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1004 // position the dot |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
1005 diagram |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1006 .select(".chart-dot") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1007 .style("opacity", 1) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1008 .attr("transform", `translate(${coords.x}, ${coords.y})`); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1009 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1010 // remove current texts |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1011 tooltipText.selectAll("tspan").remove(); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1012 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1013 // write date |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1014 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1015 .append("tspan") |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1016 .attr("dominant-baseline", "hanging") |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1017 .attr("text-anchor", "middle") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1018 .text( |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1019 d.date.toLocaleString([], { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1020 year: "2-digit", |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1021 month: "2-digit", |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1022 day: "2-digit" |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1023 }) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1024 ); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1025 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1026 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1027 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1028 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1029 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1030 .attr("dy", "1.4em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1031 .attr("dominant-baseline", "hanging") |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1032 .attr("text-anchor", "middle") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
1033 .text(`Q75%: ${this.$options.filters.waterlevel(d.q75)} m`); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1034 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1035 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1036 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1037 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1038 .attr("dy", "2.6em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1039 .attr("dominant-baseline", "hanging") |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1040 .attr("text-anchor", "middle") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
1041 .text(`Median: ${this.$options.filters.waterlevel(d.median)} m`); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1042 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1043 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1044 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1045 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1046 .attr("dy", "3.8em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1047 .attr("dominant-baseline", "hanging") |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1048 .attr("text-anchor", "middle") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
1049 .text(`Q25%: ${this.$options.filters.waterlevel(d.q25)} m`); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1050 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1051 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1052 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1053 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1054 .attr("dy", "5em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1055 .attr("dominant-baseline", "hanging") |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1056 .attr("text-anchor", "middle") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
1057 .text(`Max: ${this.$options.filters.waterlevel(d.max)} m`); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1058 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1059 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1060 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1061 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1062 .attr("dy", "6.2em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1063 .attr("dominant-baseline", "hanging") |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1064 .attr("text-anchor", "middle") |
3576
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3544
diff
changeset
|
1065 .text(`Min: ${this.$options.filters.waterlevel(d.min)} m`); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1066 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1067 const dYear = this.yearWaterlevels.find( |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1068 ywl => ywl.date.getTime() === d.date.getTime() |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1069 ); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1070 if (dYear) { |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
1071 if (!this.yearCompareD) return; |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1072 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1073 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1074 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1075 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1076 .attr("dy", "7.4em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1077 .attr("dominant-baseline", "hanging") |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1078 .attr("text-anchor", "middle") |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
1079 .text(`${this.yearCompareD}: ${dYear.mean.toFixed(1)} cm`); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1080 } |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1081 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1082 // get text dimensions |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1083 const textBBox = tooltipText.node().getBBox(); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1084 |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
1085 diagram |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1086 .selectAll(".chart-tooltip text tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1087 .attr("x", textBBox.width / 2 + tooltipPadding) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1088 .attr("y", tooltipPadding); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1089 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1090 // position and scale tooltip box |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1091 const xMax = |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
1092 dimensions.width - |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1093 (textBBox.width + diagramPadding + tooltipPadding * 2); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1094 const tooltipX = Math.max( |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1095 diagramPadding, |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1096 Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1097 ); |
2824
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
1098 let tooltipY = coords.y - (textBBox.height + tooltipPadding * 2) - 10; |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
1099 if (coords.y < textBBox.height + tooltipPadding * 2) { |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
1100 tooltipY = coords.y + 10; |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
1101 } |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
1102 |
3869
7d86beedfb00
hydrological conditions: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents:
3865
diff
changeset
|
1103 diagram |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1104 .select(".chart-tooltip") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1105 .style("opacity", 1) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1106 .attr("transform", `translate(${tooltipX}, ${tooltipY})`) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1107 .select("rect") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1108 .attr("width", textBBox.width + tooltipPadding * 2) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1109 .attr("height", textBBox.height + tooltipPadding * 2); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1110 }); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1111 } |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1112 }, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1113 created() { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1114 this.resizeListenerFunction = debounce(this.drawDiagram, 100); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1115 window.addEventListener("resize", this.resizeListenerFunction); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1116 }, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1117 mounted() { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1118 // 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
|
1119 // 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
|
1120 // 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
|
1121 // 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
|
1122 // 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
|
1123 // 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
|
1124 // screen. |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1125 setTimeout(this.drawDiagram, 150); |
4385
610773d34e4f
hydrological_conditions: decouple diagram from dialogue
Thomas Junk <thomas.junk@intevation.de>
parents:
4228
diff
changeset
|
1126 this.initialDiagramValues(); |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1127 this.templates[0] = this.defaultTemplate; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1128 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
|
1129 this.templateData = this.form.template; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1130 HTTP.get("/templates/diagram", { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1131 headers: { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1132 "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
|
1133 "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
|
1134 } |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1135 }) |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1136 .then(response => { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1137 if (response.data.length) { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1138 this.templates = response.data; |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1139 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
|
1140 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
|
1141 this.applyChange(); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1142 } |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1143 }) |
4868
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
1144 .catch(error => { |
4869
6b054b91d9b2
backend not reachable as error message etd. Login adjusted
Thomas Junk <thomas.junk@intevation.de>
parents:
4868
diff
changeset
|
1145 let message = "Backend not reachable"; |
4868
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
1146 if (error.response) { |
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
1147 const { status, data } = error.response; |
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
1148 message = `${status}: ${data.message || data}`; |
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
1149 } |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1150 displayError({ |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1151 title: this.$gettext("Backend Error"), |
4868
008bc1ae8897
exception handling
Thomas Junk <thomas.junk@intevation.de>
parents:
4809
diff
changeset
|
1152 message: message |
3992
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1153 }); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1154 }); |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1155 }, |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1156 destroyed() { |
2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents:
3965
diff
changeset
|
1157 window.removeEventListener("resize", this.resizeListenerFunction); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1158 } |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1159 }; |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1160 </script> |