tideline 1.36.0-develop.1 → 1.36.0-develop.2

package/img/alarm/alarm.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0.75C18.2132 0.75 23.25 5.7868 23.25 12C23.25 18.2132 18.2132 23.25 12 23.25C5.7868 23.25 0.75 18.2132 0.75 12C0.75 5.7868 5.7868 0.75 12 0.75Z" fill="#CC6D00" stroke="#CC6D00" stroke-width="1.5"/>
+<path d="M12 12.1347V8M12 16.0323V16.1425" stroke="white" stroke-width="2.02073" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/js/index.js

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

package/js/plot/alarm.js

@@ -0,0 +1,93 @@
+var d3 = require('d3');
+var _ = require('lodash');
+
+var alarmImage = require('../../img/alarm/alarm.svg');
+
+/**
+ * Module for adding alarm markers to a chart pool
+ *
+ * @param  {Object} pool the chart pool
+ * @param  {Object|null} opts configuration options
+ * @return {Object}      alarm object
+ */
+module.exports = function(pool, opts = {}) {
+  function alarm(selection) {
+    selection.each(function(currentData) {
+      var filteredData = _.filter(currentData, { tags: { alarm: true } });
+
+      var alarms = d3.select(this)
+        .selectAll('g.d3-alarm-group')
+        .data(filteredData, function(d) {
+          return d.id;
+        });
+
+      var alarmGroup = alarms.enter()
+        .append('g')
+        .attr({
+          'class': 'd3-alarm-group',
+          id: function(d) {
+            return 'alarm_' + d.id;
+          }
+        });
+
+      alarm.addalarmToPool(alarmGroup);
+
+      alarms.exit().remove();
+
+      // tooltips
+      selection.selectAll('.d3-alarm-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,
+        };
+
+        alarm.addTooltip(d3.select(this).datum(), container, chartExtents);
+      });
+
+      selection.selectAll('.d3-alarm-group').on('mouseout', function() {
+        if (_.get(opts, 'onAlarmOut', false)) {
+          opts.onAlarmOut();
+        }
+      });
+    });
+  };
+
+  alarm.addTooltip = function(d, rect, chartExtents) {
+    if (_.get(opts, 'onAlarmHover', false)) {
+      opts.onAlarmHover({
+        data: d,
+        rect: rect,
+        chartExtents,
+      });
+    }
+  };
+
+  alarm.addalarmToPool = function(selection) {
+    opts.xScale = pool.xScale().copy();
+    selection.append('image')
+      .attr({
+        'xlink:href': alarmImage,
+        x: alarm.xPositionCorner,
+        y: alarm.yPositionCorner,
+        width: opts.size,
+        height: opts.size
+      })
+      .classed({'d3-image': true, 'd3-alarm': true});
+  };
+
+  alarm.xPositionCorner = function(d) {
+    return opts.xScale(d.normalTime) - opts.size / 2;
+  };
+
+  alarm.yPositionCorner = function(d) {
+    return pool.height() / 2 - opts.size / 2;
+  };
+
+  return alarm;
+};

package/package.json

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

package/plugins/blip/chartdailyfactory.js

@@ -396,6 +396,17 @@ function chartDailyFactory(el, options) {
       timezone: chart.options.timePrefs.timezoneName
     }), true, true);
 
+    // add pump alarm data to messages pool
+    poolMessages.addPlotType('deviceEvent', tideline.plot.alarm(poolMessages, {
+      size: 23,
+      emitter: emitter,
+      data: groupedData.deviceEvent,
+      timezoneAware: chart.options.timePrefs.timezoneAware,
+      timezoneName: chart.options.timePrefs.timezoneName,
+      onAlarmHover: options.onAlarmHover,
+      onAlarmOut: options.onAlarmOut,
+    }), true, true);
+
     return chart;
   };