angular4-word-cloud
    Overview
    Versions
    Jobs
    Chat
    Dependencies
    Contributors
    Documentation
    Alternatives
    Discussions

angular4-word-cloud

![ag-word-cloud](https://user-images.githubusercontent.com/4659608/30762233-d4a36136-9fe9-11e7-8788-831558cae077.png)

1.0.4  •  Updated 2 years ago  •  by Abdullah Alhazmy  •  MIT License

ag-word-cloud

NPM

Coverage Status npm version GitHub issues GitHub stars GitHub license

Angular4 Word Cloud

Links:

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,
	},
	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.

    • setting containes minFontSize and maxFontSize for word sets.
    • margin of canves 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.

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

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

License

MIT © Abdullah Alhazmy

Popularity

Weekly Downloads
198
Stars
12

Maintenance

Development

Last ver 2 years ago
Created 2 years ago
Last commit 7 months ago
25 days between commits

Technology

Node version: 7.7.2
0 unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

4 contributors
Abdullah Alhazmy
Maintainer, 21 commits, 5 merges, 2 PRs
Works at Alhazmy13
Sangwin Gawande
4 commits, 2 PRs
Works at Sangwin Gawande
Umair Ansari
2 commits, 1 PRs
Hernán
1 commits
MaurizioPz
1 PRs
AmareshB
2 PRs

Tags

angular
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.