Custom component

addon/components/nf-component.js

@@ -0,0 +1,62 @@
+import Ember from 'ember';
+import layout from '../templates/components/nf-component';
+
+const {
+  assert,
+  isPresent
+} = Ember;
+
+/**
+  Renders a custom component with the given component name.
+
+  ## Example
+
+  The following example will render a custom svg image component at (0, 50):
+
+        {{#graph.component 'my-custom-svg-image' as |image|}}
+          {{component image src="images/star.svg"}}
+        {{/graph.component}}
+
+  @namespace components
+  @class nf-component
+  @extends Ember.Component
+*/
+const NfComponent = Ember.Component.extend({
+  layout,
+  tagName: '',
+
+  /**
+    The name of the component to be rendered.
+    @property componentName
+    @type String
+    @default ''
+  */
+  componentName: '',
+
+  /**
+    The parent graph for a component.
+    @property graph
+    @type components.nf-graph
+    @default null
+  */
+  graph: null,
+
+  /**
+    The scale source
+    @property scaleSource
+    @type d3.nf-graph
+    @default graph
+  */
+ scaleSource: null,
+
+ init(){
+   this._super(...arguments);
+   assert('[ember-nf-graph] A component name must be passed into nf-component.', isPresent(this.get('componentName')));
+ }
+});
+
+NfComponent.reopenClass({
+  positionalParams: ['componentName']
+});
+
+export default NfComponent;

addon/mixins/graph-requires-scale-source.js

@@ -32,6 +32,17 @@ let scaleProperty = function(scaleKey, zoomKey, offsetKey){
   @class graph-requires-scale-source
 */
 export default Ember.Mixin.create({
+
+  /**
+    The scale source
+    @property scaleSource
+    @type d3.nf-graph
+    @default graph
+  */
+  scaleSource: Ember.computed(function() {
+    return this.get('graph');
+  }),
+
   /**
     The x scale used by this component
     @property xScale
@@ -114,13 +125,5 @@ export default Ember.Mixin.create({
     set(key, value) {
       return this._scaleOffsetY = +value || 0;
     }
-  }),
-
-  init() {
-    this._super(...arguments);
-
-    if (!this.get('scaleSource')) {
-      this.set('scaleSource', this.get('graph'));
-    }
-  }
+  })
 });

addon/templates/components/nf-component.hbs

@@ -0,0 +1 @@
+{{yield (component componentName graph=graph scaleSource=scaleSource)}}

addon/templates/components/nf-graph-yieldables.hbs

@@ -1,5 +1,6 @@
 {{yield (hash
     group=(component 'nf-group' graph=graph)
+    component=(component 'nf-component' graph=graph scaleSource=scaleSource)
     crosshairs=(component 'nf-crosshairs' graph=graph)
     selection-box=(component 'nf-selection-box' graph=graph scaleSource=scaleSource)
     svg-image=(component 'nf-svg-image' graph=graph scaleSource=scaleSource)

addon/templates/components/nf-graph.hbs

@@ -13,6 +13,7 @@
 			graph=(component 'nf-graph-content' graph=this)
 			right-tick=(component 'nf-right-tick' graph=this scaleSource=this)
 			y-diff=(component 'nf-right-tick' graph=this scaleSource=this)
+			component=(component 'nf-component' graph=this scaleSource=this)
 		)
 	}}
 

addon/templates/components/nf-selection-box.hbs

@@ -0,0 +1 @@
+{{yield}}

app/components/nf-component.js

@@ -0,0 +1 @@
+export { default } from 'ember-nf-graph/components/nf-component';