Mercurial > gemma

annotate client/src/components/gauge/HydrologicalConditions.vue @ 4869:6b054b91d9b2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
backend not reachable as error message etd. Login adjusted
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 19 Dec 2019 09:35:14 +0100
parents 008bc1ae8897
children de86a96d55c3
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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>