@next-bricks/data-view 1.3.15 → 1.4.0

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 (105) hide show
  1. package/dist/bricks.json +12 -8
  2. package/dist/chunks/1491.75d08174.js +3 -0
  3. package/dist/chunks/1491.75d08174.js.map +1 -0
  4. package/dist/chunks/1493.e45be49f.js +2 -0
  5. package/dist/chunks/1493.e45be49f.js.map +1 -0
  6. package/dist/chunks/2836.358bb597.js +2 -0
  7. package/dist/chunks/2836.358bb597.js.map +1 -0
  8. package/dist/chunks/{4837.fc42abd4.js → 4837.5e26fe2a.js} +2 -2
  9. package/dist/chunks/{4837.fc42abd4.js.map → 4837.5e26fe2a.js.map} +1 -1
  10. package/dist/chunks/{7218.b87ba3b8.js → 7218.d2924ff4.js} +2 -2
  11. package/dist/chunks/{7218.b87ba3b8.js.map → 7218.d2924ff4.js.map} +1 -1
  12. package/dist/chunks/8847.9be1eec6.js +2 -0
  13. package/dist/chunks/8847.9be1eec6.js.map +1 -0
  14. package/dist/chunks/basic-index-group.7dd3e9da.js +2 -0
  15. package/dist/chunks/basic-index-group.7dd3e9da.js.map +1 -0
  16. package/dist/chunks/battery-chart.abdaa4e4.js +2 -0
  17. package/dist/chunks/battery-chart.abdaa4e4.js.map +1 -0
  18. package/dist/chunks/cabinet-container.95ec63e8.js +3 -0
  19. package/dist/chunks/cabinet-container.95ec63e8.js.map +1 -0
  20. package/dist/chunks/cabinet-thumbnail.dc01323b.js +3 -0
  21. package/dist/chunks/cabinet-thumbnail.dc01323b.js.map +1 -0
  22. package/dist/chunks/complex-search.2bf04871.js +2 -0
  23. package/dist/chunks/complex-search.2bf04871.js.map +1 -0
  24. package/dist/chunks/crystal-ball-indicator.269b1f6d.js +2 -0
  25. package/dist/chunks/crystal-ball-indicator.269b1f6d.js.map +1 -0
  26. package/dist/chunks/data-display-flipper.fae041d0.js +2 -0
  27. package/dist/chunks/data-display-flipper.fae041d0.js.map +1 -0
  28. package/dist/chunks/gauge-chart.6ed1dfa8.js +2 -0
  29. package/dist/chunks/gauge-chart.6ed1dfa8.js.map +1 -0
  30. package/dist/chunks/loading-panel.b7f40435.js +2 -0
  31. package/dist/chunks/loading-panel.b7f40435.js.map +1 -0
  32. package/dist/chunks/main.dacb91a2.js +2 -0
  33. package/dist/chunks/{main.3775ed28.js.map → main.dacb91a2.js.map} +1 -1
  34. package/dist/chunks/{modern-style-page-title.9fd85677.js → modern-style-page-title.790a17ac.js} +2 -2
  35. package/dist/chunks/{modern-style-page-title.9fd85677.js.map → modern-style-page-title.790a17ac.js.map} +1 -1
  36. package/dist/chunks/modern-style-treemap.0b40defb.js +3 -0
  37. package/dist/chunks/modern-style-treemap.0b40defb.js.map +1 -0
  38. package/dist/chunks/progress-bar-list.b788a7ce.js +2 -0
  39. package/dist/chunks/progress-bar-list.b788a7ce.js.map +1 -0
  40. package/dist/chunks/radar-chart.c9abdd30.js +2 -0
  41. package/dist/chunks/radar-chart.c9abdd30.js.map +1 -0
  42. package/dist/chunks/tabs-drawer.04866e23.js +3 -0
  43. package/dist/chunks/tabs-drawer.04866e23.js.map +1 -0
  44. package/dist/chunks/tabs-page-title.670649e6.js +3 -0
  45. package/dist/chunks/tabs-page-title.670649e6.js.map +1 -0
  46. package/dist/examples.json +21 -18
  47. package/dist/images/9111af40.png +0 -0
  48. package/dist/images/9514fc4d.png +0 -0
  49. package/dist/images/c5f34792.png +0 -0
  50. package/dist/images/e4eec39c.png +0 -0
  51. package/dist/index.fefb1c64.js +2 -0
  52. package/dist/index.fefb1c64.js.map +1 -0
  53. package/dist/manifest.json +175 -141
  54. package/dist/media/78c4b1bd.ttf +0 -0
  55. package/dist/media/792b07b2.ttf +0 -0
  56. package/dist/media/b43f5418.mp4 +0 -0
  57. package/dist/types.json +267 -149
  58. package/dist-types/bootstrap.d.ts +1 -0
  59. package/dist-types/crystal-ball-indicator/index.d.ts +42 -0
  60. package/dist-types/crystal-ball-indicator/index.spec.d.ts +1 -0
  61. package/docs/crystal-ball-indicator.md +37 -0
  62. package/package.json +2 -2
  63. package/dist/chunks/1493.cc58ad97.js +0 -2
  64. package/dist/chunks/1493.cc58ad97.js.map +0 -1
  65. package/dist/chunks/4235.1b0a0cb4.js +0 -3
  66. package/dist/chunks/4235.1b0a0cb4.js.map +0 -1
  67. package/dist/chunks/4263.95819c52.js +0 -2
  68. package/dist/chunks/4263.95819c52.js.map +0 -1
  69. package/dist/chunks/859.fc13536c.js +0 -2
  70. package/dist/chunks/859.fc13536c.js.map +0 -1
  71. package/dist/chunks/basic-index-group.6175f5d7.js +0 -2
  72. package/dist/chunks/basic-index-group.6175f5d7.js.map +0 -1
  73. package/dist/chunks/battery-chart.135855fb.js +0 -2
  74. package/dist/chunks/battery-chart.135855fb.js.map +0 -1
  75. package/dist/chunks/cabinet-container.7ab996bf.js +0 -3
  76. package/dist/chunks/cabinet-container.7ab996bf.js.map +0 -1
  77. package/dist/chunks/cabinet-thumbnail.58a9cb98.js +0 -3
  78. package/dist/chunks/cabinet-thumbnail.58a9cb98.js.map +0 -1
  79. package/dist/chunks/complex-search.8ac80849.js +0 -2
  80. package/dist/chunks/complex-search.8ac80849.js.map +0 -1
  81. package/dist/chunks/data-display-flipper.24911f1b.js +0 -2
  82. package/dist/chunks/data-display-flipper.24911f1b.js.map +0 -1
  83. package/dist/chunks/gauge-chart.511f5852.js +0 -2
  84. package/dist/chunks/gauge-chart.511f5852.js.map +0 -1
  85. package/dist/chunks/loading-panel.e4a103ed.js +0 -2
  86. package/dist/chunks/loading-panel.e4a103ed.js.map +0 -1
  87. package/dist/chunks/main.3775ed28.js +0 -2
  88. package/dist/chunks/modern-style-treemap.63422334.js +0 -3
  89. package/dist/chunks/modern-style-treemap.63422334.js.map +0 -1
  90. package/dist/chunks/progress-bar-list.14beecb9.js +0 -2
  91. package/dist/chunks/progress-bar-list.14beecb9.js.map +0 -1
  92. package/dist/chunks/radar-chart.9ad9bc97.js +0 -2
  93. package/dist/chunks/radar-chart.9ad9bc97.js.map +0 -1
  94. package/dist/chunks/tabs-drawer.ee3fed75.js +0 -3
  95. package/dist/chunks/tabs-drawer.ee3fed75.js.map +0 -1
  96. package/dist/chunks/tabs-page-title.0596468d.js +0 -3
  97. package/dist/chunks/tabs-page-title.0596468d.js.map +0 -1
  98. package/dist/index.6c309c4d.js +0 -2
  99. package/dist/index.6c309c4d.js.map +0 -1
  100. /package/dist/chunks/{4235.1b0a0cb4.js.LICENSE.txt → 1491.75d08174.js.LICENSE.txt} +0 -0
  101. /package/dist/chunks/{cabinet-container.7ab996bf.js.LICENSE.txt → cabinet-container.95ec63e8.js.LICENSE.txt} +0 -0
  102. /package/dist/chunks/{cabinet-thumbnail.58a9cb98.js.LICENSE.txt → cabinet-thumbnail.dc01323b.js.LICENSE.txt} +0 -0
  103. /package/dist/chunks/{modern-style-treemap.63422334.js.LICENSE.txt → modern-style-treemap.0b40defb.js.LICENSE.txt} +0 -0
  104. /package/dist/chunks/{tabs-drawer.ee3fed75.js.LICENSE.txt → tabs-drawer.04866e23.js.LICENSE.txt} +0 -0
  105. /package/dist/chunks/{tabs-page-title.0596468d.js.LICENSE.txt → tabs-page-title.670649e6.js.LICENSE.txt} +0 -0
package/dist/types.json CHANGED
@@ -94,6 +94,56 @@
94
94
  "events": [],
95
95
  "methods": []
96
96
  },
97
+ "data-view.modern-style-page-title": {
98
+ "properties": [
99
+ {
100
+ "name": "pageTitle",
101
+ "annotation": {
102
+ "type": "keyword",
103
+ "value": "string"
104
+ }
105
+ },
106
+ {
107
+ "name": "description",
108
+ "annotation": {
109
+ "type": "keyword",
110
+ "value": "string"
111
+ }
112
+ },
113
+ {
114
+ "name": "backgroundStyle",
115
+ "annotation": {
116
+ "type": "reference",
117
+ "typeName": {
118
+ "type": "identifier",
119
+ "name": "CSSProperties"
120
+ }
121
+ }
122
+ },
123
+ {
124
+ "name": "leftRoundStyle",
125
+ "annotation": {
126
+ "type": "reference",
127
+ "typeName": {
128
+ "type": "identifier",
129
+ "name": "CSSProperties"
130
+ }
131
+ }
132
+ },
133
+ {
134
+ "name": "rightRoundStyle",
135
+ "annotation": {
136
+ "type": "reference",
137
+ "typeName": {
138
+ "type": "identifier",
139
+ "name": "CSSProperties"
140
+ }
141
+ }
142
+ }
143
+ ],
144
+ "events": [],
145
+ "methods": []
146
+ },
97
147
  "data-view.tabs-drawer": {
98
148
  "properties": [
99
149
  {
@@ -287,54 +337,76 @@
287
337
  }
288
338
  ]
289
339
  },
290
- "data-view.modern-style-page-title": {
340
+ "data-view.dropdown-menu": {
291
341
  "properties": [
292
342
  {
293
- "name": "pageTitle",
343
+ "name": "options",
294
344
  "annotation": {
295
- "type": "keyword",
296
- "value": "string"
345
+ "type": "array",
346
+ "elementType": {
347
+ "type": "typeLiteral",
348
+ "members": [
349
+ {
350
+ "type": "propertySignature",
351
+ "key": {
352
+ "type": "identifier",
353
+ "name": "label"
354
+ },
355
+ "annotation": {
356
+ "type": "keyword",
357
+ "value": "string"
358
+ },
359
+ "computed": false
360
+ },
361
+ {
362
+ "type": "propertySignature",
363
+ "key": {
364
+ "type": "identifier",
365
+ "name": "value"
366
+ },
367
+ "annotation": {
368
+ "type": "keyword",
369
+ "value": "string"
370
+ },
371
+ "computed": false
372
+ }
373
+ ]
374
+ }
297
375
  }
298
376
  },
299
377
  {
300
- "name": "description",
378
+ "name": "value",
301
379
  "annotation": {
302
380
  "type": "keyword",
303
381
  "value": "string"
304
382
  }
305
383
  },
306
384
  {
307
- "name": "backgroundStyle",
385
+ "name": "placeholder",
308
386
  "annotation": {
309
- "type": "reference",
310
- "typeName": {
311
- "type": "identifier",
312
- "name": "CSSProperties"
313
- }
387
+ "type": "keyword",
388
+ "value": "string"
314
389
  }
315
390
  },
316
391
  {
317
- "name": "leftRoundStyle",
392
+ "name": "allowClear",
318
393
  "annotation": {
319
- "type": "reference",
320
- "typeName": {
321
- "type": "identifier",
322
- "name": "CSSProperties"
323
- }
394
+ "type": "keyword",
395
+ "value": "boolean"
324
396
  }
325
- },
397
+ }
398
+ ],
399
+ "events": [
326
400
  {
327
- "name": "rightRoundStyle",
328
- "annotation": {
329
- "type": "reference",
330
- "typeName": {
331
- "type": "identifier",
332
- "name": "CSSProperties"
401
+ "name": "value.change",
402
+ "detail": {
403
+ "annotation": {
404
+ "type": "keyword",
405
+ "value": "string"
333
406
  }
334
407
  }
335
408
  }
336
409
  ],
337
- "events": [],
338
410
  "methods": []
339
411
  },
340
412
  "data-view.battery-chart": {
@@ -476,78 +548,6 @@
476
548
  }
477
549
  ]
478
550
  },
479
- "data-view.dropdown-menu": {
480
- "properties": [
481
- {
482
- "name": "options",
483
- "annotation": {
484
- "type": "array",
485
- "elementType": {
486
- "type": "typeLiteral",
487
- "members": [
488
- {
489
- "type": "propertySignature",
490
- "key": {
491
- "type": "identifier",
492
- "name": "label"
493
- },
494
- "annotation": {
495
- "type": "keyword",
496
- "value": "string"
497
- },
498
- "computed": false
499
- },
500
- {
501
- "type": "propertySignature",
502
- "key": {
503
- "type": "identifier",
504
- "name": "value"
505
- },
506
- "annotation": {
507
- "type": "keyword",
508
- "value": "string"
509
- },
510
- "computed": false
511
- }
512
- ]
513
- }
514
- }
515
- },
516
- {
517
- "name": "value",
518
- "annotation": {
519
- "type": "keyword",
520
- "value": "string"
521
- }
522
- },
523
- {
524
- "name": "placeholder",
525
- "annotation": {
526
- "type": "keyword",
527
- "value": "string"
528
- }
529
- },
530
- {
531
- "name": "allowClear",
532
- "annotation": {
533
- "type": "keyword",
534
- "value": "boolean"
535
- }
536
- }
537
- ],
538
- "events": [
539
- {
540
- "name": "value.change",
541
- "detail": {
542
- "annotation": {
543
- "type": "keyword",
544
- "value": "string"
545
- }
546
- }
547
- }
548
- ],
549
- "methods": []
550
- },
551
551
  "data-view.particle-animation": {
552
552
  "properties": [
553
553
  {
@@ -1691,6 +1691,35 @@
1691
1691
  }
1692
1692
  ]
1693
1693
  },
1694
+ "data-view.lights-component-title": {
1695
+ "properties": [
1696
+ {
1697
+ "name": "componentTitle",
1698
+ "annotation": {
1699
+ "type": "keyword",
1700
+ "value": "string"
1701
+ }
1702
+ },
1703
+ {
1704
+ "name": "theme",
1705
+ "annotation": {
1706
+ "type": "union",
1707
+ "types": [
1708
+ {
1709
+ "type": "jsLiteral",
1710
+ "value": "light"
1711
+ },
1712
+ {
1713
+ "type": "jsLiteral",
1714
+ "value": "dark"
1715
+ }
1716
+ ]
1717
+ }
1718
+ }
1719
+ ],
1720
+ "events": [],
1721
+ "methods": []
1722
+ },
1694
1723
  "data-view.top-title-bar": {
1695
1724
  "properties": [
1696
1725
  {
@@ -1737,35 +1766,6 @@
1737
1766
  }
1738
1767
  ]
1739
1768
  },
1740
- "data-view.lights-component-title": {
1741
- "properties": [
1742
- {
1743
- "name": "componentTitle",
1744
- "annotation": {
1745
- "type": "keyword",
1746
- "value": "string"
1747
- }
1748
- },
1749
- {
1750
- "name": "theme",
1751
- "annotation": {
1752
- "type": "union",
1753
- "types": [
1754
- {
1755
- "type": "jsLiteral",
1756
- "value": "light"
1757
- },
1758
- {
1759
- "type": "jsLiteral",
1760
- "value": "dark"
1761
- }
1762
- ]
1763
- }
1764
- }
1765
- ],
1766
- "events": [],
1767
- "methods": []
1768
- },
1769
1769
  "data-view.hi-tech-button": {
1770
1770
  "properties": [
1771
1771
  {
@@ -2208,7 +2208,7 @@
2208
2208
  "events": [],
2209
2209
  "methods": []
2210
2210
  },
2211
- "data-view.data-display-flipper-fifth": {
2211
+ "data-view.data-display-flipper-sixth": {
2212
2212
  "properties": [
2213
2213
  {
2214
2214
  "name": "flipperTitle",
@@ -2249,33 +2249,12 @@
2249
2249
  }
2250
2250
  ]
2251
2251
  }
2252
- },
2253
- {
2254
- "name": "unit",
2255
- "annotation": {
2256
- "type": "keyword",
2257
- "value": "string"
2258
- }
2259
- },
2260
- {
2261
- "name": "enableTitlePrefix",
2262
- "annotation": {
2263
- "type": "keyword",
2264
- "value": "boolean"
2265
- }
2266
- },
2267
- {
2268
- "name": "showDefaultPrefix",
2269
- "annotation": {
2270
- "type": "keyword",
2271
- "value": "boolean"
2272
- }
2273
2252
  }
2274
2253
  ],
2275
2254
  "events": [],
2276
2255
  "methods": []
2277
2256
  },
2278
- "data-view.data-display-flipper-sixth": {
2257
+ "data-view.data-display-flipper-fifth": {
2279
2258
  "properties": [
2280
2259
  {
2281
2260
  "name": "flipperTitle",
@@ -2316,6 +2295,27 @@
2316
2295
  }
2317
2296
  ]
2318
2297
  }
2298
+ },
2299
+ {
2300
+ "name": "unit",
2301
+ "annotation": {
2302
+ "type": "keyword",
2303
+ "value": "string"
2304
+ }
2305
+ },
2306
+ {
2307
+ "name": "enableTitlePrefix",
2308
+ "annotation": {
2309
+ "type": "keyword",
2310
+ "value": "boolean"
2311
+ }
2312
+ },
2313
+ {
2314
+ "name": "showDefaultPrefix",
2315
+ "annotation": {
2316
+ "type": "keyword",
2317
+ "value": "boolean"
2318
+ }
2319
2319
  }
2320
2320
  ],
2321
2321
  "events": [],
@@ -2420,6 +2420,124 @@
2420
2420
  }
2421
2421
  ]
2422
2422
  },
2423
+ "data-view.crystal-ball-indicator": {
2424
+ "properties": [
2425
+ {
2426
+ "name": "dataSource",
2427
+ "annotation": {
2428
+ "type": "array",
2429
+ "elementType": {
2430
+ "type": "reference",
2431
+ "typeName": {
2432
+ "type": "identifier",
2433
+ "name": "DataItem"
2434
+ }
2435
+ }
2436
+ }
2437
+ },
2438
+ {
2439
+ "name": "centerDataSource",
2440
+ "annotation": {
2441
+ "type": "reference",
2442
+ "typeName": {
2443
+ "type": "identifier",
2444
+ "name": "DataItem"
2445
+ }
2446
+ }
2447
+ },
2448
+ {
2449
+ "name": "cornerDataSource",
2450
+ "annotation": {
2451
+ "type": "array",
2452
+ "elementType": {
2453
+ "type": "reference",
2454
+ "typeName": {
2455
+ "type": "identifier",
2456
+ "name": "cornerDataItem"
2457
+ }
2458
+ }
2459
+ }
2460
+ },
2461
+ {
2462
+ "name": "maxScale",
2463
+ "annotation": {
2464
+ "type": "keyword",
2465
+ "value": "number"
2466
+ }
2467
+ }
2468
+ ],
2469
+ "events": [],
2470
+ "methods": [],
2471
+ "types": [
2472
+ {
2473
+ "type": "interface",
2474
+ "name": "DataItem",
2475
+ "body": [
2476
+ {
2477
+ "type": "propertySignature",
2478
+ "key": {
2479
+ "type": "identifier",
2480
+ "name": "label"
2481
+ },
2482
+ "annotation": {
2483
+ "type": "keyword",
2484
+ "value": "string"
2485
+ },
2486
+ "computed": false
2487
+ },
2488
+ {
2489
+ "type": "propertySignature",
2490
+ "key": {
2491
+ "type": "identifier",
2492
+ "name": "value"
2493
+ },
2494
+ "annotation": {
2495
+ "type": "union",
2496
+ "types": [
2497
+ {
2498
+ "type": "keyword",
2499
+ "value": "string"
2500
+ },
2501
+ {
2502
+ "type": "keyword",
2503
+ "value": "number"
2504
+ }
2505
+ ]
2506
+ },
2507
+ "computed": false
2508
+ }
2509
+ ]
2510
+ },
2511
+ {
2512
+ "type": "interface",
2513
+ "name": "cornerDataItem",
2514
+ "body": [
2515
+ {
2516
+ "type": "propertySignature",
2517
+ "key": {
2518
+ "type": "identifier",
2519
+ "name": "color"
2520
+ },
2521
+ "annotation": {
2522
+ "type": "keyword",
2523
+ "value": "string"
2524
+ },
2525
+ "optional": true,
2526
+ "computed": false
2527
+ }
2528
+ ],
2529
+ "extends": [
2530
+ {
2531
+ "type": "expressionWithTypeArguments",
2532
+ "expression": {
2533
+ "type": "identifier",
2534
+ "name": "DataItem"
2535
+ }
2536
+ }
2537
+ ]
2538
+ }
2539
+ ]
2540
+ },
2423
2541
  "data-view.loading-panel": {
2424
2542
  "properties": [
2425
2543
  {
@@ -39,3 +39,4 @@ import "./data-display-flipper-sixth/index.js";
39
39
  import "./indicator-card/index.js";
40
40
  import "./progress-bar-list/index.js";
41
41
  import "./china-map-chart/index.js";
42
+ import "./crystal-ball-indicator/index.js";
@@ -0,0 +1,42 @@
1
+ import React from "react";
2
+ import { ReactNextElement } from "@next-core/react-element";
3
+ import "@next-core/theme";
4
+ import "../fonts/ALiBaBaPuHuiTi.css";
5
+ import "../fonts/PangMenZhengDaoBiaoTiTi.css";
6
+ export interface CrystalBallIndicatorProps {
7
+ dataSource?: DataItem[];
8
+ centerDataSource?: DataItem;
9
+ cornerDataSource?: cornerDataItem[];
10
+ maxScale?: number;
11
+ }
12
+ export interface DataItem {
13
+ label: string;
14
+ value: string | number;
15
+ }
16
+ export interface cornerDataItem extends DataItem {
17
+ color?: string;
18
+ }
19
+ /**
20
+ * 有水晶球动画的数据展示构件。
21
+ */
22
+ export declare class CrystalBallIndicator extends ReactNextElement implements CrystalBallIndicatorProps {
23
+ /** 指标数据列表(显示在环上) */
24
+ accessor dataSource: DataItem[] | undefined;
25
+ /** 中心数据(显示在中心水晶球内) */
26
+ accessor centerDataSource: DataItem | undefined;
27
+ /**
28
+ * 左上角指标数据列表
29
+ */
30
+ accessor cornerDataSource: cornerDataItem[] | undefined;
31
+ /**
32
+ * 最大缩放比例
33
+ *
34
+ * @default 1
35
+ */
36
+ accessor maxScale: number | undefined;
37
+ render(): React.JSX.Element;
38
+ }
39
+ export interface CrystalBallIndicatorComponentProps extends CrystalBallIndicatorProps {
40
+ root: CrystalBallIndicator;
41
+ }
42
+ export declare function CrystalBallIndicatorComponent({ root, dataSource, centerDataSource, cornerDataSource, maxScale, }: CrystalBallIndicatorComponentProps): React.JSX.Element;
@@ -0,0 +1 @@
1
+ import "./";
@@ -0,0 +1,37 @@
1
+ 中间是水晶球动画的数据展示构件。
2
+
3
+ ## Examples
4
+
5
+ ### Basic
6
+
7
+ ```yaml preview minHeight="660px"
8
+ brick: data-view.crystal-ball-indicator
9
+ properties:
10
+ centerDataSource:
11
+ label: 资产总数
12
+ value: 30123
13
+ dataSource:
14
+ - label: 低值易耗品
15
+ value: 3889
16
+ - label: 摊销资产
17
+ value: 2087
18
+ - label: 固定资产
19
+ value: 12088
20
+ - label: 无形资产
21
+ value: 1082
22
+ - label: 在建工程
23
+ value: 10997
24
+ cornerDataSource:
25
+ - label: 资产增长
26
+ value: 43
27
+ color: red
28
+ - label: 资产减少
29
+ value: 21
30
+ color: green
31
+ # Currently this brick only works within dark theme
32
+ lifeCycle:
33
+ onPageLoad:
34
+ action: theme.setTheme
35
+ args:
36
+ - dark-v2
37
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@next-bricks/data-view",
3
- "version": "1.3.15",
3
+ "version": "1.4.0",
4
4
  "homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/data-view",
5
5
  "repository": {
6
6
  "type": "git",
@@ -41,5 +41,5 @@
41
41
  "peerDependencies": {
42
42
  "@next-bricks/icons": "*"
43
43
  },
44
- "gitHead": "4c619a2e4658b268bf1af8fb3282098c4a0e5b2b"
44
+ "gitHead": "0d9124e467a82ea9b22c719b74a1552dc3191e00"
45
45
  }
@@ -1,2 +0,0 @@
1
- "use strict";(globalThis.webpackChunk_next_bricks_data_view=globalThis.webpackChunk_next_bricks_data_view||[]).push([[1493],{75562:(e,t,r)=>{r.d(t,{S:()=>M});var n=r(89575),o=r(18769),a=r.n(o),i=r(72445),l=r(55062),s=r(83488),c=r(97807),d=r(17558);r(21440),r(36041),r(4392);const u=(e,t,r)=>{const n=(new l.Pq0).subVectors(t,e),o=n.length(),a=document.createElement("data-view.app-wall-relation-line");a.style.height=`${o}px`,a.classList.add("relation-line"),a.lightColor=r;const i=new s.on(a),c=(new l.Pq0).lerpVectors(e,t,.5);i.position.copy(c);const d=(new l.PTz).setFromUnitVectors(new l.Pq0(0,1,0).normalize(),n.clone().normalize());return i.setRotationFromQuaternion(d),i},p=(e,t)=>{const r=new l.Pq0(e[0],e[1],e[2]),n=new l.Pq0(t[0],t[1],t[2]);return{centerVector:(new l.Pq0).lerpVectors(r,n,.5),subVector:(new l.Pq0).subVectors(r,n)}},h=e=>{const{BW:t,TW:r,d:n,TH:o,BH:a,isLeft:i}=e,c=Math.sqrt(Math.pow(r/2-t/2,2)+Math.pow(n,2)),d=document.createElement("div");d.style.cssText=`\n width: ${c}px;\n height:${o}px;\n position: relative;\n clip-path: polygon(0 0, ${c}px ${o/2-a/2}px, ${c}px ${o/2-a/2+a}px, 0 ${o}px);\n `;const u=document.createElement("div");u.className="trapezoidalLeftOrRightAnimation",d.appendChild(u);const h=i?[-t/2,0,0]:[t/2,0,0],g=i?[-r/2,0,n]:[r/2,0,n],b=new s.on(d),{centerVector:m,subVector:x}=p(h,g);b.position.copy(m);const v=(new l.PTz).setFromUnitVectors(new l.Pq0(1,0,0).normalize(),x.clone().normalize());return b.setRotationFromQuaternion(v),b},g=e=>{const{BW:t,TW:r,d:n,TH:o,BH:a,isTop:i}=e,c=Math.sqrt(Math.pow(o/2-a/2,2)+Math.pow(n,2)),d=document.createElement("div");d.style.cssText=`\n width: ${r}px;\n height:${c}px;\n position: relative;\n clip-path: polygon(0 0, ${r}px 0, ${r/2-t/2+t}px ${c}px, ${r/2-t/2}px ${c}px);\n `;const u=document.createElement("div");u.className="trapezoidalTopOrBottomAnimation",d.appendChild(u);const h=new s.on(d),g=i?[0,-a/2,0]:[0,a/2,0],b=i?[0,-o/2,n]:[0,o/2,n],{centerVector:m,subVector:x}=p(g,b);h.position.copy(m);const v=(new l.PTz).setFromUnitVectors(new l.Pq0(0,-1,0).normalize(),x.clone().normalize());return h.setRotationFromQuaternion(v),h},b=e=>{const{objectData:t,leftBtnName:r,clusters:n,columns:o,leftOnClick:a,rightBtnName:i,rightOnClick:l,appName:c}=e,d=600,u=document.createElement("div"),p=new s.on(u);p.position.set(...t.point);const b=t.width,m=t.height,x=1500,v=1200,f=document.createElement("div");f.style.cssText=`\n width: ${b}px;\n height: ${m}px;\n box-shadow: inset 0px 1px 2px 0px rgba(255,255,255,0.45);\n border: 1px solid rgba(118,255,255,0.58);\n padding: 16px;\n `;const w=new s.on(f);w.position.z=0,p.add(w);const y=document.createElement("div");y.style.cssText="\n width: 1500px;\n height:1200px;\n background: linear-gradient(rgb(13, 54, 179,0.6) 0%, rgb(74, 108, 156,0.6) 100%);\n box-sizing: border-box;\n padding: 16px;\n ";const k=document.createElement("data-view.cabinet-thumbnail");k.clusters=n??[],k.columns=o??4,k.appName=c,y.className="visibilityAnimate",y.appendChild(k);const z=new s.on(y);z.position.set(0,0,d);const T=h({BW:b,TW:x,BH:m,TH:v,d,isLeft:!0}),C=h({BW:b,TW:x,BH:m,TH:v,d,isLeft:!1}),S=g({BW:b,TW:x,BH:m,TH:v,d,isTop:!0}),E=g({BW:b,TW:x,BH:m,TH:v,d,isTop:!1});if(p.add(T,C,E,S),r){const e=document.createElement("div");e.style.cssText="\n color: #6BE0FA;\n font-size: 28px;\n font-weight: 500;\n width: 750px;\n line-height: 16px;\n ",e.className="visibilityAnimate";const t=document.createElement("span");t.style.cursor="pointer",t.innerText=r,e.appendChild(t);const n=new s.on(e);n.position.set(-365,-600,14),n.rotateX(Math.PI/2),z.add(n),t.onpointerdown=a}if(i){const e=document.createElement("div");e.style.cssText="\n color: #FFFFFF;\n font-size: 30px;\n font-weight: 500;\n width: 750px;\n text-shadow: 0px 1px 4px #3366FF;\n text-align: right;\n ",e.className="visibilityAnimate";const t=document.createElement("span");t.style.cursor="pointer",t.innerText=i,e.appendChild(t);const r=new s.on(e);r.position.set(365,-600,14),r.rotateX(Math.PI/2),z.add(r),t.onpointerdown=l}return p.add(z),p},m=(e,t,r)=>{if(null==e||!e.length)return[];let n=e.map((e=>({...e,x:0,y:0})));if(n.length===t*r)n=n.map(((e,r)=>({...e,x:r%t+1,y:parseInt(""+r/t)+1})));else{const e=t*(r-1),o=n.length-e;for(let r=0;r<e;r++){const e=n[r];e.x=r%t+1,e.y=parseInt(""+r/t)+1}for(let a=0;a<o/2;a++){const o=n[a+e],i=n[n.length-1-a];o.x=a+1,o.y=r,o!==i&&(i.x=t-a,i.y=r)}}return n},x=(e,t,r,n)=>{const o=new l.B69;return o.position.x=e.x*t.outerWidth-(r/2+.5)*t.outerWidth,o.position.y=-e.y*t.outerHeight+(n/2+.5)*t.outerHeight,o},v=(e,t,r,n,o,a)=>{const i=new l.B69,s=new l.Pq0,c=((e,t,r,n,o)=>{const a={x:0,y:0,z:0},i=parseInt(""+r*t.outerWidth*180)/(o*Math.PI),l=r/2+.5;return a.x=i*Math.sin(Math.PI/(180/((e.x-l)*(o/r)))),a.y=-e.y*t.outerHeight+(n/2+.5)*t.outerHeight,a.z=i-Math.sqrt(i*i-a.x*a.x),a})(e,t,r,n,o);return i.position.x=c.x,i.position.y=c.y,i.position.z=c.z,s.x=0,s.y=i.position.y,s.z=a,i.lookAt(s),i},f=(e,t,r,n)=>{const o=t.height+2*t.margin,a=(t.width+2*t.margin)/e.aspect,i=.5*Math.max(a,o)/Math.tan(e.fov*Math.PI/360)+t.z;let l=0;return r.forEach((function(e){n>=Math.min.apply(null,e.numRange)&&n<=Math.max.apply(null,e.numRange)&&(l=e.distance)})),Math.max(l,i)},w=(e,t)=>{const r=[],n=e.userData;return Array.isArray(t)&&t.length&&t.forEach((function(e){n.key!==e.source&&n.key!==e.target||r.push(e)})),r},y=(e,t)=>{const r=t.toUpperCase(),n=e.composedPath().find((e=>null==e?void 0:e.shadowRoot));if((null==n?void 0:n.tagName)===r)return n;const o=document.elementFromPoint(e.clientX,e.clientY),a=null==o?void 0:o.shadowRoot.elementFromPoint(e.clientX,e.clientY);return(null==a?void 0:a.tagName)===r?a:null};var k=r(24295),z=r(53373),T=r.n(z);const C=[{numRange:[0,40],distance:3e3},{numRange:[40,60],distance:2200},{numRange:[60,80],distance:2700},{numRange:[80,120],distance:3200},{numRange:[120,160],distance:3400},{numRange:[160,300],distance:3600}],S=45,E=100,P=300,I=500,R=(e,t,r,n)=>{const o=Math.ceil(Math.sqrt(e*t.outerHeight/(n*t.outerWidth))),a=Math.ceil(e/o),i=parseInt(""+o*t.outerWidth*180)/(E*Math.PI);return{maxX:o,maxY:a,radius:i,bounds:{width:2*i*Math.sin(Math.PI*(E/2)/180)+t.outerWidth,height:a*t.outerHeight,margin:r,z:i-i*Math.cos(Math.PI*(E/2)/180)}}},B=(0,k.wrapBrick)("data-view.app-wall-system-card");function M(e){const{relations:t,onSystemCardButtonClick:r,useDblclick:p,useDistanceConfig:h,handleCardDbClick:g,rightBtnOnClick:k,leftBtnOnClick:z,cardBrickName:M,cardSize:_,disabledDefaultClickEvent:A,handleCardClick:D,containerId:F,noRotate:L,boundMargin:W,useSystemPopover:K}=e,[N,$]=(0,o.useState)(null),H=(0,o.useRef)(),V=(0,o.useRef)(),O=(0,o.useRef)(),q=(0,o.useRef)(),j=(0,o.useRef)(),G=(0,o.useRef)(),Y=(0,o.useRef)(),X=(0,o.useRef)(),U=(0,o.useRef)(),Q=(0,o.useRef)(),Z=(0,o.useRef)(),J=(0,o.useRef)({table:[],curve:[]}),ee=(0,o.useRef)([]),te=(0,o.useRef)([]),re=(0,o.useRef)(1),ne=(0,o.useRef)(5e3),oe=(0,o.useRef)({maxX:0,maxY:0,radius:0,bounds:{width:0,height:0,margin:W,z:0}}),ae=(0,o.useRef)({element:null,mouseoverTimer:null,mouseoutTimer:null,clickTimer:null,dblClickTimer:null,isShowGraph3D:!1,isShowAppInfo:!1,isShowRelations:!1,enable:!0}),ie=(0,o.useCallback)((()=>{Y.current.render(X.current,U.current),Q.current.maxDistance=ne.current+I,Q.current.handleResize()}),[]),le=e=>{var t;if(null===(t=ae.current)||void 0===t||!t.element)return null==e?void 0:e();const{__objectCSS:r,__curve:n,__userData:o}=ae.current.element;new d.K(r.rotation).to({x:n.rotation.x,y:n.rotation.y,z:n.rotation.z},100).start(),new d.K(r.scale).to({x:1,y:1,z:1},100).start(),new d.K(r.position).to({x:n.position.x,y:n.position.y,z:n.position.z},100).onUpdate(ie).onStart((()=>{var e;"data-view.app-wall-card-item"===M&&r.element.classList.remove(`status-${o.status||"normal"}-card`),null===(e=ee.current)||void 0===e||e.forEach((e=>{e.element.style.opacity="1"})),te.current.forEach((e=>{X.current.remove(e)})),te.current=[],ie()})).onComplete((()=>{var t;ae.current.isShowRelations=!1,null==e||e(null===(t=ae.current)||void 0===t?void 0:t.element)})).start()},se=(e,t)=>{ae.current.enable=!1;for(let r=0;r<ee.current.length;r++){const n=ee.current[r],o=e[r];new d.K(n.position).to({x:o.position.x,y:o.position.y,z:o.position.z},l.cj9.randFloat(t,2*t)).easing(d.GS.Exponential.InOut).start(),new d.K(n.rotation).to({x:o.rotation.x,y:o.rotation.y,z:o.rotation.z},l.cj9.randFloat(t,2*t)).easing(d.GS.Exponential.InOut).start()}new d.K({}).to({},2*t).onUpdate(ie).start().onComplete((()=>{ae.current.enable=!0}))},ce=e=>{Q.current.reset();const t=ae.current.element.__objectCSS,r=ae.current.element.__curve;ae.current.enable=!1,ae.current.isShowAppInfo=!0;const n={x:r.position.x>0?2*-_.width:2*_.width,y:0,z:(U.current.position.z-500)/1.5},o={x:0,y:0,z:U.current.position.z-500},a={x:0,y:r.rotation.y>0?90*-Math.PI/180:90*Math.PI/180,z:0},i={x:0,y:r.rotation.y>0?180*-Math.PI/180:180*Math.PI/180,z:0},l=new d.K(t.position),s=new d.K(t.rotation),c=new d.K(t.position),u=new d.K(t.rotation);var p;e?(l.to(n,500).easing().onComplete((()=>{j.current.hidden=!0,ae.current.element.style.opacity="1"})),s.to(a,500).easing(),c.to({x:r.position.x,y:r.position.y,z:r.position.z},700).easing(),u.to({x:r.rotation.x,y:r.rotation.y,z:r.rotation.z},700).easing().onComplete((()=>{var e;null===(e=ee.current)||void 0===e||e.forEach((e=>{e.element.style.opacity="1"}))}))):(null===(p=ee.current)||void 0===p||p.forEach((e=>{t!=e&&(e.element.style.opacity="0.2")})),l.to(n,700).easing().onStart((()=>{q.current.hidden=!1,j.current.hidden=!0})),s.to(a,700).easing(),c.to(o,500).easing().onStart((function(){ae.current.element.style.opacity="0",j.current.style.transition="transition: all .3s ease",j.current.hidden=!1})),u.to(i,500).easing()),l.chain(c).start(),s.chain(u).start(),new d.K({}).to({},1400).onUpdate((()=>{if(ie(),Math.abs(t.rotation.y)>=Math.PI/2){const e=ae.current.element.getBoundingClientRect(),t=1.35,r=e.width*t,n=e.height*t;j.current.style.width=`${r}px`,j.current.style.height=`${n}px`,j.current.style.top=e.top-(t-1)*n/2+"px",j.current.style.left=e.left-(t-1)*r/2+"px"}})).start().onComplete((function(){ae.current.enable=!0,ae.current.isShowAppInfo=!e,q.current.hidden=e}))};return(0,o.useEffect)((()=>{let e;(()=>{var e;const t=null===(e=document.getElementById(F))||void 0===e?void 0:e.getBoundingClientRect(),r=(null==t?void 0:t.width)||window.innerWidth,n=(null==t?void 0:t.height)||window.innerHeight,o=r/n,a=new l.Z58,i=new l.ubm(S,o,.1,1e4),d=new s.a0;d.setSize(r,n),V.current.replaceChildren(d.domElement);const u=new c.V(i,d.domElement);u.rotateSpeed=.5,u.minDistance=500,u.maxDistance=1e4,u.noRotate=L,X.current=a,U.current=i,Q.current=u,Y.current=d})();const t=()=>{e=requestAnimationFrame(t),d.Ay.update(),Q.current.update()};t();const r=F?document.getElementById(F):document.body,n=new ResizeObserver((0,i.debounce)((()=>{const{width:e,height:t}=r.getBoundingClientRect();U.current.aspect=e/t,U.current.updateProjectionMatrix(),Y.current.setSize(e,t),ie()}),300));return Q.current.addEventListener("change",ie),n.observe(r),()=>{n.disconnect(),Q.current.removeEventListener("change",ie),Q.current.dispose(),d.Ay.removeAll(),U.current.clear(),X.current.clear(),cancelAnimationFrame(e)}}),[]),(0,o.useEffect)((()=>{var t;const r=(null===(t=e.dataSource)||void 0===t?void 0:t.length)||0;if(r>0){(e=>{oe.current=R(e,_,W,1/U.current.aspect)})(r),ne.current=f(U.current,oe.current.bounds,h?C:[],r),U.current.position.z=ne.current,U.current.updateProjectionMatrix(),Q.current.position0.copy(U.current.position);m(e.dataSource,oe.current.maxX,oe.current.maxY).forEach((e=>{var t,r,n,o,a,i,l;const c=document.createElement(M);c.status=e.status,c.cardTitle=null===(t=e.cardItemProps)||void 0===t?void 0:t.cardTitle,c.description=null===(r=e.cardItemProps)||void 0===r?void 0:r.description,c.background=null===(n=e.cardItemProps)||void 0===n?void 0:n.background,c.color=null===(o=e.cardItemProps)||void 0===o?void 0:o.color,c.titleStyle=null===(a=e.cardItemProps)||void 0===a?void 0:a.titleStyle,c.desStyle=null===(i=e.cardItemProps)||void 0===i?void 0:i.desStyle,c.descriptionList=null===(l=e.cardItemProps)||void 0===l?void 0:l.descriptionList;const d=`status-${(null==e?void 0:e.status)||"normal"}`;c.className=`card-item-container ${d}`,c.style.width=`${_.width}px`,c.style.height=`${_.height}px`,c.classList.add("card-item-wrap");const u=new s.on(c);u.position.set(4e3*Math.random()-2e3,4e3*Math.random()-2e3,4e3*Math.random()-2e3),X.current.add(u),ee.current.push(u);const p=x(e,_,oe.current.maxX,oe.current.maxY);J.current.table.push(p);const h=v(e,_,oe.current.maxX,oe.current.maxY,E,oe.current.radius);J.current.curve.push(h),u.userData=e,c.__objectCSS=u,c.__userData=e,c.__curve=h})),se(J.current.curve,1e3)}return()=>{Q.current.reset(),d.Ay.removeAll(),ee.current.map((e=>{X.current.remove(e)})),ee.current=[],J.current={table:[],curve:[]},ae.current={element:null,mouseoverTimer:null,mouseoutTimer:null,clickTimer:null,dblClickTimer:null,enable:!0,isShowAppInfo:!1,isShowGraph3D:!1,isShowRelations:!1}}}),[e.dataSource,h]),(0,o.useEffect)((()=>{if(K){const e=document.createElement("monitoring.sys-popover");G.current=e,document.querySelector("#main-mount-point").appendChild(e)}}),[K]),(0,o.useEffect)((()=>{const e=H.current,r=e=>{if(clearTimeout(ae.current.mouseoverTimer),ae.current.isShowAppInfo||ae.current.isShowGraph3D||!ae.current.enable)return!1;const r=y(e,M);if(K){var n,o;const e=(null===(n=G.current)||void 0===n?void 0:n.instanceId)!=(null==r||null===(o=r.__userData)||void 0===o||null===(o=o.data)||void 0===o?void 0:o.instanceId);r&&e||G.current.setVisible(!1)}ae.current.mouseoverTimer=window.setTimeout((()=>{le((()=>{r&&!ae.current.isShowAppInfo&&(e=>{const{__objectCSS:r,__userData:n}=e,o=r.rotation.y,a=r.element.getBoundingClientRect(),i={x:r.position.x+50*Math.sin(o),y:r.position.y+15,z:r.position.z+100*Math.cos(o)},l=a.width>=_.width?re.current:Math.min(_.width/a.width,_.height/a.height);ae.current.isShowRelations=!0,new d.K(r.rotation).onStart((()=>{"data-view.app-wall-card-item"===M&&r.element.classList.add(`status-${n.status||"normal"}-card`)})).start(),new d.K(r.scale).to({x:l,y:l,z:l},100).start(),new d.K(r.position).to(i,100).onUpdate(ie).onComplete((function(){if((e=>{var r;const n=w(e,t),o=e.userData;let a,i;null==n||n.forEach((t=>{t.source===o.key?(i=ee.current.find((e=>e.userData.key===t.target)),a=i&&u(e.position,i.position,"blue")):(i=ee.current.find((e=>e.userData.key===t.source)),a=i&&u(i.position,e.position,"purple")),a&&(te.current.push(a),X.current.add(a))})),null===(r=ee.current)||void 0===r||r.forEach((t=>{e!=t&&n.every((e=>e.source!=t.userData.key&&e.target!=t.userData.key))&&(t.element.style.opacity="0.2")}))})(r),ie(),ae.current.element=e,K){var n;const t=e.getBoundingClientRect(),r=t.left+t.width/2,o=t.top+t.height/2;G.current.instanceId=null==e||null===(n=e.__userData)||void 0===n||null===(n=n.data)||void 0===n?void 0:n.instanceId,G.current.setPosition({x:r,y:o}),G.current.setVisible(!0)}})).start()})(r),clearTimeout(ae.current.mouseoverTimer)}))}),300)},n=e=>{if(ae.current.isShowAppInfo||ae.current.isShowGraph3D||!ae.current.enable)return!1;const t=y(e,M);if(K){var r;const e=G.current.instanceId!=(null==t||null===(r=t.__userData)||void 0===r||null===(r=r.data)||void 0===r?void 0:r.instanceId);t&&e||G.current.setVisible(!1)}},o=e=>{if(clearTimeout(ae.current.clickTimer),clearTimeout(ae.current.mouseoverTimer),ae.current.isShowAppInfo||ae.current.isShowGraph3D||!ae.current.enable)return!1;const t=y(e,M);ae.current.clickTimer=window.setTimeout((function(){clearTimeout(ae.current.mouseoverTimer),le((()=>{t&&(clearTimeout(ae.current.clickTimer),clearTimeout(ae.current.mouseoverTimer),e.stopPropagation(),ae.current.element=t,A?null==D||D(t.__userData):($(t.__userData),ce(!1)))}))}),200)},a=e=>{if(clearTimeout(ae.current.clickTimer),clearTimeout(ae.current.mouseoverTimer),clearTimeout(ae.current.dblClickTimer),ae.current.isShowAppInfo||ae.current.isShowGraph3D||!ae.current.enable)return!1;const t=y(e,M),{__userData:r,__objectCSS:n}=t;ae.current.isShowGraph3D=!0,ae.current.dblClickTimer=window.setTimeout((function(){le((()=>{var e;if(p||(null===(e=r.trapezoidalProps)||void 0===e||null===(e=e.clusters)||void 0===e?void 0:e.length)<1)g(r),ae.current.isShowGraph3D=!1;else if(t){clearTimeout(ae.current.mouseoverTimer),clearTimeout(ae.current.clickTimer),V.current.classList.add("mask-container"),Q.current.reset();const e={opacity:0,scale:0,borderLeftWidth:0,borderRightWidth:0,borderTopWidth:0,borderBottomWidth:0},t={x:n.position.x,y:860+_.height*(oe.current.maxY-r.y)},o=new d.K(U.current.position),a=new d.K(e),i=new d.K({z:0}),l=new d.K(U.current.position),s=new d.K(Q.current.target),c=new d.K({blur:12,spread:0});se(J.current.table,600),o.to({x:0,y:-3600,z:1600},1e3).chain(c,a,i),a.to({opacity:1},700).onStart((()=>{var e,t,o,a,i;const l=b({objectData:{width:_.width,height:_.height,point:[n.position.x,n.position.y,n.position.z]},clusters:null===(e=r.trapezoidalProps)||void 0===e?void 0:e.clusters,columns:null===(t=r.trapezoidalProps)||void 0===t?void 0:t.columns,appName:null===(o=r.trapezoidalProps)||void 0===o?void 0:o.appName,leftBtnName:null===(a=r.trapezoidalProps)||void 0===a?void 0:a.leftBtnName,rightBtnName:null===(i=r.trapezoidalProps)||void 0===i?void 0:i.rightBtnName,rightOnClick:()=>k(r),leftOnClick:()=>z(r)});Z.current=l,X.current.add(l)})),i.to({z:P},1e3).delay(230).chain(l,s),l.to({x:t.x,y:-3600+t.y},1e3),s.to({x:t.x,y:t.y},1e3).onComplete((function(){O.current.style.visibility="visible"})),o.start()}}))}),200)};return e.addEventListener("dblclick",a),e.addEventListener("click",o),e.addEventListener("mouseover",r),e.addEventListener("mouseout",n),()=>{e.removeEventListener("mouseover",r),e.removeEventListener("mouseout",n),e.removeEventListener("click",o),e.removeEventListener("dblclick",a)}}),[A,D]),a().createElement("div",{className:"appwall-container",ref:H},a().createElement("div",{className:"appwall",ref:V}),a().createElement("div",{className:"mask",ref:q,onClick:()=>{ae.current.enable&&ce(!0)},hidden:!0},a().createElement(B,(0,n.A)({},null==N?void 0:N.systemCardProps,{onClick:e=>e.stopPropagation(),handleClick:()=>r(N),ref:j,className:T()({infoWrapper:"normal"===(null==N?void 0:N.status),warningWrapper:"warning"===(null==N?void 0:N.status)})}))),a().createElement("div",{className:"closeBtn",ref:O,onClick:()=>{(()=>{d.Ay.removeAll();const e=new d.K({z:0}),t=new d.K({opacity:1}),r=new d.K(U.current.position),n=new d.K(Q.current.target),o=new d.K({blur:1500,spread:100});e.to({z:P},1e3).chain(r,n,o),t.to({opacity:0},1e3).onStart((()=>{X.current.remove(Z.current),O.current.style.visibility="hidden"})).delay(300),r.to(Q.current.position0,1e3).onComplete((function(){Q.current.reset(),V.current.classList.remove("mask-container"),se(J.current.curve,600),ae.current.isShowGraph3D=!1})),n.to({x:0,y:0,z:0},1e3),o.to({blur:0,spread:0},1e3),e.start(),t.start()})()}}))}},52960:(e,t,r)=>{r.d(t,{A:()=>l});var n=r(36758),o=r.n(n),a=r(40935),i=r.n(a)()(o());i.push([e.id,':host{display:block;width:100%;height:100%}:host([hidden]){display:none}*,\n*::before,\n*::after{box-sizing:border-box}.mask-container{position:absolute;top:0;left:0;width:100%;height:100%;background:#0c1216;z-index:1000}.appwall-container{padding:8px}.appwall{position:relative}.appwall.loading .card-item{pointer-events:none!important}.mask{position:absolute;width:100%;height:100%;top:0;bottom:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center}.mask[hidden]{display:none}.infoWrapper{position:absolute;background:var(--color-fill-bg-base-4);box-shadow:0 0 12px 2px rgba(80,255,255,0.45),inset 0 0 22px 0 #20242a;border:2px solid #50ffff;overflow:hidden}.warningWrapper{position:absolute;background:linear-gradient(180deg,#cc0066 0%,rgba(204,0,102,0.2) 100%),#0f1117ff;box-shadow:0 0 12px 2px rgba(204,0,102,0.4),inset 0 4px 10px 0 rgba(255,255,255,0.65);overflow:hidden}.relation-line{pointer-events:none!important}.closeBtn{visibility:hidden;position:fixed;top:50px;right:50px;width:46px;height:46px;text-align:center;border:1px solid;color:rgb(138 189 255/84%);font-size:20px;line-height:46px;cursor:pointer;background:rgba(138,189,255,0.13);border-image:linear-gradient(135deg,rgba(255,255,255,0.5),rgba(255,255,255,0),rgba(255,255,255,0.33)) 1 1;display:flex;justify-content:center;align-items:center;z-index:1000}.closeBtn:before,\n.closeBtn:after{content:"";width:2px;height:20px;background:linear-gradient(180deg,#3467ff 0%,#98cbff 100%);position:absolute}.closeBtn:before{transform:rotateZ(45deg)}.closeBtn:after{transform:rotateZ(-45deg)}.closeBtn:hover:after,\n.closeBtn:hover:before{background:var(--color-normal-text)}.visibilityAnimate{visibility:hidden;animation:visibility 0.5s both 1s}.trapezoidalLeftOrRightAnimation,\n.trapezoidalTopOrBottomAnimation{background:linear-gradient(180deg,rgba(51,102,255,0.4) 0%,#99ccff 100%);opacity:0.2;position:absolute}.trapezoidalTopOrBottomAnimation{bottom:0;width:100%;left:0;animation:animateTop 1s both}.trapezoidalLeftOrRightAnimation{top:0;right:0;height:100%;animation:animateLeft 1s both}@keyframes animateTop{0%{height:0}100%{height:100%}}@keyframes animateLeft{0%{width:0}100%{width:100%}}@keyframes visibility{0%{visibility:hidden}100%{visibility:visible}}.card-item-container{transition:opacity 0.5s}.status-normal-card{box-shadow:0 0 100px rgba(80,255,255,0.58);border:1px solid rgba(80,255,255,0.58);background:-webkit-gradient(liner,left top,left bottom,from(#002c8d),to(#00123e));background:linear-gradient(to bottom,rgba(80,255,255,1) 0%,rgba(80,255,255,0) 100%)}.status-warning-card{box-shadow:0 0 100px #cc0066;background:-webkit-gradient(liner,left top,left bottom,from(#cc0066),to(rgba(204,0,102,0.2)));background:linear-gradient(to bottom,#cc0066 0%,rgba(204,0,102,0.2) 100%)}',""]);const l=i.toString()},60547:(e,t,r)=>{r.d(t,{A:()=>l});var n=r(36758),o=r.n(n),a=r(40935),i=r.n(a)()(o());i.push([e.id,":host{display:inline-block;width:100%;height:100%}:host([hidden]){display:none}*,\n*::before,\n*::after{box-sizing:border-box}.card-item-container{position:relative;width:100%;height:100%}.card-item{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;border-radius:var(--no-border-radius);border-color:transparent;transition:border-color 0.5s}.status-normal:hover{box-shadow:0 0 100px rgba(80,255,255,0.58);border:1px solid rgba(80,255,255,0.58);background:-webkit-gradient(liner,left top,left bottom,from(#002c8d),to(#00123e));background:linear-gradient(to bottom,rgba(80,255,255,1) 0%,rgba(80,255,255,0) 100%)}.status-warning:hover{box-shadow:0 0 100px #CC0066;background:-webkit-gradient(liner,left top,left bottom,from(#CC0066),to(rgba(204,0,102,0.2)));background:linear-gradient(to bottom,#CC0066 0%,rgba(204,0,102,0.2) 100%)}.card-item-container.status-normal .card-item{background:var(--color-fill-bg-base-4);box-shadow:inset 0px 1px 2px 0px rgba(255,255,255,0.45)}.card-item-container.status-normal:hover .card-item{border:2px solid rgba(80,255,255,0.58)}.card-item-container.status-warning .card-item{background:linear-gradient(180deg,#CC0066 0%,rgba(204,0,102,0.2) 100%);box-shadow:inset 0px 2px 6px 0px rgba(255,255,255,0.65)}.card-item-container.status-warning:hover .card-item{border:none}.card-item-text-container{width:100%;padding:0 12px}.card-item-title,\n.card-item-description{font-size:20px;font-weight:var(--font-weight-500);color:var(--color-normal-text)}.card-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-item-description{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}",""]);const l=i.toString()},32415:(e,t,r)=>{r.d(t,{A:()=>l});var n=r(36758),o=r.n(n),a=r(40935),i=r.n(a)()(o());i.push([e.id,":host{display:inline-block;width:-moz-fit-content;width:fit-content;height:100%}:host([hidden]){display:none}*,\n*::before,\n*::after{box-sizing:border-box}.relation-line{position:relative;width:6px;height:100%;background:var(--color-text-divider-line-1);overflow:hidden}.relation-line::after{content:'';position:absolute;width:100%;height:20%;left:0px;top:0px;animation:lightMove 1000ms ease-in-out infinite,lightOpacity 1000ms ease-in-out infinite}.relation-line.light-color-blue::after{background:linear-gradient(rgba(80,255,255,0) 0%,rgba(80,255,255,1) 90%,#DFFFFF 100%)}.relation-line.light-color-purple::after{background:linear-gradient(rgba(102,0,255,0) 0%,rgba(102,0,255,1) 90%,#B07BFF 100%)}@keyframes lightMove{0%{top:0;transform:translateY(-100%)}100%{top:100%;transform:translateY(0)}}@keyframes lightOpacity{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}",""]);const l=i.toString()},8387:(e,t,r)=>{r.d(t,{A:()=>l});var n=r(36758),o=r.n(n),a=r(40935),i=r.n(a)()(o());i.push([e.id,":host{display:inline-block}:host([hidden]){display:none}*,\n*::before,\n*::after{box-sizing:border-box}.wrapper{position:relative;width:100%;height:100%;padding:30px 24px 35px;left:0;display:flex;flex-direction:column;border-radius:var(--no-border-radius)}.cardName{font-size:var(--title-font-size-strong);line-height:22px;text-align:center;font-weight:var(--font-weight-500);color:var(--color-normal-text);text-shadow:0 1px 4px rgba(51,102,255,0.5);margin-bottom:35px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.descriptions{flex:1;margin-bottom:20px;font-size:var(--auxiliary-font-size-small);overflow:auto;font-weight:var(--font-weight-400)}.descriptionsItem .itemKey{color:var(--color-secondary-text)}.descriptionsItem .itemValue{color:var(--color-strong-text)}.descriptionsItem{display:flex;gap:10px;margin-bottom:12px}.descriptionsItem>div{flex:1;text-align:left;word-break:break-all}.buttonContent{position:absolute;bottom:16px;right:24px;font-size:var(--auxiliary-font-size);color:#99CCFF;cursor:pointer;font-weight:var(--font-weight-500)}.buttonName{margin-left:5px}",""]);const l=i.toString()},79935:(e,t,r)=>{r.d(t,{A:()=>l});var n=r(36758),o=r.n(n),a=r(40935),i=r.n(a)()(o());i.push([e.id,":host{--palette-rgba-white-1:rgba(255,255,255,10%);--palette-rgba-white-2:rgba(255,255,255,20%);--palette-rgba-white-3:rgba(255,255,255,30%);--palette-rgba-white-4:rgba(255,255,255,40%);--palette-rgba-white-5:rgba(255,255,255,50%);--palette-rgba-white-6:rgba(255,255,255,60%);--palette-rgba-white-7:rgba(255,255,255,70%);--palette-rgba-white-8:rgba(255,255,255,80%);--palette-rgba-white-9:rgba(255,255,255,90%);--palette-rgba-white-10:rgba(255,255,255,100%);--palette-rgba-gray-1:rgba(0,0,0,10%);--palette-rgba-gray-2:rgba(0,0,0,20%);--palette-rgba-gray-3:rgba(0,0,0,30%);--palette-rgba-gray-4:rgba(0,0,0,40%);--palette-rgba-gray-5:rgba(0,0,0,50%);--palette-rgba-gray-6:rgba(0,0,0,60%);--palette-rgba-gray-7:rgba(0,0,0,70%);--palette-rgba-gray-8:rgba(0,0,0,80%);--palette-rgba-gray-9:rgba(0,0,0,90%);--palette-rgba-gray-10:rgba(0,0,0,100%);--palette-rgba-blue-gray-2:rgba(101,106,134,20%);--palette-rgba-blue-gray-3:rgba(101,106,134,30%);--palette-rgba-blue-gray-8:rgba(101,106,134,80%);--palette-tech-blue-4-channel:67,127,255;--palette-tech-blue-4:rgb(var(--palette-tech-blue-4-channel));--palette-tech-blue-6-channel:51,102,255;--palette-tech-blue-6:rgb(var(--palette-tech-blue-6-channel));--palette-tech-blue-8-channel:40,69,159;--palette-tech-blue-8:rgb(var(--palette-tech-blue-8-channel));--palette-sea-green-4-channel:131,245,225;--palette-sea-green-4:rgb(var(--palette-sea-green-4-channel));--palette-green-6-channel:81,235,73;--palette-green-6:rgb(var(--palette-green-6-channel));--palette-green-2:rgba(var(--palette-green-6-channel),20%);--palette-lotus-pink-7-channel:204,0,102;--palette-lotus-pink-7:rgb(var(--palette-lotus-pink-7-channel));--palette-red-6-channel:242,39,39;--palette-red-6:rgb(var(--palette-red-6-channel));--palette-red-2:rgba(var(--palette-red-6-channel),20%);--color-fill-global-bg:#0f1014;--color-fill-bg-container-1:var(--palette-rgba-white-1);--color-fill-bg-container-2:var(--palette-rgba-blue-gray-2);--color-fill-bg-container-3:var(--palette-rgba-blue-gray-8);--color-fill-bg-base-1:var(--palette-rgba-blue-gray-2);--color-fill-bg-base-2:rgba(15,16,20,0%);--color-fill-bg-base-3:rgba(0,0,0,20%);--color-fill-bg-base-4:rgba(40,46,58,100%);--color-fill-bg-base-5:rgba(19,25,47,80%);--color-fill-bg-base-6:var(--palette-rgba-blue-gray-3);--color-brand:var(--palette-tech-blue-6);--color-brand-hover:var(--palette-tech-blue-4);--color-brand-active:var(--palette-tech-blue-8);--color-contrast-1:var(--palette-sea-green-4);--color-error:var(--palette-red-6);--color-error-bg:var(--palette-red-2);--color-success:var(--palette-green-6);--color-success-bg:var(--palette-green-2);--color-header-text-big:var(--palette-rgba-white-10);--color-header-text:var(--palette-rgba-white-10);--color-normal-text:var(--palette-rgba-white-10);--color-strong-text:var(--palette-rgba-white-9);--color-auxiliary-text:var(--palette-rgba-white-8);--color-secondary-text:var(--palette-rgba-white-6);--color-disabled-text:var(--palette-rgba-white-4);--color-border-divider-line:var(--palette-rgba-white-1);--color-text-divider-line-1:var(--palette-rgba-white-2);--color-text-divider-line-2:var(--palette-rgba-white-2);--small-border-radius:2px;--medius-border-radius:5px;--larger-border-radius:12px;--container-border-radius:9999px;--no-border-radius:0px;--mask-bg:var(--palette-rgba-gray-7);--title-font-size-larger:30px;--title-font-size-strong:22px;--title-font-size:18px;--normal-font-size:14px;--auxiliary-font-size:16px;--auxiliary-font-size-small:12px;--overview-data-font-size:34px;--statistics-data-font-size:28px;--normal-data-font-size-larger:20px;--normal-data-font-size:16px;--chart-legend-font-size:12px;--chart-tooltips-font-size-1:12px;--chart-tooltips-font-size-2:12px;--chart-axis-x-font-size:12px;--chart-axis-x-font-size-larger:14px;--chart-axis-y-font-size:12px;--chart-axis-y-font-size-larger:14px;--font-weight-600:600;--font-weight-500:500;--font-weight-400:400;--text-shadow:0px 1px 4px #2863ee;--border-width-base:1px;--border-width-double-base:2px;--border-width-tribble-base:3px;--punctate-width-base:1px;--paragraph-width-base:1px;--button-text-color:#40d0db}",""]);const l=i.toString()}}]);
2
- //# sourceMappingURL=1493.cc58ad97.js.map