Merge pull request #9 from lolmaus/master

Added an ability to use Highstock and Highmaps

Brocfile.js

@@ -17,5 +17,6 @@ var app = new EmberAddon();
 // modules that you would like to import into your application
 // please specify an object with the list of modules as keys
 // along with the exports of each module as its value.
+app.import('bower_components/highstock-release/highstock.src.js');
 
 module.exports = app.toTree();

README.md

@@ -4,22 +4,47 @@ A [Highcharts](http://www.highcharts.com/) component for [Ember CLI](http://www.
 
 ## Installation
 
-* `ember install:addon ember-highcharts`
+1. Install the addon:
+
+        ember install:addon ember-highcharts
+        
+2. Depending on whether you want to use Highcharts, Highstock or Highmaps, install corresponding Bower package.
+
+  Do **one** of the following commands:
+
+        bower install --save highcharts-release
+        bower install --save highstock-release
+        bower install --save highmaps-release
+        
+3. In your `Brocfile.js`, tell Broccoli to import the package you have just installed.
+
+  Add **one** of the following lines:
+
+        app.import('bower_components/highcharts-release/highcharts.src.js');
+        app.import('bower_components/highstock-release/highstock.src.js');
+        app.import('bower_components/highmaps-release/highmaps.src.js');
+        
+  Depending on what Highcharts features you're gonna use, you might need to import additional files. Refer to Highcharts documentation.
 
 ## Usage
 
 In your template:
 
 ```handlebars
-{{high-charts content=chartData chartOptions=chartOptions}}
+{{high-charts mode=chartMode content=chartData chartOptions=chartOptions}}
 ```
 
-Then in a controller you can set the `chartData` and `chartOptions` values:
+Then in a controller you can set the `chartMode`, `chartData` and `chartOptions` values:
 
 ```javascript
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
+  chartMode: 'StockChart', // Available options: a falsy value, 'StockChart', 'Map'.
+                           // If `mode` is not provided or is a falsy value, the chart is initialized in Charts mode.
+                           // If `mode` is a string, it is passed to Highcharts as the first argument.
+                           // When Highcharts introduces a new mode, you will be able to use it here right away.
+
   chartOptions: {
     chart: {
         type: 'bar'
@@ -36,6 +61,7 @@ export default Ember.Controller.extend({
       }
     }
   },
+
   chartData: [
     {
       name: 'Jane',
@@ -67,6 +93,20 @@ file should provide a hook that returns the final configuration.
  }
 ```
 
+
 ## Credit
 
 This add-on is built based on the [gist](https://gist.github.com/poteto/cd2bb47e77bf87c94d33) and [medium](https://medium.com/delightful-ui-for-ember-apps/using-highcharts-js-in-an-ember-app-18a65d611644) by [@poteto](https://github.com/poteto)
+
+
+## Changelog
+
+### 0.0.5
+
+- Added an ability to use Highstock and Highmaps.
+- The addon no longer automatically imports the Highcharts Bower package, letting user import desired package manually.
+
+### 0.0.6
+
+- Updated tests.
+- Added Highstock demo to the dummy app.

addon/components/high-charts.js

@@ -4,6 +4,7 @@ import { setDefaultHighChartOptions } from '../utils/option-loader';
 export default Ember.Component.extend({
   classNames: ['highcharts-wrapper'],
   content: undefined,
+  mode:    undefined,
   chartOptions: undefined,
   chart: null,
 
@@ -50,9 +51,15 @@ export default Ember.Component.extend({
   },
 
   draw: function() {
-    var options;
-    options = this.get('buildOptions');
-    this.set('chart', this.$().highcharts(options).highcharts());
+    var options, mode, $element, chart;
+    options = [ this.get('buildOptions') ];
+    mode = this.get('mode');
+    if ( typeof mode === 'string' && !!mode) {
+      options.unshift(mode);
+    }
+    $element = this.$();
+    chart = $element.highcharts.apply($element, options).highcharts();
+    this.set('chart', chart);
   },
 
   _destroyChart: (function() {

blueprints/ember-highcharts/index.js

@@ -2,6 +2,7 @@ module.exports = {
   normalizeEntityName: function() {},
 
   afterInstall: function() {
-    return this.addBowerPackageToProject('highcharts-release#~4.0.4');
+    // We expect the user to add the package he needs
+    //return this.addBowerPackageToProject('highcharts-release#~4.0.4');
   }
 };

bower.json

@@ -12,9 +12,7 @@
     "ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2",
     "ember-qunit": "0.1.8",
     "ember-qunit-notifications": "0.0.5",
-    "qunit": "~1.17.1"
-  },
-  "devDependencies": {
-    "highcharts-release": "~4.0.4"
+    "qunit": "~1.17.1",
+    "highstock-release": "~2.1.3"
   }
 }

index.js

@@ -7,6 +7,7 @@ module.exports = {
   included: function(app) {
     this._super.included(app);
 
-    app.import(app.bowerDirectory + '/highcharts-release/highcharts.js');
+    // We expect the user to add the package he needs
+    //app.import(app.bowerDirectory + '/highcharts-release/highcharts.js');
   }
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-highcharts",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "A Highcharts component for ember cli",
   "directories": {
     "doc": "doc",

tests/dummy/app/controllers/application.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import stockData from '../data/stock';
 
 export default Ember.Controller.extend({
   chartOptions: {
@@ -23,5 +24,19 @@ export default Ember.Controller.extend({
   }, {
     name: 'John',
     data: [5, 7, 3]
+  }],
+
+  stockChartOptions: {
+    rangeSelector: {
+      selected: 1
+    },
+    title: {
+      text: 'Highstock: AAPL Stock Price'
+    }
+  },
+
+  stockChartData: [{
+    name: 'AAPL',
+    data: stockData
   }]
 });