Dynamic-pie-chart NPM

The Dynamic Pie Chart

This library provides a dynamic pie chart, i.e. a sector diagram widget, which is linked to a dynamic source, and available for user interaction. Each sector can be activated, or selected with the mouse pointer.

A sample usage of this library can be previewed (and admired) in the Fitzhì solution.

Dynamic Pie Chart

The release 1.1.x is associated with Angular 9.
The release 1.2.x is associated with Angular 10.
The release 1.3.x is associated with Angular 11.
The release 1.4.x is associated with Angular 12.

Installing this library in your project ?

The most simple command npm install dynamic-pie-chart will install this library

To import the module inside your application, just add the module DynamicPieChartModule in your app.module.ts.

location :

import {DynamicPieChartModule} from 'dynamic-pie-chart';

2 mock files are provided for testing purpose. Each one is containing a sample array of slices :

MockSlicesOne
MockSlicesTwo

Using this library in your application ?

To include this component into a container, you just have to declare this section into the HTML template.

<lib-dynamic-pie-chart
	[pie]=1
	[radius]=150
	[active]=true
	[legend]=legend
	[slices$]=slices$
	[filteredSlices$]=filteredSlices$
	[typeSlices$]=typeSlices$
	(selected)="sliceSelection($event)" 
	(activated)="sliceActivation($event)">
</lib-dynamic-pie-chart>

The parameters are :

Parameter	Decorator	Comment
pie	INPUT	the pie identifier inside the container. There can be multiple pies in the same component. Each pie must have a unique pie.
radius	INPUT	the radius of the Pie in pixel.
active	INPUT	Does this pie have to be active, or not ? A pie is a set of slices. An active pie allows each slice to be activated, or selected, by the mouse cursor.
legend	INPUT	`true` or `false`. Does this pie has a legend ? In this current release (1.0.0), the legend is a circle with lebel surrounding the pie.
slices$	INPUT	an observable which publishes an array of slices to be drawn. Each sector diagram is made up of pieces, from various angles, and whose sum is equal to 360. (This widget supports a sum of tranches lower than 360). This array will be internally sorted on the `type` property to provide a legend.
filteredSlices$	INPUT	an OPTIONAL `observable` which broadcasts an array of slices to be filtered on the chart.
typeSlices$	INPUT	an `observable` which publishes an array of type of slices. the array ol slices
selected	OUTPUT	an `EventEmitter` to inform the parent component that a slice has been activated
activated	OUTPUT	an `EventEmitter` to inform the parent component that a slice has been selected

What is a slice ?

For the component, the pie is an array of slices.

A slice is a piece of pie.

Property	type	Comment
id	number	the identifier of the slice, un unique number per pie
type	number	the type of slice
angle	number	the angle of this slice in degree
offset	number	the offset (in degrees) of this slice within the pie. This property is there for internal use. Its value will be processed by the component.
backgroundColor	string	the background color of this slice
textColor	string	the color of the 'numeric' value associated to slice
textFontSize	string	the font size attributed to this value
data	any	the data object associated to this child.
children	array of any	an array of data which can be considered as the children linked to this slice
activated	boolean	`true` or `false` if this slice is activated (the end-user has moved the mouse on it)
selected	boolean	`true` or `false` if this slice is selected (the end-user has clicked on it)