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

@syncfusion/ej2-heatmap

Package Overview
Dependencies
Maintainers
3
Versions
107
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@syncfusion/ej2-heatmap - npm Package Compare versions

Comparing version 22.2.10 to 23.1.36

13

CHANGELOG.md

@@ -7,2 +7,11 @@ # Changelog

#### New Features
- `#I450186` - HeatMap's axis labels can now include line break characters.
- `#I287338` - Label templates can be displayed in place of cell labels to provide additional information.
## 22.2.10 (2023-08-22)
### HeatMap
#### Bug fixes

@@ -27,3 +36,3 @@

- `#F182203` - The data points in the JSON data will now be properly mapped in the HeatMap using the cell adapter with `maximum` and `minimum` properties set in the x-axis.
- `#F182203` - The data points in the JSON data will now be properly mapped in the HeatMap using the cell adapter with `maximum` and `minimum` properties set in the x-axis.

@@ -44,3 +53,3 @@ ## 21.2.4 (2023-05-09)

- `#I452356` - When the x-axis labels are trimmed and rotated, the HeatMap cell area now renders properly.
- `#I452356` - When the x-axis labels are trimmed and rotated, the HeatMap cell area now renders properly.

@@ -47,0 +56,0 @@ ## 21.1.35 (2023-03-23)

2

dist/global/index.d.ts
/*!
* filename: index.d.ts
* version : 22.2.10
* version : 23.1.36
* Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.

@@ -5,0 +5,0 @@ * Use of this code is subject to the terms of our license.

26

package.json
{
"_from": "@syncfusion/ej2-heatmap@*",
"_id": "@syncfusion/ej2-heatmap@22.2.5",
"_id": "@syncfusion/ej2-heatmap@18.14.9",
"_inBundle": false,
"_integrity": "sha512-jrAu57Xl4BuT3T4cGjREKYancWBOun8RZ9SD1v0hpRuMizl81Lu1sCmX2PXZOuvGH3FqxvrAoRJxoGz5MfXucw==",
"_integrity": "sha512-4MQiis3pCUxHGDd8RV4v0Ry3iIypLLbJXRsOpmt58u/4vbNTppBcNM8edZQeNgYOSchwF8HssLlcyKQ6hE1d2Q==",
"_location": "/@syncfusion/ej2-heatmap",
"_phantomChildren": {
"@syncfusion/ej2-compression": "22.1.34"
"@syncfusion/ej2-compression": "0.17.0"
},

@@ -28,6 +28,6 @@ "_requested": {

],
"_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-heatmap/-/ej2-heatmap-22.2.5.tgz",
"_shasum": "a50840e038f45d0104a5cfa3ce44fc9db8feac15",
"_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-heatmap/-/ej2-heatmap-18.14.9.tgz",
"_shasum": "2489cb87ad00cac964d8f279821a5872bafa53ab",
"_spec": "@syncfusion/ej2-heatmap@*",
"_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
"_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
"author": {

@@ -38,8 +38,8 @@ "name": "Syncfusion Inc."

"dependencies": {
"@syncfusion/ej2-base": "~22.2.10",
"@syncfusion/ej2-compression": "~22.2.5",
"@syncfusion/ej2-data": "~22.2.5",
"@syncfusion/ej2-file-utils": "~22.2.5",
"@syncfusion/ej2-pdf-export": "~22.2.5",
"@syncfusion/ej2-svg-base": "~22.2.8"
"@syncfusion/ej2-base": "~23.1.36",
"@syncfusion/ej2-compression": "~23.1.36",
"@syncfusion/ej2-data": "~23.1.36",
"@syncfusion/ej2-file-utils": "~23.1.36",
"@syncfusion/ej2-pdf-export": "~23.1.36",
"@syncfusion/ej2-svg-base": "~23.1.36"
},

@@ -85,4 +85,4 @@ "deprecated": false,

"typings": "index.d.ts",
"version": "22.2.10",
"version": "23.1.36",
"sideEffects": false
}

3

src/heatmap/axis/axis-helpers.d.ts

@@ -46,2 +46,5 @@ /**

private drawXAxisLabels;
private getWrappedLabels;
private getMaxLabel;
private getLabels;
private drawYAxisLabels;

@@ -48,0 +51,0 @@ private drawXAxisBorder;

168

src/heatmap/axis/axis-helpers.js

@@ -1,2 +0,2 @@

import { Rect, Size, measureText, TextOption, rotateTextSize, textTrim, CanvasTooltip, PathOption, textWrap } from '../utils/helper';
import { Rect, Size, measureText, TextOption, rotateTextSize, textTrim, CanvasTooltip, PathOption, textWrap, getIsLineBreakLabel } from '../utils/helper';
import { sum, titlePositionX, LineOption, Line, DrawSvgCanvas, TextBasic, titlePositionY, getTitle } from '../utils/helper';

@@ -200,2 +200,3 @@ import { extend, Browser, isNullOrUndefined } from '@syncfusion/ej2-base';

var labels = axis.axisLabels;
var isLineBreak = false;
var borderWidth = this.heatMap.cellSettings.border.width > 5 ? (this.heatMap.cellSettings.border.width / 2) : 0;

@@ -236,20 +237,24 @@ var interval = (rect.width - borderWidth) / axis.axisLabelSize;

}
isLineBreak = getIsLineBreakLabel(labels);
for (var i = 0, len = labels.length; i < len; i++) {
var lableRect = new Rect(lableStrtX, rect.y, interval, rect.height);
var label = (axis.textStyle.textOverflow !== 'Wrap' && axis.textStyle.textOverflow !== 'Trim' && axis.labelIntersectAction === 'Trim' && axis.isIntersect) ? axis.valueType !== 'DateTime' ||
var label = (axis.textStyle.textOverflow !== 'Wrap' && !(isLineBreak) && axis.textStyle.textOverflow !== 'Trim' && axis.labelIntersectAction === 'Trim' && axis.isIntersect) ? axis.valueType !== 'DateTime' ||
axis.showLabelOn === 'None' ? textTrim(interval * axisInterval, labels[i], axis.textStyle) :
textTrim(axis.dateTimeAxisLabelInterval[i] * interval, labels[i], axis.textStyle) : labels[i];
label = (axis.enableTrim || axis.textStyle.textOverflow === 'Trim') ? textTrim((axis.textStyle.textOverflow === 'Trim' ? interval - (axis.border.width / 2) : axis.maxLabelLength), labels[i], axis.textStyle) : label;
label = ((axis.enableTrim || axis.textStyle.textOverflow === 'Trim') && !isLineBreak) ? textTrim((axis.textStyle.textOverflow === 'Trim' ? interval - (axis.border.width / 2) : axis.maxLabelLength), labels[i], axis.textStyle) : label;
var wrappedLabel = label;
if (axis.textStyle.textOverflow === 'Wrap') {
var wrappedlabels = textWrap(wrappedLabel, interval - (axis.border.width / 2), axis.textStyle);
var labelWidth = 0;
var wrappedlabelSize = new Size(0, 0);
for (var index = 0; index < wrappedlabels.length; index++) {
wrappedlabelSize = measureText(wrappedlabels[index], axis.textStyle);
if (wrappedlabelSize.width > labelWidth) {
labelWidth = wrappedlabelSize.width;
wrappedLabel = wrappedlabels[index];
}
var wrappedlabels = [];
var rotateSize = new Size(0, 0);
if ((axis.textStyle.textOverflow === 'Wrap' || isLineBreak) && !axis.enableTrim) {
wrappedlabels = this.getLabels(wrappedLabel, interval - (axis.border.width / 2), axis, isLineBreak);
wrappedLabel = this.getMaxLabel(wrappedlabels, axis);
}
else {
if (isLineBreak && axis.enableTrim) {
wrappedlabels = this.getLabels(wrappedLabel, interval - (axis.border.width / 2), axis, isLineBreak);
wrappedLabel = textTrim(axis.maxLabelLength, wrappedlabels[0], axis.textStyle);
wrappedLabel = (label.indexOf('<br>') !== -1 || label.indexOf('<br/>') !== -1) && wrappedLabel.indexOf('...') === -1 ? wrappedLabel + '...' : wrappedLabel;
wrappedlabels = [];
}
wrappedlabels.push(wrappedLabel);
}

@@ -261,3 +266,3 @@ var elementSize = measureText(wrappedLabel, axis.textStyle);

var x = lableRect.x + ((!axis.isInversed) ?
(lableRect.width / 2) - (elementSize.width / 2) : -((lableRect.width / 2) + (elementSize.width / 2)));
(lableRect.width / 2) : -((lableRect.width / 2)));
if (axis.textStyle.textAlignment === 'Near') {

@@ -277,3 +282,3 @@ x = lableRect.x - ((!axis.isInversed) ? 0 : lableRect.width);

}
if (axis.textStyle.textOverflow === 'Wrap' && !axis.isInversed) {
if ((axis.textStyle.textOverflow === 'Wrap' || isLineBreak) && !axis.isInversed) {
x = x < lableRect.x ? lableRect.x : x;

@@ -295,3 +300,3 @@ }

else {
y = rect.y + (axis.textStyle.textOverflow === 'Wrap' && axis.opposedPosition && angle % 360 === 0 ? -(axis.farSizes.length >= 1 ? axis.farSizes[1] : 0) + padding : labelPadding);
y = rect.y + ((axis.textStyle.textOverflow === 'Wrap' || isLineBreak) && axis.opposedPosition && angle % 360 === 0 ? -(axis.farSizes.length >= 1 ? axis.farSizes[1] : 0) + padding : labelPadding);
}

@@ -301,6 +306,12 @@ this.drawXAxisBorder(axis, borderElement, axis.rect, x, elementSize.width, i);

angle = (angle > 360) ? angle % 360 : angle;
var rotateSize = rotateTextSize(axis.textStyle, wrappedLabel, angle);
x = lableRect.x + (axis.isInversed ? -(lableRect.width / 2) : (lableRect.width / 2));
y = y + (axis.opposedPosition ? ((axis.textStyle.textOverflow === 'Wrap' ? (rotateSize.height / 2) - (axis.farSizes.length >= 1 ? axis.farSizes[1] : 0) : -(rotateSize.height / 2)) + (axis.border.width / 2)) :
(((angle % 360) === 180 || (angle % 360) === -180) ? 0 : (rotateSize.height / 2) - (axis.border.width)));
rotateSize = rotateTextSize(axis.textStyle, wrappedlabels, angle);
/* eslint-disable max-len */
x = lableRect.x + (axis.isInversed ? -(lableRect.width / 2) : (lableRect.width / 2)) + (angle === 90 ? (elementSize.height * ((wrappedlabels.length - 1) / 2)) : angle === 270 ? -(elementSize.height * (wrappedlabels.length - 1) / 2) : 0);
/* eslint-disable max-len */
y = y + (axis.opposedPosition ? (((axis.textStyle.textOverflow === 'Wrap' || isLineBreak) && !axis.enableTrim ? (((angle % 360) === 180) ? padding : 0) + (rotateSize.height / 2) - (axis.farSizes.length >= 1 ? axis.farSizes[1] : 0) : -(rotateSize.height / 2)) + (axis.border.width / 2)) :
(((angle % 360) === 0) ? 0 : ((angle % 360) === 180) ? (rotateSize.height / 2) - (axis.border.width) + padding : (rotateSize.height / 2) - (axis.border.width)));
if (wrappedlabels.length > 1) {
y = y - ((angle > 0 && angle < 80) || (angle > 300 && angle < 360) ? elementSize.height * ((wrappedlabels.length - 1) / 2) : (angle > 120 && angle < 240) && angle !== 180 && wrappedlabels.length > 2 ? -(elementSize.height * ((wrappedlabels.length - 2) / 2)) : 0);
x = x + ((angle > 0 && angle < 70) ? elementSize.height * ((wrappedlabels.length - 1) / 2) : 0);
}
transform = 'rotate(' + angle + ',' + x + ',' + y + ')';

@@ -322,9 +333,12 @@ }

x - (axis.border.width / 2) : x;
var options = new TextOption(heatMap.element.id + '_XAxis_Label' + i, new TextBasic(x, y, (angle % 360 === 0) ? 'start' : 'middle', label, angle, transform), axis.textStyle, axis.textStyle.color || heatMap.themeStyle.axisLabel);
options.text = getTitle(options.text, axis.textStyle, lableRect.width - (axis.border.width / 2));
x = (angle % 360 === 0) && axis.textStyle.textAlignment === 'Center' && elementSize.width > interval ? lableRect.x + ((!axis.isInversed) ?
(elementSize.width / 2) : -((elementSize.width / 2))) : x;
var options = new TextOption(heatMap.element.id + '_XAxis_Label' + i, new TextBasic(x, y, (angle % 360 === 0) ? axis.textStyle.textAlignment === 'Center' ? 'middle' : 'start' : 'middle', label, angle, transform), axis.textStyle, axis.textStyle.color || heatMap.themeStyle.axisLabel);
/* eslint-disable max-len */
options.text = isLineBreak ? wrappedlabels : getTitle(options.text, axis.textStyle, lableRect.width - (axis.border.width / 2));
if (angle !== 0 && this.heatMap.enableCanvasRendering) {
this.drawSvgCanvas.canvasDrawText(options, label);
this.drawSvgCanvas.canvasDrawText(options, null, null, null, wrappedlabels, elementSize.height, true);
}
else {
if (axis.textStyle.textOverflow === 'Wrap') {
if (axis.textStyle.textOverflow === 'Wrap' || isLineBreak) {
this.drawSvgCanvas.createWrapText(options, axis.textStyle, labelElement);

@@ -346,3 +360,6 @@ }

if (wrappedLabel.indexOf('...') !== -1) {
this.heatMap.tooltipCollection.push(new CanvasTooltip(labels[i], new Rect(x, y - elementSize.height, elementSize.width, elementSize.height)));
var xValue = axis.angle % 360 !== 0 ? x - (rotateSize.width / 2) : (axis.textStyle.textAlignment === 'Center' ? x - (elementSize.width / 2) : x);
var yValue = y - (axis.angle % 360 !== 0 ? (rotateSize.height / 2) : elementSize.height);
label = labels[i].indexOf('<br>') !== -1 || labels[i].indexOf('<br/>') !== -1 ? labels[i].replace(/<br\s*\/?>/g, ' ') : labels[i];
this.heatMap.tooltipCollection.push(new CanvasTooltip(label, new Rect(xValue, yValue, axis.angle % 360 !== 0 ? rotateSize.width : elementSize.width, axis.angle % 360 !== 0 ? rotateSize.height : elementSize.height * wrappedlabels.length)));
}

@@ -358,2 +375,33 @@ if (compactInterval !== 0) {

};
AxisHelper.prototype.getWrappedLabels = function (wrappedLabel, labelInterval, axis) {
var wrappedlabels = wrappedLabel.split(/<br\s*\/?>/, -1);
for (var i = 0; i < wrappedlabels.length; i++) {
var label = wrappedlabels[i];
wrappedlabels[i] = textTrim(labelInterval, label, axis.textStyle);
}
return wrappedlabels;
};
AxisHelper.prototype.getMaxLabel = function (wrappedlabels, axis) {
var label = '';
var labelWidth = 0;
var wrappedlabelSize = new Size(0, 0);
for (var index = 0; index < wrappedlabels.length; index++) {
wrappedlabelSize = measureText(wrappedlabels[index], axis.textStyle);
if (wrappedlabelSize.width > labelWidth) {
labelWidth = wrappedlabelSize.width;
label = wrappedlabels[index];
}
}
return label;
};
AxisHelper.prototype.getLabels = function (label, labelInterval, axis, isLineBreak) {
var wrappedlabels = [];
if (isLineBreak) {
wrappedlabels = this.getWrappedLabels(label, labelInterval, axis);
}
else {
wrappedlabels = textWrap(label, labelInterval, axis.textStyle);
}
return wrappedlabels;
};
AxisHelper.prototype.drawYAxisLabels = function (axis, parent, rect) {

@@ -381,2 +429,3 @@ var heatMap = this.heatMap;

var padding = 10;
var labelPadding = 5;
var lableStartY = rect.y + (axis.isInversed ? 0 : rect.height);

@@ -391,2 +440,3 @@ var anchor = axis.opposedPosition ? 'start' : 'end';

}
var isLineBreak = getIsLineBreakLabel(labels);
for (var i = 0, len = labels.length; i < len; i++) {

@@ -398,9 +448,11 @@ var labelRect = new Rect(rect.x, lableStartY, rect.width, interval);

(((this.heatMap.cellSettings.border.width / 2) / len) * (axis.isInversed ? (i) : (len - i))) : 0;
label = (axis.enableTrim || axis.textStyle.textOverflow === 'Trim') ? textTrim(axis.maxLabelLength, labels[i], axis.textStyle) : labels[i];
label = (axis.enableTrim || axis.textStyle.textOverflow === 'Trim') && !isLineBreak ? textTrim(axis.maxLabelLength, labels[i], axis.textStyle) : labels[i];
var elementSize = measureText(label, axis.textStyle);
var labelLength = 1;
if (axis.textStyle.textOverflow === 'Wrap') {
var wrappedLabel = textWrap(label, axis.maxLabelLength, axis.textStyle);
var wrappedLabel = [];
var rotateSize = new Size(0, 0);
if ((axis.textStyle.textOverflow === 'Wrap' || isLineBreak) && !axis.enableTrim) {
wrappedLabel = this.getLabels(label, axis.maxLabelLength, axis, isLineBreak);
for (var index = 0; index < wrappedLabel.length; index++) {
if ((elementSize.height * wrappedLabel.length) > tempintervel && wrappedLabel.length > 0) {
if ((elementSize.height * wrappedLabel.length) > (tempintervel + (labelPadding)) && wrappedLabel.length > 0 && (axis.angle !== 90 && axis.angle !== 270)) {
wrappedLabel.pop();

@@ -414,10 +466,21 @@ if (wrappedLabel.length > 0) {

}
label = wrappedLabel.length !== 0 ? '' : label;
for (var labelIndex = 0; labelIndex < wrappedLabel.length; labelIndex++) {
label = isNullOrUndefined(label) ? wrappedLabel[labelIndex] : label + ' ' + wrappedLabel[labelIndex];
if (!(isLineBreak)) {
label = wrappedLabel.length !== 0 ? '' : label;
for (var labelIndex = 0; labelIndex < wrappedLabel.length; labelIndex++) {
label = isNullOrUndefined(label) ? wrappedLabel[labelIndex] : label + ' ' + wrappedLabel[labelIndex];
}
}
labelLength = wrappedLabel.length;
}
else {
if (isLineBreak && axis.enableTrim) {
wrappedLabel = this.getLabels(label, axis.maxLabelLength, axis, isLineBreak);
var trimmedLabel = textTrim(axis.maxLabelLength, wrappedLabel[0], axis.textStyle);
label = (label.indexOf('<br>') !== -1 || label.indexOf('<br/>') !== -1) && trimmedLabel.indexOf('...') === -1 ? trimmedLabel + '...' : trimmedLabel;
wrappedLabel = [];
}
wrappedLabel.push(label);
}
var x = labelRect.x + padding + (axis.opposedPosition ? (axis.textStyle.textOverflow === 'Wrap' && axis.angle % 360 !== 0 ? labelLength * (elementSize.height / 2) : 0) + axisWidth : -axisWidth);
if (axis.textStyle.textAlignment === 'Far' && axis.angle === 0) {
if (axis.textStyle.textAlignment === 'Far' && axis.angle % 360 === 0) {
/* eslint-disable max-len */

@@ -427,17 +490,35 @@ position = axis.isInversed ? labelRect.height - (labelLength > 1 ? (elementSize.height * labelLength) - (elementSize.height / 2) : (elementSize.height / 2)) :

}
else if (axis.textStyle.textAlignment === 'Near' && axis.angle === 0) {
else if (axis.textStyle.textAlignment === 'Near' && axis.angle % 360 === 0) {
/* eslint-disable max-len */
position = (axis.isInversed ? elementSize.height / 2 : ((elementSize.height / 2) - labelRect.height)) + (axis.border.width / 2);
}
var y = (labelRect.y - indexValue) + position - ((labelLength > 1 && axis.textStyle.textAlignment === 'Center') || (axis.angle !== 0 && axis.opposedPosition) ? (((elementSize.height * labelLength) / 2) - (elementSize.height / 2)) : 0);
var options = new TextOption(heatMap.element.id + '_YAxis_Label' + i, new TextBasic(x, y, anchor, label, 0, 'rotate(' + axis.angle + ',' + (x) + ',' + (y) + ')', 'middle'), axis.textStyle, axis.textStyle.color || heatMap.themeStyle.axisLabel);
var y = (labelRect.y - indexValue) + position - ((labelLength > 1 && axis.textStyle.textAlignment === 'Center') || (axis.angle % 360 !== 0 && axis.opposedPosition) ? (((elementSize.height * labelLength) / 2) - (elementSize.height / 2)) : 0);
if (axis.angle % 360 !== 0) {
anchor = 'middle';
axis.angle = (axis.angle > 360) ? axis.angle % 360 : axis.angle;
rotateSize = rotateTextSize(axis.textStyle, wrappedLabel, axis.angle);
x = labelRect.x + (axis.opposedPosition ? (rotateSize.width / 2 + padding) : -(rotateSize.width / 2 - padding)) + (axis.angle === 90 ? (elementSize.height * ((wrappedLabel.length - 1) / 2)) : axis.angle === 270 ? -(elementSize.height * (wrappedLabel.length - 1) / 2) : 0);
y = labelRect.y + (axis.isInversed ? (labelRect.height / 2) : (-labelRect.height / 2)) + (axis.angle === 180 ? (elementSize.height * ((wrappedLabel.length - 1) / 2)) : 0);
if (wrappedLabel.length > 1) {
var value = elementSize.height * ((wrappedLabel.length - 1) / 2);
y = y - ((axis.angle > 0 && axis.angle < 60) || (axis.angle > 290 && axis.angle < 360) ? value : (axis.angle > 115 && axis.angle < 240) && axis.angle !== 180 ? -value : 0);
x = x + (axis.angle > 20 && axis.angle < 160 && axis.angle !== 90 ? value : axis.angle > 200 && axis.angle < 330 && axis.angle !== 270 ? -value - (axis.angle > 200 && axis.angle < 240 && !axis.opposedPosition && wrappedLabel.length > 2 ? -(elementSize.height * ((wrappedLabel.length - 2) / 2)) : 0) :
(axis.angle >= 330 && axis.angle < 350 ? -value / 2 : 0));
}
}
var options = new TextOption(heatMap.element.id + '_YAxis_Label' + i, new TextBasic(x, y, anchor, label, axis.angle, 'rotate(' + axis.angle + ',' + (x) + ',' + (y) + ')', 'middle'), axis.textStyle, axis.textStyle.color || heatMap.themeStyle.axisLabel);
if (Browser.isIE && !heatMap.enableCanvasRendering) {
options.dy = '1ex';
}
options.text = getTitle(options.text, axis.textStyle, axis.maxLabelLength);
if (axis.textStyle.textOverflow === 'Wrap') {
this.drawSvgCanvas.createWrapText(options, axis.textStyle, labelElement);
options.text = isLineBreak ? wrappedLabel : getTitle(options.text, axis.textStyle, axis.maxLabelLength);
if (axis.angle !== 0 && this.heatMap.enableCanvasRendering) {
this.drawSvgCanvas.canvasDrawText(options, null, null, null, wrappedLabel, elementSize.height, true);
}
else {
this.drawSvgCanvas.createText(options, labelElement, label);
if (axis.textStyle.textOverflow === 'Wrap' || isLineBreak) {
this.drawSvgCanvas.createWrapText(options, axis.textStyle, labelElement);
}
else {
this.drawSvgCanvas.createText(options, labelElement, label);
}
}

@@ -455,5 +536,8 @@ if (compactInterval === 0) {

this.drawYAxisBorder(axis, borderElement, axis.rect, y, elementSize.height, i);
label = this.getMaxLabel(wrappedLabel, axis);
if (label.indexOf('...') !== -1) {
var xValue = axis.opposedPosition ? x : (x - elementSize.width);
this.heatMap.tooltipCollection.push(new CanvasTooltip(labels[i], new Rect(xValue, y - elementSize.height, elementSize.width, elementSize.height)));
var xValue = axis.opposedPosition ? x : (x - (axis.angle % 360 !== 0 ? (rotateSize.width / 2) : elementSize.width));
var yValue = y - (axis.angle % 360 !== 0 ? (rotateSize.height / 2) : elementSize.height);
label = labels[i].indexOf('<br>') !== -1 || labels[i].indexOf('<br/>') !== -1 ? labels[i].replace(/<br\s*\/?>/g, ' ') : labels[i];
this.heatMap.tooltipCollection.push(new CanvasTooltip(label, new Rect(xValue, yValue, (axis.angle % 360 !== 0 ? rotateSize.width : elementSize.width), (axis.angle % 360 !== 0 ? rotateSize.height : elementSize.height * wrappedLabel.length))));
}

@@ -460,0 +544,0 @@ }

2

src/heatmap/axis/axis-model.d.ts

@@ -1,2 +0,2 @@

import { Property, Complex, ChildProperty, DateFormatOptions, isNullOrUndefined, Collection } from '@syncfusion/ej2-base';import { DataUtil } from '@syncfusion/ej2-data';import { Orientation } from '../utils/enum';import { FontModel, TitleModel, AxisLabelBorderModel, MultiLevelLabelsModel, MultiLevelCategoriesModel } from '../model/base-model';import { Font, Title, AxisLabelBorder, MultiLevelLabels, MultiLevelCategories, MultipleRow } from '../model/base';import { Theme } from '../model/theme';import { Rect, measureText, Size, rotateTextSize, increaseDateTimeInterval, formatValue, textTrim } from '../utils/helper';import { MultiLevelPosition, textWrap } from '../utils/helper';import { ValueType, IntervalType, LabelIntersectAction, LabelType } from '../utils/enum';import { HeatMap } from '../heatmap';
import { Property, Complex, ChildProperty, DateFormatOptions, isNullOrUndefined, Collection } from '@syncfusion/ej2-base';import { DataUtil } from '@syncfusion/ej2-data';import { Orientation } from '../utils/enum';import { FontModel, TitleModel, AxisLabelBorderModel, MultiLevelLabelsModel, MultiLevelCategoriesModel } from '../model/base-model';import { Font, Title, AxisLabelBorder, MultiLevelLabels, MultiLevelCategories, MultipleRow } from '../model/base';import { Theme } from '../model/theme';import { Rect, measureText, Size, rotateTextSize, increaseDateTimeInterval, formatValue, textTrim, getIsLineBreakLabel } from '../utils/helper';import { MultiLevelPosition, textWrap } from '../utils/helper';import { ValueType, IntervalType, LabelIntersectAction, LabelType } from '../utils/enum';import { HeatMap } from '../heatmap';

@@ -3,0 +3,0 @@ /**

61

src/heatmap/axis/axis.js

@@ -27,3 +27,3 @@ var __extends = (this && this.__extends) || (function () {

import { Theme } from '../model/theme';
import { Rect, measureText, Size, rotateTextSize, increaseDateTimeInterval, formatValue, textTrim } from '../utils/helper';
import { Rect, measureText, Size, rotateTextSize, increaseDateTimeInterval, formatValue, textTrim, getIsLineBreakLabel } from '../utils/helper';
import { MultiLevelPosition, textWrap } from '../utils/helper';

@@ -200,2 +200,3 @@ /**

var padding = (axis.border.width > 0 || axis.multiLevelLabels.length > 0) ? 10 : 0;
var labelPadding = 10;
var count = 1;

@@ -207,2 +208,3 @@ var row = 1;

axis.isIntersect = false;
var isLineBreak = getIsLineBreakLabel(labels);
if ((axis.orientation === 'Horizontal' && (axis.labelIntersectAction === 'Rotate45' ||

@@ -229,3 +231,3 @@ (axis.labelRotation % 180 === 0 && axis.labelIntersectAction === 'Trim' || axis.enableTrim)) ||

else if ((startPoint < previousEnd) && axis.labelIntersectAction !== 'MultipleRows') {
if (axis.labelIntersectAction === 'Rotate45' && !axis.enableTrim) {
if (axis.labelIntersectAction === 'Rotate45' && !(isLineBreak) && !axis.enableTrim) {
axis.angle = 45;

@@ -245,3 +247,3 @@ }

else if ((previousStart < endPoint && axis.labelIntersectAction !== 'MultipleRows')) {
if (axis.labelIntersectAction === 'Rotate45' && !axis.enableTrim) {
if (axis.labelIntersectAction === 'Rotate45' && !(isLineBreak) && !axis.enableTrim) {
axis.angle = 45;

@@ -269,3 +271,3 @@ }

var label = void 0;
if (axis.enableTrim || axis.textStyle.textOverflow === 'Trim') {
if (axis.enableTrim || (axis.textStyle.textOverflow === 'Trim' && !(labels[i].indexOf('<br>') !== -1 || labels[i].indexOf('<br/>') !== -1))) {
label = textTrim((axis.textStyle.textOverflow === 'Trim' && axis.orientation === 'Horizontal' ? interval : axis.maxLabelLength), labels[i], axis.textStyle);

@@ -276,11 +278,19 @@ }

}
if (axis.textStyle.textOverflow === 'Wrap') {
var wrappedlabels = [];
if ((axis.textStyle.textOverflow === 'Wrap' || isLineBreak) && !axis.enableTrim) {
var labelInterval = axis.orientation === 'Horizontal' ? interval : axis.maxLabelLength;
var wrappedlabels = textWrap(label, labelInterval, axis.textStyle);
labelLength = wrappedlabels.length > labelLength ? wrappedlabels.length : labelLength;
if (isLineBreak) {
wrappedlabels = label.split(/<br\s*\/?>/, -1);
for (var i_1 = 0; i_1 < wrappedlabels.length; i_1++) {
wrappedlabels[i_1] = textTrim(labelInterval, wrappedlabels[i_1], axis.textStyle);
}
}
else {
wrappedlabels = textWrap(label, labelInterval, axis.textStyle);
}
labelLength = wrappedlabels.length > labelLength && !axis.enableTrim ? wrappedlabels.length : labelLength;
if (axis.orientation === 'Vertical' || (axis.orientation === 'Horizontal' && axis.angle % 180 !== 0)) {
var labelWidth = 0;
var wrappedlabelSize = new Size(0, 0);
for (var index = 0; index < wrappedlabels.length; index++) {
wrappedlabelSize = measureText(wrappedlabels[index], axis.textStyle);
var wrappedlabelSize = measureText(wrappedlabels[index], axis.textStyle);
if (wrappedlabelSize.width > labelWidth) {

@@ -292,5 +302,27 @@ labelWidth = wrappedlabelSize.width;

}
if (axis.orientation === 'Vertical') {
var tempintervel = heatmap.initialClipRect.height / (axis.axisLabelSize / axis.axisLabelInterval);
for (var index = 0; index < wrappedlabels.length; index++) {
if ((measureText(label, axis.textStyle).height * wrappedlabels.length) > (tempintervel - labelPadding) && wrappedlabels.length > 0 && (axis.angle !== 90 && axis.angle !== 270)) {
wrappedlabels.pop();
if (wrappedlabels.length > 0) {
wrappedlabels[wrappedlabels.length - 1] = wrappedlabels[wrappedlabels.length - 1] + '...';
/* eslint-disable max-len */
wrappedlabels[wrappedlabels.length - 1] = textTrim(axis.maxLabelLength, wrappedlabels[wrappedlabels.length - 1], axis.textStyle);
}
}
}
}
}
else {
if (isLineBreak && axis.enableTrim) {
wrappedlabels = label.split(/<br\s*\/?>/, -1);
var trimmedLabel = textTrim(axis.maxLabelLength, wrappedlabels[0], axis.textStyle);
label = (label.indexOf('<br>') !== -1 || label.indexOf('<br/>') !== -1) && trimmedLabel.indexOf('...') === -1 ? trimmedLabel + '...' : trimmedLabel;
wrappedlabels = [];
}
wrappedlabels.push(label);
}
var size = (axis.angle % 180 === 0) ?
measureText(label, axis.textStyle) : rotateTextSize(axis.textStyle, label, axis.angle);
measureText(label, axis.textStyle) : rotateTextSize(axis.textStyle, wrappedlabels, axis.angle);
labelSize.width = (labelSize.width > size.width) ? labelSize.width : size.width;

@@ -408,2 +440,4 @@ if (axis.labelIntersectAction === 'MultipleRows' && axis.orientation === 'Horizontal' && axis.textStyle.textOverflow !== 'Wrap' && axis.textStyle.textOverflow !== 'Trim' && i > 0 && axis.labelRotation === 0) {

var temp;
var format = this.labelFormat;
var isCustom = format.match('{value}') !== null;
if (!isNullOrUndefined(this.minimum) && !isNullOrUndefined(this.maximum) && min > max) {

@@ -416,3 +450,3 @@ temp = min;

for (var i = min; i <= max; i = i + interval) {
var value = !isNullOrUndefined(labels[i]) ? labels[i].toString() : i.toString();
var value = !isNullOrUndefined(labels[i]) ? isCustom ? format.replace('{value}', labels[i].toString()) : labels[i].toString() : isCustom ? format.replace('{value}', i.toString()) : i.toString();
this.axisLabels.push(value);

@@ -423,7 +457,8 @@ }

for (var i = min; i <= max; i = i + interval) {
this.axisLabels.push(i.toString());
var value = isCustom ? format.replace('{value}', i.toString()) : i.toString();
this.axisLabels.push(value);
}
}
for (var i = min; i <= max; i++) {
this.tooltipLabels.push(!isNullOrUndefined(labels[i]) ? labels[i].toString() : i.toString());
this.tooltipLabels.push(!isNullOrUndefined(labels[i]) ? isCustom ? format.replace('{value}', labels[i].toString()) : labels[i].toString() : isCustom ? format.replace('{value}', i.toString()) : i.toString());
this.labelValue.push(!isNullOrUndefined(labels[i]) ? labels[i].toString() : i.toString());

@@ -430,0 +465,0 @@ }

1

src/heatmap/datasource/adaptor.js

@@ -373,2 +373,3 @@ var __extends = (this && this.__extends) || (function () {

labels.indexOf(this.tempSplitDataCollection[tempSplitData[splitIndex]]) :
// eslint-disable-next-line max-len
labels.map(Number).indexOf(+new Date(this.tempSplitDataCollection[tempSplitData[splitIndex]]).setHours(0, 0, 0, 0))) : null;

@@ -375,0 +376,0 @@ if (!isNullOrUndefined(this.tempSplitDataCollection)) {

1

src/heatmap/model/base.js

@@ -304,2 +304,3 @@ var __extends = (this && this.__extends) || (function () {

var BubbleTooltipData = /** @class */ (function () {
// eslint-disable-next-line valid-jsdoc
/**

@@ -306,0 +307,0 @@ * @private

2

src/heatmap/model/theme.js

@@ -214,3 +214,3 @@ /**

axisTitle: '#F3F2F1',
axisLabel: '#201F1E',
axisLabel: '#F3F2F1',
cellBorder: '#EDEBE9',

@@ -217,0 +217,0 @@ background: 'transparent',

11

src/heatmap/series/series-model.d.ts

@@ -1,2 +0,2 @@

import { Property, ChildProperty, extend, merge, Complex, Browser, isNullOrUndefined } from '@syncfusion/ej2-base';import { HeatMap } from '../heatmap';import { Rect, TextBasic, Path, PathAttributes, RectOption, CircleOption, TextOption, CurrentRect, DrawSvgCanvas } from '../utils/helper';import { convertHexToColor, colorNameToHex, formatValue } from '../utils/helper';import { CellColor, RgbColor } from '../utils/colorMapping';import { BorderModel, FontModel, BubbleSizeModel } from '../model/base-model';import { Border, Font, BubbleTooltipData, BubbleSize } from '../model/base';import { ICellEventArgs } from '../model/interface';import { Theme} from '../model/theme';import { CellType, BubbleType } from '../utils/enum';import { DataModel } from '../datasource/adaptor-model';import { Axis } from '../axis/axis';
import { Property, ChildProperty, extend, merge, Complex, Browser, isNullOrUndefined, createElement} from '@syncfusion/ej2-base';import { HeatMap } from '../heatmap';import { Rect, TextBasic, Path, PathAttributes, RectOption, CircleOption, TextOption, CurrentRect, DrawSvgCanvas, createLabelTemplate} from '../utils/helper';import { convertHexToColor, colorNameToHex, formatValue, removeElement} from '../utils/helper';import { CellColor, RgbColor } from '../utils/colorMapping';import { BorderModel, FontModel, BubbleSizeModel } from '../model/base-model';import { Border, Font, BubbleTooltipData, BubbleSize } from '../model/base';import { ICellEventArgs } from '../model/interface';import { Theme} from '../model/theme';import { CellType, BubbleType } from '../utils/enum';import { DataModel } from '../datasource/adaptor-model';import { Axis } from '../axis/axis';

@@ -9,2 +9,11 @@ /**

/**
* Gets or sets the template that will be used to render custom elements for cell values.
*
* @default null
* @aspType string
*/
labelTemplate?: string | Function;
/**
* Enables or disables the visibility of data label over the heatmap cells.

@@ -11,0 +20,0 @@ *

7

src/heatmap/series/series.d.ts

@@ -11,2 +11,9 @@ import { ChildProperty } from '@syncfusion/ej2-base';

/**
* Gets or sets the template that will be used to render custom elements for cell values.
*
* @default null
* @aspType string
*/
labelTemplate: string | Function;
/**
* Enables or disables the visibility of data label over the heatmap cells.

@@ -13,0 +20,0 @@ *

33

src/heatmap/series/series.js

@@ -20,5 +20,5 @@ var __extends = (this && this.__extends) || (function () {

};
import { Property, ChildProperty, extend, merge, Complex, Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
import { Rect, TextBasic, Path, PathAttributes, RectOption, CircleOption, TextOption, CurrentRect, DrawSvgCanvas } from '../utils/helper';
import { convertHexToColor, colorNameToHex, formatValue } from '../utils/helper';
import { Property, ChildProperty, extend, merge, Complex, Browser, isNullOrUndefined, createElement } from '@syncfusion/ej2-base';
import { Rect, TextBasic, Path, PathAttributes, RectOption, CircleOption, TextOption, CurrentRect, DrawSvgCanvas, createLabelTemplate } from '../utils/helper';
import { convertHexToColor, colorNameToHex, formatValue, removeElement } from '../utils/helper';
import { CellColor } from '../utils/colorMapping';

@@ -36,2 +36,5 @@ import { Border, Font, BubbleTooltipData, BubbleSize } from '../model/base';

__decorate([
Property('')
], CellSettings.prototype, "labelTemplate", void 0);
__decorate([
Property(true)

@@ -98,2 +101,3 @@ ], CellSettings.prototype, "showLabel", void 0);

var borderColor;
var templateElement = null;
var displayText;

@@ -106,2 +110,10 @@ this.rectPositionCollection = [];

}
if (!isNullOrUndefined(this.heatMap.cellSettings.labelTemplate) && this.heatMap.cellSettings.labelTemplate !== '') {
if (document.getElementById(this.heatMap.element.id + '_LabelTemplate_Group')) {
removeElement(this.heatMap.element.id + '_LabelTemplate_Group');
}
templateElement = createElement('div', {
id: heatMap.element.id + '_LabelTemplate_Group'
});
}
var circleRadius = this.getBubbleRadius(tempWidth, tempHeight);

@@ -127,3 +139,11 @@ for (var x = 0; x < (heatMap.xLength * heatMap.yLength); x++) {

if (cellSetting.showLabel) {
displayText = this.getFormatedText(this.text, cellSetting.format);
if (isNullOrUndefined(this.heatMap.cellSettings.labelTemplate) || this.heatMap.cellSettings.labelTemplate === '') {
displayText = this.getFormatedText(this.text, cellSetting.format);
}
else {
var rectValue = heatMap.dataSourceSettings.bubbleDataMapping && heatMap.dataSourceSettings.isJsonData && heatMap.dataSourceSettings.adaptorType === 'Cell' && !isNullOrUndefined(rectPosition.value[0]) ? rectPosition.value[0].bubbleData : rectPosition.value;
if (typeof rectValue == 'number' && this.cellColor.getColorByValue(rectValue) !== '#ffffff') {
createLabelTemplate(this.heatMap.cellSettings.labelTemplate, heatMap, templateElement, rectPosition, heatMap.axisCollections[0].axisLabels, heatMap.axisCollections[1].axisLabels.slice().reverse(), x);
}
}
}

@@ -205,2 +225,5 @@ else {

}
if (!isNullOrUndefined(templateElement)) {
document.getElementById(this.heatMap.element.id + '_Secondary_Element').appendChild(templateElement);
}
if (!heatMap.enableCanvasRendering) {

@@ -482,3 +505,3 @@ heatMap.svgObject.appendChild(this.containerRectObject);

Series.prototype.updateLabelVisibleStatus = function (tempWidth, tempHeight, displayText) {
if (this.heatMap.cellSettings.showLabel) {
if (this.heatMap.cellSettings.showLabel && (isNullOrUndefined(this.heatMap.cellSettings.labelTemplate) || this.heatMap.cellSettings.labelTemplate === '')) {
this.checkLabelYDisplay = tempHeight > parseInt(this.heatMap.cellSettings.textStyle.size, 10) ? true : false;

@@ -485,0 +508,0 @@ this.checkLabelXDisplay = tempWidth > (displayText.length *

27

src/heatmap/utils/export.js

@@ -30,2 +30,3 @@ import { createElement, isNullOrUndefined, Browser, print as printWindow } from '@syncfusion/ej2-base';

var element = this.control.svgObject;
var url;
var isCanvas = this.control.enableCanvasRendering;

@@ -47,4 +48,18 @@ var image;

'</svg>';
var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
[(new XMLSerializer()).serializeToString(controlValue.svg)], { type: 'image/svg+xml' }));
if (!isCanvas) {
var exportElement = this.control.svgObject.cloneNode(true);
var backgroundElement = exportElement.childNodes[0];
var backgroundColor = backgroundElement.getAttribute('fill');
if ((this.control.theme === 'Tailwind' || this.control.theme === 'Bootstrap5' || this.control.theme === 'Fluent' || this.control.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
}
else if ((this.control.theme === 'TailwindDark' || this.control.theme === 'Bootstrap5Dark' || this.control.theme === 'FluentDark' || this.control.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');
}
url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
[(new XMLSerializer()).serializeToString(exportElement)], { type: 'image/svg+xml' }));
}
else {
url = element.toDataURL('image/png');
}
if (type === 'SVG') {

@@ -75,3 +90,11 @@ if (Browser.info.name === 'msie') {

var ctx_1 = element.getContext('2d');
var backgroundColor_1 = ctx_1.shadowColor;
image_1.onload = (function () {
if ((_this.control.theme === 'Tailwind' || _this.control.theme === 'Bootstrap5' || _this.control.theme === 'Fluent' || _this.control.theme === 'Material3') && (backgroundColor_1 === 'rgba(0, 0, 0, 0)' || backgroundColor_1 === 'transparent')) {
ctx_1.fillStyle = 'rgba(255,255,255, 1)';
}
else if ((_this.control.theme === 'TailwindDark' || _this.control.theme === 'Bootstrap5Dark' || _this.control.theme === 'FluentDark' || _this.control.theme === 'Material3Dark') && (backgroundColor_1 === 'rgba(0, 0, 0, 0)' || backgroundColor_1 === 'transparent')) {
ctx_1.fillStyle = 'rgba(0, 0, 0, 1)';
}
ctx_1.fillRect(0, 0, element.width, element.height);
ctx_1.drawImage(image_1, 0, 0);

@@ -78,0 +101,0 @@ window.URL.revokeObjectURL(url);

44

src/heatmap/utils/helper.d.ts

@@ -74,2 +74,34 @@ import { FontModel, BorderModel, PaletteCollectionModel } from '../model/base-model';

/**
* Function to check whether target object implement specific interface
*
* @param { string | Function } template - Specifies the template
* @param { HeatMap } heatMap - Specifies the heatmap
* @param { HTMLElement } labelTemplate - Specifies the label template
* @param { any } rectPosition - Specifies the rect datas
* @param { any } xLabels - Specifies the xlabels
* @param { any } yLabels - Specifies the ylabels
* @param { number } index - Specifies the index
* @returns {any} templateFunction - returns the size
* @private
*/
export declare function createLabelTemplate(template: string | Function, heatMap: HeatMap, labelTemplate: HTMLElement, rectPosition: any, xLabels: any, yLabels: any, index: number): HTMLElement;
/**
* Function to check whether target object implement specific interface
*
* @param { string | Function } template - Specifies the template
* @param { HeatMap } heatMap - Specifies the heatmap
* @returns {any} - returns the size
* @private
*/
export declare function getTemplateFunction(template: string | Function, heatMap: HeatMap): any;
/**
* Function to check whether target object implement specific interface
*
* @param { HTMLCollection } element - Specifies the heatmap
* @param { string } elementId - Specifies the template
* @returns { HTMLElement } - returns the size
* @private
*/
export declare function convertElement(element: HTMLCollection, elementId: string): HTMLElement;
/**
* Class to define currentRect private property.

@@ -285,3 +317,3 @@ *

*/
export declare function rotateTextSize(font: FontModel, text: string, angle: number): Size;
export declare function rotateTextSize(font: FontModel, text: string[], angle: number): Size;
/**

@@ -301,3 +333,3 @@ * Class to draw SVG and Canvas Rectangle & Text.

drawLine(properties: LineOption, parentElement: Element): void;
canvasDrawText(options: TextOption, label: string, translateX?: number, translateY?: number): void;
canvasDrawText(options: TextOption, label: string, translateX?: number, translateY?: number, wrappedLabels?: string[], elementHeight?: number, isAxisLabel?: boolean): void;
private getOptionValue;

@@ -321,2 +353,10 @@ private setAttributes;

/**
* Function to check whether the line break character is in the string or not.
*
* @param {string[]} labels - Specifies the axis labels.
* @returns {boolean} returns whether the line break character is in the string or not.
* @private
*/
export declare function getIsLineBreakLabel(labels: string[]): boolean;
/**
* Function to check whether target object implement specific interface

@@ -323,0 +363,0 @@ *

159

src/heatmap/utils/helper.js

@@ -14,3 +14,3 @@ var __extends = (this && this.__extends) || (function () {

})();
import { remove, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
import { remove, createElement, isNullOrUndefined, compile as templateComplier } from '@syncfusion/ej2-base';
import { SvgRenderer } from '@syncfusion/ej2-svg-base';

@@ -41,2 +41,3 @@ import { RgbColor } from '../utils/colorMapping';

export function measureText(text, font) {
var breakText = text || '';
var htmlObject = document.getElementById('heatmapmeasuretext');

@@ -47,3 +48,12 @@ if (htmlObject === null) {

}
htmlObject.innerText = text;
if (typeof (text) === 'string' && (text.indexOf('<') > -1 || text.indexOf('>') > -1)) {
var textArray = text.split(' ');
for (var i = 0; i < textArray.length; i++) {
if (textArray[i].indexOf('<br/>') === -1) {
textArray[i] = textArray[i].replace(/[<>]/g, '&');
}
}
text = textArray.join(' ');
}
htmlObject.innerText = (breakText.indexOf('<br>') > -1 || breakText.indexOf('<br/>') > -1) ? breakText : text;
htmlObject.style.position = 'absolute';

@@ -101,2 +111,3 @@ htmlObject.style.visibility = 'hidden';

var Size = /** @class */ (function () {
// eslint-disable-next-line valid-jsdoc
/** @private */

@@ -135,2 +146,92 @@ function Size(width, height) {

/**
* Function to check whether target object implement specific interface
*
* @param { string | Function } template - Specifies the template
* @param { HeatMap } heatMap - Specifies the heatmap
* @param { HTMLElement } labelTemplate - Specifies the label template
* @param { any } rectPosition - Specifies the rect datas
* @param { any } xLabels - Specifies the xlabels
* @param { any } yLabels - Specifies the ylabels
* @param { number } index - Specifies the index
* @returns {any} templateFunction - returns the size
* @private
*/
/* eslint-disable max-len */
export function createLabelTemplate(template, heatMap, labelTemplate, rectPosition, xLabels, yLabels, index) {
var templateFunction = getTemplateFunction(template, heatMap);
var rectData = null;
var dataSource = heatMap.dataSource;
if (heatMap.dataSourceSettings.isJsonData && (heatMap.dataSourceSettings.adaptorType === 'Cell' || heatMap.dataSourceSettings.adaptorType === 'Table')) {
var yLabelData_1 = heatMap.yAxis.valueType === 'Numeric' ? heatMap.yAxis.labels : yLabels;
var xLabelData_1 = heatMap.xAxis.valueType === 'Numeric' ? heatMap.xAxis.labels : xLabels;
dataSource.forEach(function (item) {
var yDataMapping = heatMap.dataSourceSettings.adaptorType === 'Cell' ? Object.keys(item).some(function (key) { return item[key] === yLabelData_1[rectPosition.yIndex]; }) : (Object.prototype.hasOwnProperty.call(item, yLabelData_1[rectPosition.yIndex]));
if (Object.keys(item).some(function (key) { return item[key] === xLabelData_1[rectPosition.xIndex]; }) && yDataMapping) {
rectData = item;
}
});
}
else {
rectData = { value: rectPosition.value, xLabel: xLabels[rectPosition.xIndex], yLabel: yLabels[rectPosition.yIndex] };
}
if (!isNullOrUndefined(templateFunction)) {
var tempElement = templateFunction(rectData, heatMap, templateFunction, heatMap.element.id + '_Template' + index, false);
var templateElement = convertElement(tempElement, heatMap.element.id + '_LabelTemplate_' + index);
templateElement.style.cssText = 'opacity: 1; display: flex; align-items: center; justify-content: center; z-index: 2; position: absolute;' + 'top:' + rectPosition.y + 'px;' + 'left:' + rectPosition.x + 'px;' + 'height:' + rectPosition.height + 'px;' + 'width:' + rectPosition.width + 'px;';
for (var i = 0; i < templateElement.children.length; i++) {
templateElement.children[i].style.pointerEvents = 'none';
}
labelTemplate.appendChild(templateElement);
}
return labelTemplate;
}
/**
* Function to check whether target object implement specific interface
*
* @param { string | Function } template - Specifies the template
* @param { HeatMap } heatMap - Specifies the heatmap
* @returns {any} - returns the size
* @private
*/
export function getTemplateFunction(template, heatMap) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var templateFn = null;
try {
if (typeof template !== 'function' && document.querySelectorAll(template).length) {
templateFn = templateComplier(document.querySelector(template).innerHTML.trim());
// eslint-disable-next-line @typescript-eslint/no-explicit-any
}
else if (heatMap.isVue || heatMap.isVue3) {
templateFn = templateComplier(template);
}
else if (typeof template === 'function') {
templateFn = templateComplier(template);
}
}
catch (e) {
templateFn = templateComplier(template);
}
return templateFn;
}
/**
* Function to check whether target object implement specific interface
*
* @param { HTMLCollection } element - Specifies the heatmap
* @param { string } elementId - Specifies the template
* @returns { HTMLElement } - returns the size
* @private
*/
export function convertElement(element, elementId) {
var childElement = createElement('div', {
id: elementId
});
childElement.style.cssText = 'position: absolute;pointer-events: auto;';
var elementLength = element.length;
while (elementLength > 0) {
childElement.appendChild(element[0]);
elementLength--;
}
return childElement;
}
/**
* Class to define currentRect private property.

@@ -165,2 +266,3 @@ *

var SelectedCellDetails = /** @class */ (function () {
// eslint-disable-next-line valid-jsdoc
/**

@@ -414,2 +516,6 @@ * @private

var svgObject = renderer.createSvg({ id: 'heatmapMeasureRotateText_svg', width: 100, height: 100 });
var height;
var dy;
var label;
var tspanElement;
var options = {

@@ -423,3 +529,15 @@ 'font-size': font.size,

};
var htmlObject = renderer.createText(options, text);
var htmlObject = renderer.createText(options, text[0]);
if (typeof text !== 'string' && text.length > 1) {
for (var i = 1, len = text.length; i < len; i++) {
height = (measureText(text[i], font).height);
dy = (0) + ((i * height));
label = text[i];
tspanElement = renderer.createTSpan({
'x': 0, 'id': 'heatmapMeasureRotateText_' + i,
'y': dy
}, label);
htmlObject.appendChild(tspanElement);
}
}
svgObject.appendChild(htmlObject);

@@ -541,3 +659,3 @@ document.body.appendChild(svgObject);

//Canvas Text Part
DrawSvgCanvas.prototype.canvasDrawText = function (options, label, translateX, translateY) {
DrawSvgCanvas.prototype.canvasDrawText = function (options, label, translateX, translateY, wrappedLabels, elementHeight, isAxisLabel) {
var ctx = this.heatMap.canvasRenderer.ctx;

@@ -571,3 +689,11 @@ if (!translateX) {

ctx.rotate(options.labelRotation * Math.PI / 180);
ctx.fillText(label, options.x - translateX, options.y - translateY);
if (isAxisLabel) {
for (var i = 0; i < wrappedLabels.length; i++) {
options.y = i !== 0 ? options.y + elementHeight : options.y;
ctx.fillText(wrappedLabels[i], options.x - translateX, options.y - translateY);
}
}
else {
ctx.fillText(label, options.x - translateX, options.y - translateY);
}
ctx.restore();

@@ -704,2 +830,19 @@ };

/**
* Function to check whether the line break character is in the string or not.
*
* @param {string[]} labels - Specifies the axis labels.
* @returns {boolean} returns whether the line break character is in the string or not.
* @private
*/
export function getIsLineBreakLabel(labels) {
var isLineBreak = false;
for (var i = 0; i < labels.length; i++) {
if (labels[i].indexOf('<br>') !== -1 || labels[i].indexOf('<br/>') !== -1) {
isLineBreak = true;
break;
}
}
return isLineBreak;
}
/**
* Function to check whether target object implement specific interface

@@ -855,3 +998,6 @@ *

if (isTouch) {
setTimeout(function () { removeElement(id); }, 1500);
if (this.tooltipTimer) {
window.clearTimeout(this.tooltipTimer);
}
this.tooltipTimer = setTimeout(function () { removeElement(id); }, 1500);
}

@@ -873,2 +1019,3 @@ }

}
// eslint-disable-next-line valid-jsdoc
/**

@@ -875,0 +1022,0 @@ * @private

dist/ej2-heatmap.min.js

Sorry, the diff of this file is too big to display

dist/ej2-heatmap.umd.min.js

Sorry, the diff of this file is too big to display

dist/ej2-heatmap.umd.min.js.map

Sorry, the diff of this file is not supported yet

dist/es6/ej2-heatmap.es2015.js

Sorry, the diff of this file is too big to display

dist/es6/ej2-heatmap.es2015.js.map

Sorry, the diff of this file is not supported yet

dist/es6/ej2-heatmap.es5.js

Sorry, the diff of this file is too big to display

dist/es6/ej2-heatmap.es5.js.map

Sorry, the diff of this file is not supported yet

dist/global/ej2-heatmap.min.js

Sorry, the diff of this file is too big to display

dist/global/ej2-heatmap.min.js.map

Sorry, the diff of this file is not supported yet

src/heatmap/heatmap.js

Sorry, the diff of this file is too big to display

src/heatmap/legend/legend.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc