Finally, a decent fix for the time series datetime ticks.

Goutte
1 parent c9712107
Showing 2 changed files with 40 additions and 32 deletions Show diff stats
web/static/js/main.js
web/view/layout.html.jinja2
@@ -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<any>}
+         */
         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');
@@ -85,7 +85,7 @@
     {# Please use enderjs instead of jquery #}
     <script type="application/javascript" src="{{ static('js/vendor/jquery-3.2.1.min.js') }}"></script>
     {# Material's js behaves very poorly, performance-wise. #}
-{#    <script type="application/javascript" src="{{ static('js/vendor/material-custom.js') }}"></script>#}
+    <script type="application/javascript" src="{{ static('js/vendor/material-custom.js') }}"></script>
     <script type="application/javascript">
       jQuery().ready(function($){ $(".nojs").hide(); });
     </script>