@ebiz/designer-components 0.0.18-beta.1 → 0.0.18-beta.2

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

@@ -1,142 +1,142 @@
-/**
- * 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 { virtualNodeSymbol, darkArrow, lightArrow, lightColor, darkColor } from './BaseOption';
-
-/**
- * 配置节点的样式，与节点的category属性有关
- * @param {*} iChartOption
- * @param {*} baseOption
- * @param {*} theme
- */
-const handleCategories = (iChartOption, baseOption, theme) => {
-  const baseCategories = [
-    // 根节点样式
-    {
-      symbol: 'circle',
-      symbolSize: 12,
-      itemStyle: {
-        color: '#dfba3f',
-      },
-    },
-    // 子节点样式
-    {
-      symbol: 'circle',
-      symbolSize: 12,
-      itemStyle: {
-        color: theme.indexOf('light') !== -1 ? lightColor : darkColor,
-      },
-    },
-    // 虚拟节点样式(方形小黄块)
-    {
-      symbol: virtualNodeSymbol,
-      symbolSize: 20,
-      // symbol: 'path://M10 10,L20 10,L20 20, L10 20 Z',
-      itemStyle: {
-        color: '#dfba3f',
-      },
-    },
-  ];
-  let iChartCategories = [];
-  if (iChartOption.categories && iChartOption.categories.length) {
-    iChartOption.categories.forEach((item, index) => {
-      item = Object.assign(baseCategories[index], item);
-      iChartCategories.push(item);
-    });
-  }
-
-  const categories = iChartOption.categories && iChartOption.categories.length ? iChartCategories : baseCategories;
-  baseOption.series[0].categories = categories;
-};
-
-/**
- * 处理force配置(节点间距、节点密集度、节点连线长度、树趋近率)
- * @param {*} iChartOption
- * @param {*} baseOption
- */
-const handleForce = (iChartOption, baseOption) => {
-  const baseForce = {
-    repulsion: 10,
-    gravity: 0.12,
-    edgeLength: [16, 28],
-    layoutAnimation: false,
-    friction: 0.05,
-  };
-  const { force } = iChartOption;
-  if (force) {
-    baseOption.series[0].force = Object.assign(baseForce, force);
-  } else {
-    baseOption.series[0].force = { ...baseForce };
-  }
-};
-
-/**
- * 根据主题配置节点连线箭头样式
- * @param {*} iChartOption
- * @param {*} baseOption
- * @param {*} theme
- */
-const handleArrow = (iChartOption, baseOption, theme) => {
-  baseOption.series[0].edgeSymbol =
-    iChartOption.edgeSymbol !== undefined
-      ? iChartOption.edgeSymbol
-      : theme.indexOf('light') !== -1
-      ? [lightArrow, 'none']
-      : [darkArrow, 'none'];
-};
-
-/**
- * 处理图表位置
- * @param {*} iChartOption
- * @param {*} baseOption
- */
-const handlePosition = (iChartOption, baseOption) => {
-  let { chartPosition } = iChartOption;
-  if (chartPosition && chartPosition.length) {
-    switch (chartPosition.length) {
-      case 1:
-        baseOption.series[0].top = iChartOption.chartPosition[0];
-        baseOption.series[0].left = iChartOption.chartPosition[0];
-        break;
-      case 2:
-        baseOption.series[0].top = iChartOption.chartPosition[0];
-        baseOption.series[0].left = iChartOption.chartPosition[1];
-        break;
-    }
-  } else {
-    chartPosition = ['center', 'center'];
-    baseOption.series[0].top = chartPosition[0];
-    baseOption.series[0].left = chartPosition[1];
-  }
-};
-
-/**
- * 配置节点连线样式
- * @param {*} iChartOption
- * @param {*} baseOption
- * @param {*} theme
- */
-const handleLineStyle = (iChartOption, baseOption, theme) => {
-  const baseLineStyle = {
-    width: 1,
-    type: 'solid',
-    color: theme.indexOf('light') !== -1 ? lightColor : darkColor,
-    opacity: 1,
-  };
-  const { lineStyle } = iChartOption;
-  if (lineStyle) {
-    baseOption.series[0].lineStyle = Object.assign(baseLineStyle, lineStyle);
-  } else {
-    baseOption.series[0].lineStyle = { ...baseLineStyle };
-  }
-};
-
-export { handleCategories, handleForce, handleArrow, handlePosition, handleLineStyle };
+/**
+ * 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 { virtualNodeSymbol, darkArrow, lightArrow, lightColor, darkColor } from './BaseOption';
+
+/**
+ * 配置节点的样式，与节点的category属性有关
+ * @param {*} iChartOption
+ * @param {*} baseOption
+ * @param {*} theme
+ */
+const handleCategories = (iChartOption, baseOption, theme) => {
+  const baseCategories = [
+    // 根节点样式
+    {
+      symbol: 'circle',
+      symbolSize: 12,
+      itemStyle: {
+        color: '#dfba3f',
+      },
+    },
+    // 子节点样式
+    {
+      symbol: 'circle',
+      symbolSize: 12,
+      itemStyle: {
+        color: theme.indexOf('light') !== -1 ? lightColor : darkColor,
+      },
+    },
+    // 虚拟节点样式(方形小黄块)
+    {
+      symbol: virtualNodeSymbol,
+      symbolSize: 20,
+      // symbol: 'path://M10 10,L20 10,L20 20, L10 20 Z',
+      itemStyle: {
+        color: '#dfba3f',
+      },
+    },
+  ];
+  let iChartCategories = [];
+  if (iChartOption.categories && iChartOption.categories.length) {
+    iChartOption.categories.forEach((item, index) => {
+      item = Object.assign(baseCategories[index], item);
+      iChartCategories.push(item);
+    });
+  }
+
+  const categories = iChartOption.categories && iChartOption.categories.length ? iChartCategories : baseCategories;
+  baseOption.series[0].categories = categories;
+};
+
+/**
+ * 处理force配置(节点间距、节点密集度、节点连线长度、树趋近率)
+ * @param {*} iChartOption
+ * @param {*} baseOption
+ */
+const handleForce = (iChartOption, baseOption) => {
+  const baseForce = {
+    repulsion: 10,
+    gravity: 0.12,
+    edgeLength: [16, 28],
+    layoutAnimation: false,
+    friction: 0.05,
+  };
+  const { force } = iChartOption;
+  if (force) {
+    baseOption.series[0].force = Object.assign(baseForce, force);
+  } else {
+    baseOption.series[0].force = { ...baseForce };
+  }
+};
+
+/**
+ * 根据主题配置节点连线箭头样式
+ * @param {*} iChartOption
+ * @param {*} baseOption
+ * @param {*} theme
+ */
+const handleArrow = (iChartOption, baseOption, theme) => {
+  baseOption.series[0].edgeSymbol =
+    iChartOption.edgeSymbol !== undefined
+      ? iChartOption.edgeSymbol
+      : theme.indexOf('light') !== -1
+      ? [lightArrow, 'none']
+      : [darkArrow, 'none'];
+};
+
+/**
+ * 处理图表位置
+ * @param {*} iChartOption
+ * @param {*} baseOption
+ */
+const handlePosition = (iChartOption, baseOption) => {
+  let { chartPosition } = iChartOption;
+  if (chartPosition && chartPosition.length) {
+    switch (chartPosition.length) {
+      case 1:
+        baseOption.series[0].top = iChartOption.chartPosition[0];
+        baseOption.series[0].left = iChartOption.chartPosition[0];
+        break;
+      case 2:
+        baseOption.series[0].top = iChartOption.chartPosition[0];
+        baseOption.series[0].left = iChartOption.chartPosition[1];
+        break;
+    }
+  } else {
+    chartPosition = ['center', 'center'];
+    baseOption.series[0].top = chartPosition[0];
+    baseOption.series[0].left = chartPosition[1];
+  }
+};
+
+/**
+ * 配置节点连线样式
+ * @param {*} iChartOption
+ * @param {*} baseOption
+ * @param {*} theme
+ */
+const handleLineStyle = (iChartOption, baseOption, theme) => {
+  const baseLineStyle = {
+    width: 1,
+    type: 'solid',
+    color: theme.indexOf('light') !== -1 ? lightColor : darkColor,
+    opacity: 1,
+  };
+  const { lineStyle } = iChartOption;
+  if (lineStyle) {
+    baseOption.series[0].lineStyle = Object.assign(baseLineStyle, lineStyle);
+  } else {
+    baseOption.series[0].lineStyle = { ...baseLineStyle };
+  }
+};
+
+export { handleCategories, handleForce, handleArrow, handlePosition, handleLineStyle };

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

@@ -1,65 +1,65 @@
-/**
- * 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 init from '../../option/init';
-import { BaseOption } from './BaseOption';
-import cloneDeep from '../../util/cloneDeep';
-import { handleData, updateData } from './handleData';
-import { handleCategories, handleForce, handleArrow, handlePosition, handleLineStyle } from './handleOption';
-import { mixTree } from './mixTree';
-import { CHART_TYPE } from '../../util/constants';
-
-class GraphTreeChart {
-
-  static name = CHART_TYPE.GRAPH_TREE
-
-  constructor(iChartOption, chartInstance) {
-    this.rootData = {};
-    this.baseOption = cloneDeep(BaseOption);
-    // 组装 iChartOption, 补全默认值
-    this.iChartOption = init(iChartOption);
-    // 根据 iChartOption 组装 baseOption
-    this.updateOption(iChartOption, chartInstance);
-  }
-
-  updateOption(iChartOption, chartInstance) {
-    // 配置主题
-    const theme = iChartOption.theme || 'light';
-    // 处理节点类目样式
-    handleCategories(iChartOption, this.baseOption, theme);
-    // 处理基础数据
-    const { rootData } = handleData(iChartOption.data, this.baseOption);
-    this.rootData = { ...rootData };
-    // 处理force配置(节点间距、节点密集度、节点连线长度、树趋近率)
-    handleForce(iChartOption, this.baseOption);
-    // 配置节点连线箭头
-    handleArrow(iChartOption, this.baseOption, theme);
-    // 处理图表位置
-    handlePosition(iChartOption, this.baseOption);
-    // 配置节点连线样式
-    handleLineStyle(iChartOption, this.baseOption, theme);
-    // GraphTreeChart聚合树图, 需要走一遍echarts Tree图获取节点对应坐标;
-    mixTree(this, chartInstance, this.baseOption);
-  }
-
-  updateNodesData(positionArr, idArr) {
-    // 将获取到的坐标和id匹配起来传给nodes，更新nodes数据
-    updateData(this.rootData, this.baseOption, positionArr, idArr);
-  }
-
-  getOption() {
-    return this.baseOption;
-  }
-
-  setOption() {}
-}
-
-export default GraphTreeChart;
+/**
+ * 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 init from '../../option/init';
+import { BaseOption } from './BaseOption';
+import cloneDeep from '../../util/cloneDeep';
+import { handleData, updateData } from './handleData';
+import { handleCategories, handleForce, handleArrow, handlePosition, handleLineStyle } from './handleOption';
+import { mixTree } from './mixTree';
+import { CHART_TYPE } from '../../util/constants';
+
+class GraphTreeChart {
+
+  static name = CHART_TYPE.GRAPH_TREE
+
+  constructor(iChartOption, chartInstance) {
+    this.rootData = {};
+    this.baseOption = cloneDeep(BaseOption);
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(iChartOption, chartInstance);
+  }
+
+  updateOption(iChartOption, chartInstance) {
+    // 配置主题
+    const theme = iChartOption.theme || 'light';
+    // 处理节点类目样式
+    handleCategories(iChartOption, this.baseOption, theme);
+    // 处理基础数据
+    const { rootData } = handleData(iChartOption.data, this.baseOption);
+    this.rootData = { ...rootData };
+    // 处理force配置(节点间距、节点密集度、节点连线长度、树趋近率)
+    handleForce(iChartOption, this.baseOption);
+    // 配置节点连线箭头
+    handleArrow(iChartOption, this.baseOption, theme);
+    // 处理图表位置
+    handlePosition(iChartOption, this.baseOption);
+    // 配置节点连线样式
+    handleLineStyle(iChartOption, this.baseOption, theme);
+    // GraphTreeChart聚合树图, 需要走一遍echarts Tree图获取节点对应坐标;
+    mixTree(this, chartInstance, this.baseOption);
+  }
+
+  updateNodesData(positionArr, idArr) {
+    // 将获取到的坐标和id匹配起来传给nodes，更新nodes数据
+    updateData(this.rootData, this.baseOption, positionArr, idArr);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption() {}
+}
+
+export default GraphTreeChart;

package/src/components/charts/components/GraphTreeChart/mixTree.js

@@ -1,36 +1,36 @@
-/**
- * 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.
- *
- */
-// GraphTreeChart聚合树图, 需要走一遍echarts Tree图获取节点对应坐标;
-function mixTree(chart, instance, option) {
-  const TreeOption = {
-    series: [
-      {
-        type: 'tree',
-        data: [chart.rootData],
-        layout: 'radial',
-        expandAndCollapse: true,
-        initialTreeDepth: -1,
-      },
-    ],
-  };
-  // 走一遍echarts Tree图生成节点坐标
-  option && instance.setOption(TreeOption, true);
-  let modal = instance.getModel().getSeriesByIndex(0).getData();
-  // 所有节点的坐标集合
-  let positionArr = modal._itemLayouts;
-  // 所有节点的id名集合
-  let idArr = modal._idList;
-  chart.updateNodesData(positionArr, idArr);
-  option && instance.setOption({}, true);
-}
-
+/**
+ * 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.
+ *
+ */
+// GraphTreeChart聚合树图, 需要走一遍echarts Tree图获取节点对应坐标;
+function mixTree(chart, instance, option) {
+  const TreeOption = {
+    series: [
+      {
+        type: 'tree',
+        data: [chart.rootData],
+        layout: 'radial',
+        expandAndCollapse: true,
+        initialTreeDepth: -1,
+      },
+    ],
+  };
+  // 走一遍echarts Tree图生成节点坐标
+  option && instance.setOption(TreeOption, true);
+  let modal = instance.getModel().getSeriesByIndex(0).getData();
+  // 所有节点的坐标集合
+  let positionArr = modal._itemLayouts;
+  // 所有节点的id名集合
+  let idArr = modal._idList;
+  chart.updateNodesData(positionArr, idArr);
+  option && instance.setOption({}, true);
+}
+
 export { mixTree };

package/src/components/charts/components/GraphTreeChart/utils.js

@@ -1,75 +1,75 @@
-/**
- * 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 createNodes(links, item_, child) {
-  links.forEach((items, indexs) => {
-    if (items.source === item_.target) {
-      const child1 = [];
-      createNodes(links, items, child1);
-      child.push({ id: items.target, children: child1 });
-    }
-  });
-}
-
-// 给nodes数据加上symbolSize和category属性
-function handleNodes(children, categories) {
-  children.forEach((item, index) => {
-    if (item.id.indexOf('_clone') !== -1 || item.id.indexOf('_child') !== -1) {
-      item.symbolSize = categories[categories.length - 1].symbolSize;
-      item.category = categories.length - 1;
-    } else {
-      item.symbolSize = categories[1].symbolSize;
-      item.category = 1;
-    }
-    if (item.children && item.children.length) {
-      handleNodes(item.children, categories);
-    }
-  });
-}
-
-// 将nodes由树结构全部展开,生成新的nodes
-const expandNodes = (nodes, item) => {
-  if (item.children && item.children.length) {
-    item.children.forEach((item_, index_) => {
-      expandNodes(nodes, item_);
-      nodes.push(item_);
-    });
-  }
-};
-
-// 给节点克隆虚拟节点(小黄块), 建立根节点---》克隆节点---》子节点的连接关系
-const cloneNode = (item, index, data_) => {
-  item.children.forEach((item_, index_) => {
-    if (item_.children && item_.children.length) {
-      data_.push({
-        name: item_.name,
-        target: item.name + '-' + index + '-_clone',
-      });
-      data_.push({
-        name: item_.name + '-' + index_ + '-_clone',
-        target: item_.name,
-      });
-      cloneNode(item_, index_, data_);
-    } else {
-      data_.push({
-        name: item_.name,
-        target: item.name + '-' + index + '-_clone',
-      });
-    }
-  });
-};
-
-export { createNodes, handleNodes, expandNodes, cloneNode };
+/**
+ * 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 createNodes(links, item_, child) {
+  links.forEach((items, indexs) => {
+    if (items.source === item_.target) {
+      const child1 = [];
+      createNodes(links, items, child1);
+      child.push({ id: items.target, children: child1 });
+    }
+  });
+}
+
+// 给nodes数据加上symbolSize和category属性
+function handleNodes(children, categories) {
+  children.forEach((item, index) => {
+    if (item.id.indexOf('_clone') !== -1 || item.id.indexOf('_child') !== -1) {
+      item.symbolSize = categories[categories.length - 1].symbolSize;
+      item.category = categories.length - 1;
+    } else {
+      item.symbolSize = categories[1].symbolSize;
+      item.category = 1;
+    }
+    if (item.children && item.children.length) {
+      handleNodes(item.children, categories);
+    }
+  });
+}
+
+// 将nodes由树结构全部展开,生成新的nodes
+const expandNodes = (nodes, item) => {
+  if (item.children && item.children.length) {
+    item.children.forEach((item_, index_) => {
+      expandNodes(nodes, item_);
+      nodes.push(item_);
+    });
+  }
+};
+
+// 给节点克隆虚拟节点(小黄块), 建立根节点---》克隆节点---》子节点的连接关系
+const cloneNode = (item, index, data_) => {
+  item.children.forEach((item_, index_) => {
+    if (item_.children && item_.children.length) {
+      data_.push({
+        name: item_.name,
+        target: item.name + '-' + index + '-_clone',
+      });
+      data_.push({
+        name: item_.name + '-' + index_ + '-_clone',
+        target: item_.name,
+      });
+      cloneNode(item_, index_, data_);
+    } else {
+      data_.push({
+        name: item_.name,
+        target: item.name + '-' + index + '-_clone',
+      });
+    }
+  });
+};
+
+export { createNodes, handleNodes, expandNodes, cloneNode };