@syncfusion/ej2-treemap 20.1.59 → 20.2.36

package/dist/ts/treemap/treemap.ts

@@ -0,0 +1,1575 @@
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/dot-notation */
+/* eslint-disable brace-style */
+/* eslint-disable max-len */
+/**
+ * Tree Map Components
+ */
+
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, extend, Ajax } from '@syncfusion/ej2-base';
+import { Complex, Collection, ModuleDeclaration } from '@syncfusion/ej2-base';
+import { Event, EmitType, Internationalization } from '@syncfusion/ej2-base';
+import { SvgRenderer } from '@syncfusion/ej2-svg-base';
+import { isNullOrUndefined, createElement, EventHandler, Browser, remove } from '@syncfusion/ej2-base';
+import { BorderModel, TitleSettingsModel, MarginModel, LevelSettingsModel, FontModel } from './model/base-model';
+import { LeafItemSettingsModel, TooltipSettingsModel, LegendSettingsModel, InitialDrillSettingsModel } from './model/base-model';
+import { HighlightSettingsModel, SelectionSettingsModel } from './model/base-model';
+import { Border, Margin, TitleSettings, LegendSettings, InitialDrillSettings } from './model/base';
+import { SelectionSettings, TooltipSettings, LevelSettings, LeafItemSettings, HighlightSettings } from './model/base';
+import { TreeMapModel } from './treemap-model';
+import { LayoutMode, TreeMapTheme, RenderingMode } from './utils/enum';
+import { ILoadEventArgs, ILoadedEventArgs, IPrintEventArgs } from '../treemap/model/interface';
+import { ILegendItemRenderingEventArgs, ILegendRenderingEventArgs, IItemDataEventArgs } from '../treemap/model/interface';
+import { IItemRenderingEventArgs, IResizeEventArgs, IDoubleClickEventArgs, IRightClickEventArgs } from '../treemap/model/interface';
+import { IItemClickEventArgs, IItemMoveEventArgs, IClickEventArgs, IMouseMoveEventArgs } from '../treemap/model/interface';
+import { IDrillStartEventArgs, IItemSelectedEventArgs, ITreeMapTooltipRenderEventArgs } from '../treemap/model/interface';
+import { IItemHighlightEventArgs, IDrillEndEventArgs, IThemeStyle } from '../treemap/model/interface';
+import { Size, stringToNumber, RectOption, Rect, textTrim, measureText, findChildren, removeElement, setItemTemplateContent } from '../treemap/utils/helper';
+import { removeClassNames, removeShape, textFormatter } from '../treemap/utils/helper';
+import { findPosition, Location, TextOption, renderTextElement, isContainsData, TreeMapAjax } from '../treemap/utils/helper';
+import { load, loaded, itemSelected, drillStart, drillEnd } from '../treemap/model/constants';
+import { itemClick, itemMove, click, mouseMove, resize, doubleClick, rightClick } from '../treemap/model/constants';
+import { LayoutPanel } from './layout/render-panel';
+import { TreeMapTooltip } from './user-interaction/tooltip';
+import { ExportType } from '../treemap/utils/enum';
+import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';
+import { TreeMapHighlight, TreeMapSelection } from './user-interaction/highlight-selection';
+import { TreeMapLegend } from './layout/legend';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+import { getThemeStyle } from './model/theme';
+import { Print } from './model/print';
+import { ImageExport } from './model/image-export';
+import { PdfExport } from './model/pdf-export';
+/**
+ * Represents the treemap component.
+ * ```html
+ * <div id="container"/>
+ * <script>
+ *   var treemap = new TreeMap();
+ *   treemap.appendTo("#container");
+ * </script>
+ * ```
+ */
+
+@NotifyPropertyChanges
+export class TreeMap extends Component<HTMLElement> implements INotifyPropertyChanged {
+    //Module Declaration for treemap.
+    /**
+     * Sets and gets the module that is used to add tooltip in the treemap.
+     */
+    public treeMapTooltipModule: TreeMapTooltip;
+    /**
+     * Sets and gets the module that is used to add highlight functionality in the treemap.
+     */
+    public treeMapHighlightModule: TreeMapHighlight;
+    /**
+     * Sets and gets the module that is used to add selection functionality in the treemap.
+     */
+    public treeMapSelectionModule: TreeMapSelection;
+    /**
+     * Sets and gets the module that is used to add legend in the treemap.
+     */
+    public treeMapLegendModule: TreeMapLegend;
+    /**
+     * Sets and gets the module that is used to add print functionality in the treemap.
+     *
+     * @private
+     */
+    public printModule: Print;
+    /**
+     * Sets and gets the module that is used to add imageExport functionality in the treemap.
+     *
+     * @private
+     */
+    public imageExportModule: ImageExport;
+    /**
+     * Sets and gets the module that is used to add pdf export functionality in the treemap.
+     *
+     * @private
+     */
+    public pdfExportModule: PdfExport ;
+    /**
+     * Enables and disables the print functionality in treemap.
+     *
+     * @default false
+     */
+    @Property(false)
+    public allowPrint: boolean;
+    /**
+     * Enables and disables the export to image functionality in treemap.
+     *
+     * @default false
+     */
+    @Property(false)
+    public allowImageExport: boolean;
+    /**
+     * Enables and disables the export to pdf functionality in treemap.
+     *
+     * @default false
+     */
+    @Property(false)
+    public allowPdfExport: boolean;
+    /**
+     * Sets and gets the width of the treemap component.
+     *
+     * @default null
+     */
+    @Property(null)
+    public width: string;
+    /**
+     * Sets and gets the height of the treemap component.
+     *
+     * @default null
+     */
+    @Property(null)
+    public height: string;
+    /**
+     * Sets and gets the options for customizing the color and width of the treemap border.
+     */
+    @Complex<BorderModel>({}, Border)
+    public border: BorderModel;
+    /**
+     * Sets and gets the options for customizing the margin in the treemap component.
+     */
+    @Complex<MarginModel>({}, Margin)
+    public margin: MarginModel;
+    /**
+     * Sets and gets the background color of the treemap.
+     */
+    @Property(null)
+    public background: string;
+    /**
+     * Sets and gets the options for customizing the theme of the treemap component.
+     */
+    @Property('Material')
+    public theme: TreeMapTheme;
+    /**
+     * Sets and gets the options for customizing the title of the treemap component.
+     */
+    @Complex<TitleSettingsModel>({}, TitleSettings)
+    public titleSettings: TitleSettingsModel;
+    /**
+     * Specifies the rendering type of layout of the treemap component.
+     */
+    @Property('Squarified')
+    public layoutType: LayoutMode;
+    /**
+     * Sets and gets the data source for the treemap component.
+     *
+     * @isGenericType true
+     * @isObservable true
+     * @default null
+     */
+    @Property(null)
+    public dataSource: DataManager | TreeMapAjax | Object[];
+    /**
+     * Sets and gets the query to select particular data from the shape data.
+     * This property is applicable only when the data source is created by data manager.
+     *
+     * @default null
+     */
+    @Property(null)
+    public query: Query;
+    /**
+     * Sets and gets the value path of the weight from the data source, based on which the map item is rendered.
+     */
+    @Property(null)
+    public weightValuePath: string;
+    /**
+     * Sets and gets the value path from the data source, based on it color is filled in treemap.
+     */
+    @Property('')
+    public rangeColorValuePath: string;
+    /**
+     * Sets and gets the value path from the data source, based on it color is filled in treemap.
+     */
+    @Property('')
+    public equalColorValuePath: string;
+    /**
+     * Sets and gets the value path from the data source, based on it color is filled in treemap.
+     */
+    @Property(null)
+    public colorValuePath: string;
+    /**
+     * Sets and gets the set of colors to apply in the treemap items.
+     */
+    @Property([])
+    public palette: string[];
+    /**
+     * Specifies the rendering direction of layout of the treemap items.
+     *
+     * @default TopLeftBottomRight
+     */
+    @Property('TopLeftBottomRight')
+    public renderDirection: RenderingMode;
+    /**
+     * Enables or disables the drill down functionality in treemap.
+     */
+    @Property(false)
+    public enableDrillDown: boolean;
+    /**
+     * Enables or disables the connection text in the header of the treemap.
+     */
+    @Property(false)
+    public enableBreadcrumb: boolean;
+    /**
+     * Specifies the connection between the two words.
+     */
+    @Property(' - ')
+    public breadcrumbConnector: string;
+    /**
+     * Enables or disables the initial drill in the treemap.
+     */
+    @Property(false)
+    public drillDownView: boolean;
+    /**
+     * Specifies the options for customizing the initial drill down in treemap.
+     */
+    @Complex<InitialDrillSettingsModel>({}, InitialDrillSettings)
+    public initialDrillDown: InitialDrillSettingsModel;
+    /**
+     * Sets and gets the options for customizing the leaf item of the treemap.
+     */
+    @Complex<LeafItemSettingsModel>({}, LeafItemSettings)
+    public leafItemSettings: LeafItemSettingsModel;
+    /**
+     * Sets and gets the options for customizing the levels of the treemap.
+     */
+    @Collection<LevelSettingsModel>([], LevelSettings)
+    public levels: LevelSettingsModel[];
+    /**
+     * Sets and gets the options for customizing the highlight of the treemap item on mouse over on the treemap component.
+     */
+    @Complex<HighlightSettingsModel>({}, HighlightSettings)
+    public highlightSettings: HighlightSettingsModel;
+    /**
+     * Sets and gets the options for customizing the selection of the treemap item on click event on the treemap component.
+     */
+    @Complex<SelectionSettingsModel>({}, SelectionSettings)
+    public selectionSettings: SelectionSettingsModel;
+    /**
+     * Sets and gets the options for customizing the tooltip of the treemap.
+     */
+    @Complex<TooltipSettingsModel>({}, TooltipSettings)
+    public tooltipSettings: TooltipSettingsModel;
+    /**
+     * Sets and gets the options for customizing the legend of the treemap.
+     */
+    @Complex<LegendSettingsModel>({}, LegendSettings)
+    public legendSettings: LegendSettingsModel;
+    /**
+     * Enables or disables the visibility state of the separator for grouping.
+     *
+     * @default false
+     */
+    @Property(false)
+    public useGroupingSeparator: boolean;
+    /**
+     * Sets and gets the description for treemap.
+     *
+     * @default null
+     */
+    @Property(null)
+    public description: string;
+
+    /**
+     * Sets and gets the tab index value for treemap.
+     *
+     * @default 1
+     */
+    @Property(1)
+    public tabIndex: number;
+    /**
+     * Sets and gets format for the texts in the treemap.
+     *
+     * @default null
+     */
+    @Property(null)
+    public format: string;
+    /**
+     * Triggers when the treemap is on load.
+     *
+     * @event
+     */
+    @Event()
+    public load: EmitType<ILoadEventArgs>;
+    /**
+     * Triggers before the prints gets started.
+     *
+     * @event
+     */
+    @Event()
+    public beforePrint: EmitType<IPrintEventArgs>;
+    /**
+     * Triggers after treemap is rendered.
+     *
+     * @event
+     */
+    @Event()
+    public loaded: EmitType<ILoadedEventArgs>;
+    /**
+     * Triggers before item rendering in the treemap component.
+     *
+     * @event
+     */
+    @Event()
+    public itemRendering: EmitType<IItemRenderingEventArgs>;
+    /**
+     * Triggers on performing drill down functionality in the treemap.
+     *
+     * @event
+     */
+    @Event()
+    public drillStart: EmitType<IDrillStartEventArgs>;
+    /**
+     * Triggers after drill down functionality gets completed in the treemap.
+     *
+     * @event
+     */
+    @Event()
+    public drillEnd: EmitType<IDrillEndEventArgs>;
+    /**
+     * Triggers after selecting a treemap item.
+     *
+     * @event
+     */
+    @Event()
+    public itemSelected: EmitType<IItemSelectedEventArgs>;
+    /**
+     * Triggers after highlighting on the treemap item.
+     *
+     * @event
+     */
+    @Event()
+    public itemHighlight: EmitType<IItemHighlightEventArgs>;
+    /**
+     * Triggers on rendering of the tooltip in the treemap component.
+     *
+     * @event
+     */
+    @Event()
+    public tooltipRendering: EmitType<ITreeMapTooltipRenderEventArgs>;
+    /**
+     * Triggers after clicking an item in the treemap.
+     *
+     * @event
+     */
+    @Event()
+    public itemClick: EmitType<IItemClickEventArgs>;
+    /**
+     * Triggers after mouse hover on the treemap item.
+     *
+     * @event
+     */
+    @Event()
+    public itemMove: EmitType<IItemMoveEventArgs>;
+    /**
+     * Triggers after clicking on the treemap.
+     *
+     * @event
+     */
+    @Event()
+    public click: EmitType<IItemClickEventArgs>;
+    /**
+     * Triggers after double clicking on the treemap.
+     *
+     * @event
+     */
+    @Event()
+    public doubleClick: EmitType<IDoubleClickEventArgs>;
+    /**
+     * Triggers after right clicking on the treemap.
+     *
+     * @event
+     */
+    @Event()
+    public rightClick: EmitType<IMouseMoveEventArgs>;
+    /**
+     * Triggers after mouse hover on the treemap.
+     *
+     * @event
+     */
+    @Event()
+    public mouseMove: EmitType<IMouseMoveEventArgs>;
+    /**
+     * Triggers after resizing the treemap component.
+     *
+     * @event
+     */
+    @Event()
+    public resize: EmitType<IResizeEventArgs>;
+    /**
+     * Triggers before rendering each legend item in the treemap.
+     *
+     * @event
+     */
+    @Event()
+    public legendItemRendering: EmitType<ILegendItemRenderingEventArgs>;
+    /**
+     * Triggers before rendering the legend items in the treemap.
+     *
+     * @event
+     * @deprecated
+     */
+    @Event()
+    public legendRendering: EmitType<ILegendRenderingEventArgs>;
+
+    /**
+     * resize the treemap
+     */
+    private isResize: boolean = false;
+    /**
+     * svg renderer object.
+     *
+     * @private
+     */
+    public renderer: SvgRenderer;
+    /**
+     * treemap svg element object
+     *
+     * @private
+     */
+    public svgObject: Element;
+    /**
+     * Stores the exact size of treemap.
+     *
+     * @private
+     */
+    public availableSize: Size;
+    /**
+     * Internal use of internationalization instance.
+     *
+     * @private
+     */
+    public intl: Internationalization;
+    /**
+     * @private
+     * Stores the area bounds.
+     */
+    public areaRect: Rect;
+    /**
+     * Define the theme style for treemap components
+     *
+     * @private
+     */
+    public themeStyle: IThemeStyle;
+    /**
+     * @private
+     * Stores the legend bounds.
+     */
+    public totalRect: Rect;
+    /** @private */
+    public layout: LayoutPanel;
+    /** @private */
+    public orientation: string = 'Horizontal';
+    /** @private */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public drilledItems: any[] = [];
+    /** @private */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public drilledLegendItems: any;
+    /** @private */
+    public currentLevel: number;
+    /** @private */
+    public isHierarchicalData: boolean = false;
+    /** @private */
+    private resizeTo: number;
+    /** @private */
+    private mouseDown: boolean;
+    /** @private */
+    private drillMouseMove: boolean;
+    /** @private */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public doubleTapTimer: any;
+    /** @private */
+    public levelSelection: string[] = [];
+    /** @private */
+    public legendId: string[] = [];
+    /** @private */
+    public selectionId: string;
+
+    /**s
+     * Constructor for TreeMap component.
+     */
+    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
+    constructor(options?: TreeMapModel, element?: string | HTMLElement) {
+        super(options, element);
+    }
+
+    protected preRender(): void {
+        this.trigger(load, { treemap: this }, () => {
+            this.initPrivateVariable();
+            this.unWireEVents();
+            this.createSvg();
+            this.wireEVents();
+            this.setCulture();
+        });
+
+    }
+
+    protected render(): void {
+        this.renderElements();
+    }
+	
+	private renderElements(): void {
+        LevelsData.levelsData = null;
+        LevelsData.defaultLevelsData = null;
+        LevelsData.hierarchyData = null;
+        this.createSecondaryElement();
+        this.addTabIndex();
+        this.themeStyle = getThemeStyle(this.theme);
+        this.renderBorder();
+        this.renderTitle(this.titleSettings, 'title', null, null);
+        if (!isNullOrUndefined(LevelsData.levelsData)) {
+            LevelsData.defaultLevelsData = LevelsData.levelsData;
+        }
+        this.processDataManager();
+    }
+
+    private processDataManager(): void {
+        let dataModule: DataManager; let queryModule: Query; let ajaxModule: Ajax;
+        let localAjax: TreeMapAjax;
+        if (this.dataSource instanceof DataManager) {
+            dataModule = this.dataSource;
+            queryModule = this.query instanceof Query ? this.query : new Query();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const dataManager: Promise<any> = dataModule.executeQuery(queryModule);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            dataManager.then((e: any) => {
+                this.dataSource = e['result'];
+                this.renderTreeMapElements();
+            });
+        } else if (this.dataSource instanceof TreeMapAjax) {
+            localAjax = this.dataSource as TreeMapAjax;
+            ajaxModule = new Ajax(localAjax.dataOptions, localAjax.type, localAjax.async, localAjax.contentType);
+            ajaxModule.onSuccess = (args: string) => {
+                this.dataSource = JSON.parse('[' + args + ']')[0];
+                this.renderTreeMapElements();
+            };
+            ajaxModule.send(localAjax.sendData);
+        } else {
+            this.renderTreeMapElements();
+        }
+    }
+
+    private renderTreeMapElements(): void {
+
+        this.processingData();
+
+        if (this.treeMapLegendModule && this.legendSettings.visible) {
+
+            this.treeMapLegendModule.renderLegend();
+
+        }
+
+        this.layout.processLayoutPanel();
+
+        this.element.appendChild(this.svgObject);
+
+        this.elementChange();
+
+        this.trigger(loaded, {treemap: this, isResized: this.isResize});
+        this.isResize = false;
+
+        this.renderComplete();
+    }
+
+    protected createSvg(): void {
+        if (this.svgObject) {
+            while (this.svgObject.childNodes.length > 0) {
+                this.svgObject.removeChild(this.svgObject.firstChild);
+            }
+            if (!this.svgObject.hasChildNodes() && this.svgObject.parentNode) {
+                remove(this.svgObject);
+            }
+        }
+        this.clearTemplate();
+        const containerWidth: number = this.element.clientWidth;
+        const containerHeight: number = this.element.clientHeight;
+        this.availableSize = new Size(
+            stringToNumber(this.width, containerWidth) || containerWidth || 600,
+            stringToNumber(this.height, containerHeight) || containerHeight || 450
+        );
+        this.svgObject = this.renderer.createSvg({
+            id: this.element.id + '_svg',
+            width: this.availableSize.width,
+            height: this.availableSize.height
+        });
+    }
+
+
+    /**
+     * To initilize the private varibales of treemap.
+     *
+     * @returns {void}
+     */
+    private initPrivateVariable(): void {
+        if (this.element.id === '') {
+            const collection: number = document.getElementsByClassName('e-treemap').length;
+            this.element.id = 'treemap_control_' + collection;
+        }
+        this.renderer = new SvgRenderer(this.element.id);
+
+        this.layout = new LayoutPanel(this);
+
+    }
+
+    private createSecondaryElement(): void {
+        const secondaryEle: Element = document.getElementById(this.element.id + '_Secondary_Element');
+        if (secondaryEle && secondaryEle.childElementCount > 0) {
+            secondaryEle.parentNode.removeChild(secondaryEle);
+        }
+        if (isNullOrUndefined(document.getElementById(this.element.id + '_Secondary_Element'))) {
+            const secondaryElement: Element = createElement('div', {
+                id: this.element.id + '_Secondary_Element',
+                styles: 'position: absolute;z-index:1;'
+            });
+            this.element.appendChild(secondaryElement);
+        }
+    }
+
+    private elementChange(): void {
+        if (this.treeMapLegendModule && this.legendSettings.visible && this.treeMapLegendModule.legendGroup && this.layout.layoutGroup
+            && !isNullOrUndefined(this.svgObject) && !isNullOrUndefined(document.getElementById(this.layout.layoutGroup.id))
+            && !isNullOrUndefined(document.getElementById(this.treeMapLegendModule.legendGroup.id))) {
+            this.svgObject.insertBefore(this.layout.layoutGroup, this.treeMapLegendModule.legendGroup);
+        }
+    }
+
+    /**
+     * @private
+     * Render the treemap border
+     *
+     * @returns {void}
+     */
+    private renderBorder(): void {
+        const width: number = this.border.width;
+        const borderElement: Element = this.svgObject.querySelector('#' + this.element.id + '_TreeMap_Border');
+        if ((this.border.width > 0 || (this.background || this.themeStyle.backgroundColor)) && isNullOrUndefined(borderElement)) {
+            const borderRect: RectOption = new RectOption(
+                this.element.id + '_TreeMap_Border', this.background || this.themeStyle.backgroundColor, this.border, 1,
+                new Rect(width / 2, width / 2, this.availableSize.width - width, this.availableSize.height - width));
+            this.svgObject.appendChild(this.renderer.drawRectangle(borderRect) as SVGRectElement);
+        } else if (borderElement) {
+            borderElement.setAttribute('fill', this.background || this.themeStyle.backgroundColor);
+        }
+    }
+
+    private renderTitle(title: TitleSettingsModel, type: string, bounds: Rect, groupEle: Element): void {
+        const style: FontModel = title.textStyle;
+        let height: number; const titlePadding: number = 10;
+        const width: number = (this.availableSize.width - this.margin.right - this.margin.left);
+        title.textStyle.fontFamily = this.themeStyle.fontFamily || title.textStyle.fontFamily;
+        title.textStyle.size = this.themeStyle.fontSize || title.textStyle.size;
+        if (title.text) {
+            if (isNullOrUndefined(groupEle)) {
+                groupEle = this.renderer.createGroup({ id: this.element.id + '_Title_Group' });
+            }
+            const trimmedTitle: string = textTrim(width, title.text, style);
+            const elementSize: Size = measureText(trimmedTitle, style);
+            const rect: Rect = (isNullOrUndefined(bounds)) ? new Rect(
+                this.margin.left, this.margin.top, this.availableSize.width, this.availableSize.height) : bounds;
+            const location: Location = findPosition(rect, title.alignment, elementSize, type);
+            const options: TextOption = new TextOption(
+                this.element.id + '_TreeMap_' + type, location.x, location.y, 'start', trimmedTitle
+            );
+            const titleBounds: Rect = new Rect(location.x, location.y, elementSize.width, elementSize.height);
+            const element: Element = renderTextElement(
+                options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor),
+                groupEle
+            );
+            element.setAttribute('aria-label', title.description || title.text);
+            element.setAttribute('tabindex', (this.tabIndex + (type === 'title' ? 1 : 2)).toString());
+            if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
+                height = (this.availableSize.height - titleBounds.y - titlePadding - this.margin.bottom);
+                this.areaRect = new Rect(this.margin.left, titleBounds.y + titlePadding, width, height);
+            }
+            if (type !== 'subtitle' && title.subtitleSettings.text) {
+                this.renderTitle(title.subtitleSettings, 'subtitle', titleBounds, groupEle);
+            } else {
+                this.svgObject.appendChild(groupEle);
+            }
+        } else {
+            height = (this.availableSize.height - this.margin.top - this.margin.bottom);
+            this.areaRect = new Rect(this.margin.left, this.margin.top, width, height);
+        }
+    }
+
+
+
+    protected processingData(): void {
+        let path: string;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.dataSource = this.dataSource as any[];
+        if (!isNullOrUndefined(this.dataSource) && this.dataSource.length > 0 && this.weightValuePath) {
+            LevelsData.levelsData = [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.dataSource.map((data: any) => {
+                data[this.weightValuePath] = (data[this.weightValuePath]) ? (data[this.weightValuePath] as string).toString() :
+                    data[this.weightValuePath];
+            });
+            this.leafItemSettings.labelPath = this.leafItemSettings.labelPath || this.weightValuePath;
+            this.checkIsHierarchicalData();
+            if (this.levels.length === 0) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const data: any = {};
+                data['level'] = 0;
+                path = this.leafItemSettings.labelPath;
+                data[path] = [];
+                for (let i: number = 0; i < this.dataSource.length; i++) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const child: any[] = findChildren(this.dataSource[i])['values'];
+                    if (this.isHierarchicalData && child && child.length > 0) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        child.forEach((currentData: any, dataIndex: number) => {
+                            if (currentData[path]) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                (<any[]>data[path]).push({
+                                    groupIndex: 0, name: currentData[path], levelOrderName: (currentData[path] as string).toString(),
+                                    data: currentData, weight: currentData[this.weightValuePath]
+                                });
+                            }
+                        });
+                    } else {
+                        if (this.dataSource[i][path]) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            (<any[]>data[path]).push({
+                                groupIndex: 0, name: this.dataSource[i][path], levelOrderName: (
+                                    this.dataSource[i][path] as string).toString(), data: this.dataSource[i],
+                                weight: this.dataSource[i][this.weightValuePath]
+                            });
+                        }
+                    }
+                }
+                LevelsData.levelsData.push(data);
+            } else {
+                if (this.isHierarchicalData) {
+                    LevelsData.hierarchyData = [];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    LevelsData.hierarchyData = extend([], this.dataSource, LevelsData.hierarchyData, true) as any[];
+                    for (let i: number = 0; i < LevelsData.hierarchyData.length; i++) {
+                        this.processHierarchicalData(LevelsData.hierarchyData[i], i);
+                    }
+                    LevelsData.levelsData = LevelsData.hierarchyData;
+                } else {
+                    this.processFlatJsonData();
+                    if (LevelsData.levelsData.length > 1) {
+                        this.reOrderLevelData(LevelsData.levelsData.length - 1);
+                    }
+                }
+                path = this.levels[0].groupPath;
+            }
+            if (!this.isHierarchicalData) {
+                this.findTotalWeight(LevelsData.levelsData[0][path], 'Parent');
+            }
+        }
+    }
+
+    private checkIsHierarchicalData(): void {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let child: any[]; this.dataSource = this.dataSource as any[];
+        for (let i: number = 0; i < this.dataSource.length; i++) {
+            child = findChildren(this.dataSource[i])['values'];
+            if (child && child.length) {
+                this.isHierarchicalData = true;
+                break;
+            } else if (i === this.dataSource.length - 1) {
+                this.isHierarchicalData = false;
+            }
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private processHierarchicalData(data: any, dataCount: number): void {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let childData: any[]; const levelData: any[] = [];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let newData: any = {};
+        let levelIndex: number;
+        const path: string = this.leafItemSettings.labelPath ? this.leafItemSettings.labelPath : this.weightValuePath;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const currentData: any = {};
+        let level: LevelSettingsModel; let key: string;
+        newData = findChildren(data);
+        childData = newData ? newData['values'] : null;
+        if (childData && childData.length > 0) {
+            key = newData['key'];
+            for (let i: number = 0; i < this.levels.length; i++) {
+                if (key === this.levels[i].groupPath) {
+                    level = this.levels[i];
+                    levelIndex = i;
+                }
+            }
+            for (let j: number = 0; j < childData.length; j++) {
+                childData[j]['name'] = childData[j][path];
+                childData[j]['levelOrderName'] = (levelIndex === 0 ? childData[j]['name'] :
+                    data['levelOrderName'] + '#' + childData[j]['name']) + '';
+                const childItemLevel: string = childData[j]['levelOrderName']; let childLevel: number;
+                if (childItemLevel.search('#') > 0) {
+                    childLevel = childItemLevel.split('#').length - 1;
+                }
+                childData[j]['groupIndex'] = isNullOrUndefined(levelIndex) ? childLevel === this.levels.length
+                    ? this.levels.length : childLevel : levelIndex;
+                if (levelIndex !== 0) {
+                    childData[j]['parent'] = data;
+                }
+                childData[j]['groupName'] = key;
+                childData[j]['data'] = childData[j];
+                childData[j]['isDrilled'] = false;
+                childData[j]['weight'] = childData[j][this.weightValuePath];
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            childData.forEach((currentData: any) => {
+                this.processHierarchicalData(currentData, dataCount);
+            });
+        }
+        if (dataCount === LevelsData.hierarchyData.length - 1) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let mainData: any[] = LevelsData.hierarchyData[0][this.levels[0].groupPath];
+            for (let k: number = 0; k < LevelsData.hierarchyData.length; k++) {
+                childData = findChildren(LevelsData.hierarchyData[k])['values'];
+                if (k !== 0 && childData) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    childData.forEach((currentData: any) => { mainData.push(currentData); });
+                    LevelsData.hierarchyData.splice(k, 1);
+                    k -= 1;
+                }
+            }
+            mainData = LevelsData.hierarchyData[0][this.levels[0].groupPath];
+            for (let l: number = 0; l < mainData.length; l++) {
+                newData[this.levels[0].groupPath] = mainData;
+                mainData[l]['parent'] = newData;
+            }
+        }
+    }
+    /* eslint-disable valid-jsdoc */
+    /**
+     * This method is used to perform the print functionality in treemap.
+     *
+     * @param id - Specifies the element to print the treemap.
+     */
+    public print(id?: string[] | string | Element): void {
+        if (this.allowPrint && this.printModule) {
+            this.printModule.print(id);
+        }
+    }
+    /**
+     * This method is used to perform the export functionality for the rendered treemap.
+     *
+     * @param type - Specifies the index of the axis.
+     * @param fileName - Specifies file name for exporting the rendered treemap.
+     * @param orientation - Specifies the orientation of the pdf document.
+     */
+    public export(type: ExportType, fileName: string, orientation?: PdfPageOrientation, allowDownload?: boolean): Promise<string> {
+        if (isNullOrUndefined(allowDownload)) {
+            allowDownload = true;
+        }
+        if (type === 'PDF' && this.allowPdfExport && this.pdfExportModule) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return new Promise((resolve: any, reject: any) => {
+                resolve(this.pdfExportModule.export(type, fileName, orientation, allowDownload));
+            });
+
+        } else if (this.allowImageExport && (type !== 'PDF') && this.imageExportModule) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return new Promise((resolve: any, reject: any) => {
+                resolve(this.imageExportModule.export(type, fileName, allowDownload));
+            });
+        }
+        return null;
+    }
+    private processFlatJsonData(): void {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.dataSource = this.dataSource as any[];
+        let groupPath: string; let childGroupPath: string;
+        const orderNames: string[] = []; const process: boolean = false;
+        for (let i: number = 0; i < this.levels.length + 1; i++) {
+            groupPath = this.levels[i] ? this.levels[i].groupPath : this.leafItemSettings.labelPath;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const level: any = {};
+            level['level'] = i;
+            level[groupPath] = [];
+            LevelsData.levelsData.push(level);
+            for (let j: number = 0; j < this.dataSource.length; j++) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const currentData: any = {}; let childName: string = '';
+                if (!isNullOrUndefined(groupPath)) {
+                    const name: string = this.dataSource[j][groupPath];
+                    if (i !== 0) {
+                        for (let k: number = 0; k <= i; k++) {
+                            const childGroupPath: string = this.levels[k] ? this.levels[k].groupPath : groupPath;
+                            childName += (this.dataSource[j][childGroupPath]) + ((k === i) ? '' : '#');
+                        }
+                    }
+                    if (!(orderNames.length > 0 ? orderNames.indexOf(childName ?
+                        childName : name) !== -1 : false)) {
+                        currentData['name'] = name;
+                        currentData['levelOrderName'] = ((childName) ? childName : name) + '';
+                        currentData['groupIndex'] = i;
+                        currentData['isDrilled'] = false;
+                        currentData['groupName'] = groupPath;
+                        currentData['data'] = this.dataSource[j];
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        (<any[]>LevelsData.levelsData[LevelsData.levelsData.length - 1][groupPath]).push(currentData);
+                        orderNames.push((childName) ? childName : name);
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * This method orders the treemap level data.
+     *
+     * @param start - Specifies the start value of the treemap level.
+     */
+    public reOrderLevelData(start: number): void {
+        let currentName: string;
+        const currentPath: string = this.levels[start] ? this.levels[start].groupPath : this.leafItemSettings.labelPath;
+        const prevPath: string = this.levels[start - 1].groupPath;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const currentData: any[] = LevelsData.levelsData[start][currentPath] as any[];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const previousData: any[] = LevelsData.levelsData[start - 1][prevPath] as any[];
+        for (let i: number = 0; i < currentData.length; i++) {
+            currentName = currentData[i]['levelOrderName'] as string;
+            for (let j: number = 0; j < previousData.length; j++) {
+                previousData[j][currentPath] = isNullOrUndefined(previousData[j][currentPath]) ? [] : previousData[j][currentPath];
+                if (this.IsChildHierarchy(currentName.split('#'), (previousData[j]['levelOrderName'] as string).split('#'))) {
+                    if (isNullOrUndefined(currentData[i]['parent'])) {
+                        currentData[i]['parent'] = previousData[j];
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    (<any[]>previousData[j][currentPath]).push(currentData[i]);
+                    break;
+                }
+            }
+        }
+        this.findTotalWeight(LevelsData.levelsData[LevelsData.levelsData.length - 1][currentPath], 'Child');
+        LevelsData.levelsData.splice(start, 1);
+        if ((start - 1) > 0) {
+            this.reOrderLevelData(start - 1);
+        }
+    }
+
+    private IsChildHierarchy (current: string[], previous: string[]): boolean {
+        let isChild: boolean = false;
+        for (let i: number = 0; i < previous.length; i++)
+        {
+            if (current.length < i || previous[i] !== current[i])
+            {
+                return false;
+            }
+            else
+            {
+                isChild = true;
+            }
+        }
+        return isChild;
+    }
+
+    /**
+     * This method finds the weight value of the treemap level.
+     *
+     * @param processData - Specifies the treemap data.
+     * @param type - Specifies the type of the data.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public findTotalWeight(processData: any[], type: string): void {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let totalWeight: number; const childData: any[] = [];
+        let levelName: string; const start: number = 0; let split: string[];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let groupName: string; const groupObj: any = {};
+        for (let i: number = 0; i < processData.length; i++) {
+            totalWeight = 0;
+            groupName = processData[i]['groupName'];
+            split = (processData[i]['levelOrderName'] as string).split('#');
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (<any[]>this.dataSource).forEach((data: any) => {
+                if (isContainsData(split, processData[i]['levelOrderName'], data, this)) {
+                    totalWeight += parseFloat(data[this.weightValuePath]);
+                }
+            });
+            if (type === 'Parent') {
+                groupObj[groupName] = processData;
+                processData[i]['parent'] = groupObj;
+            }
+            processData[i]['weight'] = totalWeight;
+        }
+    }
+
+    /**
+     * To unbind event handlers for treemap.
+     *
+     * @returns {void}
+     */
+    private unWireEVents(): void {
+        EventHandler.remove(this.element, 'click', this.clickOnTreeMap);
+        EventHandler.remove(this.element, 'dblclick', this.doubleClickOnTreeMap);
+        EventHandler.remove(this.element, 'contextmenu', this.rightClickOnTreeMap);
+        EventHandler.remove(this.element, Browser.touchStartEvent, this.mouseDownOnTreeMap);
+        EventHandler.remove(this.element, Browser.touchMoveEvent, this.mouseMoveOnTreeMap);
+        EventHandler.remove(this.element, Browser.touchEndEvent, this.mouseEndOnTreeMap);
+        EventHandler.remove(this.element, 'pointerleave mouseleave', this.mouseLeaveOnTreeMap);
+        window.removeEventListener('resize', this.resizeOnTreeMap);
+    }
+
+    /**
+     * To bind event handlers for treemap.
+     *
+     * @returns {void}
+     */
+    private wireEVents(): void {
+        EventHandler.add(this.element, 'click', this.clickOnTreeMap, this);
+        EventHandler.add(this.element, 'dblclick', this.doubleClickOnTreeMap, this);
+        EventHandler.add(this.element, 'contextmenu', this.rightClickOnTreeMap, this);
+        EventHandler.add(this.element, Browser.touchStartEvent, this.mouseDownOnTreeMap, this);
+        EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMoveOnTreeMap, this);
+        EventHandler.add(this.element, Browser.touchEndEvent, this.mouseEndOnTreeMap, this);
+        EventHandler.add(this.element, 'pointerleave mouseleave', this.mouseLeaveOnTreeMap, this);
+        window.addEventListener('resize', this.resizeOnTreeMap.bind(this));
+    }
+
+    /**
+     * Method to set culture for maps
+     *
+     * @returns {void}
+     */
+    private setCulture(): void {
+        this.intl = new Internationalization();
+    }
+
+    /**
+     * To add tab index for treemap element
+     *
+     * @returns {void}
+     */
+    private addTabIndex(): void {
+        this.element.setAttribute('aria-label', this.description || 'TreeMap Element');
+        this.element.setAttribute('tabindex', this.tabIndex.toString());
+    }
+
+    /**
+     * This method handles the window resize event on treemap.
+     *
+     * @param e - Specifies the pointer event.
+     */
+    public resizeOnTreeMap(e: Event): void {
+        this.isResize = true;
+        let args: IResizeEventArgs = {
+            name: resize,
+            cancel: false,
+            previousSize: this.availableSize,
+            currentSize: new Size(0, 0),
+            treemap: this
+        };
+        if (this.resizeTo) {
+            clearTimeout(this.resizeTo);
+        }
+        if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-treemap')) {
+            this.resizeTo = setTimeout(
+                (): void => {
+                    this.unWireEVents();
+                    this.createSvg();
+                    this.refreshing = true;
+                    this.wireEVents();
+                    args.currentSize = this.availableSize;
+                    this.trigger(resize, args, (observedArgs: IResizeEventArgs) => {
+                        this.render();
+                    });
+                },
+                500);
+        }
+    }
+
+    /**
+     * This method handles the click event on the treemap.
+     *
+     * @param e - Specifies the mouse click event in the treemap.
+     */
+    public clickOnTreeMap(e: PointerEvent): void {
+        const targetEle: Element = <Element>e.target;
+        const targetId: string = targetEle.id;
+        let eventArgs: IItemClickEventArgs;
+        let itemIndex: number;
+        const labelText : string = targetEle.innerHTML;
+        const clickArgs: IClickEventArgs = { cancel: false, name: click, treemap: this, mouseEvent: e };
+        this.trigger(click, clickArgs);
+        if (targetId.indexOf('_Item_Index') > -1) {
+            e.preventDefault();
+            itemIndex = parseFloat(targetId.split('_Item_Index_')[1]);
+            eventArgs = {
+                cancel: false, name: itemClick, treemap: this, item: this.layout.renderItems[itemIndex], mouseEvent: e,
+                groupIndex: this.layout.renderItems[itemIndex]['groupIndex'], groupName: this.layout.renderItems[itemIndex]['name'],
+                text: labelText, contentItemTemplate : labelText
+            };
+            this.trigger(itemClick, eventArgs, (observedArgs: IItemClickEventArgs) => {
+                if (observedArgs.text !== labelText || observedArgs.contentItemTemplate !== labelText) {
+                    if (isNullOrUndefined(this.leafItemSettings.labelTemplate)) {
+                        observedArgs.text = textFormatter(observedArgs.text, observedArgs['item']['data'], observedArgs.treemap);
+                        targetEle.innerHTML = observedArgs.text;
+                    } else {
+                        setItemTemplateContent(targetId, targetEle, observedArgs.contentItemTemplate);
+                    }
+                }
+            });
+        }
+        const end: number = new Date().getMilliseconds();
+        let doubleTapTimer1: number;
+        if (!isNullOrUndefined(this.doubleClick)) {
+            if (!isNullOrUndefined(doubleTapTimer1) && end - doubleTapTimer1 < 500) {
+                this.doubleClickOnTreeMap(e);
+            }
+            doubleTapTimer1 = end;
+        }
+
+    }
+
+    /**
+     * This method handles the double click event in the treemap.
+     *
+     * @param e - Specifies the pointer event of mouse click.
+     */
+    public doubleClickOnTreeMap(e: PointerEvent): void {
+        const doubleClickArgs: IDoubleClickEventArgs = { cancel: false, name: doubleClick, treemap: this, mouseEvent: e };
+        this.trigger(doubleClick, doubleClickArgs);
+        //this.notify('dblclick', e);
+    }
+
+    /**
+     * This method handles the right click event in the treemap.
+     *
+     * @param e - Specifies the pointer event of mouse click.
+     */
+    public rightClickOnTreeMap(e: PointerEvent): void {
+        const rightClickArgs: IRightClickEventArgs = { cancel: false, name: rightClick, treemap: this, mouseEvent: e };
+        this.trigger(rightClick, rightClickArgs);
+    }
+
+
+    /**
+     * This method handles the mouse down event in the treemap.
+     *
+     * @param e - Specifies the pointer event of mouse click.
+     */
+    public mouseDownOnTreeMap(e: PointerEvent): void {
+        if ((<Element>e.target).id.indexOf('_Item_Index') > -1) {
+            this.mouseDown = true;
+        }
+        this.notify(Browser.touchStartEvent, e);
+    }
+
+    /**
+     * This method handles the mouse move event in the treemap.
+     *
+     * @param e - Specifies the pointer event of mouse click.
+     */
+    public mouseMoveOnTreeMap(e: PointerEvent): void {
+        const targetEle: Element = <Element>e.target;
+        const targetId: string = targetEle.id;
+        let eventArgs: IItemMoveEventArgs;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let item: any;
+        const moveArgs: IMouseMoveEventArgs = { cancel: false, name: mouseMove, treemap: this, mouseEvent: e };
+        this.trigger(mouseMove, moveArgs);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let childItems: any[];
+        if (targetId.indexOf('_Item_Index') > -1) {
+            item = this.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            childItems = findChildren(item)['values'] as any[];
+            this.element.style.cursor = (!item['isLeafItem'] && childItems && childItems.length > 0 && this.enableDrillDown) ?
+                'pointer' : 'auto';
+            eventArgs = { cancel: false, name: itemMove, treemap: this, item: item, mouseEvent: e };
+            this.trigger(itemMove, eventArgs);
+        }
+        this.notify(Browser.touchMoveEvent, e);
+    }
+
+    /**
+     * This method calculates the selected treemap levels.
+     *
+     * @param labelText - Specifies the label text.
+     * @param item - Specifies the treemap item.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public calculateSelectedTextLevels(labelText: string, item: any): any {
+        //to find the levels by clicking the particular text both for drillDownView as true / false.
+        let drillLevel: number; let k: string; let text: String;
+        const levelLabels: string = item['levelOrderName'];
+        const levelText: string[] = levelLabels.split('#');
+        for (k of Object.keys(levelText)) {
+            if (levelText[k] === labelText) {
+                drillLevel = parseInt(k, 10);
+                text = labelText;
+            }
+        }
+        return { drillLevel: drillLevel, currentLevelLabel: text, levelText: levelText };
+    }
+
+    /**
+     * This method calculates the previous level of child items in treemap.
+     *
+     * @param labelText - Specifies the label text in treemap
+     * @param drillLevelValues - Specifies the values of drill level.
+     * @param item - Specifies the treemap item.
+     * @param directLevel - Specifies the current level.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public calculatePreviousLevelChildItems(labelText: string, drillLevelValues: any, item: any, directLevel: boolean): boolean {
+        //By clicking any child items drilldown to the particular level.
+        //At the time store all the previous drilled level items in drilledItems
+        // This condition satisfies while drilldown View is set as false and the text contains '[+]'
+        let text: string; let p: number = 0; let levelItems: string; let text1: string;
+        const drillTextLevel: number = this.layout.renderItems[0]['levelOrderName'].split('#').length;
+        for (let h: number = 0; h < drillTextLevel; h++) {
+            text1 = h === 0 ? drillLevelValues['levelText'][h] : text1 + '#' + drillLevelValues['levelText'][h];
+        }
+        p = drillTextLevel > 1 ? drillTextLevel : p;
+        for (levelItems of Object['values'](this.layout.renderItems)) {
+            const drillLevelText: string = levelItems['levelOrderName'].split('#');
+            if (drillLevelText[0] === drillLevelValues['levelText'][0]) {
+                text = p === 0 ? isNullOrUndefined(text1) ? text1 : drillLevelValues['levelText'][p] :
+                    directLevel ? text1 : text1 + '#' + drillLevelValues['levelText'][p];
+                if (text === levelItems['levelOrderName']) {
+                    this.drilledItems.push({ name: levelItems['levelOrderName'], data: levelItems });
+                    p++;
+                    directLevel = true;
+                    if (p <= item['groupIndex']) {
+                        text = text + '#' + drillLevelValues['levelText'][p];
+                        text1 = text;
+                    }
+                }
+            }
+        }
+        return directLevel;
+    }
+
+    /**
+     * This method compares the selected labels with the drill down items.
+     *
+     * @param drillLevelValues - Specifies the values of drill level.
+     * @param item - Specifies the treemap item.
+     * @param i - Specifies the treemap item.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public compareSelectedLabelWithDrillDownItems(drillLevelValues: any, item: any, i: number): any {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let drillLevelChild: any; const newDrillItem: any = {};
+        const b: number = drillLevelValues['drillLevel'] + 1;
+        if (b === this.drilledItems[i]['data']['groupIndex']) {
+            drillLevelChild = this.drilledItems[i]['data']['parent'];
+            drillLevelChild['isDrilled'] = true;
+            newDrillItem[drillLevelChild[this.drilledItems[i]['data']['groupName']]]
+                = [drillLevelChild];
+            // to remove all the items after matched drilled items
+            this.drilledItems.splice(i, this.drilledItems.length);
+        } else if (drillLevelValues['drillLevel'] === (this.drilledItems.length - 1)
+            || drillLevelValues['drillLevel'] === item['groupIndex']) {
+            newDrillItem[item['groupName']] = [item];
+        }
+        return newDrillItem;
+    }
+
+    /**
+     * This method handles mouse end event in treemap.
+     *
+     * @param e - Specifies the pointer event of mouse.
+     */
+    public mouseEndOnTreeMap(e: PointerEvent): void {
+        const targetEle: Element = <Element>e.target; const targetId: string = targetEle.id; let totalRect: Rect;
+        let startEvent: IDrillStartEventArgs; let endEvent: IDrillEndEventArgs; let directLevel: boolean = false;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let index: number; let newDrillItem: any = {}; let item: any; const process: boolean = true;
+        const layoutID: string = this.element.id + '_TreeMap_' + this.layoutType + '_Layout'; let drillLevel: number;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const templateID: string = this.element.id + '_Label_Template_Group'; let drillLevelValues: any;
+        if (targetId.indexOf('_Item_Index') > -1 && this.enableDrillDown && !this.drillMouseMove) {
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+            index = parseFloat(targetId.split('_Item_Index_')[1]);
+            item = this.layout.renderItems[index];
+            const labelText: string = targetEle.innerHTML;
+            if (this.enableBreadcrumb) {
+                drillLevelValues = this.calculateSelectedTextLevels(labelText, item);
+                drillLevel = drillLevelValues['drillLevel'];
+                if (!this.drillDownView && labelText.search('[+]') !== -1) {
+                    directLevel = this.calculatePreviousLevelChildItems(labelText, drillLevelValues, item, directLevel);
+                }
+            }
+            if (this.levels.length !== 0 && !item['isLeafItem'] && findChildren(item)['values'] &&
+                findChildren(item)['values'].length > 0) {
+                if (this.drilledItems.length > 0) {
+                    item = directLevel ? this.drilledItems[this.drilledItems.length - 1]['data'] : item;
+                    for (let i: number = 0; i < this.drilledItems.length; i++) {
+                        if (!isNullOrUndefined(drillLevel)) {  //Compare the selected text level with drilled items
+                            const drillLength: number = this.drilledItems.length;
+                            newDrillItem = this.compareSelectedLabelWithDrillDownItems(drillLevelValues, item, i);
+                            if (drillLength !== this.drilledItems.length) {
+                                i -= 1; break;
+                            }
+                        } //when clicking the levels drill back to the previous level process takes place
+                        if (item['levelOrderName'] === this.drilledItems[i]['name'] && !directLevel && isNullOrUndefined(drillLevel)) {
+                            if (item['groupIndex'] === 0 && item['parent'][item['groupName']] instanceof Array) {
+                                item['isDrilled'] = !(item['isDrilled']);
+                                if (!item['isDrilled']) {
+                                    newDrillItem = item['parent'];
+                                } else {
+                                    newDrillItem[item['groupName']] = [item];
+                                }
+                            } else {
+                                item['isDrilled'] = false; item['parent']['isDrilled'] = true; item = item['parent'];
+                                newDrillItem[item['groupName']] = [item];
+                            }
+                            this.drilledItems.splice(i, 1);
+                            i -= 1; break;
+                        } else if (i === this.drilledItems.length - 1 && isNullOrUndefined(drillLevel)) {
+                            item['isDrilled'] = true; // click the items move to next level.
+                            newDrillItem[item['groupName']] = [item];
+                        }
+                    }
+                } else {
+                    item['isDrilled'] = true;
+                    newDrillItem[item['groupName']] = [item];
+                }
+                startEvent = {
+                    cancel: false, name: drillStart, treemap: this,
+                    element: targetEle, groupIndex: this.enableBreadcrumb &&
+                    this.drilledItems.length !== 0 && !isNullOrUndefined(drillLevel) ?
+                        this.drilledItems[this.drilledItems.length - 1]['data']['groupIndex'] : item['groupIndex'],
+                    groupName: this.enableBreadcrumb && this.drilledItems.length !== 0 && !isNullOrUndefined(drillLevel) ?
+                        this.drilledItems[this.drilledItems.length - 1]['data']['name'] : item['name'],
+                    rightClick: e.which === 3 ? true : false, childItems: null,  item: newDrillItem
+                };
+                this.trigger(drillStart, startEvent, (observedArgs: IDrillStartEventArgs) => {
+                    this.currentLevel = item['isDrilled'] && isNullOrUndefined(drillLevel) ? item['groupIndex'] :
+                        (!isNullOrUndefined(drillLevel) && this.enableBreadcrumb && item['isDrilled']) ? drillLevel : null;
+                    if (!observedArgs.cancel) {
+                        if (document.getElementById(layoutID)) {
+                            const layerElementId: HTMLElement = document.getElementById(layoutID);
+                            layerElementId.parentNode.removeChild(layerElementId);
+                        }
+                        totalRect = extend({}, this.areaRect, totalRect, true) as Rect;
+                        if (this.legendSettings.visible && !isNullOrUndefined(this.treeMapLegendModule)) {
+                            if (!isNullOrUndefined(newDrillItem)) {
+                                this.treeMapLegendModule.legendGroup.textContent = ''; this.treeMapLegendModule.legendGroup = null;
+                                this.treeMapLegendModule.widthIncrement = 0; this.treeMapLegendModule.heightIncrement = 0;
+                                if (this.enableBreadcrumb && !isNullOrUndefined(drillLevel)) {
+                                    this.drilledLegendItems = {
+                                        name: this.drilledItems[this.drilledItems.length - 1]['data']['levelOrderName'],
+                                        data: this.drilledItems[this.drilledItems.length - 1]['data']
+                                    };
+                                } else {
+                                    this.drilledLegendItems = { name: item['levelOrderName'], data: item };
+                                }
+                                this.treeMapLegendModule.renderLegend();
+                            }
+                            totalRect = !isNullOrUndefined(this.totalRect) ? this.totalRect : totalRect;
+                        }
+                        if (document.getElementById(templateID)) {
+                            const drillElementId: HTMLElement = document.getElementById(templateID);
+                            drillElementId.parentNode.removeChild(drillElementId);
+                        }
+                        if (!isNullOrUndefined(observedArgs.childItems) && !observedArgs.cancel) {
+                            this.layout.onDemandProcess(observedArgs.childItems);
+                        } else {
+                            this.layout.calculateLayoutItems(newDrillItem, totalRect);
+                            this.layout.renderLayoutItems(newDrillItem);
+                        }
+                    }
+                });
+                endEvent = { cancel: false, name: drillEnd, treemap: this, renderItems: this.layout.renderItems };
+                this.trigger(drillEnd, endEvent);
+                if (process) {
+                    if (!directLevel && isNullOrUndefined(drillLevel)) {
+                        this.drilledItems.push({ name: item['levelOrderName'], data: item });
+                    }
+                }
+            }
+        }
+        this.mouseDown = false;
+        this.notify(Browser.touchEndEvent, e);
+    }
+
+    /**
+     * This method handles mouse leave event in treemap.
+     *
+     * @param e - Specifies the pointer event of mouse.
+     */
+    public mouseLeaveOnTreeMap(e: PointerEvent): void {
+        if (this.treeMapTooltipModule) {
+            this.treeMapTooltipModule.removeTooltip();
+        }
+        if (this.treeMapLegendModule) {
+            this.treeMapLegendModule.removeInteractivePointer();
+        }
+        removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', this);
+        if (this.treeMapHighlightModule) {
+            removeShape(this.treeMapHighlightModule.shapeHighlightCollection, 'highlight');
+            this.treeMapHighlightModule.highLightId = '';
+        }
+    }
+
+    /**
+     * This method is used to select or remove the selection of treemap item based on the provided selection settings.
+     */
+    public selectItem(levelOrder: string[], isSelected ?: boolean): void {
+        if (isNullOrUndefined(isSelected)) {
+            isSelected = true;
+        }
+        let levelOrderName: string = '';
+        for (let i: number = 0; i < levelOrder.length; i++) {
+            if (i !== levelOrder.length - 1) {
+                levelOrderName += levelOrder[i] + '#';
+            } else {
+                levelOrderName += levelOrder[i];
+            }
+        }
+        if (this.treeMapSelectionModule && this.selectionSettings.enable) {
+            this.treeMapSelectionModule.selectTreemapItem(levelOrderName, isSelected);
+        }
+    }
+
+
+    /**
+     * To provide the array of modules needed for maps rendering
+     *
+     * @returns {ModuleDeclaration[]} Returns the modules
+     * @private
+     */
+    public requiredModules(): ModuleDeclaration[] {
+        const modules: ModuleDeclaration[] = [];
+        if (this.tooltipSettings.visible) {
+            modules.push({
+                member: 'treeMapTooltip',
+                args: [this]
+            });
+        }
+        if (this.highlightSettings.enable) {
+            modules.push({
+                member: 'treeMapHighlight',
+                args: [this]
+            });
+        }
+        if (this.selectionSettings.enable) {
+            modules.push({
+                member: 'treeMapSelection',
+                args: [this]
+            });
+        }
+        if (this.legendSettings.visible) {
+            modules.push({
+                member: 'treeMapLegend',
+                args: [this]
+            });
+        }
+        if (this.allowPrint) {
+            modules.push({
+                member: 'Print',
+                args: [this, Print]
+            });
+        }
+        if (this.allowImageExport) {
+            modules.push({
+                member: 'ImageExport',
+                args: [this, ImageExport]
+            });
+        }
+        if (this.allowPdfExport) {
+            modules.push({
+                member: 'PdfExport',
+                args: [this, PdfExport]
+            });
+        }
+        return modules;
+    }
+
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param {TreeMapModel} newProp - Specifies the new property
+     * @param {TreeMapModel} oldProp - Specifies the old property
+     * @returns {void}
+     * @private
+     */
+    public onPropertyChanged(newProp: TreeMapModel, oldProp: TreeMapModel): void {
+        let render: boolean = false;
+        for (const prop of Object.keys(newProp)) {
+            switch (prop) {
+            case 'background':
+                this.renderBorder();
+                break;
+            case 'height':
+            case 'width':
+            case 'layoutType':
+            case 'levels':
+            case 'drillDownView':
+            case 'renderDirection':
+            case 'leafItemSettings':
+            case 'legendSettings':
+            case 'dataSource':
+                render = true;
+                break;
+            }
+        }
+        if (render) {
+            this.createSvg();
+            this.renderElements();
+        }
+    }
+
+    /**
+     * Gets component name.
+     */
+    public getModuleName(): string {
+        return 'treemap';
+    }
+
+    /**
+     * This method is used to dispose the treemap component.
+     */
+    public destroy(): void {
+        this.unWireEVents();
+        this.drilledItems = [];
+        this.levelSelection = [];
+        this.legendId = [];
+        this.removeSvg();
+        super.destroy();
+    }
+
+    private removeSvg(): void {
+        removeElement(this.element.id + '_Secondary_Element');
+        if (this.svgObject) {
+            while (this.svgObject.childNodes.length > 0) {
+                this.svgObject.removeChild(this.svgObject.firstChild);
+            }
+            if (!this.svgObject.hasChildNodes() && this.svgObject.parentNode) {
+                remove(this.svgObject);
+            }
+        }
+    }
+
+    /**
+     * Get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Returns the string value.
+     * @private
+     */
+    public getPersistData(): string {
+        return '';
+    }
+}
+
+/**
+ * @private
+ */
+export class LevelsData {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public static levelsData : any[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public static defaultLevelsData : any[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    public static hierarchyData : any[];
+}