@syncfusion/ej2-heatmap
Version:
Feature rich data visulization control used to visualize the matrix data where the individual values are represented as colors
1,272 lines (1,267 loc) • 482 kB
JavaScript
import { Property, ChildProperty, Complex, Collection, isNullOrUndefined, extend, createElement, SanitizeHtmlHelper, compile, remove, Browser, merge, select, print, Internationalization, EventHandler, Touch, Event, NotifyPropertyChanges, Component } from '@syncfusion/ej2-base';
import { SvgRenderer, Tooltip as Tooltip$1, CanvasRenderer } from '@syncfusion/ej2-svg-base';
import { DataUtil } from '@syncfusion/ej2-data';
import { PdfPageOrientation, PdfDocument, SizeF, PdfBitmap } from '@syncfusion/ej2-pdf-export';
/**
* Specifies HeatMaps Themes
*/
// eslint-disable-next-line @typescript-eslint/no-namespace
var Theme;
(function (Theme) {
/** @private */
Theme.heatMapTitleFont = {
size: '15px',
fontWeight: '500',
color: null,
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
};
/** @private */
Theme.titleFont = {
size: '13px',
fontWeight: 'Normal',
color: null,
fontStyle: 'Normal',
fontFamily: 'Segoe UI',
textOverflow: 'None'
};
/** @private */
Theme.axisTitleFont = {
size: '12px',
fontWeight: 'Normal',
color: null,
fontStyle: 'Normal',
fontFamily: 'Segoe UI'
};
/** @private */
Theme.axisLabelFont = {
size: '12px',
fontWeight: 'Normal',
color: null,
fontStyle: 'Normal',
fontFamily: 'Segoe UI',
textOverflow: 'None'
};
/** @private */
Theme.legendLabelFont = {
size: '12px',
fontWeight: 'Normal',
color: null,
fontStyle: 'Normal',
fontFamily: 'Segoe UI',
textOverflow: 'None'
};
/** @private */
Theme.rectLabelFont = {
size: '12px',
fontWeight: 'Normal',
color: null,
fontStyle: 'Normal',
fontFamily: 'Segoe UI',
textOverflow: 'None'
};
/** @private */
Theme.tooltipFont = {
size: '13px',
fontWeight: 'Normal',
color: null,
fontStyle: 'Normal',
fontFamily: 'Segoe UI',
textOverflow: 'None'
};
})(Theme || (Theme = {}));
/**
* Functions to check whether target object implement specific interface.
*
* @param { HeatMapTheme } theme - specifies the value.
* @returns { IThemeStyle } returns the theme style
* @private
*/
function getThemeColor(theme) {
var style;
switch (theme.toLowerCase()) {
case 'highcontrastlight':
case 'highcontrast':
style = {
heatMapTitle: '#ffffff',
axisTitle: '#ffffff',
axisLabel: '#ffffff',
cellBorder: '#EEEEEE',
background: '#000000',
cellTextColor: '#000000',
toggledColor: '#000000',
emptyCellColor: '#EEEEEE',
legendLabel: '#ffffff',
palette: [{ 'color': '#BEE7EE' },
{ 'color': '#85c4cf' },
{ 'color': '#4CA1AF' }]
};
break;
case 'materialdark':
case 'fabricdark':
case 'bootstrapdark':
style = {
heatMapTitle: '#ffffff',
axisTitle: '#ffffff',
axisLabel: '#DADADA',
cellBorder: '#EEEEEE',
background: '#000000',
cellTextColor: '#000000',
toggledColor: '#000000',
emptyCellColor: '#EEEEEE',
legendLabel: '#ffffff',
palette: [{ 'color': '#BEE7EE' },
{ 'color': '#85c4cf' },
{ 'color': '#4CA1AF' }]
};
break;
case 'bootstrap4':
style = {
heatMapTitle: '#212529',
axisTitle: '#212529',
axisLabel: '#212529',
cellBorder: '#E9ECEF',
background: '#FFFFFF',
cellTextColor: '#212529',
toggledColor: '#ffffff',
emptyCellColor: '#E9ECEF',
legendLabel: '#212529',
palette: [{ 'color': '#BEE7EE' },
{ 'color': '#85c4cf' },
{ 'color': '#4CA1AF' }]
};
break;
case 'tailwind':
style = {
heatMapTitle: '#374151',
axisTitle: '#374151',
axisLabel: '#6B7280',
cellBorder: '#E5E7EB',
background: 'transparent',
cellTextColor: '#111827',
toggledColor: 'transparent',
emptyCellColor: '#E5E7EB',
legendLabel: '#374151',
palette: [{ 'color': '#5A61F6' },
{ 'color': '#65A30D' },
{ 'color': '#14B8A6' }]
};
break;
case 'tailwinddark':
style = {
heatMapTitle: '#D1D5DB',
axisTitle: '#D1D5DB',
axisLabel: '#9CA3AF',
cellBorder: '#4B5563',
background: 'transparent',
cellTextColor: '#FFFFFF',
toggledColor: 'transparent',
emptyCellColor: '#374151',
legendLabel: '#D1D5DB',
palette: [{ 'color': '#8B5CF6' },
{ 'color': '#22D3EE' },
{ 'color': '#F87171' }]
};
break;
case 'tailwind3':
style = {
heatMapTitle: '#111827',
axisTitle: '#111827',
axisLabel: '#4B5563',
cellBorder: '#E5E7EB',
background: 'transparent',
cellTextColor: '#111827',
toggledColor: 'transparent',
emptyCellColor: '#E5E7EB',
legendLabel: '#4B5563',
palette: [{ 'color': '#2F4074' },
{ 'color': '#03B4B4' },
{ 'color': '#0D72DE' }]
};
break;
case 'tailwind3dark':
style = {
heatMapTitle: '#FFFFFF',
axisTitle: '#FFFFFF',
axisLabel: '#D1D5DB',
cellBorder: '#282F3C',
background: 'transparent',
cellTextColor: '#FFFFFF',
toggledColor: 'transparent',
emptyCellColor: '#282F3C',
legendLabel: '#D1D5DB',
palette: [{ 'color': '#8029F1' },
{ 'color': '#1ABC9C' },
{ 'color': '#0D72DE' }]
};
break;
case 'bootstrap5':
style = {
heatMapTitle: '#212529',
axisTitle: '#212529',
axisLabel: '#212529',
cellBorder: 'transparent',
background: 'transparent',
toggledColor: '#E9ECEF',
emptyCellColor: '#E9ECEF',
legendLabel: '#212529',
palette: [{ 'color': '#DC3545' },
{ 'color': '#FFC107' },
{ 'color': '#D63384' }]
};
break;
case 'bootstrap5dark':
style = {
heatMapTitle: '#DEE2E6',
axisTitle: '#DEE2E6',
axisLabel: '#DEE2E6',
cellBorder: 'transparent',
background: 'transparent',
toggledColor: '#343A40',
emptyCellColor: '#343A40',
legendLabel: '#DEE2E6',
palette: [{ 'color': '#DC3545' },
{ 'color': '#FFC107' },
{ 'color': '#D63384' }]
};
break;
case 'fluent':
style = {
heatMapTitle: '#201F1E',
axisTitle: '#201F1E',
axisLabel: '#201F1E',
cellBorder: '#EDEBE9',
background: 'transparent',
cellTextColor: '#111827',
toggledColor: 'transparent',
emptyCellColor: '#EDEBE9',
legendLabel: '#201F1E',
palette: [{ 'color': '#EDEBE9' },
{ 'color': '#614570' },
{ 'color': '#4C6FB1' }]
};
break;
case 'fluentdark':
style = {
heatMapTitle: '#F3F2F1',
axisTitle: '#F3F2F1',
axisLabel: '#F3F2F1',
cellBorder: '#EDEBE9',
background: 'transparent',
cellTextColor: '#FFFFFF',
toggledColor: 'transparent',
emptyCellColor: '#292827',
legendLabel: '#F3F2F1',
palette: [{ 'color': '#292827' },
{ 'color': '#2A72D5' },
{ 'color': '#43B786' }]
};
break;
case 'material3':
style = {
heatMapTitle: '#1C1B1F',
axisTitle: '#1C1B1F',
axisLabel: '#1C1B1F',
cellBorder: '#C4C7C5',
background: 'transparent',
cellTextColor: '#1C1B1F',
toggledColor: '#F6F0FB',
emptyCellColor: '#F6F0FB',
legendLabel: '#49454E',
palette: [{ 'color': '#6200EE' },
{ 'color': '#E77A16' },
{ 'color': '#82C100' }]
};
break;
case 'material3dark':
style = {
heatMapTitle: '#E6E1E5',
axisTitle: '#E6E1E5',
axisLabel: '#E6E1E5',
cellBorder: '#444746',
background: 'transparent',
cellTextColor: '#E6E1E5',
toggledColor: '#49454F',
emptyCellColor: '#49454E',
legendLabel: '#CAC4D0',
palette: [{ 'color': '#4EAAFF' },
{ 'color': '#FA4EAB' },
{ 'color': '#FFF500' }]
};
break;
case 'fluent2':
style = {
heatMapTitle: '#242424',
axisTitle: '#242424',
axisLabel: '#242424',
cellBorder: 'transparent',
background: 'transparent',
cellTextColor: '#242424',
toggledColor: '#EDEBE9',
emptyCellColor: '#EDEBE9',
legendLabel: '#242424',
palette: [{ 'color': '#6200EE' },
{ 'color': '#09AF74' },
{ 'color': '#0076E5' }]
};
break;
case 'fluent2dark':
case 'fluent2highcontrast':
style = {
heatMapTitle: '#FFFFFF',
axisTitle: '#FFFFFF',
axisLabel: '#FFFFFF',
cellBorder: 'transparent',
background: 'transparent',
cellTextColor: '#FFFFFF',
toggledColor: '#292827',
emptyCellColor: '#292827',
legendLabel: '#FFFFFF',
palette: [{ 'color': '#9BB449' },
{ 'color': '#2A72D5' },
{ 'color': '#43B786' }]
};
break;
default:
style = {
heatMapTitle: '#424242',
axisTitle: '#424242',
axisLabel: '#686868',
cellBorder: '#EEEEEE',
cellTextColor: '#000000',
toggledColor: '#ffffff',
background: '#FFFFFF',
emptyCellColor: '#EEEEEE',
legendLabel: '#353535',
palette: [{ 'color': '#BEE7EE' },
{ 'color': '#85c4cf' },
{ 'color': '#4CA1AF' }]
};
break;
}
return style;
}
var __extends = (undefined && undefined.__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 = (undefined && undefined.__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;
};
/**
* Sets and gets the options to customize the text in heatmap.
*/
var Font = /** @__PURE__ @class */ (function (_super) {
__extends(Font, _super);
function Font() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('16px')
], Font.prototype, "size", void 0);
__decorate([
Property('')
], Font.prototype, "color", void 0);
__decorate([
Property('Segoe UI')
], Font.prototype, "fontFamily", void 0);
__decorate([
Property('Normal')
], Font.prototype, "fontWeight", void 0);
__decorate([
Property('Normal')
], Font.prototype, "fontStyle", void 0);
__decorate([
Property('Center')
], Font.prototype, "textAlignment", void 0);
__decorate([
Property('Trim')
], Font.prototype, "textOverflow", void 0);
return Font;
}(ChildProperty));
/**
* Sets and gets the options to configures the margins of the heatmap.
*/
var Margin = /** @__PURE__ @class */ (function (_super) {
__extends(Margin, _super);
function Margin() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(10)
], Margin.prototype, "left", void 0);
__decorate([
Property(10)
], Margin.prototype, "right", void 0);
__decorate([
Property(10)
], Margin.prototype, "top", void 0);
__decorate([
Property(10)
], Margin.prototype, "bottom", void 0);
return Margin;
}(ChildProperty));
/**
* Sets and gets the options to customize the borders in the heatmap.
*/
var Border = /** @__PURE__ @class */ (function (_super) {
__extends(Border, _super);
function Border() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], Border.prototype, "color", void 0);
__decorate([
Property(1)
], Border.prototype, "width", void 0);
__decorate([
Property('')
], Border.prototype, "radius", void 0);
return Border;
}(ChildProperty));
/**
* Sets and gets the options to customize the tooltip borders in the heatmap.
*/
var TooltipBorder = /** @__PURE__ @class */ (function (_super) {
__extends(TooltipBorder, _super);
function TooltipBorder() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], TooltipBorder.prototype, "color", void 0);
__decorate([
Property(0)
], TooltipBorder.prototype, "width", void 0);
return TooltipBorder;
}(ChildProperty));
/**
* Sets and gets the options to configure the mapping value for size and color in bubble cell type.
*/
var BubbleData = /** @__PURE__ @class */ (function (_super) {
__extends(BubbleData, _super);
function BubbleData() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], BubbleData.prototype, "size", void 0);
__decorate([
Property(null)
], BubbleData.prototype, "color", void 0);
return BubbleData;
}(ChildProperty));
/**
* Sets and gets the options to customize the title of heatmap.
*/
var Title = /** @__PURE__ @class */ (function (_super) {
__extends(Title, _super);
function Title() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], Title.prototype, "text", void 0);
__decorate([
Complex({}, Font)
], Title.prototype, "textStyle", void 0);
return Title;
}(ChildProperty));
/**
* Sets and gets the options to apply the fill color value for cell color range.
*/
var FillColor = /** @__PURE__ @class */ (function (_super) {
__extends(FillColor, _super);
function FillColor() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('#eeeeee')
], FillColor.prototype, "minColor", void 0);
__decorate([
Property('#eeeeee')
], FillColor.prototype, "maxColor", void 0);
return FillColor;
}(ChildProperty));
/**
* Sets and gets the options to customize palette colors.
*/
var PaletteCollection = /** @__PURE__ @class */ (function (_super) {
__extends(PaletteCollection, _super);
function PaletteCollection() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], PaletteCollection.prototype, "value", void 0);
__decorate([
Property(null)
], PaletteCollection.prototype, "color", void 0);
__decorate([
Property(null)
], PaletteCollection.prototype, "label", void 0);
__decorate([
Property(null)
], PaletteCollection.prototype, "startValue", void 0);
__decorate([
Property(null)
], PaletteCollection.prototype, "endValue", void 0);
__decorate([
Property(null)
], PaletteCollection.prototype, "minColor", void 0);
__decorate([
Property(null)
], PaletteCollection.prototype, "maxColor", void 0);
return PaletteCollection;
}(ChildProperty));
/**
* Sets and gets the options to customize the label border.
*/
var AxisLabelBorder = /** @__PURE__ @class */ (function (_super) {
__extends(AxisLabelBorder, _super);
function AxisLabelBorder() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('#b5b5b5')
], AxisLabelBorder.prototype, "color", void 0);
__decorate([
Property(1)
], AxisLabelBorder.prototype, "width", void 0);
__decorate([
Property('Rectangle')
], AxisLabelBorder.prototype, "type", void 0);
return AxisLabelBorder;
}(ChildProperty));
/**
* Sets and gets the options to customize the size of the bubble heatmap cell type.
*/
var BubbleSize = /** @__PURE__ @class */ (function (_super) {
__extends(BubbleSize, _super);
function BubbleSize() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('0%')
], BubbleSize.prototype, "minimum", void 0);
__decorate([
Property('100%')
], BubbleSize.prototype, "maximum", void 0);
return BubbleSize;
}(ChildProperty));
/**
* Sets and gets the options to configure the multi-level labels.
*/
var MultiLevelCategories = /** @__PURE__ @class */ (function (_super) {
__extends(MultiLevelCategories, _super);
function MultiLevelCategories() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], MultiLevelCategories.prototype, "start", void 0);
__decorate([
Property(null)
], MultiLevelCategories.prototype, "end", void 0);
__decorate([
Property('')
], MultiLevelCategories.prototype, "text", void 0);
__decorate([
Property(null)
], MultiLevelCategories.prototype, "maximumTextWidth", void 0);
return MultiLevelCategories;
}(ChildProperty));
/**
* Sets and gets the options to customize the multi-level labels.
*/
var MultiLevelLabels = /** @__PURE__ @class */ (function (_super) {
__extends(MultiLevelLabels, _super);
function MultiLevelLabels() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('Center')
], MultiLevelLabels.prototype, "alignment", void 0);
__decorate([
Property('Wrap')
], MultiLevelLabels.prototype, "overflow", void 0);
__decorate([
Complex(Theme.axisLabelFont, Font)
], MultiLevelLabels.prototype, "textStyle", void 0);
__decorate([
Complex({ color: '#b5b5b5', width: 1, type: 'Rectangle' }, AxisLabelBorder)
], MultiLevelLabels.prototype, "border", void 0);
__decorate([
Collection([], MultiLevelCategories)
], MultiLevelLabels.prototype, "categories", void 0);
return MultiLevelLabels;
}(ChildProperty));
/**
* Internal class used to maintain colorcollection.
*
* @private
*/
var ColorCollection = /** @__PURE__ @class */ (function () {
function ColorCollection(value, color, label, startValue, endValue, minColor, maxColor) {
this.value = value;
this.color = color;
this.label = label;
this.startValue = startValue;
this.endValue = endValue;
this.minColor = minColor;
this.maxColor = maxColor;
}
return ColorCollection;
}());
/**
* Specifies the current data of the bubble cell.
*/
var BubbleTooltipData = /** @__PURE__ @class */ (function () {
/**
* @param {string} mappingName - Specifies the mapping name.
* @param {number} bubbleData - Specifies the bubble data.
* @param {string} valueType - Specifies the value type.
* @private
*/
function BubbleTooltipData(mappingName, bubbleData, valueType) {
this.mappingName = mappingName;
this.bubbleData = bubbleData;
this.valueType = valueType;
}
return BubbleTooltipData;
}());
/**
* Internal class used to maintain legend colorcollection.
*
* @private
*/
var LegendColorCollection = /** @__PURE__ @class */ (function () {
function LegendColorCollection(value, color, label, startValue, endValue, minColor, maxColor, isHidden) {
this.value = value;
this.color = color;
this.label = label;
this.startValue = startValue;
this.endValue = endValue;
this.minColor = minColor;
this.maxColor = maxColor;
this.isHidden = isHidden;
}
return LegendColorCollection;
}());
/**
* class used to maintain xAxis labels details for multipleRow label intersect action.
*
* @private
*/
var MultipleRow = /** @__PURE__ @class */ (function () {
function MultipleRow(start, end, index, label, row) {
this.index = 1;
this.row = 1;
this.start = start;
this.end = end;
this.index = index;
this.label = label;
this.row = row;
}
return MultipleRow;
}());
var __extends$1 = (undefined && undefined.__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$1 = (undefined && undefined.__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;
};
/**
* Sets and gets the options to customize the color palette of heatmap.
*/
var PaletteSettings = /** @__PURE__ @class */ (function (_super) {
__extends$1(PaletteSettings, _super);
function PaletteSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate$1([
Collection([{}], PaletteCollection)
], PaletteSettings.prototype, "palette", void 0);
__decorate$1([
Property('Gradient')
], PaletteSettings.prototype, "type", void 0);
__decorate$1([
Property('')
], PaletteSettings.prototype, "emptyPointColor", void 0);
__decorate$1([
Property('Table')
], PaletteSettings.prototype, "colorGradientMode", void 0);
__decorate$1([
Complex({}, FillColor)
], PaletteSettings.prototype, "fillColor", void 0);
return PaletteSettings;
}(ChildProperty));
/**
* Helper class for colormapping
*/
var RgbColor = /** @__PURE__ @class */ (function () {
function RgbColor(r, g, b) {
this.R = r;
this.G = g;
this.B = b;
}
return RgbColor;
}());
var CellColor = /** @__PURE__ @class */ (function () {
function CellColor(heatMap) {
this.heatMap = heatMap;
}
/**
* To convert hexa color to RGB.
*
* @returns {any}
* @private
*/
CellColor.prototype.convertToRGB = function (value, colorMapping) {
var previousOffset = this.heatMap.isColorRange ? colorMapping[0].startValue : colorMapping[0].value;
var nextOffset = 0;
var i = 0;
var previousColor;
var nextColor;
if (this.heatMap.isColorRange && this.heatMap.paletteSettings.type === 'Gradient') {
for (i = 0; i < colorMapping.length; i++) {
var offset = Number(colorMapping[i].endValue);
if (value <= offset && value >= Number(colorMapping[i].startValue)) {
nextOffset = offset;
previousColor = this.heatMap.colorCollection[i].minColor;
nextColor = this.heatMap.colorCollection[i].maxColor;
}
else if (colorMapping[0].startValue !== this.heatMap.dataSourceMinValue && value < colorMapping[0].startValue) {
nextOffset = colorMapping[0].startValue;
previousOffset = this.heatMap.dataSourceMinValue;
previousColor = this.heatMap.paletteSettings.fillColor.minColor;
nextColor = this.heatMap.paletteSettings.fillColor.maxColor;
break;
}
else if (value > offset && value <= (i === (colorMapping.length - 1) ? this.heatMap.dataSourceMaxValue :
colorMapping[i + 1].startValue)) {
nextOffset = (i === (colorMapping.length - 1)) ? this.heatMap.dataSourceMaxValue : colorMapping[i + 1].startValue;
previousOffset = offset;
previousColor = this.heatMap.paletteSettings.fillColor.minColor;
nextColor = this.heatMap.paletteSettings.fillColor.maxColor;
break;
}
else {
nextOffset = offset;
previousOffset = offset;
}
}
}
else {
for (i = 1; i < colorMapping.length; i++) {
var offset = Number(colorMapping[i].value);
if (value <= offset) {
nextOffset = offset;
previousColor = this.getEqualColor(colorMapping, previousOffset);
nextColor = this.getEqualColor(colorMapping, nextOffset);
break;
}
else {
nextOffset = offset;
previousOffset = offset;
}
}
}
var percent = 0;
var full = (nextOffset) - previousOffset;
percent = (value - previousOffset) / full;
percent = isNaN(percent) || !isFinite(percent) ? 0 : percent;
return this.getPercentageColor(percent, previousColor, nextColor);
};
/**
* To convert RGB to HEX.
*
* @returns {string}
* @private
*/
CellColor.prototype.rgbToHex = function (r, g, b) {
return '#' + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
};
/**
* To convert Component to HEX.
*
* @returns {string}
* @private
*/
CellColor.prototype.componentToHex = function (c) {
var hex = c.toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
/**
* To get similar color.
*
* @returns {string}
* @private
*/
CellColor.prototype.getEqualColor = function (list, offset) {
for (var i = 0; i < list.length; i++) {
if (Number(list[i].value) === offset) {
var color = list[i].color;
if (!isNullOrUndefined(color)) {
if (color.indexOf('rgb') !== -1) {
color = this.convertToHex(color);
}
else if (color.indexOf('#') === -1) {
color = '#FFFFFF';
}
}
else {
color = '#FFFFFF';
}
return color;
}
}
return '#00000';
};
/**
* To convert RGB to HEX.
*
* @returns {string}
* @private
*/
CellColor.prototype.convertToHex = function (color) {
var itemColor = color.substr(3);
itemColor = itemColor.split('(')[1].split(')')[0];
var colorSplit = itemColor.split(',');
itemColor = this.rgbToHex(parseInt(colorSplit[0], 10), parseInt(colorSplit[1], 10), parseInt(colorSplit[2], 10));
return itemColor;
};
/**
* To get RGB for percentage value.
*
* @returns {any}
* @private
*/
CellColor.prototype.getPercentageColor = function (percent, previous, next) {
var nextColor = next.split('#')[1];
var prevColor = previous.split('#')[1];
var r = this.getPercentage(percent, parseInt(prevColor.substr(0, 2), 16), parseInt(nextColor.substr(0, 2), 16));
var g = this.getPercentage(percent, parseInt(prevColor.substr(2, 2), 16), parseInt(nextColor.substr(2, 2), 16));
var b = this.getPercentage(percent, parseInt(prevColor.substr(4, 2), 16), parseInt(nextColor.substr(4, 2), 16));
return new RgbColor(r, g, b);
};
/**
* To convert numbet to percentage.
*
* @returns {any}
* @private
*/
CellColor.prototype.getPercentage = function (percent, previous, next) {
var full = next - previous;
return Math.round((previous + (full * percent)));
};
/**
* To get complete color Collection.
*
* @private
*/
CellColor.prototype.getColorCollection = function () {
var heatMap = this.heatMap;
heatMap.colorCollection = [];
heatMap.legendColorCollection = [];
var range;
for (var j = 0; j < this.heatMap.paletteSettings.palette.length; j++) {
if (this.heatMap.paletteSettings.palette[j].startValue === null ||
this.heatMap.paletteSettings.palette[j].endValue === null) {
this.heatMap.isColorRange = false;
break;
}
else {
this.heatMap.isColorRange = true;
}
}
var minValue = heatMap.bubbleSizeWithColor ? heatMap.minColorValue : heatMap.dataSourceMinValue;
var maxValue = heatMap.bubbleSizeWithColor ? heatMap.maxColorValue : heatMap.dataSourceMaxValue;
heatMap.emptyPointColor = heatMap.paletteSettings.emptyPointColor ? heatMap.paletteSettings.emptyPointColor :
heatMap.themeStyle.emptyCellColor;
var tempcolorMapping = this.orderbyOffset(this.heatMap.isColorRange ? heatMap.paletteSettings.palette :
heatMap.paletteSettings.palette && heatMap.paletteSettings.palette.length > 1 ?
heatMap.paletteSettings.palette : heatMap.themeStyle.palette);
if (!tempcolorMapping.isCompact) {
if (heatMap.paletteSettings.type === 'Gradient') {
range = (maxValue - minValue) / (tempcolorMapping.offsets.length - 1);
}
else {
range = (maxValue - minValue) / (tempcolorMapping.offsets.length);
}
if (tempcolorMapping.offsets.length >= 2) {
for (var index = 0; index < tempcolorMapping.offsets.length; index++) {
heatMap.colorCollection.push(new ColorCollection((Math.round(((minValue) + (index * range)) * 100) / 100), tempcolorMapping.offsets[index].color, tempcolorMapping.offsets[index].label, tempcolorMapping.offsets[index].startValue, tempcolorMapping.offsets[index].endValue, tempcolorMapping.offsets[index].minColor, tempcolorMapping.offsets[index].maxColor));
heatMap.legendColorCollection.push(new LegendColorCollection(Math.round(((minValue) + (index * range)) * 100) / 100, tempcolorMapping.offsets[index].color, tempcolorMapping.offsets[index].label, tempcolorMapping.offsets[index].startValue, tempcolorMapping.offsets[index].endValue, tempcolorMapping.offsets[index].minColor, tempcolorMapping.offsets[index].maxColor, false));
}
}
}
else {
heatMap.colorCollection = tempcolorMapping.offsets;
heatMap.legendColorCollection = extend([], tempcolorMapping.offsets, null, true);
}
if (!this.heatMap.isColorRange) {
this.updateLegendColorCollection(minValue, maxValue, tempcolorMapping);
}
};
/**
* To update legend color Collection.
*
* @private
*/
CellColor.prototype.updateLegendColorCollection = function (minValue, maxValue, tempcolorMapping) {
if (this.heatMap.paletteSettings.type === 'Fixed' && (tempcolorMapping.isCompact || tempcolorMapping.isLabel)) {
return;
}
if (Math.round(minValue * 100) / 100 < this.heatMap.legendColorCollection[0].value) {
this.heatMap.legendColorCollection.unshift(new LegendColorCollection(Math.round(minValue * 100) / 100, this.heatMap.legendColorCollection[0].color, this.heatMap.legendColorCollection[0].label, this.heatMap.legendColorCollection[0].startValue, this.heatMap.legendColorCollection[0].endValue, this.heatMap.legendColorCollection[0].minColor, this.heatMap.legendColorCollection[0].maxColor, true));
}
if (Math.round(maxValue * 100) / 100 > this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].value) {
this.heatMap.legendColorCollection.push(new LegendColorCollection(Math.round(maxValue * 100) / 100, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].color, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].label, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].startValue, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].endValue, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].minColor, this.heatMap.legendColorCollection[this.heatMap.legendColorCollection.length - 1].maxColor, true));
}
};
/**
* To get ordered palette color collection.
*
* @private
*/
CellColor.prototype.orderbyOffset = function (offsets) {
var returnCollection = new PaletterColor();
var key = this.heatMap.isColorRange ? 'to' : 'value';
var label = 'label';
returnCollection.isCompact = true;
returnCollection.isLabel = true;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
returnCollection.offsets = offsets.sort(function (a, b) {
if (isNullOrUndefined(a[label]) && isNullOrUndefined(b[label])) {
returnCollection.isLabel = false;
}
if (!isNullOrUndefined(a[key]) && !isNullOrUndefined(b[key])) {
return a[key] - b[key];
}
else {
returnCollection.isCompact = false;
return a;
}
});
if (!returnCollection.isCompact) {
returnCollection.offsets = this.heatMap.paletteSettings.palette && this.heatMap.paletteSettings.palette.length > 1 ?
this.heatMap.paletteSettings.palette : this.heatMap.themeStyle.palette;
}
return returnCollection;
};
/**
* To get color depends to value.
*
* @private
*/
CellColor.prototype.getColorByValue = function (text) {
var color = '';
var rbg;
var compareValue = 0;
if (text.toString() !== '') {
if (this.heatMap.cellSettings.tileType === 'Bubble' &&
(this.heatMap.cellSettings.bubbleType === 'Size' || this.heatMap.cellSettings.bubbleType === 'Sector')) {
color = this.heatMap.isColorRange ? this.heatMap.colorCollection[0].minColor : this.heatMap.colorCollection[0].color;
}
else if (this.heatMap.paletteSettings.type === 'Fixed') {
for (var y = 0; y < this.heatMap.colorCollection.length; y++) {
compareValue = this.heatMap.isColorRange ? this.heatMap.paletteSettings.palette[y].startValue :
this.heatMap.colorCollection[y + 1] ? this.heatMap.colorCollection[y + 1].value :
this.heatMap.colorCollection[y].value;
var singleValue = this.heatMap.dataSourceMinValue === this.heatMap.dataSourceMaxValue;
if (this.heatMap.isColorRange) {
var legendRange = void 0;
if ((text <= this.heatMap.colorCollection[y].endValue &&
text >= this.heatMap.colorCollection[y].startValue)) {
if (this.heatMap.legendVisibilityByCellType) {
legendRange = this.heatMap.legendModule.legendRange;
}
color = (this.heatMap.legendVisibilityByCellType && legendRange[y] &&
!legendRange[y].visible) ?
this.heatMap.themeStyle.toggledColor : this.heatMap.colorCollection[y].minColor;
}
else if (color === '') {
color = this.heatMap.paletteSettings.fillColor.minColor;
}
}
else {
if ((text <= compareValue && singleValue && y === 0) || text < compareValue ||
(text >= compareValue && y === this.heatMap.colorCollection.length - 1)) {
var legendRange = void 0;
if (this.heatMap.legendVisibilityByCellType) {
legendRange = this.heatMap.legendModule.legendRange;
}
color = (this.heatMap.legendVisibilityByCellType && legendRange[y] &&
!legendRange[y].visible) ?
this.heatMap.themeStyle.toggledColor : this.heatMap.colorCollection[y].color;
break;
}
}
}
}
else {
if (this.heatMap.paletteSettings.colorGradientMode !== 'Table') {
this.getColorCollection();
}
if (text < this.heatMap.colorCollection[0].value && !this.heatMap.isColorRange) {
color = this.heatMap.colorCollection[0].color;
}
else if (text > this.heatMap.colorCollection[this.heatMap.colorCollection.length - 1].value &&
!this.heatMap.isColorRange) {
color = this.heatMap.colorCollection[this.heatMap.colorCollection.length - 1].color;
}
else {
rbg = this.convertToRGB(text, this.heatMap.colorCollection);
color = this.rgbToHex(rbg.R, rbg.G, rbg.B);
}
}
}
else {
color = this.heatMap.emptyPointColor;
}
return color;
};
/**
* @returns {void}
* @private
*/
CellColor.prototype.destroy = function () {
this.heatMap = null;
};
return CellColor;
}());
var __extends$2 = (undefined && undefined.__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 __());
};
})();
/**
* Function to check whether target object implement specific interface
*
* @param {string} value - specifies the value
* @param {number} containerSize - specifies the containerSize
* @returns {number} returns the number
* @hidden
*/
function stringToNumber(value, containerSize) {
if (value !== null && value !== undefined) {
return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);
}
return null;
}
/**
* Function to check whether target object implement specific interface
*
* @param {string} text - specifies the text
* @param {FontModel} font - specifies the font
* @returns {Size} returns the number
* @hidden
*/
function measureText(text, font) {
var breakText = text || '';
var htmlObject = document.getElementById('heatmapmeasuretext');
if (htmlObject === null) {
htmlObject = createElement('text', { id: 'heatmapmeasuretext' });
document.body.appendChild(htmlObject);
}
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';
htmlObject.style.visibility = 'hidden';
htmlObject.style.fontSize = (font.size).indexOf('px') !== -1 ? font.size : font.size + 'px';
htmlObject.style.fontWeight = font.fontWeight;
htmlObject.style.fontStyle = font.fontStyle;
htmlObject.style.fontFamily = font.fontFamily;
htmlObject.style.top = '-100';
htmlObject.style.left = '0';
htmlObject.style.whiteSpace = 'nowrap';
// For bootstrap line height issue
htmlObject.style.lineHeight = 'normal';
var clientWidth = htmlObject.clientWidth;
var clientHeight = htmlObject.clientHeight;
removeMeasureElement();
return new Size(clientWidth, clientHeight);
}
/** @private */
var TextElement = /** @__PURE__ @class */ (function () {
function TextElement(fontModel, fontColor) {
this['font-size'] = fontModel.size;
this['font-style'] = fontModel.fontStyle.toLowerCase();
this['font-family'] = fontModel.fontFamily;
this['font-weight'] = fontModel.fontWeight.toLowerCase();
this.fill = fontColor ? fontColor : '';
}
return TextElement;
}());
/**
* Function to check whether target object implement specific interface
*
* @param {number} width - specifies the text
* @param {number} leftPadding - specifies the font
* @param {number} rightPadding - specifies the font
* @param {FontModel} titleStyle - specifies the font
* @returns {number} returns the number
* @hidden
*/
function titlePositionX(width, leftPadding, rightPadding, titleStyle) {
var positionX;
if (titleStyle.textAlignment === 'Near') {
positionX = leftPadding;
}
else if (titleStyle.textAlignment === 'Center') {
positionX = leftPadding + width / 2;
}
else {
positionX = width + leftPadding;
}
return positionX;
}
/**
* Specifies the size information of an element.
*/
var Size = /** @__PURE__ @class */ (function () {
/**
* @param {number} width - Specifies the width.
* @param {number} height - Specifies the height.
* @private */
function Size(width, height) {
this.width = width;
this.height = height;
}
return Size;
}());
/** @private */
var CustomizeOption = /** @__PURE__ @class */ (function () {
function CustomizeOption(id) {
this.id = id;
}
return CustomizeOption;
}());
/** @private */
var PathOption = /** @__PURE__ @class */ (function (_super) {
__extends$2(PathOption, _super);
function PathOption(id, fill, width, color, opacity, dashArray, d) {
var _this = _super.call(this, id) || this;
_this.opacity = opacity;
_this.fill = fill;
_this.stroke = color ? color : '';
_this['stroke-width'] = parseFloat(width.toString());
_this['stroke-dasharray'] = dashArray;
_this.d = d;
return _this;
}
return PathOption;
}(CustomizeOption));
/**
* 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-next-line @typescript-eslint/no-explicit-any
function createLabelTemplate(template, heatMap, labelTemplate, rectPosition,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
xLabels, yLabels, index) {
if (heatMap.enableHtmlSanitizer && typeof template === 'string') {
template = SanitizeHtmlHelper.sanitize(template);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var templateFunction = getTemplateFunction(template, heatMap);
var rectData = null;
var dataSource = heatMap.dataSource;
if (heatMap.dataSourceSettings.isJsonData && (heatMap.dataSourceSettings.adaptorType === 'Cell' || heatMap.dataSourceSettings.adaptorType === 'Table')) {
// eslint-disable-next-line @typescript-eslint/tslint/config
var yLabelData_1 = heatMap.yAxis.valueType === 'Numeric' ? heatMap.yAxis.labels : yLabels;
// eslint-disable-next-line @typescript-eslint/tslint/config
var xLabelData_1 = heatMap.xAxis.valueType === 'Numeric' ? heatMap.xAxis.labels : xLabels;
// eslint-disable-next-line @typescript-eslint/tslint/config
dataSource.forEach(function (item) {
// eslint-disable-next-line @typescript-eslint/tslint/config
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
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
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 = compile(document.querySelector(template).innerHTML.trim());
// eslint-disable-next-line @typescript-eslint/no-explicit-any
}