Mercurial > gemma

annotate client/src/components/gauge/HydrologicalConditions.vue @ 3249:d91c1200dc6b

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