Mercurial > gemma
annotate client/src/components/TimeSlider.vue @ 5070:a0b0e0f916f5 time-sliding
Backed out changeset 7ef8d3dab29b
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 11 Mar 2020 16:30:03 +0100 |
parents | 7ef8d3dab29b |
children | 45d868476dea |
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 ]" |
5058
e916651d3f93
client: adjust time-slider position in case of opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5057
diff
changeset
|
8 :style="reposition" |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
9 > |
5070
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
10 <div class="d-flex mt-1 mr-1"> |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
11 <input |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
12 class="form-control-sm mr-1" |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
13 type="date" |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
14 v-model="dateSelection" |
5039
aec0923f9c52
icon shows now date and time
Thomas Junk <thomas.junk@intevation.de>
parents:
5038
diff
changeset
|
15 min="2015-01-01" |
5048
700758d22737
client: (minor) adjust max value for input field
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5046
diff
changeset
|
16 :max="new Date().toISOString().split('T')[0]" |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
17 /> |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
18 <input |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
19 type="time" |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
20 min="00:00" |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
21 max="23:59" |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
22 v-model="timeSelection" |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
23 class="form-control-sm" |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
24 /> |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
25 </div> |
5036
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 id="sliderContainer" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
28 class="d-flex sliderContainer" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
29 style="width: 98%;" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
30 ></div> |
5070
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
31 <div @click="close" class="d-flex box-control mr-0" style="width: 2%;"> |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
32 <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
|
33 </div> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
34 </div> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
35 </template> |
5070
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
36 <style lang="sass" scoped> |
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
37 #slider |
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
38 position: absolute |
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
39 bottom: 0 |
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
40 min-width: 100vw |
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
41 &.expanded |
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
42 max-height: 100% |
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
43 max-width: 100% |
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
44 margin: 0 |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
45 </style> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
46 <script> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
47 /* 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
|
48 * 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
|
49 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
50 * 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
|
51 * License-Filename: LICENSES/AGPL-3.0.txt |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
52 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
53 * Copyright (C) 2020 by via donau |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
54 * – Österreichische Wasserstraßen-Gesellschaft mbH |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
55 * Software engineering by Intevation GmbH |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
56 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
57 * Author(s): |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
58 * Fadi Abbud <fadiabbud@intevation.de> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
59 */ |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
60 import { mapState } from "vuex"; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
61 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
|
62 import app from "@/main"; |
5044
ca5b1b5a553a
client: date localization for time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5043
diff
changeset
|
63 import { localeDateString } from "@/lib/datelocalization"; |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
64 import { format, setHours, setMinutes } from "date-fns"; |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
65 import debounce from "debounce"; |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
66 |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
67 let zoom = null; |
5061
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
68 let xScale = null; |
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
69 let xAxis = null; |
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
70 |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
71 export default { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
72 name: "timeslider", |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
73 data() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
74 return { |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
75 isSelectedTimeHourly: false, |
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
76 resizeListenerFunction: null |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
77 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
78 }, |
5040
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
79 watch: { |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
80 ongoingRefresh() { |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
81 if (this.ongoingRefresh) return; |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
82 this.$store.commit("application/setSelectedTime", new Date()); |
5065
385cb52d32ee
client: enhanced time-slider behavior on updating selected time after reloads
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5064
diff
changeset
|
83 this.$nextTick(this.rescaleSlider(1)); |
5040
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
84 } |
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
85 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
86 computed: { |
5063
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
87 ...mapState("application", ["showTimeSlider", "paneSetup"]), |
5040
066b76ef5e6a
selected time is refreshed after reloads
Thomas Junk <thomas.junk@intevation.de>
parents:
5039
diff
changeset
|
88 ...mapState("map", ["ongoingRefresh"]), |
5058
e916651d3f93
client: adjust time-slider position in case of opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5057
diff
changeset
|
89 reposition() { |
e916651d3f93
client: adjust time-slider position in case of opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5057
diff
changeset
|
90 // reposition time slider in case of opened diagram |
e916651d3f93
client: adjust time-slider position in case of opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5057
diff
changeset
|
91 if (["DEFAULT", "COMPARESURVEYS"].indexOf(this.paneSetup) === -1) { |
e916651d3f93
client: adjust time-slider position in case of opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5057
diff
changeset
|
92 const height = document.getElementById("main").clientHeight + 1; |
e916651d3f93
client: adjust time-slider position in case of opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5057
diff
changeset
|
93 return `bottom: ${height}px`; |
e916651d3f93
client: adjust time-slider position in case of opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5057
diff
changeset
|
94 } else { |
e916651d3f93
client: adjust time-slider position in case of opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5057
diff
changeset
|
95 return ""; |
e916651d3f93
client: adjust time-slider position in case of opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5057
diff
changeset
|
96 } |
e916651d3f93
client: adjust time-slider position in case of opened diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5057
diff
changeset
|
97 }, |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
98 dateSelection: { |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
99 get() { |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
100 const date = this.$store.state.application.selectedTime; |
5045
a7cda81bf96f
client: better formatting of time
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5044
diff
changeset
|
101 return format(date, "YYYY-MM-DD"); |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
102 }, |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
103 set(value) { |
5057
abe3a70526a6
fix accidental deletion of current input
Thomas Junk <thomas.junk@intevation.de>
parents:
5056
diff
changeset
|
104 if (!value) return; |
5063
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
105 let date = new Date(value); |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
106 const [hours, minutes] = this.timeSelection.split(":"); |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
107 date = setHours(date, hours); |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
108 date = setMinutes(date, minutes); |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
109 this.$store.commit("application/setSelectedTime", date); |
5060
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
110 this.rescaleSlider(50); |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
111 } |
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
112 }, |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
113 timeSelection: { |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
114 get() { |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
115 const time = this.$store.state.application.selectedTime; |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
116 return format(time, "HH:mm"); |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
117 }, |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
118 set(value) { |
5057
abe3a70526a6
fix accidental deletion of current input
Thomas Junk <thomas.junk@intevation.de>
parents:
5056
diff
changeset
|
119 if (!value) return; |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
120 let date = this.selectedTime; |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
121 date = setHours(date, value.split(":")[0]); |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
122 date = setMinutes(date, value.split(":")[1]); |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
123 this.$store.commit("application/setSelectedTime", date); |
5060
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
124 this.rescaleSlider(800); |
5046
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
125 } |
b5e77c43fb8b
client: add Time picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5045
diff
changeset
|
126 }, |
5037
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
127 selectedTime: { |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
128 get() { |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
129 return this.$store.state.application.selectedTime; |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
130 }, |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
131 set(value) { |
5063
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
132 if (!this.isSelectedTimeHourly) { |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
133 value = setHours(value, 12); |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
134 value = setMinutes(value, 0); |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
135 } |
5037
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
136 this.$store.commit("application/setSelectedTime", value); |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
137 } |
9d288d9b851b
client: move selectedTime to store
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5036
diff
changeset
|
138 } |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
139 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
140 methods: { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
141 close() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
142 this.$store.commit("application/showTimeSlider", false); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
143 }, |
5060
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
144 rescaleSlider(scaleFactor) { |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
145 const tx = |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
146 -scaleFactor * |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
147 this.getScale()(d3.isoParse(this.selectedTime.toISOString())) + |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
148 document.getElementById("sliderContainer").clientWidth / 2; |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
149 var t = d3.zoomIdentity.translate(tx, 0).scale(scaleFactor); |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
150 this.getScale().domain(t.rescaleX(this.getScale())); |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
151 d3.select(".zoom").call(zoom.transform, t); |
ed1d963017e7
client: improve behavior of time-slider during the use of date/time picker
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5058
diff
changeset
|
152 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
153 createSlider() { |
5070
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
154 d3.select(".sliderContainer svg").remove(); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
155 const element = document.getElementById("sliderContainer"); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
156 const svgWidth = element ? element.clientWidth : 0, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
157 svgHeight = 40, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
158 marginTop = 20, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
159 marginLeft = 0; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
160 |
5044
ca5b1b5a553a
client: date localization for time slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5043
diff
changeset
|
161 d3.timeFormatDefaultLocale(localeDateString); |
5061
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
162 xScale = this.getScale(); |
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
163 xAxis = this.getAxes(); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
164 let svg = d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
165 .select(".sliderContainer") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
166 .append("svg") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
167 .attr("width", svgWidth) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
168 .attr("height", svgHeight); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
169 |
5038
9d26f67dd916
client: add date picker to the time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5037
diff
changeset
|
170 zoom = d3 |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
171 .zoom() |
5041
abe9b75686ba
client: set wheeldelta to facilitate quick changes of zoomlevel
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5040
diff
changeset
|
172 .scaleExtent([0.8, 102000]) |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
173 .translateExtent([[0, 0], [svgWidth, svgHeight]]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
174 .extent([[0, 0], [(svgWidth, svgHeight)]]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
175 .on("zoom", this.zoomed); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
176 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
177 svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
178 .append("g") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
179 .attr("class", "axis--x") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
180 .attr("transform", `translate(${marginLeft}, ${marginTop})`) |
5061
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
181 .call(xAxis); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
182 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
183 // 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
|
184 const eventRect = svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
185 .append("rect") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
186 .attr("id", "zoom") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
187 .attr("class", "zoom") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
188 .attr("width", svgWidth) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
189 .attr("height", svgHeight) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
190 .attr("fill", "white") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
191 .attr("opacity", 0.2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
192 .on("mouseover", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
193 svg.select(".zoom").attr("cursor", "move"); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
194 }); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
195 eventRect.call(zoom).on("click", this.onClick); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
196 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
197 const toIsoDate = d => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
198 return d.toISOString(); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
199 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
200 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
201 let drag = d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
202 .drag() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
203 .on("start", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
204 d3.select(".line") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
205 .raise() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
206 .classed("active", true); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
207 }) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
208 .on("drag", this.onDrag) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
209 .on("end", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
210 d3.select(".line").classed("active", false); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
211 }); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
212 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
213 // 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
|
214 svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
215 .append("rect") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
216 .attr("class", "line") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
217 .attr("id", "scrubber") |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
218 .attr("x", xAxis.scale()(d3.isoParse(toIsoDate(this.selectedTime)))) |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
219 .attr("y", 0) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
220 .attr("width", 2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
221 .attr("height", svgHeight) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
222 .attr("stroke", "#17a2b8") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
223 .attr("stroke-width", 2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
224 .attr("opacity", 0.6) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
225 .on("mouseover", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
226 svg.select(".line").attr("cursor", "e-resize"); |
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 .call(drag); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
229 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
230 getScale() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
231 return d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
232 .scaleTime() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
233 .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
|
234 .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
|
235 }, |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
236 getAxes() { |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
237 const axesFormat = date => { |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
238 return (d3.timeSecond(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
239 ? d3.timeFormat(".%L") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
240 : d3.timeMinute(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
241 ? d3.timeFormat(":%S") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
242 : d3.timeHour(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
243 ? d3.timeFormat("%H:%M") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
244 : d3.timeDay(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
245 ? d3.timeFormat("%H:%M") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
246 : d3.timeMonth(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
247 ? d3.timeWeek(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
248 ? 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
|
249 : 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
|
250 : d3.timeYear(date) < date |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
251 ? d3.timeFormat("%B") |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
252 : d3.timeFormat("%Y"))(date); |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
253 }; |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
254 return d3 |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
255 .axisBottom(xScale) |
5043
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
256 .ticks(12) |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
257 .tickFormat(axesFormat); |
bae2548dc484
client: improve the axes labeling for time-slider
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5041
diff
changeset
|
258 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
259 zoomed() { |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
260 let newX = d3.event.transform.rescaleX(xScale); |
5062
da28a58eb10d
client: correct showing of time in toolbar according to zoom level(selected time)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5061
diff
changeset
|
261 const currentScaleFactor = d3.event.transform.k; |
da28a58eb10d
client: correct showing of time in toolbar according to zoom level(selected time)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5061
diff
changeset
|
262 const isHourly = currentScaleFactor > 400; |
5063
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
263 if (this.isSelectedTimeHourly != isHourly) |
43bebcc8961f
client: set time according to zoom level.
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5062
diff
changeset
|
264 this.isSelectedTimeHourly = isHourly; |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
265 xAxis.scale(newX); |
5061
37371727f704
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5060
diff
changeset
|
266 d3.select(".axis--x").call(xAxis); |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
267 d3.select(".line").attr("x", newX(d3.isoParse(this.selectedTime))); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
268 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
269 onClick() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
270 // Extract the click location |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
271 let point = d3.mouse(document.getElementById("zoom")), |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
272 p = { x: point[0], y: point[1] }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
273 d3.select(".line").attr("x", p.x); |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
274 this.selectedTime = d3.isoParse(xAxis.scale().invert(p.x + 2)); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
275 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
276 onDrag() { |
5064
d87438a8c891
client: improve time-slider code
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5063
diff
changeset
|
277 this.selectedTime = d3.isoParse(xAxis.scale().invert(d3.event.x + 2)); |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
278 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
|
279 } |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
280 }, |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
281 created() { |
5070
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
282 this.resizeListenerFunction = debounce(this.createSlider, 100); |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
283 window.addEventListener("resize", this.resizeListenerFunction); |
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
284 }, |
5070
a0b0e0f916f5
Backed out changeset 7ef8d3dab29b
Thomas Junk <thomas.junk@intevation.de>
parents:
5069
diff
changeset
|
285 distoryed() { |
5067
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
286 window.removeEventListener("resize", this.resizeListenerFunction); |
99ac62a56dd2
client: add window resize event listener
Fadi Abbud <fadi.abbud@intevation.de>
parents:
5066
diff
changeset
|
287 }, |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
288 mounted() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
289 setTimeout(this.createSlider, 150); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
290 } |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
291 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
292 </script> |