@syncfusion/ej2-heatmap
Version:
Feature rich data visulization control used to visualize the matrix data where the individual values are represented as colors
891 lines • 96.9 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Property, ChildProperty, Complex, Browser, createElement, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { DrawSvgCanvas, TextOption, TextBasic, PathOption, Line, LineOption, GradientPointer, textTrim, getSanitizedTexts } from '../utils/helper';
import { Size, measureText, getTitle, getElement, CanvasTooltip, formatValue, LegendRange, ToggleVisibility, sum } from '../utils/helper';
import { Font, Title } from '../model/base';
import { Rect, RectOption, Gradient, GradientColor, showTooltip, stringToNumber, CurrentLegendRect, removeElement } from '../utils/helper';
import { Theme } from '../model/theme';
import { Tooltip as tool } from '@syncfusion/ej2-svg-base';
/**
* Gets and sets the options to customize the legend in the heatmap.
*/
var LegendSettings = /** @class */ (function (_super) {
__extends(LegendSettings, _super);
function LegendSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], LegendSettings.prototype, "height", void 0);
__decorate([
Property('')
], LegendSettings.prototype, "width", void 0);
__decorate([
Complex({ text: '', textStyle: Theme.titleFont }, Title)
], LegendSettings.prototype, "title", void 0);
__decorate([
Property('Right')
], LegendSettings.prototype, "position", void 0);
__decorate([
Property(true)
], LegendSettings.prototype, "visible", void 0);
__decorate([
Property('Center')
], LegendSettings.prototype, "alignment", void 0);
__decorate([
Property(true)
], LegendSettings.prototype, "showLabel", void 0);
__decorate([
Property(true)
], LegendSettings.prototype, "showGradientPointer", void 0);
__decorate([
Property(false)
], LegendSettings.prototype, "enableSmartLegend", void 0);
__decorate([
Property('All')
], LegendSettings.prototype, "labelDisplayType", void 0);
__decorate([
Complex(Theme.legendLabelFont, Font)
], LegendSettings.prototype, "textStyle", void 0);
__decorate([
Property('')
], LegendSettings.prototype, "labelFormat", void 0);
__decorate([
Property(true)
], LegendSettings.prototype, "toggleVisibility", void 0);
return LegendSettings;
}(ChildProperty));
export { LegendSettings };
/**
*
* The `Legend` module is used to render legend for the heatmap.
*/
var Legend = /** @class */ (function () {
function Legend(heatMap) {
this.maxLegendLabelSize = new Size(0, 0);
this.gradientScaleSize = 10;
this.segmentCollections = [];
this.segmentCollectionsLabels = [];
this.textWrapCollections = [];
this.labelCollections = [];
this.labelCollection = [];
this.legendSize = 10;
this.previousOptions = new GradientPointer(0, 0, 0, 0, 0, 0);
this.listPerPage = 0;
this.numberOfPages = 1;
this.listWidth = 0;
this.fillRect = new Rect(0, 0, 0, 0);
this.legendRect = new Rect(0, 0, 0, 0);
this.currentPage = 1;
this.lastList = [];
this.navigationCollections = [];
this.pagingRect = new Rect(0, 0, 0, 0);
this.listInterval = 10; // padding between two lists
this.legendLabelTooltip = [];
this.legendTitleTooltip = [];
this.labelXCollections = [];
this.labelYCollections = [];
this.legendXCollections = [];
this.legendYCollections = [];
/** @private */
this.legendRectPositionCollection = [];
/** @private */
this.legendRange = [];
/** @private */
this.legendTextRange = [];
/** @private */
this.visibilityCollections = [];
this.heatMap = heatMap;
this.drawSvgCanvas = new DrawSvgCanvas(heatMap);
}
/**
* Get module name
*/
Legend.prototype.getModuleName = function () {
return 'Legend';
};
/**
* To destroy the Legend.
*
* @returns {void}
* @private
*/
Legend.prototype.destroy = function () {
if (!isNullOrUndefined(this.tooltipObject)) {
this.tooltipObject.destroy();
}
this.tooltipObject = null;
this.drawSvgCanvas = null;
this.format = null;
this.gradientPointer = null;
this.labelCollection = null;
this.labelCollections = null;
this.lastList = null;
this.legend = null;
this.legendGroup = null;
this.legendRect = null;
this.legendRectPositionCollection = null;
this.legendRectScale = null;
this.legendScale = null;
this.legendXCollections = null;
this.legendYCollections = null;
this.maxLegendLabelSize = null;
this.navigationCollections = null;
this.pagingRect = null;
this.paginggroup = null;
this.segmentCollections = null;
this.segmentCollectionsLabels = null;
this.textWrapCollections = null;
this.translategroup = null;
this.visibilityCollections = null;
this.fillRect = null;
this.legendLabelTooltip = null;
this.legendRange = [];
this.legendTextRange = [];
this.legendTitleTooltip = null;
this.previousOptions = null;
this.heatMap = null;
};
/**
* @private
*/
Legend.prototype.renderLegendItems = function () {
var heatMap = this.heatMap;
heatMap.toggleValue = [];
var tempBorder = { color: 'transparent', width: 0 };
this.legend = heatMap.renderer.createGroup({ id: heatMap.element.id + '_Heatmap_Legend' });
var rectItems = new RectOption(heatMap.element.id + '_LegendBound', 'none', tempBorder, 1, this.legendGroup);
this.drawSvgCanvas.drawRectangle(rectItems, this.legend);
var legendBound = this.legendRectScale;
var ctx = heatMap.canvasRenderer.ctx;
var rectItemsSvg = new Rect(legendBound.x, legendBound.y, legendBound.width, legendBound.height);
var fill;
if (heatMap.paletteSettings.type === 'Fixed') {
var colorCollection = (!heatMap.legendSettings.enableSmartLegend) ?
heatMap.colorCollection : heatMap.legendColorCollection;
this.legendRange = (heatMap.resizing || (!heatMap.legendOnLoad && heatMap.rendering)) ? [] : this.legendRange;
this.legendTextRange = (heatMap.resizing || (!heatMap.legendOnLoad && heatMap.rendering)) ? [] : this.legendTextRange;
if (heatMap.enableCanvasRendering) {
ctx.save();
ctx.clip();
}
for (var i = 0; i < colorCollection.length; i++) {
var visibility = !isNullOrUndefined(this.visibilityCollections[i]) ?
this.visibilityCollections[i] : true;
heatMap.toggleValue.push(new ToggleVisibility(visibility, colorCollection[i].value, colorCollection[i].startValue, colorCollection[i].endValue));
}
}
if (heatMap.paletteSettings.type === 'Gradient' || (heatMap.paletteSettings.type === 'Fixed' &&
heatMap.legendSettings.enableSmartLegend === true)) {
if (heatMap.paletteSettings.type === 'Gradient') {
if (heatMap.enableCanvasRendering) {
var grd = void 0;
var ctx_1 = heatMap.canvasRenderer.ctx;
if (heatMap.horizontalGradient) {
grd = ctx_1.createLinearGradient(legendBound.x, 0, legendBound.x + legendBound.width, 0);
}
else {
grd = ctx_1.createLinearGradient(0, legendBound.y, 0, legendBound.y + legendBound.height);
}
if (heatMap.legendSettings.title.text) {
ctx_1.clip();
}
for (var i = 0; i < heatMap.legendColorCollection.length; i++) {
var value = (((this.heatMap.isColorRange ? heatMap.legendColorCollection[i].startValue :
heatMap.legendColorCollection[i].value) - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue));
value = isNaN(value) ? 0 : value;
if (this.heatMap.isColorRange && this.heatMap.paletteSettings.type === 'Gradient') {
this.calculateCanvasColorRange(i, grd);
}
else {
grd.addColorStop(value, heatMap.legendColorCollection[i].color);
}
}
ctx_1.fillStyle = grd;
fill = grd.toString();
}
else {
var gradientOptions = void 0;
var gradientColor = void 0;
var cgradientColors = [];
for (var i = 0; i < heatMap.legendColorCollection.length; i++) {
if (this.heatMap.isColorRange && this.heatMap.paletteSettings.type === 'Gradient') {
this.calculateColorRange(i, cgradientColors);
}
else {
var gradientPercentage = ((heatMap.legendColorCollection[i].value - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue)) * 100;
gradientPercentage = isNaN(gradientPercentage) ? 0 : gradientPercentage;
gradientColor = new GradientColor(heatMap.legendColorCollection[i].color, gradientPercentage + '%');
cgradientColors.push(gradientColor);
}
if (this.legendMaxValue === this.legendMinValue) {
break;
}
}
if (heatMap.horizontalGradient) {
gradientOptions = new Gradient(heatMap.element.id + '_lineargradient', '0%', '100%', '0%', '0%');
}
else {
gradientOptions = new Gradient(heatMap.element.id + '_lineargradient', '0%', '0%', '0%', '100%');
}
var linearGradient = heatMap.renderer.drawGradient('linearGradient', gradientOptions, cgradientColors);
this.legend.appendChild(linearGradient);
fill = 'url(#' + heatMap.element.id + '_lineargradient)';
}
var rectItem = new RectOption(heatMap.element.id + '_Gradient_Legend', fill, tempBorder, 1, rectItemsSvg);
this.drawSvgCanvas.drawRectangle(rectItem, this.legend);
this.renderElements(rectItemsSvg);
}
else {
this.renderSmartLegend();
this.renderTitle(rectItemsSvg);
}
if (!heatMap.enableCanvasRendering) {
heatMap.svgObject.appendChild(this.legend);
}
if (heatMap.enableCanvasRendering) {
ctx.restore();
}
this.renderLegendLabel(rectItemsSvg);
}
else {
this.legendScale = heatMap.renderer.createGroup({ id: heatMap.element.id + 'Heatmap_GradientScale' });
var listRect = new RectOption(heatMap.element.id + '_Gradient_Scale', 'none', tempBorder, 1, this.legendRectScale);
this.drawSvgCanvas.drawRectangle(listRect, this.legendScale);
this.renderTitle(rectItemsSvg);
if (!heatMap.enableCanvasRendering) {
this.legend.appendChild(this.legendScale);
}
this.translategroup = heatMap.renderer.createGroup({ id: heatMap.element.id + '_translate' });
this.calculateListPerPage(rectItemsSvg);
if (this.numberOfPages > 1) {
this.paginggroup = heatMap.renderer.createGroup({ id: heatMap.element.id + '_navigation' });
}
this.renderListLegendMode(rectItemsSvg, true);
if (heatMap.enableCanvasRendering) {
ctx.restore();
}
}
};
Legend.prototype.renderElements = function (rectItemsSvg) {
this.renderTitle(rectItemsSvg);
this.renderColorAxisGrid(rectItemsSvg);
};
Legend.prototype.calculateCanvasColorRange = function (i, grd) {
var heatMap = this.heatMap;
var value = ((((heatMap.legendColorCollection[i].startValue < heatMap.dataSourceMinValue &&
heatMap.legendColorCollection[i].endValue > heatMap.dataSourceMinValue) ?
heatMap.dataSourceMinValue : heatMap.legendColorCollection[i].startValue) - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue));
value = isNaN(value) ? 0 : value;
var value1 = ((heatMap.legendColorCollection[i].endValue >= this.heatMap.dataSourceMaxValue ?
this.heatMap.dataSourceMaxValue : heatMap.legendColorCollection[i].endValue) - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue);
if (this.heatMap.legendColorCollection[0].startValue !== this.heatMap.dataSourceMinValue && i === 0 &&
this.heatMap.legendColorCollection[0].startValue > this.heatMap.dataSourceMinValue) {
value = (this.heatMap.legendColorCollection[0].startValue - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue);
grd.addColorStop(value / 2, this.heatMap.paletteSettings.fillColor.minColor);
grd.addColorStop(value, this.heatMap.paletteSettings.fillColor.maxColor);
}
grd.addColorStop(value, heatMap.legendColorCollection[i].minColor);
grd.addColorStop(value1, heatMap.legendColorCollection[i].maxColor);
if (this.heatMap.legendColorCollection[i].endValue !== ((i === this.heatMap.legendColorCollection.length - 1) ?
this.heatMap.dataSourceMaxValue : this.heatMap.legendColorCollection[i + 1].startValue) &&
this.heatMap.legendColorCollection[i].endValue < this.heatMap.dataSourceMaxValue) {
value = (heatMap.legendColorCollection[i].endValue - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue);
grd.addColorStop(value, this.heatMap.paletteSettings.fillColor.minColor);
value = ((i === this.heatMap.legendColorCollection.length - 1 ? this.heatMap.dataSourceMaxValue :
heatMap.legendColorCollection[i + 1].startValue) - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue);
grd.addColorStop(value, this.heatMap.paletteSettings.fillColor.maxColor);
}
};
Legend.prototype.calculateColorRange = function (i, cgradientColors) {
if (cgradientColors === void 0) { cgradientColors = []; }
var heatMap = this.heatMap;
heatMap.toggleValue = [];
var gradientPercentage;
var gradientColor;
var gradientColor2;
var gradientColor3;
if (this.heatMap.legendColorCollection[0].startValue > this.heatMap.dataSourceMinValue && i === 0) {
gradientPercentage = (this.heatMap.dataSourceMinValue - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue) * 100;
gradientPercentage = isNaN(gradientPercentage) ? 0 : gradientPercentage;
gradientColor = new GradientColor(heatMap.paletteSettings.fillColor.minColor, gradientPercentage + '%');
cgradientColors.push(gradientColor);
gradientPercentage = (heatMap.legendColorCollection[0].startValue - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue) * 100;
gradientColor = new GradientColor(heatMap.paletteSettings.fillColor.maxColor, gradientPercentage + '%');
cgradientColors.push(gradientColor);
}
gradientPercentage = ((heatMap.legendColorCollection[i].startValue - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue)) * 100;
gradientPercentage = isNaN(gradientPercentage) ? 0 : gradientPercentage;
gradientColor = new GradientColor(heatMap.legendColorCollection[i].minColor, gradientPercentage + '%');
cgradientColors.push(gradientColor);
gradientPercentage = (heatMap.legendColorCollection[i].endValue - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue) * 100;
var gradientColor1 = new GradientColor(heatMap.legendColorCollection[i].maxColor, gradientPercentage + '%');
cgradientColors.push(gradientColor1);
if (this.heatMap.legendColorCollection[i].endValue !== ((i === this.heatMap.legendColorCollection.length - 1) ?
this.heatMap.dataSourceMaxValue : this.heatMap.legendColorCollection[i + 1].startValue)) {
gradientPercentage = (heatMap.legendColorCollection[i].endValue - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue) * 100;
gradientColor2 = new GradientColor(this.heatMap.paletteSettings.fillColor.minColor, (gradientPercentage) + '%');
cgradientColors.push(gradientColor2);
gradientPercentage = ((i === (this.heatMap.legendColorCollection.length - 1) ?
this.heatMap.dataSourceMaxValue : heatMap.legendColorCollection[i + 1].startValue) - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue) * 100;
gradientColor3 = new GradientColor(this.heatMap.paletteSettings.fillColor.maxColor, (gradientPercentage) + '%');
cgradientColors.push(gradientColor3);
}
};
Legend.prototype.renderTitle = function (rect) {
var heatMap = this.heatMap;
if (heatMap.legendSettings.title.text) {
var title = heatMap.legendSettings.title;
var text = this.heatMap.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(title.text) : title.text;
var titleSize = measureText(text, title.textStyle);
var padding = !heatMap.legendSettings.showLabel ? heatMap.horizontalGradient ? 10 : 6 : this.labelPadding;
var y = void 0;
var anchor = 'start';
var maxWidth = void 0;
var dominantBaseline = void 0;
var textAlignment = title.textStyle.textAlignment;
var options = void 0;
var yValue = void 0;
if (heatMap.legendSettings.title.textStyle.textOverflow === 'Trim') {
// TO DO: When the legend title is large and legend position is left or right,
// the HeatMap is not rendered. The below line trimmed the large title text alone.
maxWidth = heatMap.horizontalGradient ? rect.width - 10 : this.width - 10;
text = textTrim(maxWidth, text, title.textStyle);
}
if (!heatMap.horizontalGradient) {
padding = -(padding + titleSize.height / 4);
if (text.length !== 0 && heatMap.enableCanvasRendering) {
this.legendTitleTooltip.push(new CanvasTooltip(title.text, new Rect(rect.x, rect.y - titleSize.height, maxWidth, titleSize.height)));
}
options = new TextOption(heatMap.element.id + '_legendTitle', new TextBasic(rect.x, rect.y + padding, anchor, text, 0, 'translate(0,0)', dominantBaseline), title.textStyle, title.textStyle.color || heatMap.themeStyle.heatMapTitle);
}
else {
y = rect.y + (heatMap.legendSettings.position === 'Top' ? 0 :
-(10 + titleSize.height + padding));
padding = heatMap.legendSettings.position === 'Top' ? -(padding + titleSize.height / 4) :
(padding + (3 * titleSize.height / 4));
yValue = heatMap.legendSettings.position === 'Bottom' ? y : y - titleSize.height;
if (text.length !== 0 && heatMap.enableCanvasRendering) {
this.legendTitleTooltip.push(new CanvasTooltip(title.text, new Rect(rect.x, yValue, maxWidth, titleSize.height)));
}
titleSize.width = rect.width < titleSize.width ? rect.width : titleSize.width;
var rectValue = rect.x;
if (text.indexOf('...') !== -1 && textAlignment === 'Far') {
rectValue = (rectValue + (rect.width / 2) - (titleSize.width / 2));
}
else {
rectValue = textAlignment === 'Near' ? rectValue : textAlignment === 'Far' ? rect.width + rectValue :
(rectValue + (rect.width / 2) - (titleSize.width / 2));
}
anchor = textAlignment === 'Far' && text.indexOf('...') === -1 ? 'end' : 'start';
options = new TextOption(heatMap.element.id + '_legendTitle', new TextBasic(rectValue, y + padding, anchor, text, 0, 'translate(0,0)', dominantBaseline), title.textStyle, title.textStyle.color || heatMap.themeStyle.heatMapTitle);
}
this.drawSvgCanvas.createText(options, this.legend, text);
}
};
Legend.prototype.renderSmartLegend = function () {
var heatMap = this.heatMap;
var colorCollection = heatMap.colorCollection;
var smartLegendRect;
var tempBorder = {
color: 'transparent',
width: 0
};
var legendBound = this.legendRectScale;
var legendX;
var legendY;
var legendWidth;
var legendHeight;
var width = legendBound.width / colorCollection.length;
var height = legendBound.height / colorCollection.length;
this.legendRectPositionCollection = [];
this.legendRange = [];
for (var i = 0; i < heatMap.legendColorCollection.length; i++) {
var rectPosition = new CurrentLegendRect(0, 0, 0, 0, '', '');
if (heatMap.horizontalGradient) {
legendX = legendBound.x + (i * width);
legendY = legendBound.y;
legendWidth = width;
legendHeight = legendBound.height;
this.segmentCollections.push((heatMap.legendSettings.labelDisplayType === 'Edge' &&
i === heatMap.legendColorCollection.length - 1 && !heatMap.legendColorCollection[i].isHidden) ?
legendX + width : legendX);
}
else {
legendX = legendBound.x;
legendY = legendBound.y + (i * height);
legendWidth = legendBound.width;
legendHeight = height;
this.segmentCollections.push((heatMap.legendSettings.labelDisplayType === 'Edge' &&
i === heatMap.legendColorCollection.length - 1 && !heatMap.legendColorCollection[i].isHidden) ?
legendY + height : legendY);
}
var legendElement = this.heatMap.renderer.createGroup({
id: heatMap.element.id + '_Smart_Legend_Group_' + i
});
var tabindex = this.heatMap.legendSettings.toggleVisibility ? 0 : -1;
legendElement.setAttribute('tabindex', tabindex.toString());
legendElement.style.outline = 'none';
smartLegendRect = new Rect(legendX, legendY, legendWidth, legendHeight);
var legendRange = new LegendRange(0, 0, 0, 0, 0, true, 0);
legendRange.x = legendX;
legendRange.y = legendY;
legendRange.width = legendWidth;
legendRange.height = legendHeight;
legendRange.value = this.heatMap.isColorRange ?
heatMap.legendColorCollection[i].endValue : heatMap.legendColorCollection[i].value;
legendRange.currentPage = this.currentPage;
if (colorCollection.length !== heatMap.legendColorCollection.length && i === heatMap.legendColorCollection.length - 1) {
if (heatMap.horizontalGradient) {
legendRange.width = 0;
}
else {
legendRange.height = 0;
}
this.visibilityCollections[i] = this.visibilityCollections[i - 1];
}
legendRange.visible = !isNullOrUndefined(this.visibilityCollections[i]) ?
this.visibilityCollections[i] : true;
this.legendRange.push(legendRange);
if (!heatMap.legendColorCollection[i].isHidden) {
var color = heatMap.legendOnLoad ? this.heatMap.isColorRange ? colorCollection[i].minColor :
colorCollection[i].color : this.legendRange[i].visible ?
this.heatMap.isColorRange ? colorCollection[i].minColor :
colorCollection[i].color : this.heatMap.themeStyle.toggledColor || '#D3D3D3';
var rectItem = new RectOption(heatMap.element.id + '_Smart_Legend' + i, color, tempBorder, 1, smartLegendRect);
this.drawSvgCanvas.drawRectangle(rectItem, legendElement);
this.legend.appendChild(legendElement);
rectPosition.x = legendX;
rectPosition.y = legendY;
rectPosition.width = legendWidth;
rectPosition.height = legendHeight;
rectPosition.label = this.labelCollections[i];
rectPosition.id = heatMap.element.id + '_Smart_Legend' + i;
this.legendRectPositionCollection.push(rectPosition);
var text = getTitle(this.labelCollections[i], heatMap.legendSettings.textStyle, this.textWrapCollections[i]);
if (text.length !== 0 && heatMap.enableCanvasRendering) {
var elementSize = measureText(this.labelCollections[i], heatMap.legendSettings.textStyle);
this.legendLabelTooltip.push(new CanvasTooltip(this.labelCollections[i], new Rect(rectPosition.x, rectPosition.y, elementSize.width, elementSize.height)));
}
}
}
};
Legend.prototype.colorRangeLegendPosition = function (i, labelX) {
if (this.segmentCollections.length !== this.segmentCollectionsLabels.length) {
for (var k = 0; k < this.segmentCollections.length; k++) {
if (this.segmentCollectionsLabels[i] === this.segmentCollections[k]) {
labelX = this.segmentCollectionsLabels[i] + (((k === this.segmentCollections.length - 1 ?
(this.heatMap.horizontalGradient ? this.width : this.height) :
this.segmentCollections[k + 1]) - this.segmentCollections[k]) / 2);
break;
}
}
}
else {
labelX = this.segmentCollectionsLabels[i] + (((i === this.segmentCollectionsLabels.length - 1 ?
(this.heatMap.horizontalGradient ? this.width : this.height) :
this.segmentCollectionsLabels[i + 1]) - this.segmentCollectionsLabels[i]) / 2);
}
this.labelPosition = labelX;
};
Legend.prototype.renderLegendLabel = function (rect) {
var heatMap = this.heatMap;
this.legendTextRange = [];
if (heatMap.legendSettings.showLabel && (heatMap.paletteSettings.type === 'Gradient' ||
(heatMap.paletteSettings.type === 'Fixed' && heatMap.legendSettings.labelDisplayType !== 'None'))) {
var anchor = 'start';
var dominantBaseline = void 0;
var legendLabel = void 0;
var textWrapWidth = 0;
var text = void 0;
this.legendLabelTooltip = [];
var elementSize = void 0;
var isColorRange = heatMap.isColorRange;
var colorCollection = heatMap.legendColorCollection;
if (heatMap.enableCanvasRendering) {
var ctx = heatMap.canvasRenderer.ctx;
ctx.rect(this.legendGroup.x, this.legendGroup.y, this.legendGroup.width, this.legendGroup.height);
ctx.save();
ctx.clip();
ctx.restore();
}
else {
legendLabel = heatMap.renderer.createGroup({ id: heatMap.element.id + '_Heatmap_LegendLabel' });
}
var labelX = void 0;
var labelY = void 0;
for (var i = 0; i < colorCollection.length; i++) {
var value = ((colorCollection[i].value - (Math.round(this.legendMinValue * 100) / 100)) /
((Math.round(this.legendMaxValue * 100) / 100) - (Math.round(this.legendMinValue * 100) / 100))) * 100;
var index = colorCollection[i].isHidden ? (i - 1) : i;
var legendElement = this.legend.querySelector('#' + heatMap.element.id + '_Smart_Legend_Group_' + index);
if (heatMap.horizontalGradient) {
if (this.heatMap.isColorRange && heatMap.paletteSettings.type === 'Gradient') {
this.colorRangeLegendPosition(i, labelX);
labelX = this.labelPosition;
}
else if (this.heatMap.legendSettings.enableSmartLegend && this.heatMap.isColorRange &&
heatMap.paletteSettings.type === 'Fixed') {
labelX = this.segmentCollections[i] + ((rect.width / colorCollection.length) / 2);
}
else {
labelX = this.segmentCollections[i];
}
labelY = rect.y + rect.height + this.labelPadding;
anchor = (((Math.round(value * 100) / 100) === 0 && !isColorRange) || (heatMap.paletteSettings.type === 'Fixed' &&
i === 0)) ? 'start' : (((Math.round(value * 100) / 100) === 100 && heatMap.paletteSettings.type === 'Gradient' &&
!isColorRange) || (Math.round(heatMap.dataSourceMaxValue * 100) / 100) === colorCollection[i].value &&
heatMap.legendSettings.enableSmartLegend) || (heatMap.legendSettings.enableSmartLegend &&
heatMap.paletteSettings.type === 'Fixed' && heatMap.legendSettings.labelDisplayType === 'Edge') ? 'end' : 'middle';
dominantBaseline = 'hanging';
}
else {
labelX = rect.x + rect.width + this.labelPadding;
if (this.heatMap.isColorRange && heatMap.paletteSettings.type === 'Gradient') {
this.colorRangeLegendPosition(i, labelY);
labelY = this.labelPosition;
}
else if (this.heatMap.legendSettings.enableSmartLegend && this.heatMap.isColorRange &&
heatMap.paletteSettings.type === 'Fixed') {
labelY = this.segmentCollections[i] + ((rect.height / colorCollection.length) / 2);
}
else {
labelY = this.segmentCollections[i];
}
dominantBaseline = (((Math.round(value * 100) / 100) === 0 && !isColorRange) || (i === 0 &&
heatMap.paletteSettings.type === 'Fixed')) ? 'hanging' : (((Math.round(value * 100) / 100) === 100 &&
!isColorRange && heatMap.paletteSettings.type === 'Gradient') ||
(Math.round(heatMap.dataSourceMaxValue * 100) / 100) === colorCollection[i].value &&
heatMap.legendSettings.enableSmartLegend) || (heatMap.legendSettings.enableSmartLegend &&
heatMap.legendSettings.labelDisplayType === 'Edge' &&
heatMap.paletteSettings.type === 'Fixed') ? 'auto' : 'middle';
}
textWrapWidth = heatMap.horizontalGradient ? (heatMap.legendSettings.textStyle.textOverflow === 'None' ?
this.segmentCollections[i] : this.textWrapCollections[i]) :
this.width - (this.legendRectScale.width + this.labelPadding + this.legendRectPadding);
text = getTitle(this.labelCollections[i], heatMap.legendSettings.textStyle, textWrapWidth);
elementSize = measureText(text[0], heatMap.legendSettings.textStyle);
if (heatMap.paletteSettings.type === 'Fixed') {
var rectY = dominantBaseline === 'hanging' ? labelY : dominantBaseline === 'middle' ?
labelY - elementSize.height / 2 : labelY - elementSize.height;
var rectX = anchor === 'end' ? labelX - elementSize.width : anchor === 'middle' ?
labelX - elementSize.width / 2 : labelX;
var textPosition = new LegendRange(rectX, rectY, elementSize.width, elementSize.height, colorCollection[i].value, true, this.currentPage);
textPosition.visible = !isNullOrUndefined(this.visibilityCollections[i]) ?
this.visibilityCollections[i] : true;
this.legendTextRange.push(textPosition);
}
if (this.labelCollections[i] !== '') {
if (text.length !== 0 && text[0].indexOf('...') !== -1 && heatMap.enableCanvasRendering) {
this.legendLabelTooltip.push(new CanvasTooltip(this.labelCollections[i], new Rect(labelX, labelY, elementSize.width, elementSize.height)));
}
text = getSanitizedTexts(text, this.heatMap.enableHtmlSanitizer);
var textBasic = new TextBasic(labelX, labelY, anchor, text, 0, 'translate(0,0)', dominantBaseline);
var options = new TextOption(heatMap.element.id + '_Legend_Label' + i, textBasic, heatMap.legendSettings.textStyle, heatMap.legendSettings.textStyle.color || heatMap.themeStyle.legendLabel);
options.fill = heatMap.legendOnLoad ? options.fill :
(heatMap.paletteSettings.type === 'Fixed' && !this.legendRange[i].visible) ? '#D3D3D3' : options.fill;
var legendItem = heatMap.paletteSettings.type === 'Fixed' ? legendElement : legendLabel;
if (text.length > 1) {
this.drawSvgCanvas.createWrapText(options, heatMap.legendSettings.textStyle, legendLabel);
}
else {
this.drawSvgCanvas.createText(options, legendItem, text[0]);
}
if (Browser.isIE && !heatMap.enableCanvasRendering) {
if (dominantBaseline === 'middle') {
legendItem.lastChild.setAttribute('dy', '0.6ex');
}
else if (dominantBaseline === 'hanging') {
legendItem.lastChild.setAttribute('dy', '1.5ex');
}
}
}
if (this.legendMaxValue === this.legendMinValue && heatMap.paletteSettings.type === 'Gradient') {
break;
}
}
if (!heatMap.enableCanvasRendering) {
this.legendGroup.height = this.legendGroup.height > 0 ? this.legendGroup.height : 0;
this.legendGroup.width = this.legendGroup.width > 0 ? this.legendGroup.width : 0;
if (heatMap.paletteSettings.type === 'Gradient') {
this.legend.appendChild(legendLabel);
}
var clippath = heatMap.renderer.createClipPath({ id: heatMap.element.id + '_clipPath' });
var clipRect = heatMap.renderer.drawRectangle(this.legendGroup);
clippath.appendChild(clipRect);
heatMap.svgObject.appendChild(clippath);
this.legend.style.cssText = 'clip-path:url(#' + clippath.id + ')';
}
}
};
/**
* @private
*/
Legend.prototype.renderGradientPointer = function (e, pageX, pageY) {
var heatMap = this.heatMap;
var currentRect = heatMap.heatMapSeries.getCurrentRect(pageX, pageY);
var cellValue = heatMap.bubbleSizeWithColor ? currentRect.value[0].bubbleData.toString() !== '' ?
!this.heatMap.isColorValueExist ? currentRect.value[0].bubbleData.toString() :
currentRect.value[1].bubbleData.toString() : '' : currentRect.value.toString();
var rect = this.legendRectScale;
var legendPart;
var direction;
var options;
var legendPath;
var pathX1;
var pathY1;
var pathX2;
var pathY2;
var pathX3;
var pathY3;
if (cellValue.toString() !== '') {
if (!heatMap.horizontalGradient) {
legendPart = rect.height / 100;
legendPath = legendPart * ((Number(cellValue) - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue)) * 100;
legendPath = isNaN(legendPath) ? 0 : legendPath;
pathX1 = rect.x - 1;
pathY1 = rect.y + legendPath;
pathX2 = pathX3 = rect.x - 8;
pathY2 = rect.y - 5 + legendPath;
pathY3 = rect.y + 5 + legendPath;
}
else {
legendPart = rect.width / 100;
legendPath = legendPart * ((Number(cellValue) - this.legendMinValue) /
(this.legendMaxValue - this.legendMinValue)) * 100;
legendPath = isNaN(legendPath) ? 0 : legendPath;
pathX1 = rect.x + legendPath;
pathY1 = rect.y + rect.height;
pathX2 = rect.x - 5 + legendPath;
pathY2 = pathY3 = rect.y + rect.height + 8;
pathX3 = rect.x + 5 + legendPath;
}
direction = 'M' + ' ' + pathX1 + ' ' + pathY1 + ' ' +
'L' + ' ' + pathX2 + ' ' + pathY2 + ' ' + 'L' + ' ' + pathX3 + ' ' + pathY3 + ' ' + 'Z';
options = new PathOption(heatMap.element.id + '_Gradient_Pointer', 'gray', 0.01, '#A0A0A0', 1, '0,0', direction);
if (!heatMap.enableCanvasRendering) {
this.gradientPointer = heatMap.renderer.drawPath(options);
this.gradientPointer.style.visibility = 'visible';
this.legend.appendChild(this.gradientPointer);
}
else {
this.removeGradientPointer();
var canvasTranslate = void 0;
heatMap.canvasRenderer.drawPath(options, canvasTranslate);
if (!isNullOrUndefined(this.previousOptions)) {
this.previousOptions.pathX1 = pathX1;
this.previousOptions.pathY1 = pathY1;
this.previousOptions.pathX2 = pathX2;
this.previousOptions.pathY2 = pathY2;
this.previousOptions.pathX3 = pathX3;
this.previousOptions.pathY3 = pathY3;
}
}
}
else {
this.removeGradientPointer();
}
};
/**
* @private
*/
Legend.prototype.removeGradientPointer = function () {
var heatMap = this.heatMap;
if (!isNullOrUndefined(heatMap)) {
if (this.gradientPointer && !heatMap.enableCanvasRendering) {
this.gradientPointer.style.visibility = 'hidden';
}
else if (heatMap.enableCanvasRendering) {
if (!isNullOrUndefined(this.fillRect) && !isNullOrUndefined(this.previousOptions) &&
Object.keys(this.previousOptions).length !== 0) {
if (heatMap.horizontalGradient) {
this.fillRect.x = this.previousOptions.pathX2 - 1;
this.fillRect.y = this.previousOptions.pathY1;
this.fillRect.width = this.previousOptions.pathX3 - this.previousOptions.pathX2 + 2;
this.fillRect.height = this.previousOptions.pathY2 + 1 - this.previousOptions.pathY1;
}
else {
this.fillRect.x = this.previousOptions.pathX2 - 1;
this.fillRect.y = this.previousOptions.pathY2 - 1;
this.fillRect.width = this.previousOptions.pathX1 - this.previousOptions.pathX2 + 1;
this.fillRect.height = this.previousOptions.pathY3 - this.previousOptions.pathY2 + 2;
}
}
heatMap.canvasRenderer.ctx.fillStyle = heatMap.themeStyle.background;
if (!isNullOrUndefined(this.fillRect)) {
heatMap.canvasRenderer.ctx.clearRect(this.fillRect.x, this.fillRect.y, this.fillRect.width, this.fillRect.height);
}
}
}
};
/**
* @private
*/
Legend.prototype.calculateLegendBounds = function (rect) {
var heatMap = this.heatMap;
var legendSettings = heatMap.legendSettings;
this.labelCollection = [];
this.labelCollections = [];
var colorCollection = heatMap.legendColorCollection;
if (legendSettings.position !== 'Bottom' && legendSettings.position !== 'Top' &&
legendSettings.position !== 'Right' && legendSettings.position !== 'Left') {
legendSettings.position = 'Right';
}
var title = heatMap.legendSettings.title;
var titleSize = measureText(this.heatMap.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(title.text) : title.text, title.textStyle);
heatMap.horizontalGradient = legendSettings.position === 'Bottom' || legendSettings.position === 'Top';
this.legendRectPadding = heatMap.horizontalGradient ? heatMap.legendSettings.title.text ?
titleSize.height + 16 : 16 : 10; // padding between rect and legend
this.labelPadding = legendSettings.showLabel ? this.heatMap.horizontalGradient ? 10 : 6 : 0; // padding between list and label
this.legendHeight = legendSettings.height;
this.legendWidth = legendSettings.width;
var format = heatMap.legendSettings.labelFormat;
var isCustom = format.match('{value}') !== null;
this.format = heatMap.intl.getNumberFormat({ format: isCustom ? '' : format });
if (heatMap.paletteSettings.type === 'Fixed') {
for (var i = 0; i < colorCollection.length; i++) {
var label = colorCollection[i].label ? colorCollection[i].label : this.heatMap.isColorRange ?
colorCollection[i].startValue.toString() + '-' + colorCollection[i].endValue.toString() : formatValue(isCustom, format, colorCollection[i].value, this.format).toString();
var legendEventArg = { cancel: false, text: label, name: 'legendRender' };
this.labelCollection.push(label);
this.heatMap.trigger('legendRender', legendEventArg);
if (heatMap.legendRender) {
if (heatMap.legendSettings.enableSmartLegend && heatMap.legendSettings.labelDisplayType === 'Edge'
&& i > 0 && i < colorCollection.length - 1) {
this.labelCollections.push('');
}
else {
if (!legendEventArg.cancel) {
this.labelCollections.push(legendEventArg.text);
}
else {
this.labelCollections.push('');
}
}
}
else {
if (heatMap.legendSettings.enableSmartLegend && heatMap.legendSettings.labelDisplayType === 'Edge'
&& i > 0 && i < colorCollection.length - 1) {
this.labelCollections.push('');
}
else {
this.labelCollections.push(label);
}
}
}
}
else {
for (var i = 0; i < colorCollection.length; i++) {
var label = colorCollection[i].isHidden ? '' : colorCollection[i].label ? colorCollection[i].label :
this.heatMap.isColorRange ? colorCollection[i].startValue.toString() + '-' + colorCollection[i].endValue.toString() :
formatValue(isCustom, format, colorCollection[i].value, this.format).toString();
var legendEventArg = { cancel: false, text: label, name: 'legendRender' };
if (!colorCollection[i].isHidden) {
this.heatMap.trigger('legendRender', legendEventArg);
}
if (heatMap.legendRender) {
if (!legendEventArg.cancel) {
if (i > 0 && i < colorCollection.length - 1 && heatMap.legendSettings.labelDisplayType === 'Edge') {
this.labelCollections.push('');
}
else {
if (!legendEventArg.cancel) {
this.labelCollections.push(legendEventArg.text);
}
else {
this.labelCollections.push('');
}
}
}
else {
this.labelCollections.push('');
}
}
else {
if (i > 0 && i < colorCollection.length - 1 && heatMap.legendSettings.labelDisplayType === 'Edge') {
this.labelCollections.push('');
}
else {
this.labelCollections.push(label);
}
}
}
}
if (heatMap.paletteSettings.type === 'Gradient' || (heatMap.paletteSettings.type === 'Fixed' &&
heatMap.legendSettings.enableSmartLegend)) {
this.maxLegendLabelSize = this.getMaxLabelSize();
if (heatMap.horizontalGradient && legendSettings.height === '') {
this.legendHeight = ((2 * this.legendRectPadding) + this.legendSize + this.maxLegendLabelSize.height).toString();
}
else if (!heatMap.horizontalGradient && legendSettings.width === '' && (legendSettings.textStyle.textOverflow === 'None' ||
(heatMap.paletteSettings.type === 'Fixed' && heatMap.legendSettings.enableSmartLegend &&
heatMap.legendSettings.labelDisplayType === 'None'))) {
this.legendWidth = ((2 * this.legendRectPadding) + this.legendSize + this.maxLegendLabelSize.width).toString();
}
this.calculateTitleBounds();
}
else {
this.calculateListLegendBounds(rect);
}
this.legendHeight = this.legendHeight ? this.legendHeight : heatMap.horizontalGradient ? '50' : '100%';
this.legendWidth = this.legendWidth ? this.legendWidth : heatMap.horizontalGradient ?
'100%' : heatMap.paletteSettings.type === 'Fixed' && !heatMap.legendSettings.enableSmartLegend ? '70' : '50';
this.height = stringToNumber(this.legendHeight, rect.height);
this.width = stringToNumber(this.legendWidth, rect.width);
if (heatMap.horizontalGradient) {
this.height = heatMap.paletteSettings.type === 'Gradient' || heatMap.legendSettings.enableSmartLegend ?
this.height < 50 ? 50 : this.height : this.height;
if (legendSettings.position === 'Top') {
rect.y += this.height;
}
rect.height -= this.height;
}
else {
this.width = heatMap.paletteSettings.type === 'Gradient' || heatMap.legendSettings.enableSmartLegend ?
this.width < 50 ? 50 : this.width : this.width;
if (legendSettings.position === 'Left') {
rect.x += this.width;
}
rect.width -= this.width;
}
};
Legend.prototype.calculateTitleBounds = function () {
var heatMap = this.heatMap;
var title = heatMap.legendSettings.title;
var titleSize = measureText(this.heatMap.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(title.text) : title.text, title.textStyle);
if (heatMap.legendSettings.title.text) {
if ((heatMap.legendSettings.position === 'Top' || heatMap.legendSettings.position === 'Bottom') &&
heatMap.legendSettings.height === '') {
this.legendHeight = (((2 *