Salary facet

components.salary-facet.js

import Ember from 'ember';

const MAX = 1157;

export default Ember.Component.extend({
  tagName: 'rect',
  attributeBindings: ['computedHeight:height'],
  
  computedHeight: Ember.computed('facet.count', function() {
    let facetCount = this.get('facet.count');
    debugger;
    
    return 100 - facetCount/MAX;
  })
});

components.salary-facets.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'svg'
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return {
      facetContainers: [{
        "count": 1157, 
        "displayValue": "$40,000+", 
        "value": "1"
      }, {
        "count": 1139, 
        "displayValue": "$60,000+", 
        "value": "2"
      }, {
        "count": 1026, 
        "displayValue": "$80,000+", 
        "value": "3"
      }, {
        "count": 787, 
        "displayValue": "$100,000+", 
        "value": "4"
      }, {
        "count": 515, 
        "displayValue": "$120,000+", 
        "value": "5"
      }, {
        "count": 198, 
        "displayValue": "$140,000+", 
        "value": "6"
      }, {
        "count": 58, 
        "displayValue": "$160,000+", 
        "value": "7"
      }, {
        "count": 19, 
        "displayValue": "$180,000+", 
        "value": "8"
      }, {
        "count": 1, 
        "displayValue": "$200,000+", 
        "value": "9"
      }]
    };
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.salary-facet.hbs

{{yield}}

templates.components.salary-facets.hbs

{{#each facets as |facet|}}
  <g></g>
{{/each}}

templates.index.hbs

{{salary-facets facets=model.facetContainers}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}