Refactor files into addon dir

.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
   },
   globals: {
     d3: true,
-    rx: true
+    Rx: true
   },
   rules: {
   }

addon/components/.gitignore

@@ -0,0 +1 @@
+node_modules

addon/components/nf-area-stack.js

@@ -0,0 +1,107 @@
+import Ember from 'ember';
+import layout from 'ember-nf-graph/templates/components/nf-area-stack';
+import computed from 'ember-new-computed';
+
+/**
+  A component for grouping and stacking `nf-area` components in an `nf-graph`.
+
+  This component looks at the order of the `nf-area` components underneath it
+  and uses the ydata of the next sibling `nf-area` component to determine the bottom
+  of each `nf-area` components path to be drawn.
+
+  ### Example
+
+      {{#nf-graph width=300 height=100}}
+        {{#nf-graph-content}}
+          {{#nf-area-stack}}
+            {{nf-area data=myData xprop="time" yprop="high"}}
+            {{nf-area data=myData xprop="time" yprop="med"}}
+            {{nf-area data=myData xprop="time" yprop="low"}}
+          {{/nf-area-stack}}
+        {{/nf-graph-content}}
+      {{/nf-graph}}
+
+  @namespace components
+  @class nf-area-stack
+*/
+export default Ember.Component.extend({
+  layout,
+  tagName: 'g',
+
+  /**
+    The parent graph for a component.
+    @property graph
+    @type components.nf-graph
+    @default null
+    */
+  graph: null,
+
+  /**
+    Whether or not to add the values together to create the stacked area
+    @property aggregate
+    @type {boolean}
+    @default false
+  */
+  aggregate: computed({
+    get() {
+      Ember.warn('nf-area-stack.aggregate must be set. Currently defaulting to `false` but will default to `true` in the future.');
+      return this._aggregate = false;
+    },
+    set(key, value) {
+      return this._aggregate = value;
+    }
+  }),
+
+  /**
+    The collection of `nf-area` components under this stack.
+    @property areas
+    @type Array
+    @readonly
+  */
+  areas: computed(function(){
+    return Ember.A();
+  }),
+
+  /**
+    Registers an area component with this stack. Also links areas to one
+    another by setting `nextArea` on each area component.
+    @method registerArea
+    @param area {Ember.Component} The area component to register.
+  */
+  registerArea: function(area) {
+    let areas = this.get('areas');
+    let prev = areas[areas.length - 1];
+
+    Ember.run.schedule('afterRender', () => {
+      if(prev) {
+        prev.set('nextArea', area);
+        area.set('prevArea', prev);
+      }
+
+      areas.pushObject(area);
+    });
+  },
+
+  /**
+    Unregisters an area component from this stack. Also updates next
+    and previous links.
+    @method unregisterArea
+    @param area {Ember.Component} the area to unregister
+  */
+  unregisterArea: function(area) {
+    let prev = area.get('prevArea');
+    let next = area.get('nextArea');
+
+    Ember.run.schedule('afterRender', () => {
+      if(next) {
+        next.set('prevArea', prev);
+      }
+
+      if(prev) {
+        prev.set('nextArea', next);
+      }
+
+      this.get('areas').removeObject(area);
+    });
+  },
+});

addon/components/nf-area.js

@@ -0,0 +1,157 @@
+import Ember from 'ember';
+import layout from 'ember-nf-graph/templates/components/nf-area';
+import Selectable from 'ember-nf-graph/mixins/graph-selectable-graphic';
+import RegisteredGraphic from 'ember-nf-graph/mixins/graph-registered-graphic';
+import DataGraphic from 'ember-nf-graph/mixins/graph-data-graphic';
+import AreaUtils from 'ember-nf-graph/mixins/graph-area-utils';
+import GraphicWithTrackingDot from 'ember-nf-graph/mixins/graph-graphic-with-tracking-dot';
+import RequireScaleSource from 'ember-nf-graph/mixins/graph-requires-scale-source';
+import LineUtils from 'ember-nf-graph/mixins/graph-line-utils';
+
+/**
+  Adds an area graph to an `nf-graph` component.
+
+  Optionally, if it's located within an `nf-area-stack` component, it will work with
+  sibling `nf-area` components to create a stacked graph.
+  @namespace components
+  @class nf-area
+  @extends Ember.Component
+  @uses mixins.graph-area-utils
+  @uses mixins.graph-selectable-graphic
+  @uses mixins.graph-registered-graphic
+  @uses mixins.graph-data-graphic
+  @uses mixins.graph-graphic-with-tracking-dot
+  @uses mixins.graph-requires-scale-source
+*/
+export default Ember.Component.extend(RegisteredGraphic, DataGraphic, Selectable, AreaUtils, GraphicWithTrackingDot, RequireScaleSource, LineUtils, {
+  layout,
+  tagName: 'g',
+
+  classNameBindings: [':nf-area', 'selected', 'selectable'],
+
+  /**
+    The parent graph for a component.
+    @property graph
+    @type components.nf-graph
+    @default null
+    */
+  graph: null,
+
+  /**
+    The type of d3 interpolator to use to create the area
+    @property interpolator
+    @type String
+    @default 'linear'
+  */
+  interpolator: 'linear',
+
+  /**
+    The previous area in the stack, if this area is part of an `nf-area-stack`
+    @property prevArea
+    @type components.nf-area
+    @default null
+  */
+  prevArea: null,
+
+  /**
+    The next area in the stack, if this area is part of an `nf-area-stack`
+    @property nextArea
+    @type components.nf-area
+    @default null
+  */
+  nextArea: null,
+
+  stack: null,
+
+  init() {
+    this._super(...arguments);
+    let stack = this.get('stack');
+    if(stack) {
+      stack.registerArea(this);
+      this.set('stack', stack);
+    }
+  },
+
+  /**
+    Override from `graph-data-graphic` mixin
+    @method getActualTrackData
+  */
+  getActualTrackData(renderX, renderY, data) {
+    return {
+      x: this.get('xPropFn')(data),
+      y: this.get('yPropFn')(data)
+    };
+  },
+
+  _unregisterArea: Ember.on('willDestroyElement', function(){
+    let stack = this.get('stack');
+    if(stack) {
+      stack.unregisterArea(this);
+    }
+  }),
+
+  /**
+    The computed set of next y values to use for the "bottom" of the graphed area.
+    If the area is part of a stack, this will be the "top" of the next area in the stack,
+    otherwise it will return an array of values at the "bottom" of the graph domain.
+    @property nextYData
+    @type Array
+    @readonly
+  */
+  nextYData: Ember.computed('data.length', 'nextArea.data.[]', function(){
+    let data = this.get('data');
+    if(!Array.isArray(data)) {
+      return [];
+    }
+    let nextData = this.get('nextArea.mappedData');
+    return data.map((d, i) => (nextData && nextData[i] && nextData[i][1]) || Number.MIN_VALUE);
+  }),
+
+  /**
+    The current rendered data "zipped" together with the nextYData.
+    @property mappedData
+    @type Array
+    @readonly
+  */
+  mappedData: Ember.computed('data.[]', 'xPropFn', 'yPropFn', 'nextYData.[]', 'stack.aggregate', function() {
+    let { data, xPropFn, yPropFn, nextYData } = this.getProperties('data', 'xPropFn', 'yPropFn', 'nextYData');
+    let aggregate = this.get('stack.aggregate');
+    if(Array.isArray(data)) {
+      return data.map((d, i) => {
+        let x = xPropFn(d);
+        let y = yPropFn(d);
+        let result = aggregate ? [x, y + nextYData[i], nextYData[i]] : [x, y, nextYData[i]];
+        result.data = d;
+        return result;
+      });
+    } else {
+      return [];
+    }
+  }),
+
+  areaFn: Ember.computed('xScale', 'yScale', 'interpolator', function(){
+    let { xScale, yScale, interpolator } = this.getProperties('xScale', 'yScale', 'interpolator');
+    return this.createAreaFn(xScale, yScale, interpolator);
+  }),
+
+  lineFn: Ember.computed('xScale', 'yScale', 'interpolator', function(){
+    let { xScale, yScale, interpolator } = this.getProperties('xScale', 'yScale', 'interpolator');
+    return this.createLineFn(xScale, yScale, interpolator);
+  }),
+
+  d: Ember.computed('renderedData', 'areaFn', function(){
+    let renderedData = this.get('renderedData');
+    return this.get('areaFn')(renderedData);
+  }),
+
+  dLine: Ember.computed('renderedData', 'lineFn', function(){
+    let renderedData = this.get('renderedData');
+    return this.get('lineFn')(renderedData);
+  }),
+
+  click: function(){
+    if(this.get('selectable')) {
+      this.toggleProperty('selected');
+    }
+  }
+  });

addon/components/nf-bars-group.js

@@ -0,0 +1,75 @@
+import Ember from 'ember';
+import layout from 'ember-nf-graph/templates/components/nf-bars-group';
+import RequiresScaleSource from 'ember-nf-graph/mixins/graph-requires-scale-source';
+
+export default Ember.Component.extend(RequiresScaleSource, {
+  layout,
+  tagName: 'g',
+
+  /**
+    The parent graph for a component.
+    @property graph
+    @type components.nf-graph
+    @default null
+    */
+  graph: null,
+
+  groupPadding: 0.1,
+
+  groupOuterPadding: 0,
+
+  // either b-arses or fat, stupid hobbitses
+  barses: Ember.computed(function(){
+    return Ember.A();
+  }),
+
+  registerBars: function(bars) {
+    Ember.run.schedule('afterRender', () => {
+      let barses = this.get('barses');
+      barses.pushObject(bars);
+      bars.set('group', this);
+      bars.set('groupIndex', barses.length - 1);
+    });
+  },
+
+  unregisterBars: function(bars) {
+    if(bars) {
+      Ember.run.schedule('afterRender', () => {
+        bars.set('group', undefined);
+        bars.set('groupIndex', undefined);
+        this.get('barses').removeObject(bars);
+      });
+    }
+  },
+
+  groupWidth: Ember.computed('xScale', function(){
+    let xScale = this.get('xScale');
+    return xScale && xScale.rangeBand ? xScale.rangeBand() : NaN;
+  }),
+
+  barsDomain: Ember.computed('barses.[]', function(){
+    let len = this.get('barses.length') || 0;
+    return d3.range(len);
+  }),
+
+  barScale: Ember.computed(
+    'groupWidth',
+    'barsDomain.[]',
+    'groupPadding',
+    'groupOuterPadding',
+    function(){
+      let barsDomain = this.get('barsDomain');
+      let groupWidth = this.get('groupWidth');
+      let groupPadding = this.get('groupPadding');
+      let groupOuterPadding = this.get('groupOuterPadding');
+      return d3.scale.ordinal()
+        .domain(barsDomain)
+        .rangeBands([0, groupWidth], groupPadding, groupOuterPadding);
+    }
+  ),
+
+  barsWidth: function() {
+    let scale = this.get('barScale');
+    return scale && scale.rangeBand ? scale.rangeBand() : NaN;
+  },
+});