CBG trends display selections

app/components/chart/footer.js

@@ -21,6 +21,7 @@ var cx = require('classnames');
 
 import * as viz from '@tidepool/viz';
 const TwoOptionToggle = viz.components.TwoOptionToggle;
+const RangeSelect = viz.components.RangeSelect;
 
 var tideline = {
   log: bows('Footer')
@@ -41,6 +42,8 @@ var TidelineFooter = React.createClass({
     showingCbg: React.PropTypes.bool,
     showingSmbg: React.PropTypes.bool,
     showingValues: React.PropTypes.bool,
+    displayFlags: React.PropTypes.object,
+    currentPatientInViewId: React.PropTypes.string,
   },
   render: function() {
     var refreshLinkClass = cx({
@@ -88,6 +91,11 @@ var TidelineFooter = React.createClass({
     if (this.props.chartType === 'modal') {
       if (this.props.showingSmbg) {
         rightSide = modalOpts;
+      } else {
+        rightSide = <RangeSelect
+          displayFlags={this.props.displayFlags}
+          currentPatientInViewId={this.props.currentPatientInViewId}
+        />;
       }
       bgDataToggle = (
         <span className="toggle-container">

app/components/chart/modal.js

@@ -70,6 +70,7 @@ var Modal = React.createClass({
     }
   },
   render: function() {
+    const { currentPatientInViewId } = this.props;
     return (
       <div id="tidelineMain">
         {this.renderHeader()}
@@ -97,7 +98,9 @@ var Modal = React.createClass({
          showingLines={this.props.chartPrefs.modal.smbgLines}
          showingCbg={this.props.chartPrefs.modal.showingCbg}
          showingSmbg={this.props.chartPrefs.modal.showingSmbg}
-        ref="footer" />
+         displayFlags={this.props.trendsState[currentPatientInViewId].cbgFlags}
+         currentPatientInViewId={currentPatientInViewId}
+         ref="footer" />
       </div>
     );
   },
@@ -365,6 +368,11 @@ var Modal = React.createClass({
   toggleBgDataSource: function(e) {
     if (e) {
       e.preventDefault();
+      if (this.props.chartPrefs.modal.showingCbg) {
+        this.props.trackMetric('Trends Click to BGM');
+      } else {
+        this.props.trackMetric('Trends Click to CGM');
+      }
     }
     var prefs = _.cloneDeep(this.props.chartPrefs);
     prefs.modal.showingCbg = !prefs.modal.showingCbg;
@@ -414,4 +422,4 @@ var Modal = React.createClass({
   }
 });
 
-module.exports = Modal;
+module.exports = Modal;

app/redux/utils/trackingMiddleware.js

@@ -26,14 +26,26 @@ const trackMetricMap = {
   UPDATE_PATIENT_SUCCESS: 'Updated Profile',
   UPDATE_USER_SUCCESS: 'Updated Account',
   LOGOUT_REQUEST: 'Logged Out',
-  VERIFY_CUSTODIAL_SUCCESS: 'VCA Home Verification - Verified'
+  VERIFY_CUSTODIAL_SUCCESS: 'VCA Home Verification - Verified',
 };
 
+const interpretMetricMap = {
+  TURN_ON_CBG_RANGE: function(action) {
+    return `Turn on ${action.payload.range}${!_.isNaN(parseInt(action.payload.range, 10)) ? encodeURIComponent('%') : ''}`;
+  },
+  TURN_OFF_CBG_RANGE: function(action) {
+    return `Turn off ${action.payload.range}${!_.isNaN(parseInt(action.payload.range, 10)) ? encodeURIComponent('%') : ''}`;
+  }
+}
+
 export default (api) => {
   return ({ getState }) => (next) => (action) => {
     if (trackMetricMap[action.type]) {
       api.metrics.track(trackMetricMap[action.type]);
     }
+    if (interpretMetricMap[action.type]) {
+      api.metrics.track(interpretMetricMap[action.type](action));
+    }
     return next(action);
   };
 }

package.json

@@ -19,7 +19,7 @@
     "serve-docs": "./node_modules/.bin/gitbook serve"
   },
   "dependencies": {
-    "@tidepool/viz": "0.2.20",
+    "@tidepool/viz": "0.2.21",
     "async": "1.5.2",
     "babel-core": "6.13.2",
     "babel-loader": "6.2.5",

test/unit/components/chart/footer.test.js

@@ -0,0 +1,237 @@
+/* global chai */
+/* global describe */
+/* global sinon */
+/* global it */
+
+var React = require('react');
+var TestUtils = require('react-addons-test-utils');
+
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+
+import * as viz from '@tidepool/viz';
+const TwoOptionToggle = viz.components.TwoOptionToggle;
+const RangeSelect = viz.components.RangeSelect;
+
+var _ = require('lodash');
+var expect = chai.expect;
+
+import Footer from '../../../../app/components/chart/footer';
+
+describe('Footer', function () {
+  describe('render', function() {
+    it('should render without problems', function () {
+      console.error = sinon.stub();
+      var props = {
+        chartType: 'Awesome',
+        onClickBoxOverlay: sinon.stub(),
+        onClickGroup: sinon.stub(),
+        onClickLines: sinon.stub(),
+        onClickValues: sinon.stub(),
+        onClickRefresh: sinon.stub(),
+        onClickBgDataToggle: sinon.stub(),
+        boxOverlay: false,
+        grouped: true,
+        showingLines: false,
+        showingCbg: true,
+        showingSmbg: false,
+        showingValues: false,
+      };
+      var dailyElem = React.createElement(Footer, props);
+      var elem = TestUtils.renderIntoDocument(dailyElem);
+      expect(elem).to.be.ok;
+      expect(console.error.callCount).to.equal(0);
+    });
+
+    it('should trigger onClickBoxOverlay when modal, showingSmbg and overlayCheckbox changed', function () {
+      var props = {
+        chartType: 'modal',
+        onClickBoxOverlay: sinon.stub(),
+        onClickGroup: sinon.stub(),
+        onClickLines: sinon.stub(),
+        onClickValues: sinon.stub(),
+        onClickRefresh: sinon.stub(),
+        onClickBgDataToggle: sinon.stub(),
+        boxOverlay: false,
+        grouped: true,
+        showingLines: false,
+        showingCbg: false,
+        showingSmbg: true,
+        showingValues: false,
+      };
+      var dailyElem = React.createElement(Footer, props);
+      var elem = TestUtils.renderIntoDocument(dailyElem);
+      expect(elem).to.be.ok;
+
+      var overlayCheckbox = TestUtils.scryRenderedDOMComponentsWithTag(elem, 'input')[0];
+      expect(overlayCheckbox.name).to.equal('overlayCheckbox');
+      expect(props.onClickBoxOverlay.callCount).to.equal(0);
+      TestUtils.Simulate.change(overlayCheckbox);
+      expect(props.onClickBoxOverlay.callCount).to.equal(1);
+    });
+
+    it('should trigger onClickGroup when modal, showingSmbg and groupCheckbox changed', function () {
+      var props = {
+        chartType: 'modal',
+        onClickBoxOverlay: sinon.stub(),
+        onClickGroup: sinon.stub(),
+        onClickLines: sinon.stub(),
+        onClickValues: sinon.stub(),
+        onClickRefresh: sinon.stub(),
+        onClickBgDataToggle: sinon.stub(),
+        boxOverlay: false,
+        grouped: true,
+        showingLines: false,
+        showingCbg: false,
+        showingSmbg: true,
+        showingValues: false,
+      };
+      var dailyElem = React.createElement(Footer, props);
+      var elem = TestUtils.renderIntoDocument(dailyElem);
+      expect(elem).to.be.ok;
+
+      var groupCheckbox = TestUtils.scryRenderedDOMComponentsWithTag(elem, 'input')[1];
+      expect(groupCheckbox.name).to.equal('groupCheckbox');
+      expect(props.onClickGroup.callCount).to.equal(0);
+      TestUtils.Simulate.change(groupCheckbox);
+      expect(props.onClickGroup.callCount).to.equal(1);
+    });
+
+    it('should trigger onClickLines when modal, showingSmbg and linesCheckbox changed', function () {
+      var props = {
+        chartType: 'modal',
+        onClickBoxOverlay: sinon.stub(),
+        onClickGroup: sinon.stub(),
+        onClickLines: sinon.stub(),
+        onClickValues: sinon.stub(),
+        onClickRefresh: sinon.stub(),
+        onClickBgDataToggle: sinon.stub(),
+        boxOverlay: false,
+        grouped: true,
+        showingLines: false,
+        showingCbg: false,
+        showingSmbg: true,
+        showingValues: false,
+      };
+      var dailyElem = React.createElement(Footer, props);
+      var elem = TestUtils.renderIntoDocument(dailyElem);
+      expect(elem).to.be.ok;
+
+      var linesCheckbox = TestUtils.scryRenderedDOMComponentsWithTag(elem, 'input')[2];
+      expect(linesCheckbox.name).to.equal('linesCheckbox');
+      expect(props.onClickLines.callCount).to.equal(0);
+      TestUtils.Simulate.change(linesCheckbox);
+      expect(props.onClickLines.callCount).to.equal(1);
+    });
+
+    it('should trigger onClickValues when weekly and valuesCheckbox changed', function () {
+      var props = {
+        chartType: 'weekly',
+        onClickBoxOverlay: sinon.stub(),
+        onClickGroup: sinon.stub(),
+        onClickLines: sinon.stub(),
+        onClickValues: sinon.stub(),
+        onClickRefresh: sinon.stub(),
+        onClickBgDataToggle: sinon.stub(),
+        boxOverlay: false,
+        grouped: true,
+        showingLines: false,
+        showingCbg: false,
+        showingSmbg: true,
+        showingValues: false,
+      };
+      var dailyElem = React.createElement(Footer, props);
+      var elem = TestUtils.renderIntoDocument(dailyElem);
+      expect(elem).to.be.ok;
+
+      var valuesCheckbox = TestUtils.scryRenderedDOMComponentsWithTag(elem, 'input')[0];
+      expect(valuesCheckbox.name).to.equal('valuesCheckbox');
+      expect(props.onClickValues.callCount).to.equal(0);
+      TestUtils.Simulate.change(valuesCheckbox);
+      expect(props.onClickValues.callCount).to.equal(1);
+    });
+
+    it('should trigger onClickRefresh when refresh button clicked', function () {
+      var props = {
+        chartType: 'weekly',
+        onClickBoxOverlay: sinon.stub(),
+        onClickGroup: sinon.stub(),
+        onClickLines: sinon.stub(),
+        onClickValues: sinon.stub(),
+        onClickRefresh: sinon.stub(),
+        onClickBgDataToggle: sinon.stub(),
+        boxOverlay: false,
+        grouped: true,
+        showingLines: false,
+        showingCbg: false,
+        showingSmbg: true,
+        showingValues: false,
+      };
+      var dailyElem = React.createElement(Footer, props);
+      var elem = TestUtils.renderIntoDocument(dailyElem);
+      expect(elem).to.be.ok;
+
+      var refreshButton = TestUtils.findRenderedDOMComponentWithClass(elem, 'btn-refresh');
+      expect(props.onClickRefresh.callCount).to.equal(0);
+      TestUtils.Simulate.click(refreshButton);
+      expect(props.onClickRefresh.callCount).to.equal(1);
+    });
+
+    it('should render a TwoOptionToggle when modal', function () {
+      var props = {
+        chartType: 'modal',
+        onClickBoxOverlay: sinon.stub(),
+        onClickGroup: sinon.stub(),
+        onClickLines: sinon.stub(),
+        onClickValues: sinon.stub(),
+        onClickRefresh: sinon.stub(),
+        onClickBgDataToggle: sinon.stub(),
+        boxOverlay: false,
+        grouped: true,
+        showingLines: false,
+        showingCbg: false,
+        showingSmbg: true,
+        showingValues: false,
+      };
+      var footer = mount(
+        <Footer {...props} />
+      );
+
+      expect(footer.find(TwoOptionToggle).length).to.equal(1);
+    });
+
+    it('should render a RangeSelect when modal, showingCbg', function () {
+      var props = {
+        chartType: 'modal',
+        onClickBoxOverlay: sinon.stub(),
+        onClickGroup: sinon.stub(),
+        onClickLines: sinon.stub(),
+        onClickValues: sinon.stub(),
+        onClickRefresh: sinon.stub(),
+        onClickBgDataToggle: sinon.stub(),
+        boxOverlay: false,
+        grouped: true,
+        showingLines: false,
+        showingCbg: true,
+        showingSmbg: false,
+        showingValues: false,
+        displayFlags: {
+          cbg100Emabled: false,
+          cbg80Enabeled: true,
+          cbg50Enabeled: true,
+          cbgMedianEnabled: true,
+        },
+        currentPatientInViewId: 'abc123',
+      };
+      // RangeSelect is a redux connect()ed component and needs a Provider/store
+      var footer = mount(
+        <Provider store={configureStore([])({})}>
+          <Footer {...props} />
+        </Provider>
+      );
+
+      expect(footer.find(RangeSelect).length).to.equal(1);
+    });
+  });
+});