Fix wrong date on stats overview page (#15604)

static/js/impala/stats/overview.js

@@ -1,20 +1,12 @@
-$(function () {
-  if ($('.primary').attr('data-report') != 'overview') return;
+(function (jQuery, window) {
+  'use strict';
 
-  // set up topcharts (defined in topchart.js)
-  $('.toplist').topChart();
+  // This function is called once we have stats data and we get aggregates for
+  // daily users and weekly downloads.
+  const stats_overview_make_handler = function ({ view }) {
+    const range = normalizeRange(view.range);
 
-  $(window).on('changeview', function (e, view) {
-    $('.two-up').addClass('loading');
-  });
-  // Save some requests by waiting until the graph data is ready.
-  $(window).on('dataready', function (e, data) {
-    // return;
-    var view = _.extend({}, data.view, { group: 'all' }),
-      range = normalizeRange(view.range);
-
-    // get aggregates for Daily Users and Downloads for the given time range.
-    $.when(z.StatsManager.getDataRange(view)).then(function (data) {
+    return function (data) {
       if (data.empty) {
         $('#downloads-in-range, #users-in-range').text(
           gettext('No data available.'),
@@ -28,6 +20,13 @@ $(function () {
           endString = range.end.iso(),
           downloadFormat,
           userFormat;
+
+        // Trim end date by one day if custom range.
+        if (view.range.custom) {
+          const msDay = 24 * 60 * 60 * 1000; // One day in milliseconds.
+          endString = new Date(range.end.getTime() - msDay).iso();
+        }
+
         if (typeof view.range == 'string') {
           (downloadFormat = csv_keys.aggregateLabel.downloads[0]),
             (userFormat = csv_keys.aggregateLabel.usage[0]);
@@ -49,6 +48,37 @@ $(function () {
         }
       }
       $('.two-up').removeClass('loading');
+    };
+  };
+
+  // `$` is passed by jQuery itself when calling `jQuery(stats_overview)`.
+  const stats_overview = function ($) {
+    if ($('.primary').attr('data-report') != 'overview') {
+      return;
+    }
+
+    // set up topcharts (defined in topchart.js)
+    $('.toplist').topChart();
+
+    $(window).on('changeview', function (e, view) {
+      $('.two-up').addClass('loading');
     });
-  });
-});
+
+    // Save some requests by waiting until the graph data is ready.
+    $(window).on('dataready', function (e, data) {
+      const view = _.extend({}, data.view, { group: 'all' });
+
+      // Get aggregates for Daily Users and Downloads for the given time range.
+      $.when(z.StatsManager.getDataRange(view)).then(
+        stats_overview_make_handler({ view }),
+      );
+    });
+  };
+
+  if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports.stats_overview = stats_overview;
+    module.exports.stats_overview_make_handler = stats_overview_make_handler;
+  } else {
+    jQuery(stats_overview);
+  }
+})(jQuery, window);

static/js/lib/format.js

@@ -20,6 +20,7 @@ var format = (function () {
     });
   };
 })();
+
 function template(s) {
   if (!s) {
     throw 'Template string is empty!';
@@ -28,3 +29,8 @@ function template(s) {
     return format(s, args);
   };
 }
+
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+  module.exports.format = format;
+  module.exports.template = template;
+}

tests/js/setup.js

@@ -7,3 +7,8 @@ global._ = require('lodash');
 // This helper is also available globally. We create a naive implementation for
 // testing purposes.
 global.gettext = (str) => str;
+
+// This is a shared lib that is available everywhere on the site.
+const { format, template } = require('../../static/js/lib/format.js');
+global.format = format;
+global.template = template;

tests/js/zamboni/stats.spec.js

@@ -124,4 +124,107 @@ describe(__filename, () => {
       });
     });
   });
+
+  describe('stats/overview.js', () => {
+    let stats_overview_make_handler;
+
+    beforeEach(() => {
+      const stats_all = require('../../../static/js/zamboni/stats-all.js');
+
+      stats_overview_make_handler = stats_all.stats_overview_make_handler;
+    });
+
+    describe('"in-range" dates', () => {
+      const createMinimalHTML = () => {
+        return `
+<div class="primary" data-report="overview">
+  <div id="downloads-in-range"></div>
+  <div id="users-in-range"></div>
+</div>`;
+      };
+
+      beforeEach(() => {
+        document.body.innerHTML = createMinimalHTML();
+      });
+
+      it('handles empty data', () => {
+        const view = {
+          group: 'all',
+          metric: 'overview',
+          range: '30 days',
+        };
+
+        const data = { empty: true };
+
+        stats_overview_make_handler({ view })(data);
+
+        expect($('#downloads-in-range').text()).toEqual('No data available.');
+        expect($('#users-in-range').text()).toEqual('No data available.');
+      });
+
+      it('displays the correct information for a predefined range', () => {
+        const view = {
+          group: 'all',
+          metric: 'overview',
+          range: '7 days',
+        };
+        const downloads = 12;
+        const users = 456;
+        const data = {
+          empty: false,
+          firstIndex: '2020-09-01',
+          '2020-09-01': {
+            data: {
+              downloads,
+              updates: users, // not sure why it's named `updates` here...
+            },
+          },
+        };
+
+        stats_overview_make_handler({ view })(data);
+
+        expect($('#downloads-in-range').text()).toEqual(
+          `${downloads} in last 7 days`,
+        );
+        expect($('#users-in-range').text()).toEqual(
+          `${users} average in last 7 days`,
+        );
+      });
+
+      it('displays the correct dates for a custom range', () => {
+        const view = {
+          group: 'all',
+          metric: 'overview',
+          range: {
+            custom: true,
+            start: Date.UTC(2019, 11 - 1, 15),
+            // When loading the page, 1 day is added to the `range.end` date so
+            // we have to substract it later in overview code...
+            end: Date.UTC(2019, 11 - 1, 25 + 1),
+          },
+        };
+        const downloads = 12;
+        const users = 456;
+        const data = {
+          empty: false,
+          firstIndex: '2020-09-01',
+          '2020-09-01': {
+            data: {
+              downloads,
+              updates: users, // not sure why it's named `updates` here...
+            },
+          },
+        };
+
+        stats_overview_make_handler({ view })(data);
+
+        expect($('#downloads-in-range').text()).toEqual(
+          `${downloads} from 2019-11-15 to 2019-11-25`,
+        );
+        expect($('#users-in-range').text()).toEqual(
+          `${users} from 2019-11-15 to 2019-11-25`,
+        );
+      });
+    });
+  });
 });