Mercurial > gemma

annotate client/src/components/gauge/HydrologicalConditions.vue @ 2815:12f053763be2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: spuc8: finished drawing charts, optimized code
author Markus Kottlaender <markus@intevation.de>
date Tue, 26 Mar 2019 16:36:48 +0100
parents 49c1570919ae
children f2e4c39cdcfa
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
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
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
21 stroke: steelblue
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)
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 </style>
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 <script>
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 /* 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
77 * without warranty, see README.md and license for details.
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 *
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 * SPDX-License-Identifier: AGPL-3.0-or-later
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 * License-Filename: LICENSES/AGPL-3.0.txt
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 *
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 * Copyright (C) 2018 by via donau
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 * – Österreichische Wasserstraßen-Gesellschaft mbH
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 * Software engineering by Intevation GmbH
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 *
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 * Author(s):
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 * Markus Kottländer <markus.kottlaender@intevation.de>
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 */
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 import { mapState, mapGetters } from "vuex";
2791
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
91 import * as d3 from "d3";
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 import debounce from "debounce";
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 import { startOfYear, endOfYear } from "date-fns";
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 export default {
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
96 data() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
97 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
98 svg: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
99 diagram: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
100 navigation: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
101 dimensions: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
102 extent: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
103 scale: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
104 axes: null
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
105 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
106 },
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 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
108 ...mapState("gauges", ["longtermWaterlevels", "yearWaterlevels"]),
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
109 ...mapGetters("gauges", ["selectedGauge"])
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
110 },
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 methods: {
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112 drawDiagram() {
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
113 // remove old diagram
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 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
115 if (!this.selectedGauge || !this.longtermWaterlevels.length) return;
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
117 // PREPARE HELPERS
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
118
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
119 // HDC/LDC/MW for the selected gauge
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
120 const refWaterLevels = JSON.parse(
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 this.selectedGauge.properties.reference_water_levels
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 );
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
124 // dimensions (widths, heights, margins)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
125 this.dimensions = this.getDimensions();
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
126
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
127 // 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
128 this.extent = this.getExtent(refWaterLevels);
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
130 // scaling helpers
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
131 this.scale = this.getScale();
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
132
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
133 // creating the axes based on the scales
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
134 this.axes = this.getAxes();
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
135
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
136 // DRAW DIAGRAM/NAVIGATION AREAS
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
137
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
138 // create svg
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
139 this.svg = d3
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140 .select(".diagram-container")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 .append("svg")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
142 .attr("width", "100%")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
143 .attr("height", "100%");
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
144
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
145 // create container for main diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
146 this.diagram = this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
147 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
148 .attr("class", "main")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
149 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
150 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
151 `translate(${this.dimensions.mainMargin.left}, ${
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
152 this.dimensions.mainMargin.top
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 );
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
155
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
156 // create container for navigation diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
157 this.navigation = this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
158 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
159 .attr("class", "nav")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
160 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
161 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
162 `translate(${this.dimensions.navMargin.left}, ${
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
163 this.dimensions.navMargin.top
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
164 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
165 );
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
166
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
167 // 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
168 this.svg
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169 .append("defs")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
170 .append("clipPath")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
171 .attr("id", "clip")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
172 .append("rect")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
173 .attr("width", this.dimensions.width)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
174 .attr("height", this.dimensions.mainHeight);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
175
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
176 // DRAW DIAGRAM PARTS
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
177
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
178 // 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
179 // 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
180 // 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
181 const updaters = [];
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 // draw
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
184 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
185 updaters.push(this.drawAxes());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
186 updaters.push(this.drawNowLines());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
187 updaters.push(this.drawWaterlevelMinMaxAreaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
188 updaters.push(this.drawWaterlevelLineChart("median"));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
189 updaters.push(this.drawWaterlevelLineChart("q25"));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
190 updaters.push(this.drawWaterlevelLineChart("q75"));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
191 updaters.push(this.drawWaterlevelLineChart("mean", this.yearWaterlevels));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
192
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
193 // INTERACTIONS
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
194
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
195 // 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
196 const eventRect = this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
197 .append("rect")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
198 .attr("class", "zoom")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
199 .attr("width", this.dimensions.width)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
200 .attr("height", this.dimensions.mainHeight)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
201 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
202 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
203 `translate(${this.dimensions.mainMargin.left}, ${
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
204 this.dimensions.mainMargin.top
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
205 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
206 );
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
207
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
208 this.createZoom(updaters, eventRect);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
209 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
210 getDimensions() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
211 // dimensions and margins
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
212 const svgWidth = document.querySelector(".diagram-container").clientWidth;
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
213 const svgHeight = document.querySelector(".diagram-container")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
214 .clientHeight;
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
215 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
216 const navMargin = {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
217 top: svgHeight - mainMargin.top - 65,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
218 right: 20,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
219 bottom: 30,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
220 left: 80
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
221 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
222 const width = +svgWidth - mainMargin.left - mainMargin.right;
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
223 const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom;
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
224 const navHeight = +svgHeight - navMargin.top - navMargin.bottom;
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 return { width, mainHeight, navHeight, mainMargin, navMargin };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
227 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
228 getExtent(refWaterLevels) {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
229 const waterlevelsRelevantForExtent = [];
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
230 this.longtermWaterlevels.forEach(wl => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
231 waterlevelsRelevantForExtent.push(wl.min, wl.max);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
232 });
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
233 waterlevelsRelevantForExtent.push(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
234 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
235 Math.max(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
236 refWaterLevels.LDC - (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
237 0
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
238 )
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
239 );
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
240 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
241 // 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
242 date: [startOfYear(new Date()), endOfYear(new Date())],
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
243 // 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
244 // 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
245 waterlevel: d3.extent(waterlevelsRelevantForExtent)
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 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
248 getScale() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
249 // 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
250 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
251 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
252 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
253 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
254
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
255 // 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
256 x.domain(d3.extent(this.extent.date));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
257 y.domain(this.extent.waterlevel);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
258 x2.domain(x.domain());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
259 y2.domain(y.domain());
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
260
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
261 return { x, y, x2, y2 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
262 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
263 getAxes() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
264 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
265 x: d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
266 .axisTop(this.scale.x)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
267 .tickSizeInner(this.dimensions.mainHeight)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
268 .tickSizeOuter(0)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
269 .tickFormat(date => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
270 // 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
271 // 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
272 // this diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
273 return (d3.timeSecond(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
274 ? d3.timeFormat(".%L")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
275 : d3.timeMinute(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
276 ? d3.timeFormat(":%S")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
277 : d3.timeHour(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
278 ? d3.timeFormat("%I:%M")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
279 : d3.timeDay(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
280 ? d3.timeFormat("%I %p")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
281 : d3.timeMonth(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
282 ? d3.timeWeek(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
283 ? d3.timeFormat("%a %d")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
284 : d3.timeFormat("%b %d")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
285 : d3.timeFormat("%B"))(date);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
286 }),
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
287 y: d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
288 .axisRight(this.scale.y)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
289 .tickSizeInner(this.dimensions.width)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
290 .tickSizeOuter(0),
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
291 x2: d3.axisBottom(this.scale.x2)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
292 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
293 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
294 drawNowLines() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
295 const nowLine = d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
296 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
297 .x(d => this.scale.x(d.x))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
298 .y(d => this.scale.y(d.y));
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
299
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
300 const nowLabel = selection => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
301 selection.attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
302 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
303 `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
304 this.extent.waterlevel[1] - 16
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 );
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
307 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
308
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
309 // draw in main
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
310 this.diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
311 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
312 .datum([
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
313 { 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
314 { 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
315 ])
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
316 .attr("class", "now-line")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
317 .attr("d", nowLine);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
318 this.diagram // label
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
319 .append("text")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
320 .text(this.$gettext("Now"))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
321 .attr("class", "now-line-label")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
322 .attr("text-anchor", "middle")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
323 .call(nowLabel);
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 // draw in nav
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
326 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
327 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
328 .datum([
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
329 { 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
330 { 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
331 ])
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
332 .attr("class", "now-line")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
333 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
334 "d",
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
335 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
336 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
337 .x(d => this.scale.x2(d.x))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
338 .y(d => this.scale.y2(d.y))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
339 );
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
340
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
341 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
342 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
343 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
344 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
345 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
346 drawAxes() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
347 this.diagram
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
348 .append("g")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
349 .attr("class", "axis--x")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
350 .attr("transform", `translate(0, ${this.dimensions.mainHeight})`)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
351 .call(this.axes.x)
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
352 .selectAll(".tick text")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
353 .attr("y", 15);
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
354 this.diagram // label
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
355 .append("text")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
356 .text(this.$gettext("Waterlevel [cm]"))
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
357 .attr("text-anchor", "middle")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
358 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
359 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
360 `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
361 );
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
362 this.diagram
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
363 .append("g")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
364 .call(this.axes.y)
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
365 .selectAll(".tick text")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
366 .attr("x", -25);
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
367
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
368 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
369 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
370 .attr("class", "axis axis--x")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
371 .attr("transform", `translate(0, ${this.dimensions.navHeight})`)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
372 .call(this.axes.x2);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
373
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
374 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
375 this.diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
376 .select(".axis--x")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
377 .call(this.axes.x)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
378 .selectAll(".tick text")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
379 .attr("y", 15);
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 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
382 drawWaterlevelMinMaxAreaChart() {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
383 const areaChart = isNav =>
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
384 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
385 .area()
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
386 .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
387 .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
388 .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
389
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
390 this.diagram
2791
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
391 .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
392 .datum(this.longtermWaterlevels)
2791
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
393 .attr("class", "area")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
394 .attr("d", areaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
395
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
396 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
397 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
398 .datum(this.longtermWaterlevels)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
399 .attr("class", "area")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
400 .attr("d", areaChart(true));
2791
2b79c0871138 client: spuc8: draw diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2761
diff changeset
401
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
402 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
403 this.diagram.select(".area").attr("d", areaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
404 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
405 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
406 drawWaterlevelLineChart(type, data) {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
407 const lineChart = type =>
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
408 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
409 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
410 .x(d => this.scale.x(d.date))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
411 .y(d => this.scale.y(d[type]))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
412 .curve(d3.curveLinear);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
413 this.diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
414 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
415 .attr("class", "line " + type)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
416 .datum(data || this.longtermWaterlevels)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
417 .attr("d", lineChart(type));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
418
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
419 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
420 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
421 };
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
422 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
423 drawRefLines(refWaterLevels) {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
424 const refWaterlevelLine = d3
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
425 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
426 .x(d => this.scale.x(d.x))
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
427 .y(d => this.scale.y(d.y));
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
428
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
429 // HDC
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
430 this.diagram
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
431 .append("path")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
432 .datum([
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
433 { x: 0, y: refWaterLevels.HDC },
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
434 { x: this.extent.date[1], y: refWaterLevels.HDC }
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
435 ])
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
436 .attr("class", "hdc-line")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
437 .attr("d", refWaterlevelLine);
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
438 this.diagram // label
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
439 .append("text")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
440 .text(`HDC (${refWaterLevels.HDC})`)
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
441 .attr("class", "ref-waterlevel-label")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
442 .attr("x", 5)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
443 .attr("y", this.scale.y(refWaterLevels.HDC) - 3);
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
444 // LDC
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
445 this.diagram
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
446 .append("path")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
447 .datum([
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
448 { x: 0, y: refWaterLevels.LDC },
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
449 { x: this.extent.date[1], y: refWaterLevels.LDC }
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
450 ])
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
451 .attr("class", "ldc-line")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
452 .attr("d", refWaterlevelLine);
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
453 this.diagram // label
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
454 .append("text")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
455 .text(`LDC (${refWaterLevels.LDC})`)
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
456 .attr("class", "ref-waterlevel-label")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
457 .attr("x", 5)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
458 .attr("y", this.scale.y(refWaterLevels.LDC) - 3);
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
459 // MW
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
460 this.diagram
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
461 .append("path")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
462 .datum([
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
463 { x: 0, y: refWaterLevels.MW },
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
464 { x: this.extent.date[1], y: refWaterLevels.MW }
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
465 ])
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
466 .attr("class", "mw-line")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
467 .attr("d", refWaterlevelLine);
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
468 this.diagram // label
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
469 .append("text")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
470 .text(`MW (${refWaterLevels.MW})`)
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
471 .attr("class", "ref-waterlevel-label")
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
472 .attr("x", 5)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
473 .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
474 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
475 createZoom(updaters, eventRect) {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
476 const brush = d3
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
477 .brushX()
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
478 .handleSize(4)
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
479 .extent([[0, 0], [this.dimensions.width, this.dimensions.navHeight]]);
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
480
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
481 const zoom = d3
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
482 .zoom()
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
483 .scaleExtent([1, Infinity])
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
484 .translateExtent([
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
485 [0, 0],
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
486 [this.dimensions.width, this.dimensions.mainHeight]
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
487 ])
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
488 .extent([[0, 0], [this.dimensions.width, this.dimensions.mainHeight]]);
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
489
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
490 brush.on("brush end", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
491 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
492 return; // ignore brush-by-zoom
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
493 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
494 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
495 updaters.forEach(u => u && u());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
496 this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
497 .select(".zoom")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
498 .call(
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
499 zoom.transform,
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
500 d3.zoomIdentity
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
501 .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
502 .translate(-s[0], 0)
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
503 );
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
504 });
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
505
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
506 zoom.on("zoom", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
507 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
508 return; // ignore zoom-by-brush
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
509 let t = d3.event.transform;
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
510 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
511 updaters.forEach(u => u && u());
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
512 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
513 .select(".brush")
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
514 .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
515 });
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
516 zoom.on("start", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
517 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
518 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
519 });
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
520
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
521 this.navigation
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
522 .append("g")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
523 .attr("class", "brush")
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
524 .call(brush)
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
525 .call(brush.move, this.scale.x.range());
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
526
2815
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
527 eventRect.call(zoom);
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
528 },
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
529 isNext(seconds) {
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
530 // helper to check whether points in the chart are "next to each other"
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
531 // for that they need to be exactly the specified amount of seconds apart.
12f053763be2 client: spuc8: finished drawing charts, optimized code
Markus Kottlaender <markus@intevation.de>
parents: 2813
diff changeset
532 return (prev, current) => current.date - prev.date === seconds * 1000;
2761
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
533 }
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
534 },
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
535 created() {
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
536 window.addEventListener("resize", debounce(this.drawDiagram), 100);
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
537 },
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
538 mounted() {
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
539 this.drawDiagram();
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
540 },
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
541 updated() {
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
542 this.drawDiagram();
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
543 }
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
544 };
71e7237110ba client: spuc8: prepared diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
545 </script>