angular-fusiongrid - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

 {
   "name": "angular-fusiongrid",
-  "version": "1.0.0",
-  "peerDependencies": {
-    "@angular/common": "^11.2.14",
-    "@angular/core": "^11.2.14"
+  "version": "1.1.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "full-build": "ng build angular-fusiongrid --prod"
   },
+  "private": false,
   "dependencies": {
-    "tslib": "^2.0.0"
+    "@angular/animations": "~11.2.10",
+    "@angular/common": "~11.2.10",
+    "@angular/compiler": "~11.2.10",
+    "@angular/core": "~11.2.10",
+    "@angular/forms": "~11.2.10",
+    "@angular/platform-browser": "~11.2.10",
+    "@angular/platform-browser-dynamic": "~11.2.10",
+    "@angular/router": "~11.2.10",
+    "rxjs": "~6.6.0",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.11.3"
   },
-  "main": "bundles/angular-fusiongrid.umd.js",
-  "module": "fesm2015/angular-fusiongrid.js",
-  "es2015": "fesm2015/angular-fusiongrid.js",
-  "esm2015": "esm2015/angular-fusiongrid.js",
-  "fesm2015": "fesm2015/angular-fusiongrid.js",
-  "typings": "angular-fusiongrid.d.ts",
-  "metadata": "angular-fusiongrid.metadata.json",
-  "sideEffects": false
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.1102.13",
+    "@angular/cli": "~11.2.9",
+    "@angular/compiler-cli": "~11.2.10",
+    "@types/jasmine": "~3.6.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.1.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "ng-packagr": "^11.0.0",
+    "protractor": "~7.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~4.1.5",
+    "fusiongrid": "1.1.0"
+  }
 }

README.md

@@ -1,24 +0,164 @@
-# FusionGrid
+A simple and lightweight official Angular component for FusionGrid JavaScript grid library. `angular-fusiongrid` enables you to add JavaScript grid in your Angular application or project without any hassle.
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.14.
+- Github Repo: [https://github.com/fusioncharts/angular-fusiongrid](https://github.com/fusioncharts/angular-fusiongrid)
 
-## Code scaffolding
+## Getting Started
 
-Run `ng generate component component-name --project fusion-grid` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project fusion-grid`.
-> Note: Don't forget to add `--project fusion-grid` or else it will be added to the default project in your `angular.json` file. 
+### Requirements
 
-## Build
+- **Node.js**, **NPM/Yarn** installed globally in your OS.
 
-Run `ng build fusion-grid` to build the project. The build artifacts will be stored in the `dist/` directory.
+- **AngularCLI** installed globally in your OS.
 
-## Publishing
+- **FusionGrid** and **Angular** installed in your project, as detailed below:
 
-After building your library with `ng build fusion-grid`, go to the dist folder `cd dist/fusion-grid` and run `npm publish`.
+### Installation
 
-## Running unit tests
+There are multiple ways to install `angular-fusiongrid` component.
 
-Run `ng test fusion-grid` to execute the unit tests via [Karma](https://karma-runner.github.io).
+**Direct Download**
+All binaries are located on our [github repository](https://github.com/fusioncharts/angular-fusiongrid/).
 
-## Further help
+**Install from NPM**
 
-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.
+```
+npm install angular-fusiongrid
+```
+
+See [npm documentation](https://docs.npmjs.com/) to know more about npm usage.
+
+**Install from Yarn**
+
+```
+yarn add angular-fusiongrid
+```
+
+See [yarn documentation](https://yarnpkg.com/en/docs) to know more about yarn usage.
+
+### Usage
+
+#### Create a Application using Angular cli
+
+import { FusionGridModule } from 'angular-fusiongrid' and FusionGrid in your app:
+
+```
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+import { FusionGridModule } from 'angular-fusiongrid';
+
+FusionGridModule.setFGRoot(FusionGrid);
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FusionGridModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+## Quick Start
+
+Here is a basic sample that shows how to create a grid using `angular-fusiongrid`:
+
+In the app.component.ts add the below code
+````javascript
+import { Component } from '@angular/core';
+import FusionGrid from "@fusioncharts/fusiongrid"; 
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  
+  schema = [
+    {
+        name: 'Rank',
+        type: 'number',
+    }, {
+        name: 'Model'
+    },
+    {
+        name: 'Make'
+    },
+    {
+        name: 'Units Sold',
+        type: 'number'
+    },
+    {
+        name: 'Assembly Location'
+    }
+  ];
+
+  data = [
+    [1, "F-Series", "Ford", 896526, "Claycomo, Mo."],
+    [2, "Pickup", "Ram", 633694, "Warren, Mich."],
+    [3, "Silverado", "Chevrolet", 575600, "Springfield, Ohio"],
+    [4, "RAV4", "Toyota", 448071, "Georgetown, Ky."],
+    [5, "CR-V", "Honda", 384168, "Greensburg, Ind."],
+    [6, "Rogue", "Nissan", 350447, "Smyrna, Tenn."],
+    [7, "Equinox", "Chevrolet", 346048, "Arlington, Tex."],
+    [8, "Camry", "Toyota", 336978, "Georgetown, Ky."],
+    [9, "Civic", "Honda", 325650, "Greensburg, Ind."],
+    [10, "Corolla", "Toyota", 304850, "Blue Springs, Miss."],
+    [11, "Accord", "Honda", 267567, "Marysville, Ohio"],
+    [12, "Tacoma", "Toyota", 248801, "San Antonio, Tex."],
+    [13, "Grand Cherokee", "Jeep", 242969, "Detroit, Mich."],
+    [14, "Escape", "Ford", 241338, "Louisville, Ky."],
+    [15, "Highlander", "Toyota", 239438, "Princeton, Ind."],
+    [16, "Sierra", "GMC", 232325, "Flint, Mich."],
+    [17, "Wrangler", "Jeep", 228032, "Toledo, Ohio"],
+    [18, "Altima", "Nissan", 209183, "Smyrna, Tenn."],
+    [19, "Cherokee", "Jeep", 191397, "Belvidere, Ill."],
+    [20, "Sentra", "Nissan", 184618, "Canton, Miss."],
+  ];
+  dataTable: any;
+
+  gridConfig: any = {
+    columns: [
+      { field: 'Rank',width: '70px'},
+      { 
+        field: 'Make',
+      },
+      {
+        field: 'Units Sold',
+        width: '100px',
+      },
+      {
+        field: 'Assembly Location',
+        headerText: 'Assembly Location in US'
+      },
+    ]
+  }
+  constructor() {
+    const dataStore = new FusionGrid.DataStore();
+    this.dataTable = dataStore.createDataTable(this.data, this.schema, {
+      enableIndex: false
+    });
+  }
+}
+
+
+Add the Fusion grid component selector in the app.component.html
+
+`<fusion-grid style="width: 1000px;height: 1000px;" [dataTable]="dataTable" 
+    [gridConfig]="gridConfig">
+</fusion-grid>`;
+````
+## Working with Events
+
+To attach event
+
+`<fusion-grid style="width: 1000px;height: 1000px;" [dataTable]="dataTable" 
+    [gridConfig]="gridConfig" (initialized)="initialized($event)">
+</fusion-grid>`
+

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

44

increased by91.3%

Lines of code

1019

increased by5.27%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

165

increased by560%

Worsened metrics

Total package byte prevSize

40736

decreased by-69.54%

Dependency count

11

increased by266.67%

Dev dependency count

19

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@angular/animations@~11.2.10

• + Added@angular/common@~11.2.10

• + Added@angular/compiler@~11.2.10

• + Added@angular/core@~11.2.10

• + Added@angular/forms@~11.2.10

• + Added@angular/platform-browser@~11.2.10

• + Added@angular/platform-browser-dynamic@~11.2.10

• + Added@angular/router@~11.2.10

• + Addedrxjs@~6.6.0

• + Addedzone.js@~0.11.3

• + Added@angular/animations@11.2.14(transitive)

• + Added@angular/compiler@11.2.14(transitive)

• + Added@angular/forms@11.2.14(transitive)

• + Added@angular/platform-browser@11.2.14(transitive)

• + Added@angular/platform-browser-dynamic@11.2.14(transitive)

• + Added@angular/router@11.2.14(transitive)