# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1583839753 -3600
# Node ID d87438a8c89127a5b6e6d2eed6a142907f1bea06
# Parent  43bebcc8961f69e90a25d49dbf9eb539400df917
client: improve time-slider code

	*  Use the transformations on the main axes instead of using copy newX
	*  delete newX variable from data

diff -r 43bebcc8961f -r d87438a8c891 client/src/components/TimeSlider.vue
--- a/client/src/components/TimeSlider.vue	Mon Mar 09 16:30:57 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Tue Mar 10 12:29:13 2020 +0100
@@ -71,8 +71,7 @@
   name: "timeslider",
   data() {
     return {
-      isSelectedTimeHourly: false,
-      newX: null
+      isSelectedTimeHourly: false
     };
   },
   watch: {
@@ -132,7 +131,6 @@
           value = setHours(value, 12);
           value = setMinutes(value, 0);
         }
-
         this.$store.commit("application/setSelectedTime", value);
       }
     }
@@ -141,7 +139,6 @@
     close() {
       this.$store.commit("application/showTimeSlider", false);
     },
-
     rescaleSlider(scaleFactor) {
       const tx =
         -scaleFactor *
@@ -155,7 +152,7 @@
       this.createSlider();
       zoom.translateTo(
         d3.select(".line"),
-        this.newX(d3.isoParse(this.selectedTime.toISOString())),
+        xAxis.scale()(d3.isoParse(this.selectedTime.toISOString())),
         1
       );
     },
@@ -168,7 +165,6 @@
 
       d3.timeFormatDefaultLocale(localeDateString);
       xScale = this.getScale();
-      this.newX = this.getScale();
       xAxis = this.getAxes();
       d3.select(".sliderContainer svg").remove();
       let svg = d3
@@ -225,7 +221,7 @@
         .append("rect")
         .attr("class", "line")
         .attr("id", "scrubber")
-        .attr("x", this.newX(d3.isoParse(toIsoDate(this.selectedTime))))
+        .attr("x", xAxis.scale()(d3.isoParse(toIsoDate(this.selectedTime))))
         .attr("y", 0)
         .attr("width", 2)
         .attr("height", svgHeight)
@@ -262,29 +258,29 @@
           : d3.timeFormat("%Y"))(date);
       };
       return d3
-        .axisBottom(this.newX)
+        .axisBottom(xScale)
         .ticks(12)
         .tickFormat(axesFormat);
     },
     zoomed() {
-      this.newX = d3.event.transform.rescaleX(xScale);
+      let newX = d3.event.transform.rescaleX(xScale);
       const currentScaleFactor = d3.event.transform.k;
       const isHourly = currentScaleFactor > 400;
       if (this.isSelectedTimeHourly != isHourly)
         this.isSelectedTimeHourly = isHourly;
-      xAxis.scale(this.newX);
+      xAxis.scale(newX);
       d3.select(".axis--x").call(xAxis);
-      d3.select(".line").attr("x", this.newX(d3.isoParse(this.selectedTime)));
+      d3.select(".line").attr("x", newX(d3.isoParse(this.selectedTime)));
     },
     onClick() {
       // Extract the click location
       let point = d3.mouse(document.getElementById("zoom")),
         p = { x: point[0], y: point[1] };
       d3.select(".line").attr("x", p.x);
-      this.selectedTime = d3.isoParse(this.newX.invert(p.x + 2));
+      this.selectedTime = d3.isoParse(xAxis.scale().invert(p.x + 2));
     },
     onDrag() {
-      this.selectedTime = d3.isoParse(this.newX.invert(d3.event.x + 2));
+      this.selectedTime = d3.isoParse(xAxis.scale().invert(d3.event.x + 2));
       d3.select(".line").attr("x", d3.event.x);
     }
   },