@syncfusion/ej2-treemap 29.2.4 → 30.1.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.json +2 -0
- package/dist/ej2-treemap.min.js +2 -2
- package/dist/ej2-treemap.umd.min.js +2 -2
- package/dist/ej2-treemap.umd.min.js.map +1 -1
- package/dist/es6/ej2-treemap.es2015.js +1 -1
- package/dist/es6/ej2-treemap.es2015.js.map +1 -1
- package/dist/es6/ej2-treemap.es5.js +1 -1
- package/dist/es6/ej2-treemap.es5.js.map +1 -1
- package/dist/global/ej2-treemap.min.js +2 -2
- package/dist/global/ej2-treemap.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/dist/ts/index.d.ts +4 -0
- package/dist/ts/index.ts +4 -0
- package/dist/ts/treemap/index.d.ts +19 -0
- package/dist/ts/treemap/index.ts +19 -0
- package/dist/ts/treemap/layout/legend.d.ts +137 -0
- package/dist/ts/treemap/layout/legend.ts +1095 -0
- package/dist/ts/treemap/layout/render-panel.d.ts +47 -0
- package/dist/ts/treemap/layout/render-panel.ts +758 -0
- package/dist/ts/treemap/model/base-model.d.ts +795 -0
- package/dist/ts/treemap/model/base.d.ts +671 -0
- package/dist/ts/treemap/model/base.ts +798 -0
- package/dist/ts/treemap/model/constants.d.ts +117 -0
- package/dist/ts/treemap/model/constants.ts +118 -0
- package/dist/ts/treemap/model/image-export.d.ts +34 -0
- package/dist/ts/treemap/model/image-export.ts +117 -0
- package/dist/ts/treemap/model/interface.d.ts +555 -0
- package/dist/ts/treemap/model/interface.ts +583 -0
- package/dist/ts/treemap/model/pdf-export.d.ts +36 -0
- package/dist/ts/treemap/model/pdf-export.ts +105 -0
- package/dist/ts/treemap/model/print.d.ts +45 -0
- package/dist/ts/treemap/model/print.ts +106 -0
- package/dist/ts/treemap/model/theme.d.ts +19 -0
- package/dist/ts/treemap/model/theme.ts +450 -0
- package/dist/ts/treemap/treemap-model.d.ts +374 -0
- package/dist/ts/treemap/treemap.d.ts +724 -0
- package/dist/ts/treemap/treemap.ts +1817 -0
- package/dist/ts/treemap/user-interaction/highlight-selection.d.ts +118 -0
- package/dist/ts/treemap/user-interaction/highlight-selection.ts +799 -0
- package/dist/ts/treemap/user-interaction/tooltip.d.ts +42 -0
- package/dist/ts/treemap/user-interaction/tooltip.ts +228 -0
- package/dist/ts/treemap/utils/enum.d.ts +256 -0
- package/dist/ts/treemap/utils/enum.ts +263 -0
- package/dist/ts/treemap/utils/helper.d.ts +543 -0
- package/dist/ts/treemap/utils/helper.ts +1453 -0
- package/package.json +12 -13
- package/src/treemap/utils/helper.js +1 -1
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
|
|
2
|
+
import { TreeMap} from '../../index';
|
|
3
|
+
import { ExportType } from '../utils/enum';
|
|
4
|
+
import { PdfPageOrientation, PdfDocument, PdfBitmap } from '@syncfusion/ej2-pdf-export';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* PdfExport module handles the export to pdf functionality for treemap.
|
|
8
|
+
*
|
|
9
|
+
* @hidden
|
|
10
|
+
*/
|
|
11
|
+
export class PdfExport {
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Constructor for Maps
|
|
15
|
+
*
|
|
16
|
+
* @param {TreeMap} control - Specifies the treemap instance
|
|
17
|
+
*/
|
|
18
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
|
|
19
|
+
constructor(control: TreeMap) {
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* This method is used to perform the export functionality for the rendered treemap.
|
|
24
|
+
*
|
|
25
|
+
* @param {TreeMap} treeMap - Specifies the treemap instance.
|
|
26
|
+
* @param {ExportType} type - Specifies the type of the document.
|
|
27
|
+
* @param {string} fileName - Specifies the name of the document.
|
|
28
|
+
* @param {PdfPageOrientation} orientation - Specifies the orientation of the PDF document to export the treemap.
|
|
29
|
+
* @param {boolean} allowDownload - Specifies whether to download the document or not.
|
|
30
|
+
* @returns {Promise} - Returns the string.
|
|
31
|
+
* @private
|
|
32
|
+
*/
|
|
33
|
+
public export(treeMap: TreeMap, type: ExportType, fileName: string, orientation?: PdfPageOrientation,
|
|
34
|
+
allowDownload ?: boolean): Promise<string> {
|
|
35
|
+
|
|
36
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
|
|
37
|
+
const promise: Promise<string> = new Promise((resolve: any, reject: any) => {
|
|
38
|
+
const element: HTMLCanvasElement = <HTMLCanvasElement>createElement('canvas', {
|
|
39
|
+
id: 'ej2-canvas',
|
|
40
|
+
attrs: {
|
|
41
|
+
'width': treeMap.availableSize.width.toString(),
|
|
42
|
+
'height': treeMap.availableSize.height.toString()
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
orientation = isNullOrUndefined(orientation) ? PdfPageOrientation.Landscape : orientation;
|
|
46
|
+
const exportElement: HTMLElement = treeMap.svgObject.cloneNode(true) as HTMLElement;
|
|
47
|
+
const backgroundElement: HTMLElement = exportElement.childNodes[0] as HTMLElement;
|
|
48
|
+
if (!isNullOrUndefined(backgroundElement)) {
|
|
49
|
+
const backgroundColor: string = backgroundElement.getAttribute('fill');
|
|
50
|
+
if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Tailwind3' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
|
|
51
|
+
treeMap.theme === 'Fluent2')
|
|
52
|
+
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
53
|
+
(exportElement.childNodes[0] as HTMLElement).setAttribute('fill', 'rgba(255,255,255, 1)');
|
|
54
|
+
} else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Tailwind3Dark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
|
|
55
|
+
treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
|
|
56
|
+
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
57
|
+
(exportElement.childNodes[0] as HTMLElement).setAttribute('fill', 'rgba(0, 0, 0, 1)');
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const url: string = window.URL.createObjectURL(
|
|
62
|
+
new Blob(
|
|
63
|
+
[(new XMLSerializer()).serializeToString(exportElement)],
|
|
64
|
+
{ type: 'image/svg+xml' }
|
|
65
|
+
)
|
|
66
|
+
);
|
|
67
|
+
|
|
68
|
+
const image: HTMLImageElement = new Image();
|
|
69
|
+
const context: CanvasRenderingContext2D = element.getContext('2d');
|
|
70
|
+
image.onload = (() => {
|
|
71
|
+
context.drawImage(image, 0, 0);
|
|
72
|
+
window.URL.revokeObjectURL(url);
|
|
73
|
+
|
|
74
|
+
const document: PdfDocument = new PdfDocument();
|
|
75
|
+
let imageString: string = element.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
|
|
76
|
+
document.pageSettings.orientation = orientation;
|
|
77
|
+
imageString = imageString.slice(imageString.indexOf(',') + 1);
|
|
78
|
+
document.pages.add().graphics.drawImage(
|
|
79
|
+
new PdfBitmap(imageString), 0, 0, (treeMap.availableSize.width - 60), treeMap.availableSize.height
|
|
80
|
+
);
|
|
81
|
+
if (allowDownload) {
|
|
82
|
+
document.save(fileName + '.pdf');
|
|
83
|
+
document.destroy();
|
|
84
|
+
} else {
|
|
85
|
+
resolve(null);
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
image.src = url;
|
|
89
|
+
});
|
|
90
|
+
return promise;
|
|
91
|
+
}
|
|
92
|
+
protected getModuleName(): string {
|
|
93
|
+
// Returns te module name
|
|
94
|
+
return 'PdfExport';
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* To destroy the PdfExport.
|
|
99
|
+
*
|
|
100
|
+
* @returns {void}
|
|
101
|
+
* @private
|
|
102
|
+
*/
|
|
103
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
104
|
+
public destroy(): void { }
|
|
105
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { TreeMap } from '../../index';
|
|
2
|
+
/**
|
|
3
|
+
* Print module handles the print functionality for treemap.
|
|
4
|
+
*
|
|
5
|
+
* @hidden
|
|
6
|
+
*/
|
|
7
|
+
export declare class Print {
|
|
8
|
+
/**
|
|
9
|
+
* Constructor for Maps
|
|
10
|
+
*
|
|
11
|
+
* @param {TreeMap} control - Specifies the treemap instance.
|
|
12
|
+
*/
|
|
13
|
+
constructor(control: TreeMap);
|
|
14
|
+
/**
|
|
15
|
+
* This method is used to perform the print functionality in treemap.
|
|
16
|
+
*
|
|
17
|
+
* @param {TreeMap} treeMap - Specifies the treemap instance.
|
|
18
|
+
* @param { string[] | string | Element} elements - Specifies the element.
|
|
19
|
+
* @returns {void}
|
|
20
|
+
* @private
|
|
21
|
+
*/
|
|
22
|
+
print(treeMap: TreeMap, elements?: string[] | string | Element): void;
|
|
23
|
+
/**
|
|
24
|
+
* To get the html string of the Maps
|
|
25
|
+
*
|
|
26
|
+
* @param {TreeMap} treeMap - Specifies the treemap instance.
|
|
27
|
+
* @param {string[] | string | Element} elements - Specifies the element
|
|
28
|
+
* @returns {Element} - Returns the element
|
|
29
|
+
* @private
|
|
30
|
+
*/
|
|
31
|
+
getHTMLContent(treeMap: TreeMap, elements?: string[] | string | Element): Element;
|
|
32
|
+
/**
|
|
33
|
+
* Get module name.
|
|
34
|
+
*
|
|
35
|
+
* @returns {string} - Returns the module name.
|
|
36
|
+
*/
|
|
37
|
+
protected getModuleName(): string;
|
|
38
|
+
/**
|
|
39
|
+
* To destroy the Print module.
|
|
40
|
+
*
|
|
41
|
+
* @returns {void}
|
|
42
|
+
* @private
|
|
43
|
+
*/
|
|
44
|
+
destroy(): void;
|
|
45
|
+
}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { print as printFunction, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
|
|
2
|
+
import { TreeMap} from '../../index';
|
|
3
|
+
import { getElement } from '../utils/helper';
|
|
4
|
+
import { IPrintEventArgs } from '../model/interface';
|
|
5
|
+
import { beforePrint } from '../model/constants';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Print module handles the print functionality for treemap.
|
|
9
|
+
*
|
|
10
|
+
* @hidden
|
|
11
|
+
*/
|
|
12
|
+
export class Print {
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Constructor for Maps
|
|
16
|
+
*
|
|
17
|
+
* @param {TreeMap} control - Specifies the treemap instance.
|
|
18
|
+
*/
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
|
|
20
|
+
constructor(control: TreeMap) {
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* This method is used to perform the print functionality in treemap.
|
|
25
|
+
*
|
|
26
|
+
* @param {TreeMap} treeMap - Specifies the treemap instance.
|
|
27
|
+
* @param { string[] | string | Element} elements - Specifies the element.
|
|
28
|
+
* @returns {void}
|
|
29
|
+
* @private
|
|
30
|
+
*/
|
|
31
|
+
public print(treeMap: TreeMap, elements?: string[] | string | Element): void {
|
|
32
|
+
const printWindow: Window = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
|
|
33
|
+
printWindow.moveTo(0, 0);
|
|
34
|
+
printWindow.resizeTo(screen.availWidth, screen.availHeight);
|
|
35
|
+
const argsData: IPrintEventArgs = {
|
|
36
|
+
cancel: false, htmlContent: this.getHTMLContent(treeMap, elements), name: beforePrint
|
|
37
|
+
};
|
|
38
|
+
treeMap.trigger(beforePrint, argsData, () => {
|
|
39
|
+
if (!argsData.cancel) {
|
|
40
|
+
printFunction(argsData.htmlContent, printWindow);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* To get the html string of the Maps
|
|
47
|
+
*
|
|
48
|
+
* @param {TreeMap} treeMap - Specifies the treemap instance.
|
|
49
|
+
* @param {string[] | string | Element} elements - Specifies the element
|
|
50
|
+
* @returns {Element} - Returns the element
|
|
51
|
+
* @private
|
|
52
|
+
*/
|
|
53
|
+
public getHTMLContent(treeMap: TreeMap, elements?: string[] | string | Element): Element {
|
|
54
|
+
const div: Element = createElement('div');
|
|
55
|
+
if (elements) {
|
|
56
|
+
if (elements instanceof Array) {
|
|
57
|
+
elements.forEach((value: string) => {
|
|
58
|
+
div.appendChild(getElement(value).cloneNode(true) as Element);
|
|
59
|
+
});
|
|
60
|
+
} else if (elements instanceof Element) {
|
|
61
|
+
div.appendChild(elements.cloneNode(true) as Element);
|
|
62
|
+
} else {
|
|
63
|
+
div.appendChild(getElement(elements).cloneNode(true) as Element);
|
|
64
|
+
}
|
|
65
|
+
} else {
|
|
66
|
+
const exportElement: HTMLElement = treeMap.element.cloneNode(true) as HTMLElement;
|
|
67
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
68
|
+
let backgroundElement: HTMLElement = (exportElement.getElementsByTagName('svg')[0] as any) as HTMLElement;
|
|
69
|
+
if (!isNullOrUndefined(backgroundElement)) {
|
|
70
|
+
backgroundElement = backgroundElement.childNodes[0] as HTMLElement;
|
|
71
|
+
if (!isNullOrUndefined(backgroundElement)) {
|
|
72
|
+
const backgroundColor: string = backgroundElement.getAttribute('fill');
|
|
73
|
+
if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'Tailwind3' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Fluent' || treeMap.theme === 'Material3' ||
|
|
74
|
+
treeMap.theme === 'Fluent2')
|
|
75
|
+
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
76
|
+
backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
|
|
77
|
+
} else if ((treeMap.theme === 'TailwindDark' || treeMap.theme === 'Tailwind3Dark' || treeMap.theme === 'Bootstrap5Dark' || treeMap.theme === 'FluentDark' || treeMap.theme === 'Material3Dark' ||
|
|
78
|
+
treeMap.theme === 'Fluent2Dark' || treeMap.theme === 'Fluent2HighContrast')
|
|
79
|
+
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
|
|
80
|
+
backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
div.appendChild(exportElement as Element);
|
|
85
|
+
}
|
|
86
|
+
return div;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Get module name.
|
|
91
|
+
*
|
|
92
|
+
* @returns {string} - Returns the module name.
|
|
93
|
+
*/
|
|
94
|
+
protected getModuleName(): string {
|
|
95
|
+
// Returns te module name
|
|
96
|
+
return 'Print';
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* To destroy the Print module.
|
|
100
|
+
*
|
|
101
|
+
* @returns {void}
|
|
102
|
+
* @private
|
|
103
|
+
*/
|
|
104
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
105
|
+
public destroy(): void { }
|
|
106
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Maps Themes doc
|
|
3
|
+
*/
|
|
4
|
+
import { IFontMapping, IThemeStyle } from '../model/interface';
|
|
5
|
+
import { TreeMapTheme } from '../utils/enum';
|
|
6
|
+
export declare namespace Theme {
|
|
7
|
+
/**
|
|
8
|
+
* @private
|
|
9
|
+
*/
|
|
10
|
+
const mapsTitleFont: IFontMapping;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* To get the theme style based on treemap theme.
|
|
14
|
+
*
|
|
15
|
+
* @param {TreeMapTheme} theme Specifies the theme of the treemap control.
|
|
16
|
+
* @returns {IThemeStyle} Returns the theme.
|
|
17
|
+
* @private
|
|
18
|
+
*/
|
|
19
|
+
export declare function getThemeStyle(theme: TreeMapTheme): IThemeStyle;
|