@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/components/RiverChart/Belt.js

@@ -0,0 +1,181 @@
+/**
+ * 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 { renderSvgDom, getPathD, getSmoothPathD } from './util.js';
+
+// 河流的连接带
+export default class Belt {
+  // 连接带的名字
+  name;
+  //  起点信息
+  start;
+  // 终点信息
+  end;
+  // 当前连接带的位置
+  isLeft;
+  颜色;
+  color;
+  // 归属节点是否有子节点
+  hasNodes;
+  // 图表配置
+  config;
+  // 归属节点
+  belongNode;
+
+  constructor(node, config, isLeft) {
+    this.belongNode = node;
+    this.config = config;
+    this.isLeft = isLeft;
+    this.hasNodes = !!(node.initalNode.nodes && node.initalNode.nodes.length > 0);
+  }
+
+  init(name, start, end) {
+    this.setName(name);
+    this.setStart(start);
+    this.setEnd(end);
+  }
+
+  setName(name) {
+    this.name = name;
+  }
+
+  setStart(start) {
+    this.start = start;
+  }
+
+  setEnd(end) {
+    this.end = end;
+  }
+
+  //  当前的belongNode没有父子节点，颜色取决于当前belongNode.nodes的首尾node颜色
+  setCommonColor() {
+    const { statusColor, background } = this.config;
+    let color = background;
+    if (this.hasNodes) {
+      const len = this.belongNode.initalNode.nodes.length;
+      const itemNode = this.isLeft ? this.belongNode.initalNode.nodes[0] : this.belongNode.initalNode.nodes[len - 1];
+      color = statusColor[itemNode.status];
+    }
+    this.color = color;
+  }
+
+  setGradientColor(parentNode) {
+    const { statusColor, background } = this.config;
+    const colorList = [];
+    const initalNode = this.belongNode.initalNode;
+    let startColor = background,
+      endColor = background;
+    if (initalNode.nodes && initalNode.nodes.length !== 0) {
+      const itemNode = initalNode.nodes[0];
+      endColor = statusColor[itemNode.status];
+    }
+    const parentInitalNode = parentNode.initalNode;
+    if (parentInitalNode.nodes && parentInitalNode.nodes.length !== 0) {
+      const len = parentInitalNode.nodes.length;
+      const itemNode = parentInitalNode.nodes[len - 1];
+      startColor = statusColor[itemNode.status];
+    }
+    const start = {
+      percent: '0%',
+      color: startColor,
+    };
+    const end = {
+      percent: '100%',
+      color: endColor,
+    };
+    colorList.push(start);
+    colorList.push(end);
+    this.color = colorList;
+  }
+
+  getBeltPoint(startLen) {
+    const endLen = this.end.value;
+    // 绘画的坐标点
+    let point;
+    if (this.config.smoothingCurves) {
+      point = {
+        // 连线的起点
+        x1: this.start.x,
+        y1: this.start.y + startLen / 2,
+        // 连线的终点
+        x3: this.end.x,
+        y3: this.end.y + endLen / 2,
+      };
+    } else {
+      point = {
+        // 前置节点起点坐标
+        x1: this.start.x,
+        y1: this.start.y,
+        // 前置节点终点坐标
+        x2: this.start.x,
+        y2: this.start.y + startLen,
+        // 后置节点终点坐标
+        x3: this.end.x,
+        y3: this.end.y,
+        // 后置节点终点坐标
+        x4: this.end.x,
+        y4: this.end.y + endLen,
+      };
+    }
+    return point;
+  }
+
+  getLinearGradientfillColor(svgBeltGradientDefs) {
+    // 渐变的属性
+    const lineGradientAttributes = {
+      id: `linearGradient_${this.name}_node`,
+      x2: '100%',
+      y2: '0%',
+			x1: '0%',
+      y1: '0%',
+    };
+    const lineGradientDom = renderSvgDom('linearGradient', lineGradientAttributes);
+    // 生成stop
+    this.color.forEach(el => {
+      const stopAttributes = {
+        offset: el.percent,
+        'stop-opacity': 0.2,
+				'stop-color': el.color,
+      };
+      const stopDom = renderSvgDom('stop', stopAttributes);
+      lineGradientDom.appendChild(stopDom);
+    });
+    svgBeltGradientDefs.appendChild(lineGradientDom);
+    return `url(#linearGradient_${this.name}_node)`;
+  }
+
+  render(svgBeltPathGroup, svgBeltGradientDefs) {
+    const startLen = this.start.value;
+    const { smoothingCurves } = this.config;
+    const point = this.getBeltPoint(startLen);
+    // 获取路径
+    const path = smoothingCurves ? getSmoothPathD(point, startLen) : getPathD(point);
+    const isNotgarident = typeof this.color === 'string';
+    let fillColor = this.color;
+    if (!isNotgarident) {
+      fillColor = this.getLinearGradientfillColor(svgBeltGradientDefs);
+    }
+    // 不是渐变色
+    const pathAttributes = {
+      id: `link_${this.name}_${this.isLeft ? 'left' : 'right'}`,
+      fill: fillColor,
+      d: path,
+      opacity: isNotgarident ? 0.2 : 1,
+    };
+    if (smoothingCurves && !(point.y1 === point.y3)) {
+      pathAttributes['fill'] = 'none';
+      pathAttributes['stroke'] = fillColor;
+      pathAttributes['stroke-width'] = startLen;
+    }
+    const pathDom = renderSvgDom('path', pathAttributes);
+    svgBeltPathGroup.appendChild(pathDom);
+  }
+}

package/src/components/charts/components/RiverChart/Manager.js

@@ -0,0 +1,173 @@
+/**
+ * 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 Node from './Node';
+import { renderSvgDom } from './util.js';
+
+export default class Manager {
+  // svg容器
+  svgContainer;
+  // 节点的容器
+  nodeContainer;
+  //   配置项
+  config;
+  //  节点数据
+  initalData;
+  //   河流节点
+  nodes;
+  //   连接带节点
+  belts;
+  // 数据是否合法
+  legal = true;
+  // svg节点容器
+  svgNodeGroup;
+  // svg渐变色容器
+  svgNodeGradientDefs;
+  // svg连接带容器
+  svgBeltPathGroup;
+  // svg连接带渐变色容器
+  svgBeltGradientDefs;
+
+  constructor(svgContainer, nodeContainer, config, initalData) {
+    this.svgContainer = svgContainer;
+    this.nodeContainer = nodeContainer;
+    this.config = config;
+    this.initalData = initalData;
+    this.nodes = [];
+    this.belts = [];
+    this.checkInitalData();
+    this.initSvgGroupContainer();
+  }
+
+  initSvgGroupContainer() {
+    if (!this.legal) return;
+    // 节点组
+    const nodeGroup = renderSvgDom('g', { id: 'rc_nodeGroup' });
+    // 用来包裹path的组
+    const pathGroup = renderSvgDom('g', { id: 'rc_pathGroup' });
+    // 用来包裹node渐变色的组
+    const nodeGradientGroup = renderSvgDom('g', { id: 'rc_nodeGradientGroup' });
+    // 用来包裹link渐变色的组
+    const linkGradientGroup = renderSvgDom('g', { id: 'rc_linkGradientGroup' });
+    // 放置node渐变色def
+    const nodeGradientDefs = renderSvgDom('defs');
+    // 放置link渐变色def
+    const linkGradientDefs = renderSvgDom('defs');
+    nodeGradientGroup.appendChild(nodeGradientDefs);
+    linkGradientGroup.appendChild(linkGradientDefs);
+    this.svgContainer.appendChild(nodeGroup);
+    this.svgContainer.appendChild(pathGroup);
+    this.svgContainer.appendChild(nodeGradientGroup);
+    this.svgContainer.appendChild(linkGradientGroup);
+    this.svgNodeGroup = nodeGroup;
+    this.svgNodeGradientDefs = nodeGradientDefs;
+    this.svgBeltPathGroup = pathGroup;
+    this.svgBeltGradientDefs = linkGradientDefs;
+  }
+
+  // 检查数据是否合规
+  checkInitalData() {
+    if (!this.initalData) return (this.legal = false);
+    const { nodes, links } = this.initalData;
+    if (!nodes || !links) return (this.legal = false);
+    if ((nodes && nodes.length === 0) || (links && links.length === 0)) this.legal = false;
+  }
+
+  createNode(initialNode) {
+    return new Node(initialNode, this.config, this.initalData, this.belts);
+  }
+
+  addNode(node) {
+    this.nodes.push(node);
+  }
+
+  findInitalNode(name) {
+    return this.initalData.nodes.find(item => item.name === name);
+  }
+
+  findNode(name) {
+    return this.nodes.find(item => item.name === name);
+  }
+
+  // 检查节点是否已存在this.nodes,没有就新建节点
+  checkNodeExist(name, initalNode) {
+    let targetNode = this.findNode(name);
+    if (!targetNode) {
+      const initNode = initalNode ? initalNode : this.findInitalNode(name);
+      const newNode = this.createNode(initNode);
+      this.addNode(newNode);
+      targetNode = newNode;
+    }
+    return targetNode;
+  }
+
+  // 增加节点的依赖关系
+  addNodeDependency(dependency, node, isParent = true) {
+    if (dependency && dependency.length > 0) {
+      dependency.forEach(name => {
+        const targetNode = this.checkNodeExist(name);
+        isParent ? node.setParent(targetNode) : node.setChildren(targetNode);
+      });
+    }
+  }
+
+  addNodeParent(parentName, node) {
+    this.addNodeDependency(parentName, node);
+  }
+
+  addNodeChildren(childrenName, node) {
+    this.addNodeDependency(childrenName, node, false);
+  }
+
+  init() {
+    if (!this.legal) return;
+    this.initNodes();
+    this.initBelts();
+  }
+
+  initNodes() {
+    this.initalData.nodes.forEach(initialNode => {
+      const node = this.checkNodeExist(initialNode.name, initialNode);
+      const parentName = [];
+      const childrenName = [];
+      this.initalData.links.forEach(link => {
+        if (link.target === initialNode.name) {
+          parentName.push(link.source);
+        }
+        if (link.source === initialNode.name) {
+          childrenName.push(link.target);
+        }
+      });
+      this.addNodeParent(parentName, node);
+      this.addNodeChildren(childrenName, node);
+    });
+  }
+
+  initBelts() {
+    this.nodes.forEach(node => {
+      node.initBelts();
+    });
+  }
+
+  renderNodes() {
+    this.nodes.forEach(node => node.render(this.nodeContainer, this.svgNodeGroup, this.svgNodeGradientDefs));
+  }
+
+  renderBelts() {
+    this.belts.forEach(belt => belt.render(this.svgBeltPathGroup, this.svgBeltGradientDefs));
+  }
+
+  // 绘制节点和连接带
+  render() {
+    this.renderNodes();
+    this.renderBelts();
+  }
+}