Mercurial > gemma
changeset 4712:3b5268263c5b
Waterlevel: implement date localization
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 17 Oct 2019 12:24:52 +0200 |
parents | 13575ffb8c1f |
children | cd9216c073fd |
files | client/src/components/gauge/Waterlevel.vue |
diffstat | 1 files changed, 23 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Thu Oct 17 12:07:06 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Thu Oct 17 12:24:52 2019 +0200 @@ -351,13 +351,33 @@ // scaling helpers const scale = this.getScale({ dimensions, extent }); - + const dFormat = date => { + // make the x-axis label formats dynamic, based on zoom + // but never display year numbers since they don't make any sense in + // this diagram + 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") + : d3.timeMonth(date) < date + ? d3.timeWeek(date) < date + ? d3.timeFormat("%a %d") + : d3.timeFormat("%b %d") + : d3.timeYear(date) < date + ? d3.timeFormat("%B") + : d3.timeFormat("%Y"))(date); + }; // creating the axes based on the scales const axes = { x: d3 .axisTop(scale.x) .tickSizeInner(dimensions.mainHeight) - .tickSizeOuter(0), + .tickSizeOuter(0) + .tickFormat(dFormat), y: d3 .axisRight(scale.y) .tickSizeInner(dimensions.width) @@ -368,7 +388,7 @@ .tickSizeInner(3) .tickSizeOuter(0) .tickFormat(d => this.$options.filters.waterlevel(d)), - x2: d3.axisBottom(scale.x2) + x2: d3.axisBottom(scale.x2).tickFormat(dFormat) }; // DRAW DIAGRAM/NAVIGATION AREAS