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, "implementation": TimeConductorController,
"depends": [ "depends": [
"$scope", "$scope",
"$timeout",
"timeConductor" "timeConductor"
] ]
} }
@ -60,7 +61,9 @@ define([
{ {
"key": "mctConductorAxis", "key": "mctConductorAxis",
"implementation": MCTConductorAxis, "implementation": MCTConductorAxis,
"depends": ["$timeout"] "depends": [
"timeConductor"
]
} }
], ],
"representations": [ "representations": [

View File

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

View File

@ -37,41 +37,34 @@ define(
* @constructor * @constructor
* @memberof platform/forms * @memberof platform/forms
*/ */
function MCTConductorAxis($timeout) { function MCTConductorAxis(conductor) {
function link(scope, element, attrs, ngModelController) { function link(scope, element, attrs, ngModelController) {
$timeout(function () { var target = element[0].firstChild,
var target = element[0].firstChild, height = target.offsetHeight,
width = target.offsetWidth, padding = 1;
height = target.offsetHeight,
padding = 1;
var vis = d3.select(target) var vis = d3.select(target)
.append('svg:svg') .append('svg:svg')
//.attr('viewBox', '0 0 ' + width + ' ' + .attr('width', '100%')
// height) .attr('height', height);
.attr('width', '100%') var xScale = d3.scaleTime();
.attr('height', height); var xAxis = d3.axisTop();
//.attr('preserveAspectRatio', 'xMidYMid meet'); // 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) function setBounds(start, end) {
var mindate = new Date(2012,0,1), var width = target.offsetWidth;
maxdate = new Date(2016,0,1); xScale.domain([new Date(start), new Date(end)])
var xScale = d3.scaleTime()
.domain([mindate, maxdate])
.range([padding, width - padding * 2]); .range([padding, width - padding * 2]);
xAxis.scale(xScale);
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) + ")");
axisElement.call(xAxis); axisElement.call(xAxis);
}, 1000); }
conductor.on('bounds', function (bounds) {
setBounds(bounds.start, bounds.end);
});
} }
return { return {

View File

@ -24,31 +24,53 @@ define(
[], [],
function () { 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.$scope = $scope;
this.conductor = conductor; this.conductor = conductor;
/* $scope.formModel = {};
Stuff to put on scope
- parameters conductor.on('bounds', function (bounds) {
- formModel $scope.formModel = {
*/ start: bounds.start,
this.$scope.formModel = { end: bounds.end
start: '2012-01-01 00:00:00.000Z', };
end: '2016-01-01 00:00:00.000Z' });
};
//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 () { TimeConductorController.prototype.validateStart = function (start) {
return true; var bounds = this.conductor.bounds();
return this.conductor.validateBounds({start: start, end: bounds.end}) === true;
}; };
TimeConductorController.prototype.validateEnd = function () { TimeConductorController.prototype.validateEnd = function (end) {
return true; 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; return TimeConductorController;