@next-bricks/data-view 1.1.0 → 1.1.1

package/dist/types.json

@@ -40,6 +40,56 @@
     "events": [],
     "methods": []
   },
+  "data-view.modern-style-page-title": {
+    "properties": [
+      {
+        "name": "pageTitle",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "description",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "backgroundStyle",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "identifier",
+            "name": "CSSProperties"
+          }
+        }
+      },
+      {
+        "name": "leftRoundStyle",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "identifier",
+            "name": "CSSProperties"
+          }
+        }
+      },
+      {
+        "name": "rightRoundStyle",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "identifier",
+            "name": "CSSProperties"
+          }
+        }
+      }
+    ],
+    "events": [],
+    "methods": []
+  },
   "data-view.modern-style-component-title": {
     "properties": [
       {
@@ -287,128 +337,6 @@
       }
     ]
   },
-  "data-view.modern-style-page-title": {
-    "properties": [
-      {
-        "name": "pageTitle",
-        "annotation": {
-          "type": "keyword",
-          "value": "string"
-        }
-      },
-      {
-        "name": "description",
-        "annotation": {
-          "type": "keyword",
-          "value": "string"
-        }
-      },
-      {
-        "name": "backgroundStyle",
-        "annotation": {
-          "type": "reference",
-          "typeName": {
-            "type": "identifier",
-            "name": "CSSProperties"
-          }
-        }
-      },
-      {
-        "name": "leftRoundStyle",
-        "annotation": {
-          "type": "reference",
-          "typeName": {
-            "type": "identifier",
-            "name": "CSSProperties"
-          }
-        }
-      },
-      {
-        "name": "rightRoundStyle",
-        "annotation": {
-          "type": "reference",
-          "typeName": {
-            "type": "identifier",
-            "name": "CSSProperties"
-          }
-        }
-      }
-    ],
-    "events": [],
-    "methods": []
-  },
-  "data-view.dropdown-menu": {
-    "properties": [
-      {
-        "name": "options",
-        "annotation": {
-          "type": "array",
-          "elementType": {
-            "type": "typeLiteral",
-            "members": [
-              {
-                "type": "propertySignature",
-                "key": {
-                  "type": "identifier",
-                  "name": "label"
-                },
-                "annotation": {
-                  "type": "keyword",
-                  "value": "string"
-                },
-                "computed": false
-              },
-              {
-                "type": "propertySignature",
-                "key": {
-                  "type": "identifier",
-                  "name": "value"
-                },
-                "annotation": {
-                  "type": "keyword",
-                  "value": "string"
-                },
-                "computed": false
-              }
-            ]
-          }
-        }
-      },
-      {
-        "name": "value",
-        "annotation": {
-          "type": "keyword",
-          "value": "string"
-        }
-      },
-      {
-        "name": "placeholder",
-        "annotation": {
-          "type": "keyword",
-          "value": "string"
-        }
-      },
-      {
-        "name": "allowClear",
-        "annotation": {
-          "type": "keyword",
-          "value": "boolean"
-        }
-      }
-    ],
-    "events": [
-      {
-        "name": "value.change",
-        "detail": {
-          "annotation": {
-            "type": "keyword",
-            "value": "string"
-          }
-        }
-      }
-    ],
-    "methods": []
-  },
   "data-view.battery-chart": {
     "properties": [
       {
@@ -548,6 +476,78 @@
       }
     ]
   },
+  "data-view.dropdown-menu": {
+    "properties": [
+      {
+        "name": "options",
+        "annotation": {
+          "type": "array",
+          "elementType": {
+            "type": "typeLiteral",
+            "members": [
+              {
+                "type": "propertySignature",
+                "key": {
+                  "type": "identifier",
+                  "name": "label"
+                },
+                "annotation": {
+                  "type": "keyword",
+                  "value": "string"
+                },
+                "computed": false
+              },
+              {
+                "type": "propertySignature",
+                "key": {
+                  "type": "identifier",
+                  "name": "value"
+                },
+                "annotation": {
+                  "type": "keyword",
+                  "value": "string"
+                },
+                "computed": false
+              }
+            ]
+          }
+        }
+      },
+      {
+        "name": "value",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "placeholder",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "allowClear",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
+      }
+    ],
+    "events": [
+      {
+        "name": "value.change",
+        "detail": {
+          "annotation": {
+            "type": "keyword",
+            "value": "string"
+          }
+        }
+      }
+    ],
+    "methods": []
+  },
   "data-view.particle-animation": {
     "properties": [
       {
@@ -853,6 +853,29 @@
     "events": [],
     "methods": []
   },
+  "data-view.cabinet-button": {
+    "properties": [
+      {
+        "name": "buttonStyle",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "qualifiedName",
+            "left": {
+              "type": "identifier",
+              "name": "React"
+            },
+            "right": {
+              "type": "identifier",
+              "name": "CSSProperties"
+            }
+          }
+        }
+      }
+    ],
+    "events": [],
+    "methods": []
+  },
   "data-view.cabinet-node": {
     "properties": [
       {
@@ -913,29 +936,6 @@
     "events": [],
     "methods": []
   },
-  "data-view.cabinet-button": {
-    "properties": [
-      {
-        "name": "buttonStyle",
-        "annotation": {
-          "type": "reference",
-          "typeName": {
-            "type": "qualifiedName",
-            "left": {
-              "type": "identifier",
-              "name": "React"
-            },
-            "right": {
-              "type": "identifier",
-              "name": "CSSProperties"
-            }
-          }
-        }
-      }
-    ],
-    "events": [],
-    "methods": []
-  },
   "data-view.cabinet-app-layer": {
     "properties": [
       {
@@ -1501,6 +1501,29 @@
     "events": [],
     "methods": []
   },
+  "data-view.brick-notification": {
+    "properties": [
+      {
+        "name": "message",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "icon",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "identifier",
+            "name": "GeneralIconProps"
+          }
+        }
+      }
+    ],
+    "events": [],
+    "methods": []
+  },
   "data-view.title-text": {
     "properties": [
       {
@@ -1598,29 +1621,6 @@
       }
     ]
   },
-  "data-view.brick-notification": {
-    "properties": [
-      {
-        "name": "message",
-        "annotation": {
-          "type": "keyword",
-          "value": "string"
-        }
-      },
-      {
-        "name": "icon",
-        "annotation": {
-          "type": "reference",
-          "typeName": {
-            "type": "identifier",
-            "name": "GeneralIconProps"
-          }
-        }
-      }
-    ],
-    "events": [],
-    "methods": []
-  },
   "data-view.tabs-page-title": {
     "properties": [
       {
@@ -1837,11 +1837,6 @@
     "events": [],
     "methods": []
   },
-  "data-view.tech-mesh-base-view": {
-    "properties": [],
-    "events": [],
-    "methods": []
-  },
   "data-view.simple-card-item": {
     "properties": [
       {
@@ -1984,6 +1979,11 @@
       }
     ]
   },
+  "data-view.tech-mesh-base-view": {
+    "properties": [],
+    "events": [],
+    "methods": []
+  },
   "data-view.basic-index-group": {
     "properties": [
       {
@@ -2134,7 +2134,7 @@
       }
     ]
   },
-  "data-view.data-display-flipper": {
+  "data-view.data-display-flipper-fifth": {
     "properties": [
       {
         "name": "flipperTitle",
@@ -2196,19 +2196,12 @@
           "type": "keyword",
           "value": "boolean"
         }
-      },
-      {
-        "name": "separator",
-        "annotation": {
-          "type": "keyword",
-          "value": "string"
-        }
       }
     ],
     "events": [],
     "methods": []
   },
-  "data-view.data-display-flipper-fifth": {
+  "data-view.data-display-flipper": {
     "properties": [
       {
         "name": "flipperTitle",
@@ -2270,6 +2263,13 @@
           "type": "keyword",
           "value": "boolean"
         }
+      },
+      {
+        "name": "separator",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
       }
     ],
     "events": [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/data-view",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/data-view",
   "repository": {
     "type": "git",
@@ -40,5 +40,5 @@
   "peerDependencies": {
     "@next-bricks/icons": "*"
   },
-  "gitHead": "81df7c9878fd64cddee1f39ee733ec4d6aaffb39"
+  "gitHead": "a1438d875f219265d6557d01a0e5c02c7640efc8"
 }

package/dist/chunks/1493.aacf9466.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunk_next_bricks_data_view=self.webpackChunk_next_bricks_data_view||[]).push([[1493],{5562:(e,t,r)=>{r.d(t,{S:()=>M});var n=r(9575),a=r(8769),o=r.n(a),i=r(2445),l=r(5062),c=r(3488),s=r(7807),d=r(7558),u=r(9740),p=(r(1440),r(6041),r(4392),(e,t,r)=>{var n=(new l.Pq0).subVectors(t,e),a=n.length(),o=document.createElement("data-view.app-wall-relation-line");o.style.height="".concat(a,"px"),o.classList.add("relation-line"),o.lightColor=r;var i=new c.on(o),s=(new l.Pq0).lerpVectors(e,t,.5);i.position.copy(s);var d=(new l.PTz).setFromUnitVectors(new l.Pq0(0,1,0).normalize(),n.clone().normalize());return i.setRotationFromQuaternion(d),i}),h=(e,t)=>{var 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)}},g=e=>{var{BW:t,TW:r,d:n,TH:a,BH:o,isLeft:i}=e,s=Math.sqrt(Math.pow(r/2-t/2,2)+Math.pow(n,2)),d=document.createElement("div");d.style.cssText="\n                   width: ".concat(s,"px;\n                   height:").concat(a,"px;\n                   position: relative;\n                   clip-path: polygon(0 0, ").concat(s,"px ").concat(a/2-o/2,"px, ").concat(s,"px ").concat(a/2-o/2+o,"px, 0 ").concat(a,"px);\n                    ");var u=document.createElement("div");u.className="trapezoidalLeftOrRightAnimation",d.appendChild(u);var p=i?[-t/2,0,0]:[t/2,0,0],g=i?[-r/2,0,n]:[r/2,0,n],b=new c.on(d),{centerVector:m,subVector:v}=h(p,g);b.position.copy(m);var x=(new l.PTz).setFromUnitVectors(new l.Pq0(1,0,0).normalize(),v.clone().normalize());return b.setRotationFromQuaternion(x),b},b=e=>{var{BW:t,TW:r,d:n,TH:a,BH:o,isTop:i}=e,s=Math.sqrt(Math.pow(a/2-o/2,2)+Math.pow(n,2)),d=document.createElement("div");d.style.cssText="\n                   width: ".concat(r,"px;\n                   height:").concat(s,"px;\n                   position: relative;\n                   clip-path: polygon(0 0, ").concat(r,"px 0, ").concat(r/2-t/2+t,"px ").concat(s,"px, ").concat(r/2-t/2,"px ").concat(s,"px);\n                   ");var u=document.createElement("div");u.className="trapezoidalTopOrBottomAnimation",d.appendChild(u);var p=new c.on(d),g=i?[0,-o/2,0]:[0,o/2,0],b=i?[0,-a/2,n]:[0,a/2,n],{centerVector:m,subVector:v}=h(g,b);p.position.copy(m);var x=(new l.PTz).setFromUnitVectors(new l.Pq0(0,-1,0).normalize(),v.clone().normalize());return p.setRotationFromQuaternion(x),p},m=e=>{var{objectData:t,leftBtnName:r,clusters:n,columns:a,leftOnClick:o,rightBtnName:i,rightOnClick:l,appName:s}=e,d=600,u=document.createElement("div"),p=new c.on(u);p.position.set(...t.point);var h=t.width,m=t.height,v=1500,x=1200,f=document.createElement("div");f.style.cssText="\n                   width: ".concat(h,"px;\n                   height: ").concat(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                   ");var w=new c.on(f);w.position.z=0,p.add(w);var y=document.createElement("div");y.style.cssText="\n                   width: ".concat(v,"px;\n                   height:").concat(x,"px;\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                   ");var k=document.createElement("data-view.cabinet-thumbnail");k.clusters=null!=n?n:[],k.columns=null!=a?a:4,k.appName=s,y.className="visibilityAnimate",y.appendChild(k);var z=new c.on(y);z.position.set(0,0,d);var T=g({BW:h,TW:v,BH:m,TH:x,d,isLeft:!0}),C=g({BW:h,TW:v,BH:m,TH:x,d,isLeft:!1}),S=b({BW:h,TW:v,BH:m,TH:x,d,isTop:!0}),E=b({BW:h,TW:v,BH:m,TH:x,d,isTop:!1});if(p.add(T,C,E,S),r){var I=document.createElement("div");I.style.cssText="\n                 color: #6BE0FA;\n                 font-size: 28px;\n                 font-weight: 500;\n                 width: ".concat(750,"px;\n                 line-height: 16px;\n                 "),I.className="visibilityAnimate";var P=document.createElement("span");P.style.cursor="pointer",P.innerText=r,I.appendChild(P);var R=new c.on(I);R.position.set(-365,-600,14),R.rotateX(Math.PI/2),z.add(R),P.onpointerdown=o}if(i){var B=document.createElement("div");B.style.cssText="\n                 color: #FFFFFF;\n                 font-size: 30px;\n                 font-weight: 500;\n                 width: ".concat(750,"px;\n                 text-shadow: 0px 1px 4px #3366FF;\n                 text-align: right;\n                 "),B.className="visibilityAnimate";var _=document.createElement("span");_.style.cursor="pointer",_.innerText=i,B.appendChild(_);var M=new c.on(B);M.position.set(365,-600,14),M.rotateX(Math.PI/2),z.add(M),_.onpointerdown=l}return p.add(z),p},v=(e,t,r)=>{if(null==e||!e.length)return[];var n=e.map((e=>(0,u.A)((0,u.A)({},e),{},{x:0,y:0})));if(n.length===t*r)n=n.map(((e,r)=>(0,u.A)((0,u.A)({},e),{},{x:r%t+1,y:parseInt("".concat(r/t))+1})));else{for(var a=t*(r-1),o=n.length-a,i=0;i<a;i++){var l=n[i];l.x=i%t+1,l.y=parseInt("".concat(i/t))+1}for(var c=0;c<o/2;c++){var s=n[c+a],d=n[n.length-1-c];s.x=c+1,s.y=r,s!==d&&(d.x=t-c,d.y=r)}}return n},x=(e,t,r,n)=>{var a=new l.B69;return a.position.x=e.x*t.outerWidth-(r/2+.5)*t.outerWidth,a.position.y=-e.y*t.outerHeight+(n/2+.5)*t.outerHeight,a},f=(e,t,r,n,a,o)=>{var i=new l.B69,c=new l.Pq0,s=((e,t,r,n,a)=>{var o={x:0,y:0,z:0},i=parseInt("".concat(r*t.outerWidth*180))/(a*Math.PI),l=r/2+.5;return o.x=i*Math.sin(Math.PI/(180/((e.x-l)*(a/r)))),o.y=-e.y*t.outerHeight+(n/2+.5)*t.outerHeight,o.z=i-Math.sqrt(i*i-o.x*o.x),o})(e,t,r,n,a);return i.position.x=s.x,i.position.y=s.y,i.position.z=s.z,c.x=0,c.y=i.position.y,c.z=o,i.lookAt(c),i},w=(e,t,r,n)=>{var a=t.height+2*t.margin,o=(t.width+2*t.margin)/e.aspect,i=.5*Math.max(o,a)/Math.tan(e.fov*Math.PI/360)+t.z,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)},y=(e,t)=>{var 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},k=(e,t)=>{var r=t.toUpperCase(),n=e.composedPath().find((e=>null==e?void 0:e.shadowRoot));if((null==n?void 0:n.tagName)===r)return n;var a=document.elementFromPoint(e.clientX,e.clientY),o=null==a?void 0:a.shadowRoot.elementFromPoint(e.clientX,e.clientY);return(null==o?void 0:o.tagName)===r?o:null},z=r(9938),T=r(3373),C=r.n(T),S=[{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}],E=45,I=100,P=300,R=500,B=(e,t,r,n)=>{var a=Math.ceil(Math.sqrt(e*t.outerHeight/(n*t.outerWidth))),o=Math.ceil(e/a),i=parseInt("".concat(a*t.outerWidth*180))/(I*Math.PI);return{maxX:a,maxY:o,radius:i,bounds:{width:2*i*Math.sin(Math.PI*(I/2)/180)+t.outerWidth,height:o*t.outerHeight,margin:r,z:i-i*Math.cos(Math.PI*(I/2)/180)}}},_=(0,z.wrapBrick)("data-view.app-wall-system-card");function M(e){var{relations:t,onSystemCardButtonClick:r,useDblclick:u,useDistanceConfig:h,handleCardDbClick:g,rightBtnOnClick:b,leftBtnOnClick:z,cardBrickName:T,cardSize:M,disabledDefaultClickEvent:A,handleCardClick:D,containerId:F,noRotate:L,boundMargin:W,useSystemPopover:K}=e,[N,H]=(0,a.useState)(null),O=(0,a.useRef)(),q=(0,a.useRef)(),V=(0,a.useRef)(),j=(0,a.useRef)(),G=(0,a.useRef)(),Y=(0,a.useRef)(),X=(0,a.useRef)(),U=(0,a.useRef)(),Q=(0,a.useRef)(),Z=(0,a.useRef)(),J=(0,a.useRef)(),$=(0,a.useRef)({table:[],curve:[]}),ee=(0,a.useRef)([]),te=(0,a.useRef)([]),re=(0,a.useRef)(1),ne=(0,a.useRef)(5e3),ae=(0,a.useRef)({maxX:0,maxY:0,radius:0,bounds:{width:0,height:0,margin:W,z:0}}),oe=(0,a.useRef)({element:null,mouseoverTimer:null,mouseoutTimer:null,clickTimer:null,dblClickTimer:null,isShowGraph3D:!1,isShowAppInfo:!1,isShowRelations:!1,enable:!0}),ie=(0,a.useCallback)((()=>{X.current.render(U.current,Q.current),Z.current.maxDistance=ne.current+R,Z.current.handleResize()}),[]),le=e=>{var t;if(null===(t=oe.current)||void 0===t||!t.element)return null==e?void 0:e();var{__objectCSS:r,__curve:n,__userData:a}=oe.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"===T&&r.element.classList.remove("status-".concat(a.status||"normal","-card")),null===(e=ee.current)||void 0===e||e.forEach((e=>{e.element.style.opacity="1"})),te.current.forEach((e=>{U.current.remove(e)})),te.current=[],ie()})).onComplete((()=>{var t;oe.current.isShowRelations=!1,null==e||e(null===(t=oe.current)||void 0===t?void 0:t.element)})).start()},ce=(e,t)=>{oe.current.enable=!1;for(var r=0;r<ee.current.length;r++){var n=ee.current[r],a=e[r];new d.K(n.position).to({x:a.position.x,y:a.position.y,z:a.position.z},l.cj9.randFloat(t,2*t)).easing(d.GS.Exponential.InOut).start(),new d.K(n.rotation).to({x:a.rotation.x,y:a.rotation.y,z:a.rotation.z},l.cj9.randFloat(t,2*t)).easing(d.GS.Exponential.InOut).start()}new d.K({}).to({},2*t).onUpdate(ie).start().onComplete((()=>{oe.current.enable=!0}))},se=e=>{Z.current.reset();var t=oe.current.element.__objectCSS,r=oe.current.element.__curve;oe.current.enable=!1,oe.current.isShowAppInfo=!0;var n,a={x:r.position.x>0?2*-M.width:2*M.width,y:0,z:(Q.current.position.z-500)/1.5},o={x:0,y:0,z:Q.current.position.z-500},i={x:0,y:r.rotation.y>0?90*-Math.PI/180:90*Math.PI/180,z:0},l={x:0,y:r.rotation.y>0?180*-Math.PI/180:180*Math.PI/180,z:0},c=new d.K(t.position),s=new d.K(t.rotation),u=new d.K(t.position),p=new d.K(t.rotation);e?(c.to(a,500).easing().onComplete((()=>{G.current.hidden=!0,oe.current.element.style.opacity="1"})),s.to(i,500).easing(),u.to({x:r.position.x,y:r.position.y,z:r.position.z},700).easing(),p.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===(n=ee.current)||void 0===n||n.forEach((e=>{t!=e&&(e.element.style.opacity="0.2")})),c.to(a,700).easing().onStart((()=>{j.current.hidden=!1,G.current.hidden=!0})),s.to(i,700).easing(),u.to(o,500).easing().onStart((function(){oe.current.element.style.opacity="0",G.current.style.transition="transition: all .3s ease",G.current.hidden=!1})),p.to(l,500).easing()),c.chain(u).start(),s.chain(p).start(),new d.K({}).to({},1400).onUpdate((()=>{if(ie(),Math.abs(t.rotation.y)>=Math.PI/2){var e=oe.current.element.getBoundingClientRect(),r=1.35,n=e.width*r,a=e.height*r;G.current.style.width="".concat(n,"px"),G.current.style.height="".concat(a,"px"),G.current.style.top="".concat(e.top-(r-1)*a/2,"px"),G.current.style.left="".concat(e.left-(r-1)*n/2,"px")}})).start().onComplete((function(){oe.current.enable=!0,oe.current.isShowAppInfo=!e,j.current.hidden=e}))};return(0,a.useEffect)((()=>{var e;(()=>{var e,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,a=r/n,o=new l.Z58,i=new l.ubm(E,a,.1,1e4),d=new c.a0;d.setSize(r,n),q.current.replaceChildren(d.domElement);var u=new s.V(i,d.domElement);u.rotateSpeed=.5,u.minDistance=500,u.maxDistance=1e4,u.noRotate=L,U.current=o,Q.current=i,Z.current=u,X.current=d})();var t=()=>{e=requestAnimationFrame(t),d.Ay.update(),Z.current.update()};t();var r=F?document.getElementById(F):document.body,n=new ResizeObserver((0,i.debounce)((()=>{var{width:e,height:t}=r.getBoundingClientRect();Q.current.aspect=e/t,Q.current.updateProjectionMatrix(),X.current.setSize(e,t),ie()}),300));return Z.current.addEventListener("change",ie),n.observe(r),()=>{n.disconnect(),Z.current.removeEventListener("change",ie),Z.current.dispose(),d.Ay.removeAll(),Q.current.clear(),U.current.clear(),cancelAnimationFrame(e)}}),[]),(0,a.useEffect)((()=>{var t,r=(null===(t=e.dataSource)||void 0===t?void 0:t.length)||0;r>0&&((e=>{ae.current=B(e,M,W,1/Q.current.aspect)})(r),ne.current=w(Q.current,ae.current.bounds,h?S:[],r),Q.current.position.z=ne.current,Q.current.updateProjectionMatrix(),Z.current.position0.copy(Q.current.position),v(e.dataSource,ae.current.maxX,ae.current.maxY).forEach((e=>{var t,r,n,a,o,i,l,s=document.createElement(T);s.status=e.status,s.cardTitle=null===(t=e.cardItemProps)||void 0===t?void 0:t.cardTitle,s.description=null===(r=e.cardItemProps)||void 0===r?void 0:r.description,s.background=null===(n=e.cardItemProps)||void 0===n?void 0:n.background,s.color=null===(a=e.cardItemProps)||void 0===a?void 0:a.color,s.titleStyle=null===(o=e.cardItemProps)||void 0===o?void 0:o.titleStyle,s.desStyle=null===(i=e.cardItemProps)||void 0===i?void 0:i.desStyle,s.descriptionList=null===(l=e.cardItemProps)||void 0===l?void 0:l.descriptionList;var d="status-".concat((null==e?void 0:e.status)||"normal");s.className="card-item-container  ".concat(d),s.style.width="".concat(M.width,"px"),s.style.height="".concat(M.height,"px"),s.classList.add("card-item-wrap");var u=new c.on(s);u.position.set(4e3*Math.random()-2e3,4e3*Math.random()-2e3,4e3*Math.random()-2e3),U.current.add(u),ee.current.push(u);var p=x(e,M,ae.current.maxX,ae.current.maxY);$.current.table.push(p);var h=f(e,M,ae.current.maxX,ae.current.maxY,I,ae.current.radius);$.current.curve.push(h),u.userData=e,s.__objectCSS=u,s.__userData=e,s.__curve=h})),ce($.current.curve,1e3));return()=>{Z.current.reset(),d.Ay.removeAll(),ee.current.map((e=>{U.current.remove(e)})),ee.current=[],$.current={table:[],curve:[]},oe.current={element:null,mouseoverTimer:null,mouseoutTimer:null,clickTimer:null,dblClickTimer:null,enable:!0,isShowAppInfo:!1,isShowGraph3D:!1,isShowRelations:!1}}}),[e.dataSource,h]),(0,a.useEffect)((()=>{if(K){var e=document.createElement("monitoring.sys-popover");e.style.position="absolute",e.style.display="none",Y.current=e,document.querySelector("#main-mount-point").appendChild(e)}}),[K]),(0,a.useEffect)((()=>{var e=O.current,r=e=>{if(clearTimeout(oe.current.mouseoverTimer),oe.current.isShowAppInfo||oe.current.isShowGraph3D||!oe.current.enable)return!1;var r=k(e,T);if(K){var n,a,o=(null===(n=Y.current)||void 0===n?void 0:n.instanceId)!=(null==r||null===(a=r.__userData)||void 0===a||null===(a=a.data)||void 0===a?void 0:a.instanceId);r&&o||(Y.current.style.display="none",Y.current.loading=!0)}oe.current.mouseoverTimer=window.setTimeout((()=>{le((()=>{r&&!oe.current.isShowAppInfo&&(e=>{var{__objectCSS:r,__userData:n}=e,a=r.rotation.y,o=r.element.getBoundingClientRect(),i={x:r.position.x+50*Math.sin(a),y:r.position.y+15,z:r.position.z+100*Math.cos(a)},l=o.width>=M.width?re.current:Math.min(M.width/o.width,M.height/o.height);oe.current.isShowRelations=!0,new d.K(r.rotation).onStart((()=>{"data-view.app-wall-card-item"===T&&r.element.classList.add("status-".concat(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(){var n,a,o,i,l,c,s,d;if(l=y(n=r,t),c=n.userData,null==l||l.forEach((e=>{e.source===c.key?(i=ee.current.find((t=>t.userData.key===e.target)),o=i&&p(n.position,i.position,"blue")):(i=ee.current.find((t=>t.userData.key===e.source)),o=i&&p(i.position,n.position,"purple")),o&&(te.current.push(o),U.current.add(o))})),null===(a=ee.current)||void 0===a||a.forEach((e=>{n!=e&&l.every((t=>t.source!=e.userData.key&&t.target!=e.userData.key))&&(e.element.style.opacity="0.2")})),ie(),oe.current.element=e,K&&(null===(s=Y.current)||void 0===s?void 0:s.instanceId)!=(null==e||null===(d=e.__userData)||void 0===d||null===(d=d.data)||void 0===d?void 0:d.instanceId)){var u;Y.current.loading=!0;var h=e.getBoundingClientRect(),g=h.left+h.width/2,b=h.top+h.height/2;Y.current.instanceId=null==e||null===(u=e.__userData)||void 0===u||null===(u=u.data)||void 0===u?void 0:u.instanceId,Y.current.style.left="".concat(g,"px"),Y.current.style.top="".concat(b,"px"),Y.current.style.display="block"}})).start()})(r),clearTimeout(oe.current.mouseoverTimer)}))}),300)},n=e=>{if(oe.current.isShowAppInfo||oe.current.isShowGraph3D||!oe.current.enable)return!1;var t=k(e,T);if(K){var r,n=Y.current.instanceId!=(null==t||null===(r=t.__userData)||void 0===r||null===(r=r.data)||void 0===r?void 0:r.instanceId);t&&n||(Y.current.style.display="none",Y.current.loading=!0)}},a=e=>{if(clearTimeout(oe.current.clickTimer),clearTimeout(oe.current.mouseoverTimer),oe.current.isShowAppInfo||oe.current.isShowGraph3D||!oe.current.enable)return!1;var t=k(e,T);oe.current.clickTimer=window.setTimeout((function(){clearTimeout(oe.current.mouseoverTimer),le((()=>{t&&(clearTimeout(oe.current.clickTimer),clearTimeout(oe.current.mouseoverTimer),e.stopPropagation(),oe.current.element=t,A?null==D||D(t.__userData):(H(t.__userData),se(!1)))}))}),200)},o=e=>{if(clearTimeout(oe.current.clickTimer),clearTimeout(oe.current.mouseoverTimer),clearTimeout(oe.current.dblClickTimer),oe.current.isShowAppInfo||oe.current.isShowGraph3D||!oe.current.enable)return!1;var t=k(e,T),{__userData:r,__objectCSS:n}=t;oe.current.isShowGraph3D=!0,oe.current.dblClickTimer=window.setTimeout((function(){le((()=>{var e;if(u||(null===(e=r.trapezoidalProps)||void 0===e||null===(e=e.clusters)||void 0===e?void 0:e.length)<1)g(r),oe.current.isShowGraph3D=!1;else if(t){clearTimeout(oe.current.mouseoverTimer),clearTimeout(oe.current.clickTimer),q.current.classList.add("mask-container"),Z.current.reset();var a={x:n.position.x,y:860+M.height*(ae.current.maxY-r.y)},o=new d.K(Q.current.position),i=new d.K({opacity:0,scale:0,borderLeftWidth:0,borderRightWidth:0,borderTopWidth:0,borderBottomWidth:0}),l=new d.K({z:0}),c=new d.K(Q.current.position),s=new d.K(Z.current.target),p=new d.K({blur:12,spread:0});ce($.current.table,600),o.to({x:0,y:-3600,z:1600},1e3).chain(p,i,l),i.to({opacity:1},700).onStart((()=>{var e,t,a,o,i,l=m({objectData:{width:M.width,height:M.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===(a=r.trapezoidalProps)||void 0===a?void 0:a.appName,leftBtnName:null===(o=r.trapezoidalProps)||void 0===o?void 0:o.leftBtnName,rightBtnName:null===(i=r.trapezoidalProps)||void 0===i?void 0:i.rightBtnName,rightOnClick:()=>b(r),leftOnClick:()=>z(r)});J.current=l,U.current.add(l)})),l.to({z:P},1e3).delay(230).chain(c,s),c.to({x:a.x,y:-3600+a.y},1e3),s.to({x:a.x,y:a.y},1e3).onComplete((function(){V.current.style.visibility="visible"})),o.start()}}))}),200)};return e.addEventListener("dblclick",o),e.addEventListener("click",a),e.addEventListener("mouseover",r),e.addEventListener("mouseout",n),()=>{e.removeEventListener("mouseover",r),e.removeEventListener("mouseout",n),e.removeEventListener("click",a),e.removeEventListener("dblclick",o)}}),[A,D]),o().createElement("div",{className:"appwall-container",ref:O},o().createElement("div",{className:"appwall",ref:q}),o().createElement("div",{className:"mask",ref:j,onClick:()=>{oe.current.enable&&se(!0)},hidden:!0},o().createElement(_,(0,n.A)({},null==N?void 0:N.systemCardProps,{onClick:e=>e.stopPropagation(),handleClick:()=>r(N),ref:G,className:C()({infoWrapper:"normal"===(null==N?void 0:N.status),warningWrapper:"warning"===(null==N?void 0:N.status)})}))),o().createElement("div",{className:"closeBtn",ref:V,onClick:()=>{(()=>{d.Ay.removeAll();var e=new d.K({z:0}),t=new d.K({opacity:1}),r=new d.K(Q.current.position),n=new d.K(Z.current.target),a=new d.K({blur:1500,spread:100});e.to({z:P},1e3).chain(r,n,a),t.to({opacity:0},1e3).onStart((()=>{U.current.remove(J.current),V.current.style.visibility="hidden"})).delay(300),r.to(Z.current.position0,1e3).onComplete((function(){Z.current.reset(),q.current.classList.remove("mask-container"),ce($.current.curve,600),oe.current.isShowGraph3D=!1})),n.to({x:0,y:0,z:0},1e3),a.to({blur:0,spread:0},1e3),e.start(),t.start()})()}}))}},2960:(e,t,r)=>{r.d(t,{A:()=>l});var n=r(6758),a=r.n(n),o=r(935),i=r.n(o)()(a());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()},547:(e,t,r)=>{r.d(t,{A:()=>l});var n=r(6758),a=r.n(n),o=r(935),i=r.n(o)()(a());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()},2415:(e,t,r)=>{r.d(t,{A:()=>l});var n=r(6758),a=r.n(n),o=r(935),i=r.n(o)()(a());i.push([e.id,":host{display:inline-block;width:-webkit-fit-content;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(6758),a=r.n(n),o=r(935),i=r.n(o)()(a());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()},9935:(e,t,r)=>{r.d(t,{A:()=>l});var n=r(6758),a=r.n(n),o=r(935),i=r.n(o)()(a());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()}}]);
-//# sourceMappingURL=1493.aacf9466.js.map