Mercurial > gemma

annotate client/src/components/gauge/HydrologicalConditions.vue @ 3060:cebbc1a8987b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: linting
author Fadi Abbud <fadi.abbud@intevation.de>
date Tue, 16 Apr 2019 11:22:32 +0200
parents 6f5693bf7804
children 0ffa9d418959
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
2 <div class="d-flex flex-fill">
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
3 <DiagramLegend>
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
4 <div class="legend">
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
5 <span style="background-color: red"></span>
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
6 {{ yearCompare }}
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
7 </div>
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
8 <div class="legend">
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
9 <span style="background-color: orange"></span> Q25%
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
10 </div>
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
11 <div class="legend">
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
12 <span style="background-color: black"></span> Median
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
13 </div>
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
14 <div class="legend">
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
15 <span style="background-color: purple"></span> Q75%
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
16 </div>
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
17 <div class="legend">
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
18 <span style="background-color: lightsteelblue"></span>
2843
451d73940c81 client: diagrams: more compact legend style, removed unnecessary legend items
Markus Kottlaender <markus@intevation.de>
parents: 2842
diff changeset
19 Long-term Amplitude
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
20 </div>
3025
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
21 <div>
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
22 <button
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
23 @click="downloadPDF"
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
24 type="button"
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
25 class="btn btn-sm btn-info d-block w-100 mt-2"
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
26 >
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
27 <translate>Export to PDF</translate>
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
28 </button>
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
29 </div>
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
30 </DiagramLegend>
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
31 <div
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
32 class="d-flex flex-fill justify-content-center align-items-center diagram-container"
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
33 >
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
34 <div v-if="!longtermWaterlevels.length">
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
35 <translate>No data available.</translate>
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
36 </div>
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 </div>
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 </div>
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 </template>
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 <style lang="sass" scoped>
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 .diagram-container
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 /deep/
2791
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
44 .hide
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
45 opacity: 0
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 .line
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 clip-path: url(#clip)
2791
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
48 stroke-width: 2
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
49 fill: none
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
50 &.mean
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
51 stroke: red
2791
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
52 &.median
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
53 stroke: black
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
54 &.q25
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
55 stroke: orange
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
56 &.q75
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
57 stroke: purple
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
58 .area
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
59 clip-path: url(#clip)
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
60 stroke: none
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
61 fill: lightsteelblue
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 .hdc-line,
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 .ldc-line,
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 .mw-line
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 stroke-width: 1
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 fill: none
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 clip-path: url(#clip)
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 .hdc-line
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 stroke: red
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 .ldc-line
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 stroke: green
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 .mw-line
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 stroke: grey
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 .ref-waterlevel-label
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 font-size: 11px
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 fill: #999
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
78 .now-line
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
79 stroke: #999
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
80 stroke-width: 1
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
81 stroke-dasharray: 5, 5
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
82 clip-path: url(#clip)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
83 .now-line-label
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
84 font-size: 11px
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
85 fill: #999
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 .tick
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 line
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 stroke-dasharray: 5
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 stroke: #ccc
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 .zoom
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 cursor: move
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 fill: none
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 pointer-events: all
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 .brush
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 .selection
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 stroke: none
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 fill-opacity: 0.2
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 .handle
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 stroke: rgba($color-info, 0.5)
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 fill: rgba($color-info, 0.5)
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
103
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
104 .chart-dots
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
105 clip-path: url(#clip)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
106 .chart-dot
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
107 fill: black
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
108 stroke: black
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
109 pointer-events: none
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
110 opacity: 0
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
111 transition: opacity 0.1s
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
112 .chart-tooltip
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
113 opacity: 0
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
114 transition: opacity 0.3s
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
115 rect
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
116 fill: #fff
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
117 stroke: #ccc
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
118 text
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
119 fill: #666
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
120 font-size: 12px
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 </style>
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 <script>
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 /* This is Free Software under GNU Affero General Public License v >= 3.0
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 * without warranty, see README.md and license for details.
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 *
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 * SPDX-License-Identifier: AGPL-3.0-or-later
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 * License-Filename: LICENSES/AGPL-3.0.txt
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129 *
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
130 * Copyright (C) 2018 by via donau
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
131 * – Österreichische Wasserstraßen-Gesellschaft mbH
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
132 * Software engineering by Intevation GmbH
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
133 *
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 * Author(s):
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 * Markus Kottländer <markus.kottlaender@intevation.de>
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 */
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
137
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 import { mapState, mapGetters } from "vuex";
2791
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
139 import * as d3 from "d3";
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140 import debounce from "debounce";
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 import { startOfYear, endOfYear } from "date-fns";
3025
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
142 import jsPDF from "jspdf";
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
143 import canvg from "canvg";
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
144
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
145 export default {
2839
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
146 components: {
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
147 DiagramLegend: () => import("@/components/DiagramLegend")
162804509c3e client: spuc7/8: added legends
Markus Kottlaender <markus@intevation.de>
parents: 2829
diff changeset
148 },
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
149 data() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
150 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
151 svg: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
152 diagram: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
153 navigation: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
154 dimensions: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
155 extent: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
156 scale: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
157 axes: null
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
158 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
159 },
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 computed: {
2829
4a1211727d5f client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
161 ...mapState("gauges", [
4a1211727d5f client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
162 "longtermWaterlevels",
4a1211727d5f client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
163 "yearWaterlevels",
3058
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
164 "yearCompare",
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
165 "longtermInterval"
2829
4a1211727d5f client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
166 ]),
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
167 ...mapGetters("gauges", ["selectedGauge"])
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
168 },
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169 methods: {
3025
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
170 downloadPDF() {
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
171 var svg = this.svg._groups[0][0].outerHTML;
3058
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
172 var gaugeInfo =
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
173 this.selectedGauge.properties.objname +
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
174 " (" +
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
175 this.selectedGauge.id
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
176 .split(".")[1]
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
177 .replace(/[()]/g, "")
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
178 .split(",")[3] +
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
179 "): Hydrological Conditions " +
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
180 this.longtermInterval.join(" - ");
3025
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
181 if (svg) {
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
182 svg = svg.replace(/\r?\n|\r/g, "").trim();
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
183 }
3032
3aca036e11f1 client: improve pdf properties for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3025
diff changeset
184 var pdf = new jsPDF("l", "mm", "a3");
3025
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
185 var canvas = document.createElement("canvas");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
186 canvas.width = window.innerWidth;
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
187 canvas.height = window.innerHeight / 2;
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
188 canvg(canvas, svg, {
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
189 ignoreMouse: true,
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
190 ignoreAnimation: true,
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
191 ignoreDimensions: true
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
192 });
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
193 var imgData = canvas.toDataURL("image/png");
3032
3aca036e11f1 client: improve pdf properties for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3025
diff changeset
194 pdf.addImage(imgData, "PNG", 40, 60, 380, 130);
3058
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
195 // Gauge info as as title
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
196 pdf.setTextColor("steelblue");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
197 pdf.setFontSize(22);
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
198 pdf.setFontStyle("bold");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
199 pdf.text(gaugeInfo, 108, 30);
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
200 // Diagram legend
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
201 pdf.setFontSize(10);
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
202 pdf.setTextColor("black");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
203 pdf.setDrawColor("white");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
204 pdf.setFillColor("red");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
205 pdf.circle(60, 190, 2, "FD");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
206 pdf.text(63, 191, "" + this.yearCompare);
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
207 pdf.setFillColor("orange");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
208 pdf.circle(60, 195, 2, "FD");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
209 pdf.text(63, 196, "Q25%");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
210 pdf.setFillColor("black");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
211 pdf.circle(60, 200, 2, "FD");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
212 pdf.text(63, 201, "Median ");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
213 pdf.setFillColor("purple");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
214 pdf.circle(60, 205, 2, "FD");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
215 pdf.text(63, 206, "Q75%");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
216 pdf.setFillColor("lightsteelblue");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
217 pdf.circle(60, 210, 2, "FD");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
218 pdf.text(63, 211, "Long-term Amplitude");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
219 pdf.save(
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
220 this.selectedGauge.properties.objname +
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
221 " Hydrological-condition Diagram.pdf"
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3046
diff changeset
222 );
3025
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
223 },
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
224 drawDiagram() {
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
225 // remove old diagram
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
226 d3.select(".diagram-container svg").remove();
2813
49c1570919ae client: spuc8: use new endpoints to fetch year based and longterm waterlevel data
Markus Kottlaender <markus@intevation.de>
parents: 2791
diff changeset
227 if (!this.selectedGauge || !this.longtermWaterlevels.length) return;
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
228
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
229 // PREPARE HELPERS
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
230
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
231 // HDC/LDC/MW for the selected gauge
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
232 const refWaterLevels = JSON.parse(
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
233 this.selectedGauge.properties.reference_water_levels
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
234 );
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
235
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
236 // dimensions (widths, heights, margins)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
237 this.dimensions = this.getDimensions();
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
238
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
239 // get min/max values for date and waterlevel axis
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
240 this.extent = this.getExtent(refWaterLevels);
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
241
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
242 // scaling helpers
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
243 this.scale = this.getScale();
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
244
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
245 // creating the axes based on the scales
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
246 this.axes = this.getAxes();
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
247
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
248 // DRAW DIAGRAM/NAVIGATION AREAS
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
249
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
250 // create svg
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
251 this.svg = d3
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
252 .select(".diagram-container")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
253 .append("svg")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
254 .attr("width", "100%")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
255 .attr("height", "100%");
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
256
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
257 // create container for main diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
258 this.diagram = this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
259 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
260 .attr("class", "main")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
261 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
262 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
263 `translate(${this.dimensions.mainMargin.left}, ${
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
264 this.dimensions.mainMargin.top
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
265 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
266 );
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
267
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
268 // create container for navigation diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
269 this.navigation = this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
270 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
271 .attr("class", "nav")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
272 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
273 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
274 `translate(${this.dimensions.navMargin.left}, ${
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
275 this.dimensions.navMargin.top
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
276 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
277 );
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
278
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
279 // define visible area, everything outside this area will be hidden
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
280 this.svg
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
281 .append("defs")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
282 .append("clipPath")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
283 .attr("id", "clip")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
284 .append("rect")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
285 .attr("width", this.dimensions.width)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
286 .attr("height", this.dimensions.mainHeight);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
287
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
288 // DRAW DIAGRAM PARTS
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
289
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
290 // Each drawSomething function (with the exception of drawRefLines)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
291 // returns a fuction to update the respective chart/area/etc. These
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
292 // updater functions are used by the zoom feature to rescale all elements.
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
293 const updaters = [];
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
294
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
295 // draw
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
296 this.drawRefLines(refWaterLevels); // static, doesn't need an updater
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
297 updaters.push(this.drawAxes());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
298 updaters.push(this.drawNowLines());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
299 updaters.push(this.drawWaterlevelMinMaxAreaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
300 updaters.push(this.drawWaterlevelLineChart("median"));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
301 updaters.push(this.drawWaterlevelLineChart("q25"));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
302 updaters.push(this.drawWaterlevelLineChart("q75"));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
303 updaters.push(this.drawWaterlevelLineChart("mean", this.yearWaterlevels));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
304
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
305 // INTERACTIONS
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
306
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
307 // create rectanlge on the main chart area to capture mouse events
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
308 const eventRect = this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
309 .append("rect")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
310 .attr("class", "zoom")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
311 .attr("width", this.dimensions.width)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
312 .attr("height", this.dimensions.mainHeight)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
313 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
314 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
315 `translate(${this.dimensions.mainMargin.left}, ${
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
316 this.dimensions.mainMargin.top
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
317 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
318 );
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
319
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
320 this.createZoom(updaters, eventRect);
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
321 this.createTooltips(eventRect);
3025
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
322 this.setInlineStyles();
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
323 },
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
324 setInlineStyles() {
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
325 this.svg.selectAll(".hide").attr("fill-opacity", 0);
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
326 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
327 .selectAll(".line")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
328 .attr("clip-path", "url(#clip)")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
329 .attr("stroke-width", 2)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
330 .attr("fill", "none");
3060
cebbc1a8987b client: linting
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3059
diff changeset
331 this.svg.selectAll(".line.mean").attr("stroke", "red");
cebbc1a8987b client: linting
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3059
diff changeset
332 this.svg.selectAll(".line.median").attr("stroke", "black");
cebbc1a8987b client: linting
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3059
diff changeset
333 this.svg.selectAll(".line.q25").attr("stroke", "orange");
cebbc1a8987b client: linting
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3059
diff changeset
334 this.svg.selectAll(".line.q75").attr("stroke", "purple");
3025
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
335 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
336 .selectAll(".area")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
337 .attr("clip-path", "url(#clip)")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
338 .attr("stroke", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
339 .attr("fill", "lightsteelblue");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
340 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
341 .selectAll(".hdc-line, .ldc-line, .mw-line")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
342 .attr("stroke-width", 1)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
343 .attr("fill", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
344 .attr("clip-path", "url(#clip)");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
345 this.svg.selectAll(".hdc-line").attr("stroke", "red");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
346 this.svg.selectAll(".ldc-line").attr("stroke", "green");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
347 this.svg.selectAll(".mw-line").attr("stroke", "grey");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
348 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
349 .selectAll(".ref-waterlevel-label")
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
350 .style("font-size", "11px")
3025
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
351 .attr("fill", "#999");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
352 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
353 .selectAll(".now-line")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
354 .attr("stroke", "#999")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
355 .attr("stroke-width", 1)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
356 .attr("stroke-dasharray", "5, 5")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
357 .attr("clip-path", "url(#clip)");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
358 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
359 .selectAll(".now-line-label")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
360 .attr("fill", "#999")
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
361 .style("font-size", "11px");
3025
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
362 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
363 .selectAll(".tick line")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
364 .attr("stroke-dasharray", 5)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
365 .attr("stroke", " #ccc");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
366 this.svg.selectAll(".tick text").attr("fill", "black");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
367 this.svg.selectAll(".domain").attr("stroke", "black");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
368
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
369 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
370 .selectAll(".zoom")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
371 .attr("cursor", "move")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
372 .attr("fill", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
373 .attr("pointer-events", "all");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
374 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
375 .selectAll(".brush")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
376 .selectAll(".selection")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
377 .attr("stroke", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
378 .attr("fill-opacity", 0.2);
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
379 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
380 .selectAll(".brush")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
381 .selectAll(".handle")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
382 .attr("stroke", "rgba(23, 162, 184, 0.5)")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents: 2986
diff changeset
383 .attr("fill", "rgba(23, 162, 184, 0.5)");
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
384 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
385 .selectAll(".chart-dot")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
386 .attr("stroke-opacity", 0)
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
387 .attr("fill-opacity", 0)
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
388 .attr("stroke", "steelblue")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
389 .style("pointer-events", "none")
3046
c764c73f44b4 client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3045
diff changeset
390 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3045
diff changeset
391 .attr("fill-opacity", "0.1s");
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
392 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
393 .selectAll(".chart-tooltip")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
394 .attr("fill-opacity", 0)
3046
c764c73f44b4 client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3045
diff changeset
395 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3045
diff changeset
396 .attr("fill-opacity", "0.3s");
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
397 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
398 .selectAll(".chart-tooltip rect")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
399 .attr("fill", "#fff")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
400 .attr("stroke", "#ccc");
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
401 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
402 .selectAll(".chart-tooltip text")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
403 .attr("fill", "666")
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
404 .style("font-size", "0.8em");
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
405 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
406 getDimensions() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
407 // dimensions and margins
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
408 const svgWidth = document.querySelector(".diagram-container").clientWidth;
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
409 const svgHeight = document.querySelector(".diagram-container")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
410 .clientHeight;
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
411 const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
412 const navMargin = {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
413 top: svgHeight - mainMargin.top - 65,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
414 right: 20,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
415 bottom: 30,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
416 left: 80
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
417 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
418 const width = +svgWidth - mainMargin.left - mainMargin.right;
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
419 const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom;
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
420 const navHeight = +svgHeight - navMargin.top - navMargin.bottom;
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
421
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
422 return { width, mainHeight, navHeight, mainMargin, navMargin };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
423 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
424 getExtent(refWaterLevels) {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
425 const waterlevelsRelevantForExtent = [];
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
426 this.longtermWaterlevels.forEach(wl => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
427 waterlevelsRelevantForExtent.push(wl.min, wl.max);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
428 });
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
429 waterlevelsRelevantForExtent.push(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
430 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
431 Math.max(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
432 refWaterLevels.LDC - (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
433 0
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
434 )
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
435 );
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
436 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
437 // set min/max values for the date axis
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
438 date: [startOfYear(new Date()), endOfYear(new Date())],
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
439 // set min/max values for the waterlevel axis
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
440 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
441 waterlevel: d3.extent(waterlevelsRelevantForExtent)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
442 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
443 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
444 getScale() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
445 // scaling helpers to convert real world values into pixels
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
446 const x = d3.scaleTime().range([0, this.dimensions.width]);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
447 const y = d3.scaleLinear().range([this.dimensions.mainHeight, 0]);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
448 const x2 = d3.scaleTime().range([0, this.dimensions.width]);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
449 const y2 = d3.scaleLinear().range([this.dimensions.navHeight, 0]);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
450
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
451 // setting the min and max values for the diagram axes
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
452 x.domain(d3.extent(this.extent.date));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
453 y.domain(this.extent.waterlevel);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
454 x2.domain(x.domain());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
455 y2.domain(y.domain());
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
456
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
457 return { x, y, x2, y2 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
458 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
459 getAxes() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
460 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
461 x: d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
462 .axisTop(this.scale.x)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
463 .tickSizeInner(this.dimensions.mainHeight)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
464 .tickSizeOuter(0)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
465 .tickFormat(date => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
466 // make the x-axis label formats dynamic, based on zoom
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
467 // but never display year numbers since they don't make any sense in
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
468 // this diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
469 return (d3.timeSecond(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
470 ? d3.timeFormat(".%L")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
471 : d3.timeMinute(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
472 ? d3.timeFormat(":%S")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
473 : d3.timeHour(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
474 ? d3.timeFormat("%I:%M")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
475 : d3.timeDay(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
476 ? d3.timeFormat("%I %p")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
477 : d3.timeMonth(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
478 ? d3.timeWeek(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
479 ? d3.timeFormat("%a %d")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
480 : d3.timeFormat("%b %d")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
481 : d3.timeFormat("%B"))(date);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
482 }),
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
483 y: d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
484 .axisRight(this.scale.y)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
485 .tickSizeInner(this.dimensions.width)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
486 .tickSizeOuter(0),
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
487 x2: d3.axisBottom(this.scale.x2)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
488 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
489 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
490 drawNowLines() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
491 const nowLine = d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
492 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
493 .x(d => this.scale.x(d.x))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
494 .y(d => this.scale.y(d.y));
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
495
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
496 const nowLabel = selection => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
497 selection.attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
498 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
499 `translate(${this.scale.x(new Date())}, ${this.scale.y(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
500 this.extent.waterlevel[1] - 16
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
501 )})`
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
502 );
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
503 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
504
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
505 // draw in main
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
506 this.diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
507 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
508 .datum([
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
509 { x: new Date(), y: this.extent.waterlevel[0] },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
510 { x: new Date(), y: this.extent.waterlevel[1] - 20 }
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
511 ])
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
512 .attr("class", "now-line")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
513 .attr("d", nowLine);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
514 this.diagram // label
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
515 .append("text")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
516 .text(this.$gettext("Now"))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
517 .attr("class", "now-line-label")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
518 .attr("text-anchor", "middle")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
519 .call(nowLabel);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
520
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
521 // draw in nav
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
522 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
523 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
524 .datum([
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
525 { x: new Date(), y: this.extent.waterlevel[0] },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
526 { x: new Date(), y: this.extent.waterlevel[1] - 20 }
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
527 ])
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
528 .attr("class", "now-line")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
529 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
530 "d",
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
531 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
532 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
533 .x(d => this.scale.x2(d.x))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
534 .y(d => this.scale.y2(d.y))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
535 );
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
536
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
537 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
538 this.diagram.select(".now-line").attr("d", nowLine);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
539 this.diagram.select(".now-line-label").call(nowLabel);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
540 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
541 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
542 drawAxes() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
543 this.diagram
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
544 .append("g")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
545 .attr("class", "axis--x")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
546 .attr("transform", `translate(0, ${this.dimensions.mainHeight})`)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
547 .call(this.axes.x)
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
548 .selectAll(".tick text")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
549 .attr("y", 15);
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
550 this.diagram // label
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
551 .append("text")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
552 .text(this.$gettext("Waterlevel [cm]"))
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
553 .attr("text-anchor", "middle")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
554 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
555 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
556 `translate(-45, ${this.dimensions.mainHeight / 2}) rotate(-90)`
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
557 );
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
558 this.diagram
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
559 .append("g")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
560 .call(this.axes.y)
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
561 .selectAll(".tick text")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
562 .attr("x", -25);
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
563
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
564 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
565 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
566 .attr("class", "axis axis--x")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
567 .attr("transform", `translate(0, ${this.dimensions.navHeight})`)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
568 .call(this.axes.x2);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
569
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
570 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
571 this.diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
572 .select(".axis--x")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
573 .call(this.axes.x)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
574 .selectAll(".tick text")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
575 .attr("y", 15);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
576 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
577 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
578 drawWaterlevelMinMaxAreaChart() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
579 const areaChart = isNav =>
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
580 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
581 .area()
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
582 .x(d => this.scale[isNav ? "x2" : "x"](d.date))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
583 .y0(d => this.scale[isNav ? "y2" : "y"](d.min))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
584 .y1(d => this.scale[isNav ? "y2" : "y"](d.max));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
585
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
586 this.diagram
2791
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
587 .append("path")
2813
49c1570919ae client: spuc8: use new endpoints to fetch year based and longterm waterlevel data
Markus Kottlaender <markus@intevation.de>
parents: 2791
diff changeset
588 .datum(this.longtermWaterlevels)
2791
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
589 .attr("class", "area")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
590 .attr("d", areaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
591
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
592 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
593 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
594 .datum(this.longtermWaterlevels)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
595 .attr("class", "area")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
596 .attr("d", areaChart(true));
2791
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
597
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
598 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
599 this.diagram.select(".area").attr("d", areaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
600 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
601 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
602 drawWaterlevelLineChart(type, data) {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
603 const lineChart = type =>
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
604 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
605 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
606 .x(d => this.scale.x(d.date))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
607 .y(d => this.scale.y(d[type]))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
608 .curve(d3.curveLinear);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
609 this.diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
610 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
611 .attr("class", "line " + type)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
612 .datum(data || this.longtermWaterlevels)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
613 .attr("d", lineChart(type));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
614
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
615 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
616 this.diagram.select(".line." + type).attr("d", lineChart(type));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
617 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
618 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
619 drawRefLines(refWaterLevels) {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
620 const refWaterlevelLine = d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
621 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
622 .x(d => this.scale.x(d.x))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
623 .y(d => this.scale.y(d.y));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
624
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
625 // HDC
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
626 this.diagram
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
627 .append("path")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
628 .datum([
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
629 { x: 0, y: refWaterLevels.HDC },
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
630 { x: this.extent.date[1], y: refWaterLevels.HDC }
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
631 ])
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
632 .attr("class", "hdc-line")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
633 .attr("d", refWaterlevelLine);
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
634 this.diagram // label
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
635 .append("text")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
636 .text(`HDC (${refWaterLevels.HDC})`)
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
637 .attr("class", "ref-waterlevel-label")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
638 .attr("x", 5)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
639 .attr("y", this.scale.y(refWaterLevels.HDC) - 3);
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
640 // LDC
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
641 this.diagram
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
642 .append("path")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
643 .datum([
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
644 { x: 0, y: refWaterLevels.LDC },
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
645 { x: this.extent.date[1], y: refWaterLevels.LDC }
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
646 ])
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
647 .attr("class", "ldc-line")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
648 .attr("d", refWaterlevelLine);
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
649 this.diagram // label
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
650 .append("text")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
651 .text(`LDC (${refWaterLevels.LDC})`)
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
652 .attr("class", "ref-waterlevel-label")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
653 .attr("x", 5)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
654 .attr("y", this.scale.y(refWaterLevels.LDC) - 3);
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
655 // MW
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
656 this.diagram
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
657 .append("path")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
658 .datum([
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
659 { x: 0, y: refWaterLevels.MW },
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
660 { x: this.extent.date[1], y: refWaterLevels.MW }
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
661 ])
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
662 .attr("class", "mw-line")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
663 .attr("d", refWaterlevelLine);
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
664 this.diagram // label
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
665 .append("text")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
666 .text(`MW (${refWaterLevels.MW})`)
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
667 .attr("class", "ref-waterlevel-label")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
668 .attr("x", 5)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
669 .attr("y", this.scale.y(refWaterLevels.MW) - 3);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
670 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
671 createZoom(updaters, eventRect) {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
672 const brush = d3
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
673 .brushX()
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
674 .handleSize(4)
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
675 .extent([[0, 0], [this.dimensions.width, this.dimensions.navHeight]]);
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
676
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
677 const zoom = d3
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
678 .zoom()
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
679 .scaleExtent([1, Infinity])
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
680 .translateExtent([
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
681 [0, 0],
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
682 [this.dimensions.width, this.dimensions.mainHeight]
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
683 ])
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
684 .extent([[0, 0], [this.dimensions.width, this.dimensions.mainHeight]]);
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
685
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
686 brush.on("brush end", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
687 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
688 return; // ignore brush-by-zoom
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
689 let s = d3.event.selection || this.scale.x2.range();
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
690 this.scale.x.domain(s.map(this.scale.x2.invert, this.scale.x2));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
691 updaters.forEach(u => u && u());
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
692 this.setInlineStyles();
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
693 this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
694 .select(".zoom")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
695 .call(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
696 zoom.transform,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
697 d3.zoomIdentity
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
698 .scale(this.dimensions.width / (s[1] - s[0]))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
699 .translate(-s[0], 0)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
700 );
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
701 });
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
702
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
703 zoom.on("zoom", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
704 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
705 return; // ignore zoom-by-brush
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
706 let t = d3.event.transform;
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
707 this.scale.x.domain(t.rescaleX(this.scale.x2).domain());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
708 updaters.forEach(u => u && u());
3045
44dc837638d9 client: improve styles for pdf-gen of diagrams
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3032
diff changeset
709 this.setInlineStyles();
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
710 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
711 .select(".brush")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
712 .call(brush.move, this.scale.x.range().map(t.invertX, t));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
713 });
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
714 zoom.on("start", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
715 this.svg.select(".chart-dot").style("opacity", 0);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
716 this.svg.select(".chart-tooltip").style("opacity", 0);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
717 });
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
718
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
719 this.navigation
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
720 .append("g")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
721 .attr("class", "brush")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
722 .call(brush)
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
723 .call(brush.move, this.scale.x.range());
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
724
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
725 eventRect.call(zoom);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
726 },
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
727 createTooltips(eventRect) {
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
728 // create clippable container for the dot
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
729 this.diagram
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
730 .append("g")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
731 .attr("class", "chart-dots")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
732 .append("circle")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
733 .attr("class", "chart-dot")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
734 .attr("r", 4);
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
735
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
736 // create container for the tooltip
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
737 const tooltip = this.diagram.append("g").attr("class", "chart-tooltip");
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
738 tooltip
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
739 .append("rect")
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
740 .attr("rx", "0.25em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
741 .attr("ry", "0.25em");
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
742
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
743 // create container for multiple text rows
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
744 const tooltipText = tooltip.append("text").attr("text-anchor", "middle");
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
745
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
746 // padding inside the tooltip box and diagram padding to determine left
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
747 // and right offset from the diagram boundaries for the tooltip position.
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
748 const tooltipPadding = 10;
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
749 const diagramPadding = 5;
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
750
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
751 eventRect
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
752 .on("mouseover", () => {
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
753 this.diagram.select(".chart-dot").style("opacity", 1);
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
754 this.diagram.select(".chart-tooltip").style("opacity", 1);
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
755 })
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
756 .on("mouseout", () => {
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
757 this.diagram.select(".chart-dot").style("opacity", 0);
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
758 this.diagram.select(".chart-tooltip").style("opacity", 0);
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
759 })
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
760 .on("mousemove", () => {
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
761 // find data point closest to mouse
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
762 const x0 = this.scale.x.invert(
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
763 d3.mouse(document.querySelector(".zoom"))[0]
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
764 ),
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
765 i = d3.bisector(d => d.date).left(this.longtermWaterlevels, x0, 1),
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
766 d0 = this.longtermWaterlevels[i - 1],
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
767 d1 = this.longtermWaterlevels[i] || d0,
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
768 d = x0 - d0.date > d1.date - x0 ? d1 : d0;
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
769
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
770 const coords = {
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
771 x: this.scale.x(d.date),
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
772 y: this.scale.y(d.median)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
773 };
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
774
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
775 // position the dot
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
776 this.diagram
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
777 .select(".chart-dot")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
778 .style("opacity", 1)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
779 .attr("transform", `translate(${coords.x}, ${coords.y})`);
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
780
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
781 // remove current texts
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
782 tooltipText.selectAll("tspan").remove();
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
783
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
784 // write date
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
785 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
786 .append("tspan")
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
787 .attr("dominant-baseline", "hanging")
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
788 .attr("text-anchor", "middle")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
789 .text(
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
790 d.date.toLocaleString([], {
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
791 year: "2-digit",
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
792 month: "2-digit",
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
793 day: "2-digit"
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
794 })
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
795 );
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
796
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
797 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
798 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
799 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
800 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
801 .attr("dy", "1.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
802 .attr("dominant-baseline", "hanging")
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
803 .attr("text-anchor", "middle")
2829
4a1211727d5f client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
804 .text(`Q75%: ${d.q75} cm`);
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
805 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
806 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
807 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
808 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
809 .attr("dy", "2.6em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
810 .attr("dominant-baseline", "hanging")
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
811 .attr("text-anchor", "middle")
2829
4a1211727d5f client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
812 .text(`Median: ${d.median} cm`);
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
813 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
814 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
815 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
816 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
817 .attr("dy", "3.8em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
818 .attr("dominant-baseline", "hanging")
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
819 .attr("text-anchor", "middle")
2829
4a1211727d5f client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
820 .text(`Q25%: ${d.q25} cm`);
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
821 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
822 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
823 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
824 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
825 .attr("dy", "5em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
826 .attr("dominant-baseline", "hanging")
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
827 .attr("text-anchor", "middle")
2829
4a1211727d5f client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
828 .text(`Max: ${d.max} cm`);
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
829 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
830 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
831 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
832 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
833 .attr("dy", "6.2em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
834 .attr("dominant-baseline", "hanging")
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
835 .attr("text-anchor", "middle")
2829
4a1211727d5f client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
836 .text(`Min: ${d.min} cm`);
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
837
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
838 const dYear = this.yearWaterlevels.find(
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
839 ywl => ywl.date.getTime() === d.date.getTime()
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
840 );
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
841 if (dYear) {
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
842 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
843 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
844 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
845 .attr("y", 0)
2842
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
846 .attr("dy", "7.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox
Markus Kottlaender <markus@intevation.de>
parents: 2839
diff changeset
847 .attr("dominant-baseline", "hanging")
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
848 .attr("text-anchor", "middle")
2829
4a1211727d5f client: spuc8: implemented year controls
Markus Kottlaender <markus@intevation.de>
parents: 2824
diff changeset
849 .text(`${this.yearCompare}: ${dYear.mean.toFixed(1)} cm`);
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
850 }
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
851
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
852 // get text dimensions
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
853 const textBBox = tooltipText.node().getBBox();
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
854
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
855 this.diagram
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
856 .selectAll(".chart-tooltip text tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
857 .attr("x", textBBox.width / 2 + tooltipPadding)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
858 .attr("y", tooltipPadding);
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
859
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
860 // position and scale tooltip box
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
861 const xMax =
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
862 this.dimensions.width -
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
863 (textBBox.width + diagramPadding + tooltipPadding * 2);
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
864 const tooltipX = Math.max(
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
865 diagramPadding,
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
866 Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
867 );
2824
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2822
diff changeset
868 let tooltipY = coords.y - (textBBox.height + tooltipPadding * 2) - 10;
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2822
diff changeset
869 if (coords.y < textBBox.height + tooltipPadding * 2) {
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2822
diff changeset
870 tooltipY = coords.y + 10;
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2822
diff changeset
871 }
d7c4169516fa client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents: 2822
diff changeset
872
2822
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
873 this.diagram
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
874 .select(".chart-tooltip")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
875 .style("opacity", 1)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
876 .attr("transform", `translate(${tooltipX}, ${tooltipY})`)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
877 .select("rect")
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
878 .attr("width", textBBox.width + tooltipPadding * 2)
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
879 .attr("height", textBBox.height + tooltipPadding * 2);
f2e4c39cdcfa client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents: 2815
diff changeset
880 });
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
881 }
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
882 },
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
883 created() {
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
884 window.addEventListener("resize", debounce(this.drawDiagram), 100);
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
885 },
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
886 mounted() {
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
887 this.drawDiagram();
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
888 },
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
889 updated() {
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
890 this.drawDiagram();
2986
7ee9a3ef90d4 client: remove resize event listener from diagrams after they are closed
Markus Kottlaender <markus@intevation.de>
parents: 2843
diff changeset
891 },
7ee9a3ef90d4 client: remove resize event listener from diagrams after they are closed
Markus Kottlaender <markus@intevation.de>
parents: 2843
diff changeset
892 destroyed() {
7ee9a3ef90d4 client: remove resize event listener from diagrams after they are closed
Markus Kottlaender <markus@intevation.de>
parents: 2843
diff changeset
893 window.addEventListener("resize", debounce(this.drawDiagram));
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
894 }
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
895 };
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
896 </script>