@syncfusion/ej2-treemap 30.2.4 → 31.1.17

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.
Files changed (47) hide show
  1. package/dist/ej2-treemap.min.js +2 -2
  2. package/dist/ej2-treemap.umd.min.js +2 -2
  3. package/dist/ej2-treemap.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-treemap.es2015.js +0 -4
  5. package/dist/es6/ej2-treemap.es2015.js.map +1 -1
  6. package/dist/es6/ej2-treemap.es5.js +0 -4
  7. package/dist/es6/ej2-treemap.es5.js.map +1 -1
  8. package/dist/global/ej2-treemap.min.js +2 -2
  9. package/dist/global/ej2-treemap.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/dist/ts/index.d.ts +4 -0
  12. package/dist/ts/index.ts +4 -0
  13. package/dist/ts/treemap/index.d.ts +19 -0
  14. package/dist/ts/treemap/index.ts +19 -0
  15. package/dist/ts/treemap/layout/legend.d.ts +137 -0
  16. package/dist/ts/treemap/layout/legend.ts +1095 -0
  17. package/dist/ts/treemap/layout/render-panel.d.ts +47 -0
  18. package/dist/ts/treemap/layout/render-panel.ts +758 -0
  19. package/dist/ts/treemap/model/base-model.d.ts +795 -0
  20. package/dist/ts/treemap/model/base.d.ts +671 -0
  21. package/dist/ts/treemap/model/base.ts +798 -0
  22. package/dist/ts/treemap/model/constants.d.ts +117 -0
  23. package/dist/ts/treemap/model/constants.ts +118 -0
  24. package/dist/ts/treemap/model/image-export.d.ts +34 -0
  25. package/dist/ts/treemap/model/image-export.ts +117 -0
  26. package/dist/ts/treemap/model/interface.d.ts +555 -0
  27. package/dist/ts/treemap/model/interface.ts +583 -0
  28. package/dist/ts/treemap/model/pdf-export.d.ts +36 -0
  29. package/dist/ts/treemap/model/pdf-export.ts +105 -0
  30. package/dist/ts/treemap/model/print.d.ts +45 -0
  31. package/dist/ts/treemap/model/print.ts +106 -0
  32. package/dist/ts/treemap/model/theme.d.ts +19 -0
  33. package/dist/ts/treemap/model/theme.ts +450 -0
  34. package/dist/ts/treemap/treemap-model.d.ts +374 -0
  35. package/dist/ts/treemap/treemap.d.ts +724 -0
  36. package/dist/ts/treemap/treemap.ts +1817 -0
  37. package/dist/ts/treemap/user-interaction/highlight-selection.d.ts +118 -0
  38. package/dist/ts/treemap/user-interaction/highlight-selection.ts +799 -0
  39. package/dist/ts/treemap/user-interaction/tooltip.d.ts +42 -0
  40. package/dist/ts/treemap/user-interaction/tooltip.ts +228 -0
  41. package/dist/ts/treemap/utils/enum.d.ts +256 -0
  42. package/dist/ts/treemap/utils/enum.ts +263 -0
  43. package/dist/ts/treemap/utils/helper.d.ts +543 -0
  44. package/dist/ts/treemap/utils/helper.ts +1453 -0
  45. package/package.json +52 -17
  46. package/src/treemap/treemap.d.ts +0 -1
  47. package/src/treemap/treemap.js +0 -4
package/dist/ts/treemap/model/theme.ts ADDED
@@ -0,0 +1,450 @@
1
+ /**
2
+ * Maps Themes doc
3
+ */
4
+
5
+ import { IFontMapping, IThemeStyle } from '../model/interface';
6
+ import { TreeMapTheme } from '../utils/enum';
7
+ import { defaultFont } from './constants';
8
+
9
+ // eslint-disable-next-line @typescript-eslint/no-namespace
10
+ export namespace Theme {
11
+ /**
12
+ * @private
13
+ */
14
+ export const mapsTitleFont: IFontMapping = {
15
+ size: '14px',
16
+ fontWeight: 'Medium',
17
+ color: '#424242',
18
+ fontStyle: 'Medium',
19
+ fontFamily: 'Roboto, Noto, Sans-serif'
20
+ };
21
+ }
22
+
23
+ /**
24
+ * To get the theme style based on treemap theme.
25
+ *
26
+ * @param {TreeMapTheme} theme Specifies the theme of the treemap control.
27
+ * @returns {IThemeStyle} Returns the theme.
28
+ * @private
29
+ */
30
+ export function getThemeStyle(theme: TreeMapTheme): IThemeStyle {
31
+ let style: IThemeStyle; let color: string;
32
+ switch (theme.toLowerCase()) {
33
+ case 'materialdark':
34
+ color = '#303030';
35
+ break;
36
+ case 'fabricdark':
37
+ color = '#201F1F';
38
+ break;
39
+ case 'bootstrapdark':
40
+ color = '#1A1A1A';
41
+ break;
42
+ }
43
+ switch (theme.toLowerCase()) {
44
+ case 'bootstrapdark':
45
+ case 'fabricdark':
46
+ case 'materialdark':
47
+ style = {
48
+ backgroundColor: color,
49
+ titleFontColor: '#FFFFFF',
50
+ titleFontWeight: 'Normal',
51
+ subTitleFontColor: '#FFFFFF',
52
+ tooltipFillColor: '#363F4C',
53
+ tooltipFontColor: '#ffffff',
54
+ tooltipFontSize: '13px',
55
+ legendTitleColor: '#DADADA',
56
+ legendTextColor: '#DADADA',
57
+ fontSize: '15px',
58
+ fontWeight: 'Normal',
59
+ subtitleFontSize: '14px',
60
+ legendFontSize: '13px',
61
+ fontFamily: 'Roboto, Noto, Sans-serif',
62
+ labelFontSize: '12px',
63
+ labelFontFamily: defaultFont,
64
+ legendBorderColor: '#000000',
65
+ legendBorderWidth: 0
66
+ };
67
+ break;
68
+ case 'highcontrast':
69
+ style = {
70
+ backgroundColor: '#000000',
71
+ titleFontColor: '#FFFFFF',
72
+ titleFontWeight: 'Normal',
73
+ subTitleFontColor: '#FFFFFF',
74
+ tooltipFillColor: '#363F4C',
75
+ tooltipFontColor: '#ffffff',
76
+ tooltipFontSize: '13px',
77
+ legendTitleColor: '#FFFFFF',
78
+ legendTextColor: '#FFFFFF',
79
+ fontSize: '15px',
80
+ fontWeight: 'Normal',
81
+ subtitleFontSize: '14px',
82
+ legendFontSize: '13px',
83
+ labelFontFamily: defaultFont,
84
+ fontFamily: 'Roboto, Noto, Sans-serif',
85
+ labelFontSize: '12px',
86
+ legendBorderColor: '#000000',
87
+ legendBorderWidth: 0
88
+ };
89
+ break;
90
+ case 'bootstrap4':
91
+ style = {
92
+ backgroundColor: '#FFFFFF',
93
+ titleFontColor: '#212529',
94
+ titleFontWeight: 'Normal',
95
+ subTitleFontColor: '#212529',
96
+ tooltipFillColor: '#000000',
97
+ tooltipFontColor: '#FFFFFF',
98
+ tooltipFontSize: '13px',
99
+ tooltipFillOpacity: 1,
100
+ tooltipTextOpacity: 0.9,
101
+ legendTitleColor: '#212529',
102
+ legendTextColor: '#212529',
103
+ fontFamily: 'HelveticaNeue-Medium',
104
+ fontSize: '16px',
105
+ fontWeight: 'Normal',
106
+ subtitleFontSize: '14px',
107
+ legendFontSize: '14px',
108
+ labelFontFamily: 'HelveticaNeue',
109
+ labelFontSize: '12px',
110
+ legendBorderColor: '#000000',
111
+ legendBorderWidth: 0
112
+ };
113
+ break;
114
+ case 'tailwind':
115
+ style = {
116
+ backgroundColor: 'transparent',
117
+ titleFontColor: '#374151',
118
+ titleFontWeight: 'Normal',
119
+ subTitleFontColor: '#374151',
120
+ tooltipFillColor: '#111827',
121
+ tooltipFontColor: '#F9FAFB',
122
+ tooltipFontSize: '13px',
123
+ tooltipFillOpacity: 1,
124
+ tooltipTextOpacity: 1,
125
+ legendTitleColor: '#374151',
126
+ legendTextColor: '#374151',
127
+ fontFamily: 'Inter',
128
+ fontSize: '14px',
129
+ fontWeight: 'Normal',
130
+ subtitleFontSize: '12px',
131
+ legendFontSize: '12px',
132
+ labelFontFamily: 'Inter',
133
+ labelFontSize: '12px',
134
+ legendBorderColor: '#000000',
135
+ legendBorderWidth: 0
136
+ };
137
+ break;
138
+ case 'tailwinddark':
139
+ style = {
140
+ backgroundColor: 'transparent',
141
+ titleFontColor: '#D1D5DB',
142
+ titleFontWeight: 'Normal',
143
+ subTitleFontColor: '#D1D5DB',
144
+ tooltipFillColor: '#F9FAFB',
145
+ tooltipFontColor: '#1F2937',
146
+ tooltipFontSize: '13px',
147
+ tooltipFillOpacity: 1,
148
+ tooltipTextOpacity: 1,
149
+ legendTitleColor: '#D1D5DB',
150
+ legendTextColor: '#D1D5DB',
151
+ fontFamily: 'Inter',
152
+ fontWeight: 'Normal',
153
+ fontSize: '14px',
154
+ subtitleFontSize: '12px',
155
+ legendFontSize: '12px',
156
+ labelFontFamily: 'Inter',
157
+ labelFontSize: '12px',
158
+ legendBorderColor: '#000000',
159
+ legendBorderWidth: 0
160
+ };
161
+ break;
162
+ case 'tailwind3':
163
+ style = {
164
+ backgroundColor: 'transparent',
165
+ titleFontColor: '#111827',
166
+ titleFontWeight: '600',
167
+ subTitleFontColor: '#111827',
168
+ tooltipFillColor: '#111827',
169
+ tooltipFontColor: '#F9FAFB',
170
+ tooltipFontSize: '12px',
171
+ tooltipFillOpacity: 1,
172
+ tooltipTextOpacity: 1,
173
+ legendTitleColor: '#111827',
174
+ legendTextColor: '#111827',
175
+ fontFamily: 'Inter',
176
+ fontSize: '14px',
177
+ fontWeight: '400',
178
+ subtitleFontSize: '12px',
179
+ legendFontSize: '12px',
180
+ labelFontFamily: 'Inter',
181
+ labelFontSize: '12px',
182
+ legendBorderColor: '#000000',
183
+ legendBorderWidth: 0
184
+ };
185
+ break;
186
+ case 'tailwind3dark':
187
+ style = {
188
+ backgroundColor: 'transparent',
189
+ titleFontColor: '#FFFFFF',
190
+ titleFontWeight: '600',
191
+ subTitleFontColor: '#FFFFFF',
192
+ tooltipFillColor: '#F9FAFB',
193
+ tooltipFontColor: '#1F2937',
194
+ tooltipFontSize: '12px',
195
+ tooltipFillOpacity: 1,
196
+ tooltipTextOpacity: 1,
197
+ legendTitleColor: '#FFFFFF',
198
+ legendTextColor: '#FFFFFF',
199
+ fontFamily: 'Inter',
200
+ fontWeight: '400',
201
+ fontSize: '14px',
202
+ subtitleFontSize: '12px',
203
+ legendFontSize: '12px',
204
+ labelFontFamily: 'Inter',
205
+ labelFontSize: '12px',
206
+ legendBorderColor: '#000000',
207
+ legendBorderWidth: 0
208
+ };
209
+ break;
210
+ case 'bootstrap5':
211
+ style = {
212
+ backgroundColor: 'transparent',
213
+ titleFontColor: '#212529',
214
+ titleFontWeight: '400',
215
+ subTitleFontColor: '#212529',
216
+ tooltipFillColor: '#000000',
217
+ tooltipFontColor: '#FFFFFF',
218
+ tooltipFontSize: '12px',
219
+ tooltipFillOpacity: 0.9,
220
+ legendTitleColor: '#212529',
221
+ legendTextColor: '#212529',
222
+ fontFamily: 'Segoe UI',
223
+ fontSize: '14px',
224
+ fontWeight: '400',
225
+ subtitleFontSize: '12px',
226
+ legendFontSize: '10px',
227
+ labelFontFamily: 'Segoe UI',
228
+ labelFontSize: '10px',
229
+ legendBorderColor: '#000000',
230
+ legendBorderWidth: 0
231
+ };
232
+ break;
233
+ case 'bootstrap5dark':
234
+ style = {
235
+ backgroundColor: 'transparent',
236
+ titleFontColor: '#DEE2E6',
237
+ titleFontWeight: '400',
238
+ subTitleFontColor: '#DEE2E6',
239
+ tooltipFillColor: '#FFFFFF',
240
+ tooltipFontColor: '#212529',
241
+ tooltipFontSize: '12px',
242
+ tooltipFillOpacity: 0.9,
243
+ legendTitleColor: '#DEE2E6',
244
+ legendTextColor: '#DEE2E6',
245
+ fontFamily: 'Segoe UI',
246
+ fontSize: '14px',
247
+ fontWeight: '400',
248
+ subtitleFontSize: '12px',
249
+ legendFontSize: '10px',
250
+ labelFontFamily: 'Segoe UI',
251
+ labelFontSize: '10px',
252
+ legendBorderColor: '#000000',
253
+ legendBorderWidth: 0
254
+ };
255
+ break;
256
+ case 'fluent':
257
+ style = {
258
+ backgroundColor: 'rgba(255,255,255, 0.0)',
259
+ titleFontColor: '#201F1E',
260
+ titleFontWeight: 'Normal',
261
+ subTitleFontColor: '#201F1E',
262
+ tooltipFillColor: '#FFFFFF',
263
+ tooltipFontColor: '#323130',
264
+ tooltipFontSize: '13px',
265
+ tooltipFillOpacity: 1,
266
+ tooltipTextOpacity: 1,
267
+ legendTitleColor: '#201F1E',
268
+ legendTextColor: '#201F1E',
269
+ fontFamily: 'Segoe UI',
270
+ fontSize: '14px',
271
+ fontWeight: 'Normal',
272
+ subtitleFontSize: '12px',
273
+ legendFontSize: '12px',
274
+ labelFontFamily: 'Segoe UI',
275
+ labelFontSize: '12px',
276
+ legendBorderColor: '#000000',
277
+ legendBorderWidth: 0
278
+ };
279
+ break;
280
+ case 'fluentdark':
281
+ style = {
282
+ backgroundColor: 'rgba(255,255,255, 0.0)',
283
+ titleFontColor: '#F3F2F1',
284
+ titleFontWeight: 'Normal',
285
+ subTitleFontColor: '#F3F2F1',
286
+ tooltipFillColor: '#252423',
287
+ tooltipFontColor: '#F3F2F1',
288
+ tooltipFontSize: '13px',
289
+ tooltipFillOpacity: 1,
290
+ tooltipTextOpacity: 1,
291
+ legendTitleColor: '#F3F2F1',
292
+ legendTextColor: '#F3F2F1',
293
+ fontFamily: 'Segoe UI',
294
+ fontSize: '14px',
295
+ fontWeight: 'Normal',
296
+ subtitleFontSize: '12px',
297
+ legendFontSize: '12px',
298
+ labelFontFamily: 'Segoe UI',
299
+ labelFontSize: '12px',
300
+ legendBorderColor: '#000000',
301
+ legendBorderWidth: 0
302
+ };
303
+ break;
304
+ case 'material3':
305
+ style = {
306
+ backgroundColor: 'transparent',
307
+ titleFontColor: '#1C1B1F',
308
+ titleFontWeight: '500',
309
+ subTitleFontColor: '#1C1B1F',
310
+ tooltipFillColor: '#313033',
311
+ tooltipFontColor: '#F4EFF4',
312
+ tooltipFontSize: '14px',
313
+ tooltipFillOpacity: 1,
314
+ tooltipTextOpacity: 1,
315
+ legendTitleColor: '#1C1B1F',
316
+ legendTextColor: '#49454E',
317
+ fontFamily: 'Roboto',
318
+ fontSize: '16px',
319
+ fontWeight: '400',
320
+ subtitleFontSize: '14px',
321
+ legendFontSize: '14px',
322
+ labelFontFamily: 'Roboto',
323
+ labelFontSize: '12px',
324
+ legendBorderColor: '#000000',
325
+ legendBorderWidth: 0
326
+ };
327
+ break;
328
+ case 'material3dark':
329
+ style = {
330
+ backgroundColor: 'transparent',
331
+ titleFontColor: '#E6E1E5',
332
+ titleFontWeight: '500',
333
+ subTitleFontColor: '#E6E1E5',
334
+ tooltipFillColor: '#E6E1E5',
335
+ tooltipFontColor: '#313033',
336
+ tooltipFontSize: '14px',
337
+ tooltipFillOpacity: 1,
338
+ tooltipTextOpacity: 1,
339
+ legendTitleColor: '#E6E1E5',
340
+ legendTextColor: '#CAC4D0',
341
+ fontFamily: 'Roboto',
342
+ fontSize: '16px',
343
+ fontWeight: '400',
344
+ subtitleFontSize: '14px',
345
+ legendFontSize: '14px',
346
+ labelFontFamily: 'Roboto',
347
+ labelFontSize: '12px',
348
+ legendBorderColor: '#000000',
349
+ legendBorderWidth: 0
350
+ };
351
+ break;
352
+ case 'fluent2':
353
+ style = {
354
+ backgroundColor: 'transparent',
355
+ titleFontColor: '#242424',
356
+ titleFontWeight: '600',
357
+ subTitleFontColor: '#242424',
358
+ tooltipFillColor: '#FFFFFF',
359
+ tooltipFontColor: '#242424',
360
+ tooltipFontSize: '12px',
361
+ tooltipFillOpacity: 1,
362
+ tooltipTextOpacity: 1,
363
+ legendTitleColor: '#242424',
364
+ legendTextColor: '#242424',
365
+ fontFamily: 'Segoe UI',
366
+ fontSize: '14px',
367
+ fontWeight: '400',
368
+ subtitleFontSize: '12px',
369
+ legendFontSize: '12px',
370
+ labelFontFamily: 'Segoe UI',
371
+ labelFontSize: '10px',
372
+ legendBorderColor: '#000000',
373
+ legendBorderWidth: 0
374
+ };
375
+ break;
376
+ case 'fluent2dark':
377
+ style = {
378
+ backgroundColor: 'transparent',
379
+ titleFontColor: '#FFFFFF',
380
+ titleFontWeight: '600',
381
+ subTitleFontColor: '#FFFFFF',
382
+ tooltipFillColor: '#292929',
383
+ tooltipFontColor: '#FFFFFF',
384
+ tooltipFontSize: '12px',
385
+ tooltipFillOpacity: 1,
386
+ tooltipTextOpacity: 1,
387
+ legendTitleColor: '#FFFFFF',
388
+ legendTextColor: '#FFFFFF',
389
+ fontFamily: 'Segoe UI',
390
+ fontSize: '14px',
391
+ fontWeight: '400',
392
+ subtitleFontSize: '12px',
393
+ legendFontSize: '12px',
394
+ labelFontFamily: 'Segoe UI',
395
+ labelFontSize: '10px',
396
+ legendBorderColor: '#000000',
397
+ legendBorderWidth: 0
398
+ };
399
+ break;
400
+ case 'fluent2highcontrast':
401
+ style = {
402
+ backgroundColor: 'transparent',
403
+ titleFontColor: '#FFFFFF',
404
+ titleFontWeight: '600',
405
+ subTitleFontColor: '#FFFFFF',
406
+ tooltipFillColor: '#000000',
407
+ tooltipFontColor: '#FFFFFF',
408
+ tooltipFontSize: '12px',
409
+ tooltipFillOpacity: 1,
410
+ tooltipTextOpacity: 1,
411
+ legendTitleColor: '#FFFFFF',
412
+ legendTextColor: '#FFFFFF',
413
+ fontFamily: 'Segoe UI',
414
+ fontSize: '14px',
415
+ fontWeight: '400',
416
+ subtitleFontSize: '12px',
417
+ legendFontSize: '12px',
418
+ labelFontFamily: 'Segoe UI',
419
+ labelFontSize: '10px',
420
+ legendBorderColor: '#FFF',
421
+ legendBorderWidth: 1,
422
+ tooltipBorderColor: '#FFF',
423
+ tooltipBorderWidth: 1
424
+ };
425
+ break;
426
+ default:
427
+ style = {
428
+ backgroundColor: '#FFFFFF',
429
+ titleFontColor: '#424242',
430
+ titleFontWeight: 'Normal',
431
+ subTitleFontColor: '#424242',
432
+ tooltipFillColor: '#363F4C',
433
+ tooltipFontColor: '#ffffff',
434
+ tooltipFontSize: '13px',
435
+ legendTitleColor: '#353535',
436
+ legendTextColor: '#353535',
437
+ fontSize: '15px',
438
+ fontWeight: 'Normal',
439
+ subtitleFontSize: '14px',
440
+ legendFontSize: '13px',
441
+ fontFamily: 'Roboto, Noto, Sans-serif',
442
+ labelFontSize: '12px',
443
+ labelFontFamily: defaultFont,
444
+ legendBorderColor: '#000000',
445
+ legendBorderWidth: 0
446
+ };
447
+ break;
448
+ }
449
+ return style;
450
+ }