feat(reports): Statistics Summary (AGP) + modern report charts

lib/client/chart.js

@@ -56,13 +56,16 @@ function init (client, d3, $) {
 
   var localeFormatter = d3.timeFormatLocale(d3locales.locale(client.settings.language));
 
-  function beforeBrushStarted () {
+  function beforeBrushStarted (event) {
     // go ahead and move the brush because
     // a single click will not execute the brush event
     var now = new Date();
     var dx = chart.xScale2(now) - chart.xScale2(new Date(now.getTime() - client.focusRangeMS));
 
-    var cx = d3.mouse(this)[0];
+    // d3 v5's mouse helper unwrapped touch events automatically; d3.pointer does not,
+    // so pass the first changed touch for touchstart events
+    var pointerSource = event.changedTouches ? event.changedTouches[0] : event;
+    var cx = d3.pointer(pointerSource, this)[0];
     var x0 = cx - dx / 2;
     var x1 = cx + dx / 2;
 
@@ -196,11 +199,13 @@ function init (client, d3, $) {
   // setup a brush
   chart.brush = d3.brushX()
     .on('start', brushStarted)
-    .on('brush', function brush (time) {
+    .on('brush', function brush () {
       // layouting the graph causes a brushed event
       // ignore retro data load the first two seconds
+      // (in d3 v6+ the handler receives the brush event as its first
+      // argument; client.brushed() reads the selection itself and takes no args)
       if (Date.now() - loadTime > 2000) client.loadRetroIfNeeded();
-      client.brushed(time);
+      client.brushed();
     })
     .on('end', brushEnded);
 

lib/client/renderer.js

@@ -47,9 +47,9 @@ function init (client, d3) {
     return radius / focusRangeAdjustment();
   };
 
-  function tooltipLeft () {
+  function tooltipLeft (event) {
     var windowWidth = $(client.tooltip.node()).parent().parent().width();
-    var left = d3.event.pageX + TOOLTIP_WIDTH < windowWidth ? d3.event.pageX : windowWidth - TOOLTIP_WIDTH - 10;
+    var left = event.pageX + TOOLTIP_WIDTH < windowWidth ? event.pageX : windowWidth - TOOLTIP_WIDTH - 10;
     return left + 'px';
   }
 
@@ -128,7 +128,7 @@ function init (client, d3) {
       return sel;
     }
 
-    function focusCircleTooltip (d) {
+    function focusCircleTooltip (event, d) {
       if (d.type !== 'sgv' && d.type !== 'mbg' && d.type !== 'forecast') {
         return;
       }
@@ -154,8 +154,8 @@ function init (client, d3) {
           (rawbgInfo.value ? '<br/><strong>' + translate('Raw BG') + ':</strong> ' + rawbgInfo.value : '') +
           (rawbgInfo.noise ? '<br/><strong>' + translate('Noise') + ':</strong> ' + rawbgInfo.noise : '') +
           '<br/><strong>' + translate('Time') + ':</strong> ' + client.formatTime(getOrAddDate(d)))
-        .style('left', tooltipLeft())
-        .style('top', (d3.event.pageY + 15) + 'px');
+        .style('left', tooltipLeft(event))
+        .style('top', (event.pageY + 15) + 'px');
     }
 
     // CGM data
@@ -337,11 +337,11 @@ function init (client, d3) {
     // if new circle then just display
     prepareTreatCircles(treatCircles.enter().append('circle'))
       .attr('class', 'treatment-dot')
-      .on('mouseover', function(d) {
+      .on('mouseover', function(event, d) {
         client.tooltip.style('display', 'block');
         client.tooltip.html(d.isAnnouncement ? announcementTooltip(d) : treatmentTooltip(d))
-          .style('left', tooltipLeft())
-          .style('top', (d3.event.pageY + 15) + 'px');
+          .style('left', tooltipLeft(event))
+          .style('top', (event.pageY + 15) + 'px');
       })
       .on('mouseout', hideTooltip);
 
@@ -434,11 +434,11 @@ function init (client, d3) {
     var newRects = treatRects.enter().append('g')
       .attr('class', 'g-duration')
       .attr('transform', rectTranslate)
-      .on('mouseover', function(d) {
+      .on('mouseover', function(event, d) {
         client.tooltip.style('display', 'block');
         client.tooltip.html(d.isAnnouncement ? announcementTooltip(d) : treatmentTooltip(d))
-          .style('left', tooltipLeft())
-          .style('top', (d3.event.pageY + 15) + 'px');
+          .style('left', tooltipLeft(event))
+          .style('top', (event.pageY + 15) + 'px');
       })
       .on('mouseout', hideTooltip);
 
@@ -631,7 +631,7 @@ function init (client, d3) {
       return html;
     }
 
-    function treatmentTooltip () {
+    function treatmentTooltip (event) {
       var glucose = treatment.glucose;
       if (client.settings.units != client.ddata.profile.getUnits()) {
         glucose *= (client.settings.units === 'mmol' ? (1 / consts.MMOL_TO_MGDL) : consts.MMOL_TO_MGDL);
@@ -653,8 +653,8 @@ function init (client, d3) {
           (treatment.notes ? '<strong>' + translate('Notes') + ':</strong> ' + treatment.notes : '') +
           boluscalcTooltip(treatment)
         )
-        .style('left', tooltipLeft())
-        .style('top', (d3.event.pageY + 15) + 'px');
+        .style('left', tooltipLeft(event))
+        .style('top', (event.pageY + 15) + 'px');
     }
 
     var newTime;
@@ -663,13 +663,13 @@ function init (client, d3) {
     var carbsRect = { x: 0, y: 0, width: 0, height: 0 };
     var operation;
     renderer.drag = d3.drag()
-      .on('start', function() {
+      .on('start', function(event) {
         //console.log(treatment);
         var windowWidth = $(client.tooltip.node()).parent().parent().width();
-        var left = d3.event.x + TOOLTIP_WIDTH < windowWidth ? d3.event.x : windowWidth - TOOLTIP_WIDTH - 10;
+        var left = event.x + TOOLTIP_WIDTH < windowWidth ? event.x : windowWidth - TOOLTIP_WIDTH - 10;
         client.tooltip.style('display', 'block')
           .style('left', left + 'px')
-          .style('top', (d3.event.pageY ? d3.event.pageY + 15 : 40) + 'px');
+          .style('top', (event.sourceEvent && event.sourceEvent.pageY ? event.sourceEvent.pageY + 15 : 40) + 'px');
 
         deleteRect = {
           x: 0
@@ -757,14 +757,14 @@ function init (client, d3) {
         chart().basals.attr('display', 'none');
 
         operation = 'Move';
-        var x = Math.min(Math.max(0, d3.event.x), chart().charts.attr('width'));
+        var x = Math.min(Math.max(0, event.x), chart().charts.attr('width'));
         newTime = new Date(chart().xScale.invert(x));
       })
-      .on('drag', function() {
-        //console.log(d3.event);
+      .on('drag', function(event) {
+        //console.log(event);
         client.tooltip.style('display', 'block');
-        var x = Math.min(Math.max(0, d3.event.x), chart().charts.attr('width'));
-        var y = Math.min(Math.max(0, d3.event.y), chart().focusHeight);
+        var x = Math.min(Math.max(0, event.x), chart().charts.attr('width'));
+        var y = Math.min(Math.max(0, event.y), chart().focusHeight);
 
         operation = 'Move';
         if (isInRect(x, y, deleteRect) && isInRect(x, y, insulinRect)) {
@@ -1267,11 +1267,11 @@ function init (client, d3) {
           'translate(' + chart().xScale(t.mills) + ',' + chart().yScaleBasals(topOfText) + ')';
       })
       .text(generateText)
-      .on('mouseover', function(d) {
+      .on('mouseover', function(event, d) {
         client.tooltip.style('display', 'block');
         client.tooltip.html(profileTooltip(d))
-          .style('left', (d3.event.pageX) + 'px')
-          .style('top', (d3.event.pageY + 15) + 'px');
+          .style('left', (event.pageX) + 'px')
+          .style('top', (event.pageY + 15) + 'px');
       })
       .on('mouseout', hideTooltip);
 

lib/report/reportclient.js

@@ -30,6 +30,12 @@ var init = function init () {
     var datastorage = {};
     var daystoshow = {};
     var sorteddaystoshow = [];
+    // Tracks which report tabs have already been drawn for the currently loaded
+    // data, and the options used, so switching tabs can lazily render from the
+    // already-loaded data instead of forcing a reload. Reset whenever the data
+    // is reloaded (i.e. when the time range changes and the report is re-run).
+    var renderedPlugins = {};
+    var lastShownOptions = null;
 
     var targetBGdefault = {
       'mg/dl': {
@@ -46,6 +52,40 @@ var init = function init () {
 
     prepareGUI();
 
+    // Auto-generate the default (7-day) report on load so the Statistics
+    // Summary tab shows data immediately, without a manual "Show" click. The
+    // date range already defaults to the last 7 days with the date filter
+    // enabled, so we just need to trigger show() once the data is ready.
+    //
+    // show() needs profile/timezone data, which only becomes available on
+    // client.sbx.data after the first socket data-update cycle. Poll until it
+    // is ready, capped (~30s) so we never spin forever. The cap also makes this
+    // safe in the headless test harness: there setTimeout runs synchronously
+    // and the data is loaded later by the test itself, so the poll simply
+    // exhausts its attempts during init and gives up without rendering, leaving
+    // the test in full control. This lives in the bundle (not the static
+    // reportinit.js, which is not cache-busted) so it updates reliably on deploy.
+    var autoShowAttempts = 0;
+    (function waitForProfileThenShow () {
+      autoShowAttempts++;
+      var profileReady = client.sbx && client.sbx.data && client.sbx.data.profile
+        && typeof client.sbx.data.profile.getTimezone === 'function';
+      if (profileReady) {
+        try {
+          show();
+        } catch (err) {
+          console.error('Auto-show of report failed', err);
+        }
+      } else if (autoShowAttempts < 120) {
+        window.setTimeout(waitForProfileThenShow, 250);
+      } else {
+        // Data never became ready within the window; leave the report idle for
+        // a manual "Show". Info-level so the test harness (which intentionally
+        // exhausts the poll) and slow loads don't surface a warning.
+        console.info('Auto-show: report data not ready in time; awaiting manual Show');
+      }
+    })();
+
     // ****** FOOD CODE START ******
     var food_categories = [];
     var food_list = [];
@@ -485,12 +525,16 @@ var init = function init () {
 
       $('#rp_show').css('display', 'none');
       daystoshow = {};
+      // New data is being loaded for this (possibly new) time range, so any
+      // previously rendered tabs are now stale and must be redrawn on demand.
+      renderedPlugins = {};
 
       datefilter();
       return maybePrevent(event);
     }
 
     function showreports (options) {
+      lastShownOptions = options;
       // prepare some data used in more reports
       datastorage.allstatsrecords = [];
       datastorage.alldays = 0;
@@ -543,6 +587,7 @@ var init = function init () {
           console.log('Skipping ', plugin.name);
         } else {
           plugin.report(datastorage, sorteddaystoshow, options);
+          renderedPlugins[plugin.name] = true;
         }
 
         if (!$('#' + plugin.name).hasClass('selected')) {
@@ -568,9 +613,40 @@ var init = function init () {
 
       $('.tabplaceholder').css('display', 'none');
       $('#' + id + '-placeholder').css('display', '');
+
+      // Lazily render this tab from the already-loaded data the first time it is
+      // viewed. The heavy per-day reports (daytoday, weektoweek, treatments,
+      // loopalyzer) are skipped during the initial render for speed; this draws
+      // them on demand without reloading. Tabs already drawn for the current
+      // time range are left as-is.
+      maybeRenderPlugin(id);
+
       return maybePrevent(event);
     }
 
+    function maybeRenderPlugin (name) {
+      if (renderedPlugins[name]) { return; } // already drawn for the current data
+      if (!lastShownOptions || !sorteddaystoshow.length) { return; } // no data loaded yet
+      var plugin = report_plugins(name);
+      if (!plugin || typeof plugin.report !== 'function') { return; }
+
+      // Mark as rendered synchronously so a rapid second click on the same tab
+      // (before the deferred render fires) cannot queue a duplicate draw.
+      renderedPlugins[name] = true;
+      $('#info').html('<b>' + translate('Rendering') + ' ...</b>');
+      // Defer so the tab switch paints first; the placeholder is already visible
+      // (jquery.plot will not draw into a hidden div).
+      window.setTimeout(function renderOnDemand () {
+        try {
+          plugin.report(datastorage, sorteddaystoshow, lastShownOptions);
+        } catch (err) {
+          renderedPlugins[name] = false; // allow a retry on the next activation
+          console.error('On-demand render of ' + name + ' failed', err);
+        }
+        $('#info').html('');
+      }, 0);
+    }
+
     function loadData (day, options, callback) {
       // check for loaded data
       if ((options.openAps || options.predicted || options.iob || options.cob) && datastorage[day] && !datastorage[day].devicestatus.length) {