@ebiz/designer-components 0.0.48 → 0.0.50

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

@@ -1,118 +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 { 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

@@ -1,142 +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 { 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 +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 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 +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.
- *
- */
-// 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 +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 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

@@ -1,66 +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.
- *
- */
-
-// 图表类型
-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

@@ -1,17 +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 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

@@ -1,138 +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.
- *
- */
-
-/**
- * 处理矩阵热力图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
-}