## Install
Install the package.
```sh
$ npm i -s ngx-frappe-chart
```
Add the frappe library to your Angular.json file:
**`angular.json`**
```json
"architect": {
"build": {
...
"options": {
...
"scripts": [ "./node_modules/frappe-charts/dist/frappe-charts.min.iife.js"]
...
}
...
}
}
```
Declare the component in your module:
**`src/app/app.module.ts`**
```ts
import { FrappeChartsModule } from 'ngx-frappe-chart';
...
@NgModule({
...
imports: [
...
FrappeChartsModule,
...
],
...
})
```
# Usage
Ngx-frappy-chart exports 3 different components i.e. bar, pie, and heatmap to draw similar charts. We will check each one them and how to use them.
## Bar chart, Line chart and Axis-Mixed chart tag
This component is used for drawing bar, line and mixed charts. you have to add the componant as follows.
```html
```
### Valid inputs
Valid inputs foe drawing bar, line and axis-mixed charts are as follows.
| Input |
Type |
Valid Input values |
| data |
GraphDataModel |
- |
| title |
string |
- |
| type |
string |
bar , line , axis-mixed |
| colors |
string[] |
Hexadecimal values for colors including # e.g ['#a8026f', '#db2d43', '#e76838'] |
| height |
number |
default 240 |
| isNavigable |
boolean |
true or false, default false |
| valuesOverPoints |
boolean |
true or false, default false |
| axisOptions |
AxisOptions |
- |
| tooltipOptions |
TooltipOptions |
|
| barOptions |
BarOptions |
|
| lineOptions |
LineOptions |
|
| yMarkers |
YMarkers[] |
|
| yRegions |
YRegions[] |
|
### Custom models
where `GraphDataModel` , `AxisOptions` , `TooltipOptions` , `BarOptions` , `LineOptions`, `YMarkers` , `YRegions` are interfaces as follows.
**`graph-data.model.ts`**
```ts
export interface GraphDataModel {
labels: string[];
datasets: GraphDatasetModel[];
}
export interface GraphDatasetModel {
name: string;
chartType?: string;
values: number[];
}
```
**`axis-options.model.ts`**
```ts
export interface AxisOptions {
xIsSeries?: boolean; // default: false
xAxisMode?: string; // default: 'span'
yAxisMode?: string; // default: 'span'
}
```
**`tooltip-options.model.ts`**
```ts
export interface TooltipOptions {
formatTooltipX: any; // formatTooltipX: d => (d + '').toUpperCase(),
formatTooltipY: any; // formatTooltipY: d => d + ' pts',
}
```
**`bar-options.model.ts`**
```ts
export interface BarOptions {
spaceRatio: number; // default: 1
stacked: number; // default 0,
}
```
**`line-options.model.ts`**
```ts
export interface LineOptions {
dotSize: number; // default: 4
regionFill: number; // default: 0
hideDots: number; // default: 0
hideLine: number; // default: 0
heatline: number; // default: 0
}
```
**`ymarkers.model.ts`**
```ts
export interface YMarkers {
label: string;
value: number;
options: LabelPosition;
}
```
**`yregions.model.ts`**
```ts
export interface YRegions {
label: string;
start: number;
end: number;
options: LabelPosition;
}
```
**`label-position.model.ts`**
```ts
export interface LabelPosition {
labelPos: string; // 'left' | 'right'
}
```
## Percentage chart tag
This component is used for drawing pie and percentage charts. you have to add the componant as follows.
```html
```
### Valid inputs
Valid inputs foe drawing pecentage charts are as follows.
| Input |
Type |
Valid Input values |
| data |
GraphDataModel |
- |
| title |
string |
- |
| colors |
string[] |
- |
| height |
number |
- |
| type |
string |
- |
| maxSlices |
number |
- |
| barOptions |
BarOptions |
- |
### Custom models
where `GraphDataModel` , `BarOptions` are interfaces as follows.
**`graph-data.model.ts`**
```ts
export interface GraphDataModel {
labels: string[];
datasets: GraphDatasetModel[];
}
export interface GraphDatasetModel {
name: string;
chartType?: string;
values: number[];
}
```
**`bar-options.model.ts`**
```ts
export interface BarOptions {
height: number; // default: 20 only for barF
depth: number; // default: 2 only for bar
}
```
## Heatmap chart tag
This component is used for drawing Heatmap charts. you have to add the componant as follows.
```html
```
### Valid inputs
Valid inputs foe drawing Heatmap charts are as follows.
| Input |
Type |
Valid Input values |
| data |
HeatmapDataModel |
- |
| title |
string |
- |
| colors |
string[] |
- |
| countLabel |
string |
- |
| discreteDomains |
number |
1 or 0 |
### Custom models
where `HeatmapDataModel` is interfaces as follows.
**`heatmap-data.model.ts`**
```ts
export interface HeatmapDataModel {
start: Date; // e.g. new Date('2018-12-31')
end: Date;
dataPoints: any; // { '1524064033': 8, /* ... */},
}
```
Don't forget to check out the [Frappe charts docs](https://frappe.io/charts/docs).
## Contributing
Please read [CONTRIBUTING.md](CONTRIBUTOR.md) for details on our code of conduct, and the process for submitting pull requests to us.
## Authors
- **Kedar Paritkar** - Software Developer - Tieto India.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details
## Acknowledgments
- Thanks to Frappe Charts for creating this awesome library.
