Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 2604:85f9bf4a6eba

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: gauge waterlevel diagram: draw reference waterlevels
author Markus Kottlaender <markus@intevation.de>
date Tue, 12 Mar 2019 17:08:07 +0100
parents 8774054959a7
children ee60096c7eb6
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <div class="flex-fill diagram-container"></div>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 </template>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 <style lang="sass" scoped>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 .diagram-container
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
7 /deep/
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
8 .area
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
9 stroke: steelblue
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
10 stroke-width: 2
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
11 fill: transparent
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
12 clip-path: url(#clip)
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
13
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
14 .zoom
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
15 cursor: move
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
16 fill: none
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
17 pointer-events: all
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
19 .hdc-line,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
20 .ldc-line,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
21 .mw-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
22 stroke-width: 1
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
23 fill: transparent
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
24 clip-path: url(#clip)
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
25 .hdc-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
26 stroke: red
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
27 .ldc-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
28 stroke: green
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
29 .mw-line
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
30 stroke: grey
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 </style>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 <script>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 /* This is Free Software under GNU Affero General Public License v >= 3.0
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 * without warranty, see README.md and license for details.
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 * SPDX-License-Identifier: AGPL-3.0-or-later
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 * License-Filename: LICENSES/AGPL-3.0.txt
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 * Copyright (C) 2018 by via donau
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 * – Österreichische Wasserstraßen-Gesellschaft mbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 * Software engineering by Intevation GmbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 * Author(s):
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 * Markus Kottländer <markus.kottlaender@intevation.de>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 */
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
48 import { mapState, mapGetters } from "vuex";
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 import * as d3 from "d3";
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 import debounce from "debounce";
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 export default {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 computed: {
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
54 ...mapState("gauges", ["waterlevels"]),
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
55 ...mapGetters("gauges", ["selectedGauge"])
2596
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
56 },
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
57 watch: {
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 waterlevels() {
2596
8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2590
diff changeset
59 this.drawDiagram();
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 methods: {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 drawDiagram() {
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
64 if (!this.selectedGauge || !this.waterlevels.length) return;
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
65
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
66 let refWaterLevels = JSON.parse(
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
67 this.selectedGauge.properties.reference_water_levels
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
68 );
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
69
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
70 let svgWidth = document.querySelector(".diagram-container").clientWidth;
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
71 let svgHeight = document.querySelector(".diagram-container").clientHeight;
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 d3.select(".diagram-container svg").remove();
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
73 let svg = d3.select(".diagram-container").append("svg");
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 svg.attr("width", "100%").attr("height", "100%");
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 let margin = { top: 20, right: 20, bottom: 110, left: 40 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 margin2 = {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 top: svgHeight - margin.top - 50,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 right: 20,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 bottom: 30,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 left: 40
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 width = +svgWidth - margin.left - margin.right,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 height = +svgHeight - margin.top - margin.bottom,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 height2 = +svgHeight - margin2.top - margin2.bottom;
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
86 let x = d3.scaleTime().range([0, width]),
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 x2 = d3.scaleTime().range([0, width]),
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 y = d3.scaleLinear().range([height, 0]),
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 y2 = d3.scaleLinear().range([height2, 0]);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
91 let xAxis = d3.axisBottom(x),
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 xAxis2 = d3.axisBottom(x2),
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 yAxis = d3.axisLeft(y);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
95 // find min/max values for the waterlevel axis
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
96 // based on hdc/ldc +/- 100 cm
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
97 let xMinMax = d3.extent(
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
98 [
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
99 ...this.waterlevels,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
100 { waterlevel: refWaterLevels.HDC + 100 },
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
101 { waterlevel: Math.max(refWaterLevels.LDC - 100, 0) }
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
102 ],
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
103 function(d) {
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
104 return d.waterlevel;
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
105 }
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
106 );
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
107
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
108 x.domain(
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
109 d3.extent(this.waterlevels, function(d) {
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
110 return d.date;
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
111 })
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
112 );
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
113 y.domain(xMinMax);
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
114 x2.domain(x.domain());
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
115 y2.domain(y.domain());
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
116
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
117 let brush = d3
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118 .brushX()
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
119 .handleSize(4)
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120 .extent([[0, 0], [width, height2]])
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 .on("brush end", brushed);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
123 let zoom = d3
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 .zoom()
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 .scaleExtent([1, Infinity])
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 .translateExtent([[0, 0], [width, height]])
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 .extent([[0, 0], [width, height]])
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 .on("zoom", zoomed);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
130 // waterlevel line in big chart
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
131 let area = d3
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
132 .line()
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
133 .curve(d3.curveMonotoneX)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 .x(function(d) {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 return x(d.date);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 })
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
137 .y(function(d) {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 return y(d.waterlevel);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 });
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
141 // waterlevel line in small chart
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
142 let area2 = d3
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
143 .line()
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
144 .curve(d3.curveMonotoneX)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
145 .x(function(d) {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
146 return x2(d.date);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
147 })
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
148 .y(function(d) {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
149 return y2(d.waterlevel);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
150 });
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
151
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
152 let refWaterlevelLine = d3
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
153 .line()
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
154 .x(d => x(d.x))
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
155 .y(d => y(d.y));
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
156
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
157 svg
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
158 .append("defs")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
159 .append("clipPath")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 .attr("id", "clip")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
161 .append("rect")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
162 .attr("width", width)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
163 .attr("height", height);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
164
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
165 let focus = svg
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
166 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
167 .attr("class", "focus")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
168 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
170 let context = svg
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
171 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
172 .attr("class", "context")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
173 .attr(
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
174 "transform",
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
175 "translate(" + margin2.left + "," + margin2.top + ")"
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176 );
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
177
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
178 focus
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
179 .append("path")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
180 .datum(this.waterlevels)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
181 .attr("class", "area")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
182 .attr("d", area);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
183
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
184 focus
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
185 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
186 .datum([
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
187 { x: 0, y: refWaterLevels.HDC },
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
188 {
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
189 x: this.waterlevels[this.waterlevels.length - 1].date,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
190 y: refWaterLevels.HDC
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
191 }
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
192 ])
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
193 .attr("class", "hdc-line")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
194 .attr("d", refWaterlevelLine);
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
195
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
196 focus
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
197 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
198 .datum([
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
199 { x: 0, y: refWaterLevels.LDC },
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
200 {
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
201 x: this.waterlevels[this.waterlevels.length - 1].date,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
202 y: refWaterLevels.LDC
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
203 }
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
204 ])
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
205 .attr("class", "ldc-line")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
206 .attr("d", refWaterlevelLine);
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
207
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
208 focus
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
209 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
210 .datum([
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
211 { x: 0, y: refWaterLevels.MW },
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
212 {
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
213 x: this.waterlevels[this.waterlevels.length - 1].date,
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
214 y: refWaterLevels.MW
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
215 }
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
216 ])
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
217 .attr("class", "mw-line")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
218 .attr("d", refWaterlevelLine);
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
219
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
220 focus
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
221 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
222 .attr("class", "axis axis--x")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
223 .attr("transform", "translate(0," + height + ")")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
224 .call(xAxis);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
225
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
226 focus
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
227 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
228 .attr("class", "axis axis--y")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
229 .call(yAxis);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
230
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
231 context
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
232 .append("path")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
233 .datum(this.waterlevels)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
234 .attr("class", "area")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
235 .attr("d", area2);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
236
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
237 context
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
238 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
239 .attr("class", "axis axis--x")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
240 .attr("transform", "translate(0," + height2 + ")")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
241 .call(xAxis2);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
242
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
243 context
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
244 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
245 .attr("class", "brush")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
246 .call(brush)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
247 .call(brush.move, x.range());
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
248
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
249 svg
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
250 .append("rect")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
251 .attr("class", "zoom")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
252 .attr("width", width)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
253 .attr("height", height)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
254 .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
255 .call(zoom);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
256
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
257 function brushed() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
258 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
259 return; // ignore brush-by-zoom
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
260 let s = d3.event.selection || x2.range();
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
261 x.domain(s.map(x2.invert, x2));
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
262 focus.select(".area").attr("d", area);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
263 focus.select(".axis--x").call(xAxis);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
264 svg
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
265 .select(".zoom")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
266 .call(
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
267 zoom.transform,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
268 d3.zoomIdentity.scale(width / (s[1] - s[0])).translate(-s[0], 0)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
269 );
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
270 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
271
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
272 function zoomed() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
273 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
274 return; // ignore zoom-by-brush
2604
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels
Markus Kottlaender <markus@intevation.de>
parents: 2596
diff changeset
275 let t = d3.event.transform;
2590
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
276 x.domain(t.rescaleX(x2).domain());
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
277 focus.select(".area").attr("d", area);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
278 focus.select(".axis--x").call(xAxis);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
279 context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
280 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
281 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
282 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
283 created() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
284 window.addEventListener("resize", debounce(this.drawDiagram), 100);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
285 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
286 mounted() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
287 this.drawDiagram();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
288 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
289 updated() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
290 this.drawDiagram();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
291 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
292 };
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
293 </script>