Time sync via conductor

This commit is contained in:
Henry 2016-07-07 16:57:03 -07:00
parent bca5eb0fdb
commit 58ed500ecf
4 changed files with 65 additions and 49 deletions

View File

@ -52,6 +52,7 @@ define([
"implementation": TimeConductorController,
"depends": [
"$scope",
"$timeout",
"timeConductor"
]
}
@ -60,7 +61,9 @@ define([
{
"key": "mctConductorAxis",
"implementation": MCTConductorAxis,
"depends": ["$timeout"]
"depends": [
"timeConductor"
]
}
],
"representations": [

View File

@ -25,8 +25,6 @@
stroke: #A0A0A0;
}
.l-axis-holder svg>g
</style>
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
<div class="follow-mode"
@ -43,7 +41,7 @@
validate: tcController.validateStart
}"
ng-model="formModel"
ng-blur="tcController.updateBoundsFromForm()"
ng-blur="tcController.updateBoundsFromForm(formModel)"
field="'start'"
class="time-range-start">
</mct-control>
@ -56,7 +54,7 @@
validate: tcController.validateEnd
}"
ng-model="formModel"
ng-blur="trCtrl.updateBoundsFromForm()"
ng-blur="tcController.updateBoundsFromForm(formModel)"
field="'end'"
class="time-range-end">
</mct-control>

View File

@ -37,41 +37,34 @@ define(
* @constructor
* @memberof platform/forms
*/
function MCTConductorAxis($timeout) {
function MCTConductorAxis(conductor) {
function link(scope, element, attrs, ngModelController) {
$timeout(function () {
var target = element[0].firstChild,
width = target.offsetWidth,
height = target.offsetHeight,
padding = 1;
var target = element[0].firstChild,
height = target.offsetHeight,
padding = 1;
var vis = d3.select(target)
.append('svg:svg')
//.attr('viewBox', '0 0 ' + width + ' ' +
// height)
.attr('width', '100%')
.attr('height', height);
//.attr('preserveAspectRatio', 'xMidYMid meet');
var vis = d3.select(target)
.append('svg:svg')
.attr('width', '100%')
.attr('height', height);
var xScale = d3.scaleTime();
var xAxis = d3.axisTop();
// draw x axis with labels and move to the bottom of the chart area
var axisElement = vis.append("g")
.attr("transform", "translate(0," + (height - padding) + ")");
// define the x scale (horizontal)
var mindate = new Date(2012,0,1),
maxdate = new Date(2016,0,1);
var xScale = d3.scaleTime()
.domain([mindate, maxdate])
function setBounds(start, end) {
var width = target.offsetWidth;
xScale.domain([new Date(start), new Date(end)])
.range([padding, width - padding * 2]);
var xAxis = d3.axisTop()
.scale(xScale);
// draw x axis with labels and move to the bottom of the chart area
var axisElement = vis.append("g")
.attr("class", "xaxis") // give it a class so it can be used to select only xaxis labels below
.attr("transform", "translate(0," + (height - padding) + ")");
xAxis.scale(xScale);
axisElement.call(xAxis);
}, 1000);
}
conductor.on('bounds', function (bounds) {
setBounds(bounds.start, bounds.end);
});
}
return {

View File

@ -24,31 +24,53 @@ define(
[],
function () {
function TimeConductorController($scope, conductor) {
var SIX_HOURS = 6 * 60 * 60 * 1000;
function TimeConductorController($scope, $timeout, conductor) {
var now = Date.now();
var self = this;
this.$scope = $scope;
this.conductor = conductor;
/*
Stuff to put on scope
- parameters
- formModel
*/
this.$scope.formModel = {
start: '2012-01-01 00:00:00.000Z',
end: '2016-01-01 00:00:00.000Z'
};
$scope.formModel = {};
conductor.on('bounds', function (bounds) {
$scope.formModel = {
start: bounds.start,
end: bounds.end
};
});
//Temporary workaround for resizing issue
$timeout(function() {
//Set the time conductor to some default
conductor.bounds({start: now - SIX_HOURS, end: now});
}, 1000);
Object.keys(TimeConductorController.prototype).filter(function (key){
return typeof TimeConductorController.prototype[key] === 'function';
}).forEach(function (key) {
self[key] = self[key].bind(self);
});
}
TimeConductorController.prototype.validateStart = function () {
return true;
TimeConductorController.prototype.validateStart = function (start) {
var bounds = this.conductor.bounds();
return this.conductor.validateBounds({start: start, end: bounds.end}) === true;
};
TimeConductorController.prototype.validateEnd = function () {
return true;
TimeConductorController.prototype.validateEnd = function (end) {
var bounds = this.conductor.bounds();
return this.conductor.validateBounds({start: bounds.start, end: end}) === true;
};
TimeConductorController.prototype.updateBoundsFromForm = function () {
TimeConductorController.prototype.updateBoundsFromForm = function (formModel) {
var newBounds = {start: formModel.start, end: formModel.end};
if (this.conductor.validateBounds(newBounds) === true) {
this.conductor.bounds(newBounds);
}
};
return TimeConductorController;