Refactor domain label (ready)

src/components/area.js

@@ -32,7 +32,8 @@ function(array, config, obj, string, d3util, mixins, dataFns) {
       color: 'steelBlue',
       inLegend: true,
       areaGenerator: d3.svg.area(),
-      opacity: 1
+      opacity: 1,
+      hiddenStates: null
     };
 
     /**

src/components/asset.js

@@ -24,7 +24,8 @@ function(obj, config, string, mixins, d3util) {
       cid: null,
       assetId: null,
       target: null,
-      cssClass: null
+      cssClass: null,
+      hiddenStates: null
     };
 
     function asset() {

src/components/axis.js

@@ -33,7 +33,8 @@ function(obj, config, string, mixins, d3util) {
       textBgColor: '#fff',
       textBgSize: 3,
       tickSize: 0,
-      ticks: 3
+      ticks: 3,
+      hiddenStates: null
     };
 
     /**

src/components/component.js

@@ -5,9 +5,10 @@ define([
   'components/label',
   'components/overlay',
   'components/asset',
-  'components/area'
+  'components/area',
+  'components/domain-label'
 ],
-function(line, legend, axis, label, overlay, asset, area) {
+function(line, legend, axis, label, overlay, asset, area, domainLabel) {
   'use strict';
 
   return {
@@ -17,7 +18,8 @@ function(line, legend, axis, label, overlay, asset, area) {
     label: label,
     overlay: overlay,
     asset: asset,
-    area: area
+    area: area,
+    domainLabel: domainLabel
   };
 
 });

src/components/domain-label.js

@@ -0,0 +1,171 @@
+/**
+ * @fileOverview
+ * Component to display the start/end values of a domain.
+ */
+define([
+  'core/object',
+  'core/config',
+  'core/string',
+  'core/format',
+  'd3-ext/util',
+  'components/mixins',
+  'components/label'
+],
+function(obj, configMixin, string, format, d3util, mixins, label) {
+  'use strict';
+
+  return function() {
+
+    // PRIVATE
+
+    var defaults,
+      config,
+      root,
+      dataCollection,
+      innerLabel;
+
+    config = {};
+
+    defaults = {
+      type: 'domainLabel',
+      cid: null,
+      target: null,
+      cssClass: null,
+      suffix: null,
+      dataId: '$domain',
+      layout: 'horizontal',
+      position: 'center-right',
+      formatter: format.timeDomainUTC,
+      dimension: 'x',
+      hiddenStates: ['loading']
+    };
+
+    // PUBLIC
+
+    /**
+     * The main function.
+     * @return {components.domainLabel}
+     */
+    function domainLabel() {
+      obj.extend(config, defaults);
+      innerLabel = label();
+      domainLabel.rebind(
+        innerLabel,
+        'color',
+        'fontFamily',
+        'fontWeight',
+        'fontSize');
+      return domainLabel;
+    }
+
+    // Apply Mixins
+    obj.extend(
+      domainLabel,
+      configMixin.mixin(
+        config,
+        'cid',
+        'target',
+        'cssClass'
+      ),
+      mixins.lifecycle,
+      mixins.toggle);
+
+    /**
+     * Gets/Sets the data source to be used with the domainLabel.
+     * @param {Object} data Any data source.
+     * @return {Object|components.domainLabel}
+     */
+    domainLabel.data = function(data) {
+      // Set data if provided.
+      if (data) {
+        dataCollection = data;
+        return domainLabel;
+      }
+      // Otherwise return the entire raw data.
+      return dataCollection;
+    };
+
+    /**
+     * Does the initial render to the document.
+     * @param {d3.selection|Node|string} A d3.selection, DOM node,
+     *    or a selector string.
+     * @return {components.domainLabel}
+     */
+    domainLabel.render = function(selection) {
+      if (!root) {
+        root = d3util.applyTarget(domainLabel, selection, function(target) {
+          var root = target.append('g')
+            .attr({
+              'class': string.classes('component', 'domain-label')
+            });
+          return root;
+        });
+        if (root) {
+          innerLabel.render(root);
+        }
+      }
+      domainLabel.update();
+      return domainLabel;
+    };
+
+    /**
+     * Triggers a document update based on new data/config.
+     * @return {components.domainLabel}
+     */
+    domainLabel.update = function() {
+      // Return early if no data or render() hasn't been called yet.
+      if (!root) {
+        return domainLabel;
+      }
+      if (config.cssClass) {
+        root.classed(config.cssClass, true);
+      }
+      if (config.cid) {
+        root.attr('gl-cid', config.cid);
+      }
+      innerLabel
+        .config('dataId', config.dataId)
+        .data(dataCollection)
+        .text(function(domainData) {
+          return config.formatter(domainData[config.dimension], config.suffix);
+        })
+        .update();
+      root.position(config.position);
+      return domainLabel;
+    };
+
+    /**
+     * Returns the formatted text.
+     * @public
+     * @return {String}
+     */
+    domainLabel.text = function() {
+      return innerLabel.text();
+    };
+
+    /**
+     * Returns the root
+     * @return {d3.selection}
+     */
+    domainLabel.root = function () {
+      return root;
+    };
+
+    /**
+     * Destroys the domainLabel and removes everything from the DOM.
+     * @public
+     */
+    domainLabel.destroy = function() {
+      if (root) {
+        root.remove();
+      }
+      root = null;
+      config = null;
+      defaults = null;
+      innerLabel.destroy();
+    };
+
+    return domainLabel();
+  };
+
+});

src/components/label.js

@@ -38,7 +38,7 @@ function(obj, config, string, array, d3util, mixins) {
       fontFamily: 'Arial, sans-serif',
       fontWeight: 'normal',
       fontSize: 13,
-
+      hiddenStates: null
     };
 
     // PUBLIC

src/components/legend.js

@@ -40,7 +40,8 @@ function(obj, config, string, d3util, mixins) {
       fontSize: 13,
       layout: 'horizontal',
       gap: 20,
-      keys: []
+      keys: [],
+      hiddenStates: ['loading']
     };
 
     /**

src/components/line.js

@@ -31,7 +31,8 @@ function(array, config, obj, string, d3util, mixins, dataFns) {
       inLegend: true,
       lineGenerator: d3.svg.line(),
       interpolate: 'linear',
-      opacity: 1
+      opacity: 1,
+      hiddenStates: null
     };
 
     /**

src/components/overlay.js

@@ -30,7 +30,8 @@ function(obj, config, string, label, mixins, d3util) {
       layoutConfig: { type: 'horizontal', position: 'center', gap: 6 },
       opacity: 1,
       backgroundColor: '#fff',
-      type: 'overlay'
+      type: 'overlay',
+      hiddenStates: null
     };
 
     /**

src/core/array.js

@@ -95,9 +95,10 @@ function () {
      * @return {Boolean}
      */
     contains: function(arr, item) {
-      if (item) {
-        return !!arr.length && arr.indexOf(item) !== -1;
+      if (item && Array.isArray(arr) && arr.length) {
+        return arr.indexOf(item) !== -1;
       }
+      return false;
     }
 
   };

src/core/format.js

@@ -2,26 +2,59 @@ define(
 function() {
   'use strict';
 
+  function getSuffix(optSuffix) {
+    return optSuffix ? ' ' + optSuffix : '';
+  }
 
   return {
 
     /**
-     * Default formatter for a date/time domain.
+     * Default formatter for a date/time domain using UTC time.
      * Text is in the format:
-     *    ShortMonth Day, HH:MM AM/PM - ShortMonth Day, HH:MM AM/PM UTC
-     * @private
+     *    ShortMonth Day, HH:MM AM/PM - ShortMonth Day, HH:MM AM/PM
+     * @public
      * @param {Array} domain Contains min and max of the domain.
-     * @param {Boolean} optUseUTC Optional parameter to set utc format
+     * @param {String} optSuffix
      * @return {String}
      * @see https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
      */
-    timeDomain: function(domain, optUseUTC) {
-      var formatter, specifier;
-      specifier = '%b %-e, %I:%M %p';
-      formatter = !!optUseUTC ? d3.time.format.utc(specifier) :
-        d3.time.format(specifier);
-      return formatter(domain[0]) + ' - ' + formatter(domain[1]) + ' UTC';
+    timeDomainUTC: function(domain, optSuffix) {
+      var formatter;
+      formatter = d3.time.format.utc('%b %-e, %I:%M %p');
+      return formatter(domain[0]) + ' - ' +
+          formatter(domain[1]) + getSuffix(optSuffix);
+    },
+
+    /**
+     * Formatter for a date/time domain using local time.
+     * Text is in the format:
+     *    ShortMonth Day, HH:MM AM/PM - ShortMonth Day, HH:MM AM/PM -0700
+     * @public
+     * @param {Array} domain Contains min and max of the domain.
+     * @param {String} optSuffix
+     * @return {String}
+     * @see https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
+     */
+    timeDomain: function(domain, optSuffix) {
+      var formatter;
+      formatter = d3.time.format('%b %-e, %I:%M %p');
+      return formatter(domain[0]) + ' - ' +
+          formatter(domain[1]) + getSuffix(optSuffix);
+    },
+
+    /**
+     * Standard formatter for non-time domains.
+     * Text is in the format:
+     *   start - end unit
+     *
+     * @param {Array} domain
+     * @param {String} optSuffix
+     * @return {String}
+     */
+    standardDomain: function(domain, optSuffix) {
+      return domain[0] + ' - ' + domain[1] + getSuffix(optSuffix);
     }
+
   };
 
 });

src/data/functions.js

@@ -62,9 +62,8 @@ define([
       if (obj.isDefAndNotNull(data)) {
         if (Array.isArray(data)) {
           return data.map(convertToUTCDate);
-        } else {
-          return convertToUTCDate(data);
         }
+        return convertToUTCDate(data);
       }
       return data;
     }