@talentia/angular-d3-cloud - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

lib/angular-d3-cloud.component.d.ts

 import { ElementRef, EventEmitter, OnChanges, AfterViewInit, SimpleChanges, OnDestroy } from '@angular/core';
 import { AngularD3Word } from './angular-d3-cloud.interfaces';
-import { AngularD3CloudService } from './angular-d3-cloud.service';
 import * as i0 from "@angular/core";
 export declare class AngularD3CloudComponent implements OnChanges, AfterViewInit, OnDestroy {
-    private cloudService;
     wordcloud: ElementRef<HTMLDivElement> | undefined;
-    data?: AngularD3Word[];
-    width?: number;
-    height?: number;
-    padding?: number | ((word: AngularD3Word, index: number) => number);
-    font?: string | ((word: AngularD3Word, index: number) => string);
-    fontSizeMapper?: number | ((word: AngularD3Word, index: number) => number);
-    rotate?: number | ((word: AngularD3Word, index: number) => number);
-    autoFill?: boolean;
-    fillMapper?: (word: AngularD3Word, index: number) => string;
-    animations?: boolean;
-    fontWeight?: string | number | ((word: AngularD3Word, index: number) => string | number);
+    data: AngularD3Word[];
+    width: number;
+    height: number;
+    padding: number;
+    font: string;
+    fontSizeMapper: number | ((word: AngularD3Word, index: number) => number);
+    rotate: number | ((word: AngularD3Word, index: number) => number);
+    autoFill: boolean;
+    fillMapper: (word: AngularD3Word, index: number) => string;
+    animations: boolean;
+    speed: number;
+    fontWeight: string | number;
+    fontStyle: string;
     wordClick: EventEmitter<{
@@ -31,14 +31,16 @@ event: MouseEvent;
     }>;
+    private cloudService;
+    private options;
     private wordMouseClickSubscriber;
     private wordMouseOverSubscriber;
     private wordMouseOutSubscriber;
-    constructor(cloudService: AngularD3CloudService);
-    ngAfterViewInit(): Promise<void>;
-    ngOnChanges(changes: SimpleChanges): Promise<void>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
-    private renderCloudAsync;
-    private cloneData;
+    private renderCloud;
     private createOptions;
+    private applyOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<AngularD3CloudComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AngularD3CloudComponent, "angular-d3-cloud", never, { "data": "data"; "width": "width"; "height": "height"; "padding": "padding"; "font": "font"; "fontSizeMapper": "fontSizeMapper"; "rotate": "rotate"; "autoFill": "autoFill"; "fillMapper": "fillMapper"; "animations": "animations"; "fontWeight": "fontWeight"; }, { "wordClick": "wordClick"; "wordMouseOver": "wordMouseOver"; "wordMouseOut": "wordMouseOut"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AngularD3CloudComponent, "angular-d3-cloud", never, { "data": "data"; "width": "width"; "height": "height"; "padding": "padding"; "font": "font"; "fontSizeMapper": "fontSizeMapper"; "rotate": "rotate"; "autoFill": "autoFill"; "fillMapper": "fillMapper"; "animations": "animations"; "speed": "speed"; "fontWeight": "fontWeight"; "fontStyle": "fontStyle"; }, { "wordClick": "wordClick"; "wordMouseOver": "wordMouseOver"; "wordMouseOut": "wordMouseOut"; }, never, never, false, never>;
 }

lib/angular-d3-cloud.interfaces.d.ts

 export interface AngularD3Word {
     text: string;
     value: number;
+    font: string;
+    style: string;
+    weight: string | number;
+    rotate: number;
+    size: number;
+    padding: number;
+    x: number;
+    y: number;
+    hasText: boolean;
 }
 export interface AngularD3CloudOptions {
-    data?: AngularD3Word[];
-    width?: number;
-    height?: number;
-    padding?: number | ((word: AngularD3Word, index: number) => number);
-    font?: string | ((word: AngularD3Word, index: number) => string);
-    fontSizeMapper?: number | ((word: AngularD3Word, index: number) => number);
-    rotate?: number | ((word: AngularD3Word, index: number) => number);
-    autoFill?: boolean;
-    fillMapper?: (word: AngularD3Word, index: number) => string;
-    animations?: boolean;
-    fontWeight?: string | number | ((word: AngularD3Word, index: number) => string | number);
-    mouseClickObserved?: boolean;
-    mouseOverObserved?: boolean;
-    mouseOutObserved?: boolean;
+    data: AngularD3Word[];
+    width: number;
+    height: number;
+    padding: number;
+    font: string;
+    fontSizeMapper: number | ((word: AngularD3Word, index: number) => number);
+    rotate: number | ((word: AngularD3Word, index: number) => number);
+    autoFill: boolean;
+    fillMapper: (word: AngularD3Word, index: number) => string;
+    animations: boolean;
+    speed: number;
+    fontWeight: string | number;
+    fontStyle: string;
+    mouseClickObserved: boolean;
+    mouseOverObserved: boolean;
+    mouseOutObserved: boolean;
 }

lib/angular-d3-cloud.service.d.ts

@@ -7,2 +7,3 @@ import { Subject } from 'rxjs';
     private static TAG;
+    private ngZone;
     private document;
@@ -22,9 +23,25 @@ wordMouseClick: Subject<{
     constructor();
-    renderCloudSync(node: Element, options?: AngularD3CloudOptions): TypeError | null;
-    renderCloudAsync(node: Element, options?: AngularD3CloudOptions): Promise<void>;
-    private renderCloud;
+    renderCloud(node: Element | null, options?: AngularD3CloudOptions): TypeError[] | null;
+    private render;
     private canvasGenerator;
+    private applyFill;
+    private applyAnimation;
+    private applyEventListeners;
     private validateData;
+    private validateNode;
+    private validateOptionsData;
+    private validateHeight;
+    private validateWidth;
+    private validatePadding;
+    private validateFont;
+    private validateFontSizeMapper;
+    private validateFillMapper;
+    private validateRotate;
+    private validateAnimations;
+    private validateSpeed;
+    private validateAutoFill;
+    private validateFontWeight;
+    private validateFontStyle;
     static ɵfac: i0.ɵɵFactoryDeclaration<AngularD3CloudService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AngularD3CloudService>;
 }

package.json

@@ -5,3 +5,3 @@ {
   "description": "D3 word cloud component for Angular built upon d3-cloud",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "dependencies": {
@@ -17,3 +17,8 @@ "d3-cloud": "^1.2.5",
     "@angular/common": "^15.0.1",
-    "@angular/core": "^15.0.1"
+    "@angular/core": "^15.0.1",
+    "@types/d3-cloud": "^1.2.5",
+    "@types/d3-scale": "^4.0.2",
+    "@types/d3-scale-chromatic": "^3.0.0",
+    "@types/d3-selection": "^3.0.3",
+    "@types/d3-transition": "^3.0.2"
   },
@@ -20,0 +25,0 @@ "schematics": "./schematics/collection.json",

README.md

@@ -11,3 +11,2 @@ # Angular D3 Word Cloud
 
-- [Version 1.4.0](https://github.com/Talentia-Software-OSS/d3-cloud-angular/tree/1.4.x)
 - [Version 1.3.0](https://github.com/Talentia-Software-OSS/d3-cloud-angular/tree/1.3.x)
@@ -17,8 +16,14 @@
 
-<img src="./demo.png">
-
 # Installation
 ```
-npm install --save @talentia/angular-d3-cloud@1.4.1
+npm install --save @talentia/angular-d3-cloud@1.4.2
 ```
+
+Installing the package does not install the type definitions for d3-cloud, d3-scale, d3-scale-chromatic, d3-selection and d3-transition libraries.
+If you need to use these libraries in your project then install the type definitions with the following command:
+
+```
+npm i --save-dev @types/d3-cloud@1.2.5 @types/d3-scale@4.0.2 @types/d3-scale-chromatic@3.0.0 @types/d3-selection@3.0.3 @types/d3-transition@3.0.2
+```
+
 # Usage
@@ -48,35 +53,36 @@ First import the package to your app module
 
-  private words = ['Exercitation', 'duis', 'ex', 'laboris', 'laboris', 'est', 'aliqua', 'Lorem', 'veniam', 'ad.', 'Minim', 'aliqua', 'enim', 'do', 'exercitation', 'duis', 'eiusmod', 'sunt', 'do', 'exercitation', 'qui', 'ex.', 'Aliqua', 'velit', 'sunt', 'in', 'commodo', 'anim.', 'Sunt', 'labore', 'sunt', 'dolor', 'exercitation', 'non', 'commodo', 'laboris', 'culpa', 'culpa', 'exercitation', 'ex', 'proident', 'laborum.\n\nId', 'dolore', 'commodo', 'occaecat', 'in', 'velit.', 'Aliqua', 'mollit', 'ea', 'qui', 'ad', 'aute', 'est', 'excepteur', 'non', 'aliqua', 'occaecat', 'ad', 'non', 'ea.', 'Labore', 'incididunt', 'excepteur', 'tempor', 'culpa', 'proident', 'ex', 'commodo.', 'Nisi', 'nostrud', 'tempor', 'deserunt', 'ipsum', 'adipisicing', 'aute', 'do', 'adipisicing.\n\nOfficia', 'pariatur', 'eiusmod', 'tempor', 'magna', 'occaecat.', 'Ut', 'proident', 'anim', 'aute', 'aliquip', 'pariatur', 'et.', 'Pariatur', 'ad', 'ea', 'sint', 'ut', 'excepteur', 'amet', 'id', 'do.', 'Labore', 'eu', 'velit', 'non', 'cillum', 'nulla.\n\nIncididunt', 'duis', 'tempor', 'sunt', 'dolor', 'magna', 'occaecat', 'esse', 'elit', 'consequat.', 'Ea', 'sint', 'et', 'labore', 'amet', 'ullamco', 'non', 'tempor.', 'Ad', 'voluptate', 'nisi', 'duis', 'minim', 'elit', 'in', 'adipisicing', 'et', 'laboris', 'nulla', 'culpa', 'ad'];
+     private words = ["Exercitation","duis","ex","laboris","est","aliqua","Lorem","veniam","ad","Minim","enim","do","exercitation","eiusmod","sunt","qui","Aliqua","velit","in","commodo","anim","Sunt","labore","dolor","non","culpa","proident","laborum","dolore","occaecat","mollit","ea","aute","excepteur","Labore","incididunt","tempor","Nisi","nostrud","deserunt","ipsum","adipisicing","pariatur","magna","Ut","aliquip","et","Pariatur","sint","ut","amet","id","eu","cillum","nulla","esse","elit","consequat","Ea","ullamco","Ad","voluptate","nisi","minim"];
 
-  ngOnInit(): void {
-    this.refresh();
-  } 
-
-  refresh(): void {
+   ngOnInit(): void {
     this.data = this.words.map((word) => {
-      return { text: word, value: 10 + Math.random() * 90 };
+      return { text: word, value: 10 + Math.random() * 90 } as AngularD3Word;
     });
-  }
+  } 
 }
 ```
 # Props
-| Name           | Description                                                                                                | Type                                          | Required | Default             |
-|----------------|------------------------------------------------------------------------------------------------------------|-----------------------------------------------|----------|---------------------|
-| data           | The input data for rendering                                                                               | Array<{ text: string, value: number }>        |     ✓    |                     |
-| width          | Width of component (px)                                                                                    | number                                        |          | 700                 |
-| height         | Height of component (px)                                                                                   | number                                        |          | 600                 |
-| fontSizeMapper | Map each element of data to font size (px)                                                                 | Function: (word: string, idx: number): number |          | word => word.value; |
-| rotate         | Map each element of data to font rotation degree. Or simply provide a number for global rotation. (degree) | Function \| number                            |          | 0                   |
-| padding        | Map each element of data to font padding. Or simply provide a number for global padding. (px)              | Function \| number                            |          | 5                   |
-| font           | The font of text shown                                                                                     | Function \| string                            |          | serif               |
-| fontWeight | Weight of the font | string \| number |          |  'normal' |
-| autoFill       | Whether texts should be fill with random color or not                                                      | boolean                                       |          | false               |
-| fillMapper | Function used by autoFill to map each data item to a fill color. Can be used to customize the way autoFill generate colors | Function: (word: Word, index: number): string |          | A function based on schemeCategory10 of d3-scale-chromatic|
-| animations | Whether animated transitions is active or not | boolean |          |  false |
+| Name           | Description                                                                                        | Type                                                            | Required | Default             |
+|----------------|----------------------------------------------------------------------------------------------------|-----------------------------------------------------------------|----------|---------------------|
+| data           | The input data for rendering                                                                       | AngularD3Word[]                                                 |     ✓    |                     |
+| width          | Width of component (px)                                                                            | number                                                          |          | 700                 |
+| height         | Height of component (px)                                                                           | number                                                          |          | 600                 |
+| padding        | Map each element of data to font padding. Or simply provide a number for global padding. (px)      | number                                                          |          | 5                   |
+| font           | The font of text shown                                                                             | string                                                          |          | Arial               |
+| fontSizeMapper | Map each element of data to font size (px)                                                         | number or ((word: AngularD3Word, index: number) => number)      |          | word => word.value  |
+| rotate         | Map each element of data to font rotation degree.                                                  | number or ((word: AngularD3Word, index: number) => number)      |          | 0                   |
+|                | Or simply provide a number for global rotation. (degree)                                           |                                                                 |          |                     |
+| autoFill       | Whether texts should be fill with random color or not                                              | boolean                                                         |          | false               |
+| fillMapper     | Function used by autoFill to map each data item to a fill color.                                   | (word: AngularD3Word, index: number) => string                  |          | function based on   |
+|                |                                                                                                    |                                                                 |          | schemeCategory10    |
+| animations     | Whether animated transitions is active or not                                                      | boolean                                                         |          | false               |
+| speed          | Animation speed (ms)                                                                               | number                                                          |          | 600                 |
+| fontWeight     | Weight of the font                                                                                 | string or number                                                |          | normal              |
+| fontStyle      | Style of the font                                                                                  | string                                                          |          | normal              |
+
 # Events
-| Name          | Description                                              | Payload                           |
-|---------------|----------------------------------------------------------|-----------------------------------|
-| wordClick     | Event triggered when click event triggered on a word     | { event: MouseEvent, word: Word } |
-| wordMouseOver | Event triggered when mouseover event triggered on a word | { event: MouseEvent, word: Word } |
-| wordMouseOut  | Event triggered when mouseout event triggered on a word  | { event: MouseEvent, word: Word } |
+| Name          | Description                                                                                         | Payload                                                         |
+|---------------|-----------------------------------------------------------------------------------------------------|-----------------------------------------------------------------|
+| wordClick     | Event triggered when click event triggered on a word                                                | { event: MouseEvent, word: AngularD3Word }                      |
+| wordMouseOver | Event triggered when mouseover event triggered on a word                                            | { event: MouseEvent, word: AngularD3Word }                      |
+| wordMouseOut  | Event triggered when mouseout event triggered on a word                                             | { event: MouseEvent, word: AngularD3Word }                      |
 
@@ -83,0 +89,0 @@ > The `Word` interface imported from `d3-cloud`

No alert changes

Improved metrics

Total package byte prevSize

205067

increased by36.37%

Lines of code

1532

increased by37.89%

Number of lines in readme file

95

increased by6.74%

Worsened metrics

Dependency count

13

increased by62.5%

No dependency changes