@syncfusion/ej2-treemap
Version:
Essential JS 2 TreeMap Components
1,416 lines (1,413 loc) • 329 kB
JavaScript
import { Property, ChildProperty, Complex, Collection, createElement, SanitizeHtmlHelper, isNullOrUndefined, compile, merge, remove, extend, print, Browser, Fetch, EventHandler, Internationalization, Event, NotifyPropertyChanges, Component } from '@syncfusion/ej2-base';
import { SvgRenderer, Tooltip } from '@syncfusion/ej2-svg-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { PdfPageOrientation, PdfDocument, PdfBitmap } from '@syncfusion/ej2-pdf-export';
/**
* TreeMap constants doc
*/
/**
* Triggers when the treemap is on load.
*
* @private
*/
var load = 'load';
/**
* Triggers after treemap rendered.
*
* @private
*/
var loaded = 'loaded';
/**
* Trigger before call the print method.
*
* @private
*/
var beforePrint = 'beforePrint';
/**
* Trigger before each treemap item rendered.
*
* @private
*/
var itemRendering = 'itemRendering';
/**
* Trigger after click on treemap item.
*
* @private
*/
var drillStart = 'drillStart';
/**
* Trigger after drill start event completed.
*
* @private
*/
var drillEnd = 'drillEnd';
/**
* Trigger after select the treemap item.
*
* @private
*/
var itemSelected = 'itemSelected';
/**
* Trigger after hover on the treemap item.
*
* @private
*/
var itemHighlight = 'itemHighlight';
/**
* Trigger after mouse hover on the treemap item.
*
* @private
*/
var tooltipRendering = 'tooltipRendering';
/**
* Trigger after click on the treemap item.
*
* @private
*/
var itemClick = 'itemClick';
/**
* Trigger after mouse hover on the treemap item.
*
* @private
*/
var itemMove = 'itemMove';
/**
* Trigger after click on the treemap item.
*
* @private
*/
var click = 'click';
/**
* Trigger after double click on the treemap item.
*
* @private
*/
var doubleClick = 'doubleClick';
/**
* Trigger after right click on the treemap item.
*
* @private
*/
var rightClick = 'rightClick';
/**
* Trigger after mouse hover on the treemap item.
*
* @private
*/
var mouseMove = 'mouseMove';
/**
* Trigger before each treemap item.
*
* @private
*/
var legendItemRendering = 'legendItemRendering';
/**
* Trigger before legend items.
*
* @private
*/
var legendRendering = 'legendRendering';
/**
* Trigger after resize the treemap.
*
* @private
*/
var resize = 'resize';
/**
* Define the font family in treemap.
*
* @private
*/
var defaultFont = 'Roboto, Segoe UI, Noto, Sans-serif';
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 for customizing the color and width of the border in treemap.
*/
var Border = /** @__PURE__ @class */ (function (_super) {
__extends(Border, _super);
function Border() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('#808080')
], Border.prototype, "color", void 0);
__decorate([
Property(0)
], Border.prototype, "width", void 0);
return Border;
}(ChildProperty));
/**
* Sets and gets the margin for the treemap.
*/
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 style of the text contents in the treemap.
*/
var Font = /** @__PURE__ @class */ (function (_super) {
__extends(Font, _super);
function Font() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], Font.prototype, "size", void 0);
__decorate([
Property(null)
], Font.prototype, "color", void 0);
__decorate([
Property(defaultFont)
], Font.prototype, "fontFamily", void 0);
__decorate([
Property('')
], Font.prototype, "fontWeight", void 0);
__decorate([
Property('Normal')
], Font.prototype, "fontStyle", void 0);
__decorate([
Property(1)
], Font.prototype, "opacity", void 0);
return Font;
}(ChildProperty));
/**
* Sets and gets the options for customizing the title of the treemap.
*/
var CommonTitleSettings = /** @__PURE__ @class */ (function (_super) {
__extends(CommonTitleSettings, _super);
function CommonTitleSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], CommonTitleSettings.prototype, "text", void 0);
__decorate([
Property('')
], CommonTitleSettings.prototype, "description", void 0);
return CommonTitleSettings;
}(ChildProperty));
/**
* Sets and gets the options for customizing the subtitle of the treemap.
*/
var SubTitleSettings = /** @__PURE__ @class */ (function (_super) {
__extends(SubTitleSettings, _super);
function SubTitleSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Complex({ fontFamily: null, fontWeight: null }, Font)
], SubTitleSettings.prototype, "textStyle", void 0);
__decorate([
Property('Center')
], SubTitleSettings.prototype, "alignment", void 0);
return SubTitleSettings;
}(CommonTitleSettings));
/**
* Sets and gets the options for customizing the title of the treemap.
*/
var TitleSettings = /** @__PURE__ @class */ (function (_super) {
__extends(TitleSettings, _super);
function TitleSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Complex({ fontFamily: null, fontWeight: null }, Font)
], TitleSettings.prototype, "textStyle", void 0);
__decorate([
Property('Center')
], TitleSettings.prototype, "alignment", void 0);
__decorate([
Complex({}, SubTitleSettings)
], TitleSettings.prototype, "subtitleSettings", void 0);
return TitleSettings;
}(CommonTitleSettings));
/**
* Sets and gets the options to customize the color-mapping in treemap.
*/
var ColorMapping = /** @__PURE__ @class */ (function (_super) {
__extends(ColorMapping, _super);
function ColorMapping() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], ColorMapping.prototype, "from", void 0);
__decorate([
Property(null)
], ColorMapping.prototype, "to", void 0);
__decorate([
Property(null)
], ColorMapping.prototype, "color", void 0);
__decorate([
Property(null)
], ColorMapping.prototype, "label", void 0);
__decorate([
Property(null)
], ColorMapping.prototype, "value", void 0);
__decorate([
Property(null)
], ColorMapping.prototype, "minOpacity", void 0);
__decorate([
Property(null)
], ColorMapping.prototype, "maxOpacity", void 0);
__decorate([
Property(true)
], ColorMapping.prototype, "showLegend", void 0);
return ColorMapping;
}(ChildProperty));
/**
* Sets and gets the options for customizing the legend of the treemap.
*/
var LegendSettings = /** @__PURE__ @class */ (function (_super) {
__extends(LegendSettings, _super);
function LegendSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], LegendSettings.prototype, "visible", void 0);
__decorate([
Property('Default')
], LegendSettings.prototype, "mode", void 0);
__decorate([
Property('transparent')
], LegendSettings.prototype, "background", void 0);
__decorate([
Property('Circle')
], LegendSettings.prototype, "shape", void 0);
__decorate([
Property('')
], LegendSettings.prototype, "width", void 0);
__decorate([
Property('')
], LegendSettings.prototype, "height", void 0);
__decorate([
Complex({ size: null, fontFamily: null, fontWeight: null }, Font)
], LegendSettings.prototype, "textStyle", void 0);
__decorate([
Property(null)
], LegendSettings.prototype, "fill", void 0);
__decorate([
Property(1)
], LegendSettings.prototype, "opacity", void 0);
__decorate([
Property(15)
], LegendSettings.prototype, "shapeWidth", void 0);
__decorate([
Property(15)
], LegendSettings.prototype, "shapeHeight", void 0);
__decorate([
Property(10)
], LegendSettings.prototype, "shapePadding", void 0);
__decorate([
Property(null)
], LegendSettings.prototype, "imageUrl", void 0);
__decorate([
Complex({ color: null, width: null }, Border)
], LegendSettings.prototype, "border", void 0);
__decorate([
Complex({ color: '#000000', width: 0 }, Border)
], LegendSettings.prototype, "shapeBorder", void 0);
__decorate([
Complex({}, CommonTitleSettings)
], LegendSettings.prototype, "title", void 0);
__decorate([
Complex({ size: null, fontFamily: null, fontWeight: null }, Font)
], LegendSettings.prototype, "titleStyle", void 0);
__decorate([
Property('Bottom')
], LegendSettings.prototype, "position", void 0);
__decorate([
Property('None')
], LegendSettings.prototype, "orientation", void 0);
__decorate([
Property(false)
], LegendSettings.prototype, "invertedPointer", void 0);
__decorate([
Property('After')
], LegendSettings.prototype, "labelPosition", void 0);
__decorate([
Property('None')
], LegendSettings.prototype, "labelDisplayMode", void 0);
__decorate([
Property('Center')
], LegendSettings.prototype, "alignment", void 0);
__decorate([
Property({ x: 0, y: 0 })
], LegendSettings.prototype, "location", void 0);
__decorate([
Property(null)
], LegendSettings.prototype, "showLegendPath", void 0);
__decorate([
Property(null)
], LegendSettings.prototype, "valuePath", void 0);
__decorate([
Property(false)
], LegendSettings.prototype, "removeDuplicateLegend", void 0);
return LegendSettings;
}(ChildProperty));
/**
* Sets and gets the settings for drill down to visualize the treemap rendered in the initial state.
*/
var InitialDrillSettings = /** @__PURE__ @class */ (function (_super) {
__extends(InitialDrillSettings, _super);
function InitialDrillSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], InitialDrillSettings.prototype, "groupIndex", void 0);
__decorate([
Property(null)
], InitialDrillSettings.prototype, "groupName", void 0);
return InitialDrillSettings;
}(ChildProperty));
/**
* Sets and gets the options for customizing the leaf item of the treemap.
*/
var LeafItemSettings = /** @__PURE__ @class */ (function (_super) {
__extends(LeafItemSettings, _super);
function LeafItemSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], LeafItemSettings.prototype, "fill", void 0);
__decorate([
Property(false)
], LeafItemSettings.prototype, "autoFill", void 0);
__decorate([
Complex({}, Border)
], LeafItemSettings.prototype, "border", void 0);
__decorate([
Property(0)
], LeafItemSettings.prototype, "gap", void 0);
__decorate([
Property(10)
], LeafItemSettings.prototype, "padding", void 0);
__decorate([
Property(1)
], LeafItemSettings.prototype, "opacity", void 0);
__decorate([
Property(true)
], LeafItemSettings.prototype, "showLabels", void 0);
__decorate([
Property(null)
], LeafItemSettings.prototype, "labelPath", void 0);
__decorate([
Property(null)
], LeafItemSettings.prototype, "labelFormat", void 0);
__decorate([
Property('TopLeft')
], LeafItemSettings.prototype, "labelPosition", void 0);
__decorate([
Complex({ color: null, size: null, fontFamily: null }, Font)
], LeafItemSettings.prototype, "labelStyle", void 0);
__decorate([
Property(null)
], LeafItemSettings.prototype, "labelTemplate", void 0);
__decorate([
Property('Center')
], LeafItemSettings.prototype, "templatePosition", void 0);
__decorate([
Property('Trim')
], LeafItemSettings.prototype, "interSectAction", void 0);
__decorate([
Collection([], ColorMapping)
], LeafItemSettings.prototype, "colorMapping", void 0);
return LeafItemSettings;
}(ChildProperty));
/**
* Sets and gets the options for customizing the tooltip of the treemap.
*/
var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
__extends(TooltipSettings, _super);
function TooltipSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], TooltipSettings.prototype, "visible", void 0);
__decorate([
Property('')
], TooltipSettings.prototype, "template", void 0);
__decorate([
Property(null)
], TooltipSettings.prototype, "format", void 0);
__decorate([
Property(null)
], TooltipSettings.prototype, "fill", void 0);
__decorate([
Property(0.75)
], TooltipSettings.prototype, "opacity", void 0);
__decorate([
Property(['Circle'])
], TooltipSettings.prototype, "markerShapes", void 0);
__decorate([
Complex({ width: null, color: null }, Border)
], TooltipSettings.prototype, "border", void 0);
__decorate([
Complex({ fontFamily: null, size: null, fontWeight: null, opacity: null }, Font)
], TooltipSettings.prototype, "textStyle", void 0);
return TooltipSettings;
}(ChildProperty));
/**
* Sets and gets the options for customizing the selection of the leaf items in treemap.
*/
var SelectionSettings = /** @__PURE__ @class */ (function (_super) {
__extends(SelectionSettings, _super);
function SelectionSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], SelectionSettings.prototype, "enable", void 0);
__decorate([
Property(null)
], SelectionSettings.prototype, "fill", void 0);
__decorate([
Property('0.5')
], SelectionSettings.prototype, "opacity", void 0);
__decorate([
Complex({}, Border)
], SelectionSettings.prototype, "border", void 0);
__decorate([
Property('Item')
], SelectionSettings.prototype, "mode", void 0);
return SelectionSettings;
}(ChildProperty));
/**
* Sets and gets the options for customizing the highlighting of the treemap item,
* when the mouse hover is performed in it.
*/
var HighlightSettings = /** @__PURE__ @class */ (function (_super) {
__extends(HighlightSettings, _super);
function HighlightSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], HighlightSettings.prototype, "enable", void 0);
__decorate([
Property('#808080')
], HighlightSettings.prototype, "fill", void 0);
__decorate([
Property('0.5')
], HighlightSettings.prototype, "opacity", void 0);
__decorate([
Complex({}, Border)
], HighlightSettings.prototype, "border", void 0);
__decorate([
Property('Item')
], HighlightSettings.prototype, "mode", void 0);
return HighlightSettings;
}(ChildProperty));
/**
* Sets and gets the options for customizing the level leaf items of the treemap.
*/
var LevelSettings = /** @__PURE__ @class */ (function (_super) {
__extends(LevelSettings, _super);
function LevelSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], LevelSettings.prototype, "groupPath", void 0);
__decorate([
Property(0)
], LevelSettings.prototype, "groupGap", void 0);
__decorate([
Property(10)
], LevelSettings.prototype, "groupPadding", void 0);
__decorate([
Complex({}, Border)
], LevelSettings.prototype, "border", void 0);
__decorate([
Property(null)
], LevelSettings.prototype, "fill", void 0);
__decorate([
Property(false)
], LevelSettings.prototype, "autoFill", void 0);
__decorate([
Property(1)
], LevelSettings.prototype, "opacity", void 0);
__decorate([
Property(true)
], LevelSettings.prototype, "showHeader", void 0);
__decorate([
Property(20)
], LevelSettings.prototype, "headerHeight", void 0);
__decorate([
Property(null)
], LevelSettings.prototype, "headerTemplate", void 0);
__decorate([
Property(null)
], LevelSettings.prototype, "headerFormat", void 0);
__decorate([
Property('Near')
], LevelSettings.prototype, "headerAlignment", void 0);
__decorate([
Complex({ color: null, size: '13px', fontFamily: null }, Font)
], LevelSettings.prototype, "headerStyle", void 0);
__decorate([
Property('TopLeft')
], LevelSettings.prototype, "templatePosition", void 0);
__decorate([
Collection([], ColorMapping)
], LevelSettings.prototype, "colorMapping", void 0);
return LevelSettings;
}(ChildProperty));
/**
* Specifies the size parameters.
*/
var Size = /** @__PURE__ @class */ (function () {
function Size(width, height) {
this.width = width;
this.height = height;
}
return Size;
}());
/**
*
* @param {string} value - specifies the text.
* @param {number} containerSize - specifies the container size value.
* @returns {number} - Returns the number value which is converted from string.
*/
function stringToNumber(value, containerSize) {
if (value !== null && value !== undefined) {
return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);
}
return null;
}
/**
* Internal use of type rect
*
* @private
*/
var Rect = /** @__PURE__ @class */ (function () {
function Rect(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
return Rect;
}());
/**
* Internal use of rectangle options
*
* @private
*/
var RectOption = /** @__PURE__ @class */ (function () {
function RectOption(id, fill, border, opacity, rect, dashArray) {
this.y = rect.y;
this.x = rect.x;
this.height = rect.height;
this.width = rect.width;
this.id = id;
this.fill = fill;
this.opacity = opacity;
this.stroke = border.color;
this['stroke-width'] = border.width;
this['stroke-dasharray'] = dashArray;
}
return RectOption;
}());
var PathOption = /** @__PURE__ @class */ (function () {
function PathOption(id, fill, width, color, opacity, dashArray, d) {
this.id = id;
this.opacity = opacity;
this.fill = fill;
this.stroke = color;
this['stroke-width'] = width;
this['stroke-dasharray'] = dashArray;
this.d = d;
}
return PathOption;
}());
/**
* Function to measure the height and width of the text.
*
* @param {string} text - Specifies the text.
* @param {FontModel} font - Specifies the font.
* @returns {Size} - Returns the size.
* @private
*/
function measureText(text, font) {
var measureObject = document.getElementById('treeMapMeasureText');
if (measureObject === null) {
measureObject = createElement('text', { id: 'treeMapMeasureText' });
document.body.appendChild(measureObject);
}
measureObject.innerHTML = SanitizeHtmlHelper.sanitize(text);
measureObject.style.position = 'absolute';
measureObject.style.fontSize = font.size;
measureObject.style.fontWeight = font.fontWeight;
measureObject.style.fontStyle = font.fontStyle;
measureObject.style.fontFamily = font.fontFamily;
measureObject.style.visibility = 'hidden';
measureObject.style.top = '-100';
measureObject.style.left = '0';
measureObject.style.whiteSpace = 'nowrap';
// For bootstrap line height issue
measureObject.style.lineHeight = 'normal';
return new Size(measureObject.clientWidth, measureObject.clientHeight);
}
/**
* Internal use of text options
*
* @private
*/
var TextOption = /** @__PURE__ @class */ (function () {
function TextOption(id, x, y, anchor, text, transform, baseLine, connectorText) {
if (transform === void 0) { transform = ''; }
this.transform = '';
this.baseLine = 'auto';
this.id = id;
this.text = text;
this.transform = transform;
this.anchor = anchor;
this.x = x;
this.y = y;
this.baseLine = baseLine;
this.connectorText = connectorText;
}
return TextOption;
}());
/**
* Trim the title text
*
* @param {number} maxWidth - Specifies the maximum width
* @param {string} text - Specifies the text
* @param {FontModel} font - Specifies the font
* @returns {string} - Returns the string
* @private
*/
function textTrim(maxWidth, text, font) {
var label = text;
var size = measureText(text, font).width;
if (size > maxWidth) {
var textLength = text.length;
for (var i = textLength - 1; i >= 0; --i) {
label = text.substring(0, i) + '...';
size = measureText(label, font).width;
if (size <= maxWidth || label.length < 4) {
if (label.length < 4) {
label = ' ';
}
return label;
}
}
}
return label;
}
/**
* Specifies the location parameters.
*/
var Location = /** @__PURE__ @class */ (function () {
function Location(x, y) {
this.x = x;
this.y = y;
}
return Location;
}());
/**
* Method to calculate x position of title
*
* @param {Rect} location - Specifies the location of text.
* @param {Alignment} alignment - Specifies the alignment of the text.
* @param {Size} textSize - Specifies the size of the text.
* @param {type} type - Specifies whether the provided text is title or subtitle.
* @returns {Location} - Returns the location of text.
* @private
*/
function findPosition(location, alignment, textSize, type) {
var x;
switch (alignment) {
case 'Near':
x = location.x;
break;
case 'Center':
x = (type === 'title') ? (location.width / 2 - textSize.width / 2) :
((location.x + (location.width / 2)) - textSize.width / 2);
break;
case 'Far':
x = (type === 'title') ? (location.width - location.y - textSize.width) :
((location.x + location.width) - textSize.width);
break;
}
var y = (type === 'title') ? location.y + (textSize.height / 2) : ((location.y + location.height / 2) + textSize.height / 2);
return new Location(x, y);
}
/**
*
* @param {SvgRenderer} renderer - Specifies the rendering element of the SVG.
* @param {any} renderOptions - Specifies the settings of the text.
* @param {string} text - Specifies the text.
* @returns {HTMLElement} - Returns the HTML element for the text.
*/
function createTextStyle(renderer, renderOptions, text) {
var htmlObject = renderer.createText(renderOptions, text);
htmlObject.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
htmlObject.style['user-select'] = 'none';
htmlObject.style['-moz-user-select'] = 'none';
htmlObject.style['-webkit-touch-callout'] = 'none';
htmlObject.style['-webkit-user-select'] = 'none';
htmlObject.style['-khtml-user-select'] = 'none';
htmlObject.style['-ms-user-select'] = 'none';
htmlObject.style['-o-user-select'] = 'none';
return htmlObject;
}
/**
* Internal rendering of text
*
* @param {TextOption} options - Specifies the text option
* @param {FontModel} font - Specifies the font model
* @param {string} color - Specifies the color
* @param {HTMLElement | Element} parent - Specifies the parent element of the text
* @param {boolean} isMinus - Specifies the boolean value
* @returns {Element} - Returns the element
* @private
*/
function renderTextElement(options, font, color, parent, isMinus) {
if (isMinus === void 0) { isMinus = false; }
var renderOptions = {
'font-size': font.size,
'font-style': font.fontStyle,
'font-family': font.fontFamily,
'font-weight': font.fontWeight,
'text-anchor': options.anchor,
'transform': options.transform,
'opacity': font.opacity,
'dominant-baseline': options.baseLine,
'id': options.id,
'x': options.x,
'y': options.y,
'fill': color
};
var text = typeof options.text === 'string' ? options.text : isMinus ? options.text[options.text.length - 1] : options.text[0];
var tspanElement;
var renderer = new SvgRenderer('');
var height;
var htmlObject;
var breadCrumbText = !isNullOrUndefined(text) && !isNullOrUndefined(options.connectorText) ?
(text.includes(options.connectorText[1])) : false;
if (breadCrumbText) {
var drilledLabel = text;
var spacing = 5;
var drillLevelText = drilledLabel.split('#');
for (var z = 0; z < drillLevelText.length; z++) {
var drillText = (drillLevelText[z].search(options.connectorText) !== -1 &&
!isNullOrUndefined(options.connectorText)) ?
options.connectorText : drillLevelText[z];
renderOptions['id'] = options.id + '_' + z;
htmlObject = createTextStyle(renderer, renderOptions, drillText);
if (z % 2 === 0 && z !== 0) {
var re = /\s+/g;
drillText = drillText.replace(re, ' ');
}
var size = measureText(drillText, font);
renderOptions['x'] = z !== 0 ? renderOptions['x'] + size.width : renderOptions['x'] + size.width + spacing;
parent.appendChild(htmlObject);
}
}
else {
htmlObject = createTextStyle(renderer, renderOptions, text);
parent.appendChild(htmlObject);
}
if (typeof options.text !== 'string' && options.text.length > 1) {
for (var i = 1, len = options.text.length; i < len; i++) {
height = (measureText(options.text[i], font).height);
tspanElement = renderer.createTSpan({
'x': options.x, 'id': options.id,
'y': (options.y) + (i * height)
}, options.text[i]);
htmlObject.appendChild(tspanElement);
}
parent.appendChild(htmlObject);
}
return htmlObject;
}
/**
*
* @param {string} targetId - Specifies the id of the element to which template is to be appended.
* @param {Element} targetElement - Specifies the element to which template is to be appended.
* @param {string} contentItemTemplate - Specifies the content to be appended as template.
* @returns {void}
*/
function setItemTemplateContent(targetId, targetElement, contentItemTemplate) {
var itemSelect = targetId.split('_RectPath')[0];
var itemTemplate;
if (targetId.indexOf('_LabelTemplate') > -1) {
itemTemplate = targetElement;
}
else {
itemTemplate = document.querySelector('#' + itemSelect + '_LabelTemplate');
}
if (!isNullOrUndefined(itemTemplate)) {
itemTemplate.innerHTML = contentItemTemplate;
}
}
/**
*
* @param {string} id - Specifies the id of the element.
* @returns {Element} - Returns the element.
*/
function getElement(id) {
return document.getElementById(id);
}
/**
*
* @param {any} a - Specifies the first order of TreeMap leaf elements.
* @param {any} b - Specifies the second order of TreeMap leaf elements.
* @returns {number} - Returns the order of the TreeMap leaf element.
*/
function itemsToOrder(a, b) {
return a['weight'] === b['weight'] ? 0 : a['weight'] < b['weight'] ? 1 : -1;
}
/**
*
* @param {string[]} source - Specifies the data from the data source.
* @param {string} pathName - Specifies the path name in the data source.
* @param {any} processData - Specifies the data source object.
* @param {TreeMap} treemap - Specifies the treemap instance.
* @returns {boolean} - Specifies whether data is available in the data source or not.
*/
function isContainsData(source, pathName, processData, treemap) {
var isExist = false;
var name = '';
var path;
var leaf = treemap.leafItemSettings;
for (var i = 0; i < source.length; i++) {
path = treemap.levels[i] ? treemap.levels[i].groupPath : leaf.labelPath ? leaf.labelPath :
treemap.weightValuePath;
var data = processData[path] || 'undefined';
if (source[i] === data) {
name += data + (i === source.length - 1 ? '' : '#');
if (name === pathName) {
isExist = true;
break;
}
}
}
return isExist;
}
/**
*
* @param {any} data - Specifies the data to which the children elements to be found.
* @returns {any} - Returns the children elements of the TreeMap leaf element.
*/
function findChildren(data) {
var children;
if (data) {
var keys = Object.keys(data);
children = {};
for (var i = 0; i < keys.length; i++) {
if (data[keys[i]] instanceof Array) {
children['values'] = data[keys[i]];
children['key'] = keys[i];
break;
}
}
}
return children;
}
/**
*
* @param {any} data - Specifies the data to which highlight must be done.
* @param {items} items - Specifies the data source items.
* @param {string} mode - Specifies the mode of highlight.
* @param {TreeMap} treeMap - Specifies the treemap instance.
* @returns {string[]} - Returns the highlighted items.
*/
function findHightLightItems(data, items, mode, treeMap) {
if (mode === 'Child') {
items.push(data['levelOrderName']);
var children = findChildren(data)['values'];
if (children && children.length > 0) {
for (var i = 0; i < children.length; i++) {
if (items.indexOf(children[i]['levelOrderName']) === -1) {
items.push(children[i]['levelOrderName']);
}
}
for (var j = 0; j < children.length; j++) {
findHightLightItems(children[j], items, mode, treeMap);
}
}
}
else if (mode === 'Parent') {
if (typeof data['levelOrderName'] === 'string' && items.indexOf(data['levelOrderName']) === -1) {
items.push(data['levelOrderName']);
findHightLightItems(data['parent'], items, mode, treeMap);
}
}
else if (mode === 'All') {
var parentName = data['levelOrderName'].split('#')[0];
var currentItem = void 0;
for (var i = 0; i < treeMap.layout.renderItems.length; i++) {
currentItem = treeMap.layout.renderItems[i];
if ((currentItem['levelOrderName']).indexOf(parentName) > -1 && items.indexOf(currentItem['levelOrderName']) === -1) {
items.push(currentItem['levelOrderName']);
}
}
}
else {
items.push(data['levelOrderName']);
}
return items;
}
/**
* Function to compile the template function for maps.
*
* @param {string} template - Specifies the template
* @returns {Function} - Returns the template function
* @private
*/
function getTemplateFunction(template) {
var templateFn = null;
try {
if (typeof template !== 'function' && document.querySelectorAll(template).length) {
templateFn = compile(document.querySelector(template).innerHTML.trim());
}
else {
templateFn = compile(template);
}
}
catch (e) {
templateFn = compile(template);
}
return templateFn;
}
/**
* @private
* @param {HTMLCollection} element - Specifies the element
* @param {string} labelId - Specifies the label id
* @param {Object} data - Specifies the data
* @returns {HTMLElement} - Returns the element
*/
function convertElement(element, labelId, data) {
var childElement = createElement('div', {
id: labelId
});
childElement.style.cssText = 'position: absolute;pointer-events: auto;';
var elementLength = element.length;
while (elementLength > 0) {
childElement.appendChild(element[0]);
elementLength--;
}
var templateHtml = childElement.innerHTML;
var keys = Object.keys(data);
for (var i = 0; i < keys.length; i++) {
var regExp = RegExp;
templateHtml = templateHtml.replace(new regExp('{{:' + keys[i] + '}}', 'g'), data[keys[i].toString()]);
}
childElement.innerHTML = templateHtml;
return childElement;
}
/**
*
* @param {Rect} rect - Specifies the area.
* @param {LabelPosition} position - Specifies the position
* @param {Size} labelSize - Specifies the label size.
* @param {string} type - Specifies the type.
* @param {TreeMap} treemap - Specifies the treemap instance.
* @returns {Location} - Returns the text location.
*/
function findLabelLocation(rect, position, labelSize, type, treemap) {
var location = new Location(0, 0);
var padding = 5;
var paddings = 2;
var x = (type === 'Template') ? treemap.areaRect.x : 0;
var y = (type === 'Template') ? treemap.areaRect.y : 0;
location.x = (Math.abs(x - ((position.indexOf('Left') > -1) ? rect.x + padding : !(position.indexOf('Right') > -1) ?
rect.x + ((rect.width / 2) - (labelSize.width / 2)) : (rect.x + rect.width) - labelSize.width))) - paddings;
if (treemap.enableDrillDown && (treemap.renderDirection === 'BottomLeftTopRight'
|| treemap.renderDirection === 'BottomRightTopLeft')) {
location.y = Math.abs((rect.y + rect.height) - labelSize.height + padding);
}
else {
location.y = Math.abs(y - ((position.indexOf('Top') > -1) ? (type === 'Template' ? rect.y : rect.y + labelSize.height) :
!(position.indexOf('Bottom') > -1) ? type === 'Template' ? (rect.y + ((rect.height / 2) - (labelSize.height / 2))) :
(rect.y + (rect.height / 2) + labelSize.height / 4) : (rect.y + rect.height) - labelSize.height));
}
return location;
}
/**
*
* @param {HTMLElement} element - Specifies the element to be measured.
* @param {HTMLElement} parentElement - Specifies the parent element of the element to be measured.
* @returns {Size} - Returns the element size.
*/
function measureElement(element, parentElement) {
var size = new Size(0, 0);
parentElement.appendChild(element);
size.height = element.offsetHeight;
size.width = element.offsetWidth;
var measureElementId = document.getElementById(element.id);
measureElementId.parentNode.removeChild(measureElementId);
return size;
}
/**
*
* @param {Rect} rect - Specifies the area.
* @returns {number} - Returns the area width.
*/
function getArea(rect) {
return (rect.width - rect.x) * (rect.height - rect.y);
}
/**
*
* @param {Rect} input - Specifies input for the calculation.
* @returns {number} - Returns the shortest edge.
*/
function getShortestEdge(input) {
var container = convertToContainer(input);
var width = container.width;
var height = container.height;
var result = Math.min(width, height);
return result;
}
/**
*
* @param {Rect} rect - Specifies the rectangle bounds of the container.
* @returns {Rect} - Returns the rectangle bounds.
*/
function convertToContainer(rect) {
var x = rect.x;
var y = rect.y;
var width = rect.width;
var height = rect.height;
return {
x: x,
y: y,
width: width - x,
height: height - y
};
}
/**
*
* @param {Rect} container - Specifies the rectangle bounds of the container.
* @returns {Rect} - Returns the rectangle bounds.
*/
function convertToRect(container) {
var xOffset = container.x;
var yOffset = container.y;
var width = container.width;
var height = container.height;
return {
x: xOffset,
y: yOffset,
width: xOffset + width,
height: yOffset + height
};
}
/**
*
* @param {number} pageX - Specifies the horizontal position of the mouse location.
* @param {number} pageY - Specifies the vertical position of the mouse location.
* @param {Element} element - Specifies the element to which the click is done.
* @returns {Location} - Returns the clicked location.
*/
function getMousePosition(pageX, pageY, element) {
var elementRect = element.getBoundingClientRect();
var pageXOffset = element.ownerDocument.defaultView.pageXOffset;
var pageYOffset = element.ownerDocument.defaultView.pageYOffset;
var clientTop = element.ownerDocument.documentElement.clientTop;
var clientLeft = element.ownerDocument.documentElement.clientLeft;
var positionX = elementRect.left + pageXOffset - clientLeft;
var positionY = elementRect.top + pageYOffset - clientTop;
return new Location((pageX - positionX), (pageY - positionY));
}
/**
*
* @param {ColorMappingModel[]} colorMapping - Specifies the color mapping instance.
* @param {string} equalValue - Specifies the equal value.
* @param {number | string} value - Specifies the range value.
* @returns {any} - Returns the color mapping object.
* @private
*/
function colorMap(colorMapping, equalValue, value) {
var fill;
var paths = [];
var opacity;
if (isNullOrUndefined(equalValue) && (isNullOrUndefined(value) && isNaN(value))) {
return null;
}
for (var i = 0; i < colorMapping.length; i++) {
var isEqualColor = false;
var dataValue = value;
if (!isNullOrUndefined(colorMapping[i].from) && !isNullOrUndefined(colorMapping[i].to)
&& !isNullOrUndefined(colorMapping[i].value)) {
if ((value >= colorMapping[i].from && colorMapping[i].to >= value) &&
(colorMapping[i].value === equalValue)) {
isEqualColor = true;
if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
fill = !isEqualColor ? colorCollections(colorMapping[i], dataValue) : colorMapping[i].color[0];
}
else {
fill = colorMapping[i].color;
}
}
}
else if ((!isNullOrUndefined(colorMapping[i].from) && !isNullOrUndefined(colorMapping[i].to))
|| !isNullOrUndefined((colorMapping[i].value))) {
if ((value >= colorMapping[i].from && colorMapping[i].to >= value)
|| (colorMapping[i].value === equalValue)) {
if (colorMapping[i].value === equalValue) {
isEqualColor = true;
}
if (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') {
fill = !isEqualColor ? colorCollections(colorMapping[i], dataValue) : colorMapping[i].color[0];
}
else {
fill = colorMapping[i].color;
}
}
}
if (((value >= colorMapping[i].from && value <= colorMapping[i].to)
|| (colorMapping[i].value === equalValue))
&& !isNullOrUndefined(colorMapping[i].minOpacity) && !isNullOrUndefined(colorMapping[i].maxOpacity)
&& fill) {
opacity = deSaturationColor(colorMapping[i], value);
}
if ((fill === '' || isNullOrUndefined(fill))
&& isNullOrUndefined(colorMapping[i].from) && isNullOrUndefined(colorMapping[i].to)
&& isNullOrUndefined(colorMapping[i].minOpacity) && isNullOrUndefined(colorMapping[i].maxOpacity)
&& isNullOrUndefined(colorMapping[i].value)) {
fill = (Object.prototype.toString.call(colorMapping[i].color) === '[object Array]') ?
colorMapping[i].color[0] : colorMapping[i].color;
}
opacity = !isNullOrUndefined(opacity) ? opacity : '1';
paths.push(fill);
}
for (var j = paths.length - 1; j >= 0; j--) {
fill = paths[j];
j = (fill) ? -1 : j;
}
return { fill: fill, opacity: opacity };
}
/**
*
* @param {ColorMappingModel} colorMapping - Specifies the color mapping object.
* @param {number} rangeValue - Specifies the range value.
* @returns {string} - Returns the opacity for the color mapping.
* @private
*/
function deSaturationColor(colorMapping, rangeValue) {
var opacity = 1;
if ((rangeValue >= colorMapping.from && rangeValue <= colorMapping.to)) {
var ratio = (rangeValue - colorMapping.from) / (colorMapping.to - colorMapping.from);
opacity = (ratio * (colorMapping.maxOpacity - colorMapping.minOpacity)) + colorMapping.minOpacity;
}
return opacity.toString();
}
/**
*
* @param {ColorMappingModel} colorMap - Specifies the color mapping object.
* @param {number} value - Specifies the range value.
* @returns {string} - Returns the fill color.
*/
function colorCollections(colorMap, value) {
var gradientFill = getColorByValue(colorMap, value);
return gradientFill;
}
/**
*
* @param {number} r - Specifies the red color value.
* @param {number} g - Specifies the green color value.
* @param {number} b - Specifies the blue color value.
* @returns {string} - Returns the fill color.
*/
function rgbToHex(r, g, b) {
return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
/**
*
* @param {ColorMappingModel} colorMap - Specifies the color mapping.
* @param {number} value - Specifies the range value.
* @returns {string} - Returns the fill color.
*/
function getColorByValue(colorMap, value) {
var color = '';
var rbg;
if (Number(value) === colorMap.from) {
color = colorMap.color[0];
}
else if (Number(value) === colorMap.to) {
color = colorMap.color[colorMap.color.length - 1];
}
else {
rbg = getGradientColor(Number(value), colorMap);
color = rgbToHex(rbg.r, rbg.g, rbg.b);
}
return color;
}
/**
*
* @param {number} value - Specifies the range value.
* @param {ColorMappingModel} colorMap - Specifies the color mapping.
* @returns {ColorValue} - Returns the color value object.
*/
function getGradientColor(value, colorMap) {
var previousOffset = colorMap.from;
var nextOffset = colorMap.to;
var percent = 0;
var full = nextOffset - previousOffset;
var midColor;
percent = (value - previousOffset) / full;
var previousColor;
var nextColor;
if (colorMap.color.length <= 2) {
previousColor = colorMap.color[0].charAt(0) === '#' ? colorMap.color[0] : colorNameToHex(colorMap.color[0]);
nextColor = colorMap.color[colorMap.color.length - 1].charAt(0) === '#' ?
colorMap.color[colorMap.color.length - 1] : colorNameToHex(colorMap.color[colorMap.color.length - 1]);
}
else {
previousColor = colorMap.color[0].charAt(0) === '#' ? colorMap.color[0] : colorNameToHex(colorMap.color[0]);
nextColor = colorMap.color[colorMap.color.length - 1].charAt(0) === '#' ?
colorMap.color[colorMap.color.length - 1] : colorNameToHex(colorMap.color[colorMap.color.length - 1]);
var a = full / (colorMap.color.length - 1);
var b = void 0;
var c = void 0;
var length_1 = colorMap.color.length - 1;
var splitColorValueOffset = [];
var splitColor = {};
for (var j = 1; j < length_1; j++) {
c = j * a;
b = previousOffset + c;
splitColor = { b: b, color: colorMap.color[j] };
splitColorValueOffset.push(splitColor);
}
for (var i = 0; i < splitColorValueOffset.length; i++) {
if (previousOffset <= value && value <= splitColorValueOffset[i]['b'] && i === 0) {
midColor = splitColorValueOffset[i]['color'].charAt(0) === '#' ?
splitColorValueOffset[i]['color'] : colorNameToHex(splitColorValueOffset[i]['color']);
nextColor = midColor;
percent = value < splitColorValueOffset[i]['b'] ? 1 - Math.abs((value - splitColorValueOffset[i]['b']) / a)
: (value - splitColorValueOffset[i]['b']) / a;
}
else if (splitColorValueOffset[i]['b'] <= value && value <= nextOffset && i === (splitColorValueOffset.length - 1)) {
midColor = splitColorValueOffset[i]['color'].charAt(0) === '#' ?
splitColorValueOffset[i]['color'] : colorNameToHex(splitColorValueOffset[i]['color']);
previousColor = midColor;
percent = value < splitColorValueOffset[i]['b'] ?
1 - Math.abs((value - splitColorValueOffset[i]['b']) / a) : (value - splitColorValueOffset[i]['b']) / a;
}
if (i !== splitColorValueOffset.length - 1 && i < splitColorValueOffset.length) {
if (splitColorValueOffset[i]['b'] <= value && value <= splitColorValueOffset[i + 1]['b']) {
midColor = splitColorValueOffset[i]['color'].charAt(0) === '#' ?
splitColorValueOffset[i]['color'] : colorNameToHex(splitColorValueOffset[i]['color']);
previousColor = midColor;
nextColor = splitColorValueOffset[i + 1]['color'].charAt(0) === '#' ?
splitColorValueOffset[i + 1]['color'] : colorNameToHex(splitColorValueOffset[i + 1]['color']);
percent = Math.abs((value - splitColorValueOffset[i + 1]['b'])) / a;
}
}
}
}
return getPercentageColor(percent, previousColor, nextColor);
}
/**
*
* @param {number} percent - Specifies the percentage of the color.
* @param {number} previous - Specifies the previous color.
* @param {number} next - Specifies the next color.
* @returns {ColorValue} - Returns the color value object.
*/
function getPercentageColor(percent, previous, next) {
var nextColor = next.split('#')[1];
var prevColor = previous.split('#')[1];
var r = getPercentage(percent, parseInt(prevColor.substr(0, 2), 16), parseInt(nextColor.substr(0, 2), 16));
var g = getPercentage(percent, parseInt(prevColor.substr(2, 2), 16), parseInt(nextColor.substr(2, 2), 16));
var b = getPercentage(percent, parseInt(prevColor.substr(4, 2), 16), parseInt(nextColor.substr(4, 2), 16));
return new ColorValue(r, g, b);
}
/**
*
* @param {number} percent - Specifies the percentage of the color.
* @param {number} previous - Specifies the previous color.
* @param {number} next - Specifies the next color.
* @returns {number} - Returns the color value.
*/
function getPercentage(percent, previous, next) {
var full = next - previous;
return Math.round((previous + (full * percent)));
}
/**
*
* @param {number} maximumWidth - Specifies the length of the text.
* @param {string} dataLabel - Specifies the label.
* @param {FontModel} font - Specifies the font of the label.
* @returns {string[]} - Returns the labels.
*/
function wordWrap(maximumWidth, dataLabel, font) {
var textCollection = dataLabel.split(' ');
var label = '';
var labelCollection = [];
var text;
for (var i = 0, len = textCollection.length; i < len; i++) {
text = textCollection[i];
if (measureText(label.concat(text), font).width < maximumWidth) {
label = label.concat((label === '' ? '' : ' ') + text);
}
else {
if (label !== '') {
labelCollection.push(textTrim(maximumWidth, label, font));
label = text;
}
else {
labelCollection.push(textTrim(maximumWidth, text, font));
text = '';
}
}
if (label && i === len - 1) {
labelCollection.push(textTrim(maximumWidth, label, font));
}
}
return labelCollection;
}
/**
*
* @param {number} maxWidth - Specifies the length of the text.
* @param {string} label - Specifies the label.
* @param {FontModel} font - Specifies the font of the label.
* @returns {string[]} - Returns the labels.
*/
function textWrap(maxWidth, label, font) {
var resultText = [];
var currentLength = 0;
var totalWidth = measureText(label, f