Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 4473:3543af71d04c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: pdf-gen: improve file naming for the exported pdf
author Fadi Abbud <fadi.abbud@intevation.de>
date Tue, 24 Sep 2019 16:39:06 +0200
parents 2793893bc7f5
children 3632cfc44b69
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">
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
3 <UIBoxHeader
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
4 icon="ruler-vertical"
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
5 :title="title"
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
6 :closeCallback="close"
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
7 class="rounded-0"
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
8 />
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
9 <div class="d-flex flex-fill">
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
10 <DiagramLegend id="diagramlegendId">
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
11 <div class="legend">
3323
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
12 <span
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
13 style="background-color: steelblue; width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
14 ></span>
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
15 Waterlevel
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
16 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
17 <div class="legend">
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
18 <span
3323
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
19 style="width: 8px; height: 8px; background-color: rgba(70, 130, 180, 0.6); border: solid 7px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;"
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
20 ></span>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
21 Prediction
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
22 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
23 <div class="legend">
3323
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
24 <span
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
25 style="background-color: rgba(0, 255, 0, 0.1); width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
26 ></span>
de0d0685a17b client: improve diagram-legends style
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3304
diff changeset
27 Navigable Range
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
28 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
29 <div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
30 <select
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
31 @change="applyChange"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
32 v-model="form.template"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
33 class="form-control d-block custom-select-sm w-100"
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
34 >
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
35 <option
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
36 v-for="template in templates"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
37 :value="template"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
38 :key="template.name"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
39 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
40 {{ template.name }}
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
41 </option>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
42 </select>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
43 <button
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
44 @click="downloadPDF"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
45 type="button"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
46 class="btn btn-sm btn-info d-block w-100 mt-2"
3404
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents: 3403
diff changeset
47 :disabled="!waterlevels.length"
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
48 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
49 <translate>Export to PDF</translate>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
50 </button>
3403
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
51 <a
3404
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents: 3403
diff changeset
52 :class="[
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents: 3403
diff changeset
53 'btn btn-sm btn-info d-block w-100 mt-2',
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents: 3403
diff changeset
54 { disabled: !waterlevels.length }
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available
Markus Kottlaender <markus@intevation.de>
parents: 3403
diff changeset
55 ]"
3403
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
56 :href="csvLink"
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
57 :download="csvFileName"
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
58 >
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
59 <translate>Export as CSV</translate>
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
60 </a>
3565
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
61
3793
d428f283fe10 client: remove `export SVG` button for waterlevel
Bernhard Reiter <bernhard@intevation.de>
parents: 3787
diff changeset
62 <!--
3565
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
63 <button
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
64 @click="downloadSVG"
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
65 type="button"
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
66 class="btn btn-sm btn-info d-block w-100 mt-2"
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
67 :disabled="!waterlevels.length"
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
68 >
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
69 <translate>Export as SVG</translate>
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
70 </button>
3793
d428f283fe10 client: remove `export SVG` button for waterlevel
Bernhard Reiter <bernhard@intevation.de>
parents: 3787
diff changeset
71 -->
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
72 </div>
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
73 <div class="btn-group-toggle w-100 mt-2">
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
74 <label
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
75 class="btn btn-outline-secondary btn-sm"
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
76 :class="{ active: showNSC }"
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
77 ><input
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
78 type="checkbox"
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
79 v-model="showNSC"
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
80 autocomplete="off"
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
81 />Nash-Sutcliffe
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
82 </label>
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
83 </div>
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
84 </DiagramLegend>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
85 <div
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
86 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
87 :id="containerId"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
88 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
89 <div v-if="!waterlevels.length">
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
90 <translate>No data available.</translate>
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
91 </div>
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
92 </div>
2701
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
93 </div>
e622689d73bd client: waterlevel diagram: use endpoint
Markus Kottlaender <markus@intevation.de>
parents: 2695
diff changeset
94 </div>
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 </template>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 <script>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 /* 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
99 * without warranty, see README.md and license for details.
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 * SPDX-License-Identifier: AGPL-3.0-or-later
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 * License-Filename: LICENSES/AGPL-3.0.txt
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 *
3112
e838609bc10d client: fix license header for waterlevel.vue and hydrologicalconditions.vue
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3110
diff changeset
104 * Copyright (C) 2019 by via donau
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 * – Österreichische Wasserstraßen-Gesellschaft mbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 * Software engineering by Intevation GmbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 * Author(s):
3564
f50bde7eed0d client: improve copyright header for gauge/Waterlevel.vue
Bernhard Reiter <bernhard@intevation.de>
parents: 3563
diff changeset
109 * * Bernhard Reiter <bernhard@intevation.de>
f50bde7eed0d client: improve copyright header for gauge/Waterlevel.vue
Bernhard Reiter <bernhard@intevation.de>
parents: 3563
diff changeset
110 * * Markus Kottländer <markus.kottlaender@intevation.de>
f50bde7eed0d client: improve copyright header for gauge/Waterlevel.vue
Bernhard Reiter <bernhard@intevation.de>
parents: 3563
diff changeset
111 * * Fadi Abbud <fadi.abbud@intevation.de>
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112 */
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
113
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
114 import { mapState, mapGetters } from "vuex";
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
115 import * as d3Base from "d3";
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
116 import { lineChunked } from "d3-line-chunked";
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
117 import debounce from "debounce";
3565
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
118 import { saveAs } from "file-saver";
4153
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
119 import { diagram, pdfgen, templateLoader, refwaterlevels } from "@/lib/mixins";
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
120 import { HTTP } from "@/lib/http";
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
121 import { displayError } from "@/lib/errors";
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
122 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
4473
3543af71d04c client: pdf-gen: improve file naming for the exported pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4462
diff changeset
123 import sanitize from "sanitize-filename";
2684
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
124 // 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
125 // 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
126 // 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
127 const d3 = Object.assign(d3Base, { lineChunked });
c4da269238a4 client: waterlevel diagram: visualize data gaps
Markus Kottlaender <markus@intevation.de>
parents: 2653
diff changeset
128
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
129 let temp = null;
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
130
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
131 export default {
4153
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
132 mixins: [diagram, pdfgen, templateLoader, refwaterlevels],
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
133 components: {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
134 DiagramLegend: () => import("@/components/DiagramLegend")
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
135 },
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
136 data() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
137 return {
4384
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
138 dateFromD: null,
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
139 dateToD: null,
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
140 selectedGaugeD: null,
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
141 containerId: "waterlevel-diagram-container",
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
142 resizeListenerFunction: null,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
143 form: {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
144 template: null
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
145 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
146 templates: [],
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
147 defaultTemplate: defaultDiagramTemplate,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
148 pdf: {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
149 doc: null,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
150 width: 420,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
151 height: 297
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
152 },
4225
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
153 templateData: null,
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
154 zoomStore: null,
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
155 showNSC: true
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
156 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
157 },
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
158 computed: {
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
159 ...mapState("application", ["paneSetup"]),
3403
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
160 ...mapState("gauges", [
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
161 "dateFrom",
4384
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
162 "dateTo",
3403
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
163 "waterlevels",
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
164 "waterlevelsCSV",
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
165 "nashSutcliffe"
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
166 ]),
3049
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
167 ...mapGetters("gauges", ["selectedGauge"]),
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
168 title() {
4384
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
169 if (!this.selectedGaugeD) return;
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
170 return `${this.selectedGaugeD.properties.objname}: ${this.$gettext(
3148
cdfb0093b7b1 client: gauge diagrams: added information to titles
Markus Kottlaender <markus@intevation.de>
parents: 3147
diff changeset
171 "Waterlevel"
4384
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
172 )} (${this.dateFromD.toLocaleDateString()} - ${this.dateToD.toLocaleDateString()})`;
3403
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
173 },
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
174 csvLink() {
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
175 return (
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
176 "data:text/csv;charset=utf-8," + encodeURIComponent(this.waterlevelsCSV)
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
177 );
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
178 },
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
179 csvFileName() {
4423
f42c6efd76fe Waterlevel: only generate csvFilename when dates are present
Thomas Junk <thomas.junk@intevation.de>
parents: 4384
diff changeset
180 if (!this.dateFromD || !this.dateToD) return "";
3403
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
181 return `${this.$gettext("waterlevels")}-${
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
182 this.selectedGauge.properties.objname
4384
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
183 }-${this.dateFromD.toISOString().split("T")[0]}-${
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
184 this.dateToD.toISOString().split("T")[0]
3403
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export
Markus Kottlaender <markus@intevation.de>
parents: 3350
diff changeset
185 }.csv`;
3618
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3576
diff changeset
186 },
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3576
diff changeset
187 hasPredictions() {
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3576
diff changeset
188 return this.waterlevels.find(d => d.predicted);
3049
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
189 }
2596
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
190 },
3068
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents: 3067
diff changeset
191 watch: {
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
192 showNSC() {
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
193 this.drawDiagram({ ...this.zoomStore });
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
194 },
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
195 paneSetup() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
196 this.$nextTick(() => this.drawDiagram());
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
197 },
3068
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents: 3067
diff changeset
198 waterlevels() {
4384
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
199 this.initialDiagramValues();
3068
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents: 3067
diff changeset
200 this.drawDiagram();
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents: 3067
diff changeset
201 }
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes
Markus Kottlaender <markus@intevation.de>
parents: 3067
diff changeset
202 },
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
203 methods: {
4384
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
204 initialDiagramValues() {
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
205 this.dateFromD = this.dateFrom;
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
206 this.dateToD = this.dateTo;
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
207 this.selectedGaugeD = this.selectedGauge;
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
208 },
3146
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
209 close() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
210 this.$store.commit(
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
211 "application/paneSetup",
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
212 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
213 ? "GAUGE_HYDROLOGICALCONDITIONS"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
214 : "DEFAULT"
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
215 );
b6cc4838d2c0 client: implemented pane mechanic for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 3143
diff changeset
216 },
3565
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
217 downloadSVG() {
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
218 let svg = document.getElementById(this.containerId).firstElementChild;
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
219 let svgXML = new XMLSerializer().serializeToString(svg);
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
220 let blog = new Blob([svgXML], { type: "image/svg+xml;charset=utf-8" });
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
221 let filename =
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
222 this.selectedGauge.properties.objname + "-waterlevel-diagram.svg";
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
223 saveAs(blog, filename);
f6d67697f158 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3564
diff changeset
224 },
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
225 downloadPDF() {
4456
acb21e7362ce client: pdf-gen: fix diagram title for pdf (waterlevels, hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4423
diff changeset
226 let diagramTitle = `${this.selectedGaugeD.properties.objname} (${
acb21e7362ce client: pdf-gen: fix diagram title for pdf (waterlevels, hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4423
diff changeset
227 this.isrsInfo(this.selectedGaugeD).orc
acb21e7362ce client: pdf-gen: fix diagram title for pdf (waterlevels, hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4423
diff changeset
228 }): Waterlevel ${this.dateFromD.toLocaleDateString()} - ${this.dateToD.toLocaleDateString()}`;
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
229 this.generatePDF({
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
230 templateData: this.templateData,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
231 diagramTitle: diagramTitle
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
232 });
4473
3543af71d04c client: pdf-gen: improve file naming for the exported pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4462
diff changeset
233 const filename = `Waterlevel-${sanitize(
3543af71d04c client: pdf-gen: improve file naming for the exported pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4462
diff changeset
234 this.selectedGauge.properties.objname
3543af71d04c client: pdf-gen: improve file naming for the exported pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4462
diff changeset
235 )}-${this.dateForPDF()}.pdf`;
3543af71d04c client: pdf-gen: improve file naming for the exported pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4462
diff changeset
236 this.pdf.doc.save(filename);
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
237 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
238 applyChange() {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
239 if (this.form.template.hasOwnProperty("properties")) {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
240 this.templateData = this.defaultTemplate;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
241 return;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
242 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
243 if (this.form.template) {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
244 this.loadTemplates("/templates/diagram/" + this.form.template.name)
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
245 .then(response => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
246 this.prepareImages(response.data.template_data.elements).then(
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
247 values => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
248 values.forEach(v => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
249 response.data.template_data.elements[v.index].url = v.url;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
250 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
251 this.templateData = response.data.template_data;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
252 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
253 );
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
254 })
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
255 .catch(e => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
256 const { status, data } = e.response;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
257 displayError({
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
258 title: this.$gettext("Backend Error"),
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
259 message: `${status}: ${data.message || data}`
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
260 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
261 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
262 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
263 },
3129
136b86794453 client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3112
diff changeset
264 // Diagram legend
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
265 addDiagramLegend(position, offset, color) {
4109
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4061
diff changeset
266 let x = offset.x + 2, // 2 is the radius of the circle
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4061
diff changeset
267 y = offset.y,
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4061
diff changeset
268 padding = 3;
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4061
diff changeset
269 this.pdf.doc.setFontStyle("normal");
3343
13bb0ff62ac8 client: diagram-template: cleanup (waterlevel)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3323
diff changeset
270 this.pdf.doc.setFontSize(10);
4109
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4061
diff changeset
271 let width = this.pdf.doc.getTextWidth("Navigable Range") + padding;
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
272 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
273 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
274 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
275 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
4109
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4061
diff changeset
276 y = this.pdf.height - offset.y - this.getTextHeight(3);
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4061
diff changeset
277 }
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4061
diff changeset
278 if (y < this.getTextHeight(1)) {
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4061
diff changeset
279 y = y + this.getTextHeight(1) / 2;
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
280 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
281 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
282 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
283 this.pdf.doc.setFillColor("steelblue");
3853
abc15a3182c7 client: pdf-gen: adjust diagramlegend size (waterlevel diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3820
diff changeset
284 this.pdf.doc.circle(x, y, 2, "FD");
4109
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4061
diff changeset
285 this.pdf.doc.text(x + padding, y + 1, "Waterlevel");
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
286 this.pdf.doc.setFillColor("#dae6f0");
3853
abc15a3182c7 client: pdf-gen: adjust diagramlegend size (waterlevel diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3820
diff changeset
287 this.pdf.doc.circle(x, y + 5, 2, "FD");
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
288 this.pdf.doc.setFillColor("#e5ffe5");
3853
abc15a3182c7 client: pdf-gen: adjust diagramlegend size (waterlevel diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3820
diff changeset
289 this.pdf.doc.circle(x, y + 10, 2, "FD");
4109
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4061
diff changeset
290 this.pdf.doc.text(x + padding, y + 11, "Navigable Range");
3137
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3132
diff changeset
291 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
292 this.pdf.doc.setFillColor("#90b4d2");
3853
abc15a3182c7 client: pdf-gen: adjust diagramlegend size (waterlevel diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3820
diff changeset
293 this.pdf.doc.circle(x, y + 5, 0.6, "FD");
4109
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4061
diff changeset
294 this.pdf.doc.text(x + padding, y + 6, "Prediction");
3129
136b86794453 client: improve pdf-gen code for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3112
diff changeset
295 },
4139
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
296 getPrintLayout(svgHeight, svgWidth) {
3941
7b3935a8d9ee refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents: 3938
diff changeset
297 return {
4139
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
298 main: {
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
299 top: Math.floor(0.05 * svgHeight),
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
300 right: Math.floor(0.05 * svgWidth),
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
301 bottom: Math.floor(0.32 * svgHeight),
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
302 left: Math.floor(0.09 * svgWidth)
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
303 },
3941
7b3935a8d9ee refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents: 3938
diff changeset
304 nav: {
4139
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
305 top: Math.floor(0.78 * svgHeight),
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
306 right: Math.floor(0.013 * svgWidth),
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
307 bottom: Math.floor(0.095 * svgHeight),
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
308 left: Math.floor(0.09 * svgWidth)
3941
7b3935a8d9ee refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents: 3938
diff changeset
309 }
7b3935a8d9ee refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents: 3938
diff changeset
310 };
7b3935a8d9ee refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents: 3938
diff changeset
311 },
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
312 drawDiagram(zoom) {
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
313 // 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
314 d3.select("#" + this.containerId + " svg").remove();
3938
b03d54958ccd warterlevel: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents: 3927
diff changeset
315 const elem = document.querySelector("#" + this.containerId);
b03d54958ccd warterlevel: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents: 3927
diff changeset
316 const svgWidth = elem.clientWidth;
b03d54958ccd warterlevel: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents: 3927
diff changeset
317 const svgHeight = elem.clientHeight;
4139
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
318 const layout = this.getPrintLayout(svgHeight, svgWidth);
3938
b03d54958ccd warterlevel: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents: 3927
diff changeset
319 if (!this.selectedGauge || !this.waterlevels.length || !elem) return;
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
320 this.renderTo({
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
321 element: `#${this.containerId}`,
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
322 dimensions: this.getDimensions({
3938
b03d54958ccd warterlevel: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents: 3927
diff changeset
323 svgWidth: svgWidth,
b03d54958ccd warterlevel: leverage mixin
Thomas Junk <thomas.junk@intevation.de>
parents: 3927
diff changeset
324 svgHeight: svgHeight,
3941
7b3935a8d9ee refactor addDiagram to mixin and remove code duplication
Thomas Junk <thomas.junk@intevation.de>
parents: 3938
diff changeset
325 ...layout
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
326 }),
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
327 zoomLevel: zoom ? zoom : null
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
328 });
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
329 },
4225
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
330 renderTo({ element, dimensions, zoomLevel }) {
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
331 // PREPARE HELPERS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
332 // 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
333 const refWaterLevels = JSON.parse(
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
334 this.selectedGauge.properties.reference_water_levels
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
335 );
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
336
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
337 // get min/max values for date and waterlevel axis
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
338 const extent = this.getExtent(refWaterLevels);
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
339
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
340 // scaling helpers
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
341 const scale = this.getScale({ dimensions, extent });
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
342
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
343 // creating the axes based on the scales
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
344 const axes = {
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
345 x: d3
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
346 .axisTop(scale.x)
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
347 .tickSizeInner(dimensions.mainHeight)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
348 .tickSizeOuter(0),
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
349 y: d3
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
350 .axisRight(scale.y)
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
351 .tickSizeInner(dimensions.width)
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
352 .tickSizeOuter(0)
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
353 .tickFormat(d => this.$options.filters.waterlevel(d)),
3901
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
354 yRight: d3
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
355 .axisRight(scale.y)
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
356 .tickSizeInner(3)
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
357 .tickSizeOuter(0)
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
358 .tickFormat(d => this.$options.filters.waterlevel(d)),
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
359 x2: d3.axisBottom(scale.x2)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
360 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
361
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
362 // DRAW DIAGRAM/NAVIGATION AREAS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
363
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
364 // create svg
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
365 const svg = d3
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
366 .select(element)
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
367 .append("svg")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
368 .attr("width", "100%")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
369 .attr("height", "100%");
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
370
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
371 // create container for main diagram
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
372 const diagram = svg
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
373 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
374 .attr("class", "main")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
375 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
376 "transform",
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
377 `translate(${dimensions.mainMargin.left}, ${
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
378 dimensions.mainMargin.top
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
379 })`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
380 );
2756
ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too
Markus Kottlaender <markus@intevation.de>
parents: 2751
diff changeset
381
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
382 // create container for navigation diagram
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
383 const navigation = svg
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
384 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
385 .attr("class", "nav")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
386 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
387 "transform",
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
388 `translate(${dimensions.navMargin.left}, ${dimensions.navMargin.top})`
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
389 );
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
390
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
391 // define visible area, everything outside this area will be hidden
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
392 svg
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
393 .append("defs")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
394 .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
395 .attr("id", "waterlevel-clip")
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
396 .append("rect")
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
397 .attr("width", dimensions.width)
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
398 .attr("height", dimensions.mainHeight);
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
399
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
400 // DRAW DIAGRAM PARTS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
401
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
402 // 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
403 // 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
404 // 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
405 const updaters = [];
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
406
3346
83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 3343
diff changeset
407 // draw (order matters)
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
408 updaters.push(this.drawAxes({ diagram, dimensions, axes, navigation }));
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
409 updaters.push(this.drawWaterlevelChart({ scale, diagram }));
3618
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3576
diff changeset
410 if (this.hasPredictions) {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
411 updaters.push(this.drawPredictionAreas({ scale, diagram, navigation }));
3618
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3576
diff changeset
412 }
4295
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
413 updaters.push(
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
414 this.drawNowLines({ scale, extent, diagram, navigation, dimensions })
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
415 );
3253
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
416
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
417 // static, don't need updater
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
418 this.drawNavigationChart({ scale, navigation });
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
419 this.drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent });
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
420 if (this.showNSC) {
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
421 updaters.push(
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
422 this.drawNashSutcliffe({ hours: 72, diagram, scale, dimensions })
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
423 );
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
424 updaters.push(
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
425 this.drawNashSutcliffe({ hours: 48, diagram, scale, dimensions })
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
426 );
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
427 updaters.push(
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
428 this.drawNashSutcliffe({ hours: 24, diagram, scale, dimensions })
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
429 );
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
430 }
3346
83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 3343
diff changeset
431
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
432 // INTERACTIONS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
433
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
434 // create rectanlge on the main chart area to capture mouse events
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
435 const eventRect = svg
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
436 .append("rect")
3212
f87fd173f750 client: waterlevel diagrams: fixed tooltip bug
Markus Kottlaender <markus@intevation.de>
parents: 3211
diff changeset
437 .attr("id", "zoom-waterlevels")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
438 .attr("class", "zoom")
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
439 .attr("width", dimensions.width)
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
440 .attr("height", dimensions.mainHeight)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
441 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
442 "transform",
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
443 `translate(${dimensions.mainMargin.left}, ${
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
444 dimensions.mainMargin.top
2805
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 );
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
447
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
448 this.createZoom({
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
449 updaters,
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
450 eventRect,
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
451 dimensions,
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
452 scale,
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
453 navigation,
4225
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
454 svg,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
455 zoomLevel
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
456 });
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
457 this.createTooltips({ eventRect, diagram, scale, dimensions });
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
458 this.setInlineStyles(svg);
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
459 },
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
460 //set the styles of the diagrams to include them in the pdf
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
461 setInlineStyles(svg) {
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
462 svg
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
463 .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
464 .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
465 .selectAll("path")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
466 .attr("stroke", "steelblue")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
467 .attr("stroke-width", 2)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
468 .attr("fill", "none");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
469 svg
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
470 .selectAll(".line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
471 .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
472 .attr("stroke-opacity", 0);
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
473 svg
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
474 .selectAll(".line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
475 .selectAll("circle")
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
476 .attr("fill", "steelblue")
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
477 .attr("stroke-width", 0);
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
478 svg
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
479 .selectAll(".line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
480 .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
481 .attr("fill-opacity", 0.6);
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
482
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
483 svg
4154
d54d86d27e82 client: waterlevel: remove whitespace and add comment
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4153
diff changeset
484 .selectAll(".hdc-line, .mw-line, .ldc-line, .rn-line")
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
485 .attr("stroke-width", 1)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
486 .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
487 .attr("clip-path", "url(#waterlevel-clip)");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
488 svg.selectAll(".hdc-line").attr("stroke", "red");
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
489 svg.selectAll(".ldc-line").attr("stroke", "green");
4153
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
490
4061
f391497287fb clinet: pdf-gen: fix RN line does not render on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3992
diff changeset
491 svg.selectAll(".mw-line").attr("stroke", "rgb(128,128,128)");
f391497287fb clinet: pdf-gen: fix RN line does not render on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3992
diff changeset
492 svg.selectAll(".rn-line").attr("stroke", "rgb(128,128,128)");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
493 svg
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
494 .selectAll(".ref-waterlevel-label")
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
495 .style("font-size", "10px")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
496 .attr("fill", "black");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
497 svg
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
498 .selectAll(".ref-waterlevel-label-background")
3563
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
499 .attr("fill", "rgb(255, 255, 255)")
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
500 .attr("fill-opacity", 0.6);
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
501 svg
3563
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
502 .selectAll(".hdc-ldc-area")
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
503 .attr("fill", "rgb(0, 255, 0)")
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
504 .attr("fill-opacity", 0.1);
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
505 svg
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
506 .selectAll(".now-line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
507 .attr("stroke", "#999")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
508 .attr("stroke-width", 1)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
509 .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
510 .attr("clip-path", "url(#waterlevel-clip)");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
511 svg
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
512 .selectAll(".now-line-label")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
513 .attr("font-size", "11px")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
514 .attr("fill", "#999");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
515 svg
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
516 .selectAll(".prediction-area")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
517 .attr("fill", "steelblue")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
518 .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
519 .attr("clip-path", "url(#waterlevel-clip)");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
520 svg
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
521 .selectAll("path.nash-sutcliffe")
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
522 .attr("fill", "none")
4139
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
523 .attr("stroke", "gray")
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
524 .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
525 .attr("clip-path", "url(#waterlevel-clip)");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
526 svg
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
527 .selectAll("path.nash-sutcliffe.ns72")
3563
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
528 .attr("fill", "rgb(255, 255, 255)")
f65ef9148d00 client: improve waterlevel diagram
Bernhard Reiter <bernhard@intevation.de>
parents: 3544
diff changeset
529 .attr("fill-opacity", 0.5);
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
530 svg
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
531 .selectAll("text.nash-sutcliffe")
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
532 .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
533 .attr("clip-path", "url(#waterlevel-clip)")
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
534 .selectAll("tspan:last-child, tspan:first-child")
3346
83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 3343
diff changeset
535 .attr("fill", "#555");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
536 svg
3901
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
537 .selectAll(".axis--x .tick line, .axis--y .tick line")
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
538 .attr("stroke-dasharray", 5)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
539 .attr("stroke", "#ccc");
3901
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
540 svg.selectAll(".axis--y-right .tick line").attr("stroke", "transparent");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
541 svg.selectAll(".tick text").attr("fill", "black");
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
542 svg.selectAll(".domain").attr("stroke", "black");
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
543 svg
3782
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
544 .selectAll(".domain")
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
545 .attr("stroke", "black")
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
546 .attr("fill", "none");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
547 svg
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
548 .selectAll(".zoom")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
549 .attr("cursor", "move")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
550 .attr("fill", "none")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
551 .attr("pointer-events", "all");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
552 svg
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
553 .selectAll(".brush .selection")
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
554 .attr("stroke", "none")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
555 .attr("fill-opacity", 0.2);
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
556 svg
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
557 .selectAll(".brush .handle")
3015
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
558 .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
559 .attr("fill", "rgba(23, 162, 184, 0.5)");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
560 svg.selectAll(".brush .overlay").attr("fill", "none");
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
561 svg.selectAll(".chart-dots").attr("clip-path", "url(#waterlevel-clip)");
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
562 svg
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
563 .selectAll(".chart-dots .chart-dot")
3107
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
564 .attr("fill", "steelblue")
8e364945a390 client: adjust some styles for waterlevel diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3068
diff changeset
565 .attr("stroke", "steelblue")
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
566 .attr("stroke-opacity", 0)
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
567 .style("pointer-events", "none")
3046
c764c73f44b4 client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3045
diff changeset
568 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3045
diff changeset
569 .attr("fill-opacity", "0.1s");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
570 svg
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
571 .selectAll(".chart-tooltip")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
572 .attr("fill-opacity", 0)
3046
c764c73f44b4 client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3045
diff changeset
573 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3045
diff changeset
574 .attr("fill-opacity", "0.3s");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
575 svg
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
576 .selectAll(".chart-tooltip rect")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
577 .attr("fill", "#fff")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
578 .attr("stroke", "#ccc");
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
579 svg
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
580 .selectAll(".chart-tooltip text")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
581 .attr("fill", "666")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
582 .style("font-size", "0.8em");
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
583 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
584 getExtent(refWaterLevels) {
4125
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
585 let rest;
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
586 if (refWaterLevels) {
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
587 // set min/max values for the waterlevel axis
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
588 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
4153
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
589 const { LDC, HDC } = this.determineLDCHDC(refWaterLevels);
4125
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
590 rest = [
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
591 {
4153
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
592 waterlevel: HDC + (HDC - LDC) / 8
4125
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
593 },
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
594 {
4153
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
595 waterlevel: Math.max(LDC - (HDC - LDC) / 4, 0)
4125
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
596 }
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
597 ];
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
598 } else {
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
599 rest = [];
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
600 }
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
601 return {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
602 // set min/max values for the date axis
4249
0f0628189cd7 waterlevel: use given date range instead of recurring on the min/max date of data
Thomas Junk <thomas.junk@intevation.de>
parents: 4228
diff changeset
603 date: [this.dateFrom, this.dateTo],
4125
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
604 waterlevel: d3.extent([...this.waterlevels, ...rest], d => d.waterlevel)
2805
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 },
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
607 getScale({ dimensions, extent }) {
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
608 // scaling helpers to convert real world values into pixels
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
609 const x = d3.scaleTime().range([0, dimensions.width]);
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
610 const y = d3.scaleLinear().range([dimensions.mainHeight, 0]);
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
611 const x2 = d3.scaleTime().range([0, dimensions.width]);
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
612 const y2 = d3.scaleLinear().range([dimensions.navHeight, 0]);
4142
2a3bd5f3fc99 waterlevels: drawing now line according to maximum of waterlevels
Thomas Junk <thomas.junk@intevation.de>
parents: 4125
diff changeset
613 const [lo, hi] = extent.waterlevel;
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
614 // setting the min and max values for the diagram axes
4143
afc564e0db40 added fixed delta
Thomas Junk <thomas.junk@intevation.de>
parents: 4142
diff changeset
615 const dy = Math.ceil(0.15 * (hi - lo));
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
616 x.domain(d3.extent(extent.date));
4143
afc564e0db40 added fixed delta
Thomas Junk <thomas.junk@intevation.de>
parents: 4142
diff changeset
617 y.domain([lo - dy, hi + dy]);
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
618 x2.domain(x.domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
619 y2.domain(y.domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
620
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
621 return { x, y, x2, y2 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
622 },
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
623 drawAxes({ diagram, dimensions, axes, navigation }) {
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
624 diagram
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
625 .append("g")
2652
a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming
Markus Kottlaender <markus@intevation.de>
parents: 2648
diff changeset
626 .attr("class", "axis--x")
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
627 .attr("transform", `translate(0, ${dimensions.mainHeight})`)
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
628 .call(axes.x)
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
629 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
630 .attr("y", 15);
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
631 diagram // label
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
632 .append("text")
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
633 .text(this.$gettext("Waterlevel [m]"))
2641
a735119e4f5c client: waterlevel diagram: added y-axis label
Markus Kottlaender <markus@intevation.de>
parents: 2611
diff changeset
634 .attr("text-anchor", "middle")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
635 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
636 "transform",
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
637 `translate(-45, ${dimensions.mainHeight / 2}) rotate(-90)`
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
638 );
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
639 diagram
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
640 .append("g")
3901
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
641 .attr("class", "axis--y")
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
642 .call(axes.y)
2648
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
643 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart
Markus Kottlaender <markus@intevation.de>
parents: 2646
diff changeset
644 .attr("x", -25);
3901
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
645 diagram
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
646 .append("g")
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
647 .attr("class", "axis--y-right")
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
648 .attr("transform", `translate(${dimensions.width})`)
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
649 .call(axes.yRight)
fe0d62727c41 client: waterlevel diagram: added right y axis
Markus Kottlaender <markus@intevation.de>
parents: 3894
diff changeset
650 .selectAll(".tick text");
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
651
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
652 navigation
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
653 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
654 .attr("class", "axis axis--x")
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
655 .attr("transform", `translate(0, ${dimensions.navHeight})`)
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
656 .call(axes.x2);
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
657
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
658 return () => {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
659 diagram
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
660 .select(".axis--x")
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
661 .call(axes.x)
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
662 .selectAll(".tick text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
663 .attr("y", 15);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
664 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
665 },
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
666 drawWaterlevelChart({ scale, diagram }) {
3253
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
667 const waterlevelChartDrawer = () => {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
668 let domainLeft = new Date(scale.x.domain()[0].getTime());
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
669 let domainRight = new Date(scale.x.domain()[1].getTime());
3253
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
670 domainLeft.setDate(domainLeft.getDate() - 1);
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
671 domainRight.setDate(domainRight.getDate() + 1);
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
672
3782
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
673 let lineChunked = d3
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
674 .lineChunked()
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
675 // render only data points that are visible in the current scale
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
676 .defined(d => d.date > domainLeft && d.date < domainRight)
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
677 .x(d => scale.x(d.date))
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
678 .y(d => scale.y(d.waterlevel))
3782
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
679 .curve(d3.curveLinear)
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
680 .isNext(this.isNext(scale))
3782
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
681 .pointAttrs({ r: 1.7 });
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
682 // to avoid creating empty clip-path element
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
683 if (this.hasPredictions) {
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
684 lineChunked
3253
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
685 .chunk(d => (d.predicted ? "predicted" : "line"))
3782
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
686 .chunkDefinitions({ predicted: {} });
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
687 }
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
688 return lineChunked;
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
689 };
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
690
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
691 diagram
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
692 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
693 .attr("class", "line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
694 .datum(this.waterlevels)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
695 .call(waterlevelChartDrawer());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
696
3253
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
697 return () => {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
698 diagram.select(".line").call(waterlevelChartDrawer());
3253
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
699 };
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers
Markus Kottlaender <markus@intevation.de>
parents: 3252
diff changeset
700 },
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
701 drawNavigationChart({ scale, navigation }) {
3782
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
702 let lineChunked = d3
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
703 .lineChunked()
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
704 .x(d => scale.x2(d.date))
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
705 .y(d => scale.y2(d.waterlevel))
3782
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
706 .curve(d3.curveLinear)
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
707 .isNext(this.isNext(scale))
3782
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
708 .pointAttrs({ r: 1.7 });
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
709 // to avoid creating empty clip-path element
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
710 if (this.hasPredictions) {
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
711 lineChunked
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
712 .chunk(d => (d.predicted ? "predicted" : "line"))
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
713 .chunkDefinitions({ predicted: {} });
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
714 }
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
715 navigation
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
716 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
717 .attr("class", "line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
718 .datum(this.waterlevels)
3782
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
719 .call(lineChunked);
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
720 },
4295
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
721 drawNowLines({ scale, extent, diagram, navigation, dimensions }) {
4144
737e1199800f draw now line with fixed delta
Thomas Junk <thomas.junk@intevation.de>
parents: 4143
diff changeset
722 const [lo, hi] = extent.waterlevel;
737e1199800f draw now line with fixed delta
Thomas Junk <thomas.junk@intevation.de>
parents: 4143
diff changeset
723 const dy = Math.ceil(0.15 * (hi - lo));
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
724 const nowLine = d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
725 .line()
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
726 .x(d => scale.x(d.x))
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
727 .y(d => scale.y(d.y));
3782
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
728
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
729 const nowLabel = selection => {
4295
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
730 selection
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
731 .attr(
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
732 "transform",
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
733 `translate(${scale.x(new Date())}, ${scale.y(hi + dy * 0.4)})`
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
734 )
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
735 // hide Now label outside the diagram y-axises
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
736 .attr(
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
737 "opacity",
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
738 scale.x(new Date()) >= dimensions.width || scale.x(new Date()) <= 0
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
739 ? 0
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
740 : 1
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4294
diff changeset
741 );
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
742 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
743
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
744 // draw in main
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
745 diagram
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
746 .append("path")
4145
6095e95db454 optical adjustments to nowline and now line label
Thomas Junk <thomas.junk@intevation.de>
parents: 4144
diff changeset
747 .datum([
6095e95db454 optical adjustments to nowline and now line label
Thomas Junk <thomas.junk@intevation.de>
parents: 4144
diff changeset
748 { x: new Date(), y: lo - dy },
6095e95db454 optical adjustments to nowline and now line label
Thomas Junk <thomas.junk@intevation.de>
parents: 4144
diff changeset
749 { x: new Date(), y: hi + dy * 0.4 }
6095e95db454 optical adjustments to nowline and now line label
Thomas Junk <thomas.junk@intevation.de>
parents: 4144
diff changeset
750 ])
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
751 .attr("class", "now-line")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
752 .attr("d", nowLine);
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
753 diagram // label
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
754 .append("text")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
755 .text(this.$gettext("Now"))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
756 .attr("class", "now-line-label")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
757 .attr("text-anchor", "middle")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
758 .call(nowLabel);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
759
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
760 // draw in nav
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
761 navigation
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
762 .append("path")
4144
737e1199800f draw now line with fixed delta
Thomas Junk <thomas.junk@intevation.de>
parents: 4143
diff changeset
763 .datum([{ x: new Date(), y: hi + dy }, { x: new Date(), y: lo - dy }])
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
764 .attr("class", "now-line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
765 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
766 "d",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
767 d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
768 .line()
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
769 .x(d => scale.x2(d.x))
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
770 .y(d => scale.y2(d.y))
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
771 );
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
772
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
773 return () => {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
774 diagram.select(".now-line").attr("d", nowLine);
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
775 diagram.select(".now-line-label").call(nowLabel);
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
776 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
777 },
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
778 drawPredictionAreas({ scale, diagram, navigation }) {
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
779 const predictionArea = isNav =>
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
780 d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
781 .area()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
782 .defined(d => d.predicted && d.min && d.max)
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
783 .x(d => scale[isNav ? "x2" : "x"](d.date))
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
784 .y0(d => scale[isNav ? "y2" : "y"](d.min))
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
785 .y1(d => scale[isNav ? "y2" : "y"](d.max));
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
786
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
787 diagram
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
788 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
789 .datum(this.waterlevels)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
790 .attr("class", "prediction-area")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
791 .attr("d", predictionArea());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
792
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
793 navigation
2775
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
794 .append("path")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
795 .datum(this.waterlevels)
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
796 .attr("class", "prediction-area")
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
797 .attr("d", predictionArea(true));
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
798
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
799 return () => {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
800 diagram.select(".prediction-area").attr("d", predictionArea());
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
801 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
802 },
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
803 drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }) {
4125
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
804 if (refWaterLevels) {
4153
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
805 const { LDC, HDC } = this.determineLDCHDC(refWaterLevels);
4154
d54d86d27e82 client: waterlevel: remove whitespace and add comment
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4153
diff changeset
806 // filling area between HDC and LDC if both of them are available
4153
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
807 if (LDC && HDC) {
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
808 diagram
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
809 .append("rect")
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
810 .attr("class", "hdc-ldc-area")
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
811 .attr("x", 0)
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
812 .attr("y", scale.y(HDC))
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
813 .attr("width", dimensions.width)
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
814 .attr("height", refWaterLevels ? scale.y(LDC) - scale.y(HDC) : 0);
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
815 }
4125
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4109
diff changeset
816 }
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
817
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
818 const refWaterlevelLine = d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
819 .line()
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
820 .x(d => scale.x(d.x))
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
821 .y(d => scale.y(d.y));
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
822
4153
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
823 const levelStyle = name => {
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
824 if (/HDC/.test(name)) return "hdc-line";
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
825 if (/LDC/.test(name)) return "ldc-line";
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
826 return `${name.toLowerCase()}-line`;
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
827 };
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
828
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
829 for (let ref in refWaterLevels) {
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
830 if (refWaterLevels[ref]) {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
831 diagram
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
832 .append("path")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
833 .datum([
3782
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
834 { x: 0, y: refWaterLevels[ref] },
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
835 { x: extent.date[1], y: refWaterLevels[ref] }
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
836 ])
4153
7c44af0b9370 client: Waterleveldiagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4150
diff changeset
837 .attr("class", levelStyle(ref))
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
838 .attr("d", refWaterlevelLine);
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
839 diagram // label
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
840 .append("rect")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
841 .attr("class", "ref-waterlevel-label-background")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
842 .attr("x", 1)
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
843 .attr("y", scale.y(refWaterLevels[ref]) - 13)
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
844 .attr("width", 55)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
845 .attr("height", 12);
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
846 diagram
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
847 .append("text")
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
848 .text(
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
849 `${ref} (${this.$options.filters.waterlevel(
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
850 refWaterLevels[ref]
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
851 )})`
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
852 )
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
853 .attr("class", "ref-waterlevel-label")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
854 .attr("x", 5)
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
855 .attr("y", scale.y(refWaterLevels[ref]) - 3);
3211
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground
Markus Kottlaender <markus@intevation.de>
parents: 3209
diff changeset
856 }
3209
5b8916b78cea client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option
Markus Kottlaender <markus@intevation.de>
parents: 3179
diff changeset
857 }
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
858 },
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
859 drawNashSutcliffe({ hours, diagram, scale, dimensions }) {
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
860 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
861 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
862 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
863
4294
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4249
diff changeset
864 const nashSutcliffeBox = (hours, date) => {
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
865 // show/hide boxes depending on scale of chart (hide if > 90 days)
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
866 diagram
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
867 .selectAll("path.nash-sutcliffe")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
868 .attr(
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
869 "stroke-opacity",
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
870 scale.x.domain()[1] - scale.x.domain()[0] > 90 * 86400000 ? 0 : 1
4294
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4249
diff changeset
871 )
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4249
diff changeset
872 // show boxes only if now line in the selected time range
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4249
diff changeset
873 .attr("opacity", dimensions.width >= scale.x(date) ? 1 : 0);
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
874 return d3
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
875 .area()
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
876 .x(d => scale.x(d))
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
877 .y0(() => dimensions.mainHeight + 0.5)
4140
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4139
diff changeset
878 .y1(
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4139
diff changeset
879 () =>
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4139
diff changeset
880 dimensions.mainHeight -
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4139
diff changeset
881 Math.floor(0.06 * dimensions.mainHeight) * (hours / 24)
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4139
diff changeset
882 );
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
883 };
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
884
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
885 const nashSutcliffeLabel = (label, date, hours) => {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
886 let days = hours / 24;
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
887 label
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
888 .attr("x", Math.min(scale.x(date), dimensions.width) - 4)
4140
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4139
diff changeset
889 .attr(
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4139
diff changeset
890 "y",
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4139
diff changeset
891 dimensions.mainHeight -
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4139
diff changeset
892 (Math.floor(0.06 * dimensions.mainHeight) * days + 0.5) +
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4139
diff changeset
893 12
4294
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4249
diff changeset
894 )
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4249
diff changeset
895 // show label only if now line in the selected time range
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4249
diff changeset
896 .attr("opacity", dimensions.width >= scale.x(date) ? 1 : 0);
2751
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
897 };
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe
Markus Kottlaender <markus@intevation.de>
parents: 2728
diff changeset
898
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
899 if (coeff.samples) {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
900 diagram
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
901 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
902 .datum([dateStart, dateNow])
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
903 .attr("class", "nash-sutcliffe ns" + hours)
4294
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4249
diff changeset
904 .attr("d", nashSutcliffeBox(hours, dateNow));
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
905 diagram
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
906 .append("text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
907 .attr("class", "nash-sutcliffe ns" + hours)
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
908 .attr("text-anchor", "end")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
909 .call(nashSutcliffeLabel, dateNow, hours)
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
910 .append("tspan")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
911 .text(hours + "h: ")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
912 .select(function() {
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
913 return this.parentNode;
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
914 })
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
915 .append("tspan")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
916 .text(coeff.value.toFixed(2))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
917 .select(function() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
918 return this.parentNode;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
919 })
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
920 .append("tspan")
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
921 .text(` (${coeff.samples})`);
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
922 }
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
923
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
924 return () => {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
925 diagram
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
926 .select("path.nash-sutcliffe.ns" + hours)
4294
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4249
diff changeset
927 .attr("d", nashSutcliffeBox(hours, dateNow));
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
928 diagram
3348
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
929 .select("text.nash-sutcliffe.ns" + hours)
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
930 .call(nashSutcliffeLabel, dateNow, hours);
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display
Markus Kottlaender <markus@intevation.de>
parents: 3346
diff changeset
931 };
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
932 },
4225
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
933 createZoom({
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
934 updaters,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
935 eventRect,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
936 dimensions,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
937 scale,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
938 navigation,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
939 svg,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
940 zoomLevel
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
941 }) {
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
942 const brush = d3
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
943 .brushX()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
944 .handleSize(4)
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
945 .extent([[0, 0], [dimensions.width, dimensions.navHeight]]);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
946
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
947 const zoom = d3
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
948 .zoom()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
949 .scaleExtent([1, Infinity])
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
950 .translateExtent([[0, 0], [dimensions.width, dimensions.mainHeight]])
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
951 .extent([[0, 0], [dimensions.width, dimensions.mainHeight]]);
2610
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2607
diff changeset
952
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
953 brush.on("brush end", () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
954 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
955 return; // ignore brush-by-zoom
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
956 let s = d3.event.selection || scale.x2.range();
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
957 scale.x.domain(s.map(scale.x2.invert, scale.x2));
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
958 updaters.forEach(u => u && u());
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
959 this.setInlineStyles(svg);
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
960 svg
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
961 .select(".zoom")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
962 .call(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
963 zoom.transform,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
964 d3.zoomIdentity
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
965 .scale(dimensions.width / (s[1] - s[0]))
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
966 .translate(-s[0], 0)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
967 );
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
968 });
4225
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
969 let scaleForZoom = t => {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
970 scale.x.domain(t.rescaleX(scale.x2).domain());
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
971 updaters.forEach(u => u && u());
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
972 this.setInlineStyles(svg);
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
973 navigation
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
974 .select(".brush")
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
975 .call(brush.move, scale.x.range().map(t.invertX, t));
4225
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
976 };
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
977 zoom.on("zoom", () => {
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
978 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") {
4225
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
979 return; // ignore zoom-by-brush
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
980 }
4225
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
981 let t = d3.event.transform;
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
982 // set the zoom to the passed zoom level.
4225
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
983 if (zoomLevel) {
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
984 let tx = (zoomLevel.x * dimensions.width) / zoomLevel.width;
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
985 let k = zoomLevel.k;
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
986 let ty = zoomLevel.y;
4228
b8d578e42b4b pdfprint: generate a new transform object instead of manipulating the given one.
Thomas Junk <thomas.junk@intevation.de>
parents: 4226
diff changeset
987 t = d3.zoomIdentity.translate(tx, ty).scale(k);
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
988 zoomLevel = null; // avoid to stuck at same zoom level after setting the zoom by subsequent zooming.
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
989 } else {
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
990 temp = { ...d3.event.transform, width: dimensions.width };
4225
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
991 }
4228
b8d578e42b4b pdfprint: generate a new transform object instead of manipulating the given one.
Thomas Junk <thomas.junk@intevation.de>
parents: 4226
diff changeset
992 scaleForZoom(t);
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
993 });
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
994 zoom.on("start", () => {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
995 svg.select(".chart-dot").style("opacity", 0);
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
996 svg.select(".chart-tooltip").style("opacity", 0);
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
997 });
4225
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4155
diff changeset
998 // store the zoom level after zomming is ended
4381
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
999 zoom.on("end", () => {
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
1000 if (!zoomLevel) {
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
1001 this.zoomStore = temp
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
1002 ? temp
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
1003 : { ...d3.event.transform, width: dimensions.width };
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
1004 }
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4295
diff changeset
1005 });
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1006
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1007 navigation
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1008 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1009 .attr("class", "brush")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1010 .call(brush)
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1011 .call(brush.move, scale.x.range());
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1012
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1013 eventRect.call(zoom);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1014 },
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1015 createTooltips({ eventRect, diagram, scale, dimensions }) {
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1016 // create clippable container for the dot
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1017 diagram
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1018 .append("g")
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1019 .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
1020 .append("circle")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1021 .attr("class", "chart-dot")
4150
40bd6854a294 waterlevel_diagram: make dot initially invisible
Thomas Junk <thomas.junk@intevation.de>
parents: 4145
diff changeset
1022 .attr("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
1023 .attr("r", 4);
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1024
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1025 // create container for the tooltip
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1026 const tooltip = 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
1027 tooltip
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1028 .append("rect")
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1029 .attr("rx", "0.25em")
3782
d36ccff8de5f pdf: waterlevel diagram with svg2pdf
Thomas Junk <thomas.junk@intevation.de>
parents: 3780
diff changeset
1030 .attr("ry", "0.25em")
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1031 .attr("width", "0px")
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1032 .attr("height", "0px");
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1033
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1034 // create container for multiple text rows
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1035 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
1036
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1037 // 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
1038 // 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
1039 const tooltipPadding = 10;
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1040 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
1041
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1042 eventRect
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1043 .on("mouseover", () => {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1044 diagram.select(".chart-dot").style("opacity", 1);
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1045 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
1046 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1047 .on("mouseout", () => {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1048 diagram.select(".chart-dot").style("opacity", 0);
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1049 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
1050 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1051 .on("mousemove", () => {
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1052 // find data point closest to mouse
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1053 const x0 = scale.x.invert(
3212
f87fd173f750 client: waterlevel diagrams: fixed tooltip bug
Markus Kottlaender <markus@intevation.de>
parents: 3211
diff changeset
1054 d3.mouse(document.getElementById("zoom-waterlevels"))[0]
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1055 ),
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1056 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
1057 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
1058 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
1059 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
1060
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1061 const coords = {
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1062 x: scale.x(d.date),
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1063 y: scale.y(d.waterlevel)
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1064 };
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1065
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1066 // position the dot
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1067 diagram
2689
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart
Markus Kottlaender <markus@intevation.de>
parents: 2684
diff changeset
1068 .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
1069 .style("opacity", 1)
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1070 .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
1071
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1072 // remove current texts
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1073 tooltipText.selectAll("tspan").remove();
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1074
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1075 // write date
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1076 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1077 .append("tspan")
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1078 .attr("dominant-baseline", "hanging")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1079 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1080 .text(
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1081 d.date.toLocaleString([], {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1082 year: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1083 month: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1084 day: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1085 hour: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1086 minute: "2-digit"
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1087 })
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1088 );
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1089
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1090 if (d.predicted) {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1091 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1092 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1093 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1094 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1095 .attr("dy", "1.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1096 .attr("dominant-baseline", "hanging")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1097 .attr("text-anchor", "middle")
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
1098 .text(this.$options.filters.waterlevel(d.max) + " m");
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1099 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1100 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1101 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1102 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1103 .attr("dy", "2.6em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1104 .attr("dominant-baseline", "hanging")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1105 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1106 .attr("class", "font-weight-bold")
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
1107 .text(this.$options.filters.waterlevel(d.waterlevel) + " m");
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1108 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1109 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1110 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1111 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1112 .attr("dy", "3.8em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1113 .attr("dominant-baseline", "hanging")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1114 .attr("text-anchor", "middle")
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
1115 .text(this.$options.filters.waterlevel(d.min) + " m");
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1116 } else {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1117 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1118 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1119 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1120 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1121 .attr("dy", "1.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
1122 .attr("dominant-baseline", "hanging")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1123 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1124 .attr("class", "font-weight-bold")
3576
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized
Markus Kottlaender <markus@intevation.de>
parents: 3565
diff changeset
1125 .text(this.$options.filters.waterlevel(d.waterlevel) + " m");
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1126 }
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1127
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1128 // get text dimensions
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1129 const textBBox = tooltipText.node().getBBox();
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1130
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1131 diagram
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1132 .selectAll(".chart-tooltip text tspan")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1133 .attr("x", textBBox.width / 2 + tooltipPadding)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1134 .attr("y", tooltipPadding);
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1135
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1136 // position and scale tooltip box
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1137 const xMax =
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1138 dimensions.width -
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1139 (textBBox.width + diagramPadding + tooltipPadding * 2);
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1140 const tooltipX = Math.max(
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1141 diagramPadding,
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1142 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
1143 );
2824
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2821
diff changeset
1144 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
1145 if (coords.y < textBBox.height + tooltipPadding * 2) {
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2821
diff changeset
1146 tooltipY = coords.y + 10;
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2821
diff changeset
1147 }
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2821
diff changeset
1148
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1149 diagram
2816
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1150 .select(".chart-tooltip")
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1151 .style("opacity", 1)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1152 .attr("transform", `translate(${tooltipX}, ${tooltipY})`)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning
Markus Kottlaender <markus@intevation.de>
parents: 2810
diff changeset
1153 .select("rect")
2819
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1154 .attr("width", textBBox.width + tooltipPadding * 2)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing
Markus Kottlaender <markus@intevation.de>
parents: 2816
diff changeset
1155 .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
1156 });
2805
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability
Markus Kottlaender <markus@intevation.de>
parents: 2794
diff changeset
1157 },
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1158 isNext(scale) {
3252
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1159 // Check whether points in the chart can be considered "next to each other".
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1160 // For that they need to be exactly 15 minutes apart (for automatically
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1161 // imported gauge measurements). If the chart shows more than 15 days then
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1162 // 1 hour is also valid (for approved gauge measurements).
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1163 return (prev, current) => {
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1164 let difference = (current.date - prev.date) / 1000;
3885
d42158f77841 waterlevel: factor out side-effects from diagram rendering
Thomas Junk <thomas.junk@intevation.de>
parents: 3853
diff changeset
1165 if ((scale.x.domain()[1] - scale.x.domain()[0]) / 86400000 > 15)
3252
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1166 return [900, 3600].includes(difference);
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1167 return difference === 900;
fccb28813159 client: wterlevel diagram: improved performance
Markus Kottlaender <markus@intevation.de>
parents: 3249
diff changeset
1168 };
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1169 }
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1170 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1171 created() {
4462
2793893bc7f5 clinet: Waterlevels: fix resizing problem for diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4456
diff changeset
1172 this.resizeListenerFunction = debounce(() => {
2793893bc7f5 clinet: Waterlevels: fix resizing problem for diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4456
diff changeset
1173 this.zoomStore // restore last zoom level
2793893bc7f5 clinet: Waterlevels: fix resizing problem for diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4456
diff changeset
1174 ? this.drawDiagram({ ...this.zoomStore })
2793893bc7f5 clinet: Waterlevels: fix resizing problem for diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4456
diff changeset
1175 : this.drawDiagram();
2793893bc7f5 clinet: Waterlevels: fix resizing problem for diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 4456
diff changeset
1176 }, 100);
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1177 window.addEventListener("resize", this.resizeListenerFunction);
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1178 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1179 mounted() {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1180 // Nasty but necessary if we don't want to use the updated hook to re-draw
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1181 // the diagram because this would re-draw it also for irrelevant reasons.
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1182 // In this case we need to wait for the child component (DiagramLegend) to
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1183 // render. According to the docs (https://vuejs.org/v2/api/#mounted) this
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1184 // should be possible with $nextTick() but it doesn't work because it does
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1185 // not guarantee that the DOM is not only updated but also re-painted on the
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1186 // screen.
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1187 setTimeout(this.drawDiagram, 150);
4384
b146d3c648f8 gauges: decouple date and title from store
Thomas Junk <thomas.junk@intevation.de>
parents: 4381
diff changeset
1188 this.initialDiagramValues();
3992
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1189 this.templates[0] = this.defaultTemplate;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1190 this.form.template = this.templates[0];
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1191 this.templateData = this.form.template;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1192 HTTP.get("/templates/diagram", {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1193 headers: {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1194 "X-Gemma-Auth": localStorage.getItem("token"),
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1195 "Content-type": "text/xml; charset=UTF-8"
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1196 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1197 })
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1198 .then(response => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1199 if (response.data.length) {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1200 this.templates = response.data;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1201 this.form.template = this.templates[0];
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1202 this.templates[this.templates.length] = this.defaultTemplate;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1203 this.applyChange();
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1204 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1205 })
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1206 .catch(e => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1207 const { status, data } = e.response;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1208 displayError({
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1209 title: this.$gettext("Backend Error"),
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1210 message: `${status}: ${data.message || data}`
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1211 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1212 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1213 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1214 destroyed() {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready.
Sascha Wilde <wilde@intevation.de>
parents: 3965
diff changeset
1215 window.removeEventListener("resize", this.resizeListenerFunction);
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1216 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1217 };
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1218 </script>