Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@syncfusion/ej2-angular-heatmap

Package Overview
Dependencies
Maintainers
3
Versions
145
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@syncfusion/ej2-angular-heatmap - npm Package Compare versions

Comparing version 20.4.38-ngcc to 20.4.38

esm2020/public_api.mjs

61

package.json
{
"_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"
}

@@ -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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<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/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<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/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; |
| :-----: | :-----: | :-----: | :-----: | :-----: |
* [**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>;
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc