From 326b749d91ee1280c4fa4b2c324526ac75d95e2f Mon Sep 17 00:00:00 2001 From: Goutte Date: Thu, 18 Oct 2018 19:00:36 +0200 Subject: [PATCH] Finally, a decent fix for the time series datetime ticks. --- web/static/js/main.js | 70 +++++++++++++++++++++++++++++++++++++++------------------------------- web/view/layout.html.jinja2 | 2 +- 2 files changed, 40 insertions(+), 32 deletions(-) diff --git a/web/static/js/main.js b/web/static/js/main.js index cf75418..b1f52a1 100644 --- a/web/static/js/main.js +++ b/web/static/js/main.js @@ -28,6 +28,7 @@ (function () { const global = typeof exports !== 'undefined' && exports || this; const GOLDEN_RATIO = 2 / (1 + Math.sqrt(5)); // 0.618… + const RATIO = GOLDEN_RATIO ** 4; // Y/X aspect ratio of the time series class Target { constructor(slug, name, config) { @@ -259,13 +260,19 @@ return $('#plots_loader').hide(); } + /** + * Load the data as CSV for the specified target and interval, + * and return it in a Promise. + * + * @param target_slug + * @param started_at + * @param stopped_at + * @returns {Promise} + */ loadData(target_slug, started_at, stopped_at) { - // "Load the data as CSV for the specified target and interval,\nand return it in a Promise."; - let sw; - sw = this; + let app = this; return new Promise((resolve, reject) => { - let url; - url = sw.buildDataUrlForTarget(target_slug, started_at, stopped_at); + let url = app.buildDataUrlForTarget(target_slug, started_at, stopped_at); return d3.csv(url, csv => { let timeFormat; let data; @@ -507,16 +514,17 @@ } resizeDomain(started_at, stopped_at, starting_ts) { - let ref$; let max_stopped_at; let formatted_started_at; let formatted_stopped_at; let zoomedOnVisible; if (stopped_at < started_at) { - ref$ = [stopped_at, started_at], started_at = ref$[0], stopped_at = ref$[1]; + let tmp_at = started_at; + started_at = stopped_at; + stopped_at = tmp_at; } if (started_at === stopped_at) { - console.warn("Please provide distinct start and stop dates."); + alert("Please provide distinct start and stop dates."); return; } max_stopped_at = started_at.clone().add(2, 'years'); @@ -538,11 +546,11 @@ console.log("Zoom on invisible time series…"); let tsv_zoom_on_next; tsv_zoom_on_next = i => { - let ts; if (i >= tsv_length) { resolve(); return; } + let ts; ts = tsv[(i+starting_ts_key)%tsv_length]; ts.zoomIn(started_at, stopped_at) .then(() => tsv_zoom_on_next(i + 1)); @@ -583,15 +591,10 @@ } } - // return SpaceWeather; - // })()); ///////////////////////////////////////////////////////////////////////////// //// TIME SERIES //////////////////////////////////////////////////////////// - // global.TimeSeries = TimeSeries = ((() => { - const RATIO = GOLDEN_RATIO ** 4; - class TimeSeries { constructor(parameter, title, target, data, visible, container, options) { this.onBrushEnd = this.onBrushEnd.bind(this); @@ -650,8 +653,10 @@ if (this.options['stopped_at']) { this.xDataExtent[1] = this.options['stopped_at']; } - this.xScale = d3.scaleTime().domain(this.xDataExtent); + this.xScale = d3.scaleUtc().domain(this.xDataExtent); this.yScale = d3.scaleLinear().domain(this.yDataExtent); + + // http://pubs.opengroup.org/onlinepubs/007908799/xsh/strftime.html const formatMillisecond = d3.utcFormat(".%L"); const formatSecond = d3.utcFormat(":%S"); const formatMinute = d3.utcFormat("%H:%M"); @@ -660,33 +665,36 @@ const formatWeek = d3.utcFormat("%b %d"); const formatMonth = d3.utcFormat("%B"); const formatYear = d3.utcFormat("%Y"); + const formatDoy = d3.utcFormat("%Y-%j"); const multiFormat = date => { - if (date > d3.timeSecond(date)) { + if (date > d3.utcSecond(date)) { return formatMillisecond(date); } - if (date > d3.timeMinute(date)) { + if (date > d3.utcMinute(date)) { return formatSecond(date); } - if (date > d3.timeHour(date)) { + if (date > d3.utcHour(date)) { return formatMinute(date); } - if (date > d3.timeDay(date)) { + if (date > d3.utcDay(date)) { return formatHour(date); } - if (date > d3.timeMonth(date)) { - if (date > d3.timeWeek(date)) { - return formatDay(date); - } else { - return formatWeek(date); - } - } - if (date > d3.timeYear(date)) { - return formatMonth(date); - } - return formatYear(date); + return formatDoy(date); + // if (date > d3.utcMonth(date)) { + // if (date > d3.utcWeek(date)) { + // return utcDay(date); + // } else { + // return utcWeek(date); + // } + // } + // if (date > d3.utcYear(date)) { + // return formatMonth(date); + // } + // + // return formatYear(date); }; - // let formatScience = d3.utcFormat("%Y"); + this.xAxis = d3.axisBottom().tickFormat(multiFormat).ticks(7); this.yAxis = d3.axisLeft().ticks(10); this.svg = d3.select(this.container).append('svg'); diff --git a/web/view/layout.html.jinja2 b/web/view/layout.html.jinja2 index afe5d65..e54da18 100755 --- a/web/view/layout.html.jinja2 +++ b/web/view/layout.html.jinja2 @@ -85,7 +85,7 @@ {# Please use enderjs instead of jquery #} {# Material's js behaves very poorly, performance-wise. #} -{# #} + -- libgit2 0.21.2