@syncfusion/ej2-treemap 20.1.59 → 20.2.36

package/dist/ts/treemap/model/print.ts

@@ -0,0 +1,93 @@
+import { print as printWindow, createElement } from '@syncfusion/ej2-base';
+import { TreeMap} from '../../index';
+import { getElement } from '../utils/helper';
+import { IPrintEventArgs } from '../model/interface';
+import { beforePrint } from '../model/constants';
+
+/**
+ * Print module handles the print functionality for treemap.
+ *
+ * @hidden
+ */
+export class Print {
+    private control: TreeMap ;
+    private printWindow: Window;
+
+    /**
+     * Constructor for Maps
+     *
+     * @param {TreeMap} control - Specifies the treemap instance.
+     */
+    // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
+    constructor(control: TreeMap) {
+        this.control = control;
+    }
+
+    /**
+     * This method is used to perform the print functionality in treemap.
+     *
+     * @param { string[] | string | Element} elements - Specifies the element.
+     * @returns {void}
+     * @private
+     */
+    public print(elements?: string[] | string | Element): void {
+        this.printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
+        this.printWindow.moveTo(0, 0);
+        this.printWindow.resizeTo(screen.availWidth, screen.availHeight);
+        const argsData: IPrintEventArgs = {
+            cancel: false, htmlContent: this.getHTMLContent(elements), name: beforePrint
+        };
+        this.control.trigger(beforePrint, argsData, () => {
+            if (!argsData.cancel) {
+                printWindow(argsData.htmlContent, this.printWindow);
+            }
+        });
+    }
+
+    /**
+     * To get the html string of the Maps
+     *
+     * @param {string[] | string | Element} elements - Specifies the element
+     * @returns {Element} - Returns the element
+     * @private
+     */
+    public getHTMLContent(elements?: string[] | string | Element): Element {
+        const div: Element = createElement('div');
+        if (elements) {
+            if (elements instanceof Array) {
+                elements.forEach((value: string) => {
+                    div.appendChild(getElement(value).cloneNode(true) as Element);
+                });
+            } else if (elements instanceof Element) {
+                div.appendChild(elements.cloneNode(true) as Element);
+            } else {
+                div.appendChild(getElement(elements).cloneNode(true) as Element);
+            }
+        } else {
+            div.appendChild(this.control.element.cloneNode(true) as Element);
+        }
+        return div;
+    }
+
+    /**
+     * Get module name.
+     *
+     * @returns {string} - Returns the module name.
+     */
+    protected getModuleName(): string {
+        // Returns te module name
+        return 'Print';
+    }
+    /**
+     * To destroy the legend.
+     *
+     * @param {TreeMap} treemap - Specifies the treemap instance
+     * @returns {void}
+     * @private
+     */
+    public destroy(treemap: TreeMap): void {
+        /**
+         * Destroy method performed here
+         */
+    }
+}

package/dist/ts/treemap/model/theme.ts

@@ -0,0 +1,202 @@
+/**
+ * Maps Themes doc
+ */
+
+import { IFontMapping, IThemeStyle } from '../model/interface';
+import { TreeMapTheme } from '../utils/enum';
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace Theme {
+    /**
+     * @private
+     */
+    export const mapsTitleFont: IFontMapping = {
+        size: '14px',
+        fontWeight: 'Medium',
+        color: '#424242',
+        fontStyle: 'Medium',
+        fontFamily: 'Roboto, Noto, Sans-serif'
+    };
+}
+
+/**
+ * To get the theme style based on treemap theme.
+ *
+ * @param {TreeMapTheme} theme Specifies the theme of the treemap control.
+ * @returns {IThemeStyle} Returns the theme.
+ * @private
+ */
+export function getThemeStyle(theme: TreeMapTheme): IThemeStyle {
+    let style: IThemeStyle; let color: string;
+    switch (theme.toLowerCase()) {
+    case 'materialdark':
+        color = '#303030';
+        break;
+    case 'fabricdark':
+        color = '#201F1F';
+        break;
+    case 'bootstrapdark':
+        color = '#1A1A1A';
+        break;
+    }
+    switch (theme.toLowerCase()) {
+    case 'bootstrapdark':
+    case 'fabricdark':
+    case 'materialdark':
+        style = {
+            backgroundColor: color,
+            titleFontColor: '#FFFFFF',
+            subTitleFontColor: '#FFFFFF',
+            tooltipFillColor: '#363F4C',
+            tooltipFontColor: '#ffffff',
+            legendTitleColor: '#DADADA',
+            legendTextColor: '#DADADA',
+            fontFamily: 'Roboto, Noto, Sans-serif'
+        };
+        break;
+    case 'highcontrast':
+        style = {
+            backgroundColor: '#000000',
+            titleFontColor: '#FFFFFF',
+            subTitleFontColor: '#FFFFFF',
+            tooltipFillColor: '#363F4C',
+            tooltipFontColor: '#ffffff',
+            legendTitleColor: '#FFFFFF',
+            legendTextColor: '#FFFFFF',
+            fontFamily: 'Roboto, Noto, Sans-serif'
+        };
+        break;
+    case 'bootstrap4':
+        style = {
+            backgroundColor: '#FFFFFF',
+            titleFontColor: '#212529',
+            subTitleFontColor: '#212529',
+            tooltipFillColor: '#000000',
+            tooltipFontColor: '#FFFFFF',
+            tooltipFillOpacity: 1,
+            tooltipTextOpacity: 0.9,
+            legendTitleColor: '#212529',
+            legendTextColor: '#212529',
+            fontFamily: 'HelveticaNeue-Medium',
+            fontSize: '16px',
+            legendFontSize: '14px',
+            labelFontFamily: 'HelveticaNeue'
+        };
+        break;
+	case 'tailwind':
+		style = {
+            backgroundColor: 'transparent',
+            titleFontColor: '#374151',
+            subTitleFontColor: '#374151',
+            tooltipFillColor: '#111827',
+            tooltipFontColor: '#F9FAFB',
+            tooltipFillOpacity: 1,
+            tooltipTextOpacity: 1,
+            legendTitleColor: '#374151',
+            legendTextColor: '#374151',
+            fontFamily: 'Inter',
+            fontSize: '14px',
+            legendFontSize: '12px',
+            labelFontFamily: 'Inter'
+        };
+        break;
+	case 'tailwinddark':
+		style = {
+            backgroundColor: 'transparent',
+            titleFontColor: '#D1D5DB',
+            subTitleFontColor: '#D1D5DB',
+            tooltipFillColor: '#F9FAFB',
+            tooltipFontColor: '#1F2937',
+            tooltipFillOpacity: 1,
+            tooltipTextOpacity: 1,
+            legendTitleColor: '#D1D5DB',
+            legendTextColor: '#D1D5DB',
+            fontFamily: 'Inter',
+            fontSize: '14px',
+            legendFontSize: '12px',
+            labelFontFamily: 'Inter'  
+        };
+        break;
+    case 'bootstrap5':
+        style = {
+            backgroundColor: 'rgba(255,255,255, 0.0)',
+            titleFontColor: '#212529',
+            subTitleFontColor: '#212529',
+            tooltipFillColor: '#212529',
+            tooltipFontColor: '#F9FAFB',
+            tooltipFillOpacity: 1,
+            tooltipTextOpacity: 1,
+            legendTitleColor: '#212529',
+            legendTextColor: '#212529',
+            fontFamily: 'Helvetica Neue',
+            fontSize: '14px',
+            legendFontSize: '12px',
+            labelFontFamily: 'Helvetica Neue'  
+        };
+        break;
+    case 'bootstrap5dark':
+        style = {
+            backgroundColor: 'rgba(255,255,255, 0.0)',
+            titleFontColor: '#FFFFFF',
+            subTitleFontColor: '#FFFFFF',
+            tooltipFillColor: '#E9ECEF',
+            tooltipFontColor: '#212529',
+            tooltipFillOpacity: 1,
+            tooltipTextOpacity: 1,
+            legendTitleColor: '#FFFFFF',
+            legendTextColor: '#FFFFFF',
+            fontFamily: 'Helvetica Neue',
+            fontSize: '14px',
+            legendFontSize: '12px',
+            labelFontFamily: 'Helvetica Neue'  
+        };
+        break;
+    case 'fluent':
+        style = {
+            backgroundColor: 'rgba(255,255,255, 0.0)',
+            titleFontColor: '#201F1E',
+            subTitleFontColor: '#201F1E',
+            tooltipFillColor: '#FFFFFF',
+            tooltipFontColor: '#323130',
+            tooltipFillOpacity: 1,
+            tooltipTextOpacity: 1,
+            legendTitleColor: '#201F1E',
+            legendTextColor: '#201F1E',
+            fontFamily: 'Segoe UI',
+            fontSize: '14px',
+            legendFontSize: '12px',
+            labelFontFamily: 'Segoe UI'  
+        };
+        break;
+    case 'fluentdark':
+        style = {
+            backgroundColor: 'rgba(255,255,255, 0.0)',
+            titleFontColor: '#F3F2F1',
+            subTitleFontColor: '#F3F2F1',
+            tooltipFillColor: '#252423',
+            tooltipFontColor: '#F3F2F1',
+            tooltipFillOpacity: 1,
+            tooltipTextOpacity: 1,
+            legendTitleColor: '#F3F2F1',
+            legendTextColor: '#F3F2F1',
+            fontFamily: 'Segoe UI',
+            fontSize: '14px',
+            legendFontSize: '12px',
+            labelFontFamily: 'Segoe UI'  
+        };
+        break;
+	default:
+        style = {
+            backgroundColor: '#FFFFFF',
+            titleFontColor: '#424242',
+            subTitleFontColor: '#424242',
+            tooltipFillColor: '#363F4C',
+            tooltipFontColor: '#ffffff',
+            legendTitleColor: '#353535',
+            legendTextColor: '#353535',
+            fontFamily: 'Roboto, Noto, Sans-serif'
+        };
+        break;
+    }
+    return style;
+}