@syncfusion/ej2-angular-heatmap
Advanced tools
Comparing version 20.4.38-ngcc to 20.4.38
{ | ||
"_from": "@syncfusion/ej2-angular-heatmap@*", | ||
"_id": "@syncfusion/ej2-angular-heatmap@18.13.14", | ||
"_id": "@syncfusion/ej2-angular-heatmap@20.2.45", | ||
"_inBundle": false, | ||
"_integrity": "sha512-BciMUtOsAtYaKHU4YMqT0rXg7IdzwckltnYeMM/rNHMeXByKgqfbhfv64kDxDDFCtx12aOAB9muJAlemsfK9Qw==", | ||
"_integrity": "sha512-Q8/y3UlFg9Essv8k2tkHHZDDAk3nbtNag+VPEMUiJCx7LLtrtTFPneDng2Vgtl2O65j0zDuY3VgBEZPJo8qr0Q==", | ||
"_location": "/@syncfusion/ej2-angular-heatmap", | ||
@@ -22,6 +22,6 @@ "_phantomChildren": {}, | ||
], | ||
"_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-angular-heatmap/-/ej2-angular-heatmap-18.13.14.tgz", | ||
"_shasum": "00174b43d7d139d2ab7b6aa8fc5d4e9b9295068c", | ||
"_resolved": "https://nexus.syncfusion.com/repository/ej2-angular-release/@syncfusion/ej2-angular-heatmap/-/ej2-angular-heatmap-20.2.45.tgz", | ||
"_shasum": "652f6b27b380d9601ca125145476e2f7f7f90849", | ||
"_spec": "@syncfusion/ej2-angular-heatmap@*", | ||
"_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included", | ||
"_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/ivypackages/included", | ||
"author": { | ||
@@ -37,16 +37,30 @@ "name": "Syncfusion Inc." | ||
"@syncfusion/ej2-base": "~20.4.38", | ||
"@syncfusion/ej2-heatmap": "20.4.38" | ||
"@syncfusion/ej2-heatmap": "20.4.38", | ||
"tslib": "^2.3.0" | ||
}, | ||
"deprecated": false, | ||
"description": "Feature rich data visulization control used to visualize the matrix data where the individual values are represented as colors for Angular", | ||
"devDependencies": {}, | ||
"es2015": "@syncfusion/ej2-angular-heatmap.js", | ||
"es2020": "fesm2020/syncfusion-ej2-angular-heatmap.mjs", | ||
"esm2020": "esm2020/syncfusion-ej2-angular-heatmap.mjs", | ||
"exports": { | ||
"./package.json": { | ||
"default": "./package.json" | ||
}, | ||
".": { | ||
"types": "./syncfusion-ej2-angular-heatmap.d.ts", | ||
"esm2020": "./esm2020/syncfusion-ej2-angular-heatmap.mjs", | ||
"es2020": "./fesm2020/syncfusion-ej2-angular-heatmap.mjs", | ||
"es2015": "./fesm2015/syncfusion-ej2-angular-heatmap.mjs", | ||
"node": "./fesm2015/syncfusion-ej2-angular-heatmap.mjs", | ||
"default": "./fesm2020/syncfusion-ej2-angular-heatmap.mjs" | ||
} | ||
}, | ||
"fesm2015": "fesm2015/syncfusion-ej2-angular-heatmap.mjs", | ||
"fesm2020": "fesm2020/syncfusion-ej2-angular-heatmap.mjs", | ||
"homepage": "https://github.com/syncfusion/ej2-angular-ui-components#readme", | ||
"keywords": [ | ||
"ej2", | ||
"syncfusion", | ||
"web components", | ||
"data visualization", | ||
"heatmap", | ||
"heatmap chart", | ||
"Syncfusion", | ||
"web-components", | ||
"data", | ||
"matrix chart", | ||
@@ -56,15 +70,2 @@ "grid chart", | ||
"bubble heatmap", | ||
"calendar heatmap", | ||
"rectangular heatmap", | ||
"sector heatmap", | ||
"axis", | ||
"datetime axis", | ||
"category axis", | ||
"numeric axis", | ||
"labels", | ||
"multi-level labels", | ||
"selection", | ||
"palette", | ||
"colors", | ||
"legend", | ||
"angular", | ||
@@ -76,5 +77,3 @@ "ng", | ||
"license": "SEE LICENSE IN license", | ||
"main": "dist/ej2-angular-heatmap.umd.js", | ||
"metadata": "ej2-angular-heatmap.metadata.json", | ||
"module": "@syncfusion/ej2-angular-heatmap.es5.js", | ||
"module": "fesm2015/syncfusion-ej2-angular-heatmap.mjs", | ||
"name": "@syncfusion/ej2-angular-heatmap", | ||
@@ -87,4 +86,4 @@ "repository": { | ||
"sideEffects": false, | ||
"typings": "ej2-angular-heatmap.d.ts", | ||
"version": "20.4.38-ngcc" | ||
"typings": "syncfusion-ej2-angular-heatmap.d.ts", | ||
"version": "20.4.38" | ||
} |
134
README.md
@@ -1,43 +0,15 @@ | ||
# Angular HeatMap Component | ||
# ej2-angular-heatmap | ||
The [Angular HeatMap](https://www.syncfusion.com/angular-components/angular-heatmap-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-heatmap-npm) component is a graphical representation of two-dimensional data where the values are represented with gradient or solid color variations. The data points are rendered as HeatMap cells using Scalable Vector Graphics (SVG) or canvas UI rendering. | ||
The Heat map control is used to visualize a two-dimensional data in which the values are represented in gradient or fixed colors. | ||
<p align="center"> | ||
<a href="https://ej2.syncfusion.com/angular/documentation/heatmap-chart/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-heatmap-npm">Getting started</a> . | ||
<a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-heatmap-npm#/material/heatmap-chart/default">Online demos</a> . | ||
<a href="https://www.syncfusion.com/angular-components/angular-heatmap-chart?utm_source=npm&utm_medium=listing&utm_campaign=angular-heatmap-npm">Learn more</a> | ||
</p> | ||
![Heat Map](https://ej2.syncfusion.com/products/images/heatmap/readme.gif) | ||
<p align="center"> | ||
<img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-heatmap-chart.png" alt="Angular HeatMap Component"> | ||
</p> | ||
> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials). | ||
<p align="center"> | ||
Trusted by the world's leading companies | ||
<a href="https://www.syncfusion.com"> | ||
<img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Bootstrap logo"> | ||
</a> | ||
</p> | ||
> A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. | ||
## Setup | ||
### Create an Angular Application | ||
To install Heat map and its dependent packages, use the following command | ||
You can use [Angular CLI](https://github.com/angular/angular-cli) to setup your Angular applications. To install the Angular CLI, use the following command. | ||
```bash | ||
npm install -g @angular/cli | ||
``` | ||
Create a new Angular application using the following Angular CLI command. | ||
```bash | ||
ng new my-app | ||
cd my-app | ||
``` | ||
### Adding Syncfusion HeatMap package | ||
All Syncfusion Angular packages are available in [npmjs.com](https://www.npmjs.com/~syncfusionorg). To install the Angular HeatMap package, use the following command. | ||
```sh | ||
@@ -47,91 +19,51 @@ npm install @syncfusion/ej2-angular-heatmap | ||
The above command does the below configuration to your Angular app. | ||
## Resources | ||
* Adds `@syncfusion/ej2-angular-heatmap` package and its peer dependencies to your `package.json` file. | ||
* Imports the `HeatMapModule` in your application module `app.module.ts`. | ||
* Registers the Syncfusion UI default theme (material) in the `angular.json` file. | ||
* [Getting Started](https://ej2.syncfusion.com/angular/documentation/heatmap/getting-started.html) | ||
* [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=heatmap#/material/heatmap/default) | ||
* [Product Page](https://www.syncfusion.com/products/angular/heatmap) | ||
This makes it easy to add the Syncfusion Angular HeatMap module to your project and start using it in your application. | ||
## Supported Frameworks | ||
### Add HeatMap component | ||
Heat map component is also offered in following list of frameworks. | ||
In **src/app/app.component.ts**, use `<ejs-heatmap>` selector in the `template` attribute of the `@Component` directive to render the Syncfusion Angular HeatMap component. | ||
1. [React](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/heatmap?utm_source=npm&utm_campaign=heatmap) | ||
2. [VueJS](https://github.com/syncfusion/ej2-vue-ui-components/tree/master/components/heatmap?utm_source=npm&utm_campaign=heatmap) | ||
3. [ASP.NET Core](https://www.syncfusion.com/products/aspnetcore/heatmap) | ||
4. [ASP.NET MVC](https://www.syncfusion.com/products/aspnetmvc/heatmap) | ||
5. [JavaScript (ES5)](https://www.syncfusion.com/products/javascript/heatmap) | ||
```typescript | ||
import { Component, ViewEncapsulation } from '@angular/core'; | ||
import { HeatMap } from '@syncfusion/ej2-heatmap'; | ||
@Component({ | ||
selector: 'my-app', | ||
template: | ||
`<ejs-heatmap id='container' style="display:block;" [dataSource]='dataSource'> | ||
</ejs-heatmap>`, | ||
encapsulation: ViewEncapsulation.None | ||
}) | ||
export class AppComponent{ | ||
dataSource: Object[] = [ | ||
[73, 39, 26, 39, 94, 0], | ||
[93, 58, 53, 38, 26, 68], | ||
[99, 28, 22, 4, 66, 90], | ||
[14, 26, 97, 69, 69, 3], | ||
[7, 46, 47, 47, 88, 6], | ||
[41, 55, 73, 23, 3, 79], | ||
[56, 69, 21, 86, 3, 33], | ||
[45, 7, 53, 81, 95, 79], | ||
[60, 77, 74, 68, 88, 51], | ||
[25, 25, 10, 12, 78, 14], | ||
[25, 56, 55, 58, 12, 82], | ||
[74, 33, 88, 23, 86, 59] | ||
]; | ||
} | ||
``` | ||
## Showcase samples | ||
## Supported frameworks | ||
* Annual Flight Traffic Report ([Live Demo](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=heatmap#/material/heatmap/large-data)) | ||
HeatMap component is also offered in the following list of frameworks. | ||
## Key Features | ||
| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/> [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/react.svg" height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/> [React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/> [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/> [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github) | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/> [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github) | | ||
| :-----: | :-----: | :-----: | :-----: | :-----: | | ||
* [**Axis Types**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=heatmap#/material/heatmap/array-row.html) - Supports three different types of axes to populate the data, namely Numerical, Categorical,and Datetime. | ||
## Showcase samples | ||
* [**Axis Feature**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=heatmap#/material/heatmap/opposed.html) - Supports inverted axis, opposed position and axis intervals. | ||
* Annual Flight Traffic Report - [Live Demo](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=angular-heatmap-npm#/material/heatmap-chart/large-data) | ||
* Expense Tracker - [Source](https://github.com/syncfusion/ej2-showcase-angular-expensetracker?utm_source=npm&utm_medium=listing&utm_campaign=angular-heatmap-npm), [Live Demo](https://ej2.syncfusion.com/showcase/angular/expensetracker/#/dashboard?utm_source=npm&utm_medium=listing&utm_campaign=angular-heatmap-npm) | ||
* Loan Calculator - [Source](https://github.com/syncfusion/ej2-sample-ng-loancalculator?utm_source=npm&utm_medium=listing&utm_campaign=angular-heatmap-npm), [Live Demo](https://ej2.syncfusion.com/showcase/angular/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=angular-heatmap-npm) | ||
* Fitness Tracker - [Source](https://github.com/SyncfusionExamples/showcase-angular-health-tracker-dashboard-demo), [Live Demo](https://ej2.syncfusion.com/showcase/angular/fitness-tracker-app/) | ||
* [**Legend**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=heatmap#/material/heatmap/legend.html) - Supports legend which provides value information for the colors which represents each values in HeatMap. | ||
## Key features | ||
* [**Data Binding**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=heatmap#/material/heatmap/cell-json.html) - Supports binding data in JSON and two-dimensional array formats. | ||
* [Data binding](https://ej2.syncfusion.com/angular/documentation/heatmap-chart/working-with-data/?utm_source=npm&utm_campaign=angular-heatmap-npm): Binding data in JSON and two-dimensional array formats is supported. | ||
* [Axis types](https://ej2.syncfusion.com/angular/documentation/heatmap-chart/axis/?utm_source=npm&utm_campaign=angular-heatmap-npm#types): Supports three different types of axes to populate the data, namely Numerical, Categorical and DateTime. | ||
* [Axis](https://ej2.syncfusion.com/angular/documentation/heatmap-chart/axis/?utm_source=npm&utm_campaign=angular-heatmap-npm#inversed-axis): Supports inverted axis, opposed position and axis intervals. | ||
* [Rendering modes](https://ej2.syncfusion.com/angular/documentation/heatmap-chart/rendering-mode/?utm_source=npm&utm_campaign=angular-heatmap-npm): Supports automatic switching between SVG and Canvas rendering modes based on the data source length. | ||
* [Palette](https://ej2.syncfusion.com/angular/documentation/heatmap-chart/palette/?utm_source=npm&utm_campaign=angular-heatmap-npm): Different colors are provided for different value ranges to be used in the cells. | ||
* [Legend](https://ej2.syncfusion.com/angular/documentation/heatmap-chart/legend/?utm_source=npm&utm_campaign=angular-heatmap-npm): Summarizes the information for the colors which represents each values in HeatMap. | ||
* [Tooltip](https://ej2.syncfusion.com/angular/documentation/heatmap-chart/tooltip/?utm_source=npm&utm_campaign=angular-heatmap-npm): Provides information about the cell values on hover. | ||
* [Selection](https://ej2.syncfusion.com/angular/documentation/heatmap-chart/selection/?utm_source=npm&utm_campaign=angular-heatmap-npm): Supports selecting the cells that will be the center of attraction. | ||
* [Templates](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=angular-heatmap-npm#/material/heatmap-chart/tooltip-template): Templates can be used to create custom user experience in the tooltip of the heatmap. | ||
* [**Rendering Modes**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_campaign=heatmap#/material/heatmap/render-mode.html) - Supports automatic switching between SVG and Canvas rendering modes based on the data source length. | ||
## Support | ||
Product support is available through the following mediums. | ||
Product support is available for through following mediums. | ||
* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support | ||
* [Community forum](https://www.syncfusion.com/forums/angular-js2?utm_source=npm&utm_medium=listing&utm_campaign=angular-heatmap-npm) | ||
* [GitHub issues](https://github.com/syncfusion/ej2-angular-ui-components/issues/new) | ||
* [Request feature or report bug](https://www.syncfusion.com/feedback/angular?utm_source=npm&utm_medium=listing&utm_campaign=angular-heatmap-npm) | ||
* Live chat | ||
* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=heatmap) support system or [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_campaign=heatmap). | ||
* New [GitHub issue](https://github.com/syncfusion/ej2-angular-ui-components/issues/new). | ||
* Ask your query in Stack Overflow with tag `syncfusion`, `ej2`. | ||
## Changelog | ||
## License | ||
Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/heatmap/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates. | ||
Check the license detail [here](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=heatmap). | ||
## License and copyright | ||
## Changelog | ||
> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [Angular UI components](https://www.syncfusion.com/angular-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). | ||
Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/heatmap/CHANGELOG.md) | ||
> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. | ||
See [LICENSE FILE](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/license?utm_source=npm&utm_campaign=angular-heatmap-npm) for more info. | ||
© Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. |
export declare const pkgName = "@syncfusion/ej2-angular-heatmap"; | ||
export declare const pkgVer = "^18.13.14"; | ||
export declare const pkgVer = "^18.12.0"; | ||
export declare const moduleName = "HeatMapModule"; | ||
export declare const themeVer = "~18.13.14"; | ||
export declare const themeVer = "~18.12.0"; |
import { ValueProvider } from '@angular/core'; | ||
import * as i0 from "@angular/core"; | ||
import * as i1 from "@angular/common"; | ||
import * as i2 from "./heatmap.module"; | ||
export declare const LegendService: ValueProvider; | ||
@@ -9,2 +12,5 @@ export declare const TooltipService: ValueProvider; | ||
export declare class HeatMapAllModule { | ||
static ɵfac: i0.ɵɵFactoryDeclaration<HeatMapAllModule, never>; | ||
static ɵmod: i0.ɵɵNgModuleDeclaration<HeatMapAllModule, never, [typeof i1.CommonModule, typeof i2.HeatMapModule], [typeof i2.HeatMapModule]>; | ||
static ɵinj: i0.ɵɵInjectorDeclaration<HeatMapAllModule>; | ||
} |
import { ElementRef, ViewContainerRef, Renderer2, Injector } from '@angular/core'; | ||
import { IComponentBase } from '@syncfusion/ej2-angular-base'; | ||
import { HeatMap } from '@syncfusion/ej2-heatmap'; | ||
import * as i0 from "@angular/core"; | ||
export declare const inputs: string[]; | ||
@@ -37,2 +38,4 @@ export declare const outputs: string[]; | ||
addTwoWay: (propList: string[]) => void; | ||
static ɵfac: i0.ɵɵFactoryDeclaration<HeatMapComponent, never>; | ||
static ɵcmp: i0.ɵɵComponentDeclaration<HeatMapComponent, "ejs-heatmap", never, { "allowSelection": "allowSelection"; "cellSettings": "cellSettings"; "dataSource": "dataSource"; "dataSourceSettings": "dataSourceSettings"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "height": "height"; "legendSettings": "legendSettings"; "locale": "locale"; "margin": "margin"; "paletteSettings": "paletteSettings"; "renderingMode": "renderingMode"; "showTooltip": "showTooltip"; "theme": "theme"; "titleSettings": "titleSettings"; "tooltipSettings": "tooltipSettings"; "width": "width"; "xAxis": "xAxis"; "yAxis": "yAxis"; }, { "cellClick": "cellClick"; "cellRender": "cellRender"; "cellSelected": "cellSelected"; "created": "created"; "legendRender": "legendRender"; "load": "load"; "loaded": "loaded"; "resized": "resized"; "tooltipRender": "tooltipRender"; }, never, never>; | ||
} |
@@ -0,1 +1,4 @@ | ||
import * as i0 from "@angular/core"; | ||
import * as i1 from "./heatmap.component"; | ||
import * as i2 from "@angular/common"; | ||
/** | ||
@@ -5,2 +8,5 @@ * NgModule definition for the HeatMap component. | ||
export declare class HeatMapModule { | ||
static ɵfac: i0.ɵɵFactoryDeclaration<HeatMapModule, never>; | ||
static ɵmod: i0.ɵɵNgModuleDeclaration<HeatMapModule, [typeof i1.HeatMapComponent], [typeof i2.CommonModule], [typeof i1.HeatMapComponent]>; | ||
static ɵinj: i0.ɵɵInjectorDeclaration<HeatMapModule>; | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Minified code
QualityThis 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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
0
0
106130
4
78
1636
68
+ Addedtslib@^2.3.0
+ Addedtslib@2.8.1(transitive)