@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/components/ScatterChart/handleMarkPoint.js

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Token from '../../feature/token';
+import { isObject } from '../../util/type';
+import chartToken from './chartToken';
+
+export default function handleMarkPoint(iChartOpt) {
+  const markData = {};
+  const series = [];
+  const markPoint = iChartOpt.markPoint;
+  const data = iChartOpt.data;
+  data && isObject(data) && Object.keys(data).forEach(key => {
+    let errorSeriesName = '';
+    let errorSeriesData = [];
+    data[key].forEach((item, index) => {
+      markPoint && Object.keys(markPoint).forEach(v => {
+        if (v === key) {
+          const flagArr = [];
+          markPoint[v].forEach((axis,i)=>{
+            let flag = true;
+            if (Number(item[i]) < Number(axis)) {
+              flag = false;
+            }
+            flagArr.push(flag);
+          })
+          if(!flagArr.includes(false)){
+            errorSeriesName = v;
+            errorSeriesData.push(item);
+            data[key].splice(index, 1);
+          }
+        }
+      });
+    });
+    // 将超出临界值红点的数据放在一个图例里
+    errorSeriesName && (markData[`${errorSeriesName}`] = errorSeriesData);
+  });
+  const {colorError}=Token.config.colorState
+  // 设置iChartOpt中超过markPoint点的数据
+  Object.keys(markData).forEach(item => {
+    const seriesItem = {
+      // 将error的series数据和原图例的name保持一致，让echarts只渲染正确的图例数
+      name: item,
+      symbolSize: iChartOpt.symbolSize || 10,
+      data: markData[item],
+      type: 'scatter',
+      emphasis: {
+        focus: 'series',
+        scale: 1.3,
+        itemStyle: {
+          color: chartToken.color,
+          borderWidth: 4,
+        }
+      },
+      itemStyle: {
+        color:colorError,
+        borderColor: colorError,
+        borderWidth: 0,
+      }
+    };
+    if (seriesItem.data.length) {
+      series.push(seriesItem);
+    }
+  });
+  return series;
+}

package/src/components/charts/components/ScatterChart/handleOptipn.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import xAxis from '../../option/config/xAxis';
+import yAxis from '../../option/config/yAxis';
+import grid from '../../option/config/grid';
+import tooltip from '../../option/config/tooltip';
+import defendXSS from '../../util/defendXSS';
+import { CHART_TYPE } from '../../util/constants';
+
+/**
+ * Tips提示框回调函数
+ */
+function toolTipFormatter(params) {
+  const data = params.data;
+  const [x, y, name] = data;
+  let htmlStrings = `<div style="margin-bottom:4px;">
+  名称${name || ''}
+                            </div>`;
+  htmlStrings += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">x维度</span>
+                                <span>${defendXSS(x)}</span>
+                            </div>`;
+  htmlStrings += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">y维度</span>
+                                <span>${defendXSS(y)}</span>
+                            </div>`;
+  return htmlStrings;
+}
+
+function handleXaxis(baseOpt, iChartOpt) {
+  const basicXaxis = xAxis(iChartOpt);
+  basicXaxis[0].type = 'value';
+  baseOpt.xAxis = basicXaxis;
+}
+
+function handleYaxis(baseOpt, iChartOpt) {
+  const basicYaxis = yAxis(baseOpt, iChartOpt, CHART_TYPE.SCATTER);
+  baseOpt.yAxis = basicYaxis;
+}
+
+function handleTooltip(baseOpts, iChartOpt) {
+  const basicTooltip = tooltip(iChartOpt, CHART_TYPE.SCATTER);
+  if (!iChartOpt.tipHtml && !iChartOpt?.tooltip?.formatter) {
+    basicTooltip.formatter = toolTipFormatter;
+  }
+  basicTooltip.trigger = 'item';
+  baseOpts.tooltip = basicTooltip;
+}
+
+function handleGrid(baseOpt, iChartOpt) {
+  const basicGrid = grid(iChartOpt);
+  baseOpt.grid = basicGrid;
+}
+
+export { handleXaxis, handleYaxis, handleGrid, handleTooltip };

package/src/components/charts/components/ScatterChart/handleSeries.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { getColor } from '../../util/color';
+import chartToken from './chartToken';
+import handleMarkPoint from './handleMarkPoint';
+import { isObject } from '../../util/type';
+
+export function handleSeries(baseOpt, iChartOpt) {
+  const series = [];
+  const errorSeries = handleMarkPoint(iChartOpt);
+  const data = iChartOpt.data;
+  // 设置iChartOpt中未超过markPoint点的数据
+  data && isObject(data) && Object.keys(data).forEach(item => {
+    const seriesItem = {
+      name: item,
+      symbolSize: iChartOpt.symbolSize || 10,
+      data: data[item],
+      type: 'scatter',
+      emphasis: {
+        itemStyle: {
+          color: chartToken.color,
+          borderWidth: 4,
+        },
+        focus: 'series',
+        scale: 1.3,
+      },
+      itemStyle: {
+        color(param) {
+          return getColor(iChartOpt.color, param.seriesIndex);
+        },
+        borderColor: () => {},
+        borderWidth: 0,
+      }
+    };
+    series.push(seriesItem);
+  });
+  series.push(...errorSeries);
+  baseOpt.series = series;
+}

package/src/components/charts/components/ScatterChart/index.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { handleSeries } from './handleSeries';
+import { handleXaxis, handleYaxis, handleGrid, handleTooltip } from './handleOptipn';
+import init from '../../option/init';
+import RectCoordSys from '../../option/RectSys';
+import { CHART_TYPE } from '../../util/constants';
+
+class ScatterChart {
+
+  static name = CHART_TYPE.SCATTER
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    this.iChartOption = init(iChartOption);
+    this.chartInstance = chartInstance;
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption();
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption;
+    // 图表数据
+    const data = [];
+    Object.keys(iChartOption.data).forEach(v => {
+      data.push(...iChartOption.data[v]);
+    });
+    if (!data.length) return;
+    // 图例数据
+    RectCoordSys(this.baseOption, iChartOption, CHART_TYPE.SCATTER);
+    // 图表x轴
+    handleXaxis(this.baseOption, iChartOption);
+    // 图表y轴
+    handleYaxis(this.baseOption, iChartOption);
+    // 设置chartpadding
+    handleGrid(this.baseOption, iChartOption);
+    //  图表鼠标悬浮提示框
+    handleTooltip(this.baseOption, iChartOption);
+    // 图表的series
+    handleSeries(this.baseOption, iChartOption);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption() { }
+}
+
+export default ScatterChart;

package/src/components/charts/components/SnowFlakeChart/BranchManager.js

@@ -0,0 +1,324 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { insertDom, setStyle, pctToNumber, degPositive, getSideLength, pxToNumber, getStyle, getWaistLength, getTriangleAngle, getCssNumber } from './util';
+import LeafManager from './LeafManager';
+import NodeManager from './NodeManager';
+import LineManager from './line';
+import TagManager from './TagManager';
+
+class BranchManager {
+  constructor(data, container, snowInstance, subRootConfig = {}, parentInstance = {}) {
+    const { option, imageList, drag } = snowInstance; // 雪花图实例
+    const { parentDeg = 0, isSubRoot = false, style = {}, equalDeg = 0 } = subRootConfig; // 递归生成次级根节点，携带来的配置
+    const { leafsArr = [], centerDomArr = [], centerLineArr = [],
+      centerTagArr = [], activeMac = null, leafTrigger = null, distance = null } = parentInstance; // 父级branchManager实例
+    this.data = data;
+    this.container = container;
+    this.snowInstance = snowInstance;
+    this.option = option;
+    this.imageList = imageList;
+    this.drag = drag;
+    this.chartContainer = snowInstance.container; // 画布容器,给Node下钻时，管理画布容器的类名
+    this.parentDeg = parentDeg; // 父节点的旋转角度
+    this.isSubRoot = isSubRoot; // 是否为次级根节点
+    this.leafsArr = leafsArr; // Leaf的集合
+    this.centerDomArr = centerDomArr; // 中心dom集合
+    this.centerLineArr = centerLineArr; // 中心line集合
+    this.centerTagArr = centerTagArr; // 中心tag集合
+    this.activeMac = activeMac; // 下钻选中的设备mac
+    this.leafTrigger = leafTrigger; // 触发下钻的是否为叶子节点
+    this.distance = distance;
+    this.leafData = []; // 叶子节点数据
+    this.branchData = []; // 分支节点数据
+    this.equalDeg = equalDeg;
+    this.mount(data, style);
+  }
+
+  mount(data, style) {
+    const group = this.grouping(style);
+    this.initCenterDom(data, group);
+    this.loopData(data.isRoot ? { ...data, level: 0 } : data, group);
+  }
+
+  // dom分组
+  grouping(style) {
+    // 雪花图容器
+    const wrapper = insertDom(this.container, { class: `sfc-branch ${!this.isSubRoot ? 'rootBranch' : ''}` }, { ...style });
+    wrapper.setAttribute('data-mac', this.data.mac);
+    // 用于多级嵌套，反向旋转回正内部dom
+    const coreWrapper = insertDom(wrapper, { class: 'sfc-core' },
+      { transform: `rotate(${360 - this.parentDeg}deg)` });
+    const nodeWrapper = insertDom(coreWrapper, { class: 'sfc-node-container' });
+    const lineWrapper = insertDom(coreWrapper, { class: 'sfc-line-container' });
+    const tagWrapper = insertDom(coreWrapper, { class: 'sfc-tag-container' });
+    this.wrapper = wrapper;
+    return { wrapper, coreWrapper, nodeWrapper, lineWrapper, tagWrapper };
+  }
+
+  // 中心dom、中心到子网关的连线和tag。容器创建及处理
+  initCenterDom(data, { nodeWrapper }) {
+    this.centerDom = new NodeManager(nodeWrapper, data, 0, true, this);
+    this.centerDomArr.push(this.centerDom);
+    // 更新从网关的宽度，要在自身render完毕，和其叶子节点render之间调用（故不能在upDateSubRootStyle回调中执行）
+    this.centerDom.setSubRootWidth();
+  }
+
+  // 循环处理：外层node、line、tag
+  loopData(data, group) {
+    // 数据拆分为叶子和非叶子两种类型
+    data.children?.forEach((dataItem) => {
+      if (dataItem.isAP || dataItem.children?.length) {
+        this.branchData.push({ ...dataItem, level: data.level + 1 });
+      } else {
+        this.leafData.push({ ...dataItem, level: data.level + 1 });
+      }
+    });
+    const { coreWrapper } = group
+    if(!this.leafData.length && !this.option.overAll){// 家庭视口下没有叶子节点的分支添加额外类名
+       coreWrapper.classList.add('noLeafChild')
+    }
+    // 分支节点平分角度，将整个圆分为几个区间，几个区间再去分布叶子
+    let degInterval = this.arrangSubRoot(this.branchData, group);
+    // 在平分的区间内排布叶子节点
+    this.arrangeLeaf(degInterval, group);
+  }
+
+
+  arrangSubRoot(data, group) {
+    let startAngle = 0; // 起始角度，给父节点留出一个位置
+    let splitNum = data.length; // 360拆分成多少数量
+    let degInterval = [this.isSubRoot ? degPositive(this.parentDeg + 180) : 0]; // 次级根节点将360分为的角度区间
+    if (this.isSubRoot) {
+      splitNum = data.length + 1;
+      startAngle = (180 + this.parentDeg) - (360 / splitNum) * data.length;
+      degInterval.push(degPositive(startAngle));
+    } else {
+      if (this.option.isLink) { // isLink，判断主网关右侧是否需要预留一个位置
+        splitNum = data.length + 1;
+        startAngle = 360 / splitNum;
+      }
+      degInterval.push(0);
+    }
+    data.forEach((dataItem, index) => {
+      const deg = (dataItem.deg !== undefined && dataItem.deg !== null) ? dataItem.deg : (360 / splitNum) * index + startAngle;
+      degInterval.push(degPositive(deg));
+      const equalDeg = Math.min(360 / splitNum, 180);
+      this.loopSubRootData(dataItem, group, deg, equalDeg);
+    });
+    degInterval.sort((a, b) => {
+      return a - b;
+    });
+    return Array.from(new Set(degInterval));
+  }
+
+  arrangeLeaf(degInterval, group) {
+    let intervalNum = degInterval.length; // 360度分割区间的数量
+    let intervalLeafNum = new Array(intervalNum).fill(1); // 每个区间的叶子节点分布数量:如[2,2,1]
+    this.leafData.forEach((item, index) => {
+      if (index >= intervalNum) {
+        intervalLeafNum[index % intervalNum]++;
+      }
+    });
+    let leafDegArr = []; // 全部区间的叶子节点的角度集合
+    let cloneLeafsArr = [...this.leafsArr];
+    this.leafData.forEach((item, index) => {
+      // 获取角度区间的差值，循环取值。大的角减去小的角
+      let degSpace = (degInterval[index % intervalNum + 1] || (degInterval[0] + 360)) - degInterval[index % intervalNum];
+      // 当前叶子角=差值/每个区间分布数*分布索引+起始角(小的角)
+      let deg = degSpace / (intervalLeafNum[index % intervalNum] + 1) * (parseInt(index / intervalNum) + 1) + degInterval[index % intervalNum];
+      leafDegArr.push(deg);
+      this.loopLeafData(item, group, deg);
+    });
+    this.multipleTerminal(leafDegArr, group, cloneLeafsArr, intervalNum, degInterval, intervalLeafNum);
+  }
+
+  // 处理多终端场景。先按照原始算法排列，
+  multipleTerminal(leafDegArr, group, cloneLeafsArr, intervalNum, degInterval, intervalLeafNum) {
+    if (!leafDegArr.length) return; // 无叶子节点，直接返回
+    leafDegArr.sort((a, b) => { return a - b; });
+    let minAngleDiff = leafDegArr[1] - leafDegArr[0]; // 寻找最小夹角，用它来计算终端分布的数量
+    leafDegArr.forEach((item, index) => {
+      if (index <= leafDegArr.length - 2) {
+        if ((leafDegArr[index + 1] - leafDegArr[index]) < minAngleDiff) {
+          minAngleDiff = leafDegArr[index + 1] - leafDegArr[index];
+        }
+      }
+    });
+    const { wrapper } = group;
+    // 腰长
+    let waistLength = pxToNumber(getStyle(wrapper, 'width')) / 2;
+    // 对边
+    let sideLength = getSideLength(minAngleDiff, waistLength);
+    const leafDom = this.leafsArr[0].node.returnWrapper();
+    const leafDomWidth = pxToNumber(getStyle(leafDom, 'width'));
+    // 保证每个叶子节点的圆心间距为20,重新计算其夹角
+    if (sideLength < leafDomWidth + 20) {
+      sideLength = leafDomWidth + 20;
+      for (let i = cloneLeafsArr.length; i < this.leafsArr.length; i++) { // 不符合条件，直接删除，并且移除创建的dom
+        this.leafsArr[i].node.container.removeChild(this.leafsArr[i].node.dom);
+        this.leafsArr[i].tag.container.removeChild(this.leafsArr[i].tag.dom);
+        this.leafsArr[i].line.container.removeChild(this.leafsArr[i].line.canvas);
+      }
+      this.leafsArr.splice(cloneLeafsArr.length);
+      if (this.option.overAll) { // 全网视口超出展示...
+        minAngleDiff = getTriangleAngle(sideLength, waistLength);
+        const maxLeafNum = Math.floor(360 / intervalNum / minAngleDiff) * intervalNum; // 外环上最多分布终端的数量(每个区间分别计算数量累计，这样就能避免与连线重叠)
+        let newLeafDegArr = [];  // 更新leafDegArr 全部区间的叶子节点的角度集合
+        let intervalLeafNum = new Array(intervalNum).fill(1); // 每个区间的叶子节点分布数量
+        this.leafData.forEach((item, index) => {
+          if (index > maxLeafNum - 1) return;
+          if (index >= intervalNum) {
+            intervalLeafNum[index % intervalNum]++;
+          }
+        });
+        this.leafData.forEach((item, index) => {
+          // 获取角度区间的差值，循环取值。大的角减去小的角
+          let degSpace = (degInterval[index % intervalNum + 1] || (degInterval[0] + 360)) - degInterval[index % intervalNum];
+          // 当前叶子角=差值/每个区间分布数*分布索引+起始角(小的角)
+          let deg = degSpace / (intervalLeafNum[index % intervalNum] + 1) * (parseInt(index / intervalNum) + 1) + degInterval[index % intervalNum];
+          newLeafDegArr.push(deg);
+        });
+        this.leafData.forEach((item, index) => {
+          const deg = newLeafDegArr[index];
+          if (index >= maxLeafNum) return;  // 遍历终端，如果他超过最多分布的数量，则不渲染了
+          this.loopLeafData(item, group, deg);
+        });
+      } else { // 家庭视口超出拉大从网关容器、拉长主从网关距离。从而展示全部终端
+        let equalDeg = 360 / intervalNum;
+        // waistLength = Math.min(getWaistLength(equalDeg, (leafDomWidth + 20) * Math.max(...intervalLeafNum) - 20 + 40), getWaistLength(minAngleDiff, sideLength)); // +40是给终端和上下主从网关的连线设置各20间距
+        waistLength = getWaistLength(minAngleDiff, sideLength);
+        const wrapperSize = pxToNumber(getStyle(wrapper, 'width'));
+        setStyle(wrapper, {
+          width: waistLength * 2 + 'px',
+          height: waistLength * 2 + 'px',
+          // 多终端的话，根节点定位中心还是50%，其它次级根节点需要额外计算自身宽度的变化
+          left: this.isSubRoot ? `calc(100% + ${this.distance + waistLength - wrapperSize / 2}px)` : '50%'
+        });
+        // 新增：因为waistLength的获取方式调整了，为了区间内的终端不重叠，需要重新计算其角度
+        // if (getWaistLength(equalDeg, (leafDomWidth + 20) * Math.max(...intervalLeafNum) - 20 + 40) < getWaistLength(minAngleDiff, sideLength)) {
+        //   intervalLeafNum.forEach((leafNum, index) => {
+        //     if (leafNum > 1) {
+        //       const triangleAngle = getTriangleAngle(sideLength, waistLength);
+        //       for (let i = 0; i < leafNum; i++) {
+        //         let recordNum = 0; // 记录之前已经排列了多少个兄弟叶子节点，用来更新对应索引的角度
+        //         if (index >= 1) {
+        //           for (let k = 0; k <= index - 1; k++) {
+        //             recordNum += intervalLeafNum[k];
+        //           }
+        //         }
+        //         leafDegArr[i + recordNum] = (equalDeg - triangleAngle * (leafNum - 1)) / leafNum + i * triangleAngle + 360 / intervalLeafNum.length * index;
+        //       }
+        //     }
+        //   });
+        // }
+        this.leafData.forEach((item, index) => {
+          this.loopLeafData(item, group, leafDegArr[index]);
+        });
+      }
+    }
+  }
+
+  // 处理次级根节点数据
+  loopSubRootData(dataItem, { wrapper, tagWrapper, lineWrapper }, deg, equalDeg) {
+    const { overAll, distance } = this.option;
+    const { minDistance, minDistanceDrill } = distance;
+    this.distance = overAll ? minDistance : minDistanceDrill;
+    this.subBranch = new BranchManager(dataItem, wrapper, this.snowInstance, {
+      style: {
+        position: 'absolute',
+        transform: `translate(-50%,-50%) rotate(${deg - this.parentDeg}deg)`,
+      },
+      parentDeg: deg,
+      isSubRoot: true,
+      equalDeg
+    }, this);
+    this.upDateSubRootStyle(equalDeg, wrapper, dataItem, overAll);
+    this.initCenterLine(dataItem, deg, { tagWrapper, lineWrapper });
+  }
+
+  upDateSubRootStyle(equalDeg, wrapper, dataItem, overAll) {
+    // 更新从网关的distance、设置其left和旋转中心
+    let waistLength = getWaistLength(equalDeg, getCssNumber(this.subBranch.wrapper, 'width') + 50 * 2); // 从网关间距给个50
+    this.distance = dataItem.distance || Math.max(waistLength - getCssNumber(wrapper, 'width'), this.distance);
+    let sizeRatio = pxToNumber(getStyle(this.subBranch.wrapper, 'width')) / pxToNumber(getStyle(wrapper, 'width'));
+    let transformOrigin = `calc(${50 * (1 - 1 / sizeRatio) + '%'} - ${this.distance}px) center`;
+    let subBranchStyle = {};
+    if (overAll) {
+      subBranchStyle = {
+        left: `calc(100% + ${this.distance}px)`,
+        transformOrigin
+      };
+    } else {
+      subBranchStyle = {
+        transformOrigin: 'unset',  // 设置旋转中心，如果是家庭拓扑，会在setTransformOrigin中处理。
+      };
+      if (getCssNumber(this.subBranch.wrapper, 'left') < getCssNumber(this.subBranch.wrapper.parentNode, 'width') + this.distance) {
+        subBranchStyle.left = `calc(100% + ${this.distance}px)`;
+      }
+    }
+    setStyle(this.subBranch.wrapper, subBranchStyle);
+  }
+
+  // 处理叶子节点数据
+  loopLeafData(dataItem, group, deg) {
+    this.leaf = new LeafManager(dataItem, group, deg, this);
+    this.leafsArr.push(this.leaf);
+  }
+
+  // 主网关到从网关的line及tag
+  initCenterLine(data, deg, { tagWrapper, lineWrapper }) {
+    const leafNode = this.centerDomArr.filter((item) => { // 获取子节点，用于计算连线宽度
+      return item.data.mac === data.mac;
+    })[0];
+    this.centerLineArr.push(new LineManager({ lineWrapper, leafNode }, data, deg, this, true));
+    this.centerTagArr.push(new TagManager(tagWrapper, data, this.option, deg, true, this.drag));
+  }
+
+  // 点击下钻后需要将isLink改为false，需要重新刷新dom结构，计算全部的角度
+  reRender(activeMac, leafTrigger) {
+    this.branchData = [];
+    this.leafData = [];
+    this.leafsArr = [];
+    this.centerLineArr = [];
+    this.centerTagArr = [];
+    this.centerDomArr = [];
+    this.container.innerHTML = null;
+
+    this.activeMac = activeMac;
+    this.leafTrigger = leafTrigger;
+    // 下钻后，如果在此之前刷新了node、line、tag。不能使用this.data。数据还是旧的
+    this.mount(this.snowInstance.data[0], {});
+    // 下钻完之后如果有多设备情况，需要重新设置定位值和旋转中心（必须在this.mount后面执行，算重构节点）
+    if (!this.option.overAll) {
+      this.snowInstance.setPositionLeft();
+      this.snowInstance.setTransformOrigin();
+      this.snowInstance.setTagPosition();
+    }
+    // 为了解决：重设定位值和旋转中心还未结束，就执行了NodeManager/moveToCenter,导致下钻聚焦的节点不对。
+    const { centerDomArr, leafsArr } = this.snowInstance.branchs[0];
+    if (leafTrigger) { // 叶子节点触发的下钻
+      leafsArr.forEach((leaf) => {
+        if (leaf.node.data.mac === activeMac) {
+          this.drag.moveTargetToCenter(leaf.node.wrapper);
+        }
+      });
+    } else { // 容器触发的下钻
+      centerDomArr.forEach((node) => {
+        if (node.data.mac === activeMac) {
+          this.drag.moveTargetToCenter(node.returnWrapper().parentNode);
+        }
+      });
+    }
+  }
+};
+
+export default BranchManager;

package/src/components/charts/components/SnowFlakeChart/CommonConstant.js

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+// 2.4g、5g接入  无线信号
+const radioType = {
+  TYPE_Straight: 'Straight',
+  TYPE_Arrow: 'Arrow',
+  TYPE_Dashed: 'Dashed',
+  TYPE_Dotted: 'Dotted',
+};
+
+// 不同的箭头间隔
+const interval = {
+  '2.4G': 12,
+  '5G': 8,
+  'wireless': 8
+};
+
+// 连线文本样式
+const textStyle = (theme) => {
+  return {
+    fillStyle: theme.indexOf('dark') !== -1 ? '#f5f5f5' : '#000',
+    font: '12px  HarmonyOS Sans',
+    unitStyle: theme.indexOf('dark') !== -1 ? '#bbbbbb' : '#999', // 单位字体颜色
+    bgStyle: 'transparent' // 文字块背景色
+  };
+};
+
+// canvas方向
+const direction = {
+  left: 'left',
+  right: 'right'
+};
+
+// 置灰态的透明度
+// tag、line是直接变灰
+// 节点根据类型/mac，判定是否变灰
+const opacity = 0.3;
+
+// 设置tag的定位值
+const tagPosition = 88;
+const tagActivePosition = 80;
+
+
+// 默认信号强度文本色
+const singlecolor = '#36C18D';
+// warning信号强度文本色
+const singleWarnColor = '#f43146';
+// 叶子的2.4G的warning的min值
+const singleMin2G = -75;
+// 叶子的5G的warning的min值
+const singleMin5G = -72;
+// 叶子的warning的max值
+const singleMax = 0;
+
+
+// 下钻前的主从网关之间的连线距离
+const distanceDefault = 400;
+// 下钻前的从网关之间的连线距离
+const subRootGap = 20;
+
+// 下钻后的主从网关之间的连线距离
+const distanceDrillDefault = 800;
+
+export {
+  radioType,
+  textStyle,
+  direction,
+  interval,
+  opacity,
+  tagPosition,
+  singlecolor,
+  singleWarnColor,
+  singleMin2G,
+  singleMin5G,
+  singleMax,
+  distanceDefault,
+  distanceDrillDefault,
+  tagActivePosition,
+  subRootGap
+};
+
+// topo图字段
+// interface DeviceInfo {
+//   deviceType: DeviceRole; // 设备类型(图片)
+//   deviceName: string; // 设备名称
+//   onlineStatus: number; // 1 在线
+//   mac: string; // 用作唯一标识？
+//   connectInterface: 'LAN*' | 'PON*' | 'SSID-2.4G'; // 接入方式
+//   // radioType: '2.4G' | '5G'; // 无线
+//   onlineDuration: number; // 在线时长
+//   signalStrength: number; // 信号强度，不带单位, 2.4G 阈值-75，5G 阈值-72,（单位，自行判断是否超过阈值）
+//   rxPower: number; // 光功率（从网关需要判断：SSID 显示信号强度，其他显示光功率。 主网关固定光功率，主网关无信号强度字段。sta 固定信号强度）
+//   rxPowerMin: number; // 光功率阈值最小值，用于判断光功率是否需要染色 （主从网关需要判断阈值，超过变红）
+//   rxPowerMax: number; // 光功率阈值最大值，用于判断光功率是否需要染色
+//   children: DeviceInfo[],
+//   faultNum: number, // 故障数量
+//   wifiChannel: string; // 信道
+//   upNegotiatedRate; // 上行协商速率
+//   downNegotiatedRate; // 下行协商速率
+//   upRealTimeRate; // 上行实时速率
+//   downRealTimeRate; // 下行实时速率
+// }