forked from valor-software/ng2-charts
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(charts): Tested with latest angular cli 7.3.4
- Loading branch information
Showing
98 changed files
with
10,099 additions
and
17,453 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,13 @@ | ||
# http://editorconfig.org | ||
|
||
# Editor configuration, see https://editorconfig.org | ||
root = true | ||
|
||
[*] | ||
charset = utf-8 | ||
indent_style = space | ||
indent_size = 2 | ||
end_of_line = lf | ||
insert_final_newline = true | ||
trim_trailing_whitespace = true | ||
trim_trailing_whitespace = true | ||
|
||
[*.md] | ||
max_line_length = off | ||
trim_trailing_whitespace = false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,47 @@ | ||
# Dependency directory | ||
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git | ||
# See http://help.github.com/ignore-files/ for more about ignoring files. | ||
|
||
# compiled output | ||
/dist | ||
/tmp | ||
/out-tsc | ||
# Only exists if Bazel was run | ||
/bazel-out | ||
|
||
# dependencies | ||
/node_modules | ||
/bower_components | ||
|
||
# profiling files | ||
chrome-profiler-events.json | ||
speed-measure-plugin.json | ||
|
||
# IDEs and editors | ||
/.idea | ||
/.vscode | ||
.project | ||
.classpath | ||
.c9/ | ||
*.launch | ||
.settings/ | ||
*.sublime-workspace | ||
|
||
# IDE - VSCode | ||
.vscode/* | ||
!.vscode/settings.json | ||
!.vscode/tasks.json | ||
!.vscode/launch.json | ||
!.vscode/extensions.json | ||
.history/* | ||
|
||
# misc | ||
/.sass-cache | ||
/connect.lock | ||
/coverage | ||
/libpeerconnection.log | ||
npm-debug.log | ||
yarn-error.log | ||
testem.log | ||
/typings | ||
|
||
# ignore build and dist for now | ||
/dist | ||
/temp | ||
/demo/dist | ||
/demo/temp | ||
/logs | ||
|
||
#System Files | ||
# System Files | ||
.DS_Store | ||
Thumbs.db | ||
|
||
|
||
/demo/e2e/*.js | ||
/demo/e2e/*.map | ||
src/**/*.js | ||
src/**/*.map | ||
scripts/**/*.js | ||
scripts/**/*.map | ||
/temp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,95 +1,27 @@ | ||
# ng2-charts [](http://badge.fury.io/js/ng2-charts) [](https://npmjs.org/ng2-charts) [](https://ngx-slack.herokuapp.com) | ||
Beautiful charts for Angular2 based on Chart.js | ||
# Ng2ChartsDemo | ||
|
||
<!-- [](https://saucelabs.com/u/valorkin) --> | ||
[](https://npmjs.org/ng2-charts) | ||
[](https://npmjs.org/ng2-charts) | ||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.3. | ||
|
||
## Development server | ||
|
||
# Usage & Demo | ||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. | ||
|
||
Sample in below website uses [email protected] | ||
## Code scaffolding | ||
|
||
[http://valor-software.github.io/ng2-charts/](http://valor-software.github.io/ng2-charts/) | ||
[http://plnkr.co/edit/7fGsiuRjcF0M0Ffeoml2?p=preview](http://plnkr.co/edit/7fGsiuRjcF0M0Ffeoml2?p=preview) | ||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. | ||
|
||
## Build | ||
|
||
- - - | ||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. | ||
|
||
### Installation | ||
## Running unit tests | ||
|
||
1. You can install ***ng2-charts*** using npm | ||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). | ||
|
||
```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)) | ||
## Running end-to-end tests | ||
|
||
```bash | ||
npm install chart.js --save | ||
``` | ||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). | ||
|
||
**Important**: Embedding `Chart.js` in application is mandatory! | ||
## Further help | ||
|
||
```html | ||
<script src="node_modules/chart.js/src/chart.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). | ||
|
||
### System.js | ||
|
||
System.js bundles can be found in `bundles` directory of npm package or at [npm cdn](https://npmcdn.com/ng2-charts/bundles/) | ||
|
||
|
||
## API | ||
|
||
### Import | ||
```typescript | ||
import { ChartsModule } from 'ng2-charts/ng2-charts'; | ||
|
||
// In your App's module: | ||
imports: [ | ||
ChartsModule | ||
] | ||
``` | ||
|
||
### 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 | ||
|
||
**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/)) | ||
- `colors` (`?Array<any>`) - data colors, will use default and|or random colors if not specified (see below) | ||
- `legend`: (`?boolean=false`) - if true show legend below the chart, otherwise not be shown | ||
|
||
### Events | ||
|
||
- `chartClick`: fires when click on a chart has occurred, returns information regarding active points and labels | ||
- `chartHover`: fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels | ||
|
||
|
||
### Colors | ||
|
||
There are a set several default colors. Colors can be replaced using the `colors` attribute. If there is more data than colors, colors are generated randomly. | ||
|
||
|
||
## Troubleshooting | ||
|
||
Please follow this guidelines when reporting bugs and feature requests: | ||
|
||
1. Use [GitHub Issues](https://github.com/valor-software/ng2-charts/issues) board to report bugs and feature requests (not our email address) | ||
2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it. | ||
|
||
Thanks for understanding! | ||
|
||
### License | ||
|
||
The MIT License (see the [LICENSE](https://github.com/valor-software/ng2-charts/blob/master/LICENSE) file for the full text) | ||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). |
Oops, something went wrong.