Merge pull request #485 from nasa/open337-filters

[Plot] Use filters to reverse tick labels

platform/commonUI/general/bundle.json

@@ -25,6 +25,12 @@
                 "depends": [ "notificationService", "agentService" ]
             }
         ],
+        "filters": [
+            {
+                "implementation": "filters/ReverseFilter.js",
+                "key": "reverse"
+            }
+        ],
         "stylesheets": [
             {
                 "stylesheetUrl": "css/normalize.min.css",

platform/commonUI/general/src/filters/ReverseFilter.js

@@ -0,0 +1,44 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(function () {
+    'use strict';
+
+    /**
+     * Implements the `reverse` filter, which reverses text strings.
+     * Useful in cases where text should be reversed for presentational
+     * reasons (e.g. in conjunction with CSS tricks involing text direction),
+     * allowing such behavior to be handled independently from the controller
+     * layer.
+     *
+     * @constructor
+     * @memberof platform/commonUI/general
+     */
+    function ReverseFilter() {
+        return function reverse(value) {
+            return value && value.toString().split('').reverse().join('');
+        };
+    }
+
+    return ReverseFilter;
+});

platform/commonUI/general/test/filters/ReverseFilterSpec.js

@@ -0,0 +1,45 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ['../../src/filters/ReverseFilter'],
+    function (ReverseFilter) {
+        'use strict';
+
+        describe("The reverse filter", function () {
+            var reverse;
+
+            beforeEach(function () {
+                reverse = new ReverseFilter();
+            });
+
+            it("reverses text", function () {
+                expect(reverse('foo')).toEqual('oof');
+            });
+
+            it("returns undefined for undefined inputs", function () {
+                expect(reverse(undefined)).toBeUndefined();
+            });
+        });
+    }
+);

platform/commonUI/general/test/suite.json

@@ -20,6 +20,7 @@
     "directives/MCTScroll",
     "directives/MCTSplitPane",
     "directives/MCTSplitter",
+    "filters/ReverseFilter",
     "services/Popup",
     "services/PopupService",
     "services/UrlService",

platform/features/plot/res/templates/plot.html

@@ -55,7 +55,7 @@
             <div ng-repeat="tick in subplot.getRangeTicks()"
                  class="gl-plot-tick gl-plot-y-tick-label"
                  ng-style="{ bottom: (100 * $index / (subplot.getRangeTicks().length - 1)) + '%' }">
-                {{tick.label}}
+                {{tick.label | reverse}}
             </div>
 
             <div class="gl-plot-y-options gl-plot-local-controls"
@@ -153,7 +153,7 @@
                  class="gl-plot-tick gl-plot-x-tick-label"
                  ng-show="$index > 0 && $index < (subplot.getDomainTicks().length - 1)"
                  ng-style="{ left: (100 * $index / (subplot.getDomainTicks().length - 1)) + '%' }">
-                {{tick.label}}
+                {{tick.label | reverse}}
             </div>
 
             <div class="gl-plot-label gl-plot-x-label">

platform/features/plot/src/elements/PlotTickGenerator.js

@@ -57,19 +57,12 @@ define(
         PlotTickGenerator.prototype.generateTicks = function (start, span, count, format) {
             var step = span / (count - 1),
                 result = [],
-                tickVal = '',
                 i;
 
             for (i = 0; i < count; i += 1) {
-                tickVal = format(i * step + start);
-                if (tickVal !== undefined) {
-                    // Make the tick value have its ellipsis on the least significant left side by reversing it here,
-                    // and then reversing it again via CSS.
-                    tickVal = tickVal.toString().split('').reverse().join('');
-                }
                 result.push({
                     //If data to show, display label for each tick line, otherwise show lines but suppress labels.
-                    label: span > 0 ? tickVal  : ''
+                    label: span > 0 ? format(i * step + start) : ''
                 });
             }
 

platform/framework/src/register/CustomRegistrars.js

@@ -221,6 +221,13 @@ define(
         CustomRegistrars.prototype.services =
             mapUpon(customRegistrar("service"));
 
+        /**
+         * Register Angular filters.
+         * @param {Array} extensions the resolved extensions
+         */
+        CustomRegistrars.prototype.filters =
+            mapUpon(customRegistrar("filter"));
+
         /**
          * Register functions which will run after bootstrapping.
          * @param {Array} extensions the resolved extensions