Skip to content

Commit

Permalink
feat(package): update to ng2 rc.1 and chart.js 2.*
Browse files Browse the repository at this point in the history
BREAKING CHANGES:
- series property removed
- datasets property added (please prefer it over data property)
- all chart type names lower cased (because of chart.js 2 changes)
  • Loading branch information
valorkin committed May 17, 2016
1 parent 5862282 commit 73e3ffa
Show file tree
Hide file tree
Showing 29 changed files with 465 additions and 447 deletions.
9 changes: 7 additions & 2 deletions .config/bundle-system.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,20 @@ function getSystemJsBundleConfig(cb) {
},
map: {
typescript: path.resolve('node_modules/typescript/lib/typescript.js'),
angular2: path.resolve('node_modules/angular2'),
'@angular/core': path.resolve('node_modules/@angular/core/index.js'),
'@angular/common': path.resolve('node_modules/@angular/common/index.js'),
'@angular/compiler': path.resolve('node_modules/@angular/compiler/index.js'),
'@angular/platform-browser': path.resolve('node_modules/@angular/platform-browser/index.js'),
'@angular/platform-browser-dynamic': path.resolve('node_modules/@angular/platform-browser-dynamic/'),
rxjs: path.resolve('node_modules/rxjs')
},
paths: {
'*': '*.js'
}
};

config.meta = ['angular2', 'rxjs'].reduce((memo, currentValue) => {
config.meta = ['@angular/common','@angular/compiler','@angular/core',
'@angular/platform-browser','@angular/platform-browser-dynamic', 'rxjs'].reduce((memo, currentValue) => {
memo[path.resolve(`node_modules/${currentValue}/*`)] = {build: false};
return memo;
}, {});
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ npm-debug.log
.idea

# ignore build and dist for now
/build
/bundles
/demo-build
/dist
Expand Down
3 changes: 3 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ script:
- npm run flow.install:typings
- npm test

after_success:
- ./node_modules/.bin/codecov

addons:
# sauce labs tunel connector (read more https://docs.travis-ci.com/user/sauce-connect/ )
sauce_connect: true
Expand Down
60 changes: 38 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,43 +14,53 @@ Follow me at [twitter](https://twitter.com/valorkin) to be notified about new re

- - -

## Quick start
### Installation

1. A recommended way to install ***ng2-charts*** is through [npm](https://www.npmjs.com/search?q=ng2-charts) package manager using the following command:
1. You can install ***ng2-charts*** using npm

`npm i ng2-charts --save`


2. A way to install Chart.js component is through [npm](http://bower.io/search/?q=chartjs) package manager using the following command:

`bower install Chart.js --save`
```bash
npm install ng2-charts --save
```
2. You need to install and include `Chart.js` library in application via `html` or `webpack bundler` (more options can be found in official `chart.js` [documentation](http://www.chartjs.org/docs/#getting-started))

Alternatively, you can [download it in a ZIP file](https://github.com/nnnick/Chart.js/archive/master.zip).
```bash
npm install chart.js --save
```

After Chart.js component is downloaded, embed the code into your project.
**Important**: Embedding `Chart.js` in application is mandatory!

```html
<script src="bower_components/Chart.js/Chart.min.js"></script>
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
```
### Usage & Demo
Demo and API details of ***ng2-charts*** can be found here:
[demo](http://valor-software.github.io/ng2-charts/) and [source code](https://github.com/valor-software/ng2-charts/tree/master/demo).

3. Or you can link `charts.js` at cdn
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
```
### System.js

System.js bundles can be found in `bundles` directory of npm package or at [npm cdn](https://npmcdn.com/ng2-charts/bundles/)

4. More information regarding using of ***ng2-charts*** is located in
[demo](http://valor-software.github.io/ng2-charts/) and [demo sources](https://github.com/valor-software/ng2-charts/tree/master/demo).

## API

### Import
```typescript
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';
```

### Chart types
There are one directive for all chart types: `base-chart`, and there are 6 types of charts: , `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`.

### Properties

- `data` (`Array<any>`) - set of points of the chart, it should be Array&lt;Array&lt;number&gt;&gt; only for line, bar and radar, otherwise Array&lt;number&gt;
- `labels` (`?Array<any>`) - x axis labels. It's necessary for charts: line, bar and radar. And just labels (on hover) for charts: polar area, pie and doughnut
- `chartType` (`?string`) - indicates the type of charts, it can be: 'Line', 'Bar', 'Radar', 'Pie', 'PolarArea', 'Doughnut'
**Note**: For more information about possible options please refer to original [chart.js](http://www.chartjs.org/docs) documentation

- `data` (`Array<number[]> | number[]`) - set of points of the chart, it should be `Array<number[]>` only for `line`, `bar` and `radar`, otherwise `number[]`;
- `datasets` (`Array<{data: Array<number[]> | number[], label: string}>`) - `data` see about, the `label` for the dataset which appears in the legend and tooltips
- `labels` (`?Array<any>`) - x axis labels. It's necessary for charts: `line`, `bar` and `radar`. And just labels (on hover) for charts: `polarArea`, `pie` and `doughnut`
- `chartType` (`?string`) - indicates the type of charts, it can be: `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`
- `options` (`?any`) - chart options (as from [Chart.js documentation](http://www.chartjs.org/docs/))
- `series` (`?Array<any>`) - name points on the chart, work for line, bar and radar
- `colours` (`?Array<any>`) - data colours, will use default colours if not specified ([see readme for components](https://github.com/valor-software/ng2-charts/blob/master/components/charts/readme.md))
- `colours` (`?Array<any>`) - data colours, will use default and|or random colours if not specified (see below)
- `legend`: (`?boolean=false`) - if true show legend below the chart, otherwise not be shown

### Events
Expand All @@ -59,6 +69,12 @@ Follow me at [twitter](https://twitter.com/valorkin) to be notified about new re
- `chartHover`: fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels


### Colours

There are a set several default colours. Colours can be replaced using the `colours` attribute. If there is more data than colours, colours are generated randomly.



## Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:
Expand Down
Loading

0 comments on commit 73e3ffa

Please sign in to comment.