@ebiz/designer-components 0.0.18-tj.1

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

@@ -0,0 +1,118 @@
+/**
+ * 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 { createNodes, handleNodes, expandNodes, cloneNode } from './utils';
+
+/**
+ * 根据用户的数据生成树型结构数据
+ * @param {*} data
+ * @param {*} baseOption
+ * @returns rootData---树型结构的数据
+ */
+const handleData = (data, baseOption) => {
+  let nodes = [];
+  let links = [];
+  let parentNodeName = '';
+  // 判断用户是否传了categories属性并且设置了对应的symbol和category，如果有，就在接下来的数据处理中，加入到rootData中
+  const categories = baseOption.series[0].categories;
+
+  // 找到根节点
+  parentNodeName = data[0].name;
+
+  const data_ = [{ name: parentNodeName, target: null }];
+  // 给节点克隆虚拟节点(小黄块), 建立根节点---》克隆节点---》子节点的连接关系
+  data.forEach((item, index) => {
+    data_.push({
+      name: item.name + '-' + index + '-_clone',
+      target: item.name,
+    });
+    if (item.children && item.children.length) {
+      cloneNode(item, index, data_);
+    }
+  });
+
+  // 组装links数据
+  data_.forEach((item, index) => {
+    const source = item.name;
+    const target = item.target;
+    links.push({ source: target, target: source });
+  });
+
+  // 生成nodes结构时判断，去重
+  const sourceName = [];
+  // 生成nodes数据结构
+  links.forEach((item, index) => {
+    if (item.target && item.source) {
+      const childArr = [];
+      links.forEach((item_, index_) => {
+        if (item_.source === item.source) {
+          const child = [];
+          createNodes(links, item_, child);
+          childArr.push({ id: item_.target, children: child });
+        }
+      });
+      if (!sourceName.includes(item.source)) {
+        sourceName.push(item.source);
+        if (item.source === parentNodeName) {
+          nodes.push({ id: item.source, children: childArr });
+        }
+      }
+    }
+  });
+
+  // 给节点绑定symbolSize和category
+  nodes.forEach((item, index) => {
+    // 根节点---层级定死为0
+    // 子节点---层级定死为1
+    // _clone---层级定死为categories.length - 1
+    // _child---层级定死为categories.length - 1
+    item.symbolSize = categories[0].symbolSize;
+    item.category = 0;
+    if (item.children && item.children.length) {
+      handleNodes(item.children, categories);
+    }
+  });
+
+  // 根节点数据，后续需要放到树图中生成坐标
+  let rootData = {};
+  rootData = { ...nodes[0] };
+  baseOption.series[0].links = links;
+  return { rootData };
+};
+
+/**
+ * 将获取到的坐标和id匹配起来传给nodes，更新nodes
+ * @param {*} rootData 树型结构的数据
+ * @param {*} baseOption
+ * @param {*} positionArr 返回的节点坐标
+ * @param {*} idArr 返回的节点id，与坐标的index一一对应
+ */
+const updateData = (rootData, baseOption, positionArr, idArr) => {
+  const nodes = [{ ...rootData }];
+  if (rootData.children && rootData.children.length) {
+    rootData.children.forEach((item, index) => {
+      expandNodes(nodes, item);
+      nodes.push(item);
+    });
+  }
+
+  nodes.forEach((item, index) => {
+    idArr.forEach((item_, index_) => {
+      if (item.id === item_) {
+        item.x = positionArr[index_].x;
+        item.y = positionArr[index_].y;
+      }
+    });
+  });
+  baseOption.series[0].data = nodes;
+};
+
+export { handleData, updateData };

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

@@ -0,0 +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 };

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

@@ -0,0 +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;

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

@@ -0,0 +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);
+}
+
+export { mixTree };

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

@@ -0,0 +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 };

package/src/components/charts/components/HeatMapChart/BaseOption.js

@@ -0,0 +1,66 @@
+/**
+ * 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.
+ *
+ */
+
+// 图表类型
+const CHARTTYPE = ['RectangularHeatMapChart', 'CalendarHeatMapChart', 'HexagonHeatMapChart'];
+
+// 基础series
+const SERIESUNIT = {
+  RectangularHeatMapChart: {
+    type: 'scatter',
+    symbol: 'rect',
+    symbolSize: '',
+    cursor: 'pointer',
+    data: [],
+    name:'rectangular'
+  },
+  CalendarHeatMapChart: {
+    name: 'calendar',
+    type: 'heatmap',
+    cursor: 'pointer',
+    label: {
+      show: undefined,
+      color: '',
+    },
+    data: [],
+    emphasis: {
+      itemStyle: {
+        shadowBlur: 10,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+    },
+    itemStyle: {
+      borderColor: '',
+    },
+    progressive: 1000,
+    animation: false,
+  },
+  HexagonHeatMapChart: {
+    type: 'custom',
+    name: 'hexagon',
+    renderItem: undefined,
+    data: [],
+  },
+};
+
+
+
+
+// 热力图的图元颜色
+const SYMBOLCOLOR = {
+  RectangularHeatMapChart: '#F43146',
+  CalendarHeatMapChart: '#1F55B5',
+  HexagonHeatMapChart: ['#FFFFFF', '#448DFF', '#4350EA', '#33307C ', '#242648', '#973152', '#F8364D'],
+};
+
+
+export { SYMBOLCOLOR, CHARTTYPE, SERIESUNIT};

package/src/components/charts/components/HeatMapChart/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.HEAT_MAP)
+
+export default chartToken;

package/src/components/charts/components/HeatMapChart/handleData.js

@@ -0,0 +1,138 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * 处理矩阵热力图data
+ */
+function handleRectData(data) {
+  return data;
+}
+
+/**
+ * 处理日历热力图类目data
+ */
+function handleCategoryName(data) {
+  const defaultArr = [];
+  data.forEach(item => {
+    if (defaultArr.indexOf(item) === -1) {
+      defaultArr.push(item);
+    }
+  });
+  return defaultArr;
+}
+
+/**
+ * 处理日历热力图类目SeriesData
+ */
+function handlecalendarSeriesData(xAxisData, yAxisData, data, keyName) {
+  return data.map(item => {
+    return [xAxisData.indexOf(item[keyName[0]]), yAxisData.indexOf(item[keyName[1]]), item[keyName[2]]];
+  });
+}
+
+/**
+ * 处理日历热力图data
+ */
+function handleCalendarData(data) {
+  const calendarData = [];
+  const keyName = Object.keys(data[0]);
+  // x轴类目数据
+  const xCategoryName = data.map(item => {
+    return item[keyName[0]];
+  });
+  // y轴类目数据
+  const yCategoryName = data.map(item => {
+    return item[keyName[1]];
+  });
+  // 最终x轴数据
+  const xAxisData = handleCategoryName(xCategoryName);
+  // 最终x轴数据
+  const yAxisData = handleCategoryName(yCategoryName);
+  // 最终Series数据
+  const calendarSeriesData = handlecalendarSeriesData(xAxisData, yAxisData, data, keyName);
+  calendarData.push(xAxisData);
+  calendarData.push(yAxisData);
+  calendarData.push(calendarSeriesData);
+  return calendarData;
+}
+
+// 计算六边形的具体中心坐标
+function computeCoordinates(arr, number, halfWidth, r) {
+  return arr.map((item, index) => {
+    // 一组六边形的个数，根据规范第一行的数量和第二行的数量相差1，即(number-1)+number为一组
+    const groupNumber = number * 2 - 1;
+    // 将索引与index取余，用来判断在组的第一行
+    const remainder = index % groupNumber;
+    // 判断所在的分组
+    const group = index / groupNumber;
+    // 当前数据所在的组数
+    const lineNumber = Math.floor(group);
+    if (remainder < number - 1) {
+      return [(remainder + 1) * 2 * halfWidth, (1 + 3 * lineNumber) * r, item.value, r, item];
+    } else {
+      return [
+        ((remainder - number + 1) * 2 + 1) * halfWidth,
+        (1 + 1.5 * (2 * lineNumber + 1)) * r,
+        item.value,
+        r,
+        item,
+      ];
+    }
+  });
+}
+
+/**
+ * 处理蜂窝热力图data
+ */
+function handleHexagonData(data, iChartOption, chartInstance) {
+  // 获取chart容器的宽高
+  const containerWidth = chartInstance.getWidth();
+  const containerHeight = chartInstance.getHeight();
+  // 处理的数据
+  const hexagonData = [];
+  // 每行的图形个数
+  const number = iChartOption.quantity || 40;
+  // x轴最大刻度
+  const xValue = containerWidth;
+  // y轴最大刻度
+  const yValue = containerHeight;
+  const initialData = data;
+  const x = xValue / (2 * number);
+  // r为蜂窝的半径，圆的半径，正方形的边长的一半
+  const r = x / Math.sqrt(0.75);
+  // 圆心的半径
+  const coordinatesArr = computeCoordinates(initialData, number, x, r);
+  hexagonData.push(coordinatesArr);
+  hexagonData.push(xValue);
+  hexagonData.push(yValue);
+  hexagonData.push(r);
+  return hexagonData;
+}
+
+// 数据的处理函数
+const dataHandler = {
+  RectangularHeatMapChart: handleRectData,
+  CalendarHeatMapChart: handleCalendarData,
+  HexagonHeatMapChart: handleHexagonData,
+};
+
+/**
+ * 从数据中拿出chart需要的数据
+ */
+export function getData(type, iChartOption, chartInstance) {
+  // 蜂窝热力图数据特殊处理
+  if (iChartOption.data && iChartOption.data.length > 0) {
+    const chartData = dataHandler[type](iChartOption.data, iChartOption, chartInstance)
+    return chartData;
+  }
+  return null
+}