Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ember-highcharts

Package Overview
Dependencies
Maintainers
1
Versions
51
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-highcharts - npm Package Compare versions

Comparing version 0.4.3 to 0.4.4

gh-pages/assets/dummy-18ab02d95b7bf246f2e338dfef16ce5c.js

5

addon/components/high-charts.js

@@ -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"

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc