diff --git a/README.md b/README.md index 0a9638a..978f395 100644 --- a/README.md +++ b/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,15 @@ 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. diff --git a/addon/components/high-charts.js b/addon/components/high-charts.js index 9e369d5..04efff0 100644 --- a/addon/components/high-charts.js +++ b/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,16 @@ 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); + }; + Ember.Logger.debug('mode', mode); + $element = this.$(); + chart = $element.highcharts.apply($element, options).highcharts(); + this.set('chart', chart); }, _destroyChart: (function() { diff --git a/blueprints/ember-highcharts/index.js b/blueprints/ember-highcharts/index.js index 866f227..dfe184a 100644 --- a/blueprints/ember-highcharts/index.js +++ b/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'); } }; diff --git a/bower.json b/bower.json index d2d7375..0eea85c 100644 --- a/bower.json +++ b/bower.json @@ -13,8 +13,5 @@ "ember-qunit": "0.1.8", "ember-qunit-notifications": "0.0.5", "qunit": "~1.17.1" - }, - "devDependencies": { - "highcharts-release": "~4.0.4" } } diff --git a/index.js b/index.js index 9761c9e..805602b 100644 --- a/index.js +++ b/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'); } }; diff --git a/package.json b/package.json index f196ce4..19b8e8a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ember-highcharts", - "version": "0.0.4", + "version": "0.0.5", "description": "A Highcharts component for ember cli", "directories": { "doc": "doc",