Mercurial > gemma
annotate client/src/components/gauge/Waterlevel.vue @ 3139:5daaabc2e7fc
client: remove console log
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Thu, 02 May 2019 11:35:23 +0200 |
parents | 35c0da49eb89 |
children | 91556825d95c |
rev | line source |
---|---|
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
2 <div class="d-flex flex-fill"> |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
3 <DiagramLegend> |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
4 <div class="legend"> |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
5 <span style="background-color: steelblue"></span> Waterlevel |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
6 </div> |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
7 <div class="legend"> |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
8 <span |
2843
451d73940c81
client: diagrams: more compact legend style, removed unnecessary legend items
Markus Kottlaender <markus@intevation.de>
parents:
2842
diff
changeset
|
9 style="width: 4px; height: 4px; background-color: rgba(70, 130, 180, 0.6); border: solid 4px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;" |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
10 ></span> |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
11 Prediction |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
12 </div> |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
13 <div class="legend"> |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
14 <span style="background-color: rgba(0, 255, 0, 0.1)"></span> Navigable |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
15 Range |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
16 </div> |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
17 <div> |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
18 <select |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
19 v-model="form.template" |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
20 class="form-control d-block custom-select-sm w-100" |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
21 > |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
22 <option |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
23 v-for="template in templates" |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
24 :value="template" |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
25 :key="template.name" |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
26 > |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
27 {{ template.name }} |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
28 </option> |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
29 </select> |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
30 <button |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
31 @click="downloadPDF" |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
32 type="button" |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
33 class="btn btn-sm btn-info d-block w-100 mt-2" |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
34 > |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
35 <translate>Export to PDF</translate> |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
36 </button> |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
37 </div> |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
38 </DiagramLegend> |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
39 <div |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
40 ref="diagramContainer" |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
41 class="d-flex flex-fill justify-content-center align-items-center diagram-container" |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
42 > |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
43 <div v-if="!waterlevels.length"> |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
44 <translate>No data available.</translate> |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
45 </div> |
2701
e622689d73bd
client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents:
2695
diff
changeset
|
46 </div> |
e622689d73bd
client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents:
2695
diff
changeset
|
47 </div> |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 </template> |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 <script> |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 /* 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
|
52 * without warranty, see README.md and license for details. |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 * |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 * SPDX-License-Identifier: AGPL-3.0-or-later |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 * License-Filename: LICENSES/AGPL-3.0.txt |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 * |
3112
e838609bc10d
client: fix license header for waterlevel.vue and hydrologicalconditions.vue
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3110
diff
changeset
|
57 * Copyright (C) 2019 by via donau |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 * – Österreichische Wasserstraßen-Gesellschaft mbH |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 * Software engineering by Intevation GmbH |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 * |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 * Author(s): |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 * Markus Kottländer <markus.kottlaender@intevation.de> |
3112
e838609bc10d
client: fix license header for waterlevel.vue and hydrologicalconditions.vue
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3110
diff
changeset
|
63 * Fadi Abbud <fadi.abbud@intevation.de> |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 */ |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 |
2604
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
66 import { mapState, mapGetters } from "vuex"; |
2684
c4da269238a4
client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents:
2653
diff
changeset
|
67 import * as d3Base from "d3"; |
c4da269238a4
client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents:
2653
diff
changeset
|
68 import { lineChunked } from "d3-line-chunked"; |
3050
c739b81b8f41
client: gauge waterlevel diagram: fixed date extent
Markus Kottlaender <markus@intevation.de>
parents:
3049
diff
changeset
|
69 import { endOfDay } from "date-fns"; |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 import debounce from "debounce"; |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
71 import jsPDF from "jspdf"; |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
72 import canvg from "canvg"; |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
73 import { pdfgen } from "@/lib/mixins"; |
2684
c4da269238a4
client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents:
2653
diff
changeset
|
74 // 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
|
75 // 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
|
76 // 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
|
77 const d3 = Object.assign(d3Base, { lineChunked }); |
c4da269238a4
client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents:
2653
diff
changeset
|
78 |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 export default { |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
80 mixins: [pdfgen], |
2839
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
81 components: { |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
82 DiagramLegend: () => import("@/components/DiagramLegend") |
162804509c3e
client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents:
2824
diff
changeset
|
83 }, |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
84 data() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
85 return { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
86 svg: null, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
87 diagram: null, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
88 navigation: null, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
89 dimensions: null, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
90 extent: null, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
91 scale: null, |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
92 axes: null, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
93 form: { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
94 template: null |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
95 }, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
96 templates: [ |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
97 { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
98 name: "Default", |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
99 properties: { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
100 format: "landscape", |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
101 paperSize: "a3", |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
102 resolution: "80" |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
103 }, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
104 elements: [ |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
105 { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
106 type: "diagramlegend", |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
107 position: "topleft", |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
108 offset: { x: 60, y: 190 }, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
109 color: "black" |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
110 }, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
111 { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
112 type: "diagramtitle", |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
113 position: "topleft", |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
114 offset: { x: 108, y: 30 }, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
115 fontsize: 22, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
116 color: "steelblue" |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
117 }, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
118 { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
119 type: "text", |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
120 position: "topleft", |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
121 offset: { x: 7, y: 5 }, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
122 fontsize: 14, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
123 width: 90, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
124 text: this.$gettext("Generated by") + " " + "{user}, {date}" |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
125 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
126 ] |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
127 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
128 ], |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
129 pdf: { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
130 doc: null, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
131 width: 420, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
132 height: 297 |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
133 }, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
134 templateData: null |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
135 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
136 }, |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
137 computed: { |
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
|
138 ...mapState("gauges", ["dateFrom", "waterlevels", "nashSutcliffe"]), |
3049
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
139 ...mapGetters("gauges", ["selectedGauge"]), |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
140 ...mapState("user", ["user"]), |
3049
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
141 dateFrom: { |
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
142 get() { |
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
143 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
|
144 } |
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
145 }, |
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
146 dateTo: { |
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
147 get() { |
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
148 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
|
149 } |
7e6ecb6d0796
client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3046
diff
changeset
|
150 } |
2596
8774054959a7
client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2590
diff
changeset
|
151 }, |
3068
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
152 watch: { |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
153 waterlevels() { |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
154 this.drawDiagram(); |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
155 } |
492c30ca3142
client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents:
3067
diff
changeset
|
156 }, |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
157 methods: { |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
158 downloadPDF() { |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
159 var svg = this.$refs.diagramContainer.innerHTML; |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
160 if (svg) { |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
161 svg = svg.replace(/\r?\n|\r/g, "").trim(); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
162 } |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
163 this.pdf.doc = new jsPDF("l", "mm", "a3"); |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
164 var canvas = document.createElement("canvas"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
165 canvas.width = window.innerWidth; |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
166 canvas.height = window.innerHeight / 2; |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
167 canvg(canvas, svg, { |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
168 ignoreMouse: true, |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
169 ignoreAnimation: true, |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
170 ignoreDimensions: true |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
171 }); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
172 var imgData = canvas.toDataURL("image/png"); |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
173 this.pdf.doc.addImage(imgData, "PNG", 40, 60, 380, 130); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
174 if (this.templateData) { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
175 let defaultFontSize = 11, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
176 defaultColor = "black", |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
177 defaultWidth = 70, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
178 defaultTextColor = "black", |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
179 defaultOffset = { x: 0, y: 0 }; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
180 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
|
181 switch (e.type) { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
182 case "diagramlegend": { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
183 this.addDiagramLegend( |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
184 e.position, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
185 e.offset || defaultOffset, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
186 e.color || defaultColor |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
187 ); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
188 break; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
189 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
190 case "diagramtitle": { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
191 this.addDiagramTitle(e.position, e.offset, e.fontsize, e.color); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
192 break; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
193 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
194 case "text": { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
195 this.addText( |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
196 e.position, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
197 e.offset || defaultOffset, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
198 e.width || defaultWidth, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
199 e.fontSize || defaultFontSize, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
200 e.color || defaultTextColor, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
201 e.text |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
202 ); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
203 break; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
204 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
205 case "image": { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
206 this.addImage( |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
207 e.url, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
208 e.format, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
209 e.position, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
210 e.offset || defaultOffset, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
211 e.width, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
212 e.height |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
213 ); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
214 break; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
215 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
216 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
217 }); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
218 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
219 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
|
220 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
|
221 ); |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
222 }, |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
223 // Gauge info as a title for pdf |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
224 addDiagramTitle(position, offset, size, color) { |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
225 let gaugeInfo = |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
226 this.selectedGauge.properties.objname + |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
227 " (" + |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
228 this.selectedGauge.id |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
229 .split(".")[1] |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
230 .replace(/[()]/g, "") |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
231 .split(",")[3] + |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
232 "):" + |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
233 " Waterlevel " + |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
234 this.dateFrom.toLocaleDateString() + |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
235 " - " + |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
236 this.dateTo.toLocaleDateString(); |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
237 let x = offset.x; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
238 let y = offset.y; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
239 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
|
240 this.pdf.doc.setFontSize(size); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
241 this.pdf.doc.setFontStyle("bold"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
242 let width = this.pdf.doc.getTextWidth(gaugeInfo) + size / 2; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
243 |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
244 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
|
245 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
|
246 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
247 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
248 y = this.pdf.height - offset.y - this.getTextHeight(1); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
249 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
250 this.pdf.doc.text(gaugeInfo, x, y, { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
251 baseline: "hanging" |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
252 }); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
253 }, |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
254 getTextHeight(numberOfLines) { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
255 return ( |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
256 numberOfLines * |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
257 ((this.pdf.doc.getFontSize() * 25.4) / 80) * |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
258 this.pdf.doc.getLineHeightFactor() |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
259 ); |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
260 }, |
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
261 // Diagram legend |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
262 addDiagramLegend(position, offset, color) { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
263 let x = offset.x; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
264 let y = offset.y; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
265 let width = this.pdf.doc.getTextWidth("Navigable Range") + 12; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
266 let height = 15; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
267 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
|
268 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
|
269 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
270 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
271 y = this.pdf.height - offset.y - height; |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
272 } |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
273 this.pdf.doc.setFontSize(10); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
274 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
|
275 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
|
276 this.pdf.doc.setFillColor("steelblue"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
277 this.pdf.doc.circle(x, y, 2, "FD"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
278 this.pdf.doc.text(x + 3, y + 1, "Waterlevel"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
279 this.pdf.doc.setFillColor("#dae6f0"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
280 this.pdf.doc.circle(x, y + 5, 2, "FD"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
281 this.pdf.doc.setFillColor("#e5ffe5"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
282 this.pdf.doc.circle(x, y + 10, 2, "FD"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
283 this.pdf.doc.text(x + 3, y + 11, "Navigable Range"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
284 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
|
285 this.pdf.doc.setFillColor("#90b4d2"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
286 this.pdf.doc.circle(x, y + 5, 0.6, "FD"); |
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
287 this.pdf.doc.text(x + 3, y + 6, "Prediction"); |
3129
136b86794453
client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3112
diff
changeset
|
288 }, |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
289 drawDiagram() { |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
290 // remove old diagram and exit if necessary data is missing |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
291 d3.select(".diagram-container svg").remove(); |
2701
e622689d73bd
client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents:
2695
diff
changeset
|
292 if (!this.selectedGauge || !this.waterlevels.length) return; |
e622689d73bd
client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents:
2695
diff
changeset
|
293 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
294 // PREPARE HELPERS |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
295 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
296 // 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
|
297 const refWaterLevels = JSON.parse( |
2604
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
298 this.selectedGauge.properties.reference_water_levels |
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
299 ); |
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
300 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
301 // dimensions (widths, heights, margins) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
302 this.dimensions = this.getDimensions(); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
303 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
304 // 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
|
305 this.extent = this.getExtent(refWaterLevels); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
306 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
307 // scaling helpers |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
308 this.scale = this.getScale(); |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
309 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
310 // 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
|
311 this.axes = { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
312 x: d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
313 .axisTop(this.scale.x) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
314 .tickSizeInner(this.dimensions.mainHeight) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
315 .tickSizeOuter(0), |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
316 y: d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
317 .axisRight(this.scale.y) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
318 .tickSizeInner(this.dimensions.width) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
319 .tickSizeOuter(0), |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
320 x2: d3.axisBottom(this.scale.x2) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
321 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
322 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
323 // DRAW DIAGRAM/NAVIGATION AREAS |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
324 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
325 // create svg |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
326 this.svg = d3 |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
327 .select(".diagram-container") |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
328 .append("svg") |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
329 .attr("width", "100%") |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
330 .attr("height", "100%"); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
331 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
332 // create container for main diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
333 this.diagram = this.svg |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
334 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
335 .attr("class", "main") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
336 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
337 "transform", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
338 `translate(${this.dimensions.mainMargin.left}, ${ |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
339 this.dimensions.mainMargin.top |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
340 })` |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
341 ); |
2756
ee2530ee1c0b
client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents:
2751
diff
changeset
|
342 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
343 // create container for navigation diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
344 this.navigation = this.svg |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
345 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
346 .attr("class", "nav") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
347 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
348 "transform", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
349 `translate(${this.dimensions.navMargin.left}, ${ |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
350 this.dimensions.navMargin.top |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
351 })` |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
352 ); |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
353 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
354 // 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
|
355 this.svg |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
356 .append("defs") |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
357 .append("clipPath") |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
358 .attr("id", "clip") |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
359 .append("rect") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
360 .attr("width", this.dimensions.width) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
361 .attr("height", this.dimensions.mainHeight); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
362 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
363 // DRAW DIAGRAM PARTS |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
364 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
365 // 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
|
366 // 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
|
367 // 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
|
368 const updaters = []; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
369 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
370 // draw |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
371 this.drawRefLines(refWaterLevels); // static, doesn't need an updater |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
372 updaters.push(this.drawAxes()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
373 updaters.push(this.drawWaterlevelCharts()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
374 updaters.push(this.drawNowLines()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
375 updaters.push(this.drawPredictionAreas()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
376 updaters.push(this.drawNashSutcliffe(24)); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
377 updaters.push(this.drawNashSutcliffe(48)); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
378 updaters.push(this.drawNashSutcliffe(72)); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
379 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
380 // INTERACTIONS |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
381 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
382 // 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
|
383 const eventRect = this.svg |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
384 .append("rect") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
385 .attr("class", "zoom") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
386 .attr("width", this.dimensions.width) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
387 .attr("height", this.dimensions.mainHeight) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
388 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
389 "transform", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
390 `translate(${this.dimensions.mainMargin.left}, ${ |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
391 this.dimensions.mainMargin.top |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
392 })` |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
393 ); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
394 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
395 this.createZoom(updaters, eventRect); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
396 this.createTooltips(eventRect); |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
397 this.setInlineStyles(); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
398 }, |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
399 //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
|
400 setInlineStyles() { |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
401 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
402 .selectAll(".line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
403 .attr("clip-path", "url(#clip)") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
404 .selectAll("path") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
405 .attr("stroke", "steelblue") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
406 .attr("stroke-width", 2) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
407 .attr("fill", "none"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
408 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
409 .selectAll(".line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
410 .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
|
411 .attr("stroke-opacity", 0); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
412 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
413 .selectAll(".line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
414 .selectAll("circle") |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
415 .attr("fill", "steelblue") |
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
416 .attr("stroke-width", 0); |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
417 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
418 .selectAll(".line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
419 .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
|
420 .attr("fill-opacity", 0.6); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
421 |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
422 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
423 .selectAll(".hdc-line, .mw-line, .ldc-line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
424 .attr("stroke-width", 1) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
425 .attr("fill", "none") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
426 .attr("clip-path", "url(#clip)"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
427 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
|
428 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
|
429 this.svg.selectAll(".mw-line").attr("stroke", "grey"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
430 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
431 .selectAll(".ref-waterlevel-label") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
432 .style("font-size", "11px") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
433 .attr("fill", "#999"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
434 this.svg.selectAll(".hdc-ldc-area").attr("fill", "rgba(0, 255, 0, 0.1)"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
435 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
436 .selectAll(".now-line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
437 .attr("stroke", "#999") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
438 .attr("stroke-width", 1) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
439 .attr("stroke-dasharray", "5, 5") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
440 .attr("clip-path", "url(#clip)"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
441 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
442 .selectAll(".now-line-label") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
443 .attr("font-size", "11px") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
444 .attr("fill", "#999"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
445 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
446 .selectAll(".prediction-area") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
447 .attr("fill", "steelblue") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
448 .attr("fill-opacity", 0.2) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
449 .attr("clip-path", "url(#clip)"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
450 this.svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
451 .selectAll("path.nash-sutcliffe") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
452 .attr("fill", "none") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
453 .attr("stroke", "black") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
454 .attr("stroke-width", 1) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
455 .attr("clip-path", "url(#clip)"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
456 this.svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
457 .selectAll("path.nash-sutcliffe.ns72") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
458 .attr("fill", "rgba(0, 0, 0, 0.05)"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
459 this.svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
460 .selectAll("text.nash-sutcliffe") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
461 .style("font-size", "10px") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
462 .attr("clip-path", "url(#clip)") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
463 .selectAll("tspan:last-child") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
464 .style("font-size", "9px") |
3132
f34277674926
client: fix style for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3129
diff
changeset
|
465 .attr("fill", "#777"); |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
466 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
467 .selectAll(".tick line") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
468 .attr("stroke-dasharray", 5) |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
469 .attr("stroke", "#ccc"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
470 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
|
471 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
|
472 this.svg |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
473 .selectAll(".zoom") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
474 .attr("cursor", "move") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
475 .attr("fill", "none") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
476 .attr("pointer-events", "all"); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
477 this.svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
478 .selectAll(".brush .selection") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
479 .attr("stroke", "none") |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
480 .attr("fill-opacity", 0.2); |
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
481 this.svg |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
482 .selectAll(".brush .handle") |
3015
fe88a9b151ca
client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
2986
diff
changeset
|
483 .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
|
484 .attr("fill", "rgba(23, 162, 184, 0.5)"); |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
485 this.svg.selectAll(".chart-dots").attr("clip-path", "url(#clip)"); |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
486 this.svg |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
487 .selectAll(".chart-dots .chart-dot") |
3107
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
488 .attr("fill", "steelblue") |
8e364945a390
client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3068
diff
changeset
|
489 .attr("stroke", "steelblue") |
3045
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
490 .attr("stroke-opacity", 0) |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
491 .style("pointer-events", "none") |
3046
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
492 .transition() |
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
493 .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
|
494 this.svg |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
495 .selectAll(".chart-tooltip") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
496 .attr("fill-opacity", 0) |
3046
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
497 .transition() |
c764c73f44b4
client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3045
diff
changeset
|
498 .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
|
499 this.svg |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
500 .selectAll(".chart-tooltip rect") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
501 .attr("fill", "#fff") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
502 .attr("stroke", "#ccc"); |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
503 this.svg |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
504 .selectAll(".chart-tooltip text") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
505 .attr("fill", "666") |
44dc837638d9
client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3032
diff
changeset
|
506 .style("font-size", "0.8em"); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
507 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
508 getDimensions() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
509 // dimensions and margins |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
510 const svgWidth = document.querySelector(".diagram-container").clientWidth; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
511 const svgHeight = document.querySelector(".diagram-container") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
512 .clientHeight; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
513 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
|
514 const navMargin = { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
515 top: svgHeight - mainMargin.top - 65, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
516 right: 20, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
517 bottom: 30, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
518 left: 80 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
519 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
520 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
|
521 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
|
522 const navHeight = +svgHeight - navMargin.top - navMargin.bottom; |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
523 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
524 return { width, mainHeight, navHeight, mainMargin, navMargin }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
525 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
526 getExtent(refWaterLevels) { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
527 return { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
528 // 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
|
529 date: [ |
3050
c739b81b8f41
client: gauge waterlevel diagram: fixed date extent
Markus Kottlaender <markus@intevation.de>
parents:
3049
diff
changeset
|
530 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
|
531 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
|
532 ], |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
533 // 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
|
534 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
535 waterlevel: d3.extent( |
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 ...this.waterlevels, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
538 { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
539 waterlevel: |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
540 refWaterLevels.HDC + |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
541 (refWaterLevels.HDC - refWaterLevels.LDC) / 8 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
542 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
543 { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
544 waterlevel: Math.max( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
545 refWaterLevels.LDC - |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
546 (refWaterLevels.HDC - refWaterLevels.LDC) / 4, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
547 0 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
548 ) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
549 } |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
550 ], |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
551 d => d.waterlevel |
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 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
554 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
555 getScale() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
556 // 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
|
557 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
|
558 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
|
559 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
|
560 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
|
561 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
562 // 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
|
563 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
|
564 y.domain(this.extent.waterlevel); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
565 x2.domain(x.domain()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
566 y2.domain(y.domain()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
567 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
568 return { x, y, x2, y2 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
569 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
570 drawAxes() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
571 this.diagram |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
572 .append("g") |
2652
a2dd96c305be
client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents:
2648
diff
changeset
|
573 .attr("class", "axis--x") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
574 .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
|
575 .call(this.axes.x) |
2648
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
576 .selectAll(".tick text") |
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
577 .attr("y", 15); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
578 this.diagram // label |
2641
a735119e4f5c
client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents:
2611
diff
changeset
|
579 .append("text") |
2642
ffef5f89b31c
client: waterlevel diagram: changed diagram title and y-axis label
Markus Kottlaender <markus@intevation.de>
parents:
2641
diff
changeset
|
580 .text(this.$gettext("Waterlevel [cm]")) |
2641
a735119e4f5c
client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents:
2611
diff
changeset
|
581 .attr("text-anchor", "middle") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
582 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
583 "transform", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
584 `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
|
585 ); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
586 this.diagram |
2648
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
587 .append("g") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
588 .call(this.axes.y) |
2648
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
589 .selectAll(".tick text") |
4ffae834276e
client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents:
2646
diff
changeset
|
590 .attr("x", -25); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
591 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
592 this.navigation |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
593 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
594 .attr("class", "axis axis--x") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
595 .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
|
596 .call(this.axes.x2); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
597 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
598 return () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
599 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
600 .select(".axis--x") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
601 .call(this.axes.x) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
602 .selectAll(".tick text") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
603 .attr("y", 15); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
604 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
605 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
606 drawWaterlevelCharts() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
607 const waterlevelChartDrawer = isNav => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
608 return d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
609 .lineChunked() |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
610 .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
|
611 .y(d => this.scale[isNav ? "y2" : "y"](d.waterlevel)) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
612 .curve(d3.curveLinear) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
613 .isNext(this.isNext(900)) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
614 .pointAttrs({ r: isNav ? 1.7 : 2.2 }) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
615 .chunk(d => (d.predicted ? "predicted" : "line")) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
616 .chunkDefinitions({ predicted: {} }); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
617 }; |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
618 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
619 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
620 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
621 .attr("class", "line") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
622 .datum(this.waterlevels) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
623 .call(waterlevelChartDrawer()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
624 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
625 this.navigation |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
626 .append("g") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
627 .attr("class", "line") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
628 .datum(this.waterlevels) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
629 .call(waterlevelChartDrawer(true)); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
630 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
631 return () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
632 this.diagram.select(".line").call(waterlevelChartDrawer()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
633 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
634 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
635 drawNowLines() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
636 const nowLine = d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
637 .line() |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
638 .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
|
639 .y(d => this.scale.y(d.y)); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
640 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
641 const nowLabel = selection => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
642 selection.attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
643 "transform", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
644 `translate(${this.scale.x(new Date())}, ${this.scale.y( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
645 this.extent.waterlevel[1] - 16 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
646 )})` |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
647 ); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
648 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
649 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
650 // draw in main |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
651 this.diagram |
2604
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
652 .append("path") |
85f9bf4a6eba
client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents:
2596
diff
changeset
|
653 .datum([ |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
654 { x: new Date(), y: this.extent.waterlevel[0] }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
655 { x: new Date(), y: this.extent.waterlevel[1] - 20 } |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
656 ]) |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
657 .attr("class", "now-line") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
658 .attr("d", nowLine); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
659 this.diagram // label |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
660 .append("text") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
661 .text(this.$gettext("Now")) |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
662 .attr("class", "now-line-label") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
663 .attr("text-anchor", "middle") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
664 .call(nowLabel); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
665 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
666 // draw in nav |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
667 this.navigation |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
668 .append("path") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
669 .datum([ |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
670 { x: new Date(), y: this.extent.waterlevel[0] }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
671 { x: new Date(), y: this.extent.waterlevel[1] - 20 } |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
672 ]) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
673 .attr("class", "now-line") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
674 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
675 "d", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
676 d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
677 .line() |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
678 .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
|
679 .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
|
680 ); |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
681 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
682 return () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
683 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
|
684 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
|
685 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
686 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
687 drawPredictionAreas() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
688 const predictionArea = isNav => |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
689 d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
690 .area() |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
691 .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
|
692 .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
|
693 .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
|
694 .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
|
695 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
696 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
697 .append("path") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
698 .datum(this.waterlevels) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
699 .attr("class", "prediction-area") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
700 .attr("d", predictionArea()); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
701 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
702 this.navigation |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
703 .append("path") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
704 .datum(this.waterlevels) |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
705 .attr("class", "prediction-area") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
706 .attr("d", predictionArea(true)); |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
707 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
708 return () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
709 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
|
710 }; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
711 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
712 drawRefLines(refWaterLevels) { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
713 // filling area between HDC and LDC |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
714 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
715 .append("rect") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
716 .attr("class", "hdc-ldc-area") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
717 .attr("x", 0) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
718 .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
|
719 .attr("width", this.dimensions.width) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
720 .attr( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
721 "height", |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
722 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
|
723 ); |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
724 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
725 const refWaterlevelLine = d3 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
726 .line() |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
727 .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
|
728 .y(d => this.scale.y(d.y)); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
729 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
730 // HDC |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
731 this.diagram |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
732 .append("path") |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
733 .datum([ |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
734 { x: 0, y: refWaterLevels.HDC }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
735 { x: this.extent.date[1], y: refWaterLevels.HDC } |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
736 ]) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
737 .attr("class", "hdc-line") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
738 .attr("d", refWaterlevelLine); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
739 this.diagram // label |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
740 .append("text") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
741 .text(`HDC (${refWaterLevels.HDC})`) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
742 .attr("class", "ref-waterlevel-label") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
743 .attr("x", 5) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
744 .attr("y", this.scale.y(refWaterLevels.HDC) - 3); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
745 // LDC |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
746 this.diagram |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
747 .append("path") |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
748 .datum([ |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
749 { x: 0, y: refWaterLevels.LDC }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
750 { x: this.extent.date[1], y: refWaterLevels.LDC } |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
751 ]) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
752 .attr("class", "ldc-line") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
753 .attr("d", refWaterlevelLine); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
754 this.diagram // label |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
755 .append("text") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
756 .text(`LDC (${refWaterLevels.LDC})`) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
757 .attr("class", "ref-waterlevel-label") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
758 .attr("x", 5) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
759 .attr("y", this.scale.y(refWaterLevels.LDC) - 3); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
760 // MW |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
761 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
762 .append("path") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
763 .datum([ |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
764 { x: 0, y: refWaterLevels.MW }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
765 { x: this.extent.date[1], y: refWaterLevels.MW } |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
766 ]) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
767 .attr("class", "mw-line") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
768 .attr("d", refWaterlevelLine); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
769 this.diagram // label |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
770 .append("text") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
771 .text(`MW (${refWaterLevels.MW})`) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
772 .attr("class", "ref-waterlevel-label") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
773 .attr("x", 5) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
774 .attr("y", this.scale.y(refWaterLevels.MW) - 3); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
775 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
776 drawNashSutcliffe(hours) { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
777 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
|
778 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
|
779 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
|
780 |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
781 const nashSutcliffeBox = hours => { |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
782 return d3 |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
783 .area() |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
784 .x(d => this.scale.x(d)) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
785 .y0(() => this.dimensions.mainHeight + 0.5) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
786 .y1(() => this.dimensions.mainHeight - 15 * (hours / 24)); |
2751
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
787 }; |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
788 |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
789 const nashSutcliffeLabel = (label, date, hours) => { |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
790 let days = hours / 24; |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
791 label |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
792 .attr("x", this.scale.x(date) + 3) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
793 .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
|
794 }; |
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
795 |
2775
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
796 // Show nash-sutcliffe only when x-axis extent is smaller than 35 days |
2feb9f8f6c66
client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
797 // (3024000000 ms). Since it shows squares representing 1, 2 and 3 days |
2751
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
798 // it does not make sense to show them on a x-axis with hundres of days. |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
799 if ( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
800 coeff.samples && |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
801 this.scale.x.domain()[1] - this.scale.x.domain()[0] < 3024000000 |
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 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
804 .append("path") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
805 .datum([dateStart, dateNow]) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
806 .attr("class", "nash-sutcliffe ns" + hours) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
807 .attr("d", nashSutcliffeBox(hours)); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
808 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
809 .append("text") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
810 .attr("class", "nash-sutcliffe ns" + hours) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
811 .call(nashSutcliffeLabel, dateStart, hours) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
812 .append("tspan") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
813 .text(coeff.value.toFixed(2)) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
814 .select(function() { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
815 return this.parentNode; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
816 }) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
817 .append("tspan") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
818 .text(` (${coeff.samples})`) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
819 .attr("dy", -1); |
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 return () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
822 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
823 .select("path.nash-sutcliffe.ns" + hours) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
824 .attr("d", nashSutcliffeBox(hours)); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
825 this.diagram |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
826 .select("text.nash-sutcliffe.ns" + hours) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
827 .call(nashSutcliffeLabel, dateStart, hours); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
828 }; |
2751
5da81634bdc4
client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents:
2728
diff
changeset
|
829 } |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
830 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
831 createZoom(updaters, eventRect) { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
832 const brush = d3 |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
833 .brushX() |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
834 .handleSize(4) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
835 .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
|
836 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
837 const zoom = d3 |
2610
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
838 .zoom() |
5ce1b4b29869
client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2607
diff
changeset
|
839 .scaleExtent([1, Infinity]) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
840 .translateExtent([ |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
841 [0, 0], |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
842 [this.dimensions.width, this.dimensions.mainHeight] |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
843 ]) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
844 .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
|
845 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
846 brush.on("brush end", () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
847 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
|
848 return; // ignore brush-by-zoom |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
849 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
|
850 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
|
851 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
|
852 this.setInlineStyles(); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
853 this.svg |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
854 .select(".zoom") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
855 .call( |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
856 zoom.transform, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
857 d3.zoomIdentity |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
858 .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
|
859 .translate(-s[0], 0) |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
860 ); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
861 }); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
862 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
863 zoom.on("zoom", () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
864 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
|
865 return; // ignore zoom-by-brush |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
866 let t = d3.event.transform; |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
867 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
|
868 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
|
869 this.setInlineStyles(); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
870 this.navigation |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
871 .select(".brush") |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
872 .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
|
873 }); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
874 zoom.on("start", () => { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
875 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
|
876 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
|
877 }); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
878 |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
879 this.navigation |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
880 .append("g") |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
881 .attr("class", "brush") |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
882 .call(brush) |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
883 .call(brush.move, this.scale.x.range()); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
884 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
885 eventRect.call(zoom); |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
886 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
887 createTooltips(eventRect) { |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
888 // create clippable container for the dot |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
889 this.diagram |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
890 .append("g") |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
891 .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
|
892 .append("circle") |
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
893 .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
|
894 .attr("r", 4); |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
895 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
896 // create container for the tooltip |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
897 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
|
898 tooltip |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
899 .append("rect") |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
900 .attr("rx", "0.25em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
901 .attr("ry", "0.25em"); |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
902 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
903 // create container for multiple text rows |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
904 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
|
905 |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
906 // 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
|
907 // 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
|
908 const tooltipPadding = 10; |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
909 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
|
910 |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
911 eventRect |
2689
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
912 .on("mouseover", () => { |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
913 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
|
914 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
|
915 }) |
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
916 .on("mouseout", () => { |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
917 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
|
918 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
|
919 }) |
8f919fe629f9
client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents:
2684
diff
changeset
|
920 .on("mousemove", () => { |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
921 // find data point closest to mouse |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
922 const x0 = this.scale.x.invert( |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
923 d3.mouse(document.querySelector(".zoom"))[0] |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
924 ), |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
925 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
|
926 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
|
927 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
|
928 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
|
929 |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
930 const coords = { |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
931 x: this.scale.x(d.date), |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
932 y: this.scale.y(d.waterlevel) |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
933 }; |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
934 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
935 // position the dot |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
936 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
|
937 .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
|
938 .style("opacity", 1) |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
939 .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
|
940 |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
941 // remove current texts |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
942 tooltipText.selectAll("tspan").remove(); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
943 |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
944 // write date |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
945 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
946 .append("tspan") |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
947 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
948 .attr("text-anchor", "middle") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
949 .text( |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
950 d.date.toLocaleString([], { |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
951 year: "2-digit", |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
952 month: "2-digit", |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
953 day: "2-digit", |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
954 hour: "2-digit", |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
955 minute: "2-digit" |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
956 }) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
957 ); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
958 |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
959 if (d.predicted) { |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
960 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
961 .append("tspan") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
962 .attr("x", 0) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
963 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
964 .attr("dy", "1.4em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
965 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
966 .attr("text-anchor", "middle") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
967 .text(d.max + " cm"); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
968 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
969 .append("tspan") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
970 .attr("x", 0) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
971 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
972 .attr("dy", "2.6em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
973 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
974 .attr("text-anchor", "middle") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
975 .attr("class", "font-weight-bold") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
976 .text(d.waterlevel + " cm"); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
977 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
978 .append("tspan") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
979 .attr("x", 0) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
980 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
981 .attr("dy", "3.8em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
982 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
983 .attr("text-anchor", "middle") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
984 .text(d.min + " cm"); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
985 } else { |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
986 tooltipText |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
987 .append("tspan") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
988 .attr("x", 0) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
989 .attr("y", 0) |
2842
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
990 .attr("dy", "1.4em") |
37c2a73ed001
client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents:
2839
diff
changeset
|
991 .attr("dominant-baseline", "hanging") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
992 .attr("text-anchor", "middle") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
993 .attr("class", "font-weight-bold") |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
994 .text(d.waterlevel + " cm"); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
995 } |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
996 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
997 // get text dimensions |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
998 const textBBox = tooltipText.node().getBBox(); |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
999 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1000 this.diagram |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1001 .selectAll(".chart-tooltip text tspan") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1002 .attr("x", textBBox.width / 2 + tooltipPadding) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1003 .attr("y", tooltipPadding); |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1004 |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1005 // position and scale tooltip box |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1006 const xMax = |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1007 this.dimensions.width - |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1008 (textBBox.width + diagramPadding + tooltipPadding * 2); |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1009 const tooltipX = Math.max( |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1010 diagramPadding, |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1011 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
|
1012 ); |
2824
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1013 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
|
1014 if (coords.y < textBBox.height + tooltipPadding * 2) { |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1015 tooltipY = coords.y + 10; |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1016 } |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2821
diff
changeset
|
1017 |
2816
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1018 this.diagram |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1019 .select(".chart-tooltip") |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1020 .style("opacity", 1) |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1021 .attr("transform", `translate(${tooltipX}, ${tooltipY})`) |
c02cebff3f16
client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents:
2810
diff
changeset
|
1022 .select("rect") |
2819
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1023 .attr("width", textBBox.width + tooltipPadding * 2) |
53c2bd009c68
client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents:
2816
diff
changeset
|
1024 .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
|
1025 }); |
2805
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1026 }, |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1027 isNext(seconds) { |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1028 // helper to check whether points in the chart are "next to each other" |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1029 // for that they need to be exactly the specified amount of seconds apart. |
eb91ad1d7a93
client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents:
2794
diff
changeset
|
1030 return (prev, current) => current.date - prev.date === seconds * 1000; |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1031 } |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1032 }, |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1033 created() { |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1034 window.addEventListener("resize", debounce(this.drawDiagram), 100); |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1035 }, |
2810
97cf32cf2562
client: waterlevel diagram: draw diagram when component is mounted
Markus Kottlaender <markus@intevation.de>
parents:
2805
diff
changeset
|
1036 mounted() { |
97cf32cf2562
client: waterlevel diagram: draw diagram when component is mounted
Markus Kottlaender <markus@intevation.de>
parents:
2805
diff
changeset
|
1037 this.drawDiagram(); |
3137
35c0da49eb89
client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3132
diff
changeset
|
1038 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
|
1039 this.templateData = this.form.template; |
2810
97cf32cf2562
client: waterlevel diagram: draw diagram when component is mounted
Markus Kottlaender <markus@intevation.de>
parents:
2805
diff
changeset
|
1040 }, |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1041 updated() { |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1042 this.drawDiagram(); |
2986
7ee9a3ef90d4
client: remove resize event listener from diagrams after they are closed
Markus Kottlaender <markus@intevation.de>
parents:
2843
diff
changeset
|
1043 }, |
7ee9a3ef90d4
client: remove resize event listener from diagrams after they are closed
Markus Kottlaender <markus@intevation.de>
parents:
2843
diff
changeset
|
1044 destroyed() { |
3067
0ffa9d418959
client: remove window resize listeners when closing diagram
Markus Kottlaender <markus@intevation.de>
parents:
3056
diff
changeset
|
1045 window.removeEventListener("resize", debounce(this.drawDiagram)); |
2590
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1046 } |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1047 }; |
1686ec185155
client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1048 </script> |