Mercurial > gemma

changeset 5043:bae2548dc484 time-sliding

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve the axes labeling for time-slider
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 28 Feb 2020 16:38:53 +0100
parents 28b260fdc303
children ca5b1b5a553a
files client/src/components/TimeSlider.vue
diffstat 1 files changed, 27 insertions(+), 8 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/TimeSlider.vue	Fri Feb 28 15:13:54 2020 +0100
+++ b/client/src/components/TimeSlider.vue	Fri Feb 28 16:38:53 2020 +0100
@@ -51,6 +51,8 @@
  */
 import { mapState } from "vuex";
 import * as d3 from "d3";
+import app from "@/main";
+
 let zoom = null;
 export default {
   name: "timeslider",
@@ -132,10 +134,7 @@
         .append("g")
         .attr("class", "axis--x")
         .attr("transform", `translate(${marginLeft}, ${marginTop})`)
-        .call(
-          d3.axisBottom(this.newX).ticks(12)
-          //.tickFormat(dFormat)
-        );
+        .call(this.getAxes());
 
       // create rectanlge on the slider area to capture mouse events
       const eventRect = svg
@@ -190,13 +189,33 @@
         .range([0, document.getElementById("sliderContainer").clientWidth || 0])
         .domain([d3.isoParse(new Date("2015-01-01")), d3.isoParse(new Date())]);
     },
+    getAxes() {
+      const axesFormat = date => {
+        return (d3.timeSecond(date) < date
+          ? d3.timeFormat(".%L")
+          : d3.timeMinute(date) < date
+          ? d3.timeFormat(":%S")
+          : d3.timeHour(date) < date
+          ? d3.timeFormat("%H:%M")
+          : d3.timeDay(date) < date
+          ? d3.timeFormat("%H:%M")
+          : d3.timeMonth(date) < date
+          ? d3.timeWeek(date) < date
+            ? d3.timeFormat(app.$gettext("%a %d"))
+            : d3.timeFormat(app.$gettext("%b %d"))
+          : d3.timeYear(date) < date
+          ? d3.timeFormat("%B")
+          : d3.timeFormat("%Y"))(date);
+      };
+      return d3
+        .axisBottom(this.newX)
+        .ticks(12)
+        .tickFormat(axesFormat);
+    },
     zoomed() {
       let scale = this.getScale();
       this.newX = d3.event.transform.rescaleX(scale);
-      d3.select(".axis--x").call(
-        d3.axisBottom(this.newX).ticks(12)
-        //.tickFormat(dFormat)
-      );
+      d3.select(".axis--x").call(this.getAxes());
       d3.select(".line").attr("x", this.newX(d3.isoParse(this.selectedTime)));
     },
     onClick() {