Mercurial > gemma
annotate client/src/components/gauge/HydrologicalConditions.vue @ 2824:d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Tooltips now also respect the top and bottom boundary of the diagram and will be positioned
above or below the chart accordingly.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 27 Mar 2019 12:19:14 +0100 |
parents | f2e4c39cdcfa |
children | 4a1211727d5f |
rev | line source |
---|---|
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
2 <div |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 class="d-flex flex-fill justify-content-center align-items-center diagram-container" |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 > |
2813
49c1570919ae
client: spuc8: use new endpoints to fetch year based and longterm waterlevel data
Markus Kottlaender <markus@intevation.de>
parents:
2791
diff
changeset
|
5 <div v-if="!longtermWaterlevels.length"> |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
6 <translate>No data available.</translate> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
7 </div> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
8 </div> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
9 </template> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
10 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
11 <style lang="sass" scoped> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
12 .diagram-container |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
13 /deep/ |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
14 .hide |
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
15 opacity: 0 |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
16 .line |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
17 clip-path: url(#clip) |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
18 stroke-width: 2 |
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
19 fill: none |
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
20 &.mean |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
21 stroke: red |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
22 &.median |
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
23 stroke: black |
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
24 &.q25 |
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
25 stroke: orange |
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
26 &.q75 |
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
27 stroke: purple |
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
28 .area |
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
29 clip-path: url(#clip) |
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
30 stroke: none |
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
31 fill: lightsteelblue |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 .hdc-line, |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 .ldc-line, |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 .mw-line |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 stroke-width: 1 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 fill: none |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 clip-path: url(#clip) |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 .hdc-line |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 stroke: red |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 .ldc-line |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 stroke: green |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 .mw-line |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 stroke: grey |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 .ref-waterlevel-label |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 font-size: 11px |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 fill: #999 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
48 .now-line |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
49 stroke: #999 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
50 stroke-width: 1 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
51 stroke-dasharray: 5, 5 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
52 clip-path: url(#clip) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
53 .now-line-label |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
54 font-size: 11px |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
55 fill: #999 |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 .tick |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 line |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 stroke-dasharray: 5 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 stroke: #ccc |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 .zoom |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 cursor: move |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 fill: none |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 pointer-events: all |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 .brush |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 .selection |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 stroke: none |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 fill-opacity: 0.2 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 .handle |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 stroke: rgba($color-info, 0.5) |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 fill: rgba($color-info, 0.5) |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
73 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
74 .chart-dots |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
75 clip-path: url(#clip) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
76 .chart-dot |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
77 fill: black |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
78 stroke: black |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
79 pointer-events: none |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
80 opacity: 0 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
81 transition: opacity 0.1s |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
82 .chart-tooltip |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
83 opacity: 0 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
84 transition: opacity 0.3s |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
85 rect |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
86 fill: #fff |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
87 stroke: #ccc |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
88 text |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
89 fill: #666 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
90 font-size: 12px |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 </style> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 <script> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
94 /* 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
|
95 * without warranty, see README.md and license for details. |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
96 * |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
97 * SPDX-License-Identifier: AGPL-3.0-or-later |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
98 * License-Filename: LICENSES/AGPL-3.0.txt |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
99 * |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
100 * Copyright (C) 2018 by via donau |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
101 * – Österreichische Wasserstraßen-Gesellschaft mbH |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 * Software engineering by Intevation GmbH |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 * |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 * Author(s): |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 * Markus Kottländer <markus.kottlaender@intevation.de> |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 */ |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 import { mapState, mapGetters } from "vuex"; |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
109 import * as d3 from "d3"; |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 import debounce from "debounce"; |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 import { startOfYear, endOfYear } from "date-fns"; |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 export default { |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
114 data() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
115 return { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
116 svg: null, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
117 diagram: null, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
118 navigation: null, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
119 dimensions: null, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
120 extent: null, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
121 scale: null, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
122 axes: null |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
123 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
124 }, |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 computed: { |
2813
49c1570919ae
client: spuc8: use new endpoints to fetch year based and longterm waterlevel data
Markus Kottlaender <markus@intevation.de>
parents:
2791
diff
changeset
|
126 ...mapState("gauges", ["longtermWaterlevels", "yearWaterlevels"]), |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
127 ...mapGetters("gauges", ["selectedGauge"]) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 }, |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
129 methods: { |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
130 drawDiagram() { |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
131 // remove old diagram |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
132 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
|
133 if (!this.selectedGauge || !this.longtermWaterlevels.length) return; |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
134 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
135 // PREPARE HELPERS |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
136 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
137 // HDC/LDC/MW for the selected gauge |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
138 const refWaterLevels = JSON.parse( |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
139 this.selectedGauge.properties.reference_water_levels |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
140 ); |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
141 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
142 // dimensions (widths, heights, margins) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
143 this.dimensions = this.getDimensions(); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
144 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
145 // 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
|
146 this.extent = this.getExtent(refWaterLevels); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
147 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
148 // scaling helpers |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
149 this.scale = this.getScale(); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
150 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
151 // creating the axes based on the scales |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
152 this.axes = this.getAxes(); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
153 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
154 // DRAW DIAGRAM/NAVIGATION AREAS |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
155 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
156 // create svg |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
157 this.svg = d3 |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
158 .select(".diagram-container") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
159 .append("svg") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
160 .attr("width", "100%") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
161 .attr("height", "100%"); |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
162 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
163 // create container for main diagram |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
164 this.diagram = this.svg |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
165 .append("g") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
166 .attr("class", "main") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
167 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
168 "transform", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
169 `translate(${this.dimensions.mainMargin.left}, ${ |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
170 this.dimensions.mainMargin.top |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
171 })` |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
172 ); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
173 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
174 // create container for navigation diagram |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
175 this.navigation = this.svg |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
176 .append("g") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
177 .attr("class", "nav") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
178 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
179 "transform", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
180 `translate(${this.dimensions.navMargin.left}, ${ |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
181 this.dimensions.navMargin.top |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
182 })` |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
183 ); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
184 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
185 // 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
|
186 this.svg |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
187 .append("defs") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
188 .append("clipPath") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
189 .attr("id", "clip") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
190 .append("rect") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
191 .attr("width", this.dimensions.width) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
192 .attr("height", this.dimensions.mainHeight); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
193 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
194 // DRAW DIAGRAM PARTS |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
195 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
196 // 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
|
197 // 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
|
198 // 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
|
199 const updaters = []; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
200 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
201 // draw |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
202 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
|
203 updaters.push(this.drawAxes()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
204 updaters.push(this.drawNowLines()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
205 updaters.push(this.drawWaterlevelMinMaxAreaChart()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
206 updaters.push(this.drawWaterlevelLineChart("median")); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
207 updaters.push(this.drawWaterlevelLineChart("q25")); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
208 updaters.push(this.drawWaterlevelLineChart("q75")); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
209 updaters.push(this.drawWaterlevelLineChart("mean", this.yearWaterlevels)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
210 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
211 // INTERACTIONS |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
212 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
213 // 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
|
214 const eventRect = this.svg |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
215 .append("rect") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
216 .attr("class", "zoom") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
217 .attr("width", this.dimensions.width) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
218 .attr("height", this.dimensions.mainHeight) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
219 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
220 "transform", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
221 `translate(${this.dimensions.mainMargin.left}, ${ |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
222 this.dimensions.mainMargin.top |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
223 })` |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
224 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
225 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
226 this.createZoom(updaters, eventRect); |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
227 this.createTooltips(eventRect); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
228 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
229 getDimensions() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
230 // dimensions and margins |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
231 const svgWidth = document.querySelector(".diagram-container").clientWidth; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
232 const svgHeight = document.querySelector(".diagram-container") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
233 .clientHeight; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
234 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
|
235 const navMargin = { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
236 top: svgHeight - mainMargin.top - 65, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
237 right: 20, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
238 bottom: 30, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
239 left: 80 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
240 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
241 const width = +svgWidth - mainMargin.left - mainMargin.right; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
242 const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
243 const navHeight = +svgHeight - navMargin.top - navMargin.bottom; |
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 return { width, mainHeight, navHeight, mainMargin, navMargin }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
246 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
247 getExtent(refWaterLevels) { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
248 const waterlevelsRelevantForExtent = []; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
249 this.longtermWaterlevels.forEach(wl => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
250 waterlevelsRelevantForExtent.push(wl.min, wl.max); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
251 }); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
252 waterlevelsRelevantForExtent.push( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
253 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
254 Math.max( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
255 refWaterLevels.LDC - (refWaterLevels.HDC - refWaterLevels.LDC) / 4, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
256 0 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
257 ) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
258 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
259 return { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
260 // 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
|
261 date: [startOfYear(new Date()), endOfYear(new Date())], |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
262 // 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
|
263 // 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
|
264 waterlevel: d3.extent(waterlevelsRelevantForExtent) |
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 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
267 getScale() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
268 // 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
|
269 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
|
270 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
|
271 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
|
272 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
|
273 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
274 // 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
|
275 x.domain(d3.extent(this.extent.date)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
276 y.domain(this.extent.waterlevel); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
277 x2.domain(x.domain()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
278 y2.domain(y.domain()); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
279 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
280 return { x, y, x2, y2 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
281 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
282 getAxes() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
283 return { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
284 x: d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
285 .axisTop(this.scale.x) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
286 .tickSizeInner(this.dimensions.mainHeight) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
287 .tickSizeOuter(0) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
288 .tickFormat(date => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
289 // 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
|
290 // 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
|
291 // this diagram |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
292 return (d3.timeSecond(date) < date |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
293 ? d3.timeFormat(".%L") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
294 : d3.timeMinute(date) < date |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
295 ? d3.timeFormat(":%S") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
296 : d3.timeHour(date) < date |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
297 ? d3.timeFormat("%I:%M") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
298 : d3.timeDay(date) < date |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
299 ? d3.timeFormat("%I %p") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
300 : d3.timeMonth(date) < date |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
301 ? d3.timeWeek(date) < date |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
302 ? d3.timeFormat("%a %d") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
303 : d3.timeFormat("%b %d") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
304 : d3.timeFormat("%B"))(date); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
305 }), |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
306 y: d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
307 .axisRight(this.scale.y) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
308 .tickSizeInner(this.dimensions.width) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
309 .tickSizeOuter(0), |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
310 x2: d3.axisBottom(this.scale.x2) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
311 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
312 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
313 drawNowLines() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
314 const nowLine = d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
315 .line() |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
316 .x(d => this.scale.x(d.x)) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
317 .y(d => this.scale.y(d.y)); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
318 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
319 const nowLabel = selection => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
320 selection.attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
321 "transform", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
322 `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
|
323 this.extent.waterlevel[1] - 16 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
324 )})` |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
325 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
326 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
327 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
328 // draw in main |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
329 this.diagram |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
330 .append("path") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
331 .datum([ |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
332 { 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
|
333 { 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
|
334 ]) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
335 .attr("class", "now-line") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
336 .attr("d", nowLine); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
337 this.diagram // label |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
338 .append("text") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
339 .text(this.$gettext("Now")) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
340 .attr("class", "now-line-label") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
341 .attr("text-anchor", "middle") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
342 .call(nowLabel); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
343 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
344 // draw in nav |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
345 this.navigation |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
346 .append("path") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
347 .datum([ |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
348 { 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
|
349 { 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
|
350 ]) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
351 .attr("class", "now-line") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
352 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
353 "d", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
354 d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
355 .line() |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
356 .x(d => this.scale.x2(d.x)) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
357 .y(d => this.scale.y2(d.y)) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
358 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
359 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
360 return () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
361 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
|
362 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
|
363 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
364 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
365 drawAxes() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
366 this.diagram |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
367 .append("g") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
368 .attr("class", "axis--x") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
369 .attr("transform", `translate(0, ${this.dimensions.mainHeight})`) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
370 .call(this.axes.x) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
371 .selectAll(".tick text") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
372 .attr("y", 15); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
373 this.diagram // label |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
374 .append("text") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
375 .text(this.$gettext("Waterlevel [cm]")) |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
376 .attr("text-anchor", "middle") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
377 .attr( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
378 "transform", |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
379 `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
|
380 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
381 this.diagram |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
382 .append("g") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
383 .call(this.axes.y) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
384 .selectAll(".tick text") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
385 .attr("x", -25); |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
386 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
387 this.navigation |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
388 .append("g") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
389 .attr("class", "axis axis--x") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
390 .attr("transform", `translate(0, ${this.dimensions.navHeight})`) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
391 .call(this.axes.x2); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
392 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
393 return () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
394 this.diagram |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
395 .select(".axis--x") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
396 .call(this.axes.x) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
397 .selectAll(".tick text") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
398 .attr("y", 15); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
399 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
400 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
401 drawWaterlevelMinMaxAreaChart() { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
402 const areaChart = isNav => |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
403 d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
404 .area() |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
405 .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
|
406 .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
|
407 .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
|
408 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
409 this.diagram |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
410 .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
|
411 .datum(this.longtermWaterlevels) |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
412 .attr("class", "area") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
413 .attr("d", areaChart()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
414 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
415 this.navigation |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
416 .append("path") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
417 .datum(this.longtermWaterlevels) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
418 .attr("class", "area") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
419 .attr("d", areaChart(true)); |
2791
2b79c0871138
client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents:
2761
diff
changeset
|
420 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
421 return () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
422 this.diagram.select(".area").attr("d", areaChart()); |
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 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
425 drawWaterlevelLineChart(type, data) { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
426 const lineChart = type => |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
427 d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
428 .line() |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
429 .x(d => this.scale.x(d.date)) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
430 .y(d => this.scale.y(d[type])) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
431 .curve(d3.curveLinear); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
432 this.diagram |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
433 .append("path") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
434 .attr("class", "line " + type) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
435 .datum(data || this.longtermWaterlevels) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
436 .attr("d", lineChart(type)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
437 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
438 return () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
439 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
|
440 }; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
441 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
442 drawRefLines(refWaterLevels) { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
443 const refWaterlevelLine = d3 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
444 .line() |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
445 .x(d => this.scale.x(d.x)) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
446 .y(d => this.scale.y(d.y)); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
447 |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
448 // HDC |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
449 this.diagram |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
450 .append("path") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
451 .datum([ |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
452 { x: 0, y: refWaterLevels.HDC }, |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
453 { x: this.extent.date[1], y: refWaterLevels.HDC } |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
454 ]) |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
455 .attr("class", "hdc-line") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
456 .attr("d", refWaterlevelLine); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
457 this.diagram // label |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
458 .append("text") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
459 .text(`HDC (${refWaterLevels.HDC})`) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
460 .attr("class", "ref-waterlevel-label") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
461 .attr("x", 5) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
462 .attr("y", this.scale.y(refWaterLevels.HDC) - 3); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
463 // LDC |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
464 this.diagram |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
465 .append("path") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
466 .datum([ |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
467 { x: 0, y: refWaterLevels.LDC }, |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
468 { x: this.extent.date[1], y: refWaterLevels.LDC } |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
469 ]) |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
470 .attr("class", "ldc-line") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
471 .attr("d", refWaterlevelLine); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
472 this.diagram // label |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
473 .append("text") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
474 .text(`LDC (${refWaterLevels.LDC})`) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
475 .attr("class", "ref-waterlevel-label") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
476 .attr("x", 5) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
477 .attr("y", this.scale.y(refWaterLevels.LDC) - 3); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
478 // MW |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
479 this.diagram |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
480 .append("path") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
481 .datum([ |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
482 { x: 0, y: refWaterLevels.MW }, |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
483 { x: this.extent.date[1], y: refWaterLevels.MW } |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
484 ]) |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
485 .attr("class", "mw-line") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
486 .attr("d", refWaterlevelLine); |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
487 this.diagram // label |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
488 .append("text") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
489 .text(`MW (${refWaterLevels.MW})`) |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
490 .attr("class", "ref-waterlevel-label") |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
491 .attr("x", 5) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
492 .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
|
493 }, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
494 createZoom(updaters, eventRect) { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
495 const brush = d3 |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
496 .brushX() |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
497 .handleSize(4) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
498 .extent([[0, 0], [this.dimensions.width, this.dimensions.navHeight]]); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
499 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
500 const zoom = d3 |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
501 .zoom() |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
502 .scaleExtent([1, Infinity]) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
503 .translateExtent([ |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
504 [0, 0], |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
505 [this.dimensions.width, this.dimensions.mainHeight] |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
506 ]) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
507 .extent([[0, 0], [this.dimensions.width, this.dimensions.mainHeight]]); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
508 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
509 brush.on("brush end", () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
510 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
|
511 return; // ignore brush-by-zoom |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
512 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
|
513 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
|
514 updaters.forEach(u => u && u()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
515 this.svg |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
516 .select(".zoom") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
517 .call( |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
518 zoom.transform, |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
519 d3.zoomIdentity |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
520 .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
|
521 .translate(-s[0], 0) |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
522 ); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
523 }); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
524 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
525 zoom.on("zoom", () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
526 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
|
527 return; // ignore zoom-by-brush |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
528 let t = d3.event.transform; |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
529 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
|
530 updaters.forEach(u => u && u()); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
531 this.navigation |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
532 .select(".brush") |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
533 .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
|
534 }); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
535 zoom.on("start", () => { |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
536 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
|
537 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
|
538 }); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
539 |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
540 this.navigation |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
541 .append("g") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
542 .attr("class", "brush") |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
543 .call(brush) |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
544 .call(brush.move, this.scale.x.range()); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
545 |
2815
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
546 eventRect.call(zoom); |
12f053763be2
client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents:
2813
diff
changeset
|
547 }, |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
548 createTooltips(eventRect) { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
549 // create clippable container for the dot |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
550 this.diagram |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
551 .append("g") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
552 .attr("class", "chart-dots") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
553 .append("circle") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
554 .attr("class", "chart-dot") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
555 .attr("r", 4); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
556 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
557 // create container for the tooltip |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
558 const tooltip = this.diagram.append("g").attr("class", "chart-tooltip"); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
559 tooltip |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
560 .append("rect") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
561 .attr("rx", "0.25rem") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
562 .attr("ry", "0.25rem"); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
563 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
564 // create container for multiple text rows |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
565 const tooltipText = tooltip.append("text").attr("text-anchor", "middle"); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
566 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
567 // 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
|
568 // 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
|
569 const tooltipPadding = 10; |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
570 const diagramPadding = 5; |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
571 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
572 eventRect |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
573 .on("mouseover", () => { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
574 this.diagram.select(".chart-dot").style("opacity", 1); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
575 this.diagram.select(".chart-tooltip").style("opacity", 1); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
576 }) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
577 .on("mouseout", () => { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
578 this.diagram.select(".chart-dot").style("opacity", 0); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
579 this.diagram.select(".chart-tooltip").style("opacity", 0); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
580 }) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
581 .on("mousemove", () => { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
582 // find data point closest to mouse |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
583 const x0 = this.scale.x.invert( |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
584 d3.mouse(document.querySelector(".zoom"))[0] |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
585 ), |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
586 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
|
587 d0 = this.longtermWaterlevels[i - 1], |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
588 d1 = this.longtermWaterlevels[i] || d0, |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
589 d = x0 - d0.date > d1.date - x0 ? d1 : d0; |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
590 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
591 const coords = { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
592 x: this.scale.x(d.date), |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
593 y: this.scale.y(d.median) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
594 }; |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
595 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
596 // position the dot |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
597 this.diagram |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
598 .select(".chart-dot") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
599 .style("opacity", 1) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
600 .attr("transform", `translate(${coords.x}, ${coords.y})`); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
601 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
602 // remove current texts |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
603 tooltipText.selectAll("tspan").remove(); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
604 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
605 // write date |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
606 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
607 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
608 .attr("alignment-baseline", "hanging") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
609 .attr("text-anchor", "middle") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
610 .text( |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
611 d.date.toLocaleString([], { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
612 year: "2-digit", |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
613 month: "2-digit", |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
614 day: "2-digit" |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
615 }) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
616 ); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
617 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
618 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
619 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
620 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
621 .attr("y", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
622 .attr("dy", "1.3rem") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
623 .attr("alignment-baseline", "hanging") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
624 .attr("text-anchor", "middle") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
625 .text("Q75%: " + d.q75 + " cm"); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
626 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
627 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
628 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
629 .attr("y", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
630 .attr("dy", "2.3rem") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
631 .attr("alignment-baseline", "hanging") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
632 .attr("text-anchor", "middle") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
633 .text("Median: " + d.median + " cm"); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
634 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
635 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
636 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
637 .attr("y", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
638 .attr("dy", "3.3rem") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
639 .attr("alignment-baseline", "hanging") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
640 .attr("text-anchor", "middle") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
641 .text("Q25%: " + d.q25 + " cm"); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
642 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
643 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
644 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
645 .attr("y", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
646 .attr("dy", "4.3rem") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
647 .attr("alignment-baseline", "hanging") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
648 .attr("text-anchor", "middle") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
649 .text("Max: " + d.max + " cm"); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
650 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
651 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
652 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
653 .attr("y", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
654 .attr("dy", "5.3rem") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
655 .attr("alignment-baseline", "hanging") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
656 .attr("text-anchor", "middle") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
657 .text("Min: " + d.min + " cm"); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
658 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
659 const dYear = this.yearWaterlevels.find( |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
660 ywl => ywl.date.getTime() === d.date.getTime() |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
661 ); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
662 if (dYear) { |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
663 tooltipText |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
664 .append("tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
665 .attr("x", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
666 .attr("y", 0) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
667 .attr("dy", "6.3rem") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
668 .attr("alignment-baseline", "hanging") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
669 .attr("text-anchor", "middle") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
670 .text("Year: " + dYear.mean.toFixed(1) + " cm"); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
671 } |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
672 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
673 // get text dimensions |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
674 const textBBox = tooltipText.node().getBBox(); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
675 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
676 this.diagram |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
677 .selectAll(".chart-tooltip text tspan") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
678 .attr("x", textBBox.width / 2 + tooltipPadding) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
679 .attr("y", tooltipPadding); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
680 |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
681 // position and scale tooltip box |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
682 const xMax = |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
683 this.dimensions.width - |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
684 (textBBox.width + diagramPadding + tooltipPadding * 2); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
685 const tooltipX = Math.max( |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
686 diagramPadding, |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
687 Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
688 ); |
2824
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
689 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
|
690 if (coords.y < textBBox.height + tooltipPadding * 2) { |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
691 tooltipY = coords.y + 10; |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
692 } |
d7c4169516fa
client: spuc7/8: further improved tooltip positioning
Markus Kottlaender <markus@intevation.de>
parents:
2822
diff
changeset
|
693 |
2822
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
694 this.diagram |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
695 .select(".chart-tooltip") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
696 .style("opacity", 1) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
697 .attr("transform", `translate(${tooltipX}, ${tooltipY})`) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
698 .select("rect") |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
699 .attr("width", textBBox.width + tooltipPadding * 2) |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
700 .attr("height", textBBox.height + tooltipPadding * 2); |
f2e4c39cdcfa
client: spuc8: implemented tooltips
Markus Kottlaender <markus@intevation.de>
parents:
2815
diff
changeset
|
701 }); |
2761
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
702 } |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
703 }, |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
704 created() { |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
705 window.addEventListener("resize", debounce(this.drawDiagram), 100); |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
706 }, |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
707 mounted() { |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
708 this.drawDiagram(); |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
709 }, |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
710 updated() { |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
711 this.drawDiagram(); |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
712 } |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
713 }; |
71e7237110ba
client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
714 </script> |