fancy-data-graph.hbs

<h3>{{title}}</h3>

{{multline-graph dataSourceName="NetflixFancyData" 
  otherThings="wee" whatNow="whatever"
  brushAction="brush"}}

fancy-data-graph.js

export default Ember.Component.extend({
  title: 'No Title',
  
  /* code 
  actions: {
    brush: function(e){ 
      this.sendAction('brushAction', e);
    }
  }
});

multiline-graph.hbs

{{#nf-graph brushAction="brush"}}
  {{nf-line data=data1}}
  {{nf-line data=data2}}
  {{nf-line data=data3}}
{{/nf-graph}}

multiline-graph.js

export default Ember.Component.extend({
  dataSourceName: null
  
  /* CPs to create data1, data2, data3 from dataSourceName here */
  
  brushAction: null,
  
  actions: {
    brush: function(e) {
      this.sendAction('brushAction', e)
    }
  }
});

my-view.hbs

<h3>Totally Awesome Data</h3>
<hr/>
<blink>For realz</blink>

<div>
  {{fancy-data-graph title="Fancy Data 1"}}
</div>

<div>
  {{other-data-graph title="My Other Stuff"}}
</div>

other-data-graph.hbs

<h3>{{title}}</h3>

<button {{action 'whatever'}}>I'm a button</button>

{{multline-graph dataSourceName="OtherDataFromNetflixyStuff" 
  otherThings="wee" whatNow="whatever"
  brushAction="brush"}}

other-data-graph.js

export default Ember.Component.extend({
  title: 'Other Data',
  
  /* unique and interesting functionality here */
  
  actions: {
    whatever: function(e) {
      console.log('whatever button clicked');
    },
    
    brush: function(e) {
      this.sendAction('brushAction', e);
    }
  }
})