Mercurial > gemma
changeset 5043:bae2548dc484 time-sliding
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() {