donut-chart-with-realtime-data-update

components.donut-chart.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';
const DefineCP = function(context, cpName, dependantKey, model, arrayIndex){
	context.set("model", model);
  dependantKey = dependantKey+ ".[]";
  Ember.defineProperty(context, cpName, Ember.computed(dependantKey, function () {
  	return this.get(dependantKey)[arrayIndex];
  }));
};
const DonutChart = Ember.Object.extend({
  type: "donut-chart",
  reinit(labels){
  	let obj = {
    	"labels": labels
    };
    this.setProperties(obj);
    let tempArray = [];
    for(let i = 0; i < labels.length; i++){
    	tempArray.pushObject(Ember.Object.create({"label": labels[i]}))
    }
    this.set("data", tempArray);
    //console.log("donut chart obj created", tempArray);
    return this;
  },
	
  setData(value, model){
    let data = this.get("data");
    for(let i =0; i<data.length; i++){
    	DefineCP(data.objectAt(i), "value", `model.${value}`, model, i);
    }
    
  	return this;
  }
});
export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  data: [2,3,4],
  init(){
  	this._super(...arguments);
    let lables = ["one", "two", "three"];
    this.set("donutModel", DonutChart.create().reinit(lables));
  },
  donutChartData:Ember.computed(function(){
  	return this.get("donutModel").setData("data", this.get("model"));
  }),
  actions:{
    update(){
      let temp = [Math.floor(Math.random() * 10) + 10, Math.floor(Math.random() * 10), Math.floor(Math.random() * 10) + 20];
      this.set("model.data", temp); 
    }
    
  }
});

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
  	return {"id": 1, "data": [2,4,5]};
  }
});

templates.application.hbs

{{log donutChartData}}
{{donut-chart model=donutChartData}}
<button {{action "update"}}> update </button>
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.donut-chart.hbs

{{#each model.data as |item|}}
{{log 'model rendered'}}
	{{item.value}}
{{/each}}
						
{{yield}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.14.1",
    "ember-template-compiler": "2.14.1",
    "ember-testing": "2.14.1"
  },
  "addons": {
    "ember-data": "2.14.10",
    "ember-cli-morris-charts": "1.0.1"
  }
}