Added end delta

This commit is contained in:
Henry 2016-07-13 18:17:27 -07:00
parent fd29473664
commit 14463d39a8
3 changed files with 27 additions and 25 deletions

View File

@ -3,6 +3,9 @@
.start-delta { .start-delta {
left: 180px; left: 180px;
} }
.end-delta {
right: 0;
}
</style> </style>
<div ng-controller="TimeConductorController as tcController" <div ng-controller="TimeConductorController as tcController"
class="l-time-conductor l-flex-col {{modeModel.selected}}-mode"> class="l-time-conductor l-flex-col {{modeModel.selected}}-mode">
@ -39,7 +42,7 @@
</span> </span>
<span class="l-time-range-input-w end-delta" <span class="l-time-range-input-w end-delta"
ng-class="{'hide':(modeModel.selected === 'fixed')}"> ng-class="{'hide':(modeModel.selected === 'fixed')}">
<mct-control key="'time-field'" <mct-control key="'datetime-field'"
structure="{ structure="{
format: 'duration', format: 'duration',
validate: tcController.validateEndDelta validate: tcController.validateEndDelta

View File

@ -48,7 +48,7 @@ define(
.append('svg:svg') .append('svg:svg')
.attr('width', '100%') .attr('width', '100%')
.attr('height', height); .attr('height', height);
var xScale = d3.scaleTime(); var xScale = d3.scaleUtc();
var xAxis = d3.axisTop(); var xAxis = d3.axisTop();
// draw x axis with labels and move to the bottom of the chart area // draw x axis with labels and move to the bottom of the chart area
var axisElement = vis.append("g") var axisElement = vis.append("g")

View File

@ -32,16 +32,18 @@ define(
this.$scope = $scope; this.$scope = $scope;
this.$timeout = $timeout; this.$timeout = $timeout;
this.conductor = conductor; this.conductor = conductor;
this.startDelta = FIFTEEN_MINUTES;
this.endDelta = 0; this.endDelta = 0;
this.changing = { this.changing = {
'start': false, 'start': false,
'startDelta': false, 'end': false
'end': false,
'endDelta': false
}; };
$scope.formModel = {}; $scope.formModel = {
startDelta: this.startDelta,
endDelta: this.endDelta
};
conductor.on('bounds', function (bounds) { conductor.on('bounds', function (bounds) {
if (!self.changing['start']) { if (!self.changing['start']) {
@ -50,13 +52,6 @@ define(
if (!self.changing['end']) { if (!self.changing['end']) {
$scope.formModel.end = bounds.end; $scope.formModel.end = bounds.end;
} }
if (!self.changing['startDelta']) {
$scope.formModel.startDelta = bounds.end - bounds.start;
}
if (!self.changing['endDelta']) {
$scope.formModel.endDelta = 0;
}
}); });
conductor.on('follow', function (follow){ conductor.on('follow', function (follow){
@ -148,11 +143,17 @@ define(
TimeConductorController.prototype.updateDeltasFromForm = function (formModel) { TimeConductorController.prototype.updateDeltasFromForm = function (formModel) {
if (this.validateDeltas(formModel)) { if (this.validateDeltas(formModel)) {
var oldBounds = this.conductor.bounds(), //Calculate the previous 'true' end value (without delta)
newBounds = { var oldEnd = this.conductor.bounds().end - this.endDelta || 0;
start: oldBounds.end - formModel.startDelta,
end: oldBounds.end + formModel.endDelta this.startDelta = formModel.startDelta;
this.endDelta = formModel.endDelta;
var newBounds = {
start: oldEnd - this.startDelta,
end: oldEnd + this.endDelta
}; };
this.conductor.bounds(newBounds); this.conductor.bounds(newBounds);
} }
}; };
@ -172,22 +173,20 @@ define(
var tickInterval = 1000; var tickInterval = 1000;
var conductor = this.conductor; var conductor = this.conductor;
var $timeout = this.$timeout; var $timeout = this.$timeout;
var self = this;
conductor.follow(true); conductor.follow(true);
setToNowMinus(FIFTEEN_MINUTES); setBoundsToNow(self.startDelta, self.endDelta);
var timeoutPromise = $timeout(tick, tickInterval); var timeoutPromise = $timeout(tick, tickInterval);
function setToNowMinus(delta) { function setBoundsToNow(startDelta, endDelta) {
var now = Math.ceil(Date.now() / 1000) * 1000; var now = Math.ceil(Date.now() / 1000) * 1000;
conductor.bounds({start: now - delta, end: now}); conductor.bounds({start: now - startDelta, end: now + endDelta});
} }
function tick() { function tick() {
var bounds = conductor.bounds(); setBoundsToNow(self.startDelta, self.endDelta);
var delta = bounds.end - bounds.start;
setToNowMinus(delta);
timeoutPromise = $timeout(tick, tickInterval) timeoutPromise = $timeout(tick, tickInterval)
} }