Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 2590:1686ec185155

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: added gauge waterlevel example diagram
author Markus Kottlaender <markus@intevation.de>
date Tue, 12 Mar 2019 08:37:09 +0100
parents
children 8774054959a7
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
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 /deep/ .area
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 stroke: steelblue
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 stroke-width: 2
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 fill: transparent
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 clip-path: url(#clip)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 /deep/ .zoom
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 cursor: move
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 fill: none
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 pointer-events: all
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 </style>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 <script>
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 /* 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
21 * without warranty, see README.md and license for details.
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 * SPDX-License-Identifier: AGPL-3.0-or-later
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 * License-Filename: LICENSES/AGPL-3.0.txt
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 * Copyright (C) 2018 by via donau
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 * – Österreichische Wasserstraßen-Gesellschaft mbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 * Software engineering by Intevation GmbH
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 *
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 * Author(s):
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 * Markus Kottländer <markus.kottlaender@intevation.de>
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
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 import { mapState } from "vuex";
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 import * as d3 from "d3";
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 import debounce from "debounce";
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 export default {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 computed: {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 ...mapState("gauges", ["selectedGauge"]),
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 waterlevels() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 let data = [];
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 let waterlevel = 2.5;
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 for (let i = 1; i <= 365; i++) {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 let date = new Date();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 date.setFullYear(2018);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 date.setDate(date.getDate() + i);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 waterlevel *= Math.random() * (1.02 - 0.98) + 0.98;
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 data.push({ date, waterlevel });
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 return data;
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 methods: {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 drawDiagram() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 var svgWidth = document.querySelector(".diagram-container").clientWidth;
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 var svgHeight = document.querySelector(".diagram-container").clientHeight;
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 d3.select(".diagram-container svg").remove();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 var svg = d3.select(".diagram-container").append("svg");
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 svg.attr("width", "100%").attr("height", "100%");
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 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
62 margin2 = {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 top: svgHeight - margin.top - 50,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 right: 20,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 bottom: 30,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 left: 40
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 width = +svgWidth - margin.left - margin.right,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 height = +svgHeight - margin.top - margin.bottom,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 height2 = +svgHeight - margin2.top - margin2.bottom;
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 var x = d3.scaleTime().range([0, width]),
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 x2 = d3.scaleTime().range([0, width]),
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 y = d3.scaleLinear().range([height, 0]),
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 y2 = d3.scaleLinear().range([height2, 0]);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 var xAxis = d3.axisBottom(x),
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 xAxis2 = d3.axisBottom(x2),
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 yAxis = d3.axisLeft(y);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 var brush = d3
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 .brushX()
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 .extent([[0, 0], [width, height2]])
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 .on("brush end", brushed);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 var zoom = d3
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 .zoom()
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 .scaleExtent([1, Infinity])
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 .translateExtent([[0, 0], [width, height]])
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 .extent([[0, 0], [width, height]])
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 .on("zoom", zoomed);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 var area = d3
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 .line()
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 .curve(d3.curveMonotoneX)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 .x(function(d) {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 return x(d.date);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 })
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 .y(function(d) {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 return y(d.waterlevel);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 });
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 var area2 = d3
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 .line()
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 .curve(d3.curveMonotoneX)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 .x(function(d) {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 return x2(d.date);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 })
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 .y(function(d) {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
110 return y2(d.waterlevel);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
111 });
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
112
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
113 svg
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
114 .append("defs")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
115 .append("clipPath")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
116 .attr("id", "clip")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
117 .append("rect")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118 .attr("width", width)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 .attr("height", height);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 var focus = svg
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 .attr("class", "focus")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 var context = svg
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 .attr("class", "context")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129 .attr(
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
130 "transform",
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
131 "translate(" + margin2.left + "," + margin2.top + ")"
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
132 );
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
133
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
134 x.domain(
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
135 d3.extent(this.waterlevels, function(d) {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 return d.date;
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
137 })
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 );
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 y.domain([0, 5]);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140 x2.domain(x.domain());
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 y2.domain(y.domain());
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
142
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
143 focus
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
144 .append("path")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
145 .datum(this.waterlevels)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
146 .attr("class", "area")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
147 .attr("d", area);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
148
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
149 focus
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
150 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
151 .attr("class", "axis axis--x")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
152 .attr("transform", "translate(0," + height + ")")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
153 .call(xAxis);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
154
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
155 focus
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
156 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
157 .attr("class", "axis axis--y")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
158 .call(yAxis);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
159
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
160 context
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
161 .append("path")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
162 .datum(this.waterlevels)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
163 .attr("class", "area")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
164 .attr("d", area2);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
165
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
166 context
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
167 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
168 .attr("class", "axis axis--x")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
169 .attr("transform", "translate(0," + height2 + ")")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
170 .call(xAxis2);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
171
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
172 context
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
173 .append("g")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
174 .attr("class", "brush")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
175 .call(brush)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
176 .call(brush.move, x.range());
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 svg
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
179 .append("rect")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
180 .attr("class", "zoom")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
181 .attr("width", width)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
182 .attr("height", height)
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
183 .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
184 .call(zoom);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
185
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
186 function brushed() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
187 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
188 return; // ignore brush-by-zoom
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
189 var s = d3.event.selection || x2.range();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
190 x.domain(s.map(x2.invert, x2));
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
191 focus.select(".area").attr("d", area);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
192 focus.select(".axis--x").call(xAxis);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
193 svg
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
194 .select(".zoom")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
195 .call(
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
196 zoom.transform,
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
197 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
198 );
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
199 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
200
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
201 function zoomed() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
202 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
203 return; // ignore zoom-by-brush
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
204 var t = d3.event.transform;
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
205 x.domain(t.rescaleX(x2).domain());
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
206 focus.select(".area").attr("d", area);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
207 focus.select(".axis--x").call(xAxis);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
208 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
209 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
210 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
211 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
212 created() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
213 window.addEventListener("resize", debounce(this.drawDiagram), 100);
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
214 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
215 mounted() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
216 this.drawDiagram();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
217 },
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
218 updated() {
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
219 this.drawDiagram();
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
220 }
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
221 };
1686ec185155 client: added gauge waterlevel example diagram
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
222 </script>