Mercurial > gemma
annotate client/src/components/TimeSlider.vue @ 5043:bae2548dc484 time-sliding
client: improve the axes labeling for time-slider
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Fri, 28 Feb 2020 16:38:53 +0100 |
parents | abe9b75686ba |
children | ca5b1b5a553a |
rev | line source |
---|---|
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
1 <template> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
2 <div |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
3 id="slider" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
4 :class="[ |
5037
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
5 'd-flex box ui-element rounded bg-white flex-row', |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
6 { expanded: showTimeSlider } |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
7 ]" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
8 > |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
9 <div class="d-flex m-1"> |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
10 <input |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5038
diff
changeset
|
11 class="form-control form-control-sm" |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
12 type="date" |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
13 v-model="timeSelection" |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5038
diff
changeset
|
14 min="2015-01-01" |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
15 max="2020-03-01" |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
16 /> |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
17 </div> |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
18 <div |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
19 id="sliderContainer" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
20 class="d-flex sliderContainer" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
21 style="width: 98%;" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
22 ></div> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
23 <div @click="close" class="d-flex box-control mr-0" style="width: 2%;"> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
24 <font-awesome-icon icon="times"></font-awesome-icon> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
25 </div> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
26 </div> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
27 </template> |
5037
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
28 <style lang="sass" scoped> |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
29 #slider |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
30 position: absolute |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
31 bottom: 0 |
5037
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
32 min-width: 100vw; |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
33 &.expanded |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
34 max-height: 100%; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
35 max-width: 100%; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
36 margin: 0 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
37 </style> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
38 <script> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
39 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
40 * without warranty, see README.md and license for details. |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
41 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
42 * SPDX-License-Identifier: AGPL-3.0-or-later |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
43 * License-Filename: LICENSES/AGPL-3.0.txt |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
44 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
45 * Copyright (C) 2020 by via donau |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
46 * – Österreichische Wasserstraßen-Gesellschaft mbH |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
47 * Software engineering by Intevation GmbH |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
48 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
49 * Author(s): |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
50 * Fadi Abbud <fadiabbud@intevation.de> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
51 */ |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
52 import { mapState } from "vuex"; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
53 import * as d3 from "d3"; |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
54 import app from "@/main"; |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
55 |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
56 let zoom = null; |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
57 export default { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
58 name: "timeslider", |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
59 data() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
60 return { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
61 newX: null |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
62 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
63 }, |
5040
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
64 watch: { |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
65 ongoingRefresh() { |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
66 if (this.ongoingRefresh) return; |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
67 this.$store.commit("application/setSelectedTime", new Date()); |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
68 this.$nextTick(this.redrawSlider); |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
69 } |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
70 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
71 computed: { |
5037
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
72 ...mapState("application", ["showTimeSlider"]), |
5040
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
73 ...mapState("map", ["ongoingRefresh"]), |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
74 timeSelection: { |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
75 get() { |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
76 const date = this.$store.state.application.selectedTime; |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
77 return date.toISOString().split("T")[0]; |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
78 }, |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
79 set(value) { |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
80 const date = new Date(value); |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
81 this.$store.commit("application/setSelectedTime", date); |
5040
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
82 this.$nextTick(this.redrawSlider); |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
83 } |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
84 }, |
5037
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
85 selectedTime: { |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
86 get() { |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
87 return this.$store.state.application.selectedTime; |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
88 }, |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
89 set(value) { |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
90 this.$store.commit("application/setSelectedTime", value); |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
91 } |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
92 } |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
93 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
94 methods: { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
95 close() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
96 this.$store.commit("application/showTimeSlider", false); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
97 }, |
5040
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
98 redrawSlider() { |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
99 this.createSlider(); |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
100 zoom.translateTo( |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
101 d3.select(".line"), |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
102 this.newX(d3.isoParse(this.selectedTime.toISOString())), |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
103 1 |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
104 ); |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
105 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
106 createSlider() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
107 const element = document.getElementById("sliderContainer"); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
108 const svgWidth = element ? element.clientWidth : 0, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
109 svgHeight = 40, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
110 marginTop = 20, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
111 marginLeft = 0; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
112 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
113 this.newX = this.getScale(); |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
114 d3.select(".sliderContainer svg").remove(); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
115 let svg = d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
116 .select(".sliderContainer") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
117 .append("svg") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
118 .attr("width", svgWidth) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
119 .attr("height", svgHeight); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
120 |
5041
abe9b75686ba
client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5040
diff
changeset
|
121 const wheelDelta = () => { |
abe9b75686ba
client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5040
diff
changeset
|
122 return (-d3.event.deltaY * (d3.event.deltaMode ? 120 : 1)) / 15; |
abe9b75686ba
client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5040
diff
changeset
|
123 }; |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
124 // zoom event |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
125 zoom = d3 |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
126 .zoom() |
5041
abe9b75686ba
client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5040
diff
changeset
|
127 .scaleExtent([0.8, 102000]) |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
128 .translateExtent([[0, 0], [svgWidth, svgHeight]]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
129 .extent([[0, 0], [(svgWidth, svgHeight)]]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
130 .on("zoom", this.zoomed); |
5041
abe9b75686ba
client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5040
diff
changeset
|
131 zoom.wheelDelta(wheelDelta); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
132 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
133 svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
134 .append("g") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
135 .attr("class", "axis--x") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
136 .attr("transform", `translate(${marginLeft}, ${marginTop})`) |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
137 .call(this.getAxes()); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
138 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
139 // create rectanlge on the slider area to capture mouse events |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
140 const eventRect = svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
141 .append("rect") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
142 .attr("id", "zoom") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
143 .attr("class", "zoom") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
144 .attr("width", svgWidth) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
145 .attr("height", svgHeight) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
146 .attr("fill", "white") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
147 .attr("opacity", 0.2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
148 .on("mouseover", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
149 svg.select(".zoom").attr("cursor", "move"); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
150 }); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
151 eventRect.call(zoom).on("click", this.onClick); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
152 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
153 const toIsoDate = d => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
154 return d.toISOString(); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
155 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
156 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
157 let drag = d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
158 .drag() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
159 .on("start", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
160 d3.select(".line") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
161 .raise() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
162 .classed("active", true); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
163 }) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
164 .on("drag", this.onDrag) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
165 .on("end", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
166 d3.select(".line").classed("active", false); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
167 }); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
168 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
169 // Create cursor to indicate to the selected time |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
170 svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
171 .append("rect") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
172 .attr("class", "line") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
173 .attr("id", "scrubber") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
174 .attr("x", this.newX(d3.isoParse(toIsoDate(this.selectedTime)))) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
175 .attr("y", 0) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
176 .attr("width", 2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
177 .attr("height", svgHeight) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
178 .attr("stroke", "#17a2b8") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
179 .attr("stroke-width", 2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
180 .attr("opacity", 0.6) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
181 .on("mouseover", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
182 svg.select(".line").attr("cursor", "e-resize"); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
183 }) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
184 .call(drag); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
185 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
186 getScale() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
187 return d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
188 .scaleTime() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
189 .range([0, document.getElementById("sliderContainer").clientWidth || 0]) |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5038
diff
changeset
|
190 .domain([d3.isoParse(new Date("2015-01-01")), d3.isoParse(new Date())]); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
191 }, |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
192 getAxes() { |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
193 const axesFormat = date => { |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
194 return (d3.timeSecond(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
195 ? d3.timeFormat(".%L") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
196 : d3.timeMinute(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
197 ? d3.timeFormat(":%S") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
198 : d3.timeHour(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
199 ? d3.timeFormat("%H:%M") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
200 : d3.timeDay(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
201 ? d3.timeFormat("%H:%M") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
202 : d3.timeMonth(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
203 ? d3.timeWeek(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
204 ? d3.timeFormat(app.$gettext("%a %d")) |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
205 : d3.timeFormat(app.$gettext("%b %d")) |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
206 : d3.timeYear(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
207 ? d3.timeFormat("%B") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
208 : d3.timeFormat("%Y"))(date); |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
209 }; |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
210 return d3 |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
211 .axisBottom(this.newX) |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
212 .ticks(12) |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
213 .tickFormat(axesFormat); |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
214 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
215 zoomed() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
216 let scale = this.getScale(); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
217 this.newX = d3.event.transform.rescaleX(scale); |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
218 d3.select(".axis--x").call(this.getAxes()); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
219 d3.select(".line").attr("x", this.newX(d3.isoParse(this.selectedTime))); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
220 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
221 onClick() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
222 // Extract the click location |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
223 let point = d3.mouse(document.getElementById("zoom")), |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
224 p = { x: point[0], y: point[1] }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
225 d3.select(".line").attr("x", p.x); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
226 this.selectedTime = d3.isoParse(this.newX.invert(p.x + 2)); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
227 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
228 onDrag() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
229 this.selectedTime = d3.isoParse(this.newX.invert(d3.event.x + 2)); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
230 d3.select(".line").attr("x", d3.event.x); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
231 } |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
232 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
233 mounted() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
234 setTimeout(this.createSlider, 150); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
235 } |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
236 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
237 </script> |