Angular4 Word Cloud

Installation

To install this library, run:

$ npm install angular4-word-cloud --save
$ npm install d3 --save

API

Import

// In your App's module:
imports: [
   AgWordCloudModule.forRoot()
]

Then add add the script to .angular-cli.json

"scripts": [
      ***
        "../node_modules/angular4-word-cloud/d3.min.js"
      ]

How to use

There are one directive for word cloud: ag-word-cloud, to use it just add this block on your html file:

<div AgWordCloud 
	#word_cloud_chart=ag-word-cloud 
	[wordData]="word_cloud"
	 [options]="options">
	</div>

// Create Work Cloud Data Array
wordData: Array<AgWordCloudData> = [// Words];
// Word Cloud Options
options = {
	settings: {
		minFontSize: 10,
		maxFontSize: 100,
		textRotation: 0 // see below
	},
	margin: {
		top: 10,
		right: 10,
		bottom: 10,
		left: 10
	},
	labels: true // false to hide hover labels
};

Properties

wordData (Array<WordCloudData> | WordCloudData[]) - set of words, it should be Array<WordCloudData> and each object must have a text and size;
colors (?Array<string> | string[]) - data colors, will use default and|or random colors if not specified.
options (?WordCloudOptions) - word cloud options and there are two object you can pass it settings and margin.
- settings - minFontSize - maxFontSize - textRotation (?number | RotationFunction): accepts a number (angle) which all words in the cloud will be rotated at (ie 0 means no rotation). Alternatively a function can be passed which returns a number (to be called on each word in the cloud)
- margin of canvas top, left, bottom, right, Default values is 10.
- labels show Size label at the bottom
width and height of canvas, the Default value for width is the width of the container, and the height equals the width * 0.75.

Events

wordClick Returns the word clicked

It can be setted as:

To Update it dynamically

First of all you need to add a reference for your div:

<div WordCloud #word_cloud_chart=word-cloud [wordData]="word_cloud" [height]="300"></div>

Update your component to this:

export class MyComponent implements ..... {
...
	@ViewChild('word_cloud_chart') word_cloud_chart: WordCloudDirective;
	word_cloud: Array<WordCloudData> = [];
.....
	updateWordCloud(wordCloud: WordCloud) {
		this.word_cloud.length = 0;
		const temp = wordCloud.words.map(res => {
			return {text: res.word, size: res.score};
		});
    	this.word_cloud.push(...temp);
		setTimeout(() => {
			this.word_cloud_chart.update();
		});
	}

When ever you ready just call updateWordCloud .

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

Use GitHub Issues board to report bugs and feature requests (not our email address)
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!

alhazmy13/Angular4-word-cloud