@ebiz/designer-components 0.0.18

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

@@ -0,0 +1,160 @@
+/**
+ * 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.
+ *
+ */
+// 创建svg元素
+function renderSvgDom(type, property) {
+  const version = 'http://www.w3.org/2000/svg';
+  const svgEl = document.createElementNS(version, type);
+  if (property) {
+    const keys = Object.keys(property);
+    keys.forEach(key => {
+      svgEl.setAttribute(key, property[key]);
+    });
+  }
+  return svgEl;
+}
+
+// 创造元素
+function createEl(elName) {
+  return document.createElement(elName);
+}
+
+// 设置样式
+function setStyle(target, key, value) {
+  target.style[key] = value;
+}
+
+// 添加元素
+function appendEL(parNode, chiNode) {
+  parNode.appendChild(chiNode);
+}
+
+// 判断数组
+function isArray(data) {
+  return Object.prototype.toString.call(data) === '[object Array]' ? true : false;
+}
+
+// 给指定dom添加class类名，classList为数组类型
+function addClass(riverDom, classes) {
+  if (isArray(classes)) {
+    classes.forEach(cls => {
+      riverDom.classList.add(cls);
+    });
+  } else {
+    riverDom.classList.add(classes);
+  }
+}
+
+// 给指定dom添加或更改属性
+function attr(dom, key, value) {
+  dom.setAttribute(key, value);
+}
+
+function getPathD(point) {
+  const { x1, y1, x2, y2, x3, y3, x4, y4 } = point;
+  // 两个节点之间的距离用来算贝塞尔曲线的控制点
+  const distance = (x3 - x1) / 2;
+
+  let path;
+
+  // 前后节点在同一水平线，高度也相等
+  if (y1 === y3 && y2 === y4) {
+    path = `M${x1} ${y1} L${x3} ${y3} L${x4} ${y4} L${x2} ${y2} L${x1} ${y1}Z`;
+  }
+
+  // 前后节点顶部同一水平线
+  if (y1 === y3 && y2 !== y4) {
+    path = `M${x1} ${y1} L${x3} ${y3} L${x4} ${y4} C${x4 - distance} ${y4} ${
+      x2 + distance
+    } ${y2} ${x2} ${y2} L${x1} ${y1}Z`;
+  }
+
+  // 前后节点底部同一水平线
+  if (y1 !== y3 && y2 === y4) {
+    path = `M${x1} ${y1} C${x1 + distance} ${y1} ${
+      x3 - distance
+    } ${y3} ${x3} ${y3} L${x4} ${y4} L${x2} ${y2} L${x1} ${y1}Z`;
+  }
+
+  // 前后节点交错重合
+  if (y1 !== y3 && y2 !== y4) {
+    path = `M${x1} ${y1} C${x1 + distance} ${y1} ${x3 - distance} ${y3} ${x3} ${y3} L${x4} ${y4} C${
+      x4 - distance
+    } ${y4} ${x2 + distance} ${y2} ${x2} ${y2} L${x1} ${y1}Z`;
+  }
+
+  return path;
+}
+
+function getSmoothPathD(point, height) {
+  const { x1, y1, x3, y3 } = point;
+  // 两个节点之间的距离用来算贝塞尔曲线的控制点
+  const distance = (x3 - x1) / 2;
+  let path;
+  if (y1 === y3) {
+    path = `M${x1} ${y1 - height / 2} L${x3} ${y3 - height / 2} L${x3} ${y3 + height / 2} L${x1} ${y1 + height / 2}Z`;
+  } else {
+    path = `M${x1} ${y1} C${x1 + distance} ${y1} ${x3 - distance} ${y3} ${x3} ${y3}`;
+  }
+  return path;
+}
+
+function setChartSize(svgContainer, nodeContainer, option) {
+  const { width, height } = option;
+  if (width) {
+    setStyle(svgContainer, 'width', `${width}px`);
+    setStyle(nodeContainer, 'width', `${width}px`);
+  }
+  if (height) {
+    setStyle(svgContainer, 'height', `${height}px`);
+    setStyle(nodeContainer, 'height', `${height}px`);
+  }
+}
+
+function initSvgContainer(wrapper, _this) {
+  const svgEl = renderSvgDom('svg');
+  _this.svgElement = svgEl;
+  attr(svgEl, 'xmlns', 'http://www.w3.org/2000/svg');
+  attr(svgEl, 'version', '1.1');
+  attr(svgEl, 'width', '100%');
+  attr(svgEl, 'height', '100%');
+  attr(svgEl, 'class', 'rc_svg_container');
+  appendEL(wrapper, svgEl);
+}
+
+function initNodeContainer(wrapper, _this) {
+  const nodeContainerEl = createEl('div');
+  _this.nodeContainer = nodeContainerEl;
+  addClass(nodeContainerEl, 'rc_node_container');
+  appendEL(wrapper, nodeContainerEl);
+}
+
+function initWrapper(container, _this) {
+  const wrapperEl = createEl('div');
+  _this.wrapper = wrapperEl;
+  addClass(wrapperEl, 'rc_wrapper');
+  appendEL(container, wrapperEl);
+  initSvgContainer(wrapperEl, _this);
+  initNodeContainer(wrapperEl, _this);
+}
+
+export {
+  setChartSize,
+  renderSvgDom,
+  setStyle,
+  createEl,
+  appendEL,
+  addClass,
+  attr,
+  getPathD,
+  getSmoothPathD,
+  initWrapper,
+};

package/src/components/charts/components/SankeyChart/BaseOption.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 chartToken from './chartToken';
+
+const BaseOption = (labelPosition) => {
+  return {
+    tooltip: {
+      trigger: 'item',
+      triggerOn: 'mousemove',
+    },
+    animation: true,
+    series: [
+      {
+        nodeAlign: 'left',
+        orient: 'horizontal',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        left: 0,
+        nodeGap: 0,// 控制每列矩形的距离     
+        nodeWidth: 0,// 控制矩形的宽度
+        type: 'sankey',
+        data: {},
+        links: {},
+        emphasis: {
+          focus: 'adjacency',
+        },
+        layout: 'none',
+        focusNodeAdjaceny: true,
+        layoutIterations: 0,// 将节点按照data中的顺序排列，将值改为0
+        levels: [// 设置第一层的文本在左侧
+          {
+            depth: 0,
+            label: {
+              position: labelPosition ? labelPosition : 'left',
+              align: labelPosition? null : 'right'
+            },
+          },
+        ],
+        itemStyle: {},
+        lineStyle: {
+          color: 'source',// 线条颜色过渡         
+          opacity: 0.5,// 线条透明度         
+          curveness: 0.5,// 线条弯曲度
+        },
+        label: {
+          distance: 5,
+          position: 'right',
+          rich: {
+            name: {
+              fontSize: 12,
+              color: chartToken.labelNameColor,
+            },
+            value: {
+              fontSize: 12,
+              color: chartToken.labelValueColor,
+              align: 'center'
+            }
+          }
+        },
+      },
+    ],
+  };
+};
+export default BaseOption;

package/src/components/charts/components/SankeyChart/chartToken.js

@@ -0,0 +1,17 @@
+/**
+ * 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 {CHART_TYPE} from '../../util/constants'
+
+const chartToken = Token.getTokenByName(CHART_TYPE.SANKEY)
+
+export default chartToken;

package/src/components/charts/components/SankeyChart/handleOption.js

@@ -0,0 +1,258 @@
+/**
+ * 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 { getTextWidth } from '../../util/dom';
+import merge from '../../util/merge';
+import { getColor } from '../../util/color';
+
+const initNodes = (nodes, links) => {
+  let recordNode = {};
+  let leafNode = [];
+  nodes.forEach(node => {
+    leafNode.push(node.name);
+  });
+  links.forEach(link => {
+    let index = leafNode.findIndex(node => {
+      return node === link.source;
+    });
+    if (index !== -1) { // 获取叶子节点
+      leafNode.splice(index, 1);
+    }
+  });
+  links.forEach(link => {
+    // 非叶子节点
+    recordNode[link.source] = (recordNode[link.source] || 0) + link.value;
+    // 叶子节点
+    leafNode.forEach((leaf) => {
+      if (link.target === leaf) {
+        recordNode[leaf] = (recordNode[leaf] || 0) + link.value;
+      }
+    });
+  });
+  nodes.forEach(node => {
+    node.value = Math.max(node.value || 0, recordNode[node.name]);
+  });
+};
+
+const isNameRepeat = (arr) => {
+  let nameArr = [];
+  arr.forEach((item, index) => {
+    if (!nameArr.includes(item.name)) {
+      nameArr.push(item.name);
+    } else {
+      throw Error('图表的nodes数据中定义了重复的name');
+    }
+  });
+};
+
+// 为每个节点矩形块配置颜色组，循环使用
+const handleItemStyle = (iChartOption, baseOpt) => {
+  const { color, itemStyle } = iChartOption;
+  const data = baseOpt.series[0].data;
+  // 配置节点及边框颜色。nodes.itemStyle>itemStyle>color
+  data.forEach((item, index) => {
+    item.itemStyle = {
+      color: Array.isArray(color) ? getColor(color, index) : color,
+      ...itemStyle,
+      ...item.itemStyle
+    };
+  });
+};
+
+const judgeMaxText = (textArr, textArrange, nameFontSize, valueFontSize, data) => {
+  let maxWidth = 0;
+  textArr.forEach((item) => {
+    data.forEach((val) => {
+      if (item.name === val.name) {
+        const { name, value } = item;
+        const { label } = val;
+        let textWidth;
+        if (textArrange === 'horizontal') {
+          textWidth = getTextWidth(name, Math.max(nameFontSize, label?.rich?.name?.fontSize || 0))
+            + getTextWidth(value, Math.max(valueFontSize, label?.rich?.value?.fontSize || 0));
+        } else {
+          textWidth = Math.max(getTextWidth(name, Math.max(nameFontSize, label?.rich?.name?.fontSize || 0)),
+            getTextWidth(value, Math.max(valueFontSize, label?.rich?.value?.fontSize || 0)));
+        }
+        if (textWidth > maxWidth) {
+          maxWidth = textWidth;
+        }
+      }
+    });
+  });
+  return maxWidth;
+};
+
+// 配置桑基图的chartPadding
+export function padSize(padding, { baseOpt, userPadding }, centerName, leftNodeArr, rightNodeArr) {
+  if (userPadding) {
+    baseOpt.series[0].top = padding[0];
+    baseOpt.series[0].right = padding[1];
+    baseOpt.series[0].bottom = padding[2];
+    baseOpt.series[0].left = padding[3];
+  } else {
+    const { label: { distance, textArrange = 'horizontal', rich: { name: { fontSize: nameFontSize }, value: { fontSize: valueFontSize } } }, orient = 'horizontal', levels, data } = baseOpt.series[0];
+    // 确定左右两侧padding
+    if (orient === 'horizontal') {
+      if (levels[0].label.position === 'left') {
+        baseOpt.series[0].left = judgeMaxText(leftNodeArr, textArrange, nameFontSize, valueFontSize, data) + distance * 3;
+      }
+      if (levels[levels.length - 1].label.position === 'right'
+        || (levels.length < 2 && baseOpt.series[0].label.position === 'right')) {
+        baseOpt.series[0].right = judgeMaxText(rightNodeArr, textArrange, nameFontSize, valueFontSize, data) + distance * 3;
+      }
+      // 根据中间的文本，确定topPadding
+      if (centerName) {
+        let centerNameFontSize = 0;
+        let centerValueFontSize = 0;
+        baseOpt.series[0].data.forEach((dataItem) => {
+          if (dataItem.name === centerName) {
+            centerNameFontSize = dataItem?.label?.rich?.name?.fontSize || 0;
+            centerValueFontSize = dataItem?.label?.rich?.value?.fontSize || 0;
+          }
+        });
+        if (textArrange === 'horizontal') {
+          baseOpt.series[0].top = Math.max(nameFontSize, valueFontSize, centerNameFontSize, centerValueFontSize) + distance * 3;
+        } else {
+          baseOpt.series[0].top = Math.max(nameFontSize, centerNameFontSize) + Math.max(valueFontSize, centerValueFontSize) + distance * 3;
+        }
+      }
+    }
+  }
+}
+
+// 配置桑基图的label
+export function setLabel(iChartOption, baseOpt) {
+  const { label } = iChartOption;
+  merge(baseOpt.series[0].label, label);
+}
+
+export function handleLineStyle(iChartOption) {
+  const { lineStyle, data: { links }, emptyStatus = 'node' } = iChartOption;
+  links.forEach((item) => {
+    item.lineStyle = {
+      ...lineStyle,
+      ...item.lineStyle
+    };
+    if (!item.value && emptyStatus === 'node') { // 如果是空值且只展示节点，则隐藏连线
+      item.lineStyle = {
+        ...item.lineStyle,
+        color: 'transparent'
+      };
+    }
+  });
+}
+
+const setEmptyLimit = (nodes) => {
+  let minVal = 2; // 空值的上限大小，如果出现比上限小的值，那就取比上限小的值
+  nodes.forEach((item) => {
+    if (item.value && item.value < minVal) {
+      minVal = item.value;
+    }
+  });
+  nodes.forEach(node => { // 补全空值
+    if (!node.value) {
+      node.value = minVal;
+      node.empty = true;
+    }
+  });
+};
+
+const dataSort = (iChartOption) => {
+  const { sortType = 'unset', data: { nodes } } = iChartOption;
+  // 设置排序方式，默认不排序,就是按照数据出现的先后排序
+  if (sortType !== 'unset') {
+    nodes.sort((a, b) => {
+      let val1 = a.empty ? 0 : a.value;
+      let val2 = b.empty ? 0 : b.value;
+      return sortType === 'ascend' ? (val1 - val2) : (val2 - val1);
+    });
+  }
+};
+
+const nodeLabelLayout = (label, baseOpt) => {
+  const { textArrange = 'horizontal', formatter } = label;
+  if (!formatter) {
+    if (textArrange === 'horizontal') {
+      baseOpt.series[0].label.formatter = (params) => { // name和value 横向排布
+        return `{name|${params.name}} {value|${params.data.empty ? 0 : params.data.value}}`;
+      };
+    } else {
+      baseOpt.series[0].label.formatter = (params) => { // name和value 纵向排布
+        return `{name|${params.name}}\n{value|${params.data.empty ? 0 : params.data.value}}`;
+      };
+    }
+  }
+};
+
+const compareNodeText = (iChartOption, baseOpt, that, instance) => {
+  let overHide = false;
+  if (iChartOption.label?.overHide) {
+    overHide = true;
+  }
+  const { label: { textArrange = 'horizontal', rich: { name: { fontSize: nameFontSize }, value: { fontSize: valueFontSize } } },
+  } = baseOpt.series[0];
+  baseOpt && instance.setOption(baseOpt, true);
+  let modal = instance.getModel().getSeriesByIndex(0).getData();
+  let layoutArr = modal._itemLayouts;
+  let labelHeight = 0;
+  layoutArr.forEach((item, index) => {
+    if (textArrange === 'horizontal') {
+      labelHeight = Math.max(nameFontSize, valueFontSize,
+        baseOpt.series[0].data[index].label?.rich?.name?.fontSize || 0,
+        baseOpt.series[0].data[index].label?.rich?.value?.fontSize || 0);
+    } else {
+      labelHeight = Math.max(nameFontSize, baseOpt.series[0].data[index].label?.rich?.name?.fontSize || 0) + Math.max(valueFontSize, baseOpt.series[0].data[index].label?.rich?.value?.fontSize || 0);
+    }
+    if (labelHeight > item.dy && overHide) {
+      baseOpt.series[0].data[index].label = {
+        show: false
+      };
+    }
+  });
+  let centerName = ''; // 记录下中间的最高点的name值，计算topPadding
+  let leftNodeArr = []; // 最左侧节点集合
+  let rightNodeArr = []; // 最右侧节点集合
+  let nodeInfo; //节点信息
+  let minY = 999;
+  let maxDepth = layoutArr[layoutArr.length - 1].depth;
+  layoutArr.forEach((item, index) => {
+    nodeInfo = {
+      name: baseOpt.series[0].data[index].name,
+      value: baseOpt.series[0].data[index].value,
+      text: baseOpt.series[0].data[index].name + ' ' + baseOpt.series[0].data[index].value
+    };
+    if(iChartOption.label?.position === 'left'){
+      leftNodeArr.push(nodeInfo);
+    }else if(iChartOption.label?.position === 'right'){
+      rightNodeArr.push(nodeInfo);
+    }else{
+      if (item.depth === 0) {
+        leftNodeArr.push(nodeInfo);
+      } else if (item.depth === maxDepth) {
+        rightNodeArr.push(nodeInfo);
+      } else if (item.depth < maxDepth && item.depth > 0) {
+        baseOpt.series[0].data[index].label = {
+          position: 'top', // 中间的节点文本展示在节点上方
+          ...baseOpt.series[0].data[index].label
+        };
+        if (item.y < minY) {
+          minY = item.y;
+          centerName = baseOpt.series[0].data[index].name;
+        }
+      }
+    }
+  });
+  that.upDateOption(centerName, leftNodeArr, rightNodeArr);
+  baseOpt && instance.setOption({}, true);
+};
+
+export { handleItemStyle, setEmptyLimit, dataSort, nodeLabelLayout, compareNodeText, isNameRepeat, initNodes };

package/src/components/charts/components/SankeyChart/index.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.
+ *
+ */
+import cloneDeep from '../../util/cloneDeep';
+import BaseOption from './BaseOption';
+import init from '../../option/init';
+import merge, { mergeSeries } from '../../util/merge';
+import {
+  padSize,
+  setLabel,
+  handleLineStyle,
+  dataSort,
+  nodeLabelLayout,
+  handleItemStyle,
+  compareNodeText,
+  setEmptyLimit,
+  isNameRepeat,
+  initNodes
+} from './handleOption';
+import { setTooltip } from './tooltip';
+import { CHART_TYPE } from '../../util/constants';
+
+class SankeyChart {
+
+  static name = CHART_TYPE.SANKEY
+
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    this.baseOption = cloneDeep(BaseOption(iChartOption.label?.position));
+    // 记录下用户传入的初始的padding值
+    this.userPadding = iChartOption.padding || iChartOption.chartPadding;
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(iChartOption, chartInstance);
+  }
+
+  updateOption(iChartOption, chartInstance) {
+    // 配置数据
+    const { data: { nodes, links },
+      draggable = true,
+      tipHtml,
+      widthSpace = [10, 30],
+      nodeAlign = 'justify',
+      label = {}
+    } = iChartOption;
+    // 如果nodes中没有定义value，需要根据links，给其赋值
+    initNodes(nodes, links);
+    this.baseOption.series[0].data = nodes;
+    this.baseOption.series[0].links = links;
+    if (!nodes || !nodes.length || !links || !links.length) { // 数据不全，不执行后续操作
+      return;
+    }
+    // 判断nodes是否有重名，抛错
+    isNameRepeat(nodes);
+    // 是否设置移动
+    this.baseOption.series[0].draggable = draggable;
+    // 配置颜色组
+    handleItemStyle(iChartOption, this.baseOption);
+    // 配置提示悬浮框样式
+    setTooltip(iChartOption, tipHtml, this.baseOption);
+    // 配置桑基图label属性
+    setLabel(iChartOption, this.baseOption);
+    // 数据排序，并且补全空值
+    setEmptyLimit(nodes);
+    // 配置节点矩形的宽度及每列间距
+    this.baseOption.series[0].nodeWidth = widthSpace[0];
+    this.baseOption.series[0].nodeGap = widthSpace[1];
+    // 配置桑基图的布局对齐方式
+    this.baseOption.series[0].nodeAlign = nodeAlign;
+    // 配置桑基图lineStyle属性
+    handleLineStyle(iChartOption);
+    // 设置节点文本的展示方式(横向布局，纵向布局)
+    nodeLabelLayout(label, this.baseOption);
+    // 对比节点与其文本的高度,文本过高则隐藏(需要调取echarts的原生api)
+    compareNodeText(iChartOption, this.baseOption, this, chartInstance);
+  }
+
+  upDateOption(centerName, leftNodeArr, rightNodeArr) {
+    // 配置chartPadding
+    const { grid = {}, xAxis, yAxis = { show: false }, tooltip = {}, title, padding, chartPadding } = this.iChartOption;
+    padSize(padding || chartPadding, { baseOpt: this.baseOption, userPadding: this.userPadding }, centerName, leftNodeArr, rightNodeArr);
+    dataSort(this.iChartOption);
+    mergeSeries(this.iChartOption, this.baseOption);
+    merge(this.baseOption, {
+      grid,
+      xAxis: xAxis[0].data && xAxis[0].data.length ? xAxis : { show: false },
+      yAxis,
+      tooltip,
+      title
+    });
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption() { }
+}
+
+export default SankeyChart;

package/src/components/charts/components/SankeyChart/tooltip.js

@@ -0,0 +1,53 @@
+/**
+ * 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 tooltip from '../../option/config/tooltip';
+import defendXSS from '../../util/defendXSS';
+import { CHART_TYPE } from '../../util/constants';
+
+function defaultFormatter(params, iChartOption) {
+  const { emptyStatus = 'node' } = iChartOption;
+  let htmlString = '';
+  if (params.name.includes('>')) {
+    params.name = params.name.replace('>', '---');
+  }
+  const value = params.data.empty ? 0 : (params.data.value || params.value);
+  if (emptyStatus === 'node' && params.dataType === 'edge' && value === 0) { // 如果空值只展示节点，则连线的tooltip不展示
+    return;
+  }
+  htmlString +=
+    `<span style="display:inline-block;margin-right:5px;border-radius:50%;height:10px;">${defendXSS(params.name)}</span>` +
+    '<br/>' +
+    '<span style="display:inline-block;margin-right:5px;border-radius:50%;height:10px;">' +
+    'value' +
+    `  :  ${defendXSS(value)}</span>`;
+  return htmlString;
+}
+
+function handleSankeyFormatter(formatter, sankeyTooltip, iChartOption) {
+  if (formatter) {
+    sankeyTooltip.formatter = formatter;
+  } else {
+    sankeyTooltip.formatter = params => {
+      // 如果是虚拟节点则不展示toolTip
+      let html = defaultFormatter(params, iChartOption);
+      return html;
+    };
+  }
+}
+
+// 配置桑基图的自定义悬浮提示框
+export function setTooltip(iChartOption, formatter, baseOpt) {
+  const sankeyTooltip = tooltip(iChartOption,CHART_TYPE.SANKEY);
+  handleSankeyFormatter(formatter, sankeyTooltip, iChartOption);
+  sankeyTooltip.trigger = 'item';
+  baseOpt.tooltip = sankeyTooltip;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * 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 {CHART_TYPE} from '../../util/constants'
+
+const chartToken = Token.getTokenByName(CHART_TYPE.SCATTER)
+
+export default chartToken;