Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 3148:cdfb0093b7b1

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