New Twiddle

components.bubble-container.js

import Ember from 'ember';


const {
  get,
  computed
} = Ember;

export default Ember.Component.extend({
  tagName: 'svg',
  attributeBindings: [
    'viewbox'
  ],
  
  bubbleCount: 1,
  bubbleSize: 40,
  barSize: 100,
  
  viewbox: computed('bubbleIndex', 'bubbleCount', function() {
    const count = get(this, 'bubbleCount');
    const bubbleSize = get(this, 'bubbleSize');
    const barSize = get(this, 'barSize');
    const totalSize = bubbleSize + barSize;

    return `0 0 ${count * totalSize} ${bubbleSize}`;
  })
});

components.progress-bubble.js

import Ember from 'ember';

const {
  get,
  computed
} = Ember;

export default Ember.Component.extend({
  tagName: 'g',
  attributeBindings: [
    'viewbox',
    'transform'
  ],
  
  viewbox: '0 0 40 40',
  activeBubbleIndex: 0,
  bubbleCount: 1,
  bubbleIndex: 0,
  bubbleSize: 40,
  barSize: 40,
  
  isLast: computed('bubbleIndex', 'bubbleCount', function() {
    const index = get(this, 'bubbleIndex');
    const count = get(this, 'bubbleCount');
    
    return count === (index + 1);
  }),
  
  bubbleNumber: computed('bubbleIndex', function() {
    return get(this, 'bubbleIndex') + 1;
  }),
  
  barPos1: computed('bubbleSize', function() {
    const bubbleSize = get(this, 'bubbleSize');
		
    return bubbleSize - 3;
  }),
  
  barPos2: computed('barSize', 'bubbleSize', function() {
    const barSize = get(this, 'barSize');
    const bubbleSize = get(this, 'bubbleSize');
		
    return bubbleSize + barSize;
  }),
  
  isComplete: computed('bubbleIndex', 'bubbleCount', function() {
    const index = get(this, 'bubbleIndex');
    const activeBubbleIndex = get(this, 'activeBubbleIndex');
		
    return (index + 1) <= activeBubbleIndex;
  }),
  
  isActive: computed('bubbleIndex', 'bubbleCount', function() {
    const index = get(this, 'bubbleIndex');
    const activeBubbleIndex = get(this, 'activeBubbleIndex');
		
    return (index + 1) === activeBubbleIndex;
  }),
  
  isSuccess: computed.or('isComplete', 'isActive'),
  
  strokeColor: computed('isSuccess', function() {
    return get(this, 'isSuccess') ? '#81c13b' : '#979797';
  }),
  
  fillColor: computed('isSuccess', function() {
    return get(this, 'isSuccess') ? '#81c13b' : '#e0e0e0';
  }),
  
  transform: computed('bubbleIndex', 'bubbleCount', function() {
    const index = get(this, 'bubbleIndex');
    const count = get(this, 'bubbleCount');

    return `translate(${index * 120})`;
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  activeBubbleIndex: 3,
  
  bubbles: [
    'Panda',
    'Monkey',
    'Thylacine',
    'Honey Badger',
    'Tiger',
    'Pony' 
  ]
});

helpers.repeat.js

import { helper } from 'ember-helper';
import { typeOf } from 'ember-utils';

export function repeat([length, value]) {
  if (typeOf(length) !== 'number') {
    return [value];
  }
  return Array.apply(null, { length }).map(() => value); // eslint-disable-line
}

export default helper(repeat);

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

svg {
  width: 100%;
  height: auto;
}

templates.application.hbs

{{#bubble-container bubbleCount=bubbles.length as |bubbleSize barSize|}}
	{{#each bubbles as |bubble index|}}
    {{progress-bubble
    	activeBubbleIndex=activeBubbleIndex
      bubbleIndex=index
      bubbleSize=bubbleSize
      bubbleCount=bubbles.length
      barSize=barSize}}
  {{/each}}
{{/bubble-container}}

templates.components.bubble-container.hbs

{{yield bubbleSize barSize}}

templates.components.progress-bubble.hbs

<circle stroke="{{strokeColor}}" fill="{{fillColor}}" stroke-width="1" cx="20" cy="20" r="19"></circle>
{{#unless isLast}}
  <rect x="{{barPos1}}" y="13" width="{{barSize}}" height="15" fill="#e0e0e0" ry="0" rx="0"></rect>
{{/unless}}


{{#unless isLast}}
  {{#if isComplete}}
    <rect x="{{barPos1}}" y="13" width="{{barSize}}" height="16" fill="{{fillColor}}" ry="0" rx="0"></rect>
  {{else}}
    <line id="e2_line" x1="{{barPos1}}" y1="13" x2="{{barPos2}}" y2="13" stroke="#979797" style="stroke-width: 1px; fill: none;"></line>
    <line id="e2_line" x1="{{barPos1}}" y1="28" x2="{{barPos2}}" y2="28" stroke="#979797" style="stroke-width: 1px; fill: none;"></line>
  {{/if}}
{{/unless}}

{{#unless isSuccess}}
  <text text-anchor="middle" alignment-baseline="middle" x=20 y=20 fill="#808080">{{bubbleNumber}}</text>
{{/unless}}
  
{{#if isActive}}
	<circle stroke="#FFFFFF" fill="#FFFFFF" stroke-width="2" cx="20" cy="20" r="7"></circle>
{{else if isComplete}}
  <polyline fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="square" stroke-linejoin="square" points="10 21 17 27 29 13" x="17"></polyline>
{{/if}}

    

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"
  }
}