Mercurial > gemma
annotate client/src/components/gauge/HydrologicalConditions.vue @ 3209:5b8916b78cea
client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 09 May 2019 09:27:34 +0200 |
parents | 9d38df37c1f8 |
children | f76927849ef8 |
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"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
3 <UIBoxHeader |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
4 icon="ruler-vertical" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
5 :title="title" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
6 :closeCallback="close" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
7 class="rounded-0" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
8 /> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
9 <div class="d-flex flex-fill"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
10 <DiagramLegend> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
11 <div class="legend"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
12 <span style="background-color: red"></span> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
13 {{ yearCompare }} |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
14 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
15 <div class="legend"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
16 <span style="background-color: orange"></span> Q25% |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
17 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
18 <div class="legend"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
19 <span style="background-color: black"></span> Median |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
20 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
21 <div class="legend"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
22 <span style="background-color: purple"></span> Q75% |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
23 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
24 <div class="legend"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
25 <span style="background-color: lightsteelblue"></span> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
26 Long-term Amplitude |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
27 </div> |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
28 <select |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
29 @change="applyChange" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
30 v-model="form.template" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
31 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
|
32 > |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
33 <option |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
34 v-for="template in templates" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
35 :value="template" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
36 :key="template.name" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
37 > |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
38 {{ template.name }} |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
39 </option> |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
40 </select> |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
41 <div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
42 <button |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
43 @click="downloadPDF" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
44 type="button" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
45 class="btn btn-sm btn-info d-block w-100 mt-2" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
46 > |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
47 <translate>Export to PDF</translate> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
48 </button> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
49 </div> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
50 </DiagramLegend> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
51 <div |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
52 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
|
53 :id="containerId" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
54 > |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
55 <div v-if="!longtermWaterlevels.length"> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
56 <translate>No data available.</translate> |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
57 </div> |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2829
diff
changeset
|
58 </div> |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 </div> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 </div> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 </template> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 <script> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 /* 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
|
65 * without warranty, see README.md and license for details. |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 * |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 * SPDX-License-Identifier: AGPL-3.0-or-later |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 * License-Filename: LICENSES/AGPL-3.0.txt |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 * |
3112
e838609bc10d
client: fix license header for waterlevel.vue and hydrologicalconditions.vue
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3111
diff
changeset
|
70 * Copyright (C) 2019 by via donau |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 * – Österreichische Wasserstraßen-Gesellschaft mbH |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 * Software engineering by Intevation GmbH |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 * |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 * Author(s): |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 * 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
|
76 * Fadi Abbud <fadi.abbud@intevation.de> |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 */ |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 import { mapState, mapGetters } from "vuex"; |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
80 import * as d3 from "d3"; |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 import debounce from "debounce"; |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82 import { startOfYear, endOfYear } from "date-fns"; |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
83 import jsPDF from "jspdf"; |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
84 import canvg from "canvg"; |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
85 import { pdfgen } from "@/lib/mixins"; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
86 import { HTTP } from "@/lib/http"; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
87 import { displayError } from "@/lib/errors"; |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 export default { |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
90 mixins: [pdfgen], |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2829
diff
changeset
|
91 components: { |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2829
diff
changeset
|
92 DiagramLegend: () => import("@/components/DiagramLegend") |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2829
diff
changeset
|
93 }, |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
94 data() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
95 return { |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
96 containerId: "hydrologicalconditions-diagram-container", |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
97 svg: null, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
98 diagram: null, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
99 navigation: null, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
100 dimensions: null, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
101 extent: null, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
102 scale: null, |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
103 axes: null, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
104 templateData: null, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
105 form: { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
106 template: null, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
107 form: null |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
108 }, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
109 templates: [], |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
110 defaultTemplate: { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
111 name: "Default", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
112 properties: { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
113 paperSize: "a4", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
114 resolution: 80 |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
115 }, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
116 elements: [ |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
117 { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
118 type: "diagram", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
119 position: "topleft", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
120 offset: { x: 15, y: 50 }, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
121 width: 290, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
122 height: 100 |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
123 }, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
124 { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
125 type: "diagramlegend", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
126 position: "topleft", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
127 offset: { x: 30, y: 150 }, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
128 colot: "black" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
129 }, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
130 { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
131 type: "diagramtitle", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
132 position: "topleft", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
133 offset: { x: 50, y: 26 }, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
134 fontsize: 22, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
135 color: "steelblue" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
136 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
137 ] |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
138 }, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
139 pdf: { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
140 doc: null, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
141 width: 420, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
142 height: 297 |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
143 } |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
144 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
145 }, |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
146 computed: { |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
147 ...mapState("application", ["paneSetup"]), |
2829
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
148 ...mapState("gauges", [ |
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
149 "longtermWaterlevels", |
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
150 "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
|
151 "yearCompare", |
7a1a33fcec64
client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
152 "longtermInterval" |
2829
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
153 ]), |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
154 ...mapGetters("gauges", ["selectedGauge"]), |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
155 title() { |
3148
cdfb0093b7b1
client: gauge diagrams: added information to titles
Markus Kottlaender <markus@intevation.de>
parents:
3147
diff
changeset
|
156 return `${this.selectedGauge.properties.objname}: ${this.$gettext( |
cdfb0093b7b1
client: gauge diagrams: added information to titles
Markus Kottlaender <markus@intevation.de>
parents:
3147
diff
changeset
|
157 "Hydrological Conditions" |
cdfb0093b7b1
client: gauge diagrams: added information to titles
Markus Kottlaender <markus@intevation.de>
parents:
3147
diff
changeset
|
158 )} (${this.longtermInterval.join(" - ")})`; |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
159 } |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
160 }, |
3068
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
161 watch: { |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
162 paneSetup() { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
163 this.$nextTick(() => this.drawDiagram()); |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
164 }, |
3068
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
165 longtermWaterlevels() { |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
166 this.drawDiagram(); |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
167 }, |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
168 yearWaterlevels() { |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
169 this.drawDiagram(); |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
170 } |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
171 }, |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
172 methods: { |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
173 close() { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
174 this.$store.commit( |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
175 "application/paneSetup", |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
176 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
177 ? "GAUGE_WATERLEVEL" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
178 : "DEFAULT" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
179 ); |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
180 }, |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
181 downloadPDF() { |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
182 if (this.templateData) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
183 this.pdf.doc = new jsPDF( |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
184 "l", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
185 "mm", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
186 this.templateData.properties.paperSize |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
187 ); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
188 // pdf width and height in millimeter (landscape) |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
189 this.pdf.width = |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
190 this.templateData.properties.paperSize === "a3" ? 420 : 297; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
191 this.pdf.height = |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
192 this.templateData.properties.paperSize === "a3" ? 297 : 210; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
193 // default values if some are missing in template |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
194 let defaultFontSize = 11, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
195 defaultColor = "black", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
196 defaultWidth = 70, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
197 defaultTextColor = "black", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
198 defaultBorderColor = "white", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
199 defaultBgColor = "white", |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
200 defaultRounding = 2, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
201 defaultPadding = 2, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
202 defaultOffset = { x: 0, y: 0 }; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
203 this.templateData.elements.forEach(e => { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
204 switch (e.type) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
205 case "diagram": { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
206 this.addDiagram( |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
207 e.position, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
208 e.offset || defaultOffset, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
209 e.width, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
210 e.height |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
211 ); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
212 break; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
213 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
214 case "diagramtitle": { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
215 this.addDiagramTitle(e.position, e.offset, e.fontsize, e.color); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
216 break; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
217 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
218 case "diagramlegend": { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
219 this.addDiagramLegend( |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
220 e.position, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
221 e.offset || defaultOffset, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
222 e.color || defaultColor |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
223 ); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
224 break; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
225 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
226 case "image": { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
227 this.addImage( |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
228 e.url, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
229 e.format, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
230 e.position, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
231 e.offset || defaultOffset, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
232 e.width, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
233 e.height |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
234 ); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
235 break; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
236 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
237 case "text": { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
238 this.addText( |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
239 e.position, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
240 e.offset || defaultOffset, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
241 e.width || defaultWidth, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
242 e.fontSize || defaultFontSize, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
243 e.color || defaultTextColor, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
244 e.text |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
245 ); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
246 break; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
247 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
248 case "box": { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
249 this.addBox( |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
250 e.position, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
251 e.offset, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
252 e.width, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
253 e.height, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
254 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
255 e.color || defaultBgColor, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
256 e.brcolor || defaultBorderColor |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
257 ); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
258 break; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
259 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
260 case "textbox": { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
261 this.addTextBox( |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
262 e.position, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
263 e.offset || defaultOffset, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
264 e.width, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
265 e.height, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
266 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
267 e.padding || defaultPadding, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
268 e.fontSize || defaultFontSize, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
269 e.color || defaultTextColor, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
270 e.background || defaultBgColor, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
271 e.text, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
272 e.brcolor || defaultBorderColor |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
273 ); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
274 break; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
275 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
276 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
277 }); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
278 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
279 this.pdf.doc.save( |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
280 this.selectedGauge.properties.objname + |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
281 " Hydrological-condition Diagram.pdf" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
282 ); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
283 }, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
284 addDiagram(position, offset, width, height) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
285 let x = offset.x, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
286 y = offset.y; |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
287 var svg = document.getElementById(this.containerId).innerHTML; |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
288 if (svg) { |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
289 svg = svg.replace(/\r?\n|\r/g, "").trim(); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
290 } |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
291 var canvas = document.createElement("canvas"); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
292 canvas.width = window.innerWidth; |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
293 canvas.height = window.innerHeight / 2; |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
294 canvg(canvas, svg, { |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
295 ignoreMouse: true, |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
296 ignoreAnimation: true, |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
297 ignoreDimensions: true |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
298 }); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
299 var imgData = canvas.toDataURL("image/png"); |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
300 // landscape format is used for both a3,a4 papersize |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
301 if (!width) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
302 width = this.templateData.properties.paperSize === "a3" ? 380 : 290; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
303 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
304 if (!height) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
305 height = this.templateData.properties.paperSize === "a3" ? 130 : 100; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
306 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
307 if (["topright", "bottomright"].indexOf(position) !== -1) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
308 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
|
309 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
310 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
311 y = this.pdf.height - offset.y - height; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
312 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
313 this.pdf.doc.addImage(imgData, "PNG", x, y, width, height); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
314 }, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
315 applyChange() { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
316 if (this.form.template.hasOwnProperty("properties")) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
317 this.templateData = this.defaultTemplate; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
318 return; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
319 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
320 if (this.form.template) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
321 HTTP.get("/templates/print/" + this.form.template.name, { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
322 headers: { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
323 "X-Gemma-Auth": localStorage.getItem("token"), |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
324 "Content-type": "text/xml; charset=UTF-8" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
325 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
326 }) |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
327 .then(response => { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
328 this.templateData = response.data.template_data; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
329 this.form.paperSize = this.templateData.properties.paperSize; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
330 }) |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
331 .catch(e => { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
332 const { status, data } = e.response; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
333 displayError({ |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
334 title: this.$gettext("Backend Error"), |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
335 message: `${status}: ${data.message || data}` |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
336 }); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
337 }); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
338 } |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
339 }, |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
340 // Gauge info as title |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
341 addDiagramTitle(position, offset, size, color) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
342 let x = offset.x, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
343 y = offset.y; |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
344 let gaugeInfo = |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
345 this.selectedGauge.properties.objname + |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
346 " (" + |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
347 this.selectedGauge.id |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
348 .split(".")[1] |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
349 .replace(/[()]/g, "") |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
350 .split(",")[3] + |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
351 "): Hydrological Conditions " + |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
352 this.longtermInterval.join(" - "); |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
353 let width = |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
354 (this.pdf.doc.getStringUnitWidth(gaugeInfo) * size) / (72 / 25.6) + |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
355 size / 2; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
356 // 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
|
357 // the size of the element |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
358 if (["topright", "bottomright"].indexOf(position) !== -1) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
359 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
|
360 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
361 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
362 y = this.pdf.height - offset.y - this.getTextHeight(1); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
363 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
364 this.pdf.doc.setTextColor(color); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
365 this.pdf.doc.setFontSize(size); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
366 this.pdf.doc.setFontStyle("bold"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
367 this.pdf.doc.text(gaugeInfo, x, y, { baseline: "hanging" }); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
368 }, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
369 getTextHeight(numberOfLines) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
370 return ( |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
371 numberOfLines * |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
372 ((this.pdf.doc.getFontSize() * 25.4) / 80) * |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
373 this.pdf.doc.getLineHeightFactor() |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
374 ); |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
375 }, |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
376 // Diagram legend |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
377 addDiagramLegend(position, offset, color) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
378 let x = offset.x, |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
379 y = offset.y; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
380 let width = |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
381 (this.pdf.doc.getStringUnitWidth("Long-term Amplitude") * 10) / |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
382 (72 / 25.6) + |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
383 5; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
384 // 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
|
385 // the size of the element |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
386 if (["topright", "bottomright"].indexOf(position) !== -1) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
387 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
|
388 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
389 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
390 y = this.pdf.height - offset.y - this.getTextHeight(4); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
391 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
392 this.pdf.doc.setFontSize(10); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
393 this.pdf.doc.setTextColor(color); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
394 this.pdf.doc.setDrawColor("white"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
395 this.pdf.doc.setFillColor("red"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
396 this.pdf.doc.circle(x, y, 2, "FD"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
397 this.pdf.doc.text(x + 3, y + 1, "" + this.yearCompare); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
398 this.pdf.doc.setFillColor("orange"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
399 this.pdf.doc.circle(x, y + 5, 2, "FD"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
400 this.pdf.doc.text(x + 3, y + 6, "Q25%"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
401 this.pdf.doc.setFillColor("black"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
402 this.pdf.doc.circle(x, y + 10, 2, "FD"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
403 this.pdf.doc.text(x + 3, y + 11, "Median "); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
404 this.pdf.doc.setFillColor("purple"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
405 this.pdf.doc.circle(x, y + 15, 2, "FD"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
406 this.pdf.doc.text(x + 3, y + 16, "Q75%"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
407 this.pdf.doc.setFillColor("lightsteelblue"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
408 this.pdf.doc.circle(x, y + 20, 2, "FD"); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
409 this.pdf.doc.text(x + 3, y + 21, "Long-term Amplitude"); |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
410 }, |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
411 drawDiagram() { |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
412 // remove old diagram |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
413 d3.select("#" + this.containerId + " svg").remove(); |
2813
49c1570919ae
client: spuc8: use new endpoints to fetch year based and longterm waterlevel data
Markus Kottlaender <markus@intevation.de>
parents:
2791
diff
changeset
|
414 if (!this.selectedGauge || !this.longtermWaterlevels.length) return; |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
415 // PREPARE HELPERS |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
416 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
417 // HDC/LDC/MW for the selected gauge |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
418 const refWaterLevels = JSON.parse( |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
419 this.selectedGauge.properties.reference_water_levels |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
420 ); |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
421 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
422 // dimensions (widths, heights, margins) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
423 this.dimensions = this.getDimensions(); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
424 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
425 // get min/max values for date and waterlevel axis |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
426 this.extent = this.getExtent(refWaterLevels); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
427 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
428 // scaling helpers |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
429 this.scale = this.getScale(); |
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 // creating the axes based on the scales |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
432 this.axes = this.getAxes(); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
433 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
434 // DRAW DIAGRAM/NAVIGATION AREAS |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
435 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
436 // create svg |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
437 this.svg = d3 |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
438 .select("#" + this.containerId) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
439 .append("svg") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
440 .attr("width", "100%") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
441 .attr("height", "100%"); |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
442 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
443 // create container for main diagram |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
444 this.diagram = this.svg |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
445 .append("g") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
446 .attr("class", "main") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
447 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
448 "transform", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
449 `translate(${this.dimensions.mainMargin.left}, ${ |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
450 this.dimensions.mainMargin.top |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
451 })` |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
452 ); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
453 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
454 // create container for navigation diagram |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
455 this.navigation = this.svg |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
456 .append("g") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
457 .attr("class", "nav") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
458 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
459 "transform", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
460 `translate(${this.dimensions.navMargin.left}, ${ |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
461 this.dimensions.navMargin.top |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
462 })` |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
463 ); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
464 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
465 // define visible area, everything outside this area will be hidden |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
466 this.svg |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
467 .append("defs") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
468 .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
|
469 .attr("id", "hydrocond-clip") |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
470 .append("rect") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
471 .attr("width", this.dimensions.width) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
472 .attr("height", this.dimensions.mainHeight); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
473 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
474 // DRAW DIAGRAM PARTS |
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 // 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
|
477 // 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
|
478 // 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
|
479 const updaters = []; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
480 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
481 // draw |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
482 this.drawRefLines(refWaterLevels); // static, doesn't need an updater |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
483 updaters.push(this.drawAxes()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
484 updaters.push(this.drawNowLines()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
485 updaters.push(this.drawWaterlevelMinMaxAreaChart()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
486 updaters.push(this.drawWaterlevelLineChart("median")); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
487 updaters.push(this.drawWaterlevelLineChart("q25")); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
488 updaters.push(this.drawWaterlevelLineChart("q75")); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
489 updaters.push(this.drawWaterlevelLineChart("mean", this.yearWaterlevels)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
490 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
491 // INTERACTIONS |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
492 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
493 // create rectanlge on the main chart area to capture mouse events |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
494 const eventRect = this.svg |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
495 .append("rect") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
496 .attr("class", "zoom") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
497 .attr("width", this.dimensions.width) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
498 .attr("height", this.dimensions.mainHeight) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
499 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
500 "transform", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
501 `translate(${this.dimensions.mainMargin.left}, ${ |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
502 this.dimensions.mainMargin.top |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
503 })` |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
504 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
505 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
506 this.createZoom(updaters, eventRect); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
507 this.createTooltips(eventRect); |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
508 this.setInlineStyles(); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
509 }, |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
510 setInlineStyles() { |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
511 this.svg.selectAll(".hide").attr("fill-opacity", 0); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
512 this.svg |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
513 .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
|
514 .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
|
515 .attr("stroke-width", 2) |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
516 .attr("fill", "none"); |
3060 | 517 this.svg.selectAll(".line.mean").attr("stroke", "red"); |
518 this.svg.selectAll(".line.median").attr("stroke", "black"); | |
519 this.svg.selectAll(".line.q25").attr("stroke", "orange"); | |
520 this.svg.selectAll(".line.q75").attr("stroke", "purple"); | |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
521 this.svg |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
522 .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
|
523 .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
|
524 .attr("stroke", "none") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
525 .attr("fill", "lightsteelblue"); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
526 this.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
|
527 .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
|
528 .attr("stroke-width", 1) |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
529 .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
|
530 .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
|
531 this.svg.selectAll(".hdc-line").attr("stroke", "red"); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
532 this.svg.selectAll(".ldc-line").attr("stroke", "green"); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
533 this.svg.selectAll(".mw-line").attr("stroke", "grey"); |
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
|
534 this.svg.selectAll(".rn-line").attr("stroke", "grey"); |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
535 this.svg |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
536 .selectAll(".ref-waterlevel-label") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
537 .style("font-size", "11px") |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
538 .attr("fill", "#999"); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
539 this.svg |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
540 .selectAll(".now-line") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
541 .attr("stroke", "#999") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
542 .attr("stroke-width", 1) |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
543 .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
|
544 .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
|
545 this.svg |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
546 .selectAll(".now-line-label") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
547 .attr("fill", "#999") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
548 .style("font-size", "11px"); |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
549 this.svg |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
550 .selectAll(".tick line") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
551 .attr("stroke-dasharray", 5) |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
552 .attr("stroke", " #ccc"); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
553 this.svg.selectAll(".tick text").attr("fill", "black"); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
554 this.svg.selectAll(".domain").attr("stroke", "black"); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
555 |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
556 this.svg |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
557 .selectAll(".zoom") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
558 .attr("cursor", "move") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
559 .attr("fill", "none") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
560 .attr("pointer-events", "all"); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
561 this.svg |
3111
f269bd001e78
client: remove css classes and adjust styles for hydrological-diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
562 .selectAll(".brush .selection") |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
563 .attr("stroke", "none") |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
564 .attr("fill-opacity", 0.2); |
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
565 this.svg |
3111
f269bd001e78
client: remove css classes and adjust styles for hydrological-diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
566 .selectAll(".brush .handle") |
3025
37cc0d75ad84
client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
567 .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
|
568 .attr("fill", "rgba(23, 162, 184, 0.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
|
569 this.svg |
25c0cbfcc515
client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
570 .selectAll(".chart-dots") |
25c0cbfcc515
client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3146
diff
changeset
|
571 .attr("clip-path", "url(#hydrocond-clip)"); |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
572 this.svg |
3111
f269bd001e78
client: remove css classes and adjust styles for hydrological-diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
573 .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
|
574 .attr("fill", "black") |
f269bd001e78
client: remove css classes and adjust styles for hydrological-diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
575 .attr("stroke", "black") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
576 .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
|
577 .style("pointer-events", "none") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
578 .attr("fill-opacity", 0) |
3046
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
579 .transition() |
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
580 .attr("fill-opacity", "0.1s"); |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
581 this.svg |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
582 .selectAll(".chart-tooltip") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
583 .attr("fill-opacity", 0) |
3046
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
584 .transition() |
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
585 .attr("fill-opacity", "0.3s"); |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
586 this.svg |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
587 .selectAll(".chart-tooltip rect") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
588 .attr("fill", "#fff") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
589 .attr("stroke", "#ccc"); |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
590 this.svg |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
591 .selectAll(".chart-tooltip text") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
592 .attr("fill", "666") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
593 .style("font-size", "0.8em"); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
594 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
595 getDimensions() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
596 // dimensions and margins |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
597 const svgWidth = document.querySelector("#" + this.containerId) |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
598 .clientWidth; |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3129
diff
changeset
|
599 const svgHeight = document.querySelector("#" + this.containerId) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
600 .clientHeight; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
601 const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
602 const navMargin = { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
603 top: svgHeight - mainMargin.top - 65, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
604 right: 20, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
605 bottom: 30, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
606 left: 80 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
607 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
608 const width = +svgWidth - mainMargin.left - mainMargin.right; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
609 const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
610 const navHeight = +svgHeight - navMargin.top - navMargin.bottom; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
611 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
612 return { width, mainHeight, navHeight, mainMargin, navMargin }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
613 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
614 getExtent(refWaterLevels) { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
615 const waterlevelsRelevantForExtent = []; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
616 this.longtermWaterlevels.forEach(wl => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
617 waterlevelsRelevantForExtent.push(wl.min, wl.max); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
618 }); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
619 waterlevelsRelevantForExtent.push( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
620 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
621 Math.max( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
622 refWaterLevels.LDC - (refWaterLevels.HDC - refWaterLevels.LDC) / 4, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
623 0 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
624 ) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
625 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
626 return { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
627 // 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
|
628 date: [startOfYear(new Date()), endOfYear(new Date())], |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
629 // 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
|
630 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
631 waterlevel: d3.extent(waterlevelsRelevantForExtent) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
632 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
633 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
634 getScale() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
635 // scaling helpers to convert real world values into pixels |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
636 const x = d3.scaleTime().range([0, this.dimensions.width]); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
637 const y = d3.scaleLinear().range([this.dimensions.mainHeight, 0]); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
638 const x2 = d3.scaleTime().range([0, this.dimensions.width]); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
639 const y2 = d3.scaleLinear().range([this.dimensions.navHeight, 0]); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
640 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
641 // setting the min and max values for the diagram axes |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
642 x.domain(d3.extent(this.extent.date)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
643 y.domain(this.extent.waterlevel); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
644 x2.domain(x.domain()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
645 y2.domain(y.domain()); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
646 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
647 return { x, y, x2, y2 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
648 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
649 getAxes() { |
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 x: d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
652 .axisTop(this.scale.x) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
653 .tickSizeInner(this.dimensions.mainHeight) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
654 .tickSizeOuter(0) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
655 .tickFormat(date => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
656 // make the x-axis label formats dynamic, based on zoom |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
657 // but never display year numbers since they don't make any sense in |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
658 // this diagram |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
659 return (d3.timeSecond(date) < date |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
660 ? d3.timeFormat(".%L") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
661 : d3.timeMinute(date) < date |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
662 ? d3.timeFormat(":%S") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
663 : d3.timeHour(date) < date |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
664 ? d3.timeFormat("%I:%M") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
665 : d3.timeDay(date) < date |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
666 ? d3.timeFormat("%I %p") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
667 : d3.timeMonth(date) < date |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
668 ? d3.timeWeek(date) < date |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
669 ? d3.timeFormat("%a %d") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
670 : d3.timeFormat("%b %d") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
671 : d3.timeFormat("%B"))(date); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
672 }), |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
673 y: d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
674 .axisRight(this.scale.y) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
675 .tickSizeInner(this.dimensions.width) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
676 .tickSizeOuter(0), |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
677 x2: d3.axisBottom(this.scale.x2) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
678 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
679 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
680 drawNowLines() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
681 const nowLine = d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
682 .line() |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
683 .x(d => this.scale.x(d.x)) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
684 .y(d => this.scale.y(d.y)); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
685 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
686 const nowLabel = selection => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
687 selection.attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
688 "transform", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
689 `translate(${this.scale.x(new Date())}, ${this.scale.y( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
690 this.extent.waterlevel[1] - 16 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
691 )})` |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
692 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
693 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
694 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
695 // draw in main |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
696 this.diagram |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
697 .append("path") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
698 .datum([ |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
699 { x: new Date(), y: this.extent.waterlevel[0] }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
700 { x: new Date(), y: this.extent.waterlevel[1] - 20 } |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
701 ]) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
702 .attr("class", "now-line") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
703 .attr("d", nowLine); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
704 this.diagram // label |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
705 .append("text") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
706 .text(this.$gettext("Now")) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
707 .attr("class", "now-line-label") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
708 .attr("text-anchor", "middle") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
709 .call(nowLabel); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
710 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
711 // draw in nav |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
712 this.navigation |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
713 .append("path") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
714 .datum([ |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
715 { x: new Date(), y: this.extent.waterlevel[0] }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
716 { x: new Date(), y: this.extent.waterlevel[1] - 20 } |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
717 ]) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
718 .attr("class", "now-line") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
719 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
720 "d", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
721 d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
722 .line() |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
723 .x(d => this.scale.x2(d.x)) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
724 .y(d => this.scale.y2(d.y)) |
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 return () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
728 this.diagram.select(".now-line").attr("d", nowLine); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
729 this.diagram.select(".now-line-label").call(nowLabel); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
730 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
731 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
732 drawAxes() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
733 this.diagram |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
734 .append("g") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
735 .attr("class", "axis--x") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
736 .attr("transform", `translate(0, ${this.dimensions.mainHeight})`) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
737 .call(this.axes.x) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
738 .selectAll(".tick text") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
739 .attr("y", 15); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
740 this.diagram // label |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
741 .append("text") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
742 .text(this.$gettext("Waterlevel [cm]")) |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
743 .attr("text-anchor", "middle") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
744 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
745 "transform", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
746 `translate(-45, ${this.dimensions.mainHeight / 2}) rotate(-90)` |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
747 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
748 this.diagram |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
749 .append("g") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
750 .call(this.axes.y) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
751 .selectAll(".tick text") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
752 .attr("x", -25); |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
753 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
754 this.navigation |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
755 .append("g") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
756 .attr("class", "axis axis--x") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
757 .attr("transform", `translate(0, ${this.dimensions.navHeight})`) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
758 .call(this.axes.x2); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
759 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
760 return () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
761 this.diagram |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
762 .select(".axis--x") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
763 .call(this.axes.x) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
764 .selectAll(".tick text") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
765 .attr("y", 15); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
766 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
767 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
768 drawWaterlevelMinMaxAreaChart() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
769 const areaChart = isNav => |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
770 d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
771 .area() |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
772 .x(d => this.scale[isNav ? "x2" : "x"](d.date)) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
773 .y0(d => this.scale[isNav ? "y2" : "y"](d.min)) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
774 .y1(d => this.scale[isNav ? "y2" : "y"](d.max)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
775 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
776 this.diagram |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
777 .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
|
778 .datum(this.longtermWaterlevels) |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
779 .attr("class", "area") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
780 .attr("d", areaChart()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
781 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
782 this.navigation |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
783 .append("path") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
784 .datum(this.longtermWaterlevels) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
785 .attr("class", "area") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
786 .attr("d", areaChart(true)); |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
787 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
788 return () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
789 this.diagram.select(".area").attr("d", areaChart()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
790 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
791 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
792 drawWaterlevelLineChart(type, data) { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
793 const lineChart = type => |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
794 d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
795 .line() |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
796 .x(d => this.scale.x(d.date)) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
797 .y(d => this.scale.y(d[type])) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
798 .curve(d3.curveLinear); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
799 this.diagram |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
800 .append("path") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
801 .attr("class", "line " + type) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
802 .datum(data || this.longtermWaterlevels) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
803 .attr("d", lineChart(type)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
804 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
805 return () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
806 this.diagram.select(".line." + type).attr("d", lineChart(type)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
807 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
808 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
809 drawRefLines(refWaterLevels) { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
810 const refWaterlevelLine = d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
811 .line() |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
812 .x(d => this.scale.x(d.x)) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
813 .y(d => this.scale.y(d.y)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
814 |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
815 // HDC |
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
|
816 if (refWaterLevels.HDC) { |
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
|
817 this.diagram |
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
|
818 .append("path") |
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
|
819 .datum([ |
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
|
820 { x: 0, y: refWaterLevels.HDC }, |
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
|
821 { x: this.extent.date[1], y: refWaterLevels.HDC } |
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
|
822 ]) |
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
|
823 .attr("class", "hdc-line") |
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
|
824 .attr("d", refWaterlevelLine); |
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
|
825 this.diagram // label |
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
|
826 .append("text") |
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
|
827 .text(`HDC (${refWaterLevels.HDC})`) |
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
|
828 .attr("class", "ref-waterlevel-label") |
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
|
829 .attr("x", 5) |
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
|
830 .attr("y", this.scale.y(refWaterLevels.HDC) - 3); |
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
|
831 } |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
832 // LDC |
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
|
833 if (refWaterLevels.LDC) { |
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
|
834 this.diagram |
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
|
835 .append("path") |
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
|
836 .datum([ |
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
|
837 { x: 0, y: refWaterLevels.LDC }, |
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
|
838 { x: this.extent.date[1], y: refWaterLevels.LDC } |
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
|
839 ]) |
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
|
840 .attr("class", "ldc-line") |
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
|
841 .attr("d", refWaterlevelLine); |
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
|
842 this.diagram // label |
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
|
843 .append("text") |
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
|
844 .text(`LDC (${refWaterLevels.LDC})`) |
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
|
845 .attr("class", "ref-waterlevel-label") |
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
|
846 .attr("x", 5) |
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
|
847 .attr("y", this.scale.y(refWaterLevels.LDC) - 3); |
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
|
848 } |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
849 // MW |
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
|
850 if (refWaterLevels.MW) { |
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
|
851 this.diagram |
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
|
852 .append("path") |
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
|
853 .datum([ |
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
|
854 { x: 0, y: refWaterLevels.MW }, |
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
|
855 { x: this.extent.date[1], y: refWaterLevels.MW } |
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
|
856 ]) |
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
|
857 .attr("class", "mw-line") |
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
|
858 .attr("d", refWaterlevelLine); |
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
|
859 this.diagram // label |
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
|
860 .append("text") |
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
|
861 .text(`MW (${refWaterLevels.MW})`) |
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
|
862 .attr("class", "ref-waterlevel-label") |
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
|
863 .attr("x", 5) |
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
|
864 .attr("y", this.scale.y(refWaterLevels.MW) - 3); |
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
|
865 } |
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
|
866 // RN |
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
|
867 if (refWaterLevels.RN) { |
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
|
868 this.diagram |
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
|
869 .append("path") |
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
|
870 .datum([ |
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
|
871 { x: 0, y: refWaterLevels.RN }, |
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
|
872 { x: this.extent.date[1], y: refWaterLevels.RN } |
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
|
873 ]) |
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
|
874 .attr("class", "rn-line") |
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
|
875 .attr("d", refWaterlevelLine); |
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
|
876 this.diagram // label |
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
|
877 .append("text") |
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
|
878 .text(`RN (${refWaterLevels.RN})`) |
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 .attr("class", "ref-waterlevel-label") |
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
|
880 .attr("x", 5) |
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
|
881 .attr("y", this.scale.y(refWaterLevels.RN) - 3); |
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
|
882 } |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
883 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
884 createZoom(updaters, eventRect) { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
885 const brush = d3 |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
886 .brushX() |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
887 .handleSize(4) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
888 .extent([[0, 0], [this.dimensions.width, this.dimensions.navHeight]]); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
889 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
890 const zoom = d3 |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
891 .zoom() |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
892 .scaleExtent([1, Infinity]) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
893 .translateExtent([ |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
894 [0, 0], |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
895 [this.dimensions.width, this.dimensions.mainHeight] |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
896 ]) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
897 .extent([[0, 0], [this.dimensions.width, this.dimensions.mainHeight]]); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
898 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
899 brush.on("brush end", () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
900 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
|
901 return; // ignore brush-by-zoom |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
902 let s = d3.event.selection || this.scale.x2.range(); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
903 this.scale.x.domain(s.map(this.scale.x2.invert, this.scale.x2)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
904 updaters.forEach(u => u && u()); |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
905 this.setInlineStyles(); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
906 this.svg |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
907 .select(".zoom") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
908 .call( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
909 zoom.transform, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
910 d3.zoomIdentity |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
911 .scale(this.dimensions.width / (s[1] - s[0])) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
912 .translate(-s[0], 0) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
913 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
914 }); |
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 zoom.on("zoom", () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
917 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
918 return; // ignore zoom-by-brush |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
919 let t = d3.event.transform; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
920 this.scale.x.domain(t.rescaleX(this.scale.x2).domain()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
921 updaters.forEach(u => u && u()); |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
922 this.setInlineStyles(); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
923 this.navigation |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
924 .select(".brush") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
925 .call(brush.move, this.scale.x.range().map(t.invertX, t)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
926 }); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
927 zoom.on("start", () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
928 this.svg.select(".chart-dot").style("opacity", 0); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
929 this.svg.select(".chart-tooltip").style("opacity", 0); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
930 }); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
931 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
932 this.navigation |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
933 .append("g") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
934 .attr("class", "brush") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
935 .call(brush) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
936 .call(brush.move, this.scale.x.range()); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
937 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
938 eventRect.call(zoom); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
939 }, |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
940 createTooltips(eventRect) { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
941 // create clippable container for the dot |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
942 this.diagram |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
943 .append("g") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
944 .attr("class", "chart-dots") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
945 .append("circle") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
946 .attr("class", "chart-dot") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
947 .attr("r", 4); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
948 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
949 // create container for the tooltip |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
950 const tooltip = this.diagram.append("g").attr("class", "chart-tooltip"); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
951 tooltip |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
952 .append("rect") |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
953 .attr("rx", "0.25em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
954 .attr("ry", "0.25em"); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
955 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
956 // create container for multiple text rows |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
957 const tooltipText = tooltip.append("text").attr("text-anchor", "middle"); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
958 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
959 // 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
|
960 // 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
|
961 const tooltipPadding = 10; |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
962 const diagramPadding = 5; |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
963 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
964 eventRect |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
965 .on("mouseover", () => { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
966 this.diagram.select(".chart-dot").style("opacity", 1); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
967 this.diagram.select(".chart-tooltip").style("opacity", 1); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
968 }) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
969 .on("mouseout", () => { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
970 this.diagram.select(".chart-dot").style("opacity", 0); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
971 this.diagram.select(".chart-tooltip").style("opacity", 0); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
972 }) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
973 .on("mousemove", () => { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
974 // find data point closest to mouse |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
975 const x0 = this.scale.x.invert( |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
976 d3.mouse(document.querySelector(".zoom"))[0] |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
977 ), |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
978 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
|
979 d0 = this.longtermWaterlevels[i - 1], |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
980 d1 = this.longtermWaterlevels[i] || d0, |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
981 d = x0 - d0.date > d1.date - x0 ? d1 : d0; |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
982 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
983 const coords = { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
984 x: this.scale.x(d.date), |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
985 y: this.scale.y(d.median) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
986 }; |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
987 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
988 // position the dot |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
989 this.diagram |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
990 .select(".chart-dot") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
991 .style("opacity", 1) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
992 .attr("transform", `translate(${coords.x}, ${coords.y})`); |
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 // remove current texts |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
995 tooltipText.selectAll("tspan").remove(); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
996 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
997 // write date |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
998 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
999 .append("tspan") |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1000 .attr("dominant-baseline", "hanging") |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1001 .attr("text-anchor", "middle") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1002 .text( |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1003 d.date.toLocaleString([], { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1004 year: "2-digit", |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1005 month: "2-digit", |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1006 day: "2-digit" |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1007 }) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1008 ); |
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 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1011 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1012 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1013 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1014 .attr("dy", "1.4em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1015 .attr("dominant-baseline", "hanging") |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1016 .attr("text-anchor", "middle") |
2829
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
1017 .text(`Q75%: ${d.q75} cm`); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1018 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1019 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1020 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1021 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1022 .attr("dy", "2.6em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1023 .attr("dominant-baseline", "hanging") |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1024 .attr("text-anchor", "middle") |
2829
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
1025 .text(`Median: ${d.median} cm`); |
2822
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", "3.8em") |
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") |
2829
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
1033 .text(`Q25%: ${d.q25} cm`); |
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", "5em") |
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") |
2829
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
1041 .text(`Max: ${d.max} cm`); |
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", "6.2em") |
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") |
2829
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
1049 .text(`Min: ${d.min} cm`); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1050 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1051 const dYear = this.yearWaterlevels.find( |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1052 ywl => ywl.date.getTime() === d.date.getTime() |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1053 ); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1054 if (dYear) { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1055 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1056 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1057 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1058 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1059 .attr("dy", "7.4em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1060 .attr("dominant-baseline", "hanging") |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1061 .attr("text-anchor", "middle") |
2829
4a1211727d5f
client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
1062 .text(`${this.yearCompare}: ${dYear.mean.toFixed(1)} cm`); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1063 } |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1064 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1065 // get text dimensions |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1066 const textBBox = tooltipText.node().getBBox(); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1067 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1068 this.diagram |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1069 .selectAll(".chart-tooltip text tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1070 .attr("x", textBBox.width / 2 + tooltipPadding) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1071 .attr("y", tooltipPadding); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1072 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1073 // position and scale tooltip box |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1074 const xMax = |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1075 this.dimensions.width - |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1076 (textBBox.width + diagramPadding + tooltipPadding * 2); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1077 const tooltipX = Math.max( |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1078 diagramPadding, |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1079 Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1080 ); |
2824
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
1081 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
|
1082 if (coords.y < textBBox.height + tooltipPadding * 2) { |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
1083 tooltipY = coords.y + 10; |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
1084 } |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
1085 |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1086 this.diagram |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1087 .select(".chart-tooltip") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1088 .style("opacity", 1) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1089 .attr("transform", `translate(${tooltipX}, ${tooltipY})`) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1090 .select("rect") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1091 .attr("width", textBBox.width + tooltipPadding * 2) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1092 .attr("height", textBBox.height + tooltipPadding * 2); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
1093 }); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1094 } |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1095 }, |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1096 created() { |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1097 window.addEventListener("resize", debounce(this.drawDiagram), 100); |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1098 }, |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1099 mounted() { |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1100 this.drawDiagram(); |
3197
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1101 this.templates[0] = this.defaultTemplate; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1102 this.form.template = this.templates[0]; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1103 this.templateData = this.form.template; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1104 HTTP.get("/templates/print", { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1105 headers: { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1106 "X-Gemma-Auth": localStorage.getItem("token"), |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1107 "Content-type": "text/xml; charset=UTF-8" |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1108 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1109 }) |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1110 .then(response => { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1111 if (response.data.length) { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1112 this.templates = response.data; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1113 this.form.template = this.templates[0]; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1114 this.templates[this.templates.length] = this.defaultTemplate; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1115 this.applyChange(); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1116 } |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1117 }) |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1118 .catch(e => { |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1119 const { status, data } = e.response; |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1120 displayError({ |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1121 title: this.$gettext("Backend Error"), |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1122 message: `${status}: ${data.message || data}` |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1123 }); |
9d38df37c1f8
client: implemnt pdf-template for hydrologicalconditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3148
diff
changeset
|
1124 }); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1125 }, |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1126 updated() { |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1127 this.drawDiagram(); |
2986
7ee9a3ef90d4
client: remove resize event listener from diagrams after they are closed
Markus Kottlaender <markus@intevation.de>
parents:
2843
diff
changeset
|
1128 }, |
7ee9a3ef90d4
client: remove resize event listener from diagrams after they are closed
Markus Kottlaender <markus@intevation.de>
parents:
2843
diff
changeset
|
1129 destroyed() { |
3067
0ffa9d418959
client: remove window resize listeners when closing diagram
Markus Kottlaender <markus@intevation.de>
parents:
3060
diff
changeset
|
1130 window.removeEventListener("resize", debounce(this.drawDiagram)); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1131 } |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1132 }; |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1133 </script> |