diff --git a/LICENSE b/LICENSE index d216c3c..de682fe 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) [year] [fullname] +Copyright (c) 2015 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file +SOFTWARE. diff --git a/README.md b/README.md index dd6f458..a16cb01 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,12 @@ [![Build Status](https://travis-ci.org/aomra015/ember-cli-chart.svg)](https://travis-ci.org/aomra015/ember-cli-chart) -This is an Ember CLI addon for adding a [ChartJS](http://www.chartjs.org/) component. This addon is tested on Ember-CLI v0.2.1 and uses the `ember-try` addon to test against multiple Ember versions. +This is an Ember CLI addon for adding a [ChartJS](http://www.chartjs.org/) component. This addon is tested on Ember-CLI v0.2.3 and uses the `ember-try` addon to test against multiple Ember versions. ### Installation ``` -$ ember install:addon ember-cli-chart +$ ember install ember-cli-chart ``` ### Usage diff --git a/addon/chart-data-updater.js b/addon/chart-data-updater.js index 76d204d..fcccca9 100644 --- a/addon/chart-data-updater.js +++ b/addon/chart-data-updater.js @@ -1,56 +1,60 @@ import Ember from 'ember'; export default Ember.Object.extend({ - + redraw: false, updateByType: function () { var data = this.get('data'); if (data.datasets) {return this.updateLinearCharts();} if (Array.isArray(data)) {return this.updatePieCharts();} + return this.get('redraw'); }, updateLinearCharts: function () { var datasets = this.get('data').datasets; var chart = this.get('chart'); + var self = this; datasets.forEach(function(dataset, i) { - dataset.data.forEach(function(item, j) { - item = item || 0; - if (typeof chart.datasets[i] === 'undefined') { - chart.segments[j].value = item; - } else { - var dataSet = chart.datasets[i]; - - if(typeof dataSet.bars !== 'undefined') { - chart.datasets[i].bars[j].value = item; + var chartDataset = chart.datasets[i]; + + try { + dataset.data.forEach(function(item, j) { + item = item || 0; + if(typeof chartDataset.bars !== 'undefined') { + chartDataset.bars[j].value = item; } else { - chart.datasets[i].points[j].value = item; + chartDataset.points[j].value = item; } - } - }); + }); + } catch (e) { + if (e instanceof TypeError) { self.set('redraw', true); } + else { console.error(e); } + } }); - return true; }, updatePieCharts: function () { - var data = this.get('data'); + var data = Ember.A(this.get('data')); var chart = this.get('chart'); - var needUpdate = false; - - data.forEach(function(segment, i) { - if (typeof chart.segments[i] !== 'undefined') { - segment.value = segment.value || 0; - if (chart.segments[i].value !== segment.value) { - chart.segments[i].value = segment.value; - needUpdate = true; - } + var chartSegments = Ember.A(chart.segments); + + chart.segments.forEach(function(segment, i) { + var updatedSegment = data.findBy('label', segment.label); + if (updatedSegment) { + // Same segment exists in new data + chart.segments[i].value = updatedSegment.value || 0; + } else { + // Segment does not exist anymore in new data + chart.removeData(i); } - else { - // there are now more segments than the chart knows about; add them - chart.addData(segment, i, true); - needUpdate = true; + }); + + data.forEach(function(segment) { + var currentSegment = chartSegments.findBy('label', segment.label); + if (!currentSegment) { + chart.addData(segment); } }); - return needUpdate; } }); diff --git a/addon/components/ember-chart.js b/addon/components/ember-chart.js index ae1719f..2d95d15 100644 --- a/addon/components/ember-chart.js +++ b/addon/components/ember-chart.js @@ -6,10 +6,10 @@ export default Ember.Component.extend({ tagName: 'canvas', attributeBindings: ['width', 'height'], - renderChart: function(){ + didInsertElement: function(){ var context = this.get('element').getContext('2d'); var data = this.get('data'); - var type = this.get('type').classify(); + var type = Ember.String.classify(this.get('type')); var options = Ember.merge({}, this.get('options')); var chart = new Chart(context)[type](data, options); @@ -20,24 +20,29 @@ export default Ember.Component.extend({ } this.set('chart', chart); - }.on('didInsertElement'), + }, - destroyChart: function(){ + willDestroyElement: function(){ if (this.get('legend')) { this.$().parent().children('[class$=legend]').remove(); } this.get('chart').destroy(); - }.on('willDestroyElement'), + }, - updateChart: function(){ + updateChart: Ember.observer('data', 'data.[]', 'options', function(){ var chart = this.get('chart'); var data = this.get('data'); - var needUpdate = ChartDataUpdater.create({ + var redraw = ChartDataUpdater.create({ data: data, chart: chart }).updateByType(); - if (needUpdate) { chart.update(); } - }.observes('data', 'data.[]', 'options') + if (redraw) { + this.willDestroyElement(); + this.didInsertElement(); + } else { + chart.update(); + } + }) }); diff --git a/bower.json b/bower.json index d8d5c57..764de59 100644 --- a/bower.json +++ b/bower.json @@ -2,14 +2,14 @@ "name": "ember-cli-chart", "dependencies": { "jquery": "^1.11.1", - "ember": "1.10.0", - "ember-data": "1.0.0-beta.16", - "ember-resolver": "~0.1.14", + "ember": "1.11.1", + "ember-data": "1.0.0-beta.16.1", + "ember-resolver": "~0.1.15", "loader.js": "ember-cli/loader.js#3.2.0", "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3", "ember-cli-test-loader": "ember-cli-test-loader#0.1.3", - "ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2", - "ember-qunit": "0.2.8", + "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4", + "ember-qunit": "0.3.1", "ember-qunit-notifications": "0.0.7", "qunit": "~1.17.1", "chartjs": "1.0.1" diff --git a/package.json b/package.json index 0833c63..2a08b29 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ember-cli-chart", - "version": "2.0.0", + "version": "2.0.1", "description": "Ember component for ChartJS", "directories": { "doc": "doc", @@ -31,21 +31,22 @@ "homepage": "https://github.com/aomra015/ember-cli-chart", "devDependencies": { "broccoli-asset-rev": "^2.0.2", - "ember-cli": "^0.2.1", + "ember-cli": "0.2.3", "ember-cli-app-version": "0.3.3", "ember-cli-content-security-policy": "0.4.0", "ember-cli-dependency-checker": "0.0.8", "ember-cli-htmlbars": "0.7.4", "ember-cli-ic-ajax": "0.1.1", "ember-cli-inject-live-reload": "^1.3.0", - "ember-cli-qunit": "0.3.9", + "ember-cli-qunit": "0.3.10", "ember-cli-uglify": "1.0.1", - "ember-data": "1.0.0-beta.16", + "ember-data": "1.0.0-beta.16.1", "ember-export-application-global": "^1.0.2", - "ember-try": "0.0.1" + "ember-disable-prototype-extensions": "^1.0.0", + "ember-try": "0.0.4" }, "dependencies": { - "ember-cli-babel": "^4.0.0" + "ember-cli-babel": "^5.0.0" }, "ember-addon": { "configPath": "tests/dummy/config" diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js index 832dc33..7ee983f 100644 --- a/tests/dummy/app/controllers/application.js +++ b/tests/dummy/app/controllers/application.js @@ -4,7 +4,7 @@ export default Ember.Controller.extend({ pieValue1: 300, pieValue2: 50, pieValue3: 100, - pieData: function(){ + pieData: Ember.computed('pieValue1', 'pieValue2', 'pieValue3', function(){ return [ { value: parseInt(this.get('pieValue1')), @@ -25,10 +25,10 @@ export default Ember.Controller.extend({ label: "Yellow" } ]; - }.property('pieValue1', 'pieValue2', 'pieValue3'), - lineValue1: 65, + }), + lineValue1: 65, lineValue2: 59, - lineData: function(){ + lineData: Ember.computed('lineValue1', 'lineValue2', function(){ return { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ @@ -54,8 +54,8 @@ export default Ember.Controller.extend({ } ] }; - }.property('lineValue1', 'lineValue2'), - barData: { + }), + barData: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { @@ -75,8 +75,8 @@ export default Ember.Controller.extend({ data: [28, 48, 40, 19, 86, 27, 90] } ] -}, - radarData: { + }, + radarData: { labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], datasets: [ { @@ -100,8 +100,8 @@ export default Ember.Controller.extend({ data: [28, 48, 40, 19, 96, 27, 100] } ] -}, - polarAreaData: [ + }, + polarAreaData: [ { value: 300, color:"#F7464A", @@ -133,5 +133,5 @@ export default Ember.Controller.extend({ label: "Dark Grey" } -] + ] }); diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index cef554b..dce5994 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -5,7 +5,5 @@ var Router = Ember.Router.extend({ location: config.locationType }); -Router.map(function() { +export default Router.map(function() { }); - -export default Router; diff --git a/tests/unit/components/ember-chart-test.js b/tests/unit/components/ember-chart-test.js index 9a40ac6..79cdd66 100644 --- a/tests/unit/components/ember-chart-test.js +++ b/tests/unit/components/ember-chart-test.js @@ -11,7 +11,7 @@ var ChartTestData = Ember.Object.extend({ pieValue1: 300, pieValue2: 50, pieValue3: 100, - pieData: function(){ + pieData: Ember.computed('pieValue1', 'pieValue2', 'pieValue3', function(){ return [ { value: parseInt(this.get('pieValue1')), @@ -32,40 +32,34 @@ var ChartTestData = Ember.Object.extend({ label: "Yellow" } ]; - }.property('pieValue1', 'pieValue2', 'pieValue3'), + }), - pieData2: function(){ + pieData2: Ember.computed(function(){ return [ { - value: 300, + value: 20, + color: "#000000", + highlight: "#000000", + label: "Black" + }, + { + value: 310, color:"#F7464A", highlight: "#FF5A5E", label: "Red" }, { - value: 50, - color: "#46BFBD", - highlight: "#5AD3D1", - label: "Green" - }, - { - value: 100, + value: 101, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" - }, - { - value: 20, - color: "#000000", - highlight: "#000000", - label: "Black" } ]; - }.property(), + }), lineValue1: 65, lineValue2: 59, - lineData: function(){ + lineData: Ember.computed('lineValue1', 'lineValue2', function(){ return { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ @@ -91,7 +85,7 @@ var ChartTestData = Ember.Object.extend({ } ] }; - }.property('lineValue1', 'lineValue2') + }) }); var testData = ChartTestData.create(); @@ -206,11 +200,15 @@ test('it should update chart if data structure changes', function(assert) { }); this.render(); - var chart = component.get('chart'); // Update Data component.set('data', testData.get('pieData2')); - chart = component.get('chart'); - assert.equal(chart.segments[3].value, 20); + var chart = component.get('chart'); + var segments = Ember.A(chart.segments); + + assert.equal(segments.findBy('label', 'Red').value, 310); + assert.equal(segments.findBy('label', 'Yellow').value, 101); + assert.equal(segments.findBy('label', 'Black').value, 20); + assert.equal(segments.length, 3); });