@syncfusion/ej2-treemap 19.3.53 → 19.4.38

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

@@ -0,0 +1,199 @@
+/* eslint-disable @typescript-eslint/dot-notation */
+import { TreeMap } from '../treemap';
+import { Tooltip } from '@syncfusion/ej2-svg-base';
+import { Browser, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Location, getMousePosition, textFormatter, formatValue } from '../utils/helper';
+import { 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;
+    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
+    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 toolTipHeader: string; let toolTipData: any = {};
+        let tooltipContent: string[] = []; let markerFill: string;
+        if (targetId.indexOf('_Item_Index') > -1) {
+            item = this.treemap.layout.renderItems[parseFloat(targetId.split('_')[6])];
+            if (!isNullOrUndefined(item)) {
+                toolTipHeader = item['name'];
+                value = item['weight'];
+                toolTipData = item['data'];
+                markerFill = item['options']['fill'];
+                if (this.treemap.enableRtl) {
+                    tooltipContent = [textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) ||
+                        formatValue(value, this.treemap) + ' : ' + this.treemap.weightValuePath.toString()];
+                } else {
+                    tooltipContent = [textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) ||
+                        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',
+                        styles: '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.fontFamily = this.treemap.themeStyle.fontFamily;
+                this.tooltipSettings.textStyle.color = this.treemap.themeStyle.tooltipFontColor
+                    || this.tooltipSettings.textStyle.color;
+                this.tooltipSettings.textStyle.opacity = this.treemap.themeStyle.tooltipTextOpacity
+                    || this.tooltipSettings.textStyle.opacity;
+                tootipArgs = {
+                    cancel: false, name: tooltipRendering, item: item,
+                    options: {
+                        location: location, text: tooltipContent, data: toolTipData,
+                        textStyle: this.tooltipSettings.textStyle, template: this.tooltipSettings.template
+                    },
+                    treemap: this.treemap,
+                    element: target, eventArgs: e
+                };
+
+                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({
+                enable: true,
+                header: '',
+                data: args['data'],
+                template: args['template'],
+                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
+            });
+            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
+     */
+    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
+     */
+    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.
+     *
+     * @param {TreeMap} treeMap - Specifies the instance of the treemap
+     * @returns {void}
+     * @private
+     */
+    public destroy(treeMap: TreeMap): void {
+        /**
+         * Destroy method performed here
+         */
+        this.removeEventListener();
+    }
+}

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

@@ -0,0 +1,218 @@
+
+/**
+ * Defines the position of the label in treemap leaf node.
+ */
+export type LabelPosition =
+    /** To show the position of the label based on the top and left of the treemap leaf nodes.  */
+    'TopLeft' |
+    /** To show the position of the label based on the top and center of the treemap leaf nodes. */
+    'TopCenter' |
+    /** To show the position of the label based on the top and right of the treemap leaf nodes. */
+    'TopRight' |
+    /** To show the position of the label based on the center and left of the treemap leaf nodes. */
+    'CenterLeft' |
+    /** To show the position of the label based on the center of the treemap leaf nodes. */
+    'Center' |
+    /** To show the position of the label based on the center and right of the treemap leaf nodes. */
+    'CenterRight' |
+    /** To show the position of the label based on the bottom and left of the treemap leaf nodes. */
+    'BottomLeft' |
+    /** To show the position of the label based on the bottom and center of the treemap leaf nodes. */
+    'BottomCenter' |
+    /** 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 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 as the auto rectangles having size proportionate to weight value */
+    'SliceAndDiceAuto';
+
+/**
+ * Specifies the alignment of the elements in the treemap.
+ */
+export 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 type HighLightMode =
+    /** Highlights the treemap item when the mouse over is done on the treemap item. */
+    'Item' |
+    /** Highlights the treemap item and level when the mouse over is done on the treemap item. */
+    'Child' |
+    /** Highlights the treemap item and parent level when the mouse over is done on the treemap item. */
+    'Parent' |
+    /** Highlights all the related nodes 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 type SelectionMode =
+    /** Selects the treemap item when the click operation is done on the treemap item. */
+    'Item' |
+    /** Selects the treemap item and level when the click operation is done on the treemap item. */
+    'Child' |
+    /** Selects the treemap item and parent level when the click operation is done on the treemap item.. */
+    'Parent' |
+    /** Selects all the related nodes when the click operation is done on the treemap item. */
+    'All';
+/**
+ * Specifies the export type for the treemap
+ */
+export type ExportType =
+    /** Specifies the rendered treemap to be exported in the png format. */
+    'PNG' |
+    /** Specifies the rendered treemap to be exported in the jpeg format. */
+    'JPEG' |
+    /** Specifies the rendered treemap to be exported in the svg format. */
+    'SVG' |
+    /** Specifies the rendered treemap to be exported in the pdf format. */
+    'PDF';
+/**
+ * Defines the text to be placed within the defined margins.
+ */
+export type LabelAlignment =
+    /** Specifies that the data label will trim if exceeded the defined margins. */
+    'Trim' |
+    /** Specifies that the data label will hide if exceeded the defined margins. */
+    'Hide' |
+    /** Specifies the word to force all text to fit within the defined margins. */
+    'WrapByWord' |
+    /** Specifies to wrap the data label if exceed the defined margins. */
+    'Wrap';
+
+/**
+ * Defines the shape of legend in the treemap component.
+ */
+export 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 component.
+ */
+export 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 x and y positions. */
+    'Float' |
+    /** Specifies to place the legend based on width and height. */
+    'Auto';
+/**
+ * Defines the legend rendering modes. The modes are default and interactive modes.
+ */
+export type LegendMode =
+    /** Specifies the legend as static. */
+    'Default' |
+    /** Specifies the legend as interactive. */
+    'Interactive';
+/**
+ * Specifies the orientation of the legend in the treemap.
+ */
+export type LegendOrientation =
+    /** Defines the legend renders with default behavior. */
+    'None' |
+    /** Defines the legend renders with items places horizontally. */
+    'Horizontal' |
+    /** Defines the legend renders with items places vertically. */
+    'Vertical';
+/**
+ * Defines the label intersect action in treemap component.
+ */
+export type LabelIntersectAction =
+    /** Specifies that no action will be taken when the label contents intersect. */
+    'None' |
+    /** Specifies the data label to be trimmed when it intersects. */
+    'Trim' |
+    /** Specifies the data label to be hidden when it intersects. */
+    'Hide';
+
+/**
+ * Defines the placement type of the label.
+ */
+export type LabelPlacement =
+    /** Specifies the label placement as before. */
+    'Before' |
+    /** Specifies the label placement as after */
+    'After';
+
+/**
+ * Defines the theme supported for treemap.
+ */
+export 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 Bootstrap5 theme. */
+    'Bootstrap5' |
+    /**  Render a treemap with Bootstrap5 dark theme. */
+    'Bootstrap5Dark';
+/**
+ * Defines the rendering directions to render the treemap items in the treemap.
+ */
+export 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';