Skip to content

Commit 1bde42f

Browse files
author
Jasper Speicher
committed
Merge branch 'release/v1.2.1'
2 parents 7c3be2b + 69cad9a commit 1bde42f

10 files changed

+2489
-164
lines changed

Diff for: ‎README.md

+24-13
Original file line numberDiff line numberDiff line change
@@ -76,51 +76,61 @@ The following object is the default settings object used by the `OMHWebVisualiza
7676
'enabled': true,
7777
'showHint': true
7878
},
79+
'axes': {
80+
'yAxis':{
81+
'visible': true
82+
},
83+
'xAxis':{
84+
'visible': true
85+
}
86+
}
7987
},
8088
'measures': {
8189
'body_weight' : {
8290
'valueKeyPath': 'body.body_weight.value',
83-
'range': { 'min':0, 'max':100 },
91+
'range': { 'min': 0, 'max': 100 },
8492
'units': 'kg',
85-
'thresholds': { 'max':57 },
93+
'thresholds': { 'max': 57 },
8694
},
8795
'heart_rate': {
8896
'valueKeyPath': 'body.heart_rate.value',
89-
'range': { 'min':30, 'max':150 },
97+
'range': { 'min': 30, 'max': 150 },
9098
'units': 'bpm',
9199
},
92100
'step_count': {
93101
'valueKeyPath': 'body.step_count',
94-
'range': { 'min':0, 'max':1500 },
102+
'range': { 'min': 0, 'max': 1500 },
95103
'units': 'Steps',
96104
'seriesName': 'Steps',
105+
'timeQuantizationLevel': OMHWebVisualizations.QUANTIZE_DAY,
97106
'chart': {
98107
'type':'clustered_bar',
99108
'barColor' : '#eeeeee',
100-
'daysShownOnTimeline': { 'min':7, 'max':90 },
109+
'daysShownOnTimeline': { 'min': 7, 'max': 90 },
101110
},
102111
},
103112
'minutes_moderate_activity': {
104113
'valueKeyPath': 'body.minutes_moderate_activity.value',
105-
'range': { 'min':0, 'max':300 },
114+
'range': { 'min': 0, 'max': 300 },
106115
'units': 'Minutes',
107116
'seriesName': 'Minutes of moderate activity',
117+
'timeQuantizationLevel': OMHWebVisualizations.QUANTIZE_DAY,
108118
'chart': {
109119
'type':'clustered_bar',
110-
'daysShownOnTimeline': { 'min':7, 'max':90 },
120+
'daysShownOnTimeline': { 'min': 7, 'max': 90 },
111121
},
112122
},
113123
'systolic_blood_pressure': {
114124
'valueKeyPath': 'body.systolic_blood_pressure.value',
115-
'range': { 'min':30, 'max':200 },
125+
'range': { 'min': 30, 'max': 200 },
116126
'units': 'mmHg',
117-
'thresholds': { 'max':120 },
127+
'thresholds': { 'max': 120 },
118128
},
119129
'diastolic_blood_pressure': {
120130
'valueKeyPath': 'body.diastolic_blood_pressure.value',
121-
'range': { 'min':30, 'max':200 },
131+
'range': { 'min': 30, 'max': 200 },
122132
'units': 'mmHg',
123-
'thresholds': { 'max':80 },
133+
'thresholds': { 'max': 80 },
124134
}
125135
}
126136
}
@@ -134,9 +144,10 @@ If you look carefully at the default settings object, you'll also notice that so
134144

135145
```javascript
136146
{
137-
'range': { 'min':0, 'max':100 },
147+
'range': { 'min': 0, 'max': 100 },
138148
'units': 'Units',
139149
'seriesName': 'Series',
150+
'timeQuantizationLevel': OMHWebVisualizations.QUANTIZE_NONE,
140151
'chart': {
141152
'type':'line',
142153
'pointSize': 9,
@@ -146,7 +157,7 @@ If you look carefully at the default settings object, you'll also notice that so
146157
'aboveThesholdPointFillColor' : '#e8ac4e',
147158
'aboveThesholdPointStrokeColor' : '#745628',
148159
'barColor' : '#4a90e2',
149-
'daysShownOnTimeline': { 'min':1, 'max':1000 },
160+
'daysShownOnTimeline': { 'min': 1, 'max': 1000 },
150161
},
151162
}
152163
```

Diff for: ‎dist/components/omh-web-visualizations-charts.js

+81-48
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,14 @@
117117
'enabled': true,
118118
'showHint': true
119119
},
120+
'axes': {
121+
'yAxis':{
122+
'visible': true
123+
},
124+
'xAxis':{
125+
'visible': true
126+
}
127+
}
120128
},
121129
'measures': {
122130
'body_weight' : {
@@ -196,6 +204,7 @@
196204
mouseWheelDispatcher && mouseWheelDispatcher.offWheel( wheelCallback );
197205
showHoverPointTooltip && drag.offDrag( showHoverPointTooltip );
198206
toolbar && toolbar.remove();
207+
yScaleCallback && yScale.offUpdate( yScaleCallback );
199208
};
200209

201210
//public method for getting the plottable chart component
@@ -450,6 +459,7 @@
450459
// set up axes
451460
var xScale = new Plottable.Scales.Time();
452461
var yScale = new Plottable.Scales.Linear();
462+
var yScaleCallback = null;
453463
var domain = primaryMeasureSettings.range;
454464
if( domain ){
455465
yScale.domainMin( domain.min ).domainMax( domain.max );
@@ -526,7 +536,55 @@
526536
}
527537
} );
528538

529-
//iterate across the data prepared from the omh json data
539+
540+
// If there are thresholds for any of the measures, add them as gridlines
541+
542+
var thresholdValues = [];
543+
544+
d3.entries( measureData ).forEach( function( entry ) {
545+
546+
measure = entry.key;
547+
548+
var thresholds = getMeasureSettings( measure ).thresholds;
549+
550+
if ( thresholds ){
551+
thresholdValues.push( thresholds.max );
552+
}
553+
554+
});
555+
556+
if ( thresholdValues.length > 0 ){
557+
558+
thresholdValues.sort( function(a,b){ return a-b; } );
559+
560+
var gridlineYScale = new Plottable.Scales.Linear();
561+
gridlineYScale.domain( yScale.domain() );
562+
gridlineYScale.range( yScale.range() );
563+
yScaleCallback = function( updatedScale ){
564+
gridlineYScale.domain( updatedScale.domain() );
565+
gridlineYScale.range( updatedScale.range() );
566+
};
567+
yScale.onUpdate( yScaleCallback );
568+
var yScaleTickGenerator = function( scale ){
569+
var domain = scale.domain();
570+
var ticks = thresholdValues;
571+
return ticks;
572+
};
573+
gridlineYScale.tickGenerator(yScaleTickGenerator);
574+
575+
var gridlineYAxis = new Plottable.Axes.Numeric(gridlineYScale, "right")
576+
.tickLabelPosition("top")
577+
.tickLabelPadding( 5 )
578+
.showEndTickLabels(true);
579+
580+
var gridlines = new Plottable.Components.Gridlines(null, gridlineYScale);
581+
582+
plots.push( gridlines );
583+
plots.push( gridlineYAxis );
584+
585+
}
586+
587+
//iterate across the data prepared from the omh json data and add plots
530588
measures.forEach( function( measure ) {
531589
if ( ! measureData.hasOwnProperty( measure ) ){
532590
return;
@@ -607,37 +665,8 @@
607665

608666
}
609667

610-
611-
});
612-
613-
614-
//add threshold plotlines
615-
var thresholdXScale = new Plottable.Scales.Linear().domainMin( 0 ).domainMax( 1 );
616-
var thresholdPlot = new Plottable.Plots.Line()
617-
.x(function(d) { return d.x; }, thresholdXScale )
618-
.y(function(d) { return d.y; }, yScale )
619-
.attr('stroke','#dedede')
620-
.attr('stroke-width', LINE_STROKE_WIDTH);
621-
622-
d3.entries( measureData ).forEach(function( entry ) {
623-
measure = entry.key;
624-
data = entry.value;
625-
626-
var thresholds = getMeasureSettings( measure ).thresholds;
627-
628-
if ( thresholds ){
629-
630-
thresholdPlot.addDataset( new Plottable.Dataset( [
631-
{ x:0, y:thresholds.max },
632-
{ x:1, y:thresholds.max }
633-
] ) );
634-
635-
}
636-
637668
});
638669

639-
plots.push( thresholdPlot );
640-
641670
plots.push( pointPlot );
642671

643672
var colorScale = null;
@@ -690,14 +719,18 @@
690719

691720

692721
//build table
722+
var xAxisVisible = interfaceSettings.axes.xAxis.visible;
723+
var yAxisVisible = interfaceSettings.axes.yAxis.visible;
693724
var plotGroup = new Plottable.Components.Group( plots );
694-
var yAxisGroup = new Plottable.Components.Group( [ yAxis, yLabel ] );
725+
var yAxisGroup = yAxisVisible? new Plottable.Components.Group( [ yAxis, yLabel ] ): null;
695726
var topRow = [ yAxisGroup, plotGroup ];
696-
var bottomRow = [ null, xAxis ];
697-
secondaryYAxes.forEach(function( axisComponents ){
698-
topRow.push( new Plottable.Components.Group( [ axisComponents.axis, axisComponents.label ] ) );
699-
bottomRow.push( null );
700-
});
727+
var bottomRow = [ null, xAxisVisible? xAxis: null ];
728+
if( yAxisVisible ){
729+
secondaryYAxes.forEach(function( axisComponents ){
730+
topRow.push( new Plottable.Components.Group( [ axisComponents.axis, axisComponents.label ] ) );
731+
bottomRow.push( null );
732+
});
733+
}
701734
table = new Plottable.Components.Table([
702735
topRow,
703736
bottomRow
@@ -945,18 +978,18 @@
945978
};
946979

947980
var highlightNewHoverPoint = function( point ) {
948-
if( hoverPoint !== null ) {
949-
if( point.datum.omhDatum.body !== hoverPoint.datum.omhDatum.body ){
950-
resetGroup( hoverPoint.datum.omhDatum.groupName, hoverPoint.index );
981+
if( hoverPoint !== null ) {
982+
if( point.datum.omhDatum.body !== hoverPoint.datum.omhDatum.body ){
983+
resetGroup( hoverPoint.datum.omhDatum.groupName, hoverPoint.index );
984+
hoverPoint = point;
985+
highlightGroup( hoverPoint.datum.omhDatum.groupName, point.index );
986+
}
987+
}else{
951988
hoverPoint = point;
952-
highlightGroup( hoverPoint.datum.omhDatum.groupName, point.index );
953989
}
954-
}else{
955-
hoverPoint = point;
956-
}
957-
if ( point.datum === null ) {
958-
return;
959-
}
990+
if ( point.datum === null ) {
991+
return;
992+
}
960993
};
961994

962995
//set up plottable's hover-based point selection interaction
@@ -972,11 +1005,11 @@
9721005
var nearestEntity;
9731006
try{
9741007
nearestEntity = pointPlot.entityNearest(p);
1008+
highlightNewHoverPoint( nearestEntity );
1009+
showHoverPointTooltip();
9751010
} catch( e ) {
9761011
return;
9771012
}
978-
highlightNewHoverPoint( nearestEntity );
979-
showHoverPointTooltip();
9801013
}.bind(this);
9811014
pointer.onPointerMove( pointerMove );
9821015
pointer.attachTo( pointPlot );

0 commit comments

Comments
 (0)