New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@talentia/angular-d3-cloud
Advanced tools
@talentia/angular-d3-cloud - npm Package Compare versions
Comparing version 1.4.8 to 1.5.0
@@ -1,54 +0,41 @@ | ||
| import { ElementRef, EventEmitter, OnChanges, AfterViewInit, SimpleChanges, OnDestroy } from '@angular/core'; | ||
| import { AngularD3Word, AngularD3Themes } from './angular-d3-cloud.interfaces'; | ||
| import { ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core'; | ||
| import * as cloud from 'd3-cloud'; | ||
| import 'd3-transition'; | ||
| import * as i0 from "@angular/core"; | ||
| export declare class AngularD3CloudComponent implements OnChanges, AfterViewInit, OnDestroy { | ||
| export declare class AngularD3CloudComponent implements OnChanges, OnInit { | ||
| wordcloud: ElementRef<HTMLDivElement> | undefined; | ||
| 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; | ||
| data: cloud.Word[]; | ||
| width?: number; | ||
| height?: number; | ||
| padding?: number | ((datum: cloud.Word, index: number) => number); | ||
| font?: string | ((datum: cloud.Word, index: number) => string); | ||
| fontSizeMapper?: (datum: cloud.Word, index: number) => number; | ||
| rotate?: number | ((datum: cloud.Word, index: number) => number); | ||
| autoFill?: boolean; | ||
| fillMapper?: (datum: cloud.Word, index: number) => string; | ||
| animations?: boolean; | ||
| fontWeight: string | number; | ||
| fontStyle: string; | ||
| tooltip: boolean; | ||
| hover: boolean; | ||
| selection: boolean; | ||
| theme: AngularD3Themes; | ||
| wordClick: EventEmitter<{ | ||
| event: MouseEvent; | ||
| word: AngularD3Word; | ||
| word: cloud.Word; | ||
| }>; | ||
| wordMouseOver: EventEmitter<{ | ||
| event: MouseEvent; | ||
| word: AngularD3Word; | ||
| word: cloud.Word; | ||
| }>; | ||
| wordMouseMove: EventEmitter<{ | ||
| event: MouseEvent; | ||
| word: AngularD3Word; | ||
| }>; | ||
| wordMouseOut: EventEmitter<{ | ||
| event: MouseEvent; | ||
| word: AngularD3Word; | ||
| word: cloud.Word; | ||
| }>; | ||
| private cloudService; | ||
| private options; | ||
| private wordMouseClickSubscriber; | ||
| private wordMouseOverSubscriber; | ||
| private wordMouseMoveSubscriber; | ||
| private wordMouseOutSubscriber; | ||
| constructor(); | ||
| private isMouseClickUsed; | ||
| private isMouseOverUsed; | ||
| private isMouseOutUsed; | ||
| private static TAG; | ||
| ngOnInit(): void; | ||
| ngAfterViewInit(): void; | ||
| ngOnChanges(changes: SimpleChanges): void; | ||
| ngOnDestroy(): void; | ||
| private renderCloud; | ||
| private createOptions; | ||
| private applyOptions; | ||
| ngOnChanges(_changes: SimpleChanges): void; | ||
| renderCloud(): void; | ||
| private validateProps; | ||
| 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"; "speed": "speed"; "fontWeight": "fontWeight"; "fontStyle": "fontStyle"; "tooltip": "tooltip"; "hover": "hover"; "selection": "selection"; "theme": "theme"; }, { "wordClick": "wordClick"; "wordMouseOver": "wordMouseOver"; "wordMouseMove": "wordMouseMove"; "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"; "fontWeight": "fontWeight"; }, { "wordClick": "wordClick"; "wordMouseOver": "wordMouseOver"; "wordMouseOut": "wordMouseOut"; }, never, never, false, never>; | ||
| } |
@@ -5,3 +5,7 @@ { | ||
| "description": "D3 word cloud component for Angular built upon d3-cloud", | ||
| "version": "1.4.8", | ||
| "version": "1.5.0", | ||
| "peerDependencies": { | ||
| "@angular/common": "^15.0.0", | ||
| "@angular/core": "^15.0.0" | ||
| }, | ||
| "dependencies": { | ||
@@ -15,7 +19,3 @@ "d3-cloud": "^1.2.5", | ||
| }, | ||
| "peerDependencies": { | ||
| "@angular/common": "^15.2.9", | ||
| "@angular/core": "^15.2.9" | ||
| }, | ||
| "schematics": "./schematics/collection.json", | ||
| "sideEffects": false, | ||
| "author": { | ||
@@ -33,3 +33,3 @@ "name": "Leonardo Cavone", | ||
| "repository": { | ||
| "url": "https://github.com/Talentia-Software-OSS/d3-cloud-angular", | ||
| "url": "https://github.com/Talentia-Software-OSS/d3-cloud-angular.git", | ||
| "type": "git" | ||
@@ -71,4 +71,3 @@ }, | ||
| } | ||
| }, | ||
| "sideEffects": false | ||
| } | ||
| } |
@@ -1,4 +0,2 @@ | ||
| export * from './lib/angular-d3-cloud.service'; | ||
| export * from './lib/angular-d3-cloud.component'; | ||
| export * from './lib/angular-d3-cloud.module'; | ||
| export * from './lib/angular-d3-cloud.interfaces'; |
115
README.md
@@ -1,113 +0,24 @@ | ||
| # Angular D3 Word Cloud | ||
| D3 Cloud component for Angular built upon d3-cloud | ||
| # AngularD3Cloud | ||
| [](https://stackblitz.com/edit/d3-cloud-angular) | ||
| This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0. | ||
| ## This version require Angular CLI 15 | ||
| ## Code scaffolding | ||
| ## Previous versions | ||
| Run `ng generate component component-name --project angular-d3-cloud` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-d3-cloud`. | ||
| > Note: Don't forget to add `--project angular-d3-cloud` or else it will be added to the default project in your `angular.json` file. | ||
| <details> | ||
| <summary>Click to expand</summary> | ||
| ## Build | ||
| - [Version 1.3.0](https://github.com/Talentia-Software-OSS/d3-cloud-angular/tree/1.3.x) | ||
| Run `ng build angular-d3-cloud` to build the project. The build artifacts will be stored in the `dist/` directory. | ||
| </details> | ||
| ## Publishing | ||
| # Installation | ||
| ``` | ||
| npm install --save @talentia/angular-d3-cloud@1.4.8 | ||
| ``` | ||
| 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: | ||
| After building your library with `ng build angular-d3-cloud`, go to the dist folder `cd dist/angular-d3-cloud` and run `npm publish`. | ||
| ``` | ||
| 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 | ||
| ``` | ||
| ## Running unit tests | ||
| # Usage | ||
| First import the package to your app module | ||
| ```ts | ||
| // app.module.ts | ||
| import { AngularD3CloudModule } from '@talentia/angular-d3-cloud'; | ||
| Run `ng test angular-d3-cloud` to execute the unit tests via [Karma](https://karma-runner.github.io). | ||
| @NgModule({ | ||
| imports: [ | ||
| AngularD3CloudModule | ||
| ], | ||
| ... | ||
| }) | ||
| ``` | ||
| Now the component is ready to use. | ||
| ## Further help | ||
| ```html | ||
| <!-- app.component.html --> | ||
| <angular-d3-cloud [data]="data" [hover]="true" [selection]="true" [tooltip]="true"></angular-d3-cloud> | ||
| ``` | ||
| ```ts | ||
| // app.component.ts | ||
| export class AppComponent implements OnInit { | ||
| @Input() data!: AngularD3Word[]; | ||
| 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.data = this.words.map((word) => { | ||
| const value = 10 + Math.random() * 90; | ||
| return { text: word, value: value, tooltip: `The value of ${word} is ${value}` } as AngularD3Word; | ||
| }); | ||
| } | ||
| } | ||
| ``` | ||
| # AngularD3CloudComponent Properties | ||
| | Name | Description | Type | Required | Default | | ||
| |----------------|----------------------------------------------------------------------------------------------------|-----------------------------------------------------------------|----------|---------------------| | ||
| | data | Words array | AngularD3Word[] | ✓ | | | ||
| | width | Layout width (px) | number | | 700 | | ||
| | height | Layout height (px) | number | | 600 | | ||
| | padding | Padding between tags (px) | number | | 5 | | ||
| | font | Font family needed for calculating layout | string | | Arial | | ||
| | fontSizeMapper | Map each word value of data to font size (px) | number | ((word: AngularD3Word, index: number) => number) | | word => word.value | | ||
| | rotate | Rotation in degrees | number | ((word: AngularD3Word, index: number) => number) | | 0 | | ||
| | autoFill | Whether words need to be filled with random colors | boolean | | false | | ||
| | fillMapper | Function used by autoFill to map each data item to a fill color | (word: AngularD3Word, index: number) => string | | schemeCategory10 | | ||
| | animations | Whether to apply animation | boolean | | false | | ||
| | speed | Animation speed (ms) | number | | 600 | | ||
| | fontWeight | Font weight | string | number | | normal | | ||
| | fontStyle | Font style | string | | normal | | ||
| | tooltip | Whether the tooltip should be shown | boolean | | false | | ||
| | hover | Whether to apply the hover effect on the words | boolean | | false | | ||
| | selection | Whether the word should be selectable | boolean | | false | | ||
| | theme | Theme to apply on hover or selected words | AngularD3Themes | | text-opacity | | ||
| # AngularD3CloudComponent Events | ||
| | 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 } | | ||
| | wordMouseMove | Event triggered when mousemove event triggered on a word | { event: MouseEvent, word: AngularD3Word } | | ||
| | wordMouseOut | Event triggered when mouseout event triggered on a word | { event: MouseEvent, word: AngularD3Word } | | ||
| # AngularD3Word Interface | ||
| | Name | Description | Type | | ||
| |---------------|-----------------------------------------------------------------------------------------------------|-----------------------------------------------------------------| | ||
| | value | Value to map to font size | number | | ||
| | tooltip | Tooltip text | string | | ||
| # AngularD3Themes Type | ||
| | Name | Description | Type | | ||
| |---------------|-----------------------------------------------------------------------------------------------------|-----------------------------------------------------------------| | ||
| | text-opacity | Apply opacity effect on hover or selected words | string | | ||
| | text-shadow | Apply shadow effect on hover or selected words | string | | ||
| > `AngularD3Word` extends the interface `Word` imported from `d3-cloud` | ||
| # Example | ||
| Run the following commands to start sample project: | ||
| ``` | ||
| npm start | ||
| ``` | ||
| # Thanks | ||
| This project is built with the idea of [React D3 Cloud](https://github.com/Yoctol/react-d3-cloud). | ||
| This project is forked from [maitrungduc1410/d3-cloud-angular](https://github.com/maitrungduc1410/d3-cloud-angular). | ||
| To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Number of low supply chain risk alerts
0
-100%Worsened metrics
- Total package byte prevSize
97149
-62.53%- Number of package files
17
-15%- Lines of code
745
-60.75%- Number of lines in readme file
25
-78.07%No dependency changes