Gauge Demo

components.ember-gauge.js

import Ember from 'ember';

const {
  computed,
  get
} = Ember;

export default Ember.Component.extend({
  classNames: ['ember-gauge'],
  
  minVal: 0,
  maxVal: 100,
  redLine: 90,
  
  value: 0,
  
  percentage: computed('minVal', 'maxVal', 'value', function() {
    const minVal = get(this, 'minVal');
    const maxVal = get(this, 'maxVal');
    const value = get(this, 'value');
    
    return (value - minVal) / (maxVal - minVal) * 100;
  }),
  
  pointerTransform: computed('percentage', function() {
  	const percentage = get(this, 'percentage');
    return percentage * 1.8 - 90;
  }),
  
  areaTransform: computed('percentage', function() {
  	const percentage = get(this, 'percentage');
    return percentage * 1.8 - 180;
  }),
  
  overRedLine: computed('value', 'redLine', function() {
    return get(this, 'value') > get(this, 'redLine');
  })
  
});

controllers.application.js

import Ember from 'ember';

const {
  computed,
  get
} = Ember;

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  minVal: 0,
  maxVal: 6000,
  redLine: 4500,
  
  gaugeValue: computed('minVal', 'maxVal', {
    get() {
      const minVal = get(this, 'minVal');
      const maxVal = get(this, 'maxVal');
      
      return setInterval(() => {   
    		this.set('gaugeValue', Math.floor(Math.random() * (maxVal - minVal + 1)) + minVal); 
 			}, 1000);
      
    },
    set(key, val) {
    	return val;
    }
  })
});

styles.app.css

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

.ember-gauge {
  position: relative;
  width: 20em;
  height: 10em;
  margin: 4em auto 0.5em;
}

.ember-gauge__inner {
  width: 20em;
  height: 10em;
  background: #F5F6F7;
  border-radius: 20em 20em 0 0;
  overflow: hidden;
  position: relative;
}

.ember-gauge__inner:after {
  content: '';
  display: block;
  width: 10em;
  height: 5em;
  background: white;
  border-radius: 20em 20em 0 0;
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: calc(50% - (20em / 4));
}

.ember-gauge__pointer {
  width: 0.6em;
  height: 10em;
  transform-origin: center bottom;
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: calc(50% - 0.3em);
  transition: transform .5s ease;
}

.ember-gauge__pointer:after {
  content: '';
  border-left: 0.32em solid transparent;
  border-right: 0.32em solid transparent;
  border-bottom: 13em solid #404040;
  border-radius: 0.3em;
  margin-top: -3em;
  display: block;
}

.ember-gauge__area {
  width: 20em;
  height: 10em;
  background: #2FA8DD;
  transform-origin: center bottom;
  position: absolute;
  z-index: 2;
  border-radius: 20em 20em 0 0;
  transition: transform .5s ease, background .5s ease;
}

.ember-gauge__area--danger {
  background: #EE6C52;
}

templates.application.hbs

{{ember-gauge value=gaugeValue minVal=minVal maxVal=maxVal redLine=redLine}}

templates.components.ember-gauge.hbs

<div class="ember-gauge__inner">
	<div class="ember-gauge__area {{if overRedLine 'ember-gauge__area--danger'}}" style="transform: rotate({{areaTransform}}deg)"></div>
</div>
<div class="ember-gauge__pointer" style="transform: rotate({{pointerTransform}}deg)"></div>

twiddle.json

{
  "version": "0.10.7",
  "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.10.0",
    "ember-data": "2.10.0",
    "ember-template-compiler": "2.10.0",
    "ember-testing": "2.10.0"
  },
  "addons": {}
}