Nano Particle Matrix

    angular4-word-cloud
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    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

    Keywords

    Install

    npm i angular4-word-cloud

    DownloadsWeekly Downloads

    263

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • alhazmy13