@riil-frontend/component-topology 9.0.0-a.16 → 9.0.0-a.18

package/es/core/components/TopoView/GraphViewPanel.js

@@ -12,7 +12,8 @@ export default function GraphViewPanel(props) {
     themeName: themeName,
     hideBackgroundColor: hideBackgroundColor
   }),
-      canvasColor = _useCanvasTheme.canvasColor;
+      canvasColor = _useCanvasTheme.canvasColor,
+      canvasbackgroundImage = _useCanvasTheme.canvasbackgroundImage;
 
   useEffect(function () {
     // eslint-disable-next-line no-underscore-dangle
@@ -31,7 +32,7 @@ export default function GraphViewPanel(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: styles.viewPanel,
     style: {
-      background: canvasColor
+      background: canvasColor || "url(" + canvasbackgroundImage + ")"
     },
     onFocus: onFocus
   }, props.children);

package/es/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js

@@ -21,7 +21,7 @@ export default function CanvasPanel(props) {
     }, /*#__PURE__*/React.createElement(_Tag.Selectable, {
       className: styles.tag,
       style: {
-        background: item.color
+        background: item.color || "url(" + item.backgroundImageThumbnail + ")"
       },
       checked: item.name === canvasThemeName,
       onChange: function onChange(checked) {

package/es/core/editor/config/themes.js

@@ -101,5 +101,50 @@ var THEMES = [_extends({}, baseLightTheme, {
       'group.border.radius': 3
     }
   }
+}, {
+  name: 'poly',
+  label: 'Poly',
+  toolsTheme: 'black',
+  backgroundImage: '/img/topo/themes/poly.png',
+  backgroundImageThumbnail: '/img/topo/themes/poly_thumbnail.png',
+  globalNodeLabelStyle: {
+    color: '#ffffff'
+  },
+  globalEdgeTagStyle: {
+    color: '#E4E9EE',
+    background: 'rgba(6, 54, 88, 1)',
+    // 背景色，不传使用默认内置 @V1.2 index.js:1 #063658 
+    borderColor: '#08A5F4' // 边框颜色，不传使用默认内置。用于主题切换 @V1.2
+
+  },
+  text: {
+    color: '#ffffff'
+  },
+  group: {
+    style: {
+      'group.title.background': 'rgba(0,0,0,0)',
+      // 标题背景颜色 #08A5F4
+      'group.title.color': '#8FECFF',
+      // 标题文字颜色
+      'group.title.border.color': '#ffffff',
+      // 边框颜色
+      'group.background': 'rgba(29,55,113,0.6)',
+      'group.border.color': '#ffffff' // 边框颜色
+
+    }
+  },
+  cluster: {
+    style: {
+      'group.title.color': '#FFFFFF',
+      // 标题文字颜色
+      'group.title.background': 'rgba(14,44,69,1)',
+      // 标题背景颜色 #0E2C45
+      'group.background': 'rgba(14,44,69,1)',
+      // #0E2C45
+      'group.border.color': '#08A5F4',
+      // 边框颜色
+      'group.border.radius': 3
+    }
+  }
 }];
 export default THEMES;

package/es/core/hooks/useCanvasTheme.js

@@ -23,6 +23,11 @@ var themeMap = [{
   label: '深色',
   color: '#031425',
   toolsTheme: 'black'
+}, {
+  name: 'poly',
+  label: 'Poly',
+  toolsTheme: 'black',
+  backgroundImage: '/img/topo/themes/poly.png'
 }].reduce(function (map, item) {
   var _extends2;
 
@@ -38,6 +43,7 @@ export default function useCanvasTheme(props) {
 
   var themeConfig = themeMap[themeName || 'white'];
   var canvasColor = hideBackgroundColor ? null : themeConfig.color;
+  var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
   useEffect(function () {
     // 设置
     if (graphLoaded && themeConfig) {
@@ -60,6 +66,7 @@ export default function useCanvasTheme(props) {
     }
   }, [graphLoaded, canvasColor]);
   return {
-    canvasColor: canvasColor
+    canvasColor: canvasColor,
+    canvasbackgroundImage: canvasbackgroundImage
   };
 }

package/es/core/models/TopoApp.js

@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel";
 import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
 
-var version = typeof "9.0.0-a.16" === 'string' ? "9.0.0-a.16" : null;
+var version = typeof "9.0.0-a.18" === 'string' ? "9.0.0-a.18" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.js

@@ -12,6 +12,20 @@ export default function LinkTopo(props) {
     linkCi: data,
     linkMetricCodes: linkMetricCodes
   });
+  var linkMetrics = [].concat(metricData.linkMetrics, metricData.linkOther);
+  var linkMetricsList = [];
+
+  if (linkMetrics.length > 0) {
+    linkMetricCodes.forEach(function (e) {
+      var linkMetricsData = linkMetrics.filter(function (i) {
+        return e == i.code;
+      });
+      if (linkMetricsData.length > 0) linkMetricsList.push(linkMetricsData[0]);
+    });
+    metricData.linkMetrics = linkMetricsList;
+    metricData.linkOther = [];
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: styles.container
   }, /*#__PURE__*/React.createElement(CrucialLinkTopo, _extends({

package/es/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/services/index.js

@@ -318,7 +318,7 @@ function _queryRetansRatioNetDelayRatio() {
             if (retansRatioNetDelayRatioCodes.includes('netDelayRatio')) {
               linkOther.push({
                 'code': 'netDelayRatio',
-                'name': '下行RTT时延',
+                'name': 'RTT时延',
                 'ts': result.time,
                 'value': (result.upNetDelayRatio * 1).toFixed(2) + ' ms' + '|' + (result.downNetDelayRatio * 1).toFixed(2) + ' ms'
               });

package/es/networkTopo/models/LinkDynamicStyleExecutor.js

@@ -5,15 +5,15 @@ import { getLinksBetweenNodes } from "../utils/linkUtil"; // network_link.actual
 
 function calcEdgeWidth(actualBandwidth) {
   if (!actualBandwidth) {
-    return 2;
+    return 3;
   } else if (actualBandwidth <= 100) {
-    return 2;
-  } else if (actualBandwidth <= 1000) {
     return 3;
-  } else if (actualBandwidth <= 10000) {
+  } else if (actualBandwidth <= 1000) {
     return 4;
-  } else if (actualBandwidth > 10000) {
+  } else if (actualBandwidth <= 10000) {
     return 5;
+  } else if (actualBandwidth > 10000) {
+    return 6;
   }
 }
 

package/lib/core/components/TopoView/GraphViewPanel.js

@@ -26,7 +26,8 @@ function GraphViewPanel(props) {
     themeName: themeName,
     hideBackgroundColor: hideBackgroundColor
   }),
-      canvasColor = _useCanvasTheme.canvasColor;
+      canvasColor = _useCanvasTheme.canvasColor,
+      canvasbackgroundImage = _useCanvasTheme.canvasbackgroundImage;
 
   (0, _react.useEffect)(function () {
     // eslint-disable-next-line no-underscore-dangle
@@ -45,7 +46,7 @@ function GraphViewPanel(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _TopoViewModule["default"].viewPanel,
     style: {
-      background: canvasColor
+      background: canvasColor || "url(" + canvasbackgroundImage + ")"
     },
     onFocus: onFocus
   }, props.children);

package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js

@@ -36,7 +36,7 @@ function CanvasPanel(props) {
     }, /*#__PURE__*/_react["default"].createElement(_tag["default"].Selectable, {
       className: _CanvasPanelModule["default"].tag,
       style: {
-        background: item.color
+        background: item.color || "url(" + item.backgroundImageThumbnail + ")"
       },
       checked: item.name === canvasThemeName,
       onChange: function onChange(checked) {

package/lib/core/editor/config/themes.js

@@ -109,6 +109,51 @@ var THEMES = [(0, _extends2["default"])({}, baseLightTheme, {
       'group.border.radius': 3
     }
   }
+}, {
+  name: 'poly',
+  label: 'Poly',
+  toolsTheme: 'black',
+  backgroundImage: '/img/topo/themes/poly.png',
+  backgroundImageThumbnail: '/img/topo/themes/poly_thumbnail.png',
+  globalNodeLabelStyle: {
+    color: '#ffffff'
+  },
+  globalEdgeTagStyle: {
+    color: '#E4E9EE',
+    background: 'rgba(6, 54, 88, 1)',
+    // 背景色，不传使用默认内置 @V1.2 index.js:1 #063658 
+    borderColor: '#08A5F4' // 边框颜色，不传使用默认内置。用于主题切换 @V1.2
+
+  },
+  text: {
+    color: '#ffffff'
+  },
+  group: {
+    style: {
+      'group.title.background': 'rgba(0,0,0,0)',
+      // 标题背景颜色 #08A5F4
+      'group.title.color': '#8FECFF',
+      // 标题文字颜色
+      'group.title.border.color': '#ffffff',
+      // 边框颜色
+      'group.background': 'rgba(29,55,113,0.6)',
+      'group.border.color': '#ffffff' // 边框颜色
+
+    }
+  },
+  cluster: {
+    style: {
+      'group.title.color': '#FFFFFF',
+      // 标题文字颜色
+      'group.title.background': 'rgba(14,44,69,1)',
+      // 标题背景颜色 #0E2C45
+      'group.background': 'rgba(14,44,69,1)',
+      // #0E2C45
+      'group.border.color': '#08A5F4',
+      // 边框颜色
+      'group.border.radius': 3
+    }
+  }
 }];
 var _default = THEMES;
 exports["default"] = _default;

package/lib/core/hooks/useCanvasTheme.js

@@ -36,6 +36,11 @@ var themeMap = [{
   label: '深色',
   color: '#031425',
   toolsTheme: 'black'
+}, {
+  name: 'poly',
+  label: 'Poly',
+  toolsTheme: 'black',
+  backgroundImage: '/img/topo/themes/poly.png'
 }].reduce(function (map, item) {
   var _extends2;
 
@@ -52,6 +57,7 @@ function useCanvasTheme(props) {
 
   var themeConfig = themeMap[themeName || 'white'];
   var canvasColor = hideBackgroundColor ? null : themeConfig.color;
+  var canvasbackgroundImage = hideBackgroundColor ? null : themeConfig.backgroundImage;
   (0, _react.useEffect)(function () {
     // 设置
     if (graphLoaded && themeConfig) {
@@ -74,6 +80,7 @@ function useCanvasTheme(props) {
     }
   }, [graphLoaded, canvasColor]);
   return {
-    canvasColor: canvasColor
+    canvasColor: canvasColor,
+    canvasbackgroundImage: canvasbackgroundImage
   };
 }

package/lib/core/models/TopoApp.js

@@ -56,7 +56,7 @@ var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 var _CiCache = _interopRequireDefault(require("./cache/CiCache"));
 
 // eslint-disable-next-line no-undef
-var version = typeof "9.0.0-a.16" === 'string' ? "9.0.0-a.16" : null;
+var version = typeof "9.0.0-a.18" === 'string' ? "9.0.0-a.18" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/LinkTopo.js

@@ -25,6 +25,20 @@ function LinkTopo(props) {
     linkCi: data,
     linkMetricCodes: linkMetricCodes
   });
+  var linkMetrics = [].concat(metricData.linkMetrics, metricData.linkOther);
+  var linkMetricsList = [];
+
+  if (linkMetrics.length > 0) {
+    linkMetricCodes.forEach(function (e) {
+      var linkMetricsData = linkMetrics.filter(function (i) {
+        return e == i.code;
+      });
+      if (linkMetricsData.length > 0) linkMetricsList.push(linkMetricsData[0]);
+    });
+    metricData.linkMetrics = linkMetricsList;
+    metricData.linkOther = [];
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _LinkTopoModule["default"].container
   }, /*#__PURE__*/_react["default"].createElement(_componentCrucialLinkTopo["default"], (0, _extends2["default"])({

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/components/LinkTopo/services/index.js

@@ -351,7 +351,7 @@ function _queryRetansRatioNetDelayRatio() {
             if (retansRatioNetDelayRatioCodes.includes('netDelayRatio')) {
               linkOther.push({
                 'code': 'netDelayRatio',
-                'name': '下行RTT时延',
+                'name': 'RTT时延',
                 'ts': result.time,
                 'value': (result.upNetDelayRatio * 1).toFixed(2) + ' ms' + '|' + (result.downNetDelayRatio * 1).toFixed(2) + ' ms'
               });

package/lib/networkTopo/models/LinkDynamicStyleExecutor.js

@@ -16,15 +16,15 @@ var _linkUtil = require("../utils/linkUtil");
 // network_link.actual_bandwidth
 function calcEdgeWidth(actualBandwidth) {
   if (!actualBandwidth) {
-    return 2;
+    return 3;
   } else if (actualBandwidth <= 100) {
-    return 2;
-  } else if (actualBandwidth <= 1000) {
     return 3;
-  } else if (actualBandwidth <= 10000) {
+  } else if (actualBandwidth <= 1000) {
     return 4;
-  } else if (actualBandwidth > 10000) {
+  } else if (actualBandwidth <= 10000) {
     return 5;
+  } else if (actualBandwidth > 10000) {
+    return 6;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "9.0.0-a.16",
+  "version": "9.0.0-a.18",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -116,6 +116,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@9.0.0-a.16/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@9.0.0-a.18/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }