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