tideline 1.37.0-develop.1 → 1.37.0-rc.2

package/dist/event..svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0.75C13.5563 0.75 17.25 4.44365 17.25 9C17.25 13.5563 13.5563 17.25 9 17.25C4.44365 17.25 0.75 13.5563 0.75 9C0.75 4.44365 4.44365 0.750001 9 0.75Z" fill="white" stroke="#CC6D00" stroke-width="1.5"/>
+<path d="M9 9.10053V5.99951M9 12.0237V12.1064" stroke="#CC6D00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/img/event/event.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0.75C13.5563 0.75 17.25 4.44365 17.25 9C17.25 13.5563 13.5563 17.25 9 17.25C4.44365 17.25 0.75 13.5563 0.75 9C0.75 4.44365 4.44365 0.750001 9 0.75Z" fill="white" stroke="#CC6D00" stroke-width="1.5"/>
+<path d="M9 9.10053V5.99951M9 12.0237V12.1064" stroke="#CC6D00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/js/index.js

@@ -48,6 +48,7 @@ module.exports = {
     smbg: require('./plot/smbg'),
     suspend: require('./plot/suspend'),
     alarm: require('./plot/alarm'),
+    event: require('./plot/event'),
     pumpSettingsOverride: require('./plot/pumpSettingsOverride'),
     wizard: require('./plot/wizard'),
     carb: require('./plot/carb'),

package/js/oneday.js

@@ -32,22 +32,21 @@ module.exports = function(emitter, opts) {
     timePrefs: {
       timezoneAware: false,
       timezoneName: dt.getBrowserTimezone(),
-    }
+    },
+    minHeight: 400,
+    minWidth: 300,
   };
   _.defaults(opts, defaults);
 
-  // constants
-  var MS_IN_24 = 86400000;
-
   // basic attributes
   var id,
-    minWidth = 300, minHeight = 400,
+    minWidth = opts.minWidth, minHeight = opts.minHeight,
     width = minWidth, height = minHeight,
     poolScaleHeight,
     nav = {
-      scrollNav: true,
-      scrollNavHeight: 50,
-      scrollGutterHeight: 20,
+      scrollNav: !opts.endpoints,
+      scrollNavHeight: !opts.endpoints ? 50 : 0,
+      scrollGutterHeight: !opts.endpoints ? 20 : 0,
       scrollThumbRadius: 24,
       currentTranslation: 0
     },
@@ -55,7 +54,7 @@ module.exports = function(emitter, opts) {
     buffer = 2,
     pools = [], poolGroup,
     xScale = d3.time.scale.utc(),
-    currentCenter, data, tidelineData, renderedData = [], endpoints,
+    currentCenter, data, renderedData = [], endpoints,
     mainSVG, mainGroup,
     scrollNav, scrollHandleTrigger = true, mostRecent = false, annotations, tooltips;
 
@@ -155,8 +154,8 @@ module.exports = function(emitter, opts) {
       });
   };
 
-  container.newPool = function() {
-    var p = new Pool(container);
+  container.newPool = function(opts) {
+    var p = new Pool(container, opts);
     pools.push(p);
     return p;
   };
@@ -506,19 +505,24 @@ module.exports = function(emitter, opts) {
   container.data = function(a) {
     if (!arguments.length) return data;
 
-    if (! (a && Array.isArray(a) && a.length > 0)) {
+    data = a;
+
+    if (opts.endpoints) {
+      endpoints = container.endpoints = container.initialEndpoints = opts.endpoints;
+      return container;
+    }
+
+    if (! (data && Array.isArray(data) && data.length > 0)) {
       /* jshint ignore:start */
       throw new Error("Sorry, I can't render anything without /some/ data.");
       /* jshint ignore:end */
     }
-    else if (a.length === 1) {
+    else if (data.length === 1) {
       /* jshint ignore:start */
       throw new Error("Sorry, I can't render anything with only *one* datapoint.");
       /* jshint ignore:end */
     }
 
-    data = a;
-
     var first = new Date(data[0].normalTime);
     var lastObj = _.sortBy(data, function(d) {
       return d.normalEnd ? d.normalEnd : d.normalTime;

package/js/plot/cbg.js

@@ -157,7 +157,8 @@ module.exports = function(pool, opts) {
       opts.onCBGHover({
         data: d,
         rect: rect,
-        class: categorizer(opts.classes, opts.bgUnits)(d)
+        class: categorizer(opts.classes, opts.bgUnits)(d),
+        chartEndpoints: opts.chartEndpoints,
       });
     }
   };

package/js/plot/event.js

@@ -0,0 +1,93 @@
+var d3 = require('d3');
+var _ = require('lodash');
+
+var eventImage = require('../../img/event/event.svg');
+
+/**
+ * Module for adding event markers to a chart pool
+ *
+ * @param  {Object} pool the chart pool
+ * @param  {Object|null} opts configuration options
+ * @return {Object}      event object
+ */
+module.exports = function(pool, opts = {}) {
+  function event(selection) {
+    selection.each(function(currentData) {
+      var filteredData = _.filter(currentData, d => _.isString(d.tags?.event));
+
+      var events = d3.select(this)
+        .selectAll('g.d3-event-group')
+        .data(filteredData, function(d) {
+          return d.id;
+        });
+
+      var eventGroup = events.enter()
+        .append('g')
+        .attr({
+          'class': 'd3-event-group',
+          id: function(d) {
+            return 'event_' + d.id;
+          }
+        });
+
+      event.addeventToPool(eventGroup);
+
+      events.exit().remove();
+
+      // tooltips
+      selection.selectAll('.d3-event-group').on('mouseover', function() {
+        var parentContainer = document.getElementsByClassName('patient-data')[0].getBoundingClientRect();
+        var chartNavContainer = document.getElementById('tidelineScrollNav').getBoundingClientRect();
+        var container = this.getBoundingClientRect();
+        container.y = container.top - parentContainer.top;
+
+        var chartExtents = {
+          left: chartNavContainer.left,
+          right: chartNavContainer.right,
+          width: chartNavContainer.right - chartNavContainer.left,
+        };
+
+        event.addTooltip(d3.select(this).datum(), container, chartExtents);
+      });
+
+      selection.selectAll('.d3-event-group').on('mouseout', function() {
+        if (_.get(opts, 'onEventOut', false)) {
+          opts.onEventOut();
+        }
+      });
+    });
+  };
+
+  event.addTooltip = function(d, rect, chartExtents) {
+    if (_.get(opts, 'onEventHover', false)) {
+      opts.onEventHover({
+        data: d,
+        rect: rect,
+        chartExtents,
+      });
+    }
+  };
+
+  event.addeventToPool = function(selection) {
+    opts.xScale = pool.xScale().copy();
+    selection.append('image')
+      .attr({
+        'xlink:href': eventImage,
+        x: event.xPositionCorner,
+        y: event.yPositionCorner,
+        width: opts.size,
+        height: opts.size
+      })
+      .classed({'d3-image': true, 'd3-event': true});
+  };
+
+  event.xPositionCorner = function(d) {
+    return opts.xScale(d.normalTime) - opts.size / 2;
+  };
+
+  event.yPositionCorner = function(d) {
+    return pool.height() / 2 - opts.size / 2;
+  };
+
+  return event;
+};

package/js/plot/smbg.js

@@ -114,7 +114,8 @@ module.exports = function(pool, opts) {
       opts.onSMBGHover({
         data: d,
         rect: rect,
-        class: categorizer(opts.classes, opts.bgUnits)(d)
+        class: categorizer(opts.classes, opts.bgUnits)(d),
+        chartEndpoints: opts.chartEndpoints,
       });
     }
   };

package/js/plot/util/axes/dailyx.js

@@ -30,7 +30,7 @@ module.exports = function(pool, opts) {
     textShiftX: 5,
     textShiftY: 5,
     tickLength: 15,
-    longTickMultiplier: 3.75,
+    longTickMultiplier: opts.dayLabel ? 3.75 : 1,
     timePrefs: {
       timezoneAware: false,
       timezoneName: dt.getBrowserTimezone(),
@@ -41,43 +41,45 @@ module.exports = function(pool, opts) {
 
   var mainGroup = pool.parent();
 
-  var stickyLabel = mainGroup.select('#tidelineLabels')
-    .append('g')
-    .attr('class', 'd3-axis')
-    .append('text')
-    .attr({
-      'class': 'd3-day-label',
-      x: opts.leftEdge + 4,
-      // this is the same as dailyx.dayYPosition
-      // we just don't have a datum to pass here
-      y: pool.height() - opts.tickLength * opts.longTickMultiplier
+  if (opts.dayLabel) {
+    var stickyLabel = mainGroup.select('#tidelineLabels')
+      .append('g')
+      .attr('class', 'd3-axis')
+      .append('text')
+      .attr({
+        'class': 'd3-day-label',
+        x: opts.leftEdge + 4,
+        // this is the same as dailyx.dayYPosition
+        // we just don't have a datum to pass here
+        y: pool.height() - opts.tickLength * opts.longTickMultiplier
+      });
+
+    opts.emitter.on('zoomstart', function() {
+      stickyLabel.attr('opacity', '0.2');
     });
 
-  opts.emitter.on('zoomstart', function() {
-    stickyLabel.attr('opacity', '0.2');
-  });
-
-  opts.emitter.on('zoomend', function() {
-    stickyLabel.attr('opacity', '1.0');
-  });
+    opts.emitter.on('zoomend', function() {
+      stickyLabel.attr('opacity', '1.0');
+    });
 
-  opts.emitter.on('navigated', function(a) {
-    var offset = 0, d;
-    if (opts.timePrefs.timezoneAware) {
-      offset = -dt.getOffset(a[0].start, opts.timePrefs.timezoneName);
-      d = moment(a[0].start).tz(opts.timePrefs.timezoneName);
-    }
-    else {
-      d = moment(a[0].start).utc();
-    }
-    // when we're close to midnight (where close = five hours on either side)
-    // remove the sticky label so it doesn't overlap with the midnight-anchored day label
-    if ((d.hours() >= 19) || (d.hours() <= 4)) {
-      stickyLabel.text('');
-      return;
-    }
-    stickyLabel.text(format.xAxisDayText(d.toISOString(), offset));
-  });
+    opts.emitter.on('navigated', function(a) {
+      var offset = 0, d;
+      if (opts.timePrefs.timezoneAware) {
+        offset = -dt.getOffset(a[0].start, opts.timePrefs.timezoneName);
+        d = moment(a[0].start).tz(opts.timePrefs.timezoneName);
+      }
+      else {
+        d = moment(a[0].start).utc();
+      }
+      // when we're close to midnight (where close = five hours on either side)
+      // remove the sticky label so it doesn't overlap with the midnight-anchored day label
+      if ((d.hours() >= 19) || (d.hours() <= 4)) {
+        stickyLabel.text('');
+        return;
+      }
+      stickyLabel.text(format.xAxisDayText(d.toISOString(), offset));
+    });
+  }
 
   function dailyx(selection) {
 
@@ -112,7 +114,7 @@ module.exports = function(pool, opts) {
           return format.xAxisTickText(d.normalTime, d.displayOffset);
         });
 
-      tickGroups.filter(function(d) {
+      if (opts.dayLabel) tickGroups.filter(function(d) {
         var date = new Date(d.normalTime);
         date = new Date(dt.applyOffset(date, d.displayOffset));
         if (date.getUTCHours() === 0) {

package/js/pool.js

@@ -1,15 +1,15 @@
 /*
  * == BSD2 LICENSE ==
  * Copyright (c) 2014, Tidepool Project
- * 
+ *
  * This program is free software; you can redistribute it and/or modify it under
  * the terms of the associated License, which is identical to the BSD 2-Clause
  * License as published by the Open Source Initiative at opensource.org.
- * 
+ *
  * This program is distributed in the hope that it will be useful, but WITHOUT
  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  * FOR A PARTICULAR PURPOSE. See the License for more details.
- * 
+ *
  * You should have received a copy of the License along with this program; if
  * not, you can obtain one from Tidepool Project at tidepool.org.
  * == BSD2 LICENSE ==
@@ -25,10 +25,15 @@ var legend = require('./plot/util/legend');
 var log = require('bows')('Pool');
 
 
-function Pool (container) {
+function Pool (container, opts) {
+  opts = _.defaults(opts || {}, {
+    hidden: false,
+    label: true,
+    legend: true
+  });
 
   var id, label, labelBaseline = 4, legends = [],
-    index, heightRatio, gutterWeight, hidden = false, yPosition,
+    index, heightRatio, gutterWeight, hidden = opts.hidden, yPosition,
     height, minHeight = 20, maxHeight = 300,
     group,
     mainSVG = d3.select('#' + container.id()),
@@ -60,14 +65,8 @@ function Pool (container) {
 
     this.drawAxes();
     this.updateAxes();
-    if (__DEV__ === true) {
-      var that = this;
-      setTimeout(function() { that.drawLabel(); that.drawLegend(); }, 250);
-    }
-    else {
-      this.drawLabel();
-      this.drawLegend();
-    }
+    opts.label && this.drawLabel();
+    opts.legend && this.drawLegend();
   };
 
   this.clear = function() {

package/package.json

@@ -4,7 +4,7 @@
     "node": "20.8.0"
   },
   "packageManager": "yarn@3.6.4",
-  "version": "1.37.0-develop.1",
+  "version": "1.37.0-rc.2",
   "description": "Tidepool's timeline data visualization",
   "repository": {
     "type": "git",