ember-highcharts
Advanced tools
Comparing version 0.4.3 to 0.4.4
@@ -47,7 +47,2 @@ import Ember from 'ember'; | ||
let noData = chart.get('noData'); | ||
if (noData != null) { | ||
noData.remove(); | ||
} | ||
const isStockChart = mode === 'StockChart'; | ||
@@ -54,0 +49,0 @@ |
# Changelog | ||
## 0.4.4 | ||
- Add test for 'noData' use case and remove unused code | ||
- Add highmaps demo | ||
- Cleanup documentation | ||
- Add chart drilldown demo | ||
- Add solid gauge demo | ||
- Add sales funnel demo | ||
- Add heat map demo | ||
- Add waterfall demo | ||
- Standardize components in dummp app | ||
- Update to ember-cli 2.5.1 | ||
- Fix import boost module before hightchart-3d | ||
- Add scatter chart demo | ||
## 0.4.3 | ||
@@ -4,0 +19,0 @@ |
11
index.js
@@ -18,3 +18,3 @@ /* jshint node: true */ | ||
if (options.includeHighCharts || options.includeHighCharts3D) { | ||
if (options.includeHighCharts) { | ||
app.import(path.join(highchartsPath, 'highcharts.src.js')); | ||
@@ -36,2 +36,11 @@ } | ||
if (options.includeHighCharts3D) { | ||
// boost module need to be imported before highcharts-3d | ||
if (options.includeModules) { | ||
var boostIndex = options.includeModules.indexOf('boost'); | ||
if (boostIndex !== -1) { | ||
app.import(path.join(highchartsPath, 'modules', 'boost.src.js')); | ||
options.includeModules.splice(boostIndex, 1); | ||
} | ||
} | ||
app.import(path.join(highchartsPath, 'highcharts-3d.src.js')); | ||
@@ -38,0 +47,0 @@ } |
{ | ||
"name": "ember-highcharts", | ||
"version": "0.4.3", | ||
"version": "0.4.4", | ||
"description": "A Highcharts, HighStock and HighMaps component for ember cli", | ||
@@ -23,14 +23,15 @@ "directories": { | ||
"broccoli-merge-trees": "^1.1.1", | ||
"ember-cli-babel": "^5.1.5", | ||
"ember-cli-babel": "^5.1.6", | ||
"ember-getowner-polyfill": "1.0.1" | ||
}, | ||
"devDependencies": { | ||
"broccoli-asset-rev": "^2.2.0", | ||
"ember-cli": "2.4.2", | ||
"broccoli-asset-rev": "^2.4.2", | ||
"ember-cli": "2.5.1", | ||
"ember-cli-app-version": "^1.0.0", | ||
"ember-cli-dependency-checker": "^1.2.0", | ||
"ember-cli-htmlbars": "^1.0.1", | ||
"ember-cli-htmlbars": "^1.0.3", | ||
"ember-cli-htmlbars-inline-precompile": "^0.3.1", | ||
"ember-cli-inject-live-reload": "^1.3.1", | ||
"ember-cli-qunit": "^1.2.1", | ||
"ember-cli-inject-live-reload": "^1.4.0", | ||
"ember-cli-jshint": "^1.0.0", | ||
"ember-cli-qunit": "^1.4.0", | ||
"ember-cli-release": "0.2.8", | ||
@@ -41,6 +42,6 @@ "ember-cli-sri": "^2.1.0", | ||
"ember-disable-proxy-controllers": "^1.0.1", | ||
"ember-export-application-global": "^1.0.4", | ||
"ember-export-application-global": "^1.0.5", | ||
"ember-load-initializers": "^0.5.1", | ||
"ember-resolver": "^2.0.3", | ||
"ember-try": "~0.1.2", | ||
"ember-try": "^0.2.2", | ||
"highcharts": "^4.2.4", | ||
@@ -47,0 +48,0 @@ "loader.js": "^4.0.1" |
201
README.md
@@ -6,6 +6,16 @@ [![Build Status](https://travis-ci.org/ahmadsoe/ember-highcharts.svg?branch=master)](https://travis-ci.org/ahmadsoe/ember-highcharts) | ||
# Ember-highcharts | ||
A [Highcharts](http://www.highcharts.com/products/highcharts), [Highstock](http://www.highcharts.com/products/highstock) and [Highmaps](http://www.highcharts.com/products/highmaps) component for [Ember CLI](http://www.ember-cli.com/). | ||
A [Highcharts](http://www.highcharts.com/products/highcharts), [Highstock](http://www.highcharts.com/products/highstock), | ||
and [Highmaps](http://www.highcharts.com/products/highmaps) component for [Ember CLI](http://www.ember-cli.com/). | ||
## Requirements | ||
* Ember CLI | ||
* Ember >= 1.13.0 | ||
* If you need support for Ember < 1.13.0, use ember-highcharts v0.1.3 | ||
## Installation | ||
@@ -17,34 +27,42 @@ | ||
This addon will use Highcharts by default, if you want to use Highstocks, Highmaps, Highcharts-more, Highcharts-3D and/or additional modules, add this options to your `ember-cli-build.js`: | ||
```javascript | ||
var app = new EmberApp({ | ||
--- | ||
emberHighCharts: { | ||
includeHighCharts: false, | ||
includeHighStock: true, | ||
includeHighMaps: true, | ||
includeHighChartsMore: true, | ||
includeHighCharts3D: true, | ||
includeModules: ['broken-axis', 'heatmap', ... ] // available modules: broken-axis, canvas-tools, data, drilldowm, exporting, funnel, heatmap, no-data-to-display, solid-gauge, treemap | ||
} | ||
--- | ||
}); | ||
``` | ||
## Requirements | ||
* Ember >= 1.13.0 | ||
* If you need support for < Ember 1.13.0, use ember-highcharts v0.1.3 | ||
## Usage | ||
In your template: | ||
This component takes in four arguments: | ||
```handlebars | ||
{{high-charts mode=chartMode content=chartData chartOptions=chartOptions theme=theme}} | ||
{{high-charts mode=mode chartOptions=chartOptions content=content theme=theme}} | ||
``` | ||
### mode | ||
Then in a controller you can set the `chartMode`, `chartData`, `chartOptions` and `theme` values: | ||
The `mode` argument is optional and it determines whether to use Highcharts, Highstock, or Highmaps. | ||
The possible values are: | ||
```javascript | ||
| Value | Description | | ||
| -------------- | --------------------------- | | ||
| falsy value | defaults to Highcharts mode | | ||
| "StockChart" | uses Highstock mode | | ||
| "Map" | uses Highmaps mode | | ||
### chartOptions | ||
The `chartOptions` argument is a generic object for setting different options with Highcharts/Highstock/Highmaps. | ||
Use this option to set things like the chart title and axis settings. | ||
### content | ||
The `content` argument matches up with the `series` option in the Highcharts/Highstock/Highmaps API. | ||
Use this option to set the series data for your chart. | ||
### theme | ||
The `theme` argument is optional and it allows you to pass in a | ||
[Highcharts theme](http://www.highcharts.com/docs/chart-design-and-style/themes). | ||
### Example Bar Chart | ||
Here's an example of how to create a basic bar chart: | ||
```js | ||
// controller | ||
import Ember from 'ember'; | ||
@@ -54,10 +72,6 @@ import defaultTheme from '../themes/default-theme'; | ||
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' | ||
type: 'bar' | ||
}, | ||
@@ -72,3 +86,3 @@ title: { | ||
title: { | ||
text: 'Fruit eaten' | ||
text: 'Fruit eaten' | ||
} | ||
@@ -78,35 +92,103 @@ } | ||
chartData: [ | ||
{ | ||
name: 'Jane', | ||
data: [1, 0, 4] | ||
}, { | ||
name: 'John', | ||
data: [5, 7, 3] | ||
} | ||
], | ||
chartData: [{ | ||
name: 'Jane', | ||
data: [1, 0, 4] | ||
}, { | ||
name: 'John', | ||
data: [5, 7, 3] | ||
}], | ||
theme: defaultTheme | ||
}); | ||
``` | ||
### Configuring Default Styles | ||
```handlebars | ||
{{high-charts chartOptions=chartOptions content=chartData theme=theme}} | ||
``` | ||
Ember-highcharts provides its own set of default configurations in | ||
`addon/utils/option-loader.js`. At runtime you can optionally configure custom | ||
styles by providing a `app/highcharts-configs/application.js` file. This | ||
file should provide a hook that returns the final configuration. | ||
Check out more chart examples in the [tests/dummy app](tests/dummy/app) in this repo. | ||
```javascript | ||
// app/highcharts-configs/application.js | ||
export default function(defaultOptions) { | ||
defaultOptions.credits.href = 'http://www.my-great-chart.com'; | ||
defaultOptions.credits.text = 'great charts made cheap'; | ||
defaultOptions.credits.enabled = true; | ||
## Configuration | ||
return defaultOptions; | ||
} | ||
This addon will load Highcharts by default. Highcharts has many optional features like Highstock and Highmaps. | ||
You can add the `emberHighCharts` option to your `ember-cli-build.js` file to load these optional features: | ||
```js | ||
// all possible options | ||
var app = new EmberApp({ | ||
emberHighCharts: { | ||
includeHighCharts: false, | ||
includeHighStock: true, | ||
includeHighMaps: false, | ||
includeHighChartsMore: true, | ||
includeHighCharts3D: true, | ||
includeModules: ['map', 'broken-axis', 'heatmap', ... ] | ||
/* available modules: | ||
boost, broken-axis, canvas-tools, data, drilldown, exporting, funnel, | ||
heatmap, map, no-data-to-display, offline-exporting, solid-gauge, treemap | ||
*/ | ||
} | ||
}); | ||
``` | ||
### Highstock | ||
Highcharts is already included in Highstock, so it is not necessary to load both. | ||
Using the following configuration to load Highstock: | ||
```js | ||
var app = new EmberApp({ | ||
emberHighCharts: { | ||
includeHighCharts: false, | ||
includeHighStock: true | ||
} | ||
}); | ||
``` | ||
### Highmaps | ||
Highcharts is not included in Highmaps. If you only need to use Highmaps use the following configuration: | ||
```js | ||
var app = new EmberApp({ | ||
emberHighCharts: { | ||
includeHighCharts: false, | ||
includeHighMaps: true | ||
} | ||
}); | ||
``` | ||
If you need to use Highmaps and Highcharts then use the following configuration: | ||
```js | ||
var app = new EmberApp({ | ||
emberHighCharts: { | ||
includeHighCharts: true, | ||
includeModules: ['map'] | ||
} | ||
}); | ||
``` | ||
### Global Highcharts Config Options | ||
Ember-highcharts provides its own set of default configurations in `addon/utils/option-loader.js`. | ||
At runtime you can optionally configure custom styles by providing a `app/highcharts-configs/application.js` file. | ||
This file should provide a hook that returns the final configuration. | ||
```js | ||
// app/highcharts-configs/application.js | ||
export default function(defaultOptions) { | ||
defaultOptions.credits.href = 'http://www.my-great-chart.com'; | ||
defaultOptions.credits.text = 'great charts made cheap'; | ||
defaultOptions.credits.enabled = true; | ||
return defaultOptions; | ||
} | ||
``` | ||
### Generating Chart Components | ||
@@ -127,3 +209,3 @@ | ||
```javascript | ||
```js | ||
// components/dynamic-high-charts.js | ||
@@ -151,12 +233,17 @@ import Ember from 'ember'; | ||
## Contributing | ||
see [contributing guidelines](CONTRIBUTING.md). | ||
See [contributing guidelines](CONTRIBUTING.md). | ||
## Changelog | ||
see [CHANGELOG.md](CHANGELOG.md). | ||
See [CHANGELOG.md](CHANGELOG.md). | ||
## 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) | ||
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) |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
1117880
3837
243
20
7
Updatedember-cli-babel@^5.1.6