Skip to content

Commit b1f6ddd

Browse files
clintonium-119clintonium-119
authored
Merge pull request #1654 from tidepool-org/WEB-3692-pump-alarms-daily-view
[WEB-3692] Add pump alarm tooltip to daily view
2 parents e10ebe3 + eab0961 commit b1f6ddd

4 files changed

Lines changed: 167 additions & 14 deletions

File tree

‎app/components/chart/daily.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const SMBGTooltip = vizComponents.SMBGTooltip;
4141
const CBGTooltip = vizComponents.CBGTooltip;
4242
const FoodTooltip = vizComponents.FoodTooltip;
4343
const PumpSettingsOverrideTooltip = vizComponents.PumpSettingsOverrideTooltip;
44+
const AlarmTooltip = vizComponents.AlarmTooltip;
4445

4546
import Header from './header';
4647
import CgmSampleIntervalRangeToggle from './cgmSampleIntervalRangeToggle';
@@ -97,6 +98,8 @@ const DailyChart = withTranslation(null, { withRef: true })(class DailyChart ext
9798
'onCarbOut',
9899
'onPumpSettingsOverrideHover',
99100
'onPumpSettingsOverrideOut',
101+
'onAlarmHover',
102+
'onAlarmOut',
100103
];
101104

102105
this.log = bows('Daily Chart');
@@ -412,6 +415,19 @@ class Daily extends Component {
412415
bgPrefs={bgPrefs}
413416
timePrefs={timePrefs}
414417
/>}
418+
{this.state.hoveredAlarm && <AlarmTooltip
419+
position={{
420+
top: this.state.hoveredAlarm.top,
421+
left: this.state.hoveredAlarm.left
422+
}}
423+
offset={{
424+
top: 0,
425+
left: this.state.hoveredAlarm.leftOffset || 0
426+
}}
427+
side={this.state.hoveredAlarm.side}
428+
alarm={this.state.hoveredAlarm.data}
429+
timePrefs={timePrefs}
430+
/>}
415431
<WindowSizeListener onResize={this.handleWindowResize} />
416432
</Box>
417433
</div>
@@ -483,6 +499,8 @@ class Daily extends Component {
483499
onCarbOut={this.handleCarbOut}
484500
onPumpSettingsOverrideHover={this.handlePumpSettingsOverrideHover}
485501
onPumpSettingsOverrideOut={this.handlePumpSettingsOverrideOut}
502+
onAlarmHover={this.handleAlarmHover}
503+
onAlarmOut={this.handleAlarmOut}
486504
ref={this.chartRef} />
487505
</>
488506
);
@@ -704,6 +722,36 @@ class Daily extends Component {
704722
});
705723
};
706724

725+
handleAlarmHover = alarm => {
726+
this.throttledMetric('hovered over daily alarm tooltip');
727+
const rect = alarm.rect;
728+
alarm.top = rect.top + rect.height;
729+
alarm.left = rect.left + (rect.width / 2);
730+
alarm.side = 'bottom';
731+
732+
// Prevent the tooltip from spilling over chart edges
733+
const leftOffset = alarm.left - alarm.chartExtents.left;
734+
const rightOffset = alarm.left - alarm.chartExtents.right;
735+
736+
if (leftOffset < 35) {
737+
alarm.leftOffset = 35;
738+
}
739+
740+
if (rightOffset > -35) {
741+
alarm.leftOffset = -35;
742+
}
743+
744+
this.setState({
745+
hoveredAlarm: alarm
746+
});
747+
};
748+
749+
handleAlarmOut = () => {
750+
this.setState({
751+
hoveredAlarm: false
752+
});
753+
};
754+
707755
handleCarbHover = carb => {
708756
var rect = carb.rect;
709757
// range here is -12 to 12

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"node": "20.8.0"
55
},
66
"packageManager": "yarn@3.6.4",
7-
"version": "1.88.0-web-2826-launchdarkly-abbott-enable.1",
7+
"version": "1.89.0-web-3692-pump-alarms-daily-view.1",
88
"private": true,
99
"scripts": {
1010
"test": "concurrently \"TZ=UTC NODE_ENV=test yarn jest --verbose --runInBand\" \"TZ=UTC NODE_ENV=test NODE_OPTIONS='--max-old-space-size=4096' yarn karma start\" --group --success=all",
@@ -75,7 +75,7 @@
7575
"@testing-library/react": "12.1.5",
7676
"@testing-library/react-hooks": "8.0.1",
7777
"@testing-library/user-event": "14.6.1",
78-
"@tidepool/viz": "1.49.0-web-3764-adjust-classification.3",
78+
"@tidepool/viz": "1.49.0-web-3692-pump-alarms-daily-view.1",
7979
"async": "2.6.4",
8080
"autoprefixer": "10.4.16",
8181
"babel-core": "7.0.0-bridge.0",
@@ -195,7 +195,7 @@
195195
"terser": "5.22.0",
196196
"terser-webpack-plugin": "5.3.9",
197197
"theme-ui": "0.16.1",
198-
"tideline": "1.34.0-web-3764-adjust-classification.2",
198+
"tideline": "1.35.0-web-3692-pump-alarms-daily-view.1",
199199
"tidepool-platform-client": "0.63.1",
200200
"tidepool-standard-action": "0.1.1",
201201
"ua-parser-js": "1.0.36",

‎test/unit/components/chart/daily.test.js‎

Lines changed: 106 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ describe('Daily', () => {
7272
onSwitchToSettings: () => {},
7373
onSwitchToBgLog: () => {},
7474
onSwitchToTrends: () => {},
75-
trackMetric: () => {},
7675
onUpdateChartDateRange: sinon.stub(),
7776
patient: {
7877
profile: {
@@ -309,4 +308,110 @@ describe('Daily', () => {
309308
});
310309
});
311310
});
311+
312+
describe('handleAlarmHover', () => {
313+
it('should set hoveredAlarm state with correct positioning', () => {
314+
const alarm = {
315+
rect: {
316+
top: 100,
317+
left: 200,
318+
width: 20,
319+
height: 30,
320+
},
321+
chartExtents: {
322+
left: 50,
323+
right: 400,
324+
},
325+
data: { type: 'alarm' },
326+
};
327+
328+
instance.handleAlarmHover(alarm);
329+
330+
expect(instance.state.hoveredAlarm).to.deep.equal({
331+
...alarm,
332+
top: 130, // rect.top + rect.height
333+
left: 210, // rect.left + (rect.width / 2)
334+
side: 'bottom',
335+
});
336+
});
337+
338+
it('should adjust leftOffset when tooltip would spill over left edge', () => {
339+
const alarm = {
340+
rect: {
341+
top: 100,
342+
left: 60, // Close to left edge
343+
width: 20,
344+
height: 30,
345+
},
346+
chartExtents: {
347+
left: 50,
348+
right: 400,
349+
},
350+
data: { type: 'alarm' },
351+
};
352+
353+
instance.handleAlarmHover(alarm);
354+
355+
const hoveredAlarm = instance.state.hoveredAlarm;
356+
expect(hoveredAlarm.leftOffset).to.equal(35);
357+
});
358+
359+
it('should adjust leftOffset when tooltip would spill over right edge', () => {
360+
const alarm = {
361+
rect: {
362+
top: 100,
363+
left: 390, // Close to right edge
364+
width: 20,
365+
height: 30,
366+
},
367+
chartExtents: {
368+
left: 50,
369+
right: 400,
370+
},
371+
data: { type: 'alarm' },
372+
};
373+
374+
instance.handleAlarmHover(alarm);
375+
376+
const hoveredAlarm = instance.state.hoveredAlarm;
377+
expect(hoveredAlarm.leftOffset).to.equal(-35);
378+
});
379+
380+
it('should track metric when hovering over alarm', () => {
381+
const alarm = {
382+
rect: {
383+
top: 100,
384+
left: 200,
385+
width: 20,
386+
height: 30,
387+
},
388+
chartExtents: {
389+
left: 50,
390+
right: 400,
391+
},
392+
data: { type: 'alarm' },
393+
};
394+
395+
instance.handleAlarmHover(alarm);
396+
397+
expect(baseProps.trackMetric.calledWith('hovered over daily alarm tooltip')).to.be.true;
398+
});
399+
});
400+
401+
describe('handleAlarmOut', () => {
402+
it('should set hoveredAlarm state to false', () => {
403+
// First set a hoveredAlarm
404+
instance.setState({
405+
hoveredAlarm: {
406+
data: { type: 'alarm' },
407+
top: 100,
408+
left: 200,
409+
},
410+
});
411+
412+
instance.handleAlarmOut();
413+
414+
expect(instance.state.hoveredAlarm).to.be.false;
415+
});
416+
});
312417
});

‎yarn.lock‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6083,9 +6083,9 @@ __metadata:
60836083
languageName: node
60846084
linkType: hard
60856085

6086-
"@tidepool/viz@npm:1.49.0-web-3764-adjust-classification.3":
6087-
version: 1.49.0-web-3764-adjust-classification.3
6088-
resolution: "@tidepool/viz@npm:1.49.0-web-3764-adjust-classification.3"
6086+
"@tidepool/viz@npm:1.49.0-web-3692-pump-alarms-daily-view.1":
6087+
version: 1.49.0-web-3692-pump-alarms-daily-view.1
6088+
resolution: "@tidepool/viz@npm:1.49.0-web-3692-pump-alarms-daily-view.1"
60896089
dependencies:
60906090
bluebird: 3.7.2
60916091
bows: 1.7.2
@@ -6146,7 +6146,7 @@ __metadata:
61466146
react-dom: 16.x
61476147
react-redux: 8.x
61486148
redux: 4.x
6149-
checksum: 1e48e905149f787cdbb7180873ce97aa71d1d55fc84dcbf5c4c6d297baf37e94b7d89dc64d3739db648596649d28694768f952123a2731d8985d4aba6ab9058d
6149+
checksum: 288d7009cc153c17b9e564f9e8d662bfcfb84220beedce9527639a017851a33abab81f187a5d8ca6e51ad59e5fce67d7ba6c8a1040d4afd817f38811acb091d2
61506150
languageName: node
61516151
linkType: hard
61526152

@@ -8335,7 +8335,7 @@ __metadata:
83358335
"@testing-library/react": 12.1.5
83368336
"@testing-library/react-hooks": 8.0.1
83378337
"@testing-library/user-event": 14.6.1
8338-
"@tidepool/viz": 1.49.0-web-3764-adjust-classification.3
8338+
"@tidepool/viz": 1.49.0-web-3692-pump-alarms-daily-view.1
83398339
async: 2.6.4
83408340
autoprefixer: 10.4.16
83418341
babel-core: 7.0.0-bridge.0
@@ -8462,7 +8462,7 @@ __metadata:
84628462
terser: 5.22.0
84638463
terser-webpack-plugin: 5.3.9
84648464
theme-ui: 0.16.1
8465-
tideline: 1.34.0-web-3764-adjust-classification.2
8465+
tideline: 1.35.0-web-3692-pump-alarms-daily-view.1
84668466
tidepool-platform-client: 0.63.1
84678467
tidepool-standard-action: 0.1.1
84688468
ua-parser-js: 1.0.36
@@ -22218,9 +22218,9 @@ __metadata:
2221822218
languageName: node
2221922219
linkType: hard
2222022220

22221-
"tideline@npm:1.34.0-web-3764-adjust-classification.2":
22222-
version: 1.34.0-web-3764-adjust-classification.2
22223-
resolution: "tideline@npm:1.34.0-web-3764-adjust-classification.2"
22221+
"tideline@npm:1.35.0-web-3692-pump-alarms-daily-view.1":
22222+
version: 1.35.0-web-3692-pump-alarms-daily-view.1
22223+
resolution: "tideline@npm:1.35.0-web-3692-pump-alarms-daily-view.1"
2222422224
dependencies:
2222522225
bows: 1.7.2
2222622226
classnames: 2.3.2
@@ -22241,7 +22241,7 @@ __metadata:
2224122241
peerDependencies:
2224222242
babel-core: 6.x || 7.0.0-bridge.0
2224322243
lodash: ^4.17.21
22244-
checksum: 8ef5dd855443bafb949a21011794b2cb9794a8f265b5e4c03437fb8c7e98b8b1182f5d6e260ecfb6707d492215ab42c2b366af377177c9457d7f267f285b752e
22244+
checksum: 8a556a49db68a03ccccbeb82921c5c3762b6d48386d412109edddb127229c78de9787918e5566f0e378fa65b79252325c14cdcaa90448fb8c92d824a64c0ab9a
2224522245
languageName: node
2224622246
linkType: hard
2224722247

0 commit comments

Comments
 (0)