ngx-frappe-chart
v0.0.8
Published
A simple and easy to use angular wrapper on top of frappe for generating awesome graphs.
Downloads
75
Maintainers
Readme
Install
Install the package.
$ npm i -s ngx-frappe-chart
Add the frappe library to your Angular.json file:
angular.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
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.
<ngx-frappe-charts-bar
[type]="'bar'"
[data]="barChartData"
[height]="500"
[yMarkers]="yMarkers"
[yRegions]="yRegions"
[colors]="barChartColor"
>
</ngx-frappe-charts-bar>
Valid inputs
Valid inputs foe drawing bar, line and axis-mixed charts are as follows.
Custom models
where GraphDataModel
, AxisOptions
, TooltipOptions
, BarOptions
, LineOptions
, YMarkers
, YRegions
are interfaces as follows.
graph-data.model.ts
export interface GraphDataModel {
labels: string[];
datasets: GraphDatasetModel[];
}
export interface GraphDatasetModel {
name: string;
chartType?: string;
values: number[];
}
axis-options.model.ts
export interface AxisOptions {
xIsSeries?: boolean; // default: false
xAxisMode?: string; // default: 'span'
yAxisMode?: string; // default: 'span'
}
tooltip-options.model.ts
export interface TooltipOptions {
formatTooltipX: any; // formatTooltipX: d => (d + '').toUpperCase(),
formatTooltipY: any; // formatTooltipY: d => d + ' pts',
}
bar-options.model.ts
export interface BarOptions {
spaceRatio: number; // default: 1
stacked: number; // default 0,
}
line-options.model.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
export interface YMarkers {
label: string;
value: number;
options: LabelPosition;
}
yregions.model.ts
export interface YRegions {
label: string;
start: number;
end: number;
options: LabelPosition;
}
label-position.model.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.
<ngx-frappe-charts-percentage [type]="'pie'" [data]="piechart1" [height]="500">
</ngx-frappe-charts-percentage>
<ngx-frappe-charts-percentage
[type]="'percentage'"
[data]="piechart1"
[height]="500"
>
</ngx-frappe-charts-percentage>
Valid inputs
Valid inputs foe drawing pecentage charts are as follows.
Custom models
where GraphDataModel
, BarOptions
are interfaces as follows.
graph-data.model.ts
export interface GraphDataModel {
labels: string[];
datasets: GraphDatasetModel[];
}
export interface GraphDatasetModel {
name: string;
chartType?: string;
values: number[];
}
bar-options.model.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.
<ngx-frappe-charts-heatmap
[data]="heatmapData"
[countLabel]="'count'"
[discreteDomains]="1"
>
</ngx-frappe-charts-heatmap>
Valid inputs
Valid inputs foe drawing Heatmap charts are as follows.
Custom models
where HeatmapDataModel
is interfaces as follows.
heatmap-data.model.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.
Contributing
Please read CONTRIBUTING.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 file for details
Acknowledgments
- Thanks to Frappe Charts for creating this awesome library.