Mercurial > gemma

comparison client/src/components/TimeSlider.vue @ 5061:37371727f704 time-sliding

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve time-slider code
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 09 Mar 2020 15:00:21 +0100
parents ed1d963017e7
children da28a58eb10d
comparison
equal deleted inserted replaced
5060:ed1d963017e7 5061:37371727f704
62 import app from "@/main"; 62 import app from "@/main";
63 import { localeDateString } from "@/lib/datelocalization"; 63 import { localeDateString } from "@/lib/datelocalization";
64 import { format, setHours, setMinutes } from "date-fns"; 64 import { format, setHours, setMinutes } from "date-fns";
65 65
66 let zoom = null; 66 let zoom = null;
67 let xScale = null;
68 let xAxis = null;
69
67 export default { 70 export default {
68 name: "timeslider", 71 name: "timeslider",
69 data() { 72 data() {
70 return { 73 return {
71 newX: null 74 newX: null
127 }, 130 },
128 methods: { 131 methods: {
129 close() { 132 close() {
130 this.$store.commit("application/showTimeSlider", false); 133 this.$store.commit("application/showTimeSlider", false);
131 }, 134 },
135
132 rescaleSlider(scaleFactor) { 136 rescaleSlider(scaleFactor) {
133 const tx = 137 const tx =
134 -scaleFactor * 138 -scaleFactor *
135 this.getScale()(d3.isoParse(this.selectedTime.toISOString())) + 139 this.getScale()(d3.isoParse(this.selectedTime.toISOString())) +
136 document.getElementById("sliderContainer").clientWidth / 2; 140 document.getElementById("sliderContainer").clientWidth / 2;
152 svgHeight = 40, 156 svgHeight = 40,
153 marginTop = 20, 157 marginTop = 20,
154 marginLeft = 0; 158 marginLeft = 0;
155 159
156 d3.timeFormatDefaultLocale(localeDateString); 160 d3.timeFormatDefaultLocale(localeDateString);
161 xScale = this.getScale();
157 this.newX = this.getScale(); 162 this.newX = this.getScale();
163 xAxis = this.getAxes();
158 d3.select(".sliderContainer svg").remove(); 164 d3.select(".sliderContainer svg").remove();
159 let svg = d3 165 let svg = d3
160 .select(".sliderContainer") 166 .select(".sliderContainer")
161 .append("svg") 167 .append("svg")
162 .attr("width", svgWidth) 168 .attr("width", svgWidth)
171 177
172 svg 178 svg
173 .append("g") 179 .append("g")
174 .attr("class", "axis--x") 180 .attr("class", "axis--x")
175 .attr("transform", `translate(${marginLeft}, ${marginTop})`) 181 .attr("transform", `translate(${marginLeft}, ${marginTop})`)
176 .call(this.getAxes()); 182 .call(xAxis);
177 183
178 // create rectanlge on the slider area to capture mouse events 184 // create rectanlge on the slider area to capture mouse events
179 const eventRect = svg 185 const eventRect = svg
180 .append("rect") 186 .append("rect")
181 .attr("id", "zoom") 187 .attr("id", "zoom")
250 .axisBottom(this.newX) 256 .axisBottom(this.newX)
251 .ticks(12) 257 .ticks(12)
252 .tickFormat(axesFormat); 258 .tickFormat(axesFormat);
253 }, 259 },
254 zoomed() { 260 zoomed() {
255 let scale = this.getScale(); 261 this.newX = d3.event.transform.rescaleX(xScale);
256 this.newX = d3.event.transform.rescaleX(scale); 262 xAxis.scale(this.newX);
257 d3.select(".axis--x").call(this.getAxes()); 263 d3.select(".axis--x").call(xAxis);
258 d3.select(".line").attr("x", this.newX(d3.isoParse(this.selectedTime))); 264 d3.select(".line").attr("x", this.newX(d3.isoParse(this.selectedTime)));
259 }, 265 },
260 onClick() { 266 onClick() {
261 // Extract the click location 267 // Extract the click location
262 let point = d3.mouse(document.getElementById("zoom")), 268 let point = d3.mouse(document.getElementById("zoom")),