diff --git a/platform/features/conductor-v2/bundle.js b/platform/features/conductor-v2/bundle.js index 279e4904589..06d02d41cad 100644 --- a/platform/features/conductor-v2/bundle.js +++ b/platform/features/conductor-v2/bundle.js @@ -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": [ diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html index dd24b09a1bf..15917a08f80 100644 --- a/platform/features/conductor-v2/res/templates/time-conductor.html +++ b/platform/features/conductor-v2/res/templates/time-conductor.html @@ -25,8 +25,6 @@ stroke: #A0A0A0; } - .l-axis-holder svg>g -
@@ -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"> diff --git a/platform/features/conductor-v2/src/MctConductorAxis.js b/platform/features/conductor-v2/src/MctConductorAxis.js index 54bf4520ae2..e12903f77e2 100644 --- a/platform/features/conductor-v2/src/MctConductorAxis.js +++ b/platform/features/conductor-v2/src/MctConductorAxis.js @@ -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 { diff --git a/platform/features/conductor-v2/src/TimeConductorController.js b/platform/features/conductor-v2/src/TimeConductorController.js index 6b714d2ba2a..cdbc00ebd4a 100644 --- a/platform/features/conductor-v2/src/TimeConductorController.js +++ b/platform/features/conductor-v2/src/TimeConductorController.js @@ -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;