@syncfusion/ej2-treemap 30.2.4 → 31.1.17

package/dist/ts/treemap/utils/helper.ts

@@ -0,0 +1,1453 @@
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { BorderModel, FontModel, ColorMappingModel, LeafItemSettingsModel } from '../model/base-model';
+import { createElement, compile, merge, isNullOrUndefined, remove, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
+import { SvgRenderer } from '@syncfusion/ej2-svg-base';
+import { Alignment, LabelPosition } from '../utils/enum';
+import { TreeMap } from '../treemap';
+import { IShapes } from '../model/interface';
+import { ExportType } from '../utils/enum';
+/**
+ * Specifies the size parameters.
+ */
+export class Size {
+    /**
+     * Defines the height in the size object.
+     */
+    public height: number;
+    /**
+     * Defines the width in the size object.
+     */
+    public width: number;
+    constructor(width: number, height: number) {
+        this.width = width;
+        this.height = height;
+    }
+}
+/**
+ *
+ * @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.
+ */
+export function stringToNumber(value: string, containerSize: number): number {
+    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
+ */
+export class Rect {
+    public x: number;
+    public y: number;
+    public height: number;
+    public width: number;
+    constructor(x: number, y: number, width: number, height: number) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+    }
+}
+
+/**
+ * Internal use of rectangle options
+ *
+ * @private
+ */
+export class RectOption {
+    public id: string;
+    public fill: string;
+    public x: number;
+    public y: number;
+    public height: number;
+    public width: number;
+    public opacity: number;
+    public stroke: string;
+    public ['stroke-width']: number;
+    public ['stroke-dasharray']: string;
+    constructor(
+        id: string, fill: string, border: BorderModel, opacity: number, rect: Rect, dashArray?: string
+    ) {
+        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;
+    }
+}
+
+export class PathOption {
+    public id: string;
+    public opacity: number;
+    public fill: string;
+    public stroke: string;
+    public ['stroke-width']: number;
+    public ['stroke-dasharray']: string;
+    public d: string;
+    constructor(
+        id: string, fill: string, width: number, color: string, opacity?: number,
+        dashArray?: string, d?: string
+    ) {
+        this.id = id;
+        this.opacity = opacity;
+        this.fill = fill;
+        this.stroke = color;
+        this['stroke-width'] = width;
+        this['stroke-dasharray'] = dashArray;
+        this.d = d;
+    }
+}
+
+/**
+ * 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
+ */
+export function measureText(text: string, font: FontModel): Size {
+    let measureObject: HTMLElement = 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
+ */
+export class TextOption {
+    public anchor: string;
+    public id: string;
+    public transform: string = '';
+    public x: number;
+    public y: number;
+    public text: string | string[];
+    public baseLine: string = 'auto';
+    public connectorText: string;
+    constructor(
+        id?: string, x?: number, y?: number, anchor?: string, text?: string | string[], transform: string = '',
+        baseLine?: string, connectorText?: string
+    ) {
+        this.id = id;
+        this.text = text;
+        this.transform = transform;
+        this.anchor = anchor;
+        this.x = x;
+        this.y = y;
+        this.baseLine = baseLine;
+        this.connectorText = connectorText;
+    }
+}
+
+
+/**
+ * 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
+ */
+export function textTrim(maxWidth: number, text: string, font: FontModel): string {
+    let label: string = text;
+    let size: number = measureText(text, font).width;
+    if (size > maxWidth) {
+        const textLength: number = text.length;
+        for (let i: number = 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.
+ */
+
+export class Location {
+    /**
+     * Defines the horizontal position.
+     */
+    public x: number;
+    /**
+     * Defines the vertical position.
+     */
+    public y: number;
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+}
+
+/**
+ * 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
+ */
+export function findPosition(location: Rect, alignment: Alignment, textSize: Size, type: string): Location {
+    let x: number;
+    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;
+    }
+    const y: number = (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.
+ */
+export function createTextStyle(
+    renderer: SvgRenderer, renderOptions: any, text: string
+): HTMLElement {
+    const htmlObject: HTMLElement = <HTMLElement>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
+ */
+export function renderTextElement(
+    options: TextOption, font: FontModel, color: string, parent: HTMLElement | Element, isMinus: boolean = false
+): Element {
+    const renderOptions: any = {
+        '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
+    };
+    const text: string = typeof options.text === 'string' ? options.text : isMinus ? options.text[options.text.length - 1] : options.text[0];
+    let tspanElement: Element;
+    const renderer: SvgRenderer = new SvgRenderer('');
+    let height: number; let htmlObject: HTMLElement;
+    const breadCrumbText: boolean = !isNullOrUndefined(text) && !isNullOrUndefined(options.connectorText) ?
+        (text.includes(options.connectorText[1])) : false;
+    if (breadCrumbText) {
+        const drilledLabel: string = text;
+        const spacing: number = 5;
+        const drillLevelText: string[] = drilledLabel.split('#');
+        for (let z: number = 0; z < drillLevelText.length; z++) {
+            let drillText: string = (drillLevelText[z as number].search(options.connectorText) !== -1 &&
+                                     !isNullOrUndefined(options.connectorText)) ?
+                options.connectorText : drillLevelText[z as number];
+            renderOptions['id'] = options.id + '_' + z;
+            htmlObject = createTextStyle(renderer, renderOptions, drillText);
+            if (z % 2 === 0 && z !== 0) {
+                const re: RegExp = /\s+/g;
+                drillText = drillText.replace(re, '&nbsp');
+            }
+            const size: 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 (let i: number = 1, len: number = options.text.length; i < len; i++) {
+            height = (measureText(options.text[i as number], font).height);
+            tspanElement = renderer.createTSpan(
+                {
+                    'x': options.x, 'id': options.id,
+                    'y': (options.y) + (i * height)
+                },
+                options.text[i as number]);
+            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}
+ */
+export function setItemTemplateContent(targetId: string, targetElement: Element, contentItemTemplate: string): void {
+    const itemSelect: string = targetId.split('_RectPath')[0];
+    let itemTemplate: Element;
+    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.
+ */
+export function getElement(id: string): Element {
+    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.
+ */
+export function itemsToOrder(a: any, b: any): number {
+    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.
+ */
+export function isContainsData(source: string[], pathName: string, processData: any, treemap: TreeMap): boolean {
+    let isExist: boolean = false; let name: string = ''; let path: string;
+    const leaf: LeafItemSettingsModel = treemap.leafItemSettings; for (let i: number = 0; i < source.length; i++) {
+        path = treemap.levels[i as number] ? treemap.levels[i as number].groupPath : leaf.labelPath ? leaf.labelPath :
+            treemap.weightValuePath;
+        const data: string = processData[path as string] || 'undefined';
+        if (source[i as number] === 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.
+ */
+export function findChildren(data: any): any {
+    let children: any;
+    if (data) {
+        const keys: string[] = Object.keys(data);
+        children = {};
+        for (let i: number = 0; i < keys.length; i++) {
+            if (data[keys[i as number]] instanceof Array) {
+                children['values'] = data[keys[i as number]];
+                children['key'] = keys[i as number];
+                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.
+ */
+export function findHightLightItems(data: any, items: string[], mode: string, treeMap: TreeMap): string[] {
+    if (mode === 'Child') {
+        items.push(data['levelOrderName']);
+        const children: any[] = findChildren(data)['values'];
+        if (children && children.length > 0) {
+            for (let i: number = 0; i < children.length; i++) {
+                if (items.indexOf(children[i as number]['levelOrderName']) === -1) {
+                    items.push(children[i as number]['levelOrderName']);
+                }
+            }
+            for (let j: number = 0; j < children.length; j++) {
+                findHightLightItems(children[j as number], 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') {
+        const parentName: string = (data['levelOrderName'] as string).split('#')[0];
+        let currentItem: any;
+        for (let i: number = 0; i < treeMap.layout.renderItems.length; i++) {
+            currentItem = treeMap.layout.renderItems[i as number];
+            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
+ */
+export function getTemplateFunction(template: string | Function): any {
+    let templateFn: any = 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
+ */
+export function convertElement(element: HTMLCollection, labelId: string, data: any): HTMLElement {
+    const childElement: HTMLElement = createElement('div', {
+        id: labelId
+    });
+    childElement.style.cssText = 'position: absolute;pointer-events: auto;';
+    let elementLength: number = element.length;
+    while (elementLength > 0) {
+        childElement.appendChild(element[0]);
+        elementLength--;
+    }
+    let templateHtml: string = childElement.innerHTML;
+    const keys: any[] = Object.keys(data);
+    for (let i: number = 0; i < keys.length; i++) {
+        const regExp: RegExpConstructor = RegExp;
+        templateHtml = templateHtml.replace(new regExp('{{:' + <string>keys[i as number] + '}}', 'g'), data[keys[i as number].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.
+ */
+export function findLabelLocation(rect: Rect, position: LabelPosition, labelSize: Size, type: string, treemap: TreeMap): Location {
+    const location: Location = new Location(0, 0);
+    const padding: number = 5;
+    const paddings: number = 2;
+    const x: number = (type === 'Template') ? treemap.areaRect.x : 0;
+    const y: number = (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.
+ */
+export function measureElement(element: HTMLElement, parentElement: HTMLElement): Size {
+    const size: Size = new Size(0, 0);
+    parentElement.appendChild(element);
+    size.height = element.offsetHeight;
+    size.width = element.offsetWidth;
+    const measureElementId: HTMLElement = document.getElementById(element.id);
+    measureElementId.parentNode.removeChild(measureElementId);
+    return size;
+}
+
+/**
+ *
+ * @param {Rect} rect - Specifies the area.
+ * @returns {number} - Returns the area width.
+ */
+export function getArea(rect: Rect): number {
+    return (rect.width - rect.x) * (rect.height - rect.y);
+}
+/**
+ *
+ * @param {Rect} input - Specifies input for the calculation.
+ * @returns {number} - Returns the shortest edge.
+ */
+export function getShortestEdge(input: Rect): number {
+    const container: Rect = convertToContainer(input);
+    const width: number = container.width;
+    const height: number = container.height;
+    const result: number = Math.min(width, height);
+    return result;
+}
+/**
+ *
+ * @param {Rect} rect - Specifies the rectangle bounds of the container.
+ * @returns {Rect} - Returns the rectangle bounds.
+ */
+export function convertToContainer(rect: Rect): Rect {
+    const x: number = rect.x;
+    const y: number = rect.y;
+    const width: number = rect.width;
+    const height: number = 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.
+ */
+export function convertToRect(container: Rect): Rect {
+    const xOffset: number = container.x;
+    const yOffset: number = container.y;
+    const width: number = container.width;
+    const height: number = 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.
+ */
+export function getMousePosition(pageX: number, pageY: number, element: Element): Location {
+    const elementRect: ClientRect = element.getBoundingClientRect();
+    const pageXOffset: number = element.ownerDocument.defaultView.pageXOffset;
+    const pageYOffset: number = element.ownerDocument.defaultView.pageYOffset;
+    const clientTop: number = element.ownerDocument.documentElement.clientTop;
+    const clientLeft: number = element.ownerDocument.documentElement.clientLeft;
+    const positionX: number = elementRect.left + pageXOffset - clientLeft;
+    const positionY: number = 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
+ */
+export function colorMap(
+    colorMapping: ColorMappingModel[], equalValue: string,
+    value: number | string): any {
+    let fill: string; const paths: string[] = []; let opacity: string;
+    if (isNullOrUndefined(equalValue) && (isNullOrUndefined(value) && isNaN(<number>value))) {
+        return null;
+    }
+    for (let i: number = 0; i < colorMapping.length; i++) {
+        let isEqualColor: boolean = false; const dataValue: number = <number>value;
+        if (!isNullOrUndefined(colorMapping[i as number].from) && !isNullOrUndefined(colorMapping[i as number].to)
+            && !isNullOrUndefined(colorMapping[i as number].value)) {
+            if ((value >= colorMapping[i as number].from && colorMapping[i as number].to >= value) &&
+                (colorMapping[i as number].value === equalValue)) {
+                isEqualColor = true;
+                if (Object.prototype.toString.call(colorMapping[i as number].color) === '[object Array]') {
+                    fill = !isEqualColor ? colorCollections(colorMapping[i as number], dataValue) : colorMapping[i as number].color[0];
+                } else {
+                    fill = <string>colorMapping[i as number].color;
+                }
+            }
+        } else if ((!isNullOrUndefined(colorMapping[i as number].from) && !isNullOrUndefined(colorMapping[i as number].to))
+            || !isNullOrUndefined((colorMapping[i as number].value))) {
+            if ((value >= colorMapping[i as number].from && colorMapping[i as number].to >= value)
+                || (colorMapping[i as number].value === equalValue)) {
+                if (colorMapping[i as number].value === equalValue) {
+                    isEqualColor = true;
+                }
+                if (Object.prototype.toString.call(colorMapping[i as number].color) === '[object Array]') {
+                    fill = !isEqualColor ? colorCollections(colorMapping[i as number], dataValue) : colorMapping[i as number].color[0];
+                } else {
+                    fill = <string>colorMapping[i as number].color;
+                }
+            }
+        }
+        if (((value >= colorMapping[i as number].from && value <= colorMapping[i as number].to)
+            || (colorMapping[i as number].value === equalValue))
+            && !isNullOrUndefined(colorMapping[i as number].minOpacity) && !isNullOrUndefined(colorMapping[i as number].maxOpacity)
+            && fill) {
+            opacity = deSaturationColor(colorMapping[i as number], value as number);
+        }
+        if ((fill === '' || isNullOrUndefined(fill))
+            && isNullOrUndefined(colorMapping[i as number].from) && isNullOrUndefined(colorMapping[i as number].to)
+            && isNullOrUndefined(colorMapping[i as number].minOpacity) && isNullOrUndefined(colorMapping[i as number].maxOpacity)
+            && isNullOrUndefined(colorMapping[i as number].value)) {
+            fill = (Object.prototype.toString.call(colorMapping[i as number].color) === '[object Array]') ?
+                <string>colorMapping[i as number].color[0] : <string>colorMapping[i as number].color;
+        }
+        opacity = !isNullOrUndefined(opacity) ? opacity : '1';
+        paths.push(fill);
+    }
+    for (let j: number = paths.length - 1; j >= 0; j--) {
+        fill = paths[j as number];
+        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
+ */
+export function deSaturationColor(colorMapping: ColorMappingModel, rangeValue: number): string {
+    let opacity: number = 1;
+    if ((rangeValue >= colorMapping.from && rangeValue <= colorMapping.to)) {
+        const ratio: number = (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.
+ */
+export function colorCollections(colorMap: ColorMappingModel, value: number): string {
+    const gradientFill: string = 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.
+ */
+export function rgbToHex(r: number, g: number, b: number): string {
+    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.
+ */
+export function getColorByValue(colorMap: ColorMappingModel, value: number): string {
+    let color: string = '';
+    let rbg: ColorValue;
+    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.
+ */
+export function getGradientColor(value: number, colorMap: ColorMappingModel): ColorValue {
+    const previousOffset: number = colorMap.from;
+    const nextOffset: number = colorMap.to;
+    let percent: number = 0;
+    const full: number = nextOffset - previousOffset; let midColor: string;
+    percent = (value - previousOffset) / full; let previousColor: string; let nextColor: string;
+    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]);
+        const a: number = full / (colorMap.color.length - 1); let b: number; let c: number;
+
+        const length: number = colorMap.color.length - 1;
+        const splitColorValueOffset: any[] = []; let splitColor: any = {};
+        for (let j: number = 1; j < length; j++) {
+            c = j * a;
+            b = previousOffset + c;
+            splitColor = { b: b, color: colorMap.color[j as number] };
+            splitColorValueOffset.push(splitColor);
+        }
+        for (let i: number = 0; i < splitColorValueOffset.length; i++) {
+            if (previousOffset <= value && value <= splitColorValueOffset[i as number]['b'] && i === 0) {
+                midColor = splitColorValueOffset[i as number]['color'].charAt(0) === '#' ?
+                    splitColorValueOffset[i as number]['color'] : colorNameToHex(splitColorValueOffset[i as number]['color']);
+                nextColor = midColor;
+                percent = value < splitColorValueOffset[i as number]['b'] ? 1 - Math.abs((value - splitColorValueOffset[i as number]['b']) / a)
+                    : (value - splitColorValueOffset[i as number]['b']) / a;
+            } else if (splitColorValueOffset[i as number]['b'] <= value && value <= nextOffset && i === (splitColorValueOffset.length - 1)) {
+                midColor = splitColorValueOffset[i as number]['color'].charAt(0) === '#' ?
+                    splitColorValueOffset[i as number]['color'] : colorNameToHex(splitColorValueOffset[i as number]['color']);
+                previousColor = midColor;
+                percent = value < splitColorValueOffset[i as number]['b'] ?
+                    1 - Math.abs((value - splitColorValueOffset[i as number]['b']) / a) : (value - splitColorValueOffset[i as number]['b']) / a;
+            }
+            if (i !== splitColorValueOffset.length - 1 && i < splitColorValueOffset.length) {
+                if (splitColorValueOffset[i as number]['b'] <= value && value <= splitColorValueOffset[i + 1]['b']) {
+                    midColor = splitColorValueOffset[i as number]['color'].charAt(0) === '#' ?
+                        splitColorValueOffset[i as number]['color'] : colorNameToHex(splitColorValueOffset[i as number]['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.
+ */
+export function getPercentageColor(percent: number, previous: string, next: string): ColorValue {
+    const nextColor: string = next.split('#')[1];
+    const prevColor: string = previous.split('#')[1];
+    const r: number = getPercentage(percent, parseInt(prevColor.substr(0, 2), 16), parseInt(nextColor.substr(0, 2), 16));
+    const g: number = getPercentage(percent, parseInt(prevColor.substr(2, 2), 16), parseInt(nextColor.substr(2, 2), 16));
+    const b: number = 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.
+ */
+export function getPercentage(percent: number, previous: number, next: number): number {
+    const full: number = 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.
+ */
+export function wordWrap(maximumWidth: number, dataLabel: string, font: FontModel): string[] {
+    const textCollection: string[] = dataLabel.split(' ');
+    let label: string = '';
+    const labelCollection: string[] = [];
+    let text: string;
+    for (let i: number = 0, len: number = textCollection.length; i < len; i++) {
+        text = textCollection[i as number];
+        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.
+ */
+export function textWrap(maxWidth: number, label: string, font: FontModel): string[] {
+    const resultText: string[] = [];
+    let currentLength: number = 0;
+    let totalWidth: number = measureText(label, font).width;
+    const totalLength: number = label.length;
+    if (maxWidth >= totalWidth) {
+        resultText.push(label);
+        return resultText;
+    } else {
+        for (let i: number = label.length; i > currentLength; i--) {
+            const sliceString: string = label.slice(currentLength, i);
+            totalWidth = measureText(sliceString, font).width;
+            if (totalWidth <= maxWidth) {
+                resultText.push(sliceString);
+                currentLength += sliceString.length;
+                if (totalLength === currentLength) {
+                    return resultText;
+                }
+                i = totalLength + 1;
+            }
+        }
+    }
+    return resultText;
+}
+/**
+ * hide function
+ *
+ * @param {number} maxWidth - Specifies the maximum width.
+ * @param {number} maxHeight - Specifies the maximum height.
+ * @param {string} text - Specifies the text.
+ * @param {FontModel} font - Specifies the font.
+ * @returns {string} - Returns the hidden text.
+ * @private
+ */
+export function hide(maxWidth: number, maxHeight: number, text: string, font: FontModel): string {
+    let hideText: string = text;
+    const textSize: Size = measureText(text, font);
+    hideText = (textSize.width > maxWidth || textSize.height > maxHeight) ? ' ' : text;
+    return hideText;
+}
+/**
+ *
+ * @param {number} a - Specifies the first value of the leaf.
+ * @param {number} b - Specifies the second value of the leaf.
+ * @returns {number} - Returns whether values are equal or not.
+ */
+export function orderByArea(a: number, b: number): number {
+    if (a['itemArea'] === b['itemArea']) {
+        return 0;
+    } else if (a['itemArea'] < b['itemArea']) {
+        return 1;
+    }
+    return -1;
+}
+/**
+ *
+ * @param {TreeMap} treemap - Specifies the treemap instance.
+ * @param {Element} element - Specifies the selected TreeMap leaf item.
+ * @param {string} className -Specifies the selected class name.
+ * @returns {void}
+ */
+export function maintainSelection(treemap: TreeMap, element: Element, className: string): void {
+    const elementId: string[] = treemap.levelSelection;
+    if (elementId) {
+        for (let index: number = 0; index < elementId.length; index++) {
+            if (element.getAttribute('id') === elementId[index as number] ||
+                element.children[0].id === elementId[index as number]) {
+                if (element.childElementCount > 0 && element.children[0].id.indexOf('_Group') === -1) {
+                    element.children[0].setAttribute('class', className);
+                    applyOptions(
+                        element.childNodes[0] as SVGPathElement,
+                        {
+                            border: treemap.selectionSettings.border, fill: treemap.selectionSettings.fill,
+                            opacity: treemap.selectionSettings.opacity
+                        }
+                    );
+                }
+            } else {
+                element.setAttribute('class', '');
+            }
+        }
+    }
+}
+/**
+ *
+ * @param {TreeMap} treemap - Specifies the treemap instance.
+ * @param {Element} legendGroup - Specifies the selected element.
+ * @returns {void}
+ */
+export function legendMaintain(treemap: TreeMap, legendGroup: Element): void {
+    const elementId: string[] = treemap.legendId;
+    if (elementId) {
+        for (let i: number = 0; i < elementId.length; i++) {
+            if (treemap.legendSettings.mode === 'Interactive') {
+                for (let j: number = 0; j < legendGroup.childElementCount; j++) {
+                    if (legendGroup.childNodes[j as number]['id'] === elementId[i as number] ||
+                        parseFloat(legendGroup.childNodes[j as number]['id'].split('Index_')[1]) === parseFloat(elementId[i as number].split('Index_')[1])) {
+                        const treemapSVGRectElement: SVGRectElement = <SVGRectElement>legendGroup.childNodes[j as number];
+                        treemapSVGRectElement.setAttribute('fill', treemap.selectionSettings.fill);
+                        treemapSVGRectElement.setAttribute('opacity', treemap.selectionSettings.opacity);
+                        if (treemapSVGRectElement.id.indexOf('Text') === -1) {
+                            treemapSVGRectElement.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
+                            treemapSVGRectElement.setAttribute('stroke', treemap.selectionSettings.border.color);
+                        } else {
+                            treemapSVGRectElement.setAttribute('stroke', null);
+                            treemapSVGRectElement.setAttribute('stroke-width', null);
+                        }
+                    }
+                }
+            } else {
+                const legendItem: Element = document.getElementById(elementId[i as number]);
+                if (!isNullOrUndefined(legendItem)) {
+                    legendItem.setAttribute('fill', treemap.selectionSettings.fill);
+                    legendItem.setAttribute('opacity', treemap.selectionSettings.opacity);
+                    if (legendItem.id.indexOf('Text') === -1) {
+                        legendItem.setAttribute('stroke', treemap.selectionSettings.border.color);
+                        legendItem.setAttribute('stroke-width', (treemap.selectionSettings.border.width).toString());
+                    } else {
+                        legendItem.setAttribute('stroke', null);
+                        legendItem.setAttribute('stroke-width', null);
+                    }
+                }
+            }
+        }
+    }
+}
+/**
+ *
+ * @param {HTMLCollection} elements - Specifies the selected TreeMap element.
+ * @param {string} type - Specifies the selection type.
+ * @param {TreeMap} treemap - Specifies the TreeMap instance.
+ * @returns {void}
+ */
+export function removeClassNames(elements: HTMLCollection, type: string, treemap: TreeMap): void {
+    let element: SVGPathElement;
+    let options: any = {};
+    for (let j: number = 0; j < elements.length; j++) {
+        element = isNullOrUndefined(elements[j as number].childNodes[0] as SVGPathElement) ? elements[j as number] as SVGPathElement :
+            elements[j as number].childNodes[0] as SVGPathElement;
+        options = treemap.layout.renderItems[parseFloat(element.id.split('_Item_Index_')[1])]['options'];
+        applyOptions(element, options);
+        elements[j as number].classList.remove(type);
+        j -= 1;
+    }
+}
+/**
+ *
+ * @param {SVGPathElement} element - Specifies the SVG path element.
+ * @param {any} options - Specifies the settings for the SVG path element.
+ * @returns {void}
+ */
+export function applyOptions(element: SVGPathElement, options: any): void {
+    element.setAttribute('opacity', options['opacity']);
+    if (!isNullOrUndefined(options['fill'])) {
+        element.setAttribute('fill', options['fill']);
+    } else {
+        element.setAttribute('fill', 'black');
+    }
+    element.setAttribute('stroke', options['border']['color']);
+    element.setAttribute('stroke-width', options['border']['width']);
+}
+/**
+ *
+ * @param {string} format - Specifies the format value.
+ * @param {any} data - Specifies the data source object.
+ * @param {TreeMap} treemap - Specifies the TreeMap instance.
+ * @returns {string} - Returns the formatted text.
+ */
+export function textFormatter(format: string, data: any, treemap: TreeMap): string {
+    if (isNullOrUndefined(format)) {
+        return null;
+    }
+    const keys: string[] = Object.keys(data);
+    for (const key of keys) {
+        format = format.split('${' + key + '}').join(formatValue(data[key as string], treemap).toString());
+    }
+    return format;
+}
+/**
+ *
+ * @param {number} value - Specifies the text to be formatted.
+ * @param {TreeMap} treemap - Specifies the TreeMap instance.
+ * @returns {string | number} - Returns the formatted text.
+ */
+export function formatValue(value: number, treemap: TreeMap): string | number {
+    let formatValue: string | number; let formatFunction: any;
+    if (treemap.format && !isNaN(Number(value))) {
+        formatFunction = treemap.intl.getNumberFormat(
+            { format: treemap.format, useGrouping: treemap.useGroupingSeparator });
+        formatValue = formatFunction(Number(value));
+    } else {
+        formatValue = value;
+    }
+    return formatValue ? formatValue : '';
+}
+
+/**
+ * @private
+ */
+export class ColorValue {
+    public r: number;
+    public g: number;
+    public b: number;
+    constructor(r?: number, g?: number, b?: number) {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+    }
+}
+
+/**
+ * @param {ColorValue} value - Specfies the color value
+ * @returns {string} - Returns the string
+ * @private
+ */
+export function convertToHexCode(value: ColorValue): string {
+    return '#' + componentToHex(value.r) + componentToHex(value.g) + componentToHex(value.b);
+}
+
+/**
+ * @param {number} value - Specifies the value
+ * @returns {string} - Returns the string
+ * @private */
+export function componentToHex(value: number): string {
+    const hex: string = value.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+}
+
+/**
+ * @param {string} hex - Specifies the hex value
+ * @returns {ColorValue} - Returns the color value
+ * @private
+ */
+export function convertHexToColor(hex: string): ColorValue {
+    const result: RegExpExecArray = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? new ColorValue(parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)) :
+        new ColorValue(255, 255, 255);
+}
+
+/**
+ * @param {string} color - Specifies the color
+ * @returns {string} - Returns the string
+ * @private
+ */
+export function colorNameToHex(color: string): string {
+    color = color === 'transparent' ? 'white' : color;
+    const element: HTMLElement = document.getElementById('treeMapMeasureText');
+    element.style.color = color;
+    color = window.getComputedStyle(element).color;
+    const isRGBValue: string[] = color.replace(/[()RGBrgba ]/g, '').split(',');
+    return convertToHexCode(
+        new ColorValue(parseInt(isRGBValue[0], 10), parseInt(isRGBValue[1], 10), parseInt(isRGBValue[2], 10))
+    );
+}
+
+/**
+ * @param {Location} location - Specifies the location
+ * @param {string} shape - Specifies the shape
+ * @param {Size} size - Specifies the size
+ * @param {string} url - Specifies the url
+ * @param {PathOption} options - Specifies the options
+ * @returns {Element} - Returns the element
+ * @private
+ */
+export function drawSymbol(location: Location, shape: string, size: Size, url: string, options: PathOption): Element {
+    const svgRenderer: SvgRenderer = new SvgRenderer('');
+    const temp: IShapes = renderLegendShape(location, size, shape, options, url);
+    const htmlElement: Element = svgRenderer['draw' + temp.functionName](temp.renderOption);
+    return htmlElement;
+}
+/**
+ * @param {Location} location - Specifies the location
+ * @param {Size} size - Specifies the size
+ * @param {string} shape - Specifies the shape
+ * @param {PathOption} options - Specifies the path option
+ * @param {string} url - Specifies the string
+ * @returns {IShapes} - Returns the shapes
+ * @private
+ */
+export function renderLegendShape(location: Location, size: Size, shape: string, options: PathOption, url: string): IShapes {
+    let renderPath: string;
+    let functionName: string = 'Path';
+    const shapeWidth: number = size.width;
+    const shapeHeight: number = size.height;
+    const shapeX: number = location.x;
+    const shapeY: number = location.y;
+    const x: number = location.x + (-shapeWidth / 2);
+    const y: number = location.y + (-shapeHeight / 2);
+    switch (shape) {
+    case 'Circle':
+    case 'Bubble':
+        functionName = 'Ellipse';
+        merge(options, { 'rx': shapeWidth / 2, 'ry': shapeHeight / 2, 'cx': shapeX, 'cy': shapeY });
+        break;
+    case 'VerticalLine':
+        renderPath = 'M' + ' ' + shapeX + ' ' + (shapeY + (shapeHeight / 2)) + ' ' + 'L' + ' ' + shapeX + ' '
+            + (shapeY + (-shapeHeight / 2));
+        merge(options, { 'd': renderPath });
+        break;
+    case 'Diamond':
+        renderPath = 'M' + ' ' + x + ' ' + shapeY + ' ' +
+            'L' + ' ' + shapeX + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +
+            'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + shapeY + ' ' +
+            'L' + ' ' + shapeX + ' ' + (shapeY + (shapeHeight / 2)) + ' ' +
+            'L' + ' ' + x + ' ' + shapeY + ' z';
+        merge(options, { 'd': renderPath });
+        break;
+    case 'Rectangle':
+        renderPath = 'M' + ' ' + x + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +
+            'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +
+            'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + (shapeY + (shapeHeight / 2)) + ' ' +
+            'L' + ' ' + x + ' ' + (shapeY + (shapeHeight / 2)) + ' ' +
+            'L' + ' ' + x + ' ' + (shapeY + (-shapeHeight / 2)) + ' z';
+        merge(options, { 'd': renderPath });
+        break;
+    case 'Triangle':
+        renderPath = 'M' + ' ' + x + ' ' + (shapeY + (shapeHeight / 2)) + ' ' +
+            'L' + ' ' + shapeX + ' ' + (shapeY + (-shapeHeight / 2)) + ' ' +
+            'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + (shapeY + (shapeHeight / 2)) + ' ' +
+            'L' + ' ' + x + ' ' + (shapeY + (shapeHeight / 2)) + ' z';
+        merge(options, { 'd': renderPath });
+        break;
+    case 'InvertedTriangle':
+        renderPath = 'M' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + (shapeY - (shapeHeight / 2)) + ' ' +
+            'L' + ' ' + shapeX + ' ' + (shapeY + (shapeHeight / 2)) + ' ' +
+            'L' + ' ' + (shapeX - (shapeWidth / 2)) + ' ' + (shapeY - (shapeHeight / 2)) + ' ' +
+            'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + (shapeY - (shapeHeight / 2)) + ' z';
+        merge(options, { 'd': renderPath });
+        break;
+    case 'Pentagon':
+        // eslint-disable-next-line no-case-declarations
+        const eq: number = 72;
+        // eslint-disable-next-line no-case-declarations
+        let xValue: number;
+        // eslint-disable-next-line no-case-declarations
+        let yValue: number;
+        for (let i: number = 0; i <= 5; i++) {
+            xValue = (shapeWidth / 2) * Math.cos((Math.PI / 180) * (i * eq));
+            yValue = (shapeWidth / 2) * Math.sin((Math.PI / 180) * (i * eq));
+            if (i === 0) {
+                renderPath = 'M' + ' ' + (shapeX + xValue) + ' ' + (shapeY + yValue) + ' ';
+            } else {
+                renderPath = renderPath.concat('L' + ' ' + (shapeX + xValue) + ' ' + (shapeY + yValue) + ' ');
+            }
+        }
+        renderPath = renderPath.concat('Z');
+        merge(options, { 'd': renderPath });
+        break;
+    case 'Star':
+        renderPath = 'M ' + (location.x + size.width / 3) + ' ' + (location.y - size.height / 2) + ' L ' + (location.x - size.width / 2)
+            + ' ' + (location.y + size.height / 6) + ' L ' + (location.x + size.width / 2) + ' ' + (location.y + size.height / 6)
+            + ' L ' + (location.x - size.width / 3) + ' ' + (location.y - size.height / 2) + ' L ' + location.x + ' ' +
+            (location.y + size.height / 2) + ' L ' + (location.x + size.width / 3) + ' ' + (location.y - size.height / 2) + ' Z';
+        merge(options, { 'd': renderPath });
+        break;
+    case 'Cross':
+        renderPath = 'M' + ' ' + x + ' ' + shapeY + ' ' + 'L' + ' ' + (shapeX + (shapeWidth / 2)) + ' ' + shapeY + ' ' +
+            'M' + ' ' + shapeX + ' ' + (shapeY + (shapeHeight / 2)) + ' ' + 'L' + ' ' + shapeX + ' ' +
+            (shapeY + (-shapeHeight / 2));
+        merge(options, { 'd': renderPath });
+        break;
+    case 'Image':
+        functionName = 'Image';
+        merge(options, { 'href': url, 'height': shapeHeight, 'width': shapeWidth, x: x, y: y });
+        break;
+    }
+    return { renderOption: options, functionName: functionName };
+}
+
+/**
+ *
+ * @param {any} data - Specifies the data source object.
+ * @param {any} item - Specifies the leaf item.
+ * @returns {boolean} - Returns whether the TreeMap item is level item or leaf item.
+ */
+export function isParentItem(data: any[], item: any): boolean {
+    let isParentItem: boolean = false;
+    for (let j: number = 0; j < data.length; j++) {
+        if (item['levelOrderName'] === data[j as number]['levelOrderName']) {
+            isParentItem = true;
+            break;
+        }
+    }
+    return isParentItem;
+}
+/**
+ * Specifies the data to be received through Ajax request for treemap.
+ */
+export class TreeMapAjax {
+    /** Defines the options for the data for treemap. */
+    public dataOptions: string | any;
+    /** Defines the type of the data. */
+    public type: string;
+    /** Specifies whether the request is asynchronous or not. */
+    public async: boolean;
+    /** Defines the type of the content. */
+    public contentType: string;
+    /** Defines the data to be sent through the request. */
+    public sendData: string | any;
+    constructor(options: string | any, type?: string, async?: boolean, contentType?: string, sendData?: string | any) {
+        this.dataOptions = options;
+        this.type = type || 'GET';
+        this.async = async || true;
+        this.contentType = contentType;
+        this.sendData = sendData;
+    }
+}
+/**
+ *
+ * @param {any[]} collection - Specifies the legend collection.
+ * @returns {void}
+ * @private
+ */
+export function removeShape(collection: any[]): void {
+    if (collection.length > 0) {
+        for (let i: number = 0; i < collection.length; i++) {
+            const item: any = collection[i as number];
+            setColor(item['legendEle'], item['oldFill'], item['oldOpacity'], item['oldBorderColor'], item['oldBorderWidth']);
+        }
+    }
+}
+/**
+ *
+ * @param {any[]} collection - Specifies the legend collection.
+ * @param {TreeMap} treeMap - Specifies the treemap instance.
+ * @returns {void}
+ * @private
+ */
+export function removeLegend(collection: any[], treeMap: TreeMap): void {
+    if (collection.length > 0) {
+        for (let j: number = 0; j < collection.length; j++) {
+            const item: any = collection[j as number];
+            const legendIndex: number = parseFloat(item['legendEle'].id.split('_Index_')[1]);
+            const isText: boolean = item['legendEle'].id.indexOf('Text') > -1;
+            const shapeId: string = isText ? item['legendEle'].id.replace('_Text', '') : item['legendEle'].id;
+            const legendShape: Element = treeMap.legendSettings.mode === 'Interactive'
+                ? document.getElementById(shapeId)
+                : document.getElementById(treeMap.element.id + '_Legend_Shape_Index_' + legendIndex);
+            const legendText: Element = treeMap.legendSettings.mode === 'Interactive'
+                ? document.getElementById(shapeId + '_Text')
+                : document.getElementById(treeMap.element.id + '_Legend_Text_Index_' + legendIndex);
+            if (!isNullOrUndefined(legendShape)) {
+                setColor(legendShape, item['oldFill'], item['oldOpacity'], 'none', '0px');
+            }
+            if (!isNullOrUndefined(legendText)) {
+                setColor(legendText, treeMap.legendSettings.textStyle.color || treeMap.themeStyle.legendTextColor, item['oldOpacity'], null, null);
+            }
+            const dataCount: number = !isNullOrUndefined(item['ShapeCollection']) ? item['ShapeCollection']['Elements'].length : 0;
+            for (let k: number = 0; k < dataCount; k++) {
+                const shapeElement: Element = document.getElementById(item['ShapeCollection']['Elements'][k as number].id);
+                if (!isNullOrUndefined(shapeElement)) {
+                    setColor(
+                        shapeElement, item['shapeOldFill'], item['shapeOldOpacity'],
+                        item['shapeOldBorderColor'], item['shapeOldBorderWidth']);
+                }
+            }
+        }
+    }
+}
+/**
+ *
+ * @param {Element} element - Specifies the selected element.
+ * @param {string} fill - Specifies the fill color.
+ * @param {string} opacity - Specifies the opacity.
+ * @param {string} borderColor - Specifies the border color.
+ * @param {string} borderWidth - Specifies the border width.
+ * @returns {void}
+ */
+export function setColor(element: Element, fill: string, opacity: string, borderColor: string, borderWidth: string): void {
+    element.setAttribute('fill', fill);
+    element.setAttribute('opacity', opacity);
+    if (!isNullOrUndefined(borderColor)) {
+        element.setAttribute('stroke', borderColor);
+    }
+    if (!isNullOrUndefined(borderWidth)) {
+        element.setAttribute('stroke-width', borderWidth);
+    }
+}
+/**
+ *
+ * @param {any[]} collection - Specifies the selected item collection.
+ * @param {any[]} element - Specifies the selected element collection.
+ * @param {TreeMap} treemap - Specifies the TreeMap instance.
+ * @returns {void}
+ */
+export function removeSelectionWithHighlight(collection: any[], element: any[], treemap: TreeMap): void {
+    removeLegend(collection, treemap);
+    element = [];
+    removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', treemap);
+}
+/**
+ *
+ * @param {number} length - Specifies the length of the legend group.
+ * @param {any} item - Specifies the legend item.
+ * @param {TreeMap} treemap - Specifies the TreeMap instance.
+ * @returns {number} - Returns the legend index.
+ */
+export function getLegendIndex(length: number, item: any, treemap: TreeMap): number {
+    let index: number;
+    const valuePath: string = (treemap.rangeColorValuePath !== '') ? treemap.rangeColorValuePath : null;
+    let indexFound: boolean = false;
+    for (let i: number = 0; i < length && !indexFound; i++) {
+        const dataLength: number = treemap.treeMapLegendModule.legendCollections[i as number]['legendData'].length;
+        if (dataLength > 0) {
+            for (let j: number = 0; j < dataLength; j++) {
+                if ((!isNullOrUndefined(valuePath) && treemap.leafItemSettings.colorMapping.length > 0 ?
+                    (treemap.treeMapLegendModule.legendCollections[i as number]['legendData'][j as number]['data'][valuePath as string] === item['data'][valuePath as string])
+                    : treemap.treeMapLegendModule.legendCollections[i as number]['legendData'][j as number]['levelOrderName'] === item['levelOrderName']
+                    || item['levelOrderName'].indexOf(treemap.treeMapLegendModule.legendCollections[i as number]['legendName']) > -1)
+                ) {
+                    index = i;
+                    indexFound = true;
+                    break;
+                }
+            }
+        } else if (treemap.palette && treemap.palette.length > 0) {
+            if ((treemap.treeMapLegendModule.legendCollections[i as number]['levelOrderName'] === item['levelOrderName'] ||
+                (item['levelOrderName'].indexOf(treemap.treeMapLegendModule.legendCollections[i as number]['levelOrderName'])) > -1)
+                && treemap.treeMapLegendModule.legendCollections[i as number]['legendName'] === item['name']) {
+                index = i;
+                break;
+            }
+        }
+    }
+    return index;
+}
+/**
+ *
+ * @param {any[]} collection - Specifies the legend collection.
+ * @param {number} index - Specifies the index of legend.
+ * @param {number} number - Specifies the leaf item index.
+ * @param {Element} legendElement - Specifies the legend element.
+ * @param {Element} shapeElement - Specifies the shape element.
+ * @param {any[]} renderItems - Specifies the item index.
+ * @param {any[]} legendCollection - Specifies the legend collection.
+ * @returns {void}
+ */
+export function pushCollection(
+    collection: any[], index: number, number: number, legendElement: Element, shapeElement: Element,
+    renderItems: any[], legendCollection: any[]): void {
+    collection.push({
+        legendEle: legendElement, oldFill: legendCollection[index as number]['legendFill'],
+        oldOpacity: legendCollection[index as number]['opacity'], oldBorderColor: legendCollection[index as number]['borderColor'],
+        oldBorderWidth: legendCollection[index as number]['borderWidth'],
+        shapeElement: shapeElement, shapeOldFill: renderItems[number as number]['options']['fill'],
+        shapeOldOpacity: renderItems[number as number]['options']['opacity'],
+        shapeOldBorderColor: renderItems[number as number]['options']['border']['color'],
+        shapeOldBorderWidth: renderItems[number as number]['options']['border']['width']
+    });
+}
+
+/**
+ * To trigger the download element
+ *
+ * @param {string} fileName - Specifies the file name
+ * @param {ExportType} type - Specifies the type
+ * @param {string} url - Specifies the url
+ * @param {boolean} isDownload - Specifies the boolean value
+ * @returns {void}
+ * @private
+ */
+export function triggerDownload(fileName: string, type: ExportType, url: string, isDownload: boolean): void {
+    createElement('a', {
+        attrs: {
+            'download': fileName + '.' + (type as string).toLocaleLowerCase(),
+            'href': url
+        }
+    }).dispatchEvent(new MouseEvent(isDownload ? 'click' : 'move', {
+        view: window,
+        bubbles: false,
+        cancelable: true
+    }));
+}
+/**
+ *
+ * @param {string} id - Specifies the id of the element to be removed.
+ * @returns {void}
+ */
+export function removeElement(id: string): void {
+    const element: Element = document.getElementById(id);
+    return element ? remove(element) : null;
+}