[Mobile] Plot & Gestures

Plot adjusted so that when snapping to the right
the left domain value also moves same amount that
the right domain did. Also Interval between left
and right domains on screen are dyanmically set to
amount zoomed in/out, instead of being defaulted
to 2 minutes. Made small edit to display if the chart
has been manipulated (panned or zoomed) or is updating
live.
This commit is contained in:
Shivam Dave 2015-09-03 16:15:34 -07:00
parent 4fa29d30f5
commit e866ddb9fd
2 changed files with 40 additions and 7 deletions

View File

@ -123,29 +123,62 @@ define(
// TODO: this is a great time to track a history entry.
// Disable live mode so they have full control of viewport.
plotHistory.push($scope.viewport);
isLive = false;
$scope.axes.domain.label = "Time (Manipulated)";
}
function getLeftInterval(intervalTL, intervalBR) {
return intervalTL.domain + (maxDomain - intervalBR.domain);
}
function getSnapCheck(viewport, onMobile) {
var snapPercent = 10;
if(onMobile) {
snapPercent = 75;
}
console.log(snapPercent);x
return (Math.abs(maxDomain - viewport.bottomRight.domain) < (DOMAIN_INTERVAL/snapPercent));
}
function snapToRight() {
isLive = true;
$scope.axes.domain.label = "Time (Updating Live)";
$scope.viewport.bottomRight.domain = maxDomain;
$scope.viewport.topLeft.domain = getLeftInterval($scope.viewport.topLeft,
$scope.viewport.bottomRight);
}
// In the past what has happened is that the interval between the left and right domain
// is set to 2 minutes all the time. And the range is -1 and 1 on update
function onUserViewportChangeEnd(event, viewport) {
// If the new viewport is "close enough" to the maxDomain then
// enable live mode. Set empirically to 10% of the domain
// interval.
// TODO: Better UX pattern for this.
if (Math.abs(maxDomain - viewport.bottomRight.domain) < (DOMAIN_INTERVAL/10)) {
isLive = true;
$scope.viewport.bottomRight.domain = maxDomain;
} else {
// Added agent service call to not snap to right on mobile
if (getSnapCheck(viewport, agentService.isMobile(navigator.userAgent))) {
snapToRight();
}
else {
isLive = false;
$scope.axes.domain.label = "Time (Manipulated)";
}
plotHistory.push(viewport);
}
function viewportForMaxDomain() {
function viewportForMaxDomain() {
return {
topLeft: {
range: $scope.viewport.topLeft.range,
domain: maxDomain - DOMAIN_INTERVAL
domain: getLeftInterval($scope.viewport.topLeft,
$scope.viewport.bottomRight)
},
bottomRight: {
range: $scope.viewport.bottomRight.range,

View File

@ -29,7 +29,7 @@ define(
if (typeof $scope.axes === "undefined") {
$scope.axes = {
domain: {
label: "Time",
label: "Time (Updating Live)",
tickCount: DOMAIN_TICK_COUNT,
ticks: []
},