Mercurial > gemma
annotate client/src/components/gauge/Waterlevel.vue @ 3793:d428f283fe10 yworks-svg2pdf
client: remove `export SVG` button for waterlevel
* Use html comments to disable the button, this was wrongly activated
with commit d36ccff8de5f.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Wed, 03 Jul 2019 17:19:28 +0200 |
parents | f86220aa8a72 |
children | 9156890179e2 |
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 |
3793
d428f283fe10
client: remove `export SVG` button for waterlevel
Bernhard Reiter <bernhard@intevation.de>
parents:
3787
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> |
3793
d428f283fe10
client: remove `export SVG` button for waterlevel
Bernhard Reiter <bernhard@intevation.de>
parents:
3787
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" |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
85 style="position: absolute; z-index: -1; top: -9999px; width: 387mm; height: 100mm;" |
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"; |
3780
2b6734a6730a
include svg2pdf. substitute upstream jsdpf with yworks-fork
Thomas Junk <thomas.junk@intevation.de>
parents:
3726
diff
changeset
|
112 import jsPDF from "jspdf-yworks"; |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
113 import svg2pdf from "svg2pdf.js"; |
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", |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
131 svg: null, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
132 diagram: null, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
133 navigation: null, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
134 dimensions: null, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
135 extent: null, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
136 scale: null, |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
137 axes: null, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
138 form: { |
3249
d91c1200dc6b
client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3248
diff
changeset
|
139 template: null |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
140 }, |
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
|
141 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
|
142 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
|
143 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
|
144 properties: { |
3350
8da2f7b9a04b
client: diagram-template:remove unnecessary template properties and typo
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3348
diff
changeset
|
145 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
|
146 }, |
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 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
|
148 { |
3160
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
149 type: "diagram", |
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
150 position: "topleft", |
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
151 offset: { x: 15, y: 50 }, |
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
152 width: 290, |
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
153 height: 100 |
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
154 }, |
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
155 { |
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
|
156 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
|
157 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
|
158 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
|
159 color: "black" |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
160 }, |
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
|
161 { |
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 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
|
163 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
|
164 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
|
165 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
|
166 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
|
167 }, |
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 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
|
170 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
|
171 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
|
172 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
|
173 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
|
174 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
|
175 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
|
176 } |
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 }, |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
179 pdf: { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
180 doc: null, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
181 width: 420, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
182 height: 297 |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
183 }, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
184 templateData: null |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
185 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
186 }, |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
187 computed: { |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
188 ...mapState("application", ["paneSetup"]), |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
189 ...mapState("gauges", [ |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
190 "dateFrom", |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
191 "waterlevels", |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
192 "waterlevelsCSV", |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
193 "nashSutcliffe" |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
194 ]), |
3049
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
195 ...mapGetters("gauges", ["selectedGauge"]), |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
196 title() { |
3148
cdfb0093b7b1
client: gauge diagrams: added information to titles
Markus Kottlaender <markus@intevation.de>
parents:
3147
diff
changeset
|
197 return `${this.selectedGauge.properties.objname}: ${this.$gettext( |
cdfb0093b7b1
client: gauge diagrams: added information to titles
Markus Kottlaender <markus@intevation.de>
parents:
3147
diff
changeset
|
198 "Waterlevel" |
cdfb0093b7b1
client: gauge diagrams: added information to titles
Markus Kottlaender <markus@intevation.de>
parents:
3147
diff
changeset
|
199 )} (${this.dateFrom.toLocaleDateString()} - ${this.dateTo.toLocaleDateString()})`; |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
200 }, |
3049
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
201 dateFrom: { |
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
202 get() { |
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
203 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
|
204 } |
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 dateTo: { |
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
207 get() { |
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
208 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
|
209 } |
3403
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
210 }, |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
211 csvLink() { |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
212 return ( |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
213 "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
|
214 ); |
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 csvFileName() { |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
217 return `${this.$gettext("waterlevels")}-${ |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
218 this.selectedGauge.properties.objname |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
219 }-${this.dateFrom.toISOString().split("T")[0]}-${ |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
220 this.dateTo.toISOString().split("T")[0] |
d7cc5cda82a9
client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents:
3350
diff
changeset
|
221 }.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
|
222 }, |
c03170a1c333
client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3576
diff
changeset
|
223 hasPredictions() { |
c03170a1c333
client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3576
diff
changeset
|
224 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
|
225 } |
2596
8774054959a7
client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2590
diff
changeset
|
226 }, |
3068
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
227 watch: { |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
228 paneSetup() { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
229 this.$nextTick(() => this.drawDiagram()); |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
230 }, |
3068
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
231 waterlevels() { |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
232 this.drawDiagram(); |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
233 } |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
234 }, |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
235 methods: { |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
236 close() { |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
237 this.$store.commit( |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
238 "application/paneSetup", |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
239 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
240 ? "GAUGE_HYDROLOGICALCONDITIONS" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
241 : "DEFAULT" |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
242 ); |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
243 }, |
3565
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
244 downloadSVG() { |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
245 let svg = document.getElementById(this.containerId).firstElementChild; |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
246 let svgXML = new XMLSerializer().serializeToString(svg); |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
247 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
|
248 let filename = |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
249 this.selectedGauge.properties.objname + "-waterlevel-diagram.svg"; |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
250 saveAs(blog, filename); |
f6d67697f158
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3564
diff
changeset
|
251 }, |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
252 downloadPDF() { |
3249
d91c1200dc6b
client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3248
diff
changeset
|
253 this.pdf.doc = new jsPDF( |
d91c1200dc6b
client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3248
diff
changeset
|
254 "l", |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
255 "pt", |
3249
d91c1200dc6b
client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3248
diff
changeset
|
256 this.templateData.properties.paperSize |
d91c1200dc6b
client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3248
diff
changeset
|
257 ); |
3544
067ad32fba69
client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3440
diff
changeset
|
258 // pdf width and height in millimeter (landscape) |
3249
d91c1200dc6b
client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3248
diff
changeset
|
259 this.pdf.width = |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
260 this.templateData.properties.paperSize === "a3" ? 420 : 595.28; |
3249
d91c1200dc6b
client: diagram-template: cleanup code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3248
diff
changeset
|
261 this.pdf.height = |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
262 this.templateData.properties.paperSize === "a3" ? 841.89 : 595.28; |
3179
6ddd3755350c
client: fix the rendering of diagram on pdf by splitscreen case (waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3160
diff
changeset
|
263 // 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
|
264 if (this.templateData) { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
265 let defaultFontSize = 11, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
266 defaultColor = "black", |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
267 defaultWidth = 70 * 2.83, |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
268 defaultTextColor = "black", |
3141
42324626f9e2
client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3140
diff
changeset
|
269 defaultBorderColor = "white", |
42324626f9e2
client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3140
diff
changeset
|
270 defaultBgColor = "white", |
42324626f9e2
client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3140
diff
changeset
|
271 defaultRounding = 2, |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
272 defaultPadding = 2; |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
273 //defaultOffset = { x: 0, y: 0 }; |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
274 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
|
275 switch (e.type) { |
3160
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
276 case "diagram": { |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
277 this.addDiagram(e.position, this.calculateOffset(e.offset)); |
3160
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
278 break; |
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
279 } |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
280 case "diagramlegend": { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
281 this.addDiagramLegend( |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
282 e.position, |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
283 this.calculateOffset(e.offset), |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
284 e.color || defaultColor |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
285 ); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
286 break; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
287 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
288 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
|
289 let gaugeInfo = |
aac1ca73e92a
client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3253
diff
changeset
|
290 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
|
291 " (" + |
aac1ca73e92a
client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3253
diff
changeset
|
292 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
|
293 .split(".")[1] |
aac1ca73e92a
client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3253
diff
changeset
|
294 .replace(/[()]/g, "") |
aac1ca73e92a
client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3253
diff
changeset
|
295 .split(",")[3] + |
aac1ca73e92a
client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3253
diff
changeset
|
296 "):" + |
aac1ca73e92a
client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3253
diff
changeset
|
297 " Waterlevel " + |
aac1ca73e92a
client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3253
diff
changeset
|
298 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
|
299 " - " + |
aac1ca73e92a
client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3253
diff
changeset
|
300 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
|
301 this.addDiagramTitle( |
aac1ca73e92a
client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3253
diff
changeset
|
302 e.position, |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
303 this.calculateOffset(e.offset), |
3544
067ad32fba69
client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3440
diff
changeset
|
304 e.fontsize || defaultFontSize, |
067ad32fba69
client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3440
diff
changeset
|
305 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
|
306 gaugeInfo |
aac1ca73e92a
client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3253
diff
changeset
|
307 ); |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
308 break; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
309 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
310 case "text": { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
311 this.addText( |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
312 e.position, |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
313 this.calculateOffset(e.offset), |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
314 e.width * 2.83 || defaultWidth, |
3242
3b770f8273b6
client: diagram-template: fix bug with font size
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3229
diff
changeset
|
315 e.fontsize || defaultFontSize, |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
316 e.color || defaultTextColor, |
3544
067ad32fba69
client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3440
diff
changeset
|
317 e.text || "" |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
318 ); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
319 break; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
320 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
321 case "image": { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
322 this.addImage( |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
323 e.url, |
3544
067ad32fba69
client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3440
diff
changeset
|
324 e.format || "", |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
325 e.position, |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
326 this.calculateOffset(e.offset), |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
327 e.width * 2.83 || 90 * 2.83, |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
328 e.height * 2.83 || 60 * 2.83 |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
329 ); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
330 break; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
331 } |
3141
42324626f9e2
client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3140
diff
changeset
|
332 case "box": { |
42324626f9e2
client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3140
diff
changeset
|
333 this.addBox( |
42324626f9e2
client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3140
diff
changeset
|
334 e.position, |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
335 this.calculateOffset(e.offset), |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
336 e.width * 2.83 || 90 * 2.83, |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
337 e.height * 2.83 || 60 * 2.83, |
3141
42324626f9e2
client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3140
diff
changeset
|
338 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
|
339 e.color || defaultBgColor, |
42324626f9e2
client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3140
diff
changeset
|
340 e.brcolor || defaultBorderColor |
42324626f9e2
client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3140
diff
changeset
|
341 ); |
42324626f9e2
client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3140
diff
changeset
|
342 break; |
42324626f9e2
client: add box element for pdf-template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3140
diff
changeset
|
343 } |
3154
b6c10b30d6bd
client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3150
diff
changeset
|
344 case "textbox": { |
b6c10b30d6bd
client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3150
diff
changeset
|
345 this.addTextBox( |
b6c10b30d6bd
client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3150
diff
changeset
|
346 e.position, |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
347 this.calculateOffset(e.offset), |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
348 e.width * 2.83, |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
349 e.height * 2.83, |
3154
b6c10b30d6bd
client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3150
diff
changeset
|
350 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
|
351 e.padding || defaultPadding, |
3242
3b770f8273b6
client: diagram-template: fix bug with font size
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3229
diff
changeset
|
352 e.fontsize || defaultFontSize, |
3154
b6c10b30d6bd
client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3150
diff
changeset
|
353 e.color || defaultTextColor, |
b6c10b30d6bd
client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3150
diff
changeset
|
354 e.background || defaultBgColor, |
3544
067ad32fba69
client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3440
diff
changeset
|
355 e.text || "", |
3154
b6c10b30d6bd
client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3150
diff
changeset
|
356 e.brcolor || defaultBorderColor |
b6c10b30d6bd
client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3150
diff
changeset
|
357 ); |
3242
3b770f8273b6
client: diagram-template: fix bug with font size
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3229
diff
changeset
|
358 break; |
3154
b6c10b30d6bd
client: pdf-gen: add one pdf-template element
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3150
diff
changeset
|
359 } |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
360 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
361 }); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
362 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
363 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
|
364 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
|
365 ); |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
366 }, |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
367 calculateOffset(offset) { |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
368 let tmp; |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
369 let defaultOffset = { x: 0, y: 0 }; |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
370 if (offset) { |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
371 tmp = { |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
372 x: offset.x * 2.83, |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
373 y: offset.y * 2.83 |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
374 }; |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
375 } else { |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
376 tmp = defaultOffset; |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
377 } |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
378 return tmp; |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
379 }, |
3140
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
380 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
|
381 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
|
382 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
|
383 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
|
384 } |
3140
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
385 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
|
386 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
|
387 headers: { |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
388 "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
|
389 "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
|
390 } |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
391 }) |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
392 .then(response => { |
3787
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
393 /** |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
394 * In order to render the images from the template, we need to convert |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
395 * each image to dataURIs. Since this happens asynchronous, |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
396 * we need to wrap each image into its own promise and only after all are |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
397 * finished, we continue with the flow. |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
398 */ |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
399 const imageElementLoaders = response.data.template_data.elements.reduce( |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
400 (o, n, i) => { |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
401 if (n.type === "image") { |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
402 o.push( |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
403 new Promise(resolve => { |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
404 const image = new Image(); |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
405 image.onload = function() { |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
406 var canvas = document.createElement("canvas"); |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
407 canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
408 canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
409 canvas.getContext("2d").drawImage(this, 0, 0); |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
410 resolve({ |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
411 index: i, |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
412 url: canvas.toDataURL("image/png") |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
413 }); |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
414 }; |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
415 image.src = n.url; |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
416 }) |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
417 ); |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
418 } |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
419 return o; |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
420 }, |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
421 [] |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
422 ); |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
423 Promise.all(imageElementLoaders).then(values => { |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
424 values.forEach(v => { |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
425 response.data.template_data.elements[v.index].url = v.url; |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
426 }); |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
427 this.templateData = response.data.template_data; |
f86220aa8a72
Waterlevel: prefetch images of template and convert to dataURI
Thomas Junk <thomas.junk@intevation.de>
parents:
3782
diff
changeset
|
428 }); |
3140
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
429 }) |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
430 .catch(e => { |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
431 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
|
432 displayError({ |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
433 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
|
434 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
|
435 }); |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
436 }); |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
437 } |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
438 }, |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
439 addDiagram(position, offset) { |
3160
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
440 let x = offset.x, |
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
441 y = offset.y; |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
442 |
3544
067ad32fba69
client: diagram-template: improve values of template elements
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3440
diff
changeset
|
443 // use default width,height if they are missing in the template definition |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
444 |
3160
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
445 if (["topright", "bottomright"].indexOf(position) !== -1) { |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
446 x = |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
447 this.pdf.width - |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
448 offset.x - |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
449 document.getElementById(this.containerId).clientWidth; |
3160
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
450 } |
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
451 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
452 y = |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
453 this.pdf.height - |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
454 offset.y - |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
455 document.getElementById(this.containerId).clientHeight; |
3160
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
456 } |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
457 |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
458 let svg = document.getElementById(this.containerId).firstElementChild; |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
459 svg2pdf(svg, this.pdf.doc, { |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
460 xOffset: x, |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
461 yOffset: y, |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
462 scale: |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
463 this.templateData.properties.paperSize === "a3" |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
464 ? 2 * (25.4 / 72) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
465 : 1.5 * (25.4 / 72) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
466 }); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
467 |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
468 this.containerId = "waterlevel-diagram-container"; |
3160
94935895e6d7
client: add diagram-element to template (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3154
diff
changeset
|
469 }, |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
470 // Diagram legend |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
471 addDiagramLegend(position, offset, color) { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
472 let x = offset.x; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
473 let y = offset.y; |
3343
13bb0ff62ac8
client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3323
diff
changeset
|
474 this.pdf.doc.setFontSize(10); |
13bb0ff62ac8
client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3323
diff
changeset
|
475 let width = |
13bb0ff62ac8
client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3323
diff
changeset
|
476 (this.pdf.doc.getStringUnitWidth("Navigable Range") * 10) / |
13bb0ff62ac8
client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3323
diff
changeset
|
477 (72 / 25.6) + |
13bb0ff62ac8
client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3323
diff
changeset
|
478 5; |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
479 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
|
480 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
|
481 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
482 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { |
3343
13bb0ff62ac8
client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3323
diff
changeset
|
483 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
|
484 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
485 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
|
486 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
|
487 this.pdf.doc.setFillColor("steelblue"); |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
488 this.pdf.doc.circle(x, y, 2 * 2.8, "FD"); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
489 this.pdf.doc.text(x + 3 * 2.83, y + 1 * 2.83, "Waterlevel"); |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
490 this.pdf.doc.setFillColor("#dae6f0"); |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
491 this.pdf.doc.circle(x, y + 5 * 2.83, 2 * 2.83, "FD"); |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
492 this.pdf.doc.setFillColor("#e5ffe5"); |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
493 this.pdf.doc.circle(x, y + 10 * 2.83, 2 * 2.83, "FD"); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
494 this.pdf.doc.text(x + 3 * 2.83, y + 11 * 2.83, "Navigable Range"); |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
495 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
|
496 this.pdf.doc.setFillColor("#90b4d2"); |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
497 this.pdf.doc.circle(x, y + 5 * 2.83, 0.6 * 2.83, "FD"); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
498 this.pdf.doc.text(x + 3 * 2.83, y + 6 * 2.83, "Prediction"); |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
499 }, |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
500 drawDiagram() { |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
501 // 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
|
502 d3.select("#" + this.containerId + " svg").remove(); |
2701
e622689d73bd
client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents:
2695
diff
changeset
|
503 if (!this.selectedGauge || !this.waterlevels.length) return; |
e622689d73bd
client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents:
2695
diff
changeset
|
504 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
505 // PREPARE HELPERS |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
506 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
507 // 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
|
508 const refWaterLevels = JSON.parse( |
2604
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
509 this.selectedGauge.properties.reference_water_levels |
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
510 ); |
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
511 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
512 // dimensions (widths, heights, margins) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
513 this.dimensions = this.getDimensions(); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
514 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
515 // 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
|
516 this.extent = this.getExtent(refWaterLevels); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
517 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
518 // scaling helpers |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
519 this.scale = this.getScale(); |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
520 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
521 // 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
|
522 this.axes = { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
523 x: d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
524 .axisTop(this.scale.x) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
525 .tickSizeInner(this.dimensions.mainHeight) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
526 .tickSizeOuter(0), |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
527 y: d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
528 .axisRight(this.scale.y) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
529 .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
|
530 .tickSizeOuter(0) |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
531 .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
|
532 x2: d3.axisBottom(this.scale.x2) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
533 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
534 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
535 // DRAW DIAGRAM/NAVIGATION AREAS |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
536 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
537 // create svg |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
538 this.svg = d3 |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
539 .select("#" + this.containerId) |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
540 .append("svg") |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
541 .attr("width", "100%") |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
542 .attr("height", "100%"); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
543 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
544 // create container for main diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
545 this.diagram = this.svg |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
546 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
547 .attr("class", "main") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
548 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
549 "transform", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
550 `translate(${this.dimensions.mainMargin.left}, ${ |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
551 this.dimensions.mainMargin.top |
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 ); |
2756
ee2530ee1c0b
client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents:
2751
diff
changeset
|
554 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
555 // create container for navigation diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
556 this.navigation = this.svg |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
557 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
558 .attr("class", "nav") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
559 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
560 "transform", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
561 `translate(${this.dimensions.navMargin.left}, ${ |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
562 this.dimensions.navMargin.top |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
563 })` |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
564 ); |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
565 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
566 // 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
|
567 this.svg |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
568 .append("defs") |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
569 .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
|
570 .attr("id", "waterlevel-clip") |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
571 .append("rect") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
572 .attr("width", this.dimensions.width) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
573 .attr("height", this.dimensions.mainHeight); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
574 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
575 // DRAW DIAGRAM PARTS |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
576 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
577 // 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
|
578 // 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
|
579 // 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
|
580 const updaters = []; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
581 |
3346
83210507aaca
client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
3343
diff
changeset
|
582 // draw (order matters) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
583 updaters.push(this.drawAxes()); |
3253
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
584 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
|
585 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
|
586 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
|
587 } |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
588 updaters.push(this.drawNowLines()); |
3253
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
589 |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
590 // static, don't need updater |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
591 this.drawNavigationChart(); |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
592 this.drawRefLines(refWaterLevels); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
593 |
3346
83210507aaca
client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
3343
diff
changeset
|
594 updaters.push(this.drawNashSutcliffe(72)); |
83210507aaca
client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
3343
diff
changeset
|
595 updaters.push(this.drawNashSutcliffe(48)); |
83210507aaca
client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
3343
diff
changeset
|
596 updaters.push(this.drawNashSutcliffe(24)); |
83210507aaca
client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
3343
diff
changeset
|
597 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
598 // INTERACTIONS |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
599 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
600 // 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
|
601 const eventRect = this.svg |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
602 .append("rect") |
3212
f87fd173f750
client: waterlevel diagrams: fixed tooltip bug
Markus Kottlaender <markus@intevation.de>
parents:
3211
diff
changeset
|
603 .attr("id", "zoom-waterlevels") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
604 .attr("class", "zoom") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
605 .attr("width", this.dimensions.width) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
606 .attr("height", this.dimensions.mainHeight) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
607 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
608 "transform", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
609 `translate(${this.dimensions.mainMargin.left}, ${ |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
610 this.dimensions.mainMargin.top |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
611 })` |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
612 ); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
613 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
614 this.createZoom(updaters, eventRect); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
615 this.createTooltips(eventRect); |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
616 this.setInlineStyles(); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
617 }, |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
618 //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
|
619 setInlineStyles() { |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
620 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
621 .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
|
622 .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
|
623 .selectAll("path") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
624 .attr("stroke", "steelblue") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
625 .attr("stroke-width", 2) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
626 .attr("fill", "none"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
627 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
628 .selectAll(".line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
629 .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
|
630 .attr("stroke-opacity", 0); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
631 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
632 .selectAll(".line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
633 .selectAll("circle") |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
634 .attr("fill", "steelblue") |
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
635 .attr("stroke-width", 0); |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
636 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
637 .selectAll(".line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
638 .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
|
639 .attr("fill-opacity", 0.6); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
640 |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
641 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
|
642 .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
|
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("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
|
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.selectAll(".hdc-line").attr("stroke", "red"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
647 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
|
648 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
|
649 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
|
650 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
651 .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
|
652 .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
|
653 .attr("fill", "black"); |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
654 this.svg |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
655 .selectAll(".ref-waterlevel-label-background") |
3563
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
656 .attr("fill", "rgb(255, 255, 255)") |
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
657 .attr("fill-opacity", 0.6); |
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
658 this.svg |
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
659 .selectAll(".hdc-ldc-area") |
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
660 .attr("fill", "rgb(0, 255, 0)") |
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
661 .attr("fill-opacity", 0.1); |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
662 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
663 .selectAll(".now-line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
664 .attr("stroke", "#999") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
665 .attr("stroke-width", 1) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
666 .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
|
667 .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
|
668 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
669 .selectAll(".now-line-label") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
670 .attr("font-size", "11px") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
671 .attr("fill", "#999"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
672 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
673 .selectAll(".prediction-area") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
674 .attr("fill", "steelblue") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
675 .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
|
676 .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
|
677 this.svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
678 .selectAll("path.nash-sutcliffe") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
679 .attr("fill", "none") |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
680 .attr("stroke", "darkgrey") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
681 .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
|
682 .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
|
683 this.svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
684 .selectAll("path.nash-sutcliffe.ns72") |
3563
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
685 .attr("fill", "rgb(255, 255, 255)") |
f65ef9148d00
client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents:
3544
diff
changeset
|
686 .attr("fill-opacity", 0.5); |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
687 this.svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
688 .selectAll("text.nash-sutcliffe") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
689 .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
|
690 .attr("clip-path", "url(#waterlevel-clip)") |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
691 .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
|
692 .attr("fill", "#555"); |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
693 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
694 .selectAll(".tick line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
695 .attr("stroke-dasharray", 5) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
696 .attr("stroke", "#ccc"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
697 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
|
698 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
|
699 this.svg |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
700 .selectAll(".domain") |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
701 .attr("stroke", "black") |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
702 .attr("fill", "none"); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
703 this.svg |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
704 .selectAll(".zoom") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
705 .attr("cursor", "move") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
706 .attr("fill", "none") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
707 .attr("pointer-events", "all"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
708 this.svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
709 .selectAll(".brush .selection") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
710 .attr("stroke", "none") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
711 .attr("fill-opacity", 0.2); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
712 this.svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
713 .selectAll(".brush .handle") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
714 .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
|
715 .attr("fill", "rgba(23, 162, 184, 0.5)"); |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
716 this.svg.selectAll(".brush .overlay").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
|
717 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
|
718 .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
|
719 .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
|
720 this.svg |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
721 .selectAll(".chart-dots .chart-dot") |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
722 .attr("fill", "steelblue") |
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
723 .attr("stroke", "steelblue") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
724 .attr("stroke-opacity", 0) |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
725 .style("pointer-events", "none") |
3046
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
726 .transition() |
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
727 .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
|
728 this.svg |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
729 .selectAll(".chart-tooltip") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
730 .attr("fill-opacity", 0) |
3046
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
731 .transition() |
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
732 .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
|
733 this.svg |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
734 .selectAll(".chart-tooltip rect") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
735 .attr("fill", "#fff") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
736 .attr("stroke", "#ccc"); |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
737 this.svg |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
738 .selectAll(".chart-tooltip text") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
739 .attr("fill", "666") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
740 .style("font-size", "0.8em"); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
741 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
742 getDimensions() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
743 // dimensions and margins |
3146
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
744 const svgWidth = document.querySelector("#" + this.containerId) |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
745 .clientWidth; |
b6cc4838d2c0
client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents:
3143
diff
changeset
|
746 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
|
747 .clientHeight; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
748 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
|
749 const navMargin = { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
750 top: svgHeight - mainMargin.top - 65, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
751 right: 20, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
752 bottom: 30, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
753 left: 80 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
754 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
755 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
|
756 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
|
757 const navHeight = +svgHeight - navMargin.top - navMargin.bottom; |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
758 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
759 return { width, mainHeight, navHeight, mainMargin, navMargin }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
760 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
761 getExtent(refWaterLevels) { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
762 return { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
763 // 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
|
764 date: [ |
3050
c739b81b8f41
client: gauge waterlevel diagram: fixed date extent
Markus Kottlaender <markus@intevation.de>
parents:
3049
diff
changeset
|
765 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
|
766 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
|
767 ], |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
768 // 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
|
769 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC) |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
770 waterlevel: d3.extent( |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
771 [ |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
772 ...this.waterlevels, |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
773 { |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
774 waterlevel: |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
775 refWaterLevels.HDC + |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
776 (refWaterLevels.HDC - refWaterLevels.LDC) / 8 |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
777 }, |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
778 { |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
779 waterlevel: Math.max( |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
780 refWaterLevels.LDC - |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
781 (refWaterLevels.HDC - refWaterLevels.LDC) / 4, |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
782 0 |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
783 ) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
784 } |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
785 ], |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
786 d => d.waterlevel |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
787 ) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
788 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
789 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
790 getScale() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
791 // 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
|
792 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
|
793 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
|
794 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
|
795 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
|
796 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
797 // 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
|
798 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
|
799 y.domain(this.extent.waterlevel); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
800 x2.domain(x.domain()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
801 y2.domain(y.domain()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
802 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
803 return { x, y, x2, y2 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
804 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
805 drawAxes() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
806 this.diagram |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
807 .append("g") |
2652
a2dd96c305be
client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents:
2648
diff
changeset
|
808 .attr("class", "axis--x") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
809 .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
|
810 .call(this.axes.x) |
2648
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
811 .selectAll(".tick text") |
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
812 .attr("y", 15); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
813 this.diagram // label |
2641
a735119e4f5c
client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents:
2611
diff
changeset
|
814 .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
|
815 .text(this.$gettext("Waterlevel [m]")) |
2641
a735119e4f5c
client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents:
2611
diff
changeset
|
816 .attr("text-anchor", "middle") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
817 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
818 "transform", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
819 `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
|
820 ); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
821 this.diagram |
2648
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
822 .append("g") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
823 .call(this.axes.y) |
2648
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
824 .selectAll(".tick text") |
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
825 .attr("x", -25); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
826 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
827 this.navigation |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
828 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
829 .attr("class", "axis axis--x") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
830 .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
|
831 .call(this.axes.x2); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
832 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
833 return () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
834 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
835 .select(".axis--x") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
836 .call(this.axes.x) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
837 .selectAll(".tick text") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
838 .attr("y", 15); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
839 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
840 }, |
3253
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
841 drawWaterlevelChart() { |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
842 const waterlevelChartDrawer = () => { |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
843 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
|
844 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
|
845 domainLeft.setDate(domainLeft.getDate() - 1); |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
846 domainRight.setDate(domainRight.getDate() + 1); |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
847 |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
848 let lineChunked = d3 |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
849 .lineChunked() |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
850 // render only data points that are visible in the current scale |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
851 .defined(d => d.date > domainLeft && d.date < domainRight) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
852 .x(d => this.scale.x(d.date)) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
853 .y(d => this.scale.y(d.waterlevel)) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
854 .curve(d3.curveLinear) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
855 .isNext(this.isNext()) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
856 .pointAttrs({ r: 1.7 }); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
857 // to avoid creating empty clip-path element |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
858 if (this.hasPredictions) { |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
859 lineChunked |
3253
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")) |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
861 .chunkDefinitions({ predicted: {} }); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
862 } |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
863 return lineChunked; |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
864 }; |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
865 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
866 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
867 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
868 .attr("class", "line") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
869 .datum(this.waterlevels) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
870 .call(waterlevelChartDrawer()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
871 |
3253
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
872 return () => { |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
873 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
|
874 }; |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
875 }, |
3a7b6eb162db
client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents:
3252
diff
changeset
|
876 drawNavigationChart() { |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
877 let lineChunked = d3 |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
878 .lineChunked() |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
879 .x(d => this.scale.x2(d.date)) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
880 .y(d => this.scale.y2(d.waterlevel)) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
881 .curve(d3.curveLinear) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
882 .isNext(this.isNext()) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
883 .pointAttrs({ r: 1.7 }); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
884 // to avoid creating empty clip-path element |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
885 if (this.hasPredictions) { |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
886 lineChunked |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
887 .chunk(d => (d.predicted ? "predicted" : "line")) |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
888 .chunkDefinitions({ predicted: {} }); |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
889 } |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
890 this.navigation |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
891 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
892 .attr("class", "line") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
893 .datum(this.waterlevels) |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
894 .call(lineChunked); |
2805
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 drawNowLines() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
897 const nowLine = d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
898 .line() |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
899 .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
|
900 .y(d => this.scale.y(d.y)); |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
901 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
902 const nowLabel = selection => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
903 selection.attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
904 "transform", |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
905 `translate(${this.scale.x(new Date())}, ${this.scale.y( |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
906 this.extent.waterlevel[1] - 16 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
907 )})` |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
908 ); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
909 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
910 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
911 // draw in main |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
912 this.diagram |
2604
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
913 .append("path") |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
914 .datum([ |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
915 { x: new Date(), y: this.extent.waterlevel[0] }, |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
916 { x: new Date(), y: this.extent.waterlevel[1] - 20 } |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
917 ]) |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
918 .attr("class", "now-line") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
919 .attr("d", nowLine); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
920 this.diagram // label |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
921 .append("text") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
922 .text(this.$gettext("Now")) |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
923 .attr("class", "now-line-label") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
924 .attr("text-anchor", "middle") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
925 .call(nowLabel); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
926 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
927 // draw in nav |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
928 this.navigation |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
929 .append("path") |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
930 .datum([ |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
931 { x: new Date(), y: this.extent.waterlevel[0] }, |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
932 { x: new Date(), y: this.extent.waterlevel[1] - 20 } |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
933 ]) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
934 .attr("class", "now-line") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
935 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
936 "d", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
937 d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
938 .line() |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
939 .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
|
940 .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
|
941 ); |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
942 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
943 return () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
944 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
|
945 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
|
946 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
947 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
948 drawPredictionAreas() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
949 const predictionArea = isNav => |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
950 d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
951 .area() |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
952 .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
|
953 .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
|
954 .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
|
955 .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
|
956 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
957 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
958 .append("path") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
959 .datum(this.waterlevels) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
960 .attr("class", "prediction-area") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
961 .attr("d", predictionArea()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
962 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
963 this.navigation |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
964 .append("path") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
965 .datum(this.waterlevels) |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
966 .attr("class", "prediction-area") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
967 .attr("d", predictionArea(true)); |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
968 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
969 return () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
970 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
|
971 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
972 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
973 drawRefLines(refWaterLevels) { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
974 // filling area between HDC and LDC |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
975 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
976 .append("rect") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
977 .attr("class", "hdc-ldc-area") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
978 .attr("x", 0) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
979 .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
|
980 .attr("width", this.dimensions.width) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
981 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
982 "height", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
983 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
|
984 ); |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
985 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
986 const refWaterlevelLine = d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
987 .line() |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
988 .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
|
989 .y(d => this.scale.y(d.y)); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
990 |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
991 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
|
992 if (refWaterLevels[ref]) { |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
993 this.diagram |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
994 .append("path") |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
995 .datum([ |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
996 { x: 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
|
997 { 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
|
998 ]) |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
999 .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
|
1000 .attr("d", refWaterlevelLine); |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
1001 this.diagram // label |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
1002 .append("rect") |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
1003 .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
|
1004 .attr("x", 1) |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
1005 .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
|
1006 .attr("width", 55) |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
1007 .attr("height", 12); |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
1008 this.diagram |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
1009 .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
|
1010 .text( |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
1011 `${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
|
1012 refWaterLevels[ref] |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
1013 )})` |
1109a38f7ff1
client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents:
3565
diff
changeset
|
1014 ) |
3211
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
1015 .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
|
1016 .attr("x", 5) |
f76927849ef8
client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents:
3209
diff
changeset
|
1017 .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
|
1018 } |
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
|
1019 } |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1020 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1021 drawNashSutcliffe(hours) { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1022 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
|
1023 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
|
1024 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
|
1025 |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
1026 const nashSutcliffeBox = hours => { |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1027 // 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
|
1028 this.diagram |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1029 .selectAll("path.nash-sutcliffe") |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1030 .attr( |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1031 "stroke-opacity", |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1032 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
|
1033 ? 0 |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1034 : 1 |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1035 ); |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1036 |
2751
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
1037 return d3 |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
1038 .area() |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1039 .x(d => this.scale.x(d)) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1040 .y0(() => this.dimensions.mainHeight + 0.5) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1041 .y1(() => this.dimensions.mainHeight - 15 * (hours / 24)); |
2751
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
1042 }; |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
1043 |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
1044 const nashSutcliffeLabel = (label, date, hours) => { |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
1045 let days = hours / 24; |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
1046 label |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1047 .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
|
1048 .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
|
1049 }; |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
1050 |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1051 if (coeff.samples) { |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1052 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1053 .append("path") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1054 .datum([dateStart, dateNow]) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1055 .attr("class", "nash-sutcliffe ns" + hours) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1056 .attr("d", nashSutcliffeBox(hours)); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1057 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1058 .append("text") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1059 .attr("class", "nash-sutcliffe ns" + hours) |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1060 .attr("text-anchor", "end") |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1061 .call(nashSutcliffeLabel, dateNow, hours) |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1062 .append("tspan") |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1063 .text(hours + "h: ") |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1064 .select(function() { |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1065 return this.parentNode; |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1066 }) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1067 .append("tspan") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1068 .text(coeff.value.toFixed(2)) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1069 .select(function() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1070 return this.parentNode; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1071 }) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1072 .append("tspan") |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1073 .text(` (${coeff.samples})`); |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1074 } |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1075 |
3348
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1076 return () => { |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1077 this.diagram |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1078 .select("path.nash-sutcliffe.ns" + hours) |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1079 .attr("d", nashSutcliffeBox(hours)); |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1080 this.diagram |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1081 .select("text.nash-sutcliffe.ns" + hours) |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1082 .call(nashSutcliffeLabel, dateNow, hours); |
7bb6c921cf91
client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents:
3346
diff
changeset
|
1083 }; |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1084 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1085 createZoom(updaters, eventRect) { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1086 const brush = d3 |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
1087 .brushX() |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
1088 .handleSize(4) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1089 .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
|
1090 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1091 const zoom = d3 |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
1092 .zoom() |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
1093 .scaleExtent([1, Infinity]) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1094 .translateExtent([ |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1095 [0, 0], |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1096 [this.dimensions.width, this.dimensions.mainHeight] |
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 .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
|
1099 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1100 brush.on("brush end", () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1101 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
|
1102 return; // ignore brush-by-zoom |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1103 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
|
1104 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
|
1105 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
|
1106 this.setInlineStyles(); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1107 this.svg |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1108 .select(".zoom") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1109 .call( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1110 zoom.transform, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1111 d3.zoomIdentity |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1112 .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
|
1113 .translate(-s[0], 0) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1114 ); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1115 }); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1116 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1117 zoom.on("zoom", () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1118 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
|
1119 return; // ignore zoom-by-brush |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1120 let t = d3.event.transform; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1121 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
|
1122 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
|
1123 this.setInlineStyles(); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1124 this.navigation |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1125 .select(".brush") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1126 .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
|
1127 }); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1128 zoom.on("start", () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1129 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
|
1130 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
|
1131 }); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1132 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1133 this.navigation |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1134 .append("g") |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1135 .attr("class", "brush") |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1136 .call(brush) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1137 .call(brush.move, this.scale.x.range()); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1138 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1139 eventRect.call(zoom); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1140 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1141 createTooltips(eventRect) { |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1142 // create clippable container for the dot |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1143 this.diagram |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1144 .append("g") |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1145 .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
|
1146 .append("circle") |
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1147 .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
|
1148 .attr("r", 4); |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1149 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1150 // create container for the tooltip |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1151 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
|
1152 tooltip |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1153 .append("rect") |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1154 .attr("rx", "0.25em") |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
1155 .attr("ry", "0.25em") |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
1156 .attr("width", "0px") |
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
1157 .attr("height", "0px"); |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1158 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1159 // create container for multiple text rows |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1160 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
|
1161 |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1162 // 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
|
1163 // 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
|
1164 const tooltipPadding = 10; |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1165 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
|
1166 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1167 eventRect |
2689
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1168 .on("mouseover", () => { |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1169 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
|
1170 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
|
1171 }) |
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1172 .on("mouseout", () => { |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1173 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
|
1174 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
|
1175 }) |
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
1176 .on("mousemove", () => { |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1177 // find data point closest to mouse |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1178 const x0 = this.scale.x.invert( |
3212
f87fd173f750
client: waterlevel diagrams: fixed tooltip bug
Markus Kottlaender <markus@intevation.de>
parents:
3211
diff
changeset
|
1179 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
|
1180 ), |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1181 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
|
1182 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
|
1183 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
|
1184 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
|
1185 |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1186 const coords = { |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1187 x: this.scale.x(d.date), |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1188 y: this.scale.y(d.waterlevel) |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1189 }; |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1190 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1191 // position the dot |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1192 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
|
1193 .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
|
1194 .style("opacity", 1) |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1195 .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
|
1196 |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1197 // remove current texts |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1198 tooltipText.selectAll("tspan").remove(); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1199 |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1200 // write date |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1201 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1202 .append("tspan") |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1203 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1204 .attr("text-anchor", "middle") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1205 .text( |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1206 d.date.toLocaleString([], { |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1207 year: "2-digit", |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1208 month: "2-digit", |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1209 day: "2-digit", |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1210 hour: "2-digit", |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1211 minute: "2-digit" |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1212 }) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1213 ); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1214 |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1215 if (d.predicted) { |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1216 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1217 .append("tspan") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1218 .attr("x", 0) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1219 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1220 .attr("dy", "1.4em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1221 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1222 .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
|
1223 .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
|
1224 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1225 .append("tspan") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1226 .attr("x", 0) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1227 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1228 .attr("dy", "2.6em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1229 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1230 .attr("text-anchor", "middle") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1231 .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
|
1232 .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
|
1233 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1234 .append("tspan") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1235 .attr("x", 0) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1236 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1237 .attr("dy", "3.8em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1238 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1239 .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
|
1240 .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
|
1241 } else { |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1242 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1243 .append("tspan") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1244 .attr("x", 0) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1245 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1246 .attr("dy", "1.4em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
1247 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1248 .attr("text-anchor", "middle") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1249 .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
|
1250 .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
|
1251 } |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1252 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1253 // get text dimensions |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1254 const textBBox = tooltipText.node().getBBox(); |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1255 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1256 this.diagram |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1257 .selectAll(".chart-tooltip text tspan") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1258 .attr("x", textBBox.width / 2 + tooltipPadding) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1259 .attr("y", tooltipPadding); |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1260 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1261 // position and scale tooltip box |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1262 const xMax = |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1263 this.dimensions.width - |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1264 (textBBox.width + diagramPadding + tooltipPadding * 2); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1265 const tooltipX = Math.max( |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1266 diagramPadding, |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1267 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
|
1268 ); |
2824
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1269 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
|
1270 if (coords.y < textBBox.height + tooltipPadding * 2) { |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1271 tooltipY = coords.y + 10; |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1272 } |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1273 |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1274 this.diagram |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1275 .select(".chart-tooltip") |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1276 .style("opacity", 1) |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1277 .attr("transform", `translate(${tooltipX}, ${tooltipY})`) |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1278 .select("rect") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1279 .attr("width", textBBox.width + tooltipPadding * 2) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1280 .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
|
1281 }); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1282 }, |
3252
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1283 isNext() { |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1284 // 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
|
1285 // 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
|
1286 // 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
|
1287 // 1 hour is also valid (for approved gauge measurements). |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1288 return (prev, current) => { |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1289 let difference = (current.date - prev.date) / 1000; |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1290 if ( |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1291 (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
|
1292 15 |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1293 ) |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1294 return [900, 3600].includes(difference); |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1295 return difference === 900; |
fccb28813159
client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents:
3249
diff
changeset
|
1296 }; |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1297 } |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1298 }, |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1299 created() { |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
1300 window.addEventListener("resize", debounce(this.drawDiagram), 100); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1301 }, |
2810
97cf32cf2562
client: waterlevel diagram: draw diagram when component is mounted
Markus Kottlaender <markus@intevation.de>
parents:
2805
diff
changeset
|
1302 mounted() { |
3303
d6405c6769a3
client: waterlevel diagram: wait for child component before rendering diagram
Markus Kottlaender <markus@intevation.de>
parents:
3295
diff
changeset
|
1303 // 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
|
1304 // 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
|
1305 // 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
|
1306 // 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
|
1307 // 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
|
1308 // 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
|
1309 // screen. |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
1310 setTimeout(this.drawDiagram, 50); |
3303
d6405c6769a3
client: waterlevel diagram: wait for child component before rendering diagram
Markus Kottlaender <markus@intevation.de>
parents:
3295
diff
changeset
|
1311 |
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
|
1312 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
|
1313 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
|
1314 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
|
1315 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
|
1316 headers: { |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
1317 "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
|
1318 "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
|
1319 } |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
1320 }) |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
1321 .then(response => { |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
1322 if (response.data.length) { |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
1323 this.templates = response.data; |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
1324 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
|
1325 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
|
1326 this.applyChange(); |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
1327 } |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
1328 }) |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
1329 .catch(e => { |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
1330 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
|
1331 displayError({ |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
1332 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
|
1333 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
|
1334 }); |
91556825d95c
client: implement geting templates from backend for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3139
diff
changeset
|
1335 }); |
2810
97cf32cf2562
client: waterlevel diagram: draw diagram when component is mounted
Markus Kottlaender <markus@intevation.de>
parents:
2805
diff
changeset
|
1336 }, |
2986
7ee9a3ef90d4
client: remove resize event listener from diagrams after they are closed
Markus Kottlaender <markus@intevation.de>
parents:
2843
diff
changeset
|
1337 destroyed() { |
3782
d36ccff8de5f
pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents:
3780
diff
changeset
|
1338 window.removeEventListener("resize", debounce(this.drawDiagram)); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1339 } |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1340 }; |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1341 </script> |