@syncfusion/ej2-treemap 31.2.2 → 31.2.12

package/dist/ts/treemap/user-interaction/tooltip.d.ts

@@ -1,42 +0,0 @@
-import { TreeMap } from '../treemap';
-/**
- * Render Tooltip
- */
-export declare class TreeMapTooltip {
-    private treemap;
-    private tooltipSettings;
-    private svgTooltip;
-    private isTouch;
-    private tooltipId;
-    private clearTimeout;
-    constructor(treeMap: TreeMap);
-    renderTooltip(e: PointerEvent): void;
-    private addTooltip;
-    mouseUpHandler(e: PointerEvent): void;
-    removeTooltip(): void;
-    /**
-     * To bind events for tooltip module
-     *
-     * @private
-     */
-    addEventListener(): void;
-    /**
-     * To unbind events for tooltip module
-     *
-     * @private
-     */
-    removeEventListener(): void;
-    /**
-     * Get module name.
-     *
-     * @returns {string} returns string
-     */
-    protected getModuleName(): string;
-    /**
-     * To destroy the tooltip.
-     *
-     * @returns {void}
-     * @private
-     */
-    destroy(): void;
-}

package/dist/ts/treemap/user-interaction/tooltip.ts

@@ -1,228 +0,0 @@
-import { TreeMap } from '../treemap';
-import { Tooltip, TooltipTheme } from '@syncfusion/ej2-svg-base';
-import { Browser, createElement, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
-import { Location, getMousePosition, textFormatter, formatValue, removeElement } from '../utils/helper';
-import { BorderModel, TooltipSettingsModel } from '../model/base-model';
-import { ITreeMapTooltipRenderEventArgs, ITreeMapTooltipArgs } from '../model/interface';
-import { tooltipRendering } from '../model/constants';
-/**
- * Render Tooltip
- */
-
-export class TreeMapTooltip {
-    private treemap: TreeMap;
-    private tooltipSettings: TooltipSettingsModel;
-    private svgTooltip: Tooltip;
-    private isTouch: boolean;
-    private tooltipId: string;
-    private clearTimeout: number;
-    constructor(treeMap: TreeMap) {
-        this.treemap = treeMap;
-        this.tooltipSettings = this.treemap.tooltipSettings;
-        this.tooltipId = this.treemap.element.id + '_TreeMapTooltip';
-        this.addEventListener();
-    }
-
-    public renderTooltip(e: PointerEvent): void {
-        let pageX: number; let pageY: number;
-        let target: Element; let touchArg: TouchEvent;
-        let tootipArgs: ITreeMapTooltipRenderEventArgs;
-        if (e.type.indexOf('touch') !== - 1) {
-            this.isTouch = true;
-            touchArg = <TouchEvent & PointerEvent>e;
-            pageX = touchArg.changedTouches[0].pageX;
-            pageY = touchArg.changedTouches[0].pageY;
-            target = <Element>touchArg.target;
-        } else {
-            this.isTouch = e.pointerType === 'touch';
-            pageX = e.pageX;
-            pageY = e.pageY;
-            target = <Element>e.target;
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let value: number; const targetId: string = target.id; let item: any = {}; let tooltipEle: HTMLElement;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let location: Location; let toolTipData: any = {};
-        let tooltipContent: string[] = []; let markerFill: string;
-        if (targetId.indexOf('_Item_Index') > -1 && e.type.indexOf('key') === - 1) {
-            item = this.treemap.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
-            if (!isNullOrUndefined(item)) {
-                value = item['weight'];
-                toolTipData = item['data'];
-                if (!isNullOrUndefined(item['options'])) {
-                    markerFill = item['options']['fill'];
-                }
-                if (this.treemap.enableRtl) {
-                    tooltipContent = [(!isNullOrUndefined(this.tooltipSettings.format) ?
-                        textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) : null)
-                        || formatValue(value, this.treemap) + ' : ' + this.treemap.weightValuePath.toString()];
-                } else {
-                    tooltipContent = [(!isNullOrUndefined(this.tooltipSettings.format) ?
-                        textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) : null)
-                        || this.treemap.weightValuePath.toString() + ' : ' + formatValue(value, this.treemap)];
-                }
-                if (document.getElementById(this.tooltipId)) {
-                    tooltipEle = document.getElementById(this.tooltipId);
-                } else {
-                    tooltipEle = createElement('div', {
-                        id: this.treemap.element.id + '_TreeMapTooltip',
-                        className: 'EJ2-TreeMap-Tooltip'
-                    });
-                    tooltipEle.style.cssText = 'position: absolute;pointer-events:none;';
-                    document.getElementById(this.treemap.element.id + '_Secondary_Element').appendChild(tooltipEle);
-                }
-                location = getMousePosition(pageX, pageY, this.treemap.svgObject);
-                location.y = (this.tooltipSettings.template) ? location.y + 10 : location.y;
-                this.tooltipSettings.textStyle.size = this.tooltipSettings.textStyle.size || this.treemap.themeStyle.tooltipFontSize;
-                this.tooltipSettings.textStyle.fontFamily = this.tooltipSettings.textStyle.fontFamily || this.treemap.themeStyle.fontFamily;
-                this.tooltipSettings.textStyle.fontStyle = !isNullOrUndefined(this.tooltipSettings.textStyle.fontStyle) ? this.tooltipSettings.textStyle.fontStyle : 'Normal';
-                this.tooltipSettings.textStyle.fontWeight = this.tooltipSettings.textStyle.fontWeight || this.treemap.themeStyle.fontWeight;
-                this.tooltipSettings.textStyle.color = this.tooltipSettings.textStyle.color || this.treemap.themeStyle.tooltipFontColor;
-                // eslint-disable-next-line max-len
-                this.tooltipSettings.textStyle.opacity = this.tooltipSettings.textStyle.opacity || this.treemap.themeStyle.tooltipTextOpacity;
-                const border: BorderModel = {
-                    width: this.tooltipSettings.border.width || this.treemap.themeStyle.tooltipBorderWidth || 0,
-                    color: this.tooltipSettings.border.color || this.treemap.themeStyle.tooltipBorderColor || 'transparent'
-                };
-                if (this.treemap.enableHtmlSanitizer) {
-                    for (let a: number = 0; a < tooltipContent.length; a++) {
-                        tooltipContent[a as number] = SanitizeHtmlHelper.sanitize(tooltipContent[a as number]);
-                    }
-                }
-                tootipArgs = {
-                    cancel: false, name: tooltipRendering, item: item,
-                    options: {
-                        location: location, text: tooltipContent, data: toolTipData, border: border,
-                        textStyle: this.tooltipSettings.textStyle, template: this.tooltipSettings.template
-                    },
-                    treemap: this.treemap,
-                    element: target, eventArgs: e
-                };
-
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                this.treemap.trigger(tooltipRendering, tootipArgs, (args?: ITreeMapTooltipRenderEventArgs) => {
-                    this.addTooltip(tootipArgs, markerFill, tooltipEle);
-                });
-
-            }
-        } else {
-            this.removeTooltip();
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (this.treemap as any).clearTemplate();
-        }
-    }
-
-    private addTooltip(
-        tootipArgs: ITreeMapTooltipRenderEventArgs, markerFill: string, tooltipEle: HTMLElement, eventArgs?: ITreeMapTooltipArgs
-    ) : void {
-        let cancel : boolean;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let args : any;
-        if (!isNullOrUndefined(tootipArgs)) {
-            const {cancel : c, ...otherArgs} : ITreeMapTooltipRenderEventArgs = tootipArgs;
-            cancel = c;
-            args = otherArgs.options;
-        } else {
-            cancel = eventArgs.cancel;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            args = eventArgs as any;
-        }
-        if (!cancel) {
-            this.svgTooltip = new Tooltip({
-                theme: this.treemap.theme as TooltipTheme,
-                enable: true,
-                header: '',
-                data: args['data'],
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                template: args['template'] as any,
-                content: args['text'],
-                shapes: [],
-                location: args['location'],
-                palette: [markerFill],
-                areaBounds: this.treemap.areaRect,
-                textStyle: args['textStyle'],
-                fill: this.treemap.tooltipSettings.fill ? this.treemap.tooltipSettings.fill : this.treemap.themeStyle.tooltipFillColor,
-                border: args['border'],
-                enableShadow: true
-            });
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            if ((this.treemap as any).isVue || (this.treemap as any).isVue3) {
-                this.svgTooltip.controlInstance = this.treemap;
-            }
-            this.svgTooltip.opacity = this.treemap.themeStyle.tooltipFillOpacity || this.svgTooltip.opacity;
-            this.svgTooltip.appendTo(tooltipEle);
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (this.treemap as any).renderReactTemplates();
-        } else {
-            this.removeTooltip();
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (this.treemap as any).clearTemplate();
-        }
-    }
-
-    public mouseUpHandler(e: PointerEvent): void {
-        this.renderTooltip(e);
-        clearTimeout(this.clearTimeout);
-        this.clearTimeout = setTimeout(this.removeTooltip.bind(this), 2000);
-    }
-
-    public removeTooltip(): void {
-        if (document.getElementsByClassName('EJ2-TreeMap-Tooltip').length > 0) {
-            const tooltipElementId: Element = document.getElementsByClassName('EJ2-TreeMap-Tooltip')[0];
-            tooltipElementId.parentNode.removeChild(tooltipElementId);
-        }
-    }
-
-    // eslint-disable-next-line valid-jsdoc
-    /**
-     * To bind events for tooltip module
-     *
-     * @private
-     */
-    public addEventListener(): void {
-        if (this.treemap.isDestroyed) {
-            return;
-        }
-        this.treemap.on(Browser.touchMoveEvent, this.renderTooltip, this);
-        this.treemap.on(Browser.touchEndEvent, this.mouseUpHandler, this);
-    }
-    // eslint-disable-next-line valid-jsdoc
-    /**
-     * To unbind events for tooltip module
-     *
-     * @private
-     */
-    public removeEventListener(): void {
-        if (this.treemap.isDestroyed) {
-            return;
-        }
-        this.treemap.off(Browser.touchMoveEvent, this.renderTooltip);
-        this.treemap.off(Browser.touchEndEvent, this.mouseUpHandler);
-    }
-
-    /**
-     * Get module name.
-     *
-     * @returns {string} returns string
-     */
-    protected getModuleName(): string {
-        return 'treeMapTooltip';
-    }
-    /**
-     * To destroy the tooltip.
-     *
-     * @returns {void}
-     * @private
-     */
-    public destroy(): void {
-        if (!isNullOrUndefined(this.svgTooltip)) {
-            this.svgTooltip.destroy();
-            this.svgTooltip.controlInstance = null;
-            removeElement(this.treemap.element.id + '_TreeMapTooltip');
-        }
-        this.svgTooltip = null;
-        this.tooltipSettings = null;
-        this.removeEventListener();
-        this.treemap = null;
-    }
-}

package/dist/ts/treemap/utils/enum.d.ts

@@ -1,256 +0,0 @@
-/**
- * Defines the position of the label in treemap leaf node.
- */
-export declare type LabelPosition = 
-/** Specifies to show the position of the label based on the top and left of the treemap leaf nodes.  */
-'TopLeft' | 
-/** Specifies to show the position of the label based on the top and center of the treemap leaf nodes. */
-'TopCenter' | 
-/** Specifies to show the position of the label based on the top and right of the treemap leaf nodes. */
-'TopRight' | 
-/** Specifies to show the position of the label based on the center and left of the treemap leaf nodes. */
-'CenterLeft' | 
-/** Specifies to show the position of the label based on the center of the treemap leaf nodes. */
-'Center' | 
-/** Specifies to show the position of the label based on the center and right of the treemap leaf nodes. */
-'CenterRight' | 
-/** Specifies to show the position of the label based on the bottom and left of the treemap leaf nodes. */
-'BottomLeft' | 
-/** Specifies to show the position of the label based on the bottom and center of the treemap leaf nodes. */
-'BottomCenter' | 
-/** Specifies to show the position of the label based on the bottom and right of the treemap leaf nodes. */
-'BottomRight';
-/**
- * Specifies the layout rendering mode of the treemap.
- */
-export declare type LayoutMode = 
-/** This visualizes the treemap as the nested rectangles having size proportionate to weight value. */
-'Squarified' | 
-/** This visualizes the treemap as the horizontal rectangles having size proportionate to weight value. */
-'SliceAndDiceHorizontal' | 
-/** This visualizes the treemap as the vertical rectangles having size proportionate to weight value. */
-'SliceAndDiceVertical' | 
-/** This visualizes the treemap rectangles having size proportionate to weight value. This type automatically provides the orientation based on the size of the treemap. */
-'SliceAndDiceAuto';
-/**
- * Specifies the alignment of the elements in the treemap.
- */
-export declare type Alignment = 
-/** Defines the alignment is near the treemap with respect the element position. */
-'Near' | 
-/** Defines the alignment is at center of the treemap with respect the element position. */
-'Center' | 
-/** Defines the alignment is far from the treemap with respect the element position. */
-'Far';
-/**
- * Specifies the element which must be highlighted when mouse over is performed in treemap.
- */
-export declare type HighLightMode = 
-/** Highlights the treemap item when the mouse over is done on the treemap item. */
-'Item' | 
-/** Highlights the treemap item and all its children when the mouse over is done on the treemap item. */
-'Child' | 
-/** Highlights the treemap item and all its parent levels when the mouse over is done on the treemap item. */
-'Parent' | 
-/** Highlights all the related nodes such as child and parent when the mouse over is done on the treemap item. */
-'All';
-/**
- * Specifies the element which must be selected when click event is performed in treemap.
- */
-export declare type SelectionMode = 
-/** Selects the treemap item when the click operation is done on the treemap item. */
-'Item' | 
-/** Selects the treemap item and all its children when the click operation is done on the treemap item. */
-'Child' | 
-/** Selects the treemap item and all its parent levels when the click operation is done on the treemap item.. */
-'Parent' | 
-/** Selects all the related nodes such as child and parent when the click operation is done on the treemap item. */
-'All';
-/**
- * Specifies the export type for the treemap.
- */
-export declare type ExportType = 
-/** Specifies that the rendered treemap is to be exported in the PNG format. */
-'PNG' | 
-/** Specifies that the rendered treemap is to be exported in the JPEG format. */
-'JPEG' | 
-/** Specifies that the rendered treemap is to be exported in the SVG format. */
-'SVG' | 
-/** Specifies that the rendered treemap is to be exported in the PDF format. */
-'PDF';
-/**
- * Defines the action of the label to be placed within the defined margins.
- */
-export declare type LabelAlignment = 
-/** Specifies that the label will be trimmed if it exceeds the defined margins. */
-'Trim' | 
-/** Specifies that the label will be hidden if it exceeds the defined margins. */
-'Hide' | 
-/** Specifies that the label will be wrapped by word to fit within the defined margins. */
-'WrapByWord' | 
-/** Specifies to wrap the data label if exceed the defined margins. */
-'Wrap';
-/**
- * Defines the shape of legend item in the treemap.
- */
-export declare type LegendShape = 
-/** Defines the legend shape as circle. */
-'Circle' | 
-/** Defines the legend shape as rectangle. */
-'Rectangle' | 
-/** Defines the legend shape as triangle. */
-'Triangle' | 
-/** Defines the legend shape as diamond. */
-'Diamond' | 
-/** Defines the legend shape as cross. */
-'Cross' | 
-/** Defines the legend shape as star. */
-'Star' | 
-/** Defines the legend shape as horizontal line. */
-'HorizontalLine' | 
-/** Defines the legend shape as vertical line. */
-'VerticalLine' | 
-/** Defines the legend shape as pentagon. */
-'Pentagon' | 
-/** Defines the legend shape as inverted triangle. */
-'InvertedTriangle' | 
-/** Defines the legend shape as image. */
-'Image';
-/**
- * Defines the position of the legend in the treemap.
- */
-export declare type LegendPosition = 
-/** Specifies to place the legend at the top of the treemap. */
-'Top' | 
-/** Specifies to place the legend on the left of the treemap. */
-'Left' | 
-/** Specifies to place the legend at the bottom of the treemap. */
-'Bottom' | 
-/** Specifies to place the legend on the right of the treemap. */
-'Right' | 
-/** Specifies to place the legend based on given custom positions. */
-'Float' | 
-/** Specifies to place the legend in a automatic position based on width and height. */
-'Auto';
-/**
- * Defines the modes for rendering the legend.
- */
-export declare type LegendMode = 
-/** Sets the legend as fixed, and has the option to add different shapes showcasing legend items. */
-'Default' | 
-/** Set the legend as interactive, which is rectangular in shape with an indicator showcasing legend items. */
-'Interactive';
-/**
- * Specifies the orientation of the legend in the treemap.
- */
-export declare type LegendOrientation = 
-/** Defines the legend renders with default behavior. */
-'None' | 
-/** Defines the legend rendered with items placed horizontally. */
-'Horizontal' | 
-/** Defines the legend rendered with items placed vertically. */
-'Vertical';
-/**
- * Defines the action to perform when the labels intersect each other in the treemap.
- */
-export declare type LabelIntersectAction = 
-/** Specifies that no action will be taken when the label contents intersect. */
-'None' | 
-/** Specifies that the data label should be trimmed when it intersects. */
-'Trim' | 
-/** Specifies that the data label should be hidden when it intersects. */
-'Hide';
-/**
- * Defines the placement type of the label.
- */
-export declare type LabelPlacement = 
-/** Specifies the label placement as before. */
-'Before' | 
-/** Specifies the label placement as after */
-'After';
-/**
- * Defines the theme supported for treemap.
- */
-export declare type TreeMapTheme = 
-/** Render a treemap with Material theme. */
-'Material' | 
-/** Render a treemap with Fabric theme. */
-'Fabric' | 
-/** Render a treemap with HighContrast light theme. */
-'HighContrastLight' | 
-/** Render a treemap with Bootstrap theme. */
-'Bootstrap' | 
-/** Render a treemap with Material dark theme. */
-'MaterialDark' | 
-/** Render a treemap with Fabric dark theme. */
-'FabricDark' | 
-/** Render a treemap with HighContrast dark theme. */
-'HighContrast' | 
-/** Render a treemap with Bootstrap dark theme. */
-'BootstrapDark' | 
-/** Render a treemap with Bootstrap4 theme. */
-'Bootstrap4' | 
-/**  Render a treemap with Tailwind theme. */
-'Tailwind' | 
-/**  Render a treemap with TailwindDark theme. */
-'TailwindDark' | 
-/**  Render a treemap with Tailwind3 theme. */
-'Tailwind3' | 
-/**  Render a treemap with Tailwind3Dark theme. */
-'Tailwind3Dark' | 
-/** Render a treemap with Bootstrap5 theme. */
-'Bootstrap5' | 
-/**  Render a treemap with Bootstrap5 dark theme. */
-'Bootstrap5Dark' | 
-/** Render a treemap with Fluent theme. */
-'Fluent' | 
-/**  Render a treemap with Fluent dark theme. */
-'FluentDark' | 
-/** Render a treemap with Material3 theme. */
-'Material3' | 
-/** Render a treemap with Material3Dark theme. */
-'Material3Dark' | 
-/** Render a treemap with Fluent2 theme. */
-'Fluent2' | 
-/** Render a treemap with Fluent2 dark theme. */
-'Fluent2Dark' | 
-/** Render a treemap with Fluent2 high contrast theme. */
-'Fluent2HighContrast';
-/**
- * Defines the rendering directions to render the treemap items in the treemap.
- */
-export declare type RenderingMode = 
-/** Renders the treemap items from top right to bottom left direction */
-'TopRightBottomLeft' | 
-/** Renders the treemap items from bottom left to top right direction */
-'BottomLeftTopRight' | 
-/** Renders the treemap items from bottom right to top left direction */
-'BottomRightTopLeft' | 
-/** Renders the treemap items from top left to bottom right direction */
-'TopLeftBottomRight';
-/**
- * Defines the shape of the marker in the tooltip of the treemap.
- *
- * @private
- */
-export declare type MarkerShape = 
-/** Renders circle shape marker in the tooltip. */
-'Circle' | 
-/** Renders rectangle shape marker in the tooltip. */
-'Rectangle' | 
-/** Renders triangle shape marker in the tooltip. */
-'Triangle' | 
-/** Renders diamond shape marker in the tooltip. */
-'Diamond' | 
-/** Renders cross shape marker in the tooltip. */
-'Cross' | 
-/** Renders horizontal line shape marker in the tooltip. */
-'HorizontalLine' | 
-/** Renders vertical line shape marker in the tooltip. */
-'VerticalLine' | 
-/** Renders pentagon shape marker in the tooltip. */
-'Pentagon' | 
-/** Renders inverted triangle shape marker in the tooltip. */
-'InvertedTriangle' | 
-/** Renders image marker in the tooltip. */
-'Image';