Mercurial > gemma

annotate client/src/components/TimeSlider.vue @ 5036:8f421cd3c746 time-sliding

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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>