Mercurial > gemma
annotate client/src/components/TimeSlider.vue @ 5036:8f421cd3c746 time-sliding
client: Implemented first version of time-sliding
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Thu, 27 Feb 2020 09:18:17 +0100 |
parents | |
children | 9d288d9b851b |
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="[ |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
5 'd-flex box ui-element rounded bg-white mw-100 flex-row', |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
6 { expand: showTimeSlider } |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
7 ]" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
8 > |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
9 <div |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
10 id="sliderContainer" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
11 class="d-flex sliderContainer" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
12 style="width: 98%;" |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
13 ></div> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
14 <div @click="close" class="d-flex box-control mr-0" style="width: 2%;"> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
15 <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
|
16 </div> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
17 </div> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
18 </template> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
19 <style lang="sass"> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
20 #slider |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
21 position: absolute |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
22 bottom: 0 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
23 width: 100% |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
24 &.expand |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
25 max-height: 100%; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
26 max-width: 100%; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
27 margin: 0 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
28 </style> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
29 <script> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
30 /* 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
|
31 * 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
|
32 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
33 * 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
|
34 * License-Filename: LICENSES/AGPL-3.0.txt |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
35 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
36 * Copyright (C) 2020 by via donau |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
37 * – Österreichische Wasserstraßen-Gesellschaft mbH |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
38 * Software engineering by Intevation GmbH |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
39 * |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
40 * Author(s): |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
41 * Fadi Abbud <fadiabbud@intevation.de> |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
42 */ |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
43 import { mapState } from "vuex"; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
44 import * as d3 from "d3"; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
45 export default { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
46 name: "timeslider", |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
47 data() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
48 return { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
49 selectedTime: new Date("2020-01-04"), |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
50 newX: null |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
51 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
52 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
53 computed: { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
54 ...mapState("application", ["showTimeSlider"]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
55 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
56 methods: { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
57 close() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
58 this.$store.commit("application/showTimeSlider", false); |
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 createSlider() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
61 const element = document.getElementById("sliderContainer"); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
62 const svgWidth = element ? element.clientWidth : 0, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
63 svgHeight = 40, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
64 marginTop = 20, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
65 marginLeft = 0; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
66 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
67 this.newX = this.getScale(); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
68 let svg = d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
69 .select(".sliderContainer") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
70 .append("svg") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
71 .attr("width", svgWidth) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
72 .attr("height", svgHeight); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
73 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
74 // zoom event |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
75 let zoom = d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
76 .zoom() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
77 .scaleExtent([0, Infinity]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
78 .translateExtent([[0, 0], [svgWidth, svgHeight]]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
79 .extent([[0, 0], [(svgWidth, svgHeight)]]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
80 .on("zoom", this.zoomed); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
81 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
82 svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
83 .append("g") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
84 .attr("class", "axis--x") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
85 .attr("transform", `translate(${marginLeft}, ${marginTop})`) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
86 .call( |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
87 d3.axisBottom(this.newX).ticks(12) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
88 //.tickFormat(dFormat) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
89 ); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
90 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
91 // 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
|
92 const eventRect = svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
93 .append("rect") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
94 .attr("id", "zoom") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
95 .attr("class", "zoom") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
96 .attr("width", svgWidth) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
97 .attr("height", svgHeight) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
98 .attr("fill", "white") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
99 .attr("opacity", 0.2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
100 .on("mouseover", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
101 svg.select(".zoom").attr("cursor", "move"); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
102 }); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
103 eventRect.call(zoom).on("click", this.onClick); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
104 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
105 const toIsoDate = d => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
106 return d.toISOString(); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
107 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
108 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
109 let drag = d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
110 .drag() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
111 .on("start", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
112 d3.select(".line") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
113 .raise() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
114 .classed("active", true); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
115 }) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
116 .on("drag", this.onDrag) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
117 .on("end", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
118 d3.select(".line").classed("active", false); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
119 }); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
120 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
121 // 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
|
122 svg |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
123 .append("rect") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
124 .attr("class", "line") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
125 .attr("id", "scrubber") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
126 .attr("x", this.newX(d3.isoParse(toIsoDate(this.selectedTime)))) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
127 .attr("y", 0) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
128 .attr("width", 2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
129 .attr("height", svgHeight) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
130 .attr("stroke", "#17a2b8") |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
131 .attr("stroke-width", 2) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
132 .attr("opacity", 0.6) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
133 .on("mouseover", () => { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
134 svg.select(".line").attr("cursor", "e-resize"); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
135 }) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
136 .call(drag); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
137 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
138 getScale() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
139 return d3 |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
140 .scaleTime() |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
141 .range([0, document.getElementById("sliderContainer").clientWidth || 0]) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
142 .domain([ |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
143 d3.isoParse(new Date("2020-01-01")), |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
144 d3.isoParse(new Date("2020-03-01")) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
145 ]); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
146 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
147 zoomed() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
148 let scale = this.getScale(); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
149 this.newX = d3.event.transform.rescaleX(scale); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
150 d3.select(".axis--x").call( |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
151 d3.axisBottom(this.newX).ticks(12) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
152 //.tickFormat(dFormat) |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
153 ); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
154 d3.select(".line").attr("x", this.newX(d3.isoParse(this.selectedTime))); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
155 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
156 onClick() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
157 // Extract the click location |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
158 let point = d3.mouse(document.getElementById("zoom")), |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
159 p = { x: point[0], y: point[1] }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
160 d3.select(".line").attr("x", p.x); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
161 this.selectedTime = d3.isoParse(this.newX.invert(p.x + 2)); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
162 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
163 onDrag() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
164 this.selectedTime = d3.isoParse(this.newX.invert(d3.event.x + 2)); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
165 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
|
166 } |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
167 }, |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
168 mounted() { |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
169 setTimeout(this.createSlider, 150); |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
170 } |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
171 }; |
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
diff
changeset
|
172 </script> |