Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 3726:be939dcdfdfd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel diagrams: make now line label not update its position when zooming Of course the line and label could both be updated and move with the time but since all other data is static after generating the diagram once, a moving now line would be to fancy... but I was tempted.
author Markus Kottlaender <markus@intevation.de>
date Thu, 20 Jun 2019 19:16:26 +0200
parents 05bbd1a97567
children 2b6734a6730a
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
2 <div class="d-flex flex-column flex-fill">
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
3 <UIBoxHeader
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
4 icon="ruler-vertical"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
5 :title="title"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
6 :closeCallback="close"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
7 class="rounded-0"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
8 />
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
9 <div class="d-flex flex-fill">
3440
8801811bf9f5 client: diagram-template: fix the size of renderd Diagram in case two diagrams are shown on the screen
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3408
diff changeset
10 <DiagramLegend id="diagramlegendId">
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
11 <div class="legend">
3323
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
12 <span
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
13 style="background-color: steelblue; width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
14 ></span>
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
15 Waterlevel
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
16 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
17 <div class="legend">
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
18 <span
3323
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
19 style="width: 8px; height: 8px; background-color: rgba(70, 130, 180, 0.6); border: solid 7px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;"
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
20 ></span>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
21 Prediction
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
22 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
23 <div class="legend">
3323
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
24 <span
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
25 style="background-color: rgba(0, 255, 0, 0.1); width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
26 ></span>
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
27 Navigable Range
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
28 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
29 <div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
30 <select
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
31 @change="applyChange"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
32 v-model="form.template"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
33 class="form-control d-block custom-select-sm w-100"
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
34 >
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
35 <option
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
36 v-for="template in templates"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
37 :value="template"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
38 :key="template.name"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
39 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
40 {{ template.name }}
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
41 </option>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
42 </select>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
43 <button
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
44 @click="downloadPDF"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
45 type="button"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
46 class="btn btn-sm btn-info d-block w-100 mt-2"
3404
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents: 3403
diff changeset
47 :disabled="!waterlevels.length"
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
48 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
49 <translate>Export to PDF</translate>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
50 </button>
3403
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
51 <a
3404
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents: 3403
diff changeset
52 :class="[
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents: 3403
diff changeset
53 'btn btn-sm btn-info d-block w-100 mt-2',
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents: 3403
diff changeset
54 { disabled: !waterlevels.length }
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents: 3403
diff changeset
55 ]"
3403
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
56 :href="csvLink"
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
57 :download="csvFileName"
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
58 >
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
59 <translate>Export as CSV</translate>
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
60 </a>
3565
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
61
3707
116c5fe6a5d7 client: remove SVG export from waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3691
diff changeset
62 <!--
3565
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
63 <button
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
64 @click="downloadSVG"
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
65 type="button"
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
66 class="btn btn-sm btn-info d-block w-100 mt-2"
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
67 :disabled="!waterlevels.length"
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
68 >
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
69 <translate>Export as SVG</translate>
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
70 </button>
3707
116c5fe6a5d7 client: remove SVG export from waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3691
diff changeset
71 -->
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
72 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
73 </DiagramLegend>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
74 <div
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
75 class="d-flex flex-fill justify-content-center align-items-center"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
76 :id="containerId"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
77 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
78 <div v-if="!waterlevels.length">
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
79 <translate>No data available.</translate>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
80 </div>
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
81 </div>
2701
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
82 </div>
3179
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3160
diff changeset
83 <div
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3160
diff changeset
84 id="pdfContainer"
3304
ad27721d804d client: waterlevel diagram: make sure pdf container is outside of viewport
Markus Kottlaender <markus@intevation.de>
parents: 3303
diff changeset
85 style="position: absolute; z-index: -1; top: -9999px;"
3179
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3160
diff changeset
86 ></div>
2701
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
87 </div>
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 </template>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 <script>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 /* This is Free Software under GNU Affero General Public License v >= 3.0
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 * without warranty, see README.md and license for details.
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 * SPDX-License-Identifier: AGPL-3.0-or-later
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 * License-Filename: LICENSES/AGPL-3.0.txt
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 *
3112
e838609bc10d client: fix license header for waterlevel.vue and hydrologicalconditions.vue
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3110
diff changeset
97 * Copyright (C) 2019 by via donau
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 * – Österreichische Wasserstraßen-Gesellschaft mbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 * Software engineering by Intevation GmbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 * Author(s):
3564
f50bde7eed0d client: improve copyright header for gauge/Waterlevel.vue
Bernhard Reiter <bernhard@intevation.de>
parents: 3563
diff changeset
102 * * Bernhard Reiter <bernhard@intevation.de>
f50bde7eed0d client: improve copyright header for gauge/Waterlevel.vue
Bernhard Reiter <bernhard@intevation.de>
parents: 3563
diff changeset
103 * * Markus Kottländer <markus.kottlaender@intevation.de>
f50bde7eed0d client: improve copyright header for gauge/Waterlevel.vue
Bernhard Reiter <bernhard@intevation.de>
parents: 3563
diff changeset
104 * * Fadi Abbud <fadi.abbud@intevation.de>
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 */
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
107 import { mapState, mapGetters } from "vuex";
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
108 import * as d3Base from "d3";
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
109 import { lineChunked } from "d3-line-chunked";
3050
c739b81b8f41 client: gauge waterlevel diagram: fixed date extent
Markus Kottlaender <markus@intevation.de>
parents: 3049
diff changeset
110 import { endOfDay } from "date-fns";
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 import debounce from "debounce";
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
112 import jsPDF from "jspdf";
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
113 import canvg from "canvg";
3565
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
114 import { saveAs } from "file-saver";
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
115 import { pdfgen } from "@/lib/mixins";
3140
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
116 import { HTTP } from "@/lib/http";
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
117 import { displayError } from "@/lib/errors";
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
118 // we should load only d3 modules we need but for now we'll go with the lazy way
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
119 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
120 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
121 const d3 = Object.assign(d3Base, { lineChunked });
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
122
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 export default {
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
124 mixins: [pdfgen],
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
125 components: {
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
126 DiagramLegend: () => import("@/components/DiagramLegend")
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
127 },
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
128 data() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
129 return {
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
130 containerId: "waterlevel-diagram-container",
3682
c086f5176ef2 client: diagrams: fixed removal of resize listener
Markus Kottlaender <markus@intevation.de>
parents: 3618
diff changeset
131 resizeListenerFunction: null,
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
132 svg: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
133 diagram: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
134 navigation: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
135 dimensions: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
136 extent: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
137 scale: null,
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
138 axes: null,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
139 form: {
3249
d91c1200dc6b client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3248
diff changeset
140 template: null
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
141 },
3143
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
142 templates: [],
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
143 defaultTemplate: {
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
144 name: "Default",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
145 properties: {
3350
8da2f7b9a04b client: diagram-template:remove unnecessary template properties and typo
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3348
diff changeset
146 paperSize: "a4"
3143
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
147 },
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
148 elements: [
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
149 {
3160
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
150 type: "diagram",
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
151 position: "topleft",
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
152 offset: { x: 15, y: 50 },
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
153 width: 290,
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
154 height: 100
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
155 },
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
156 {
3143
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
157 type: "diagramlegend",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
158 position: "topleft",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
159 offset: { x: 30, y: 150 },
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
160 color: "black"
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
161 },
3143
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
162 {
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
163 type: "diagramtitle",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
164 position: "topleft",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
165 offset: { x: 50, y: 26 },
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
166 fontsize: 22,
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
167 color: "steelblue"
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
168 },
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
169 {
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
170 type: "text",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
171 position: "topleft",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
172 offset: { x: 3, y: 3 },
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
173 fontsize: 8,
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
174 width: 90,
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
175 color: "gray",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
176 text: this.$gettext("Generated by") + " " + "{user}, {date}"
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
177 }
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
178 ]
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
179 },
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
180 pdf: {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
181 doc: null,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
182 width: 420,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
183 height: 297
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
184 },
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
185 templateData: null
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
186 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
187 },
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
188 computed: {
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
189 ...mapState("application", ["paneSetup"]),
3403
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
190 ...mapState("gauges", [
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
191 "dateFrom",
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
192 "waterlevels",
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
193 "waterlevelsCSV",
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
194 "nashSutcliffe"
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
195 ]),
3049
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
196 ...mapGetters("gauges", ["selectedGauge"]),
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
197 title() {
3148
cdfb0093b7b1 client: gauge diagrams: added information to titles
Markus Kottlaender <markus@intevation.de>
parents: 3147
diff changeset
198 return `${this.selectedGauge.properties.objname}: ${this.$gettext(
cdfb0093b7b1 client: gauge diagrams: added information to titles
Markus Kottlaender <markus@intevation.de>
parents: 3147
diff changeset
199 "Waterlevel"
cdfb0093b7b1 client: gauge diagrams: added information to titles
Markus Kottlaender <markus@intevation.de>
parents: 3147
diff changeset
200 )} (${this.dateFrom.toLocaleDateString()} - ${this.dateTo.toLocaleDateString()})`;
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
201 },
3049
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
202 dateFrom: {
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
203 get() {
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
204 return this.$store.state.gauges.dateFrom;
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
205 }
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
206 },
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
207 dateTo: {
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
208 get() {
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
209 return this.$store.state.gauges.dateTo;
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
210 }
3403
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
211 },
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
212 csvLink() {
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
213 return (
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
214 "data:text/csv;charset=utf-8," + encodeURIComponent(this.waterlevelsCSV)
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
215 );
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
216 },
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
217 csvFileName() {
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
218 return `${this.$gettext("waterlevels")}-${
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
219 this.selectedGauge.properties.objname
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
220 }-${this.dateFrom.toISOString().split("T")[0]}-${
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
221 this.dateTo.toISOString().split("T")[0]
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
222 }.csv`;
3618
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3576
diff changeset
223 },
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3576
diff changeset
224 hasPredictions() {
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3576
diff changeset
225 return this.waterlevels.find(d => d.predicted);
3049
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
226 }
2596
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
227 },
3068
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents: 3067
diff changeset
228 watch: {
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
229 paneSetup() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
230 this.$nextTick(() => this.drawDiagram());
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
231 },
3068
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents: 3067
diff changeset
232 waterlevels() {
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents: 3067
diff changeset
233 this.drawDiagram();
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents: 3067
diff changeset
234 }
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents: 3067
diff changeset
235 },
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
236 methods: {
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
237 close() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
238 this.$store.commit(
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
239 "application/paneSetup",
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
240 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
241 ? "GAUGE_HYDROLOGICALCONDITIONS"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
242 : "DEFAULT"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
243 );
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
244 },
3565
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
245 downloadSVG() {
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
246 let svg = document.getElementById(this.containerId).firstElementChild;
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
247 let svgXML = new XMLSerializer().serializeToString(svg);
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
248 let blog = new Blob([svgXML], { type: "image/svg+xml;charset=utf-8" });
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
249 let filename =
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
250 this.selectedGauge.properties.objname + "-waterlevel-diagram.svg";
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
251 saveAs(blog, filename);
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
252 },
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
253 downloadPDF() {
3249
d91c1200dc6b client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3248
diff changeset
254 this.pdf.doc = new jsPDF(
d91c1200dc6b client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3248
diff changeset
255 "l",
d91c1200dc6b client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3248
diff changeset
256 "mm",
d91c1200dc6b client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3248
diff changeset
257 this.templateData.properties.paperSize
d91c1200dc6b client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3248
diff changeset
258 );
3544
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
259 // pdf width and height in millimeter (landscape)
3249
d91c1200dc6b client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3248
diff changeset
260 this.pdf.width =
d91c1200dc6b client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3248
diff changeset
261 this.templateData.properties.paperSize === "a3" ? 420 : 297;
d91c1200dc6b client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3248
diff changeset
262 this.pdf.height =
d91c1200dc6b client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3248
diff changeset
263 this.templateData.properties.paperSize === "a3" ? 297 : 210;
3179
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3160
diff changeset
264 // check the template elements
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
265 if (this.templateData) {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
266 let defaultFontSize = 11,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
267 defaultColor = "black",
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
268 defaultWidth = 70,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
269 defaultTextColor = "black",
3141
42324626f9e2 client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3140
diff changeset
270 defaultBorderColor = "white",
42324626f9e2 client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3140
diff changeset
271 defaultBgColor = "white",
42324626f9e2 client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3140
diff changeset
272 defaultRounding = 2,
3154
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
273 defaultPadding = 2,
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
274 defaultOffset = { x: 0, y: 0 };
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
275 this.templateData.elements.forEach(e => {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
276 switch (e.type) {
3160
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
277 case "diagram": {
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
278 this.addDiagram(
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
279 e.position,
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
280 e.offset || defaultOffset,
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
281 e.width,
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
282 e.height
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
283 );
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
284 break;
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
285 }
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
286 case "diagramlegend": {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
287 this.addDiagramLegend(
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
288 e.position,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
289 e.offset || defaultOffset,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
290 e.color || defaultColor
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
291 );
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
292 break;
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
293 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
294 case "diagramtitle": {
3285
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
295 let gaugeInfo =
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
296 this.selectedGauge.properties.objname +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
297 " (" +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
298 this.selectedGauge.id
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
299 .split(".")[1]
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
300 .replace(/[()]/g, "")
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
301 .split(",")[3] +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
302 "):" +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
303 " Waterlevel " +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
304 this.dateFrom.toLocaleDateString() +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
305 " - " +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
306 this.dateTo.toLocaleDateString();
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
307 this.addDiagramTitle(
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
308 e.position,
3544
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
309 e.offset || defaultOffset,
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
310 e.fontsize || defaultFontSize,
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
311 e.color || defaultColor,
3285
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
312 gaugeInfo
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3253
diff changeset
313 );
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
314 break;
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
315 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
316 case "text": {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
317 this.addText(
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
318 e.position,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
319 e.offset || defaultOffset,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
320 e.width || defaultWidth,
3242
3b770f8273b6 client: diagram-template: fix bug with font size
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3229
diff changeset
321 e.fontsize || defaultFontSize,
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
322 e.color || defaultTextColor,
3544
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
323 e.text || ""
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
324 );
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
325 break;
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
326 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
327 case "image": {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
328 this.addImage(
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
329 e.url,
3544
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
330 e.format || "",
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
331 e.position,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
332 e.offset || defaultOffset,
3544
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
333 e.width || 90,
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
334 e.height || 60
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
335 );
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
336 break;
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
337 }
3141
42324626f9e2 client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3140
diff changeset
338 case "box": {
42324626f9e2 client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3140
diff changeset
339 this.addBox(
42324626f9e2 client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3140
diff changeset
340 e.position,
3544
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
341 e.offset || defaultOffset,
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
342 e.width || 90,
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
343 e.height || 60,
3141
42324626f9e2 client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3140
diff changeset
344 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
42324626f9e2 client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3140
diff changeset
345 e.color || defaultBgColor,
42324626f9e2 client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3140
diff changeset
346 e.brcolor || defaultBorderColor
42324626f9e2 client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3140
diff changeset
347 );
42324626f9e2 client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3140
diff changeset
348 break;
42324626f9e2 client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3140
diff changeset
349 }
3154
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
350 case "textbox": {
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
351 this.addTextBox(
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
352 e.position,
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
353 e.offset || defaultOffset,
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
354 e.width,
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
355 e.height,
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
356 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
357 e.padding || defaultPadding,
3242
3b770f8273b6 client: diagram-template: fix bug with font size
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3229
diff changeset
358 e.fontsize || defaultFontSize,
3154
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
359 e.color || defaultTextColor,
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
360 e.background || defaultBgColor,
3544
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
361 e.text || "",
3154
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
362 e.brcolor || defaultBorderColor
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
363 );
3242
3b770f8273b6 client: diagram-template: fix bug with font size
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3229
diff changeset
364 break;
3154
b6c10b30d6bd client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3150
diff changeset
365 }
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
366 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
367 });
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
368 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
369 this.pdf.doc.save(
3049
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
370 this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf"
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
371 );
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
372 },
3140
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
373 applyChange() {
3143
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
374 if (this.form.template.hasOwnProperty("properties")) {
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
375 this.templateData = this.defaultTemplate;
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
376 return;
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
377 }
3140
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
378 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
379 HTTP.get("/templates/diagram/" + this.form.template.name, {
3140
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
380 headers: {
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
381 "X-Gemma-Auth": localStorage.getItem("token"),
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
382 "Content-type": "text/xml; charset=UTF-8"
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
383 }
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
384 })
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
385 .then(response => {
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
386 this.templateData = response.data.template_data;
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
387 })
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
388 .catch(e => {
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
389 const { status, data } = e.response;
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
390 displayError({
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
391 title: this.$gettext("Backend Error"),
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
392 message: `${status}: ${data.message || data}`
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
393 });
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
394 });
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
395 }
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
396 },
3160
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
397 addDiagram(position, offset, width, height) {
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
398 let x = offset.x,
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
399 y = offset.y;
3248
3159ee3bcb16 client: diagram-template: improve size of pdf-container element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3242
diff changeset
400 // check if there are tow diagrams on screen
3179
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3160
diff changeset
401 if (
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3160
diff changeset
402 ["GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"].indexOf(this.paneSetup) !==
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3160
diff changeset
403 -1
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3160
diff changeset
404 ) {
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3160
diff changeset
405 this.containerId = "pdfContainer";
3248
3159ee3bcb16 client: diagram-template: improve size of pdf-container element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3242
diff changeset
406 // set width and height
3159ee3bcb16 client: diagram-template: improve size of pdf-container element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3242
diff changeset
407 document.querySelector("#pdfContainer").style.width =
3159ee3bcb16 client: diagram-template: improve size of pdf-container element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3242
diff changeset
408 document.querySelector("#waterlevel-diagram-container").clientWidth *
3159ee3bcb16 client: diagram-template: improve size of pdf-container element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3242
diff changeset
409 2 +
3440
8801811bf9f5 client: diagram-template: fix the size of renderd Diagram in case two diagrams are shown on the screen
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3408
diff changeset
410 document.querySelector("#diagramlegendId").clientWidth +
3248
3159ee3bcb16 client: diagram-template: improve size of pdf-container element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3242
diff changeset
411 "px";
3159ee3bcb16 client: diagram-template: improve size of pdf-container element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3242
diff changeset
412 document.querySelector("#pdfContainer").style.height =
3159ee3bcb16 client: diagram-template: improve size of pdf-container element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3242
diff changeset
413 document.querySelector("#waterlevel-diagram-container").clientHeight +
3159ee3bcb16 client: diagram-template: improve size of pdf-container element
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3242
diff changeset
414 "px";
3179
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3160
diff changeset
415 this.drawDiagram();
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3160
diff changeset
416 }
3160
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
417 var svg = document.getElementById(this.containerId).innerHTML;
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
418 if (svg) {
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
419 svg = svg.replace(/\r?\n|\r/g, "").trim();
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
420 }
3179
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3160
diff changeset
421 this.containerId = "waterlevel-diagram-container";
3160
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
422 var canvas = document.createElement("canvas");
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
423 canvas.width = window.innerWidth;
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
424 canvas.height = window.innerHeight / 2;
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
425 canvg(canvas, svg, {
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
426 ignoreMouse: true,
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
427 ignoreAnimation: true,
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
428 ignoreDimensions: true
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
429 });
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
430 var imgData = canvas.toDataURL("image/png");
3544
067ad32fba69 client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3440
diff changeset
431 // use default width,height if they are missing in the template definition
3160
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
432 if (!width) {
3249
d91c1200dc6b client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3248
diff changeset
433 width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
3160
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
434 }
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
435 if (!height) {
3249
d91c1200dc6b client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3248
diff changeset
436 height = this.templateData.properties.paperSize === "a3" ? 130 : 100;
3160
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
437 }
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
438 if (["topright", "bottomright"].indexOf(position) !== -1) {
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
439 x = this.pdf.width - offset.x - width;
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
440 }
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
441 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
442 y = this.pdf.height - offset.y - height;
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
443 }
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
444 this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
94935895e6d7 client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3154
diff changeset
445 },
3129
136b86794453 client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3112
diff changeset
446 // Diagram legend
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
447 addDiagramLegend(position, offset, color) {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
448 let x = offset.x;
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
449 let y = offset.y;
3343
13bb0ff62ac8 client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3323
diff changeset
450 this.pdf.doc.setFontSize(10);
13bb0ff62ac8 client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3323
diff changeset
451 let width =
13bb0ff62ac8 client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3323
diff changeset
452 (this.pdf.doc.getStringUnitWidth("Navigable Range") * 10) /
13bb0ff62ac8 client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3323
diff changeset
453 (72 / 25.6) +
13bb0ff62ac8 client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3323
diff changeset
454 5;
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
455 if (["topright", "bottomright"].indexOf(position) !== -1) {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
456 x = this.pdf.width - offset.x - width;
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
457 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
458 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
3343
13bb0ff62ac8 client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3323
diff changeset
459 y = this.pdf.height - offset.y - this.getTextHeight(4);
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
460 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
461 this.pdf.doc.setTextColor(color);
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
462 this.pdf.doc.setDrawColor("white");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
463 this.pdf.doc.setFillColor("steelblue");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
464 this.pdf.doc.circle(x, y, 2, "FD");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
465 this.pdf.doc.text(x + 3, y + 1, "Waterlevel");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
466 this.pdf.doc.setFillColor("#dae6f0");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
467 this.pdf.doc.circle(x, y + 5, 2, "FD");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
468 this.pdf.doc.setFillColor("#e5ffe5");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
469 this.pdf.doc.circle(x, y + 10, 2, "FD");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
470 this.pdf.doc.text(x + 3, y + 11, "Navigable Range");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
471 this.pdf.doc.setDrawColor("#90b4d2");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
472 this.pdf.doc.setFillColor("#90b4d2");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
473 this.pdf.doc.circle(x, y + 5, 0.6, "FD");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
474 this.pdf.doc.text(x + 3, y + 6, "Prediction");
3129
136b86794453 client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3112
diff changeset
475 },
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
476 drawDiagram() {
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
477 // remove old diagram and exit if necessary data is missing
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
478 d3.select("#" + this.containerId + " svg").remove();
2701
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
479 if (!this.selectedGauge || !this.waterlevels.length) return;
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
480
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
481 // PREPARE HELPERS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
482
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
483 // HDC/LDC/MW for the selected gauge
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
484 const refWaterLevels = JSON.parse(
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
485 this.selectedGauge.properties.reference_water_levels
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
486 );
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
487
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
488 // dimensions (widths, heights, margins)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
489 this.dimensions = this.getDimensions();
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
490
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
491 // get min/max values for date and waterlevel axis
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
492 this.extent = this.getExtent(refWaterLevels);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
493
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
494 // scaling helpers
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
495 this.scale = this.getScale();
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
496
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
497 // creating the axes based on the scales
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
498 this.axes = {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
499 x: d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
500 .axisTop(this.scale.x)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
501 .tickSizeInner(this.dimensions.mainHeight)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
502 .tickSizeOuter(0),
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
503 y: d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
504 .axisRight(this.scale.y)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
505 .tickSizeInner(this.dimensions.width)
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
506 .tickSizeOuter(0)
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
507 .tickFormat(d => this.$options.filters.waterlevel(d)),
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
508 x2: d3.axisBottom(this.scale.x2)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
509 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
510
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
511 // DRAW DIAGRAM/NAVIGATION AREAS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
512
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
513 // create svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
514 this.svg = d3
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
515 .select("#" + this.containerId)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
516 .append("svg")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
517 .attr("width", "100%")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
518 .attr("height", "100%");
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
519
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
520 // create container for main diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
521 this.diagram = this.svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
522 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
523 .attr("class", "main")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
524 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
525 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
526 `translate(${this.dimensions.mainMargin.left}, ${
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
527 this.dimensions.mainMargin.top
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
528 })`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
529 );
2756
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
530
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
531 // create container for navigation diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
532 this.navigation = this.svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
533 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
534 .attr("class", "nav")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
535 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
536 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
537 `translate(${this.dimensions.navMargin.left}, ${
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
538 this.dimensions.navMargin.top
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
539 })`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
540 );
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
541
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
542 // define visible area, everything outside this area will be hidden
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
543 this.svg
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
544 .append("defs")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
545 .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
546 .attr("id", "waterlevel-clip")
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
547 .append("rect")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
548 .attr("width", this.dimensions.width)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
549 .attr("height", this.dimensions.mainHeight);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
550
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
551 // DRAW DIAGRAM PARTS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
552
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
553 // Each drawSomething function (with the exception of drawRefLines)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
554 // returns a fuction to update the respective chart/area/etc. These
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
555 // updater functions are used by the zoom feature to rescale all elements.
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
556 const updaters = [];
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
557
3346
83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 3343
diff changeset
558 // draw (order matters)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
559 updaters.push(this.drawAxes());
3253
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
560 updaters.push(this.drawWaterlevelChart());
3618
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3576
diff changeset
561 if (this.hasPredictions) {
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3576
diff changeset
562 updaters.push(this.drawPredictionAreas());
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3576
diff changeset
563 }
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
564 updaters.push(this.drawNowLines());
3253
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
565
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
566 // static, don't need updater
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
567 this.drawNavigationChart();
3719
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
568 if (refWaterLevels) {
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
569 this.drawRefLines(refWaterLevels);
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
570 }
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
571
3346
83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 3343
diff changeset
572 updaters.push(this.drawNashSutcliffe(72));
83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 3343
diff changeset
573 updaters.push(this.drawNashSutcliffe(48));
83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 3343
diff changeset
574 updaters.push(this.drawNashSutcliffe(24));
83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 3343
diff changeset
575
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
576 // INTERACTIONS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
577
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
578 // create rectanlge on the main chart area to capture mouse events
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
579 const eventRect = this.svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
580 .append("rect")
3212
f87fd173f750 client: waterlevel diagrams: fixed tooltip bug
Markus Kottlaender <markus@intevation.de>
parents: 3211
diff changeset
581 .attr("id", "zoom-waterlevels")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
582 .attr("class", "zoom")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
583 .attr("width", this.dimensions.width)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
584 .attr("height", this.dimensions.mainHeight)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
585 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
586 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
587 `translate(${this.dimensions.mainMargin.left}, ${
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
588 this.dimensions.mainMargin.top
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
589 })`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
590 );
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
591
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
592 this.createZoom(updaters, eventRect);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
593 this.createTooltips(eventRect);
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
594 this.setInlineStyles();
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
595 },
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
596 //set the styles of the diagrams to include them in the pdf
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
597 setInlineStyles() {
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
598 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
599 .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
600 .attr("clip-path", "url(#waterlevel-clip)")
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
601 .selectAll("path")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
602 .attr("stroke", "steelblue")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
603 .attr("stroke-width", 2)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
604 .attr("fill", "none");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
605 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
606 .selectAll(".line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
607 .selectAll("path.d3-line-chunked-chunk-gap")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
608 .attr("stroke-opacity", 0);
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
609 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
610 .selectAll(".line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
611 .selectAll("circle")
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
612 .attr("fill", "steelblue")
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
613 .attr("stroke-width", 0);
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
614 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
615 .selectAll(".line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
616 .selectAll("circle.d3-line-chunked-chunk-predicted-point")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
617 .attr("fill-opacity", 0.6);
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
618
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
619 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: 3179
diff changeset
620 .selectAll(".hdc-line, .mw-line, .ldc-line, .rn-line")
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
621 .attr("stroke-width", 1)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
622 .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
623 .attr("clip-path", "url(#waterlevel-clip)");
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
624 this.svg.selectAll(".hdc-line").attr("stroke", "red");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
625 this.svg.selectAll(".ldc-line").attr("stroke", "green");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
626 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: 3179
diff changeset
627 this.svg.selectAll(".rn-line").attr("stroke", "grey");
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
628 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
629 .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
630 .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
631 .attr("fill", "black");
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
632 this.svg
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
633 .selectAll(".ref-waterlevel-label-background")
3563
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
634 .attr("fill", "rgb(255, 255, 255)")
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
635 .attr("fill-opacity", 0.6);
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
636 this.svg
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
637 .selectAll(".hdc-ldc-area")
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
638 .attr("fill", "rgb(0, 255, 0)")
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
639 .attr("fill-opacity", 0.1);
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
640 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
641 .selectAll(".now-line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
642 .attr("stroke", "#999")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
643 .attr("stroke-width", 1)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
644 .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
645 .attr("clip-path", "url(#waterlevel-clip)");
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
646 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
647 .selectAll(".now-line-label")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
648 .attr("font-size", "11px")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
649 .attr("fill", "#999");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
650 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
651 .selectAll(".prediction-area")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
652 .attr("fill", "steelblue")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
653 .attr("fill-opacity", 0.2)
3147
25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3146
diff changeset
654 .attr("clip-path", "url(#waterlevel-clip)");
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
655 this.svg
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
656 .selectAll("path.nash-sutcliffe")
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
657 .attr("fill", "none")
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
658 .attr("stroke", "darkgrey")
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
659 .attr("stroke-width", 1)
3147
25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3146
diff changeset
660 .attr("clip-path", "url(#waterlevel-clip)");
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
661 this.svg
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
662 .selectAll("path.nash-sutcliffe.ns72")
3563
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
663 .attr("fill", "rgb(255, 255, 255)")
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
664 .attr("fill-opacity", 0.5);
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
665 this.svg
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
666 .selectAll("text.nash-sutcliffe")
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
667 .style("font-size", "10px")
3147
25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3146
diff changeset
668 .attr("clip-path", "url(#waterlevel-clip)")
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
669 .selectAll("tspan:last-child, tspan:first-child")
3346
83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 3343
diff changeset
670 .attr("fill", "#555");
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
671 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
672 .selectAll(".tick line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
673 .attr("stroke-dasharray", 5)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
674 .attr("stroke", "#ccc");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
675 this.svg.selectAll(".tick text").attr("fill", "black");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
676 this.svg.selectAll(".domain").attr("stroke", "black");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
677 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
678 .selectAll(".zoom")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
679 .attr("cursor", "move")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
680 .attr("fill", "none")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
681 .attr("pointer-events", "all");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
682 this.svg
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
683 .selectAll(".brush .selection")
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
684 .attr("stroke", "none")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
685 .attr("fill-opacity", 0.2);
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
686 this.svg
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
687 .selectAll(".brush .handle")
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
688 .attr("stroke", "rgba(23, 162, 184, 0.5)")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
689 .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
690 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
691 .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
692 .attr("clip-path", "url(#waterlevel-clip)");
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
693 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
694 .selectAll(".chart-dots .chart-dot")
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
695 .attr("fill", "steelblue")
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
696 .attr("stroke", "steelblue")
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
697 .attr("stroke-opacity", 0)
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
698 .style("pointer-events", "none")
3046
c764c73f44b4 client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3045
diff changeset
699 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3045
diff changeset
700 .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
701 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
702 .selectAll(".chart-tooltip")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
703 .attr("fill-opacity", 0)
3046
c764c73f44b4 client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3045
diff changeset
704 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3045
diff changeset
705 .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
706 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
707 .selectAll(".chart-tooltip rect")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
708 .attr("fill", "#fff")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
709 .attr("stroke", "#ccc");
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
710 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
711 .selectAll(".chart-tooltip text")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
712 .attr("fill", "666")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
713 .style("font-size", "0.8em");
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
714 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
715 getDimensions() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
716 // dimensions and margins
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
717 const svgWidth = document.querySelector("#" + this.containerId)
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
718 .clientWidth;
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
719 const svgHeight = document.querySelector("#" + this.containerId)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
720 .clientHeight;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
721 const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
722 const navMargin = {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
723 top: svgHeight - mainMargin.top - 65,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
724 right: 20,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
725 bottom: 30,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
726 left: 80
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
727 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
728 const width = +svgWidth - mainMargin.left - mainMargin.right;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
729 const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
730 const navHeight = +svgHeight - navMargin.top - navMargin.bottom;
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
731
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
732 return { width, mainHeight, navHeight, mainMargin, navMargin };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
733 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
734 getExtent(refWaterLevels) {
3719
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
735 let waterlevelValues = [...this.waterlevels.map(wl => wl.waterlevel)];
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
736 if (refWaterLevels) {
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
737 waterlevelValues.push(
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
738 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8,
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
739 Math.max(
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
740 refWaterLevels.LDC - (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
741 0
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
742 )
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
743 );
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
744 } else {
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
745 let delta = d3.max(waterlevelValues) - d3.min(waterlevelValues);
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
746 waterlevelValues.push(
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
747 d3.max(waterlevelValues) + delta * 0.1,
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
748 d3.min(waterlevelValues) - delta * 0.1
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
749 );
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
750 }
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
751
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
752 return {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
753 // set min/max values for the date axis
2820
d973d6f04eb6 client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate
Markus Kottlaender <markus@intevation.de>
parents: 2819
diff changeset
754 date: [
3050
c739b81b8f41 client: gauge waterlevel diagram: fixed date extent
Markus Kottlaender <markus@intevation.de>
parents: 3049
diff changeset
755 this.waterlevels[0].date,
2820
d973d6f04eb6 client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate
Markus Kottlaender <markus@intevation.de>
parents: 2819
diff changeset
756 endOfDay(this.waterlevels[this.waterlevels.length - 1].date)
d973d6f04eb6 client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate
Markus Kottlaender <markus@intevation.de>
parents: 2819
diff changeset
757 ],
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
758 // set min/max values for the waterlevel axis
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
759 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
3719
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
760 // or, if no refWaterlevels exist, +-10% of delta between min and max wl
916534d9d6f6 client: waterlevel diagram: handle gauges without reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 3707
diff changeset
761 waterlevel: d3.extent(waterlevelValues)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
762 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
763 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
764 getScale() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
765 // scaling helpers to convert real world values into pixels
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
766 const x = d3.scaleTime().range([0, this.dimensions.width]);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
767 const y = d3.scaleLinear().range([this.dimensions.mainHeight, 0]);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
768 const x2 = d3.scaleTime().range([0, this.dimensions.width]);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
769 const y2 = d3.scaleLinear().range([this.dimensions.navHeight, 0]);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
770
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
771 // setting the min and max values for the diagram axes
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
772 x.domain(d3.extent(this.extent.date));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
773 y.domain(this.extent.waterlevel);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
774 x2.domain(x.domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
775 y2.domain(y.domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
776
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
777 return { x, y, x2, y2 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
778 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
779 drawAxes() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
780 this.diagram
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
781 .append("g")
2652
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
782 .attr("class", "axis--x")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
783 .attr("transform", `translate(0, ${this.dimensions.mainHeight})`)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
784 .call(this.axes.x)
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
785 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
786 .attr("y", 15);
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
787 this.diagram // label
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
788 .append("text")
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
789 .text(this.$gettext("Waterlevel [m]"))
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
790 .attr("text-anchor", "middle")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
791 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
792 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
793 `translate(-45, ${this.dimensions.mainHeight / 2}) rotate(-90)`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
794 );
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
795 this.diagram
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
796 .append("g")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
797 .call(this.axes.y)
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
798 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
799 .attr("x", -25);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
800
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
801 this.navigation
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
802 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
803 .attr("class", "axis axis--x")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
804 .attr("transform", `translate(0, ${this.dimensions.navHeight})`)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
805 .call(this.axes.x2);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
806
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
807 return () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
808 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
809 .select(".axis--x")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
810 .call(this.axes.x)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
811 .selectAll(".tick text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
812 .attr("y", 15);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
813 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
814 },
3253
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
815 drawWaterlevelChart() {
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
816 const waterlevelChartDrawer = () => {
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
817 let domainLeft = new Date(this.scale.x.domain()[0].getTime());
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
818 let domainRight = new Date(this.scale.x.domain()[1].getTime());
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
819 domainLeft.setDate(domainLeft.getDate() - 1);
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
820 domainRight.setDate(domainRight.getDate() + 1);
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
821
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
822 return (
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
823 d3
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
824 .lineChunked()
3252
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
825 // render only data points that are visible in the current scale
3253
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
826 .defined(d => d.date > domainLeft && d.date < domainRight)
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
827 .x(d => this.scale.x(d.date))
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
828 .y(d => this.scale.y(d.waterlevel))
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
829 .curve(d3.curveLinear)
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
830 .isNext(this.isNext())
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
831 .pointAttrs({ r: 1.7 })
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
832 .chunk(d => (d.predicted ? "predicted" : "line"))
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
833 .chunkDefinitions({ predicted: {} })
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
834 );
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
835 };
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
836
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
837 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
838 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
839 .attr("class", "line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
840 .datum(this.waterlevels)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
841 .call(waterlevelChartDrawer());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
842
3253
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
843 return () => {
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
844 this.diagram.select(".line").call(waterlevelChartDrawer());
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
845 };
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
846 },
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
847 drawNavigationChart() {
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
848 this.navigation
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
849 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
850 .attr("class", "line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
851 .datum(this.waterlevels)
3253
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
852 .call(
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
853 d3
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
854 .lineChunked()
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
855 .x(d => this.scale.x2(d.date))
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
856 .y(d => this.scale.y2(d.waterlevel))
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
857 .curve(d3.curveLinear)
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
858 .isNext(this.isNext())
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
859 .pointAttrs({ r: 1.7 })
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
860 .chunk(d => (d.predicted ? "predicted" : "line"))
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
861 .chunkDefinitions({ predicted: {} })
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
862 );
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
863 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
864 drawNowLines() {
3726
be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents: 3724
diff changeset
865 const now = new Date();
be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents: 3724
diff changeset
866 const nowCoords = [
be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents: 3724
diff changeset
867 { x: now, y: this.extent.waterlevel[0] },
be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents: 3724
diff changeset
868 { x: now, y: this.extent.waterlevel[1] }
be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents: 3724
diff changeset
869 ];
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
870 const nowLine = d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
871 .line()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
872 .x(d => this.scale.x(d.x))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
873 .y(d => this.scale.y(d.y));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
874 const nowLabel = selection => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
875 selection.attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
876 "transform",
3726
be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents: 3724
diff changeset
877 `translate(${this.scale.x(now)}, ${this.scale.y(
3724
05bbd1a97567 client: waterlevel diagrams: fix now lines positioning
Markus Kottlaender <markus@intevation.de>
parents: 3719
diff changeset
878 this.extent.waterlevel[1]
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
879 )})`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
880 );
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
881 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
882
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
883 // draw in main
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
884 this.diagram
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
885 .append("path")
3726
be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents: 3724
diff changeset
886 .datum(nowCoords)
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
887 .attr("class", "now-line")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
888 .attr("d", nowLine);
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
889 this.diagram // label
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
890 .append("text")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
891 .text(this.$gettext("Now"))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
892 .attr("class", "now-line-label")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
893 .attr("text-anchor", "middle")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
894 .call(nowLabel);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
895
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
896 // draw in nav
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
897 this.navigation
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
898 .append("path")
3726
be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming
Markus Kottlaender <markus@intevation.de>
parents: 3724
diff changeset
899 .datum(nowCoords)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
900 .attr("class", "now-line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
901 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
902 "d",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
903 d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
904 .line()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
905 .x(d => this.scale.x2(d.x))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
906 .y(d => this.scale.y2(d.y))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
907 );
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
908
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
909 return () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
910 this.diagram.select(".now-line").attr("d", nowLine);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
911 this.diagram.select(".now-line-label").call(nowLabel);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
912 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
913 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
914 drawPredictionAreas() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
915 const predictionArea = isNav =>
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
916 d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
917 .area()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
918 .defined(d => d.predicted && d.min && d.max)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
919 .x(d => this.scale[isNav ? "x2" : "x"](d.date))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
920 .y0(d => this.scale[isNav ? "y2" : "y"](d.min))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
921 .y1(d => this.scale[isNav ? "y2" : "y"](d.max));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
922
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
923 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
924 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
925 .datum(this.waterlevels)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
926 .attr("class", "prediction-area")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
927 .attr("d", predictionArea());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
928
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
929 this.navigation
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
930 .append("path")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
931 .datum(this.waterlevels)
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
932 .attr("class", "prediction-area")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
933 .attr("d", predictionArea(true));
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
934
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
935 return () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
936 this.diagram.select(".prediction-area").attr("d", predictionArea());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
937 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
938 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
939 drawRefLines(refWaterLevels) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
940 // filling area between HDC and LDC
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
941 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
942 .append("rect")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
943 .attr("class", "hdc-ldc-area")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
944 .attr("x", 0)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
945 .attr("y", this.scale.y(refWaterLevels.HDC))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
946 .attr("width", this.dimensions.width)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
947 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
948 "height",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
949 this.scale.y(refWaterLevels.LDC) - this.scale.y(refWaterLevels.HDC)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
950 );
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
951
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
952 const refWaterlevelLine = d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
953 .line()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
954 .x(d => this.scale.x(d.x))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
955 .y(d => this.scale.y(d.y));
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
956
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
957 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
958 if (refWaterLevels[ref]) {
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
959 this.diagram
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
960 .append("path")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
961 .datum([
3691
afc8ac7001ee client: waterlevel diagrams: fixed drawing of ref waterlevel lines
Markus Kottlaender <markus@intevation.de>
parents: 3688
diff changeset
962 { x: this.extent.date[0], y: refWaterLevels[ref] },
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
963 { 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
964 ])
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
965 .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
966 .attr("d", refWaterlevelLine);
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
967 this.diagram // label
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
968 .append("rect")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
969 .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
970 .attr("x", 1)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
971 .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
972 .attr("width", 55)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
973 .attr("height", 12);
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
974 this.diagram
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
975 .append("text")
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
976 .text(
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
977 `${ref} (${this.$options.filters.waterlevel(
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
978 refWaterLevels[ref]
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
979 )})`
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
980 )
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
981 .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
982 .attr("x", 5)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
983 .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
984 }
3209
5b8916b78cea client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option
Markus Kottlaender <markus@intevation.de>
parents: 3179
diff changeset
985 }
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
986 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
987 drawNashSutcliffe(hours) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
988 const coeff = this.nashSutcliffe.coeffs.find(c => c.hours === hours);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
989 const dateNow = new Date(this.nashSutcliffe.when);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
990 const dateStart = new Date(dateNow.getTime() - hours * 60 * 60 * 1000);
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
991
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
992 const nashSutcliffeBox = hours => {
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
993 // show/hide boxes depending on scale of chart (hide if > 90 days)
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
994 this.diagram
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
995 .selectAll("path.nash-sutcliffe")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
996 .attr(
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
997 "stroke-opacity",
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
998 this.scale.x.domain()[1] - this.scale.x.domain()[0] > 90 * 86400000
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
999 ? 0
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1000 : 1
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1001 );
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1002
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
1003 return d3
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
1004 .area()
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1005 .x(d => this.scale.x(d))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1006 .y0(() => this.dimensions.mainHeight + 0.5)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1007 .y1(() => this.dimensions.mainHeight - 15 * (hours / 24));
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
1008 };
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
1009
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
1010 const nashSutcliffeLabel = (label, date, hours) => {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
1011 let days = hours / 24;
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
1012 label
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1013 .attr("x", Math.min(this.scale.x(date), this.dimensions.width) - 4)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1014 .attr("y", this.dimensions.mainHeight - (15 * days + 0.5) + 12);
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
1015 };
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
1016
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1017 if (coeff.samples) {
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1018 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1019 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1020 .datum([dateStart, dateNow])
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1021 .attr("class", "nash-sutcliffe ns" + hours)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1022 .attr("d", nashSutcliffeBox(hours));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1023 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1024 .append("text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1025 .attr("class", "nash-sutcliffe ns" + hours)
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1026 .attr("text-anchor", "end")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1027 .call(nashSutcliffeLabel, dateNow, hours)
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1028 .append("tspan")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1029 .text(hours + "h: ")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1030 .select(function() {
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1031 return this.parentNode;
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1032 })
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1033 .append("tspan")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1034 .text(coeff.value.toFixed(2))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1035 .select(function() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1036 return this.parentNode;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1037 })
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1038 .append("tspan")
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1039 .text(` (${coeff.samples})`);
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1040 }
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1041
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1042 return () => {
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1043 this.diagram
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1044 .select("path.nash-sutcliffe.ns" + hours)
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1045 .attr("d", nashSutcliffeBox(hours));
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1046 this.diagram
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1047 .select("text.nash-sutcliffe.ns" + hours)
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1048 .call(nashSutcliffeLabel, dateNow, hours);
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
1049 };
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1050 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1051 createZoom(updaters, eventRect) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1052 const brush = d3
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
1053 .brushX()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
1054 .handleSize(4)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1055 .extent([[0, 0], [this.dimensions.width, this.dimensions.navHeight]]);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1056
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1057 const zoom = d3
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
1058 .zoom()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
1059 .scaleExtent([1, Infinity])
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1060 .translateExtent([
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1061 [0, 0],
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1062 [this.dimensions.width, this.dimensions.mainHeight]
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1063 ])
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1064 .extent([[0, 0], [this.dimensions.width, this.dimensions.mainHeight]]);
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
1065
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1066 brush.on("brush end", () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1067 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1068 return; // ignore brush-by-zoom
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1069 let s = d3.event.selection || this.scale.x2.range();
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1070 this.scale.x.domain(s.map(this.scale.x2.invert, this.scale.x2));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1071 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
1072 this.setInlineStyles();
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1073 this.svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1074 .select(".zoom")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1075 .call(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1076 zoom.transform,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1077 d3.zoomIdentity
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1078 .scale(this.dimensions.width / (s[1] - s[0]))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1079 .translate(-s[0], 0)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1080 );
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1081 });
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1082
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1083 zoom.on("zoom", () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1084 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1085 return; // ignore zoom-by-brush
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1086 let t = d3.event.transform;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1087 this.scale.x.domain(t.rescaleX(this.scale.x2).domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1088 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
1089 this.setInlineStyles();
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1090 this.navigation
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1091 .select(".brush")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1092 .call(brush.move, this.scale.x.range().map(t.invertX, t));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1093 });
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1094 zoom.on("start", () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1095 this.svg.select(".chart-dot").style("opacity", 0);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1096 this.svg.select(".chart-tooltip").style("opacity", 0);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1097 });
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1098
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1099 this.navigation
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1100 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1101 .attr("class", "brush")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1102 .call(brush)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1103 .call(brush.move, this.scale.x.range());
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1104
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1105 eventRect.call(zoom);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1106 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1107 createTooltips(eventRect) {
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1108 // create clippable container for the dot
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1109 this.diagram
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1110 .append("g")
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1111 .attr("class", "chart-dots")
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1112 .append("circle")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1113 .attr("class", "chart-dot")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1114 .attr("r", 4);
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1115
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1116 // create container for the tooltip
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1117 const tooltip = this.diagram.append("g").attr("class", "chart-tooltip");
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1118 tooltip
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1119 .append("rect")
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1120 .attr("rx", "0.25em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1121 .attr("ry", "0.25em");
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1122
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1123 // create container for multiple text rows
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1124 const tooltipText = tooltip.append("text").attr("text-anchor", "middle");
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1125
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1126 // padding inside the tooltip box and diagram padding to determine left
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1127 // and right offset from the diagram boundaries for the tooltip position.
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1128 const tooltipPadding = 10;
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1129 const diagramPadding = 5;
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1130
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1131 eventRect
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1132 .on("mouseover", () => {
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1133 this.diagram.select(".chart-dot").style("opacity", 1);
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1134 this.diagram.select(".chart-tooltip").style("opacity", 1);
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1135 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1136 .on("mouseout", () => {
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1137 this.diagram.select(".chart-dot").style("opacity", 0);
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1138 this.diagram.select(".chart-tooltip").style("opacity", 0);
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1139 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1140 .on("mousemove", () => {
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1141 // find data point closest to mouse
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1142 const x0 = this.scale.x.invert(
3212
f87fd173f750 client: waterlevel diagrams: fixed tooltip bug
Markus Kottlaender <markus@intevation.de>
parents: 3211
diff changeset
1143 d3.mouse(document.getElementById("zoom-waterlevels"))[0]
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1144 ),
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1145 i = d3.bisector(d => d.date).left(this.waterlevels, x0, 1),
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1146 d0 = this.waterlevels[i - 1],
2715
8d96b9254465 client: waterlevel diagram: fixed console error when hovering the chart where no data is available
Markus Kottlaender <markus@intevation.de>
parents: 2710
diff changeset
1147 d1 = this.waterlevels[i] || d0,
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1148 d = x0 - d0.date > d1.date - x0 ? d1 : d0;
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1149
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1150 const coords = {
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1151 x: this.scale.x(d.date),
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1152 y: this.scale.y(d.waterlevel)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1153 };
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1154
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1155 // position the dot
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1156 this.diagram
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1157 .select(".chart-dot")
2691
023a607c4bcc client: waterlevel diagram: fixed tooltip display while moving/zooming the chart
Markus Kottlaender <markus@intevation.de>
parents: 2689
diff changeset
1158 .style("opacity", 1)
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1159 .attr("transform", `translate(${coords.x}, ${coords.y})`);
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1160
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1161 // remove current texts
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1162 tooltipText.selectAll("tspan").remove();
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1163
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1164 // write date
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1165 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1166 .append("tspan")
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1167 .attr("dominant-baseline", "hanging")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1168 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1169 .text(
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1170 d.date.toLocaleString([], {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1171 year: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1172 month: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1173 day: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1174 hour: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1175 minute: "2-digit"
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1176 })
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1177 );
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1178
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1179 if (d.predicted) {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1180 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1181 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1182 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1183 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1184 .attr("dy", "1.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1185 .attr("dominant-baseline", "hanging")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1186 .attr("text-anchor", "middle")
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
1187 .text(this.$options.filters.waterlevel(d.max) + " m");
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1188 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1189 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1190 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1191 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1192 .attr("dy", "2.6em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1193 .attr("dominant-baseline", "hanging")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1194 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1195 .attr("class", "font-weight-bold")
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
1196 .text(this.$options.filters.waterlevel(d.waterlevel) + " m");
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1197 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1198 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1199 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1200 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1201 .attr("dy", "3.8em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1202 .attr("dominant-baseline", "hanging")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1203 .attr("text-anchor", "middle")
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
1204 .text(this.$options.filters.waterlevel(d.min) + " m");
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1205 } else {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1206 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1207 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1208 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1209 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1210 .attr("dy", "1.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1211 .attr("dominant-baseline", "hanging")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1212 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1213 .attr("class", "font-weight-bold")
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
1214 .text(this.$options.filters.waterlevel(d.waterlevel) + " m");
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1215 }
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1216
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1217 // get text dimensions
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1218 const textBBox = tooltipText.node().getBBox();
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1219
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1220 this.diagram
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1221 .selectAll(".chart-tooltip text tspan")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1222 .attr("x", textBBox.width / 2 + tooltipPadding)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1223 .attr("y", tooltipPadding);
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1224
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1225 // position and scale tooltip box
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1226 const xMax =
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1227 this.dimensions.width -
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1228 (textBBox.width + diagramPadding + tooltipPadding * 2);
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1229 const tooltipX = Math.max(
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1230 diagramPadding,
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1231 Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1232 );
2824
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2821
diff changeset
1233 let tooltipY = coords.y - (textBBox.height + tooltipPadding * 2) - 10;
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2821
diff changeset
1234 if (coords.y < textBBox.height + tooltipPadding * 2) {
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2821
diff changeset
1235 tooltipY = coords.y + 10;
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2821
diff changeset
1236 }
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2821
diff changeset
1237
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1238 this.diagram
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1239 .select(".chart-tooltip")
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1240 .style("opacity", 1)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1241 .attr("transform", `translate(${tooltipX}, ${tooltipY})`)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1242 .select("rect")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1243 .attr("width", textBBox.width + tooltipPadding * 2)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1244 .attr("height", textBBox.height + tooltipPadding * 2);
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1245 });
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1246 },
3252
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1247 isNext() {
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1248 // Check whether points in the chart can be considered "next to each other".
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1249 // For that they need to be exactly 15 minutes apart (for automatically
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1250 // imported gauge measurements). If the chart shows more than 15 days then
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1251 // 1 hour is also valid (for approved gauge measurements).
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1252 return (prev, current) => {
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1253 let difference = (current.date - prev.date) / 1000;
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1254 if (
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1255 (this.scale.x.domain()[1] - this.scale.x.domain()[0]) / 86400000 >
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1256 15
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1257 )
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1258 return [900, 3600].includes(difference);
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1259 return difference === 900;
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1260 };
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1261 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1262 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1263 created() {
3682
c086f5176ef2 client: diagrams: fixed removal of resize listener
Markus Kottlaender <markus@intevation.de>
parents: 3618
diff changeset
1264 this.resizeListenerFunction = debounce(this.drawDiagram, 100);
c086f5176ef2 client: diagrams: fixed removal of resize listener
Markus Kottlaender <markus@intevation.de>
parents: 3618
diff changeset
1265 window.addEventListener("resize", this.resizeListenerFunction);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1266 },
2810
97cf32cf2562 client: waterlevel diagram: draw diagram when component is mounted
Markus Kottlaender <markus@intevation.de>
parents: 2805
diff changeset
1267 mounted() {
3303
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram
Markus Kottlaender <markus@intevation.de>
parents: 3295
diff changeset
1268 // Nasty but necessary if we don't want to use the updated hook to re-draw
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram
Markus Kottlaender <markus@intevation.de>
parents: 3295
diff changeset
1269 // the diagram because this would re-draw it also for irrelevant reasons.
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram
Markus Kottlaender <markus@intevation.de>
parents: 3295
diff changeset
1270 // In this case we need to wait for the child component (DiagramLegend) to
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram
Markus Kottlaender <markus@intevation.de>
parents: 3295
diff changeset
1271 // render. According to the docs (https://vuejs.org/v2/api/#mounted) this
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram
Markus Kottlaender <markus@intevation.de>
parents: 3295
diff changeset
1272 // should be possible with $nextTick() but it doesn't work because it does
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram
Markus Kottlaender <markus@intevation.de>
parents: 3295
diff changeset
1273 // not guarantee that the DOM is not only updated but also re-painted on the
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram
Markus Kottlaender <markus@intevation.de>
parents: 3295
diff changeset
1274 // screen.
3688
af06045e87c9 client: diagrams: wait (longer) for legend child component to render before rendering diagram (see comments for explanation)
Markus Kottlaender <markus@intevation.de>
parents: 3682
diff changeset
1275 setTimeout(this.drawDiagram, 150);
3303
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram
Markus Kottlaender <markus@intevation.de>
parents: 3295
diff changeset
1276
3143
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
1277 this.templates[0] = this.defaultTemplate;
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
1278 this.form.template = this.templates[0];
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
1279 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
1280 HTTP.get("/templates/diagram", {
3140
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1281 headers: {
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1282 "X-Gemma-Auth": localStorage.getItem("token"),
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1283 "Content-type": "text/xml; charset=UTF-8"
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1284 }
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1285 })
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1286 .then(response => {
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1287 if (response.data.length) {
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1288 this.templates = response.data;
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1289 this.form.template = this.templates[0];
3143
8fdbc524e7b5 client: make the default template available to use even if backend provided templates
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3142
diff changeset
1290 this.templates[this.templates.length] = this.defaultTemplate;
3140
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1291 this.applyChange();
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1292 }
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1293 })
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1294 .catch(e => {
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1295 const { status, data } = e.response;
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1296 displayError({
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1297 title: this.$gettext("Backend Error"),
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1298 message: `${status}: ${data.message || data}`
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1299 });
91556825d95c client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3139
diff changeset
1300 });
2810
97cf32cf2562 client: waterlevel diagram: draw diagram when component is mounted
Markus Kottlaender <markus@intevation.de>
parents: 2805
diff changeset
1301 },
2986
7ee9a3ef90d4 client: remove resize event listener from diagrams after they are closed
Markus Kottlaender <markus@intevation.de>
parents: 2843
diff changeset
1302 destroyed() {
3682
c086f5176ef2 client: diagrams: fixed removal of resize listener
Markus Kottlaender <markus@intevation.de>
parents: 3618
diff changeset
1303 window.removeEventListener("resize", this.resizeListenerFunction);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1304 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1305 };
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1306 </script>