From e1298db76065d30fb0879d82a39775a1eb85c020 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 1 Dec 2014 16:35:38 -0800 Subject: [PATCH] [Plot] Separate out plot axis Separate plot axis (as prepared for the plot's Angular template) into its own script. WTD-533 --- .../features/plot/res/templates/plot.html | 22 ++--- platform/features/plot/src/PlotAxis.js | 35 ++++++++ platform/features/plot/src/PlotController.js | 83 +++++++------------ platform/features/plot/src/PlotPosition.js | 5 +- platform/features/plot/src/PlotPreparer.js | 4 +- .../features/plot/src/PlotTickGenerator.js | 12 +-- 6 files changed, 89 insertions(+), 72 deletions(-) create mode 100644 platform/features/plot/src/PlotAxis.js diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html index b2bd140f25..5bf79c1fda 100644 --- a/platform/features/plot/res/templates/plot.html +++ b/platform/features/plot/res/templates/plot.html @@ -24,9 +24,9 @@ {{axes[1].active.name}} -
+ ng-style="{ bottom: (100 * $index / (rangeTicks.length - 1)) + '%' }"> {{tick.label}}
@@ -48,14 +48,14 @@
+ ng-repeat="tick in domainTicks" + ng-style="{ left: (100 * $index / (domainTicks.length - 1)) + '%', height: '100%' }" + ng-show="$index > 0 && $index < (domainTicks.length - 1)">
+ ng-repeat="tick in rangeTicks" + ng-style="{ bottom: (100 * $index / (rangeTicks.length - 1)) + '%', width: '100%' }" + ng-show="$index > 0 && $index < (rangeTicks.length - 1)">
-
+ ng-show="$index > 0 && $index < (domainTicks.length - 1)" + ng-style="{ left: (100 * $index / (domainTicks.length - 1)) + '%' }"> {{tick.label}}
diff --git a/platform/features/plot/src/PlotAxis.js b/platform/features/plot/src/PlotAxis.js new file mode 100644 index 0000000000..3ab4edd3b7 --- /dev/null +++ b/platform/features/plot/src/PlotAxis.js @@ -0,0 +1,35 @@ +/*global define*/ + +define( + [], + function () { + "use strict"; + + function PlotAxis(axisType, metadatas, defaultValue) { + var keys = {}, + options = []; + + function buildOptionsForMetadata(m) { + (m[axisType] || []).forEach(function (option) { + if (!keys[option.key]) { + keys[option.key] = true; + options.push(option); + } + }); + } + + (metadatas || []).forEach(buildOptionsForMetadata); + + // Plot axis will be used directly from the Angular + // template, so expose properties directly to facilitate + // two-way data binding (for drop-down menus) + return { + options: options, + active: options[0] || defaultValue + }; + } + + return PlotAxis; + + } +); \ No newline at end of file diff --git a/platform/features/plot/src/PlotController.js b/platform/features/plot/src/PlotController.js index 0c01312b21..df424984b1 100644 --- a/platform/features/plot/src/PlotController.js +++ b/platform/features/plot/src/PlotController.js @@ -10,9 +10,10 @@ define( "./PlotPanZoomStack", "./PlotPosition", "./PlotTickGenerator", - "./PlotFormatter" + "./PlotFormatter", + "./PlotAxis" ], - function (PlotPreparer, PlotPalette, PlotPanZoomStack, PlotPosition, PlotTickGenerator, PlotFormatter) { + function (PlotPreparer, PlotPalette, PlotPanZoomStack, PlotPosition, PlotTickGenerator, PlotFormatter, PlotAxis) { "use strict"; var AXIS_DEFAULTS = [ @@ -41,22 +42,25 @@ define( formatter.formatDomainValue)(v); } - function mousePositionToDomainRange(mousePosition, domainOffset) { + function mousePositionToDomainRange(mousePosition) { return new PlotPosition( mousePosition.x, mousePosition.y, mousePosition.width, mousePosition.height, - panZoomStack, - domainOffset + panZoomStack ).getPosition(); } + function toDisplayable(position) { + return [ position[0] - domainOffset, position[1] ]; + } + function updateMarqueeBox() { $scope.draw.boxes = marqueeStart ? [{ - start: mousePositionToDomainRange(marqueeStart), - end: mousePositionToDomainRange(mousePosition), + start: toDisplayable(mousePositionToDomainRange(marqueeStart)), + end: toDisplayable(mousePositionToDomainRange(mousePosition)), color: [1, 1, 1, 0.5 ] }] : undefined; } @@ -65,11 +69,23 @@ define( var panZoom = panZoomStack.getPanZoom(); $scope.draw.dimensions = panZoom.dimensions; - $scope.draw.origin = panZoom.origin; + $scope.draw.origin = [ + panZoom.origin[0] - domainOffset, + panZoom.origin[1] + ]; + } + + function updateTicks() { + var tickGenerator = new PlotTickGenerator(panZoomStack, formatter); + + $scope.domainTicks = + tickGenerator.generateDomainTicks(DOMAIN_TICKS); + $scope.rangeTicks = + tickGenerator.generateRangeTicks(RANGE_TICKS); } function plotTelemetry() { - var telemetry, prepared, tickGenerator, data; + var telemetry, prepared, data; telemetry = $scope.telemetry; @@ -85,13 +101,6 @@ define( ($scope.axes[1].active || {}).key ); - tickGenerator = new PlotTickGenerator(prepared, formatter); - - $scope.axes[0].ticks = - tickGenerator.generateDomainTicks(DOMAIN_TICKS); - $scope.axes[1].ticks = - tickGenerator.generateRangeTicks(RANGE_TICKS); - panZoomStack.setBasePanZoom( prepared.getOrigin(), prepared.getDimensions() @@ -109,41 +118,14 @@ define( updateDrawingBounds(); updateMarqueeBox(); + updateTicks(); } function setupAxes(metadatas) { - var domainKeys = {}, - rangeKeys = {}, - domains = [], - ranges = []; - - function buildOptionsForMetadata(m) { - (m.domains || []).forEach(function (domain) { - if (!domainKeys[domain.key]) { - domainKeys[domain.key] = true; - domains.push(domain); - } - }); - (m.ranges || []).forEach(function (range) { - if (!rangeKeys[range.key]) { - rangeKeys[range.key] = true; - ranges.push(range); - } - }); - } - - (metadatas || []). - forEach(buildOptionsForMetadata); - - [domains, ranges].forEach(function (options, i) { - var active = $scope.axes[i].active; - $scope.axes[i].options = options; - if (!active || !active.key) { - $scope.axes[i].active = - options[0] || AXIS_DEFAULTS[i]; - } - }); - + $scope.axes = [ + new PlotAxis("domain", metadatas, AXIS_DEFAULTS[0]), + new PlotAxis("range", metadatas, AXIS_DEFAULTS[1]) + ]; } function toMousePosition($event) { @@ -171,9 +153,9 @@ define( ]; panZoomStack.pushPanZoom(origin, dimensions); + updateTicks(); } - $scope.axes = [ {}, {} ]; $scope.$watch("telemetry.getMetadata()", setupAxes); $scope.$on("telemetryUpdate", plotTelemetry); $scope.draw = {}; @@ -185,8 +167,7 @@ define( getHoverCoordinates: function () { return mousePosition ? mousePositionToDomainRange( - mousePosition, - domainOffset + mousePosition ).map(formatValue) : []; }, hover: function ($event) { diff --git a/platform/features/plot/src/PlotPosition.js b/platform/features/plot/src/PlotPosition.js index 083c3a8347..9590f7116a 100644 --- a/platform/features/plot/src/PlotPosition.js +++ b/platform/features/plot/src/PlotPosition.js @@ -5,9 +5,8 @@ define( function () { "use strict"; - function PlotPosition(x, y, width, height, panZoomStack, domainOffset) { + function PlotPosition(x, y, width, height, panZoomStack) { var panZoom = panZoomStack.getPanZoom(), - offset = [ domainOffset || 0, 0 ], origin = panZoom.origin, dimensions = panZoom.dimensions, position; @@ -16,7 +15,7 @@ define( position = []; } else { position = [ x / width, (height - y) / height ].map(function (v, i) { - return v * dimensions[i] + origin[i] + offset[i]; + return v * dimensions[i] + origin[i]; }); } diff --git a/platform/features/plot/src/PlotPreparer.js b/platform/features/plot/src/PlotPreparer.js index 755ef158ae..98ef38c931 100644 --- a/platform/features/plot/src/PlotPreparer.js +++ b/platform/features/plot/src/PlotPreparer.js @@ -36,9 +36,9 @@ define( vertices.push([]); for (index = 0; index < data.getPointCount(); index = index + 1) { - x = data.getDomainValue(index, domain) - domainOffset; + x = data.getDomainValue(index, domain); y = data.getRangeValue(index, range); - vertices[i].push(x); + vertices[i].push(x - domainOffset); vertices[i].push(y); min[0] = Math.min(min[0], x); min[1] = Math.min(min[1], y); diff --git a/platform/features/plot/src/PlotTickGenerator.js b/platform/features/plot/src/PlotTickGenerator.js index 3da2a72e06..c6486e5c99 100644 --- a/platform/features/plot/src/PlotTickGenerator.js +++ b/platform/features/plot/src/PlotTickGenerator.js @@ -5,7 +5,7 @@ define( function () { "use strict"; - function PlotTickGenerator(preparer, formatter) { + function PlotTickGenerator(panZoomStack, formatter) { function generateTicks(start, span, count, format) { var step = span / (count - 1), @@ -24,17 +24,19 @@ define( return { generateDomainTicks: function (count) { + var panZoom = panZoomStack.getPanZoom(); return generateTicks( - preparer.getOrigin()[0] + preparer.getDomainOffset(), - preparer.getDimensions()[0], + panZoom.origin[0], + panZoom.dimensions[0], count, formatter.formatDomainValue ); }, generateRangeTicks: function (count) { + var panZoom = panZoomStack.getPanZoom(); return generateTicks( - preparer.getOrigin()[1], - preparer.getDimensions()[1], + panZoom.origin[1], + panZoom.dimensions[1], count, formatter.formatRangeValue );