@ebiz/designer-components 0.0.18

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

@@ -0,0 +1,76 @@
+/**
+ * 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 NodeManager from './NodeManager';
+import LineManager from './line';
+import TagManager from './TagManager';
+import { moveToCenter, judgeDisabled, getCssNumber } from './util';
+
+class LeafManager {
+  node;
+  line;
+  tag;
+  constructor(data, container, deg, branchInstance) {
+    const { imageList, option } = branchInstance;
+    this.data = data;
+    this.imageList = imageList;
+    this.option = option;
+    this.mount(container, deg, branchInstance);
+    // 下钻后移动选中dom到视口中心(删除会由于雪花图未插入自定义render就定位中心导致有视图偏差)
+    moveToCenter(branchInstance, this, false);
+  }
+
+
+  mount(container, deg, branchInstance) {
+    // dom分组
+    this.grouping(container, deg, branchInstance);
+    // 插入自定义内容
+    this.insertContent();
+    // 渲染连线，连线的宽度需要用容器的一半减去中心dom和叶子dom的值
+    this.renderLine(container, deg, branchInstance);
+  }
+
+  grouping(container, deg, branchInstance) {
+    const { nodeWrapper, tagWrapper } = container;
+    this.node = new NodeManager(nodeWrapper, this.data, deg, false, branchInstance);
+    this.tag = new TagManager(tagWrapper, this.data, this.option, deg, false, branchInstance.drag);
+  }
+
+  insertContent() {
+    const nodeContainer = this.node.returnWrapper();
+    const tagContainer = this.tag.returnWrapper();
+    const renderFun = this.data.render || this.option.render;
+    judgeDisabled(this.option, [nodeContainer.parentNode, tagContainer.parentNode], true, this.data);
+    if (renderFun) {
+      renderFun({
+        nodeContainer: nodeContainer,
+        tagContainer: tagContainer,
+      }, this.data, this.option);
+    }
+    // 子节点与tag节点回正
+    this.node.setAngle();
+    this.tag.setAngle();
+  }
+
+  renderLine(container, deg, branchInstance) {
+    const { lineWrapper } = container;
+    const tagWidth = getCssNumber(this.tag.dom, 'width');
+    this.line = new LineManager({ lineWrapper, leafNode: this.node }, this.data, deg, branchInstance, false, tagWidth);
+  }
+
+  // 刷新数据的方法
+  refreshData(data) {
+    this.data = data !== undefined ? data : this.data;
+    this.insertContent();
+  }
+}
+
+export default LeafManager;

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

@@ -0,0 +1,240 @@
+/**
+ * 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 { setStyle, pxToNumber, insertDom, getStyle, createDom, judgeDisabled, moveToCenter, boundaryJudge } from './util.js';
+import { defaultToolTip } from './defaultOption.js';
+export default class NodeManager {
+  dom;
+  wrapper; // 节点需要多插入一层dom结构，用于回正内容
+  constructor(container, data, deg, isCenter, branchInstance) {
+    const { drag, snowInstance, chartContainer, option, equalDeg, wrapper: branchWrapper } = branchInstance;
+    this.container = container;
+    this.data = data;
+    this.option = option;
+    this.deg = deg;
+    this.isCenter = isCenter;
+    this.chartContainer = chartContainer;
+    this.drag = drag;
+    this.snowInstance = snowInstance;
+    this.equalDeg = equalDeg;
+    this.branchWrapper = branchWrapper;
+    this.branchInstance = branchInstance;
+    this.mount();
+    // 下钻后移动选中dom到视口中心(删除会由于恢复全网视口時dom尺寸变化导致雪花图移位)
+    moveToCenter(branchInstance, this, true);
+  }
+
+  mount() {
+    // 创建每一个节点容器
+    let domClass = this.isCenter ? 'sfc-node-center' : 'sfc-node-item';
+    if (this.data.faultNumber) {
+      domClass += ' sfc-node-error';
+    }
+    this.dom = insertDom(this.container, { class: domClass });
+    this.wrapper = insertDom(this.dom);
+    // 绑定事件
+    this.addEvent();
+    // 中心节点插入内容
+    this.isCenter && this.insertContent();
+    // 全网视图下，添加悬浮提示框
+    this.addToolTip();
+  }
+
+  returnWrapper() {
+    return this.wrapper;
+  }
+
+  addEvent() {
+    this.dom.addEventListener('click', this.nodeClick);
+    this.container.addEventListener('click', this.containerClick);
+  }
+
+  nodeClick = (e) => {
+    if (this.drag.draging || this.data.disabled) { // 拖动中、disabled不触发点击
+      return;
+    }
+    // 每次只能高亮一个节点，移除其他节点的高亮状态
+    this.snowInstance.removeNodeActive();
+    // 非中心dom添加点击下钻
+    !this.isCenter && this.drillDown(true, true, true);
+    this.findSameDom();
+    if (this.data.click) {
+      this.data.click(e, { ...this.data, dom: this.dom });
+    }
+    // 点击后重新调用node的render方法,去刷新高亮状态。以及根据当前的scale，是否显隐
+    !this.isCenter && this.insertContent();
+  };
+
+  // 叶子点击下钻,会重构dom，因此需要找到mac一致的新叶子dom，添加高亮类名。
+  findSameDom() {
+    this.snowInstance.branchs.forEach((item) => {
+      item.leafsArr.forEach((leaf) => {
+        if (leaf.data.mac === this.data.mac) {
+          this.dom = leaf.node.dom;
+          this.wrapper = leaf.node.wrapper;
+        }
+      });
+    });
+    this.dom.classList.add('nodeActive');
+  }
+
+  containerClick = (e) => {
+    if (this.drag.draging || this.container.parentNode.classList.contains('noLeafChild')) {
+      return;
+    }
+    if (e.target === this.container) {
+      // 容器允许点击下钻，下钻后将容器展示在视口中心
+      this.drillDown(true, false, true);
+      if (this.data.containerClick) {
+        this.data.containerClick(e, this.data);
+      }
+    }
+  };
+
+  setAngle() {
+    // 获取整个雪花图容器与每个节点的宽度，计算旋转中心
+    const containerWidth = getStyle(this.container, 'width'); // 节点所在分组容器的宽度
+    const nodeItemWidth = getStyle(this.wrapper, 'width');  // 节点自身的宽度
+    setStyle(this.dom, {
+      transform: ` translate(-50%,-50%) rotate(${this.deg}deg)`,
+      transformOrigin: `${-1 * (pxToNumber(containerWidth) / 2 - pxToNumber(nodeItemWidth) / 2)}px center`,
+    });
+    setStyle(this.wrapper, {
+      transform: `rotate(${360 - this.deg}deg)`,
+    });
+  }
+
+  insertContent() {
+    judgeDisabled(this.option, [this.dom], false, this.data, true);
+    const renderFun = this.data.render || this.option.render;
+    if (renderFun) {
+      renderFun({
+        nodeContainer: this.wrapper,
+        tagContainer: createDom()
+      }, this.data, this.option, this.drag.scale);
+    }
+  }
+
+  setSubRootWidth() {
+    if (this.option.overAll) {
+      // render完毕，更新宽高
+      setStyle(this.branchWrapper, {
+        width: pxToNumber(getStyle(this.wrapper, 'width')) + 50 * 2 + 'px',
+        height: pxToNumber(getStyle(this.wrapper, 'height')) + 50 * 2 + 'px',
+      });
+    }
+  }
+
+  addToolTip() {
+    let toolTip = document.querySelector('.sfc-overAllTip');
+    if (!toolTip) { // 在家庭视口需要将其隐藏
+      toolTip = document.createElement('div');
+      toolTip.className = 'sfc-overAllTip';
+      document.documentElement.appendChild(toolTip);
+    }
+    if (this.option.overAll) {
+      const toolTipFun = this.data.toolTip || this.option.toolTip || defaultToolTip;
+
+      if (this.isCenter) {
+        this.wrapper.addEventListener('mousemove', (e) => {
+          e.stopPropagation();
+          toolTip.style.display = 'none';
+        });
+      } else {
+        this.wrapper.addEventListener('mousemove', (e) => {
+          if (this.drag.startPos) { // 此处用draging判断会出问题
+            toolTip.style.display = 'none';
+            return;
+          }
+          e.stopPropagation();
+          toolTip.style.display = 'block';
+          const { x, y } = boundaryJudge(e, this.drag.container, toolTip);
+          toolTip.style.left = `${x}px`;
+          toolTip.style.top = `${y}px`;
+          toolTip.innerHTML = toolTipFun(this.data, true);
+        });
+        this.wrapper.addEventListener('mouseleave', (e) => {
+          toolTip.style.display = 'none';
+        });
+      }
+
+      this.container.addEventListener('mousemove', (e) => {
+        if (this.drag.startPos || this.container.parentNode.classList.contains('noLeafChild')) {
+          toolTip.style.display = 'none';
+          return;
+        }
+        toolTip.style.display = 'block';
+        const { x, y } = boundaryJudge(e, this.drag.container, toolTip);
+        toolTip.style.left = `${x}px`;
+        toolTip.style.top = `${y}px`;
+        toolTip.innerHTML = toolTipFun(this.data, false);
+        this.container.style.backgroundImage = 'radial-gradient(rgba(89,144,253,0) 0%,rgba(89,144,253,.1) 100%)';
+      });
+      this.container.addEventListener('mouseleave', (e) => {
+        toolTip.style.display = 'none';
+        this.container.style.backgroundImage = 'unset';
+      });
+    } else {
+      toolTip.style.display = 'none';
+    }
+  }
+
+  // 刷新数据的方法
+  refreshData(data) {
+    this.data = data !== undefined ? data : this.data;
+    this.insertContent();
+    this.upDateNodeClass();
+  }
+
+  // 判断data.faultNumber字段,更新node节点类名
+  upDateNodeClass() {
+    const { faultNumber } = this.data;
+    const classList = this.dom.classList;
+    if (faultNumber) {
+      classList.add('sfc-node-error');
+    } else {
+      classList.remove('sfc-node-error');
+    }
+  }
+
+  // 点击下钻（node、tag、lina、次级根节点node修改样式）
+  drillDown(drill = true, leafTrigger, clickTrigger, mac) {
+    // 下钻
+    if (drill) {
+      // 已经是下钻状态，如果再次点击下钻，直接return
+      if (this.option.overAll === false && clickTrigger) {
+        return;
+      }
+      this.option.overAll = false;
+      this.chartContainer.classList.remove('overAll');
+    }
+    else {
+      this.option.overAll = true;
+      this.chartContainer.classList.add('overAll');
+    }
+    // 重刷dom结构
+    this.snowInstance.branchs[0].reRender(mac || this.data.mac, leafTrigger);
+    // 如果是通过api下钻，不是点击，那么下钻后调用缩放自适应。
+    // 如果是点击下钻，那么不走自适应，因为自适应后若scale<0.75,点击的终端看不见，交互不友好
+    if (drill && !clickTrigger) {
+      this.snowInstance.findFitScale();
+    } else {
+      this.drag.reset();
+    }
+    // 下钻后，如果scale在0.5-0.75之间，那么节点是隐藏状态。不应该让其居中，改变为整个图表容器居中
+    // 下钻后，自适应能力不需要触发，滚轮才触发。或者首次进入图表就是家庭视口才自适应
+    // this.snowInstance.findFitScale(() => {
+    //   if (this.drag.scale >= 0.5 && this.drag.scale <= 0.75) {
+    //     this.drag.moveTargetToCenter(this.chartContainer);
+    //   }
+    // });
+  }
+}

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

@@ -0,0 +1,80 @@
+/**
+ * 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 { setStyle, pxToNumber, insertDom, getStyle, createDom, judgeDisabled, setDirection, degPositive } from './util.js';
+import { tagPosition, direction } from './CommonConstant.js';
+export default class TagManager {
+  wrapper;
+  constructor(container, data, option, deg, isCenter, drag) {
+    this.container = container;
+    this.data = data;
+    this.option = option;
+    this.deg = degPositive(deg);
+    this.isCenter = isCenter;
+    this.direction = setDirection(this.deg);
+    this.tagPositionVal = tagPosition; // tag当前的定位值
+    this.drag = drag;
+    this.mount();
+  }
+
+  mount() {
+    this.dom = insertDom(this.container, { class: 'sfc-tag-item' });
+    this.wrapper = insertDom(this.dom);
+    // 判断是否来自于主网关传递给子网关的tag
+    this.isCenter && this.insertContent();
+  }
+
+  returnWrapper() {
+    return this.wrapper || createDom();
+  }
+
+  setAngle() {
+    const containerWidth = pxToNumber(getStyle(this.container, 'width')); // tag分组容器的宽度
+    const tagItemWidth = pxToNumber(getStyle(this.wrapper, 'width')); // tagdom自身的宽度 
+    let originPoint;
+    let tagStyle = {};
+    if (this.direction === direction['left']) {
+      originPoint = (containerWidth * ((this.tagPositionVal - 50) / 100) + tagItemWidth / 2);
+      tagStyle = {
+        right: `${this.tagPositionVal}%`,
+        transformOrigin: `${originPoint}px center`,
+        transform: `translate(50%,-50%) rotate(${this.deg - 180}deg)`,
+      };
+    } else {
+      originPoint = -1 * (containerWidth * ((this.tagPositionVal - 50) / 100) - tagItemWidth / 2);
+      tagStyle = {
+        left: `${this.tagPositionVal}%`,
+        transformOrigin: `${originPoint}px center`,
+        transform: `translate(-50%,-50%) rotate(${this.deg}deg)`,
+      };
+    }
+    setStyle(this.dom, { ...tagStyle });
+  }
+
+  insertContent() {
+    judgeDisabled(this.option, [this.dom]);
+    const renderFun = this.data.render || this.option.render;
+    if (renderFun) {
+      renderFun({
+        nodeContainer: createDom(),
+        tagContainer: this.wrapper
+      }, this.data, this.option, this.drag.scale);
+    }
+    // 重新计算tag的旋转角度和定位
+    this.setAngle();
+  }
+
+  // 刷新数据的方法
+  refreshData(data) {
+    this.data = data;
+    this.insertContent();
+  }
+}

package/src/components/charts/components/SnowFlakeChart/assets/down.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_sort_down_lined</title>
+    <g id="ic_sort_down_lined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#D8D8D8" fill-rule="nonzero" opacity="0" x="0" y="0" width="24" height="24"></rect>
+        <path d="M10.5378223,20.4595993 L10.4086699,20.340022 L3.2348349,13.1661871 C2.94194168,12.8732939 2.94194168,12.3984201 3.2348349,12.1055269 C3.50109868,11.8392631 3.91775799,11.8150573 4.21136641,12.0329095 L4.29548953,12.1055325 L11.25,19.060189 L11.25,3.74996861 C11.25,3.33575501 11.5857864,2.99996861 12,2.99996861 C12.3796958,2.99996861 12.693491,3.28212251 12.7431534,3.64819801 L12.75,3.74996861 L12.75,19.061189 L19.7045458,12.1055679 C19.9707712,11.8393013 20.3874008,11.8150649 20.6810065,12.0328799 L20.765165,12.1055269 C21.0580582,12.3984201 21.0580582,12.8732939 20.765165,13.1661871 L13.5913301,20.340022 C13.1528193,20.7785328 12.5783942,20.9982551 12.0036796,20.9992941 C11.4813635,21.0000377 10.9588083,20.8201745 10.5378223,20.4595993 Z" id="形状结合" fill="#6D8FF0" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/components/charts/components/SnowFlakeChart/assets/image2L.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.000000" height="10.000000" viewBox="0 0 6 10" fill="none" style="transform:rotate(180deg)">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<path id="路径" d="M1.2 8.6C1.53 9.04 2.15 9.13 2.6 8.8C4.69 7.22 5.12 4.24 3.55 2.15C3.27 1.78 2.95 1.47 2.6 1.2C2.15 0.86 1.53 0.95 1.2 1.4C0.86 1.84 0.95 2.46 1.39 2.8C1.6 2.95 1.79 3.14 1.95 3.35C2.86 4.56 2.61 6.28 1.39 7.2C0.95 7.53 0.86 8.15 1.2 8.6Z" fill="#2070F3" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</svg>

package/src/components/charts/components/SnowFlakeChart/assets/image2R.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.000000" height="10.000000" viewBox="0 0 6 10" fill="none" >
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<path id="路径" d="M1.2 8.6C1.53 9.04 2.15 9.13 2.6 8.8C4.69 7.22 5.12 4.24 3.55 2.15C3.27 1.78 2.95 1.47 2.6 1.2C2.15 0.86 1.53 0.95 1.2 1.4C0.86 1.84 0.95 2.46 1.39 2.8C1.6 2.95 1.79 3.14 1.95 3.35C2.86 4.56 2.61 6.28 1.39 7.2C0.95 7.53 0.86 8.15 1.2 8.6Z" fill="#2070F3" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</svg>

package/src/components/charts/components/SnowFlakeChart/assets/image5L.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.000000" height="10.000000" viewBox="0 0 6 10" fill="none" style="transform:rotate(180deg)">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<path id="路径" d="M1.2 8.6C1.53 9.04 2.15 9.13 2.6 8.8C4.69 7.22 5.12 4.24 3.55 2.15C3.27 1.78 2.95 1.47 2.6 1.2C2.15 0.86 1.53 0.95 1.2 1.4C0.86 1.84 0.95 2.46 1.39 2.8C1.6 2.95 1.79 3.14 1.95 3.35C2.86 4.56 2.61 6.28 1.39 7.2C0.95 7.53 0.86 8.15 1.2 8.6Z" fill="#058157" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</svg>

package/src/components/charts/components/SnowFlakeChart/assets/image5R.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.000000" height="10.000000" viewBox="0 0 6 10" fill="none" >
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<path id="路径" d="M1.2 8.6C1.53 9.04 2.15 9.13 2.6 8.8C4.69 7.22 5.12 4.24 3.55 2.15C3.27 1.78 2.95 1.47 2.6 1.2C2.15 0.86 1.53 0.95 1.2 1.4C0.86 1.84 0.95 2.46 1.39 2.8C1.6 2.95 1.79 3.14 1.95 3.35C2.86 4.56 2.61 6.28 1.39 7.2C0.95 7.53 0.86 8.15 1.2 8.6Z" fill="#058157" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</svg>

package/src/components/charts/components/SnowFlakeChart/assets/outerBorder.svg

@@ -0,0 +1,24 @@
+<svg width="706.000000" height="706.000000" viewBox="0 0 706 706" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<clipPath id="clip19_21801">
+			<rect id="画板 356" width="706.000000" height="706.000000" fill="white" fill-opacity="0"/>
+		</clipPath>
+		<radialGradient id="paint_radial_19_21800_0" cx="0.000000" cy="0.000000" r="1.000000" gradientUnits="userSpaceOnUse" gradientTransform="translate(353 353) rotate(94.0756) scale(352.892 352.892)">
+			<stop stop-color="#FFFFFF" stop-opacity="0.000000"/>
+			<stop offset="0.650116" stop-color="#FFFFFF" stop-opacity="0.000000"/>
+			<stop offset="1.000000" stop-color="#FFFFFF" stop-opacity="0.168627"/>
+		</radialGradient>
+		<linearGradient id="paint_linear_19_21800_1" x1="144.869598" y1="61.933685" x2="610.257385" y2="605.350830" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#5990FD" stop-opacity="0.501961"/>
+			<stop offset="1.000000" stop-color="#5990FD" stop-opacity="0.239216"/>
+		</linearGradient>
+	</defs>
+	<rect id="画板 356" width="706.000000" height="706.000000" fill="#FFFFFF" fill-opacity="0"/>
+	<g clip-path="url(#clip19_21801)">
+		<circle id="椭圆形" cx="353.000000" cy="353.000000" r="352.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="2.000000"/>
+		<circle id="椭圆形" cx="353.000000" cy="353.000000" r="352.000000" stroke="url(#paint_linear_19_21800_1)" stroke-opacity="1.000000" stroke-width="2.000000"/>
+	</g>
+</svg>

package/src/components/charts/components/SnowFlakeChart/assets/outerBorderOverAll.svg

@@ -0,0 +1,18 @@
+<svg width="286.000000" height="286.000000" viewBox="0 0 286 286" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<radialGradient id="paint_radial_14_5322_0" cx="0.000000" cy="0.000000" r="1.000000" gradientUnits="userSpaceOnUse" gradientTransform="translate(143 143) rotate(94.0757) scale(142.36 142.36)">
+			<stop stop-color="#FFFFFF" stop-opacity="0.000000"/>
+			<stop offset="0.650116" stop-color="#FFFFFF" stop-opacity="0.000000"/>
+			<stop offset="1.000000" stop-color="#FFFFFF" stop-opacity="0.168627"/>
+		</radialGradient>
+		<linearGradient id="paint_linear_14_5322_1" x1="59.038300" y1="25.581184" x2="246.779953" y2="244.800598" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#5990FD" stop-opacity="0.501961"/>
+			<stop offset="1.000000" stop-color="#5990FD" stop-opacity="0.239216"/>
+		</linearGradient>
+	</defs>
+	<circle id="椭圆形" cx="143.000000" cy="143.000000" r="142.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="2.000000"/>
+	<circle id="椭圆形" cx="143.000000" cy="143.000000" r="142.000000" stroke="url(#paint_linear_14_5322_1)" stroke-opacity="1.000000" stroke-width="2.000000"/>
+</svg>

package/src/components/charts/components/SnowFlakeChart/assets/up.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_sort_up_lined</title>
+    <g id="ic_sort_up_lined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#D8D8D8" fill-rule="nonzero" opacity="0" x="0" y="0" width="24" height="24"></rect>
+        <path d="M13.4621776,3.53966106 L13.59133,3.65923837 L20.765165,10.8330733 C21.0580582,11.1259665 21.0580582,11.6008403 20.765165,11.8937335 C20.4989012,12.1599973 20.0822419,12.1842031 19.7886335,11.9663509 L19.7045104,11.8937279 L12.7499999,4.93907144 L12.7499999,20.2492918 C12.7499999,20.6635054 12.4142135,20.9992918 11.9999999,20.9992918 C11.6203041,20.9992918 11.3065089,20.7171379 11.2568465,20.3510624 L11.2499999,20.2492918 L11.2499999,4.93807144 L4.29545409,11.8936925 C4.02922869,12.1599591 3.61259908,12.1841955 3.31899344,11.9663805 L3.2348349,11.8937335 C2.94194168,11.6008403 2.94194168,11.1259665 3.2348349,10.8330733 L10.4086698,3.65923837 C10.8471806,3.22072761 11.4216057,3.0010053 11.9963203,2.99996861 C12.5186364,2.99922273 13.0411916,3.17908594 13.4621776,3.53966106 Z" id="形状结合" fill="#50C291" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/components/charts/components/SnowFlakeChart/assets/wirelessL.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.000000" height="10.000000" viewBox="0 0 6 10" fill="none" style="transform:rotate(180deg)">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<path id="路径" d="M1.2 8.6C1.53 9.04 2.15 9.13 2.6 8.8C4.69 7.22 5.12 4.24 3.55 2.15C3.27 1.78 2.95 1.47 2.6 1.2C2.15 0.86 1.53 0.95 1.2 1.4C0.86 1.84 0.95 2.46 1.39 2.8C1.6 2.95 1.79 3.14 1.95 3.35C2.86 4.56 2.61 6.28 1.39 7.2C0.95 7.53 0.86 8.15 1.2 8.6Z" fill="#939393" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</svg>

package/src/components/charts/components/SnowFlakeChart/assets/wirelessR.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.000000" height="10.000000" viewBox="0 0 6 10" fill="none" >
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<path id="路径" d="M1.2 8.6C1.53 9.04 2.15 9.13 2.6 8.8C4.69 7.22 5.12 4.24 3.55 2.15C3.27 1.78 2.95 1.47 2.6 1.2C2.15 0.86 1.53 0.95 1.2 1.4C0.86 1.84 0.95 2.46 1.39 2.8C1.6 2.95 1.79 3.14 1.95 3.35C2.86 4.56 2.61 6.28 1.39 7.2C0.95 7.53 0.86 8.15 1.2 8.6Z" fill="#939393" fill-opacity="1.000000" fill-rule="evenodd"/>
+	</svg>