@ebiz/designer-components 0.0.48 → 0.0.49

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

@@ -1,425 +0,0 @@
-/**
- * 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 { createEl, addClass, setStyle, renderSvgDom } from './util';
-import Belt from './Belt';
-// 河流的节点
-export default class Node {
-  // 节点的初始数据
-  initalNode;
-  // 节点名称
-  name;
-  // 节点的取值
-  value;
-  // 节点所在的行
-  row;
-  // 节点所在的列
-  col;
-  // 节点的配置
-  config;
-  //   节点的父节点
-  parent = null;
-  //   节点的子节点
-  children = null;
-  //   节点的x坐标
-  x = 0;
-  //   节点的y坐标
-  y = 0;
-  //   节点的宽
-  width = 0;
-  //   节点的高
-  height = 0;
-  //   节点的颜色
-  color;
-  //   节点的前后间距
-  margin;
-  //   连接带的集合
-  belts;
-  //   连接的子节点
-  childLink = null;
-  //   连接的父节点
-  parentLink = null;
-
-  constructor(initalNode, config, initaData, belts) {
-    this.belts = belts;
-    this.initalNode = initalNode;
-    this.config = config;
-    this.links = initaData.links;
-    this.name = initalNode.name;
-    this.value = initalNode.value;
-    this.row = initalNode.row;
-    this.col = initalNode.col;
-    this.margin = config.marginWidth[this.col];
-    this.setColor();
-    this.setPosition(initaData.nodes);
-  }
-
-  // 初次属性赋值
-  initPorperty(propertyName, value) {
-    if (!this[propertyName]) this[propertyName] = value;
-  }
-
-  // 增加节点的父子节点
-  addPorpertyValue(node, propertyName) {
-    this.initPorperty(propertyName, []);
-    this[propertyName].push(node);
-  }
-
-  setParent(node) {
-    this.addPorpertyValue(node, 'parent');
-  }
-
-  setChildren(node) {
-    this.addPorpertyValue(node, 'children');
-  }
-
-  // 获取列的起始坐标
-  getColStart(col) {
-    const { width, depthWidth } = this.config;
-    // 将百分比转换为相应的数字比例
-    const depthWidthNumber = depthWidth.map(item => {
-      return parseInt(item) / 100;
-    });
-    // 获取当前的起点
-    const depthWidthPercent = depthWidthNumber.slice(0, col).reduce((pre, cur) => pre + cur, 0);
-    return depthWidthPercent * width;
-  }
-
-  // 找出在同一列的节点
-  getColNodes(initalNodes) {
-    return initalNodes.filter(node => node.col === this.col);
-  }
-
-  getX() {
-    const colStart = this.getColStart(this.col);
-    const x = colStart + this.margin.left;
-    return x;
-  }
-
-  getY(colNodes) {
-    const { nodeSpace, scaleBar, offsetY } = this.config;
-    const nodes = colNodes.filter(node => node.row < this.row);
-    const totalVal = nodes.reduce((pre, cur) => pre + cur.value, 0);
-    const y = nodeSpace * this.row + totalVal * scaleBar + offsetY;
-    return y;
-  }
-
-  getWidth(x) {
-    const { space } = this.config;
-    const nextColStart = this.getColStart(this.col + 1);
-    const width = nextColStart - space - this.margin.right - x;
-    return width;
-  }
-
-  setColor() {
-    const { statusColor, background } = this.config;
-    const { nodes } = this.initalNode;
-    if (!nodes || (nodes && nodes.length === 0)) {
-      this.color = background;
-      return;
-    }
-    const length = nodes.length;
-    const colors = [];
-    const startColor = statusColor[nodes[0].status];
-    const colorStart = {
-      percent: '0%',
-      color: startColor,
-    };
-    colors.push(colorStart);
-    if (length - 2 > 0) {
-      const step = Math.round(100 / (length - 1));
-      for (let i = 0; i < length - 2; i++) {
-        const itemNodeColor = statusColor[nodes[i + 1].status];
-        const offset = step * (i + 1);
-        const colorItemData = {
-          percent: `${offset}%`,
-          color: itemNodeColor,
-        };
-        colors.push(colorItemData);
-      }
-    }
-    const EndColor = statusColor[nodes[length - 1].status];
-    const colorEnd = {
-      percent: '100%',
-      color: EndColor,
-    };
-    colors.push(colorEnd);
-    this.color = colors;
-  }
-
-  setPosition(initalNodes) {
-    const { scaleBar } = this.config;
-    const colNodes = this.getColNodes(initalNodes);
-    const x = this.getX();
-    const y = this.getY(colNodes);
-    const nodeWidth = this.getWidth(x);
-    const height = scaleBar * this.value;
-    this.x = x;
-    this.y = y;
-    this.width = nodeWidth;
-    this.height = height;
-  }
-  // 生成node的dom节点
-  renderDom(nodeContainer) {
-    // 公共的render方法
-    const renderPar = this.config.render;
-    // 节点的render方法
-    const { render } = this.initalNode;
-    const nodeEl = createEl('div');
-    addClass(nodeEl, ['rc_node', this.name]);
-    setStyle(nodeEl, 'left', `${this.x}px`);
-    setStyle(nodeEl, 'top', `${this.y}px`);
-    setStyle(nodeEl, 'width', `${this.width}px`);
-    setStyle(nodeEl, 'height', `${this.height}px`);
-    const renderFn = render || renderPar;
-    if (renderFn) {
-      const customNode = renderFn(this);
-      if (customNode) nodeEl.appendChild(customNode);
-    }
-    nodeContainer.appendChild(nodeEl);
-  }
-
-  renderSvg(svgNodeGroup, svgNodeGradientDefs) {
-    const { background, scaleBar } = this.config;
-    let fillColor = background;
-    const isNotgarident = typeof this.color === 'string';
-    if (!isNotgarident) {
-      // 渐变的属性
-      const lineGradientAttributes = {
-        id: `linearGradient_${this.name}_node`,
-        x1: '0%',
-        y1: '0%',
-        x2: '100%',
-        y2: '0%',
-      };
-      const lineGradientDom = renderSvgDom('linearGradient', lineGradientAttributes);
-      // 生成stop
-      this.color.forEach(el => {
-        const stopAttributes = {
-          offset: el.percent,
-          'stop-color': el.color,
-          'stop-opacity': 0.2,
-        };
-        const stopDom = renderSvgDom('stop', stopAttributes);
-        lineGradientDom.appendChild(stopDom);
-      });
-      svgNodeGradientDefs.appendChild(lineGradientDom);
-      fillColor = `url(#linearGradient_${this.name}_node)`;
-    }
-    const nodeAttributes = {
-      x: this.x,
-      y: this.y,
-      width: this.width,
-      height: this.value * scaleBar,
-      fill: fillColor,
-      opacity: isNotgarident ? 0.2 : 1,
-    };
-    const nodeRect = renderSvgDom('rect', nodeAttributes);
-    svgNodeGroup.appendChild(nodeRect);
-  }
-
-  render(nodeContainer, svgNodeGroup, svgNodeGradientDefs) {
-    this.renderDom(nodeContainer);
-    this.renderSvg(svgNodeGroup, svgNodeGradientDefs);
-  }
-  //   获取节点之间连接的值
-  getLinkVal(parName, childName) {
-    let val = 0;
-    this.links.forEach(item => {
-      if (item.source === parName && item.target === childName) {
-        val = item.value;
-      }
-    });
-    return val;
-  }
-
-  creatBelt(node, isLeft = true) {
-    return new Belt(node, this.config, isLeft);
-  }
-
-  addBelt(belt) {
-    this.belts.push(belt);
-  }
-
-  //  自身的连接带
-  addSelfBelt(isLeft = true, isLast = true) {
-    const selfBelt = this.creatBelt(this, isLeft);
-    const name = `${this.name}_${isLeft ? 'l' : 'r'}`;
-    const startX = isLeft ? this.x - this.margin.left : this.x + this.width;
-    const start = {
-      x: startX,
-      y: this.y,
-      value: this.height,
-    };
-    const lastSpace = isLast ? 0 : this.config.space;
-    const endX = isLeft ? this.x : this.x + this.width + this.margin.right - lastSpace;
-    const end = {
-      x: endX,
-      y: this.y,
-      value: this.height,
-    };
-    selfBelt.init(name, start, end);
-    selfBelt.setCommonColor();
-    this.addBelt(selfBelt);
-  }
-
-  initLink(name) {
-    this.initPorperty(name, []);
-  }
-
-  addLink(name, node) {
-    this[name].push(node);
-  }
-
-  getTotalLinkValue(linkValue) {
-    return linkValue.reduce((cur, pre) => cur + pre.height, 0);
-  }
-
-  //   连接到父节点的连接带
-  addParentBelt(islast = true) {
-    const belt = this.creatBelt(this);
-    const { scaleBar, marginWidth } = this.config;
-    // 父节点
-    const parentNode = this.parent[0];
-    const parX = parentNode.x;
-    const parY = parentNode.y;
-    const parName = parentNode.name;
-    const parWidth = parentNode.width;
-    const isFistLink = !parentNode.childLink;
-    const marginRight = marginWidth[this.col - 1].right;
-    const isSecondDepthsNode = !parentNode.parent;
-    isSecondDepthsNode ? belt.setGradientColor(parentNode) : belt.setCommonColor();
-    let preChilHeight = 0;
-    // 没连接过生成新的childLinkList
-    if (isFistLink && isSecondDepthsNode) {
-      parentNode.initLink('childLink');
-    } else {
-      // 连接过计算之前链接的值
-      preChilHeight = this.getTotalLinkValue(parentNode.childLink);
-    }
-    if (isSecondDepthsNode) {
-      const childLink = {
-        name: this.name,
-        height: this.height,
-      };
-      parentNode.addLink('childLink', childLink);
-    }
-    const name = isSecondDepthsNode ? `${parName}_${this.name}` : `${this.name}${islast ? '_l' : ''} `;
-    let beltHeight = this.height;
-    if (islast) {
-      const linkVal = this.getLinkVal(parName, this.name);
-      beltHeight = linkVal * scaleBar;
-    }
-    const start = {
-      x: isSecondDepthsNode ? parX + parWidth + marginRight : this.x - this.margin.left,
-      y: isSecondDepthsNode ? parY + preChilHeight : this.y,
-      value: isSecondDepthsNode ? beltHeight : this.height,
-    };
-    const end = {
-      x: this.x,
-      y: this.y,
-      value: isSecondDepthsNode ? beltHeight : this.height,
-    };
-    belt.init(name, start, end);
-    this.addBelt(belt);
-  }
-
-  //   连接到子节点的连接带
-  addChildrenBelt() {
-    const { scaleBar, marginWidth, space } = this.config;
-    this.children.forEach(child => {
-      const belt = this.creatBelt(child, false);
-      belt.setGradientColor(this);
-      const linkVal = this.getLinkVal(this.name, child.name);
-      const linkHeight = linkVal * scaleBar;
-      const childX = child.x;
-      const childY = child.y;
-      const childName = child.name;
-      const childMarign = marginWidth[this.col + 1].left;
-      const isFirstLinkChild = !this.childLink;
-      const isFistLinkPar = !child.parentLink;
-      let preChildHeight = 0;
-      let preParentHeight = 0;
-      // 判断当前节点的子节点没有连接过父节点
-      if (isFistLinkPar) {
-        child.initLink('parentLink');
-      } else {
-        preParentHeight = this.getTotalLinkValue(child.parentLink);
-      }
-      // 判断节点有没有连接过子节点
-      if (isFirstLinkChild) {
-        this.initLink('childLink');
-      } else {
-        preChildHeight = this.getTotalLinkValue(this.childLink);
-      }
-      const name = `${this.name}_${childName}`;
-      const start = {
-        x: this.x + this.width,
-        y: this.y + preChildHeight,
-        value: linkHeight,
-      };
-      const end = {
-        x: childX - childMarign - space,
-        y: childY + preParentHeight,
-        value: linkHeight,
-      };
-      belt.init(name, start, end);
-      const childLink = {
-        name: child.name,
-        height: linkHeight,
-      };
-      this.addLink('childLink', childLink);
-      const parentLink = {
-        name,
-        height: linkHeight,
-      };
-      child.addLink('parentLink', parentLink);
-      this.addBelt(belt);
-    });
-  }
-  // 生成前部的连接带
-  setBeforeBelt() {
-    // 根节点
-    if (!this.parent && this.children) {
-      this.addSelfBelt();
-    }
-    // 最后一层节点
-    if (this.parent && !this.children) {
-      this.addParentBelt();
-    }
-    // 中间节点
-    if (this.parent && this.children) {
-      this.addParentBelt(false);
-    }
-  }
-  // 生成后部的连接带
-  setAfterBelt() {
-    // 根节点
-    if (!this.parent && this.children) {
-      this.addSelfBelt(false, false);
-    }
-    // 最后一层节点
-    if (this.parent && !this.children) {
-      this.addSelfBelt(false, true);
-    }
-
-    // 中间节点
-    if (this.parent && this.children) {
-      this.addChildrenBelt();
-    }
-  }
-
-  // 生成对应节点的连接带
-  initBelts() {
-    this.setBeforeBelt();
-    this.setAfterBelt();
-  }
-}

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

@@ -1,51 +0,0 @@
-/**
- * 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.
- *
- */
-function baseOption() {
-  return {
-    // 图表宽度
-    width: undefined,
-    // 图表高度
-    height: undefined,
-    // 各个阶段的宽度占比
-    depthWidth: ['25%', '50%', '25%'],
-    // 连接处的间隙
-    space: 0,
-    // 节点颜色
-    background: '#0067D1',
-    marginWidth: [
-      {
-        left: 50,
-        right: 50,
-      },
-      {
-        left: 100,
-        right: 100,
-      },
-      {
-        left: 50,
-        right: 50,
-      },
-    ],
-    // 节点之间的垂直间距
-    nodeSpace: 40,
-    scaleBar: 8,
-    statusColor: {
-      1: '#0067D1',
-      2: '#BBC0C7',
-      3: '#0067D1',
-    },
-    smoothingCurves: false,
-    // 控制河流和顶部的距离
-    offsetY: 0,
-  };
-}
-export default baseOption;

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

@@ -1,79 +0,0 @@
-/**
- * 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 baseOption from './baseOption';
-import Manager from './Manager';
-import { setChartSize, initWrapper } from './util';
-import { CHART_TYPE } from '../../util/constants';
-
-export default class RiverChart {
-
-  static name = CHART_TYPE.RIVER
-
-  // 配置项
-  option = {};
-  // 整个图表容器
-  container = null;
-  // 图表的外层wrapper
-  wrapper = null;
-  // 节点的容器
-  nodeContainer = null;
-  // svg容器
-  svgElement = null;
-  // 图表容器大小
-  containerSize = {
-    width: 0,
-    height: 0,
-  };
-  manager = null;
-
-  // 初始化
-  init(container) {
-    this.container = container;
-    this.beforeRender();
-    const _this = this;
-    initWrapper(this.container, _this);
-    // 算出容器的大小
-    const size = container.getBoundingClientRect();
-    this.containerSize.width = size.width;
-    this.containerSize.height = size.height;
-  }
-
-  beforeRender() {
-    // 刷新图表的时候清空内部的节点
-    if (this.container) this.container.innerHTML = '';
-  }
-
-  // 设置图表的配置项
-  setOption(option) {
-    this.option = Object.assign(baseOption(), option);
-    setChartSize(this.svgElement, this.nodeContainer, this.option);
-    if (this.svgElement) this.svgElement.innerHTML = '';
-    if (this.nodeContainer) this.nodeContainer.innerHTML = '';
-    this.render();
-  }
-
-  render() {
-    const { data, width } = this.option;
-    if (!width) {
-      this.option.width = this.containerSize.width;
-      this.option.height = this.containerSize.height;
-    }
-    this.manager = new Manager(this.svgElement, this.nodeContainer, this.option, data);
-    this.manager.init();
-    this.manager.render();
-  }
-
-  destory() {
-    this.container.innerHTML = '';
-    this.manager = null;
-  }
-}

package/src/components/charts/components/RiverChart/index.less

@@ -1,42 +0,0 @@
-/**
- * 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.
- *
- */
-.rc_wrapper{
-   width: 100%;
-   height: 100%;
-   position: relative;
-   padding: 0;
-   margin: 0;
-}
-
-.rc_node_container{
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left:0;
-    top: 0;
-    background:transparent;
-    padding: 0;
-    margin: 0;
-}
-
-.rc_svg_container{
-    width: 100%;
-    height: 100%;
-    position: relative;
-    padding: 0;
-    margin: 0;
-}
-.rc_node{
-    position: absolute;
-    left: 0;
-    top: 0;
-}