Merge pull request #82 from Owlman145/master

Change to didUpdateAttrs() from observers

Author: aomran

addon/components/ember-chart.js

@@ -5,36 +5,42 @@ export default Ember.Component.extend({
   tagName: 'canvas',
   attributeBindings: ['width', 'height'],
 
-  didInsertElement: function(){
-    var context = this.get('element');
-    var data    = this.get('data');
-    var type    = this.get('type');
-    var options = this.get('options');
-
-    var chart = new Chart(context, {
+  didInsertElement() {
+    this._super(...arguments);
+    let context = this.get('element');
+    let data    = this.get('data');
+    let type    = this.get('type');
+    let options = this.get('options');
+		
+    let chart = new Chart(context, {
       type: type,
       data: data,
       options: options
     });
     this.set('chart', chart);
-    this.addObserver('data', this, this.updateChart);
-    this.addObserver('data.[]', this, this.updateChart);
-    this.addObserver('options', this, this.updateChart);
   },
 
-  willDestroyElement: function(){
+  willDestroyElement() {
+    this._super(...arguments);
     this.get('chart').destroy();
-    this.removeObserver('data', this, this.updateChart);
-    this.removeObserver('data.[]', this, this.updateChart);
-    this.removeObserver('options', this, this.updateChart);
   },
 
-  updateChart: function(){
-    var chart   = this.get('chart');
-    var data    = this.get('data');
-    var options = this.get('options');
-    chart.config.data = data;
-    chart.config.options = options;
-    chart.update();
+  didUpdateAttrs() {
+    this._super(...arguments);
+
+    let chart   = this.get('chart');
+    let data    = this.get('data');
+    let options = this.get('options');
+    let animate = this.get('animate');
+		
+		if (chart) {
+			chart.config.data = data;
+			chart.config.options = options;
+			if (animate) {
+				chart.update();
+			} else {
+				chart.update(0);
+			}
+		}
   }
 });

tests/unit/components/ember-chart-test.js

@@ -9,7 +9,7 @@ moduleForComponent('ember-chart', 'EmberChartComponent', {
 });
 
 // Test Data
-var ChartTestData = Ember.Object.extend({
+let ChartTestData = Ember.Object.extend({
   pieValue1: 300,
   pieValue2: 50,
   pieValue3: 100,
@@ -166,113 +166,118 @@ var ChartTestData = Ember.Object.extend({
   }),
 });
 
-var testData = ChartTestData.create();
+let testData = ChartTestData.create();
 // Test Data
 
 
 test('it can be a pie chart', function(assert) {
-  var component = this.subject({
+  let component = this.subject({
     type: 'pie',
     data: testData.get('pieData')
   });
 
   this.render();
-  var chart = component.get('chart');
-
+  let chart = component.get('chart');
   assert.equal(chart.config.type, 'pie');
   assert.equal(chart.data.datasets[0].data.length, 3);
 });
 
 test('it can be a line chart', function(assert) {
-  var component = this.subject({
+  let component = this.subject({
     type: 'line',
     data: testData.get('lineData')
   });
 
   this.render();
-  var chart = component.get('chart');
+  let chart = component.get('chart');
 
   assert.equal(chart.config.type, 'line');
   assert.equal(chart.data.datasets.length, 2);
 });
 
 test('it can be a bar chart', function(assert) {
-  var component = this.subject({
+  let component = this.subject({
     type: 'bar',
     data: testData.get('lineData')
   });
 
   this.render();
-  var chart = component.get('chart');
+  let chart = component.get('chart');
 
   assert.equal(chart.config.type, 'bar');
   assert.equal(chart.data.datasets.length, 2);
 });
 
 test('it can be a Radar chart', function(assert) {
-  var component = this.subject({
+  let component = this.subject({
     type: 'radar',
     data: testData.get('lineData')
   });
 
   this.render();
-  var chart = component.get('chart');
+  let chart = component.get('chart');
 
   assert.equal(chart.config.type, 'radar');
   assert.equal(chart.data.datasets.length, 2);
 });
 
 test('it can be a Polar Area chart', function(assert) {
-  var component = this.subject({
+  let component = this.subject({
     type: 'polarArea',
     data: testData.get('pieData')
   });
 
   this.render();
-  var chart = component.get('chart');
+  let chart = component.get('chart');
 
   assert.equal(chart.config.type, 'polarArea');
   assert.equal(chart.data.datasets[0].data.length, 3);
 });
 
 test('it should update pie charts dynamically', function(assert) {
-  var component = this.subject({
+  assert.expect(2);
+  let component = this.subject({
     type: 'pie',
     data: testData.get('pieData')
   });
 
   this.render();
-  var chart = component.get('chart');
+  let chart = component.get('chart');
   assert.equal(chart.data.datasets[0].data[0], 300);
 
   // Update Data
   testData.set('pieValue1', 600);
   component.set('data', testData.get('pieData'));
+	component.didUpdateAttrs();
 
   chart = component.get('chart');
   assert.equal(chart.data.datasets[0].data[0], 600);
 });
 
 test('it should update charts dynamically', function(assert) {
-  var component = this.subject({
+  assert.expect(3);
+  let component = this.subject({
     type: 'line',
     data: testData.get('lineData')
-  });
+	});
 
-  this.render();
-  var chart = component.get('chart');
+	this.render();
+  let chart = component.get('chart');
   assert.equal(chart.data.datasets[0].data[0], 65);
 
   // Update Data
   testData.set('lineValue1', 105);
   component.set('data', testData.get('lineData'));
-
+	component.didUpdateAttrs();
+	
   chart = component.get('chart');
   assert.equal(chart.data.datasets[0].data[0], 105);
 
+
   // Update Labels
   testData.set('labelValue1', 'December');
   component.set('data', testData.get('lineData'));
+	component.didUpdateAttrs();
 
   chart = component.get('chart');
   assert.equal(chart.data.labels[0], 'December');