kedar9444/ngx-frappe-charts

A simple and easy to use angular wrapper on top of frappe for generating awesome graphs.

Ngx-Frappe-Chart

A simple and easy to use angular wrapper on top of frappe for generating awesome graphs.

Download NPM Package » Edit at Stackbliz »

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.

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

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.

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

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.

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

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.