Merge pull request #54 from aomran/version3

Version 3

Author: aomran

.npmignore

@@ -1,14 +1,16 @@
-bower_components/
-tests/
-tmp/
-dist/
-
+/bower_components
+/config/ember-try.js
+/dist
+/tests
+/tmp
+**/.gitkeep
 .bowerrc
 .editorconfig
 .ember-cli
+.gitignore
+.jshintrc
+.watchmanconfig
 .travis.yml
-.npmignore
-**/.gitkeep
 bower.json
-Brocfile.js
-testem.json
+ember-cli-build.js
+testem.js

.travis.yml

@@ -11,10 +11,15 @@ cache:
 
 env:
   - EMBER_TRY_SCENARIO=default
+  - EMBER_TRY_SCENARIO=ember-1.13
   - EMBER_TRY_SCENARIO=ember-release
+  - EMBER_TRY_SCENARIO=ember-beta
+  - EMBER_TRY_SCENARIO=ember-canary
 
 matrix:
   fast_finish: true
+  allow_failures:
+    - env: EMBER_TRY_SCENARIO=ember-canary
 
 before_install:
   - export PATH=/usr/local/phantomjs-2.0.0/bin:$PATH

README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://travis-ci.org/aomran/ember-cli-chart.svg)](https://travis-ci.org/aomran/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 v1.13.15 and uses the `ember-try` addon to test against Ember v1.13.12 and the latest release.
+This Ember CLI addon is a simple wrapper for [ChartJS](http://www.chartjs.org/) (v2.1.1). This addon uses Ember-CLI v2.5.0.
 
 ### Installation
 
@@ -15,28 +15,21 @@ $ ember install ember-cli-chart
 In your handlebars template just do:
 
 ```
-{{ember-chart type=CHARTTYPE data=CHARTDATA options=CHARTOPTIONS width=CHARTWIDTH height=CHARTHEIGHT legend=LEGEND}}
+{{ember-chart type=CHARTTYPE data=CHARTDATA options=CHARTOPTIONS width=CHARTWIDTH height=CHARTHEIGHT}}
 ```
 
-* CHARTTYPE: String; one of the following -- `Line`, `Bar`, `Radar`, `PolarArea`, `Pie` or `Doughnut`.
+* CHARTTYPE: String; one of the following -- `line`, `bar`, `radar`, `polarArea`, `pie` or `doughnut`.
 * CHARTDATA: Array; refer to the ChartJS documentation
 * CHARTOPTIONS: Object; refer to the ChartJS documentation. This is optional.
-* CHARTWIDTH: Number; pixel width of the canvas element
-* CHARTHEIGHT: Number; pixel height of the canvas element
-* LEGEND: Boolean, true means add a legend. This is optional.
+* CHARTWIDTH: Number; pixel width of the canvas element. Only applies if the chart is NOT responsive.
+* CHARTHEIGHT: Number; pixel height of the canvas element. Only applies if the chart is NOT responsive.
 
 #### Example
 
 ```
 {{ember-chart type='Pie' data=model.chartData width=200 height=200}}
 ```
 
-#### Example with Legend
-
-```
-{{ember-chart type='Line' data=model.chartData width=200 height=200 legend=true}}
-```
-
 #### More Resources
 
 * [Screencast on creating bar charts with ember-cli-chart](https://www.emberscreencasts.com/posts/46-bar-charts-with-ember-cli-chart)

addon/chart-data-updater.js

@@ -1,82 +1,37 @@
 import Ember from 'ember';
-import ChartDataUpdater from 'ember-cli-chart/chart-data-updater';
 /* global Chart */
 
 export default Ember.Component.extend({
   tagName: 'canvas',
   attributeBindings: ['width', 'height'],
 
-  lineLegendTemp: "<ul class=\"<%=name.toLowerCase()%>-legend\" style=\"list-style-type: none;\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>;    width: 8px;height: 8px;display: inline-block;border-radius: 10px;border: solid;border-width: 2px;margin: 5px 5px 0 0;\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
-  pieLegendTemp: "<ul class=\"<%=name.toLowerCase()%>-legend\" style=\"list-style-type: none;\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>;  width: 8px;height: 8px;display: inline-block;border-radius: 10px;border: solid;border-width: 2px;margin: 5px 5px 0 0;\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
-
-
   didInsertElement: function(){
-    var context = this.get('element').getContext('2d');
-    var data = this.get('data');
-    var type = Ember.String.classify(this.get('type'));
-    var template;
-    switch (type) {
-      case "Line":
-        template = this.get('lineLegendTemp');
-        break;
-      case "Pie":
-        template = this.get('pieLegendTemp');
-        break;
-      case "Doughnut":
-        template = this.get('pieLegendTemp');
-        break;
-      default:
-        template = this.get('lineLegendTemp');
-        break;
-    }
-    var options = Ember.merge({
-    legendTemplate : template
-    }, this.get('options'));
-    var redraw = this.get('redraw');
-    var chart = new Chart(context)[type](data, options);
+    var context = this.get('element');
+    var data    = this.get('data');
+    var type    = this.get('type');
+    var options = this.get('options');
 
-    if (this.get('legend')) {
-      var legend = chart.generateLegend();
-      this.$().wrap("<div class='chart-parent'></div>");
-      this.$().parent().append(legend);
-    }
-    this.set('redraw', redraw);
+    var 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(){
-    if (this.get('legend')) {
-      this.$().parent().children('[class$=legend]').remove();
-    }
-
     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 redraw = ChartDataUpdater.create({
-      data: data,
-      chart: chart
-    }).updateByType();
-
-    if (this.get('redraw') || redraw) {
-      this.willDestroyElement();
-      this.didInsertElement();
-    } else {
-      chart.update();
-    }
-
-    if (this.get('legend')) {
-      this.$().parent().children('[class$=legend]').remove();
-      var legend = chart.generateLegend();
-      this.$().parent().append(legend);
-    }
+    var chart   = this.get('chart');
+    var data    = this.get('data');
+    chart.config.data = data;
+    chart.update();
   }
 });

addon/components/ember-chart.js

@@ -2,6 +2,6 @@ module.exports = {
   normalizeEntityName: function() {},
 
   afterInstall: function() {
-    return this.addBowerPackageToProject('chartjs', '1.0.2');
+    return this.addBowerPackageToProject('chartjs', '2.1.1');
   }
 };

blueprints/ember-cli-chart/index.js

@@ -1,17 +1,10 @@
 {
   "name": "ember-cli-chart",
   "dependencies": {
-    "ember": "1.13.12",
-    "ember-cli-shims": "0.0.6",
-    "ember-cli-test-loader": "0.2.1",
-    "ember-data": "1.13.15",
-    "ember-load-initializers": "0.1.7",
-    "ember-qunit": "0.4.16",
+    "ember": "~2.5.0",
+    "ember-cli-shims": "0.1.1",
+    "ember-cli-test-loader": "0.2.2",
     "ember-qunit-notifications": "0.1.0",
-    "ember-resolver": "~0.1.20",
-    "jquery": "1.11.3",
-    "loader.js": "ember-cli/loader.js#3.4.0",
-    "qunit": "~1.20.0",
-    "chartjs": "1.0.2"
+    "chartjs": "2.1.1"
   }
-}
+}

bower.json

@@ -3,15 +3,52 @@ module.exports = {
   scenarios: [
     {
       name: 'default',
-      dependencies: { }
+      bower: {
+        dependencies: { }
+      }
+    },
+    {
+      name: 'ember-1.13',
+      bower: {
+        dependencies: {
+          'ember': '~1.13.0'
+        },
+        resolutions: {
+          'ember': '~1.13.0'
+        }
+      }
     },
     {
       name: 'ember-release',
-      dependencies: {
-        'ember': 'components/ember#release'
-      },
-      resolutions: {
-        'ember': 'release'
+      bower: {
+        dependencies: {
+          'ember': 'components/ember#release'
+        },
+        resolutions: {
+          'ember': 'release'
+        }
+      }
+    },
+    {
+      name: 'ember-beta',
+      bower: {
+        dependencies: {
+          'ember': 'components/ember#beta'
+        },
+        resolutions: {
+          'ember': 'beta'
+        }
+      }
+    },
+    {
+      name: 'ember-canary',
+      bower: {
+        dependencies: {
+          'ember': 'components/ember#canary'
+        },
+        resolutions: {
+          'ember': 'canary'
+        }
       }
     }
   ]

config/ember-try.js

@@ -8,7 +8,7 @@ module.exports = function(defaults) {
   });
 
   /*
-    This build file specifes the options for the dummy test app of this
+    This build file specifies the options for the dummy test app of this
     addon, located in `/tests/dummy`
     This build file does *not* influence how the addon or the app using it
     behave. You most likely want to be modifying `./index.js` or app's build file

ember-cli-build.js

@@ -7,6 +7,6 @@ module.exports = {
   included: function included(app) {
     this._super.included(app);
 
-    app.import(app.bowerDirectory + '/chartjs/Chart.js');
+    app.import(app.bowerDirectory + '/chartjs/dist/Chart.js');
   }
 };